@salutejs/sdds-serv 0.314.0-canary.1741.15775036215.0 → 0.314.0-canary.1973.15677961605.0

package/emotion/cjs/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,751 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma } from '@salutejs/plasma-icons';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Dropdown } from '../Dropdown/Dropdown';
+import { Counter } from '../Counter/Counter';
+
+import { Tabs } from './Tabs';
+import { TabItem } from './TabItem';
+
+const clips = ['none', 'scroll', 'showAll'];
+const headerClips = ['none', 'scroll'];
+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 = {
+    itemQuantity: number;
+    contentLeft: string;
+    contentRight: string;
+    stretch: boolean;
+    helperText: string;
+    maxItemWidth: string;
+};
+
+const contentLeftOptions = ['none', 'icon'];
+const contentRightOptions = ['none', 'counter', 'icon'];
+const labels = ['Label', 'Middle label', 'Very long label'];
+
+const getContentLeft = (contentLeftOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    return contentLeftOption === 'icon' ? <IconPlasma size={iconSize} color="inherit" /> : undefined;
+};
+
+const getContentRight = (contentRightOption: string, size: Size) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+    const counterSize = size === 'xs' ? 'xxs' : 'xs';
+
+    switch (contentRightOption) {
+        case 'icon':
+            return <IconPlasma size={iconSize} color="inherit" />;
+        case 'counter':
+            return <Counter size={counterSize} count={1} view="positive" />;
+        default:
+            return undefined;
+    }
+};
+
+type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
+type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
+type VerticalStoryTabsProps = StoryTabsProps & { height: string };
+
+const meta: Meta<StoryTabsProps> = {
+    title: 'Navigation/Tabs',
+    component: Tabs,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'helperText', eq: '' },
+        },
+        maxItemWidth: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
+        ...disableProps([
+            'orientation',
+            'tabItemContentLeft',
+            'pilled',
+            'animated',
+            'view',
+            'as',
+            'forwardedAs',
+            'outsideScroll',
+            'index',
+        ]),
+    },
+};
+
+export default meta;
+
+const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+        maxItemWidth,
+        helperText,
+        clip,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+            {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}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+        width,
+        maxItemWidth,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+            {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}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+        maxItemWidth,
+    } = 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} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+            {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}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${i + 1}`}
+                    </TabItem>
+                );
+            })}
+            {dropdownItems.length > 0 && (
+                <div style={{ marginLeft: '1.75rem' }}>
+                    <Dropdown
+                        size={size as Size}
+                        items={dropdownItems}
+                        onItemSelect={(item) => setIndex(item.value as number)}
+                    >
+                        <TabItem
+                            key="item:ShowAll"
+                            view="divider"
+                            tabIndex={!disabled ? 0 : -1}
+                            disabled={disabled}
+                            size={size as Size}
+                            maxItemWidth="auto"
+                        >
+                            ShowAll
+                        </TabItem>
+                    </Dropdown>
+                </div>
+            )}
+        </Tabs>
+    );
+};
+
+export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
+    args: {
+        size: 'xs',
+        disabled: false,
+        hasDivider: true,
+        helperText: '',
+        itemQuantity: 6,
+        stretch: false,
+        width: '15rem',
+        maxItemWidth: '',
+    },
+    argTypes: {
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        contentRight: {
+            options: contentRightOptions,
+            control: {
+                type: 'select',
+            },
+        },
+        clip: {
+            options: clips,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'stretch', truthy: false },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHorizontalScroll {...args} />;
+            case 'showAll':
+                return <StoryHorizontalShowAll {...args} />;
+            default:
+                return <StoryHorizontalDefault {...args} />;
+        }
+    },
+};
+
+const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+        maxItemWidth,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs orientation="vertical" hasDivider={hasDivider} size={size as Size} disabled={disabled}>
+            {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}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+        height,
+        maxItemWidth,
+    } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs
+            orientation="vertical"
+            size={size as Size}
+            disabled={disabled}
+            clip={clip}
+            hasDivider={hasDivider}
+            style={{ height }}
+        >
+            {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}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${i + 1}`}
+                    </TabItem>
+                );
+            })}
+        </Tabs>
+    );
+};
+
+const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        clip,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        helperText,
+        maxItemWidth,
+    } = 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} 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}
+                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                            size={size as Size}
+                            maxItemWidth={maxItemWidth}
+                        >
+                            {`${labels[i % labels.length]} ${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}
+                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                        contentRight={getContentRight(contentRightOption, size as Size)}
+                        size={size as Size}
+                        maxItemWidth={maxItemWidth}
+                    >
+                        {`${labels[i % labels.length]} ${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}
+                        maxItemWidth="auto"
+                    >
+                        ShowAll
+                    </TabItem>
+                </Dropdown>
+            )}
+        </Tabs>
+    );
+};
+
+export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
+    args: {
+        size: 'xs',
+        disabled: false,
+        hasDivider: true,
+        itemQuantity: 6,
+        orientation: 'vertical',
+        helperText: '',
+        height: '10rem',
+        maxItemWidth: '',
+    },
+    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,
+            },
+        },
+        height: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryVerticalScroll {...args} />;
+            case 'showAll':
+                return <StoryVerticalShowAll {...args} />;
+            default:
+                return <StoryVerticalDefault {...args} />;
+        }
+    },
+};
+
+const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, maxItemWidth } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                    maxItemWidth={maxItemWidth}
+                >
+                    {`${labels[i % labels.length]} ${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
+    const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props;
+    const items = Array(itemQuantity).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+            {items.map((_, i) => (
+                <TabItem
+                    key={`item:${i}`}
+                    view="clear"
+                    selected={i === index}
+                    onClick={() => !disabled && setIndex(i)}
+                    tabIndex={!disabled ? 0 : -1}
+                    disabled={disabled}
+                    value={helperText}
+                    size={size as HeaderSize}
+                    maxItemWidth={maxItemWidth}
+                >
+                    {`${labels[i % labels.length]} ${i + 1}`}
+                </TabItem>
+            ))}
+        </Tabs>
+    );
+};
+
+export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+    args: {
+        size: 'h5',
+        disabled: false,
+        helperText: '',
+        itemQuantity: 4,
+        width: '12rem',
+        maxItemWidth: '',
+    },
+    argTypes: {
+        clip: {
+            options: headerClips,
+            control: {
+                type: 'select',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+            if: { arg: 'clip', eq: 'scroll' },
+        },
+        stretch: {
+            table: {
+                disable: true,
+            },
+        },
+        contentLeft: {
+            table: {
+                disable: true,
+            },
+        },
+        contentRight: {
+            table: {
+                disable: true,
+            },
+        },
+        hasDivider: {
+            table: {
+                disable: true,
+            },
+        },
+        size: {
+            options: headerSizes,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        switch (args.clip) {
+            case 'scroll':
+                return <StoryHeaderScroll {...args} />;
+            default:
+                return <StoryHeaderDefault {...args} />;
+        }
+    },
+};