@salutejs/plasma-new-hope 0.157.0-dev.0 → 0.157.1-canary.1374.11123970444.0

package/emotion/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';
 
@@ -21,14 +18,16 @@ const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 type Size = typeof sizes[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 +43,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 +55,23 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
-        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
+        ...disableProps([
+            'orientation',
+            'tabItemContentLeft',
+            'pilled',
+            'animated',
+            'view',
+            'as',
+            'forwardedAs',
+            'outsideScroll',
+            'index',
+        ]),
     },
 };
 
 export default meta;
 
-const StoryDefault = (props: StoryTabsProps) => {
+const StoryHorizontalDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -86,12 +80,13 @@ 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}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size} index={index}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -100,6 +95,7 @@ const StoryDefault = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -111,7 +107,7 @@ const StoryDefault = (props: StoryTabsProps) => {
     );
 };
 
-const StoryScroll = (props: StoryTabsProps) => {
+const StoryHorizontalScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -120,6 +116,7 @@ const StoryScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
+        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -140,6 +137,7 @@ const StoryScroll = (props: StoryTabsProps) => {
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
+                    value={helperText}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
@@ -151,7 +149,7 @@ const StoryScroll = (props: StoryTabsProps) => {
     );
 };
 
-const StoryShowAll = (props: StoryTabsProps) => {
+const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -160,6 +158,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
+        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -190,6 +189,7 @@ const StoryShowAll = (props: StoryTabsProps) => {
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size}
+                    value={helperText}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -217,14 +217,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 +255,228 @@ export const Default: StoryObj<StoryTabsProps> = {
     render: (args) => {
         switch (args.clip) {
             case 'scroll':
-                return <StoryScroll {...args} />;
+                return <StoryHorizontalScroll {...args} />;
             case 'showAll':
-                return <StoryShowAll {...args} />;
+                return <StoryHorizontalShowAll {...args} />;
             default:
-                return <StoryDefault {...args} />;
+                return <StoryHorizontalDefault {...args} />;
+        }
+    },
+};
+
+const StoryVerticalDefault = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        stretch,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <div style={{ height: '100vh' }}>
+            <Tabs
+                orientation="vertical"
+                hasDivider={hasDivider}
+                size={size as Size}
+                disabled={disabled}
+                stretch={stretch}
+                contentLeft={getContentLeft(contentLeftOption, size as Size)}
+            >
+                {items.map((_, i) => (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        size={size as Size}
+                        disabled={disabled}
+                        value={helperText}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                ))}
+            </Tabs>
+        </div>
+    );
+};
+
+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 (
+        <div style={{ height: '100vh' }}>
+            <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) => (
+                    <TabItem
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        view="divider"
+                        selected={i === index}
+                        onClick={() => !disabled && setIndex(i)}
+                        tabIndex={!disabled ? 0 : -1}
+                        size={size as Size}
+                        disabled={disabled}
+                        value={helperText}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                ))}
+            </Tabs>
+        </div>
+    );
+};
+
+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) => (
+                <TabItem
+                    orientation="vertical"
+                    key={`item:${i}`}
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    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 <StoryVerticalShowAll {...args} />;
+            default:
+                return <StoryVerticalDefault {...args} />;
         }
     },
 };
@@ -259,12 +489,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}`}
@@ -298,6 +529,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} />,
 };