@salutejs/plasma-new-hope 0.91.1-canary.1265.9664294667.0 → 0.92.0-canary.1233.9662754485.0

package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx

@@ -1,272 +1,842 @@
 import React, { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
-import { mergeConfig } from '../../../../engines';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { Button } from '../Button/Button';
-import { SelectPrimitiveValue, selectConfig } from '../../../../components/Select';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { IconDone, IconClose } from '../../../../components/_Icon';
+import './style.css';
 
-import { Select, SelectDivider, SelectItem } from './Select';
-import { config } from './Select.config';
+import { WithTheme } from '../../../_helpers';
 
-const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
-const enumerations: Array<string> = ['comma', 'chip'];
+import { Select, SelectNotFoundContent } from './Select';
 
-type StorySelectPropsCustom = {
-    skidding?: number;
-    distance?: number;
+type StorySelectProps = ComponentProps<typeof Select> & {
+    enableContentLeft?: boolean;
 };
 
-type StorySelectProps = ComponentProps<typeof Select> & StorySelectPropsCustom;
+const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white'];
+const size = ['xs', 's', 'm', 'l'];
+const labelPlacement = ['inner', 'outer'];
+const chip = ['default', 'secondary', 'accent'];
+const variant = ['normal', 'tight'];
 
 const meta: Meta<StorySelectProps> = {
     title: 'plasma_web/Select',
     decorators: [WithTheme],
     component: Select,
     argTypes: {
-        placement: {
-            options: placements,
+        target: {
+            options: ['button', 'textfield'],
             control: {
                 type: 'select',
             },
         },
-        enumerationType: {
-            options: enumerations,
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: view,
+            control: {
+                type: 'select',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacement,
+            control: {
+                type: 'select',
+            },
+        },
+        chipView: {
+            options: chip,
+            control: {
+                type: 'select',
+            },
+        },
+        variant: {
+            options: variant,
             control: {
                 type: 'select',
             },
         },
-        ...argTypesFromConfig(mergeConfig(selectConfig, config)),
     },
     args: {
-        usePortal: false,
-        disabled: false,
-        readOnly: false,
+        target: 'button',
         label: 'Label',
-        target: 'button-like',
-        enumerationType: 'comma',
+        labelPlacement: 'outer',
+        placeholder: 'Placeholder',
+        helperText: 'Helper text',
         size: 'm',
         view: 'default',
-        placement: 'bottom',
+        chipView: 'default',
+        enableContentLeft: false,
+        isTargetAmount: false,
+        variant: 'normal',
+        disabled: false,
     },
 };
 
 export default meta;
 
-const onChangeAction = action('onChange');
+const items = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'south_america',
+        label: 'Южная Америка',
+        items: [
+            {
+                value: 'brazil',
+                label: 'Бразилия',
+                items: [
+                    {
+                        value: 'rio_de_janeiro',
+                        label: 'Рио-де-Жанейро',
+                    },
+                    {
+                        value: 'sao_paulo',
+                        label: 'Сан-Паулу',
+                    },
+                ],
+            },
+            {
+                value: 'argentina',
+                label: 'Аргентина',
+                items: [
+                    {
+                        value: 'buenos_aires',
+                        label: 'Буэнос-Айрес',
+                    },
+                    {
+                        value: 'cordoba',
+                        label: 'Кордова',
+                    },
+                ],
+            },
+            {
+                value: 'colombia',
+                label: 'Колумбия',
+                items: [
+                    {
+                        value: 'bogota',
+                        label: 'Богота',
+                    },
+                    {
+                        value: 'medellin',
+                        label: 'Медельин',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'europe',
+        label: 'Европа',
+        items: [
+            {
+                value: 'france',
+                label: 'Франция',
+                items: [
+                    {
+                        value: 'paris',
+                        label: 'Париж',
+                    },
+                    {
+                        value: 'lyon',
+                        label: 'Лион',
+                    },
+                ],
+            },
+            {
+                value: 'germany',
+                label: 'Германия',
+                items: [
+                    {
+                        value: 'berlin',
+                        label: 'Берлин',
+                    },
+                    {
+                        value: 'munich',
+                        label: 'Мюнхен',
+                    },
+                ],
+            },
+            {
+                value: 'italy',
+                label: 'Италия',
+                items: [
+                    {
+                        value: 'rome',
+                        label: 'Рим',
+                    },
+                    {
+                        value: 'milan',
+                        label: 'Милан',
+                    },
+                ],
+            },
+            {
+                value: 'spain',
+                label: 'Испания',
+                items: [
+                    {
+                        value: 'madrid',
+                        label: 'Мадрид',
+                    },
+                    {
+                        value: 'barcelona',
+                        label: 'Барселона',
+                    },
+                ],
+            },
+            {
+                value: 'united_kingdom',
+                label: 'Великобритания',
+                items: [
+                    {
+                        value: 'london',
+                        label: 'Лондон',
+                    },
+                    {
+                        value: 'manchester',
+                        label: 'Манчестер',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'asia',
+        label: 'Азия',
+        items: [
+            {
+                value: 'china',
+                label: 'Китай',
+                items: [
+                    {
+                        value: 'beijing',
+                        label: 'Пекин',
+                    },
+                    {
+                        value: 'shanghai',
+                        label: 'Шанхай',
+                    },
+                ],
+            },
+            {
+                value: 'japan',
+                label: 'Япония',
+                items: [
+                    {
+                        value: 'tokyo',
+                        label: 'Токио',
+                    },
+                    {
+                        value: 'osaka',
+                        label: 'Осака',
+                    },
+                ],
+            },
+            {
+                value: 'india',
+                label: 'Индия',
+                items: [
+                    {
+                        value: 'delhi',
+                        label: 'Дели',
+                    },
+                    {
+                        value: 'mumbai',
+                        label: 'Мумбаи',
+                    },
+                ],
+            },
+            {
+                value: 'south_korea',
+                label: 'Южная Корея',
+                items: [
+                    {
+                        value: 'seoul',
+                        label: 'Сеул',
+                    },
+                    {
+                        value: 'busan',
+                        label: 'Пусан',
+                    },
+                ],
+            },
+            {
+                value: 'thailand',
+                label: 'Таиланд',
+                items: [
+                    {
+                        value: 'bangkok',
+                        label: 'Бангкок',
+                    },
+                    {
+                        value: 'phuket',
+                        label: 'Пхукет',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+        isDisabled: true,
+    },
+];
+
+const SingleStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState('');
 
-const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
-    xs: 'xs',
-    s: 's',
-    m: 's',
-    l: 's',
+    return (
+        <div style={{ width: '300px' }}>
+            <Select
+                {...args}
+                items={items}
+                value={value}
+                onChange={setValue}
+                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+            />
+        </div>
+    );
 };
 
-const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
-    xs: 's',
-    s: 'm',
-    m: 'm',
-    l: 'm',
+export const Single: StoryObj<StorySelectProps> = {
+    render: (args) => <SingleStory {...args} />,
 };
 
-const getSelectItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StorySingle = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
-
-    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
+const MultiselectStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState<Array<string>>([]);
 
     return (
-        <div style={{ width: '50%' }} id="portal-test">
+        <div style={{ width: '300px' }}>
             <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
+                {...args}
+                items={items}
                 value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <SelectItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <SelectItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? <IconDone size={iconDoneToSelectSizeMap[size]} /> : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Select>
+                onChange={setValue}
+                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+            />
         </div>
     );
 };
 
-export const Single: StoryObj<StorySelectProps> = {
-    render: (args) => <StorySingle {...args} />,
+export const Multiselect: StoryObj<StorySelectProps> = {
+    render: (args) => <MultiselectStory {...args} />,
 };
 
-const StoryMultiple = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, enumerationType, size = 'm', view, target } = args;
+const PredefinedStory = (args: StorySelectProps) => {
+    const [valueSingle, setValueSingle] = useState('paris');
+    const [valueMultiple, setValueMultiple] = useState(['paris', 'north_america']);
 
-    const [value, setValue] = useState<Array<SelectPrimitiveValue> | undefined>(['item_2', 'item_3']);
+    return (
+        <div style={{ width: '300px' }}>
+            <Select
+                {...args}
+                items={items}
+                value={valueSingle}
+                onChange={setValueSingle}
+                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+            />
 
-    const onChangeValue = (newValue?: Array<SelectPrimitiveValue>) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
+            <br />
 
-    return (
-        <div style={{ width: '50%' }}>
             <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="multiple"
-                value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                enumerationType={enumerationType}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                {getSelectItems('item', 6).map((item) => (
-                    <SelectItem
-                        key={item.value}
-                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Select>
+                {...args}
+                items={items}
+                value={valueMultiple}
+                onChange={setValueMultiple}
+                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+            />
         </div>
     );
 };
 
-export const Multiple: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryMultiple {...args} />,
+export const Predefined: StoryObj<StorySelectProps> = {
+    render: (args) => <PredefinedStory {...args} />,
 };
 
-const StoryNative = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
-
-    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
+const EmptyListStory = (args: StorySelectProps) => {
+    const [valueSingle, setValueSingle] = useState('');
 
     return (
-        <div style={{ width: '50%' }}>
+        <div style={{ width: '300px' }}>
             <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="native"
-                value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                {getSelectItems('item', 6).map((item) => (
-                    <option key={item.value} value={item.value}>
-                        {item.child}
-                    </option>
-                ))}
-            </Select>
+                {...args}
+                items={[]}
+                value={valueSingle}
+                onChange={setValueSingle}
+                notFoundContent={
+                    <SelectNotFoundContent
+                        icon={<IconPlaceholder size="s" />}
+                        description="Description"
+                        buttonText="Label"
+                    />
+                }
+                contentLeft={args.enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+            />
         </div>
     );
 };
 
-export const Native: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryNative {...args} />,
+export const EmptyList: StoryObj<StorySelectProps> = {
+    render: (args) => <EmptyListStory {...args} />,
 };
 
-const StoryControlledOpen = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
+const CommonStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState('');
+    const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
 
-    const [opened, setOpened] = useState(true);
-    const [iconColor, setIconColor] = useState('green');
-    const [value, setV] = useState<string | number | boolean | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setV(newValue);
-        onChangeAction(newValue);
-    };
-    const onToggle = (openValue: boolean) => setOpened(openValue);
-    const onOpen = () => setOpened((v) => !v);
-    const onMouseEnter = () => setIconColor('red');
-    const onMouseLeave = () => setIconColor('green');
+    const { enableContentLeft } = args;
 
     return (
-        <>
-            <Button onClick={onOpen}>Open select</Button>
-            <div style={{ width: '50%' }}>
-                <Select
-                    frame="theme-root"
-                    usePortal={usePortal}
-                    value={value}
-                    opened={opened}
-                    onToggle={onToggle}
-                    placement={placement}
-                    label={label}
-                    size={size}
-                    view={view}
-                    target={target}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    onChangeValue={onChangeValue}
-                >
-                    {getSelectItems('item', 6).map((item) => (
-                        <SelectItem
-                            key={item.value}
-                            contentLeft={
-                                item.value === value ? <IconDone size={iconDoneToSelectSizeMap[size]} /> : undefined
-                            }
-                            value={item.value}
-                            text={item.child}
-                        />
-                    ))}
-                    <SelectDivider />
-                    <SelectItem value="custom">
-                        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-                            <IconClose color={iconColor} />
-                        </div>
-                        <div>Custom item element</div>
-                    </SelectItem>
-                </Select>
-            </div>
-        </>
+        <div className="container">
+            <table>
+                <thead>
+                    <tr>
+                        <th>View &#8595;</th>
+                        <th>Single Button</th>
+                        <th>Multiple Button</th>
+                        <th>Single Textfield</th>
+                        <th>Multiple Textfield</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr>
+                        <td>Default</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="default"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="default"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="default"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="default"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Accent</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="accent"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="accent"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td>Secondary</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="secondary"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="secondary"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td>Clear</td>
+
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="clear"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="clear"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td>Positive</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="positive"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="positive"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="positive"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="positive"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Warning</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="warning"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="warning"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="warning"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="warning"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Negative</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="negative"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="negative"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="negative"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="negative"
+                                    target="textfield"
+                                    contentLeft={enableContentLeft ? <IconPlaceholder size="s" /> : undefined}
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Dark</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="dark"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="dark"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td>Black</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="black"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="black"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td>White</td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect={false}
+                                    items={items}
+                                    value={value}
+                                    onChange={setValue}
+                                    view="white"
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <div style={{ width: '200px' }}>
+                                <Select
+                                    {...args}
+                                    multiselect
+                                    items={items}
+                                    value={valueMultiple}
+                                    onChange={setValueMultiple}
+                                    view="white"
+                                />
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     );
 };
 
-export const ControlledOpen: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryControlledOpen {...args} />,
+export const Common: StoryObj<StorySelectProps> = {
+    parameters: {
+        controls: {
+            include: [
+                'size',
+                'enableContentLeft',
+                'chipView',
+                'label',
+                'labelPlacement',
+                'placeholder',
+                'helperText',
+                'isTargetAmount',
+                'variant',
+                'disabled',
+            ],
+        },
+    },
+    argTypes: {
+        size: {
+            options: size,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        size: 'm',
+    },
+    render: (args) => <CommonStory {...args} />,
 };