@salutejs/plasma-new-hope 0.160.0 → 0.160.1-canary.1374.11174853993.0

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

@@ -3,14 +3,11 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { tabsConfig } from '../../../../components/Tabs';
-import { mergeConfig } from '../../../../engines';
-import { argTypesFromConfig, WithTheme } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { IconMic } from '../../../../components/_Icon';
 import { Dropdown } from '../Dropdown/Dropdown';
 import { Counter } from '../Counter/Counter';
 
-import { config } from './Tabs.config';
 import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
@@ -19,16 +16,19 @@ const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
 type Size = typeof sizes[number];
+type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
-    hasDivider: boolean;
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
+    stretch: boolean;
+    helperText: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
+const contentRightOptions = ['none', 'counter', 'icon'];
 
 const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
@@ -44,8 +44,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
             return <IconMic size={iconSize} color="inherit" />;
         case 'counter':
             return <Counter size={counterSize} count={1} view="positive" />;
-        case 'text':
-            return <div>Text</div>;
         default:
             return undefined;
     }
@@ -58,26 +56,30 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
-        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
+        ...disableProps([
+            'orientation',
+            'tabItemContentLeft',
+            'pilled',
+            'animated',
+            'view',
+            'as',
+            'forwardedAs',
+            'outsideScroll',
+            'index',
+        ]),
         contentRight: {
             options: contentRightOptions,
             control: {
                 type: 'select',
             },
+            if: { arg: 'helperText', eq: '' },
         },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
 export default meta;
 
-const StoryDefault = (props: StoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -86,32 +88,53 @@ const StoryDefault = (props: StoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
         <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="divider"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
         </Tabs>
     );
 };
 
-const StoryScroll = (props: StoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -120,6 +143,7 @@ const StoryScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -132,26 +156,46 @@ const StoryScroll = (props: StoryTabsProps) => {
             size={size}
             style={{ width: '15rem' }}
         >
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="divider"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
         </Tabs>
     );
 };
 
-const StoryShowAll = (props: StoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -160,6 +204,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -179,21 +224,41 @@ const StoryShowAll = (props: StoryTabsProps) => {
 
     return (
         <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
-            {visibleItems.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="divider"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                    contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
+            {visibleItems.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
             {dropdownItems.length > 0 && (
                 <div style={{ marginLeft: '1.75rem' }}>
                     <Dropdown
@@ -206,7 +271,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
                             view="divider"
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
-                            size={size}
+                            size={size as Size}
                         >
                             ShowAll
                         </TabItem>
@@ -217,14 +282,27 @@ const StoryShowAll = (props: StoryTabsProps) => {
     );
 };
 
-export const Default: StoryObj<StoryTabsProps> = {
+export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'xs',
         disabled: false,
         hasDivider: true,
+        helperText: '',
         itemQuantity: 8,
     },
     argTypes: {
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
         clip: {
             options: clips,
             control: {
@@ -242,11 +320,280 @@ export const Default: StoryObj<StoryTabsProps> = {
     render: (args) => {
         switch (args.clip) {
             case 'scroll':
-                return <StoryScroll {...args} />;
+                return <StoryHorizontalScroll {...args} />;
+            case 'showAll':
+                return <StoryHorizontalShowAll {...args} />;
+            default:
+                return <StoryHorizontalDefault {...args} />;
+        }
+    },
+};
+
+const StoryVerticalDefault = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs
+            orientation="vertical"
+            hasDivider={hasDivider}
+            size={size as Size}
+            disabled={disabled}
+            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+        >
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryVerticalScroll = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs
+            orientation="vertical"
+            size={size as Size}
+            disabled={disabled}
+            clip={clip}
+            style={{ height: '10rem' }}
+            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+            hasDivider={hasDivider}
+        >
+            {items.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryVerticalShowAll = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+    } = props;
+    const maxItemQuantity = 3;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    const visibleItems = items.slice(0, maxItemQuantity);
+    const otherItems = items.slice(maxItemQuantity);
+
+    const dropdownItems = otherItems.map((_, i) => {
+        const itemIndex = maxItemQuantity + i;
+
+        return {
+            label: `Label${itemIndex + 1}`,
+            value: itemIndex,
+        };
+    });
+
+    return (
+        <Tabs
+            clip={clip}
+            orientation="vertical"
+            size={size as Size}
+            disabled={disabled}
+            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+            hasDivider={hasDivider}
+        >
+            {visibleItems.map((_, i) => {
+                if (helperText !== '') {
+                    return (
+                        <TabItem
+                            orientation="vertical"
+                            key={`item:${i}`}
+                            view="divider"
+                            selected={i === index}
+                            onClick={() => !disabled && setIndex(i)}
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            value={helperText}
+                            size={size as Size}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    );
+                }
+
+                return (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                );
+            })}
+            {dropdownItems.length > 0 && (
+                <Dropdown
+                    size={size as Size}
+                    items={dropdownItems}
+                    onItemSelect={(item) => setIndex(item.value as number)}
+                    placement="right"
+                >
+                    <TabItem
+                        orientation="vertical"
+                        key="item:ShowAll"
+                        tabIndex={!disabled ? 0 : -1}
+                        disabled={disabled}
+                        size={size as Size}
+                    >
+                        ShowAll
+                    </TabItem>
+                </Dropdown>
+            )}
+        </Tabs>
+    );
+};
+
+export const VerticalTabs: StoryObj<StoryTabsProps> = {
+    args: {
+        size: 'xs',
+        disabled: false,
+        hasDivider: true,
+        itemQuantity: 8,
+        orientation: 'vertical',
+        helperText: '',
+    },
+    argTypes: {
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        clip: {
+            options: clips,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryVerticalScroll {...args} />;
             case 'showAll':
-                return <StoryShowAll {...args} />;
+                return <StoryVerticalShowAll {...args} />;
             default:
-                return <StoryDefault {...args} />;
+                return <StoryVerticalDefault {...args} />;
         }
     },
 };
@@ -259,12 +606,13 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
+        stretch,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -275,7 +623,7 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     disabled={disabled}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size}
+                    size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -298,6 +646,23 @@ export const HeaderTabs: StoryObj<StoryTabsProps> = {
                 type: 'select',
             },
         },
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        clip: {
+            table: {
+                disable: true,
+            },
+        },
     },
     render: (args) => <StoryHeaderTabs {...args} />,
 };