PLASMA-3443: Общий подход к созданию stories

packages/plasma-b2c/.storybook/main.ts

@@ -1,5 +1,6 @@
 import { mergeConfig } from 'vite';
 import type { StorybookConfig } from '@storybook/react-vite';
+import * as path from 'node:path';
 
 const config: StorybookConfig = {
     staticDirs: ['public'],
@@ -25,6 +26,9 @@ const config: StorybookConfig = {
             resolve: {
                 dedupe: ['react', 'react-dom', 'styled-components'],
                 preserveSymlinks: true,
+                alias: {
+                    '@salutejs/plasma-sb-utils': path.resolve('../../utils/plasma-sb-utils/src'),
+                },
             },
             build: {
                 sourcemap: false,

packages/plasma-b2c/src/components/Button/Button.stories.tsx

@@ -1,229 +1,20 @@
-import React, { useCallback, useState, useRef } from 'react';
 import type { ComponentProps } from 'react';
-import { action } from '@storybook/addon-actions';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconMic } from '@salutejs/plasma-icons';
-import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import type { Meta } from '@storybook/react';
+import { getButtonStories } from '@salutejs/plasma-sb-utils';
 
 import { config } from './Button.config';
 
 import { Button } from '.';
 
 type ButtonProps = ComponentProps<typeof Button>;
 
-const { views, sizes } = getConfigVariations(config);
-
-const stretchingValues = ['auto', 'filled', 'fixed'];
-const pinValues = [
-    '',
-    'square-square',
-    'square-clear',
-    'clear-square',
-    'clear-clear',
-    'clear-circle',
-    'circle-clear',
-    'circle-circle',
-];
-const contentPlacingValues = ['default', 'relaxed'];
-
-const onClick = action('onClick');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
+const { meta: META, Default } = getButtonStories({ component: Button, componentConfig: config });
 
 const meta: Meta<ButtonProps> = {
+    ...META,
     title: 'Data Entry/Button',
-    decorators: [InSpacingDecorator],
-    component: Button,
-    args: {
-        view: 'default',
-        size: 'm',
-        contentPlacing: 'default',
-        stretching: 'auto',
-        text: 'Hello',
-        value: 'Value',
-        disabled: false,
-        focused: true,
-        square: false,
-        isLoading: false,
-    },
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        value: {
-            control: {
-                type: 'text',
-            },
-        },
-        contentPlacing: {
-            options: contentPlacingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        pin: {
-            options: pinValues,
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-        },
-        ...disableProps([
-            'theme',
-            'loader',
-            'onClick',
-            'onFocus',
-            'onBlur',
-            'outlined',
-            'contentLeft',
-            'contentRight',
-            'shiftLeft',
-            'shiftRight',
-            'stretch',
-            'as',
-            'forwardedAs',
-            'pin',
-            'focused',
-        ]),
-    },
 };
 
 export default meta;
 
-type StoryPropsDefault = ComponentProps<typeof Button> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const iconSize = size === 'xs' || size === 'xxs' ? 'xs' : 's';
-
-    return (
-        <Button
-            contentLeft={enableContentLeft && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={
-                enableContentRight && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined
-            }
-            size={size}
-            onClick={onClick}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-        enableContentRight: false,
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['value']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const WithValue: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-    },
-    argTypes: {
-        ...disableProps(['enableContentRight']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const Anchor: StoryObj<StoryPropsDefault> = {
-    args: {
-        as: 'a',
-        enableContentLeft: false,
-        enableContentRight: false,
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['value']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryLoading = ({
-    enableContentLeft,
-    enableContentRight,
-    size,
-    isLoading,
-    onClick: _onClick,
-    ...rest
-}: StoryPropsDefault) => {
-    const [loading, setLoading] = useState(isLoading);
-    const [count, setCount] = useState(0);
-    const intervalId = useRef<number | undefined>();
-
-    const iconSize = size === 'xs' || size === 'xxs' ? 'xs' : 's';
-
-    const onClickHandle = useCallback(
-        (event) => {
-            event.persist();
-
-            _onClick?.(event);
-
-            setLoading(true);
-
-            intervalId.current = window.setInterval(() => {
-                setCount((prev) => {
-                    return prev + 1;
-                });
-            }, 1_000);
-        },
-        [_onClick],
-    );
-
-    if (count === 6) {
-        setLoading(false);
-        setCount(0);
-        window.clearInterval(intervalId.current);
-    }
-
-    return (
-        <Button
-            autoFocus
-            onClick={onClickHandle}
-            contentLeft={enableContentLeft && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={
-                enableContentRight && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined
-            }
-            isLoading={loading}
-            size={size}
-            loader={<div>Loading - {count}</div>}
-            {...rest}
-        />
-    );
-};
-
-export const Loading: StoryObj<StoryPropsDefault> = {
-    args: {
-        ...Default.args,
-        text: 'Start loading',
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['text', 'value']),
-    },
-    render: (args) => <StoryLoading {...args} />,
-};
+export { Default };