@salutejs/plasma-new-hope 0.162.3-canary.1374.11254951530.0 → 0.163.0-canary.1452.11263420833.0

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

@@ -3,11 +3,14 @@ import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { tabsConfig } from '../../../../components/Tabs';
+import { mergeConfig } from '../../../../engines';
+import { argTypesFromConfig, 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';
 
@@ -16,19 +19,16 @@ 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;
     hasDivider: boolean;
+    itemQuantity: number;
     contentLeft: string;
     contentRight: string;
-    stretch: boolean;
-    helperText: string;
 };
 
 const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'counter', 'icon'];
+const contentRightOptions = ['none', 'text', 'counter', 'icon'];
 
 const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
@@ -44,6 +44,8 @@ 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;
     }
@@ -56,30 +58,26 @@ const meta: Meta<StoryTabsProps> = {
     component: Tabs,
     decorators: [WithTheme],
     argTypes: {
-        ...disableProps([
-            'orientation',
-            'tabItemContentLeft',
-            'pilled',
-            'animated',
-            'view',
-            'as',
-            'forwardedAs',
-            'outsideScroll',
-            'index',
-        ]),
+        ...argTypesFromConfig(mergeConfig(tabsConfig, config)),
+        contentLeft: {
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
+            },
+        },
         contentRight: {
             options: contentRightOptions,
             control: {
                 type: 'select',
             },
-            if: { arg: 'helperText', eq: '' },
         },
+        ...disableProps(['itemsNumber', 'pilled', 'animated', 'view']),
     },
 };
 
 export default meta;
 
-const StoryHorizontalDefault = (props: StoryTabsProps) => {
+const StoryDefault = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -88,53 +86,32 @@ const StoryHorizontalDefault = (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) => {
-                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>
-                );
-            })}
+            {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>
+            ))}
         </Tabs>
     );
 };
 
-const StoryHorizontalScroll = (props: StoryTabsProps) => {
+const StoryScroll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -143,7 +120,6 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -156,46 +132,26 @@ const StoryHorizontalScroll = (props: StoryTabsProps) => {
             size={size}
             style={{ width: '15rem' }}
         >
-            {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>
-                );
-            })}
+            {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>
+            ))}
         </Tabs>
     );
 };
 
-const StoryHorizontalShowAll = (props: StoryTabsProps) => {
+const StoryShowAll = (props: StoryTabsProps) => {
     const {
         disabled,
         itemQuantity,
@@ -204,7 +160,6 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
         contentLeft: contentLeftOption,
         contentRight: contentRightOption,
         hasDivider,
-        helperText,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -224,41 +179,21 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
 
     return (
         <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} 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}
-                        >
-                            {`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>
-                );
-            })}
+            {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>
+            ))}
             {dropdownItems.length > 0 && (
                 <div style={{ marginLeft: '1.75rem' }}>
                     <Dropdown
@@ -271,7 +206,7 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
                             view="divider"
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
-                            size={size as Size}
+                            size={size}
                         >
                             ShowAll
                         </TabItem>
@@ -282,27 +217,14 @@ const StoryHorizontalShowAll = (props: StoryTabsProps) => {
     );
 };
 
-export const HorizontalTabs: StoryObj<StoryTabsProps> = {
+export const Default: 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: {
@@ -320,272 +242,11 @@ export const HorizontalTabs: StoryObj<StoryTabsProps> = {
     render: (args) => {
         switch (args.clip) {
             case 'scroll':
-                return <StoryHorizontalScroll {...args} />;
+                return <StoryScroll {...args} />;
             case 'showAll':
-                return <StoryHorizontalShowAll {...args} />;
+                return <StoryShowAll {...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}>
-            {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}
-                        >
-                            {`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}
-                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                        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' }}
-            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}
-                            contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                            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}
-                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                        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} 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}
-                        >
-                            {`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}
-                        contentLeft={getContentLeft(contentLeftOption, size as Size)}
-                        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} />;
+                return <StoryDefault {...args} />;
         }
     },
 };
@@ -598,13 +259,12 @@ 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} stretch={stretch}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -615,7 +275,7 @@ const StoryHeaderTabs = (props: StoryTabsProps) => {
                     disabled={disabled}
                     contentLeft={getContentLeft(contentLeftOption, size as Size)}
                     contentRight={getContentRight(contentRightOption, size as Size)}
-                    size={size as HeaderSize}
+                    size={size}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -638,23 +298,6 @@ 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} />,
 };

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabsController.js

@@ -5,11 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabsController = void 0;
 var _Tabs = /*#__PURE__*/require("../../../../components/Tabs");
-var _engines = /*#__PURE__*/require("../../../../engines");
-var _HorizontalTabs = /*#__PURE__*/require("./horizontal/HorizontalTabs.config");
-var _HorizontalTabItem = /*#__PURE__*/require("./horizontal/HorizontalTabItem.config");
-var mergedHorizontalTabsConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabsConfig, _HorizontalTabs.config);
-var HorizontalTabs = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabsConfig);
-var mergedHorizontalTabItemConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Tabs.horizontalTabItemConfig, _HorizontalTabItem.config);
-var HorizontalTabItem = /*#__PURE__*/(0, _engines.component)(mergedHorizontalTabItemConfig);
-var TabsController = exports.TabsController = /*#__PURE__*/(0, _Tabs.createTabsController)(HorizontalTabs, HorizontalTabItem);
+var _Tabs2 = /*#__PURE__*/require("./Tabs");
+var _TabItem = /*#__PURE__*/require("./TabItem");
+var TabsController = exports.TabsController = /*#__PURE__*/(0, _Tabs.createTabsController)(_Tabs2.Tabs, _TabItem.TabItem);