import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductConfigurator from '../ProductConfigurator';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productConfiguratorMock,
    productConfiguratorNoAddToCartCartMock,
    productConfiguratorBackFromCartMock,
    productConfiguratorNoSelectedEditionsMock,
    productConfiguratorWithoutAddons,
    productConfiguratorUpgradeMock } from '../../../../mocks/product/productConfigurator';
import * as ProductConfiguratorStories from './ProductConfigurator.stories';

<Meta of={ProductConfiguratorStories} />

# ProductConfigurator

<br />

## `ProductConfigurators` are used to display and select from the available configurations for a product.

<br />

### Default

<Canvas>
  <Story of={ProductConfiguratorStories.Default} />
</Canvas>

### Without add to cart

<Canvas>
  <Story of={ProductConfiguratorStories.WithoutAddToCart} />
</Canvas>

### Back from cart

<Canvas>
  <Story of={ProductConfiguratorStories.BackFromCart} />
</Canvas>

### Without selected edition

<Canvas>
  <Story of={ProductConfiguratorStories.WithoutSelectedEdition} />
</Canvas>

### Without addons

<Canvas>
  <Story of={ProductConfiguratorStories.WithoutAddons} />
</Canvas>

### Upgrade

<Canvas>
  <Story of={ProductConfiguratorStories.UpgradeButton} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="productConfiguratorData" code={productConfiguratorMock} />

```jsx
import ProductConfigurator
from '@appdirect/sfb-theme-components/src/components/product-configurator/ProductConfigurator';

<ProductConfigurator data={productConfiguratorData} />

```

## Props

<ArgsTable of={ProductConfigurator} />
