chore(button): create button common stories

Author: Yakutoc

utils/plasma-sb-utils/src/components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { getConfigVariations } from '../../helpers';
+
+import { createMeta } from './meta';
+import { createDefaultStory } from './stories';
+
+type CreateStoriesProps = {
+    component: any;
+    componentConfig: any;
+    title?: string;
+    disablePropsList?: [];
+    defaultArgs?: {};
+    additionalArgTypes?: {};
+};
+
+export const getButtonStories = (config: CreateStoriesProps) => {
+    const { component, componentConfig, ...rest } = config;
+
+    const buttonConfig = getConfigVariations(componentConfig);
+
+    const meta = createMeta({
+        component,
+        componentConfig: buttonConfig,
+        ...rest,
+    });
+
+    const DefaultStoryComponent = createDefaultStory(component);
+
+    const Default = {
+        render: (args: any) => <DefaultStoryComponent {...args} />,
+    };
+
+    return {
+        meta,
+        Default,
+    };
+};

utils/plasma-sb-utils/src/components/Button/fixtures.ts

@@ -0,0 +1,14 @@
+export const stretchingValues = ['auto', 'filled', 'fixed'];
+
+export const pinValues = [
+    '',
+    'square-square',
+    'square-clear',
+    'clear-square',
+    'clear-clear',
+    'clear-circle',
+    'circle-clear',
+    'circle-circle',
+];
+
+export const contentPlacingValues = ['default', 'relaxed'];

utils/plasma-sb-utils/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

utils/plasma-sb-utils/src/components/Button/meta.ts

@@ -0,0 +1,116 @@
+import { disableProps, InSpacingDecorator } from '../../index';
+
+import { stretchingValues, pinValues, contentPlacingValues } from './fixtures';
+
+type CreateMetaProps = {
+    component: any;
+    componentConfig: any;
+    title?: string;
+    defaultArgs?: {};
+    additionalArgTypes?: {};
+    disablePropsList?: [];
+};
+
+export const createMeta = ({
+    component,
+    componentConfig,
+    title = 'Data Entry/Button',
+    defaultArgs = {},
+    additionalArgTypes = {},
+    disablePropsList = [],
+}: CreateMetaProps) => {
+    return {
+        title,
+        decorators: [InSpacingDecorator],
+        component,
+        args: {
+            view: 'default',
+            size: 'm',
+            contentPlacing: 'default',
+            stretching: 'auto',
+            text: 'Button',
+            value: '',
+            disabled: false,
+            focused: true,
+            square: false,
+            isLoading: false,
+            ...defaultArgs,
+        },
+        argTypes: {
+            view: {
+                options: componentConfig.views,
+                control: { type: 'select' },
+                table: {
+                    category: 'Appearance',
+                },
+            },
+            size: {
+                options: componentConfig.sizes,
+                control: { type: 'select' },
+                table: {
+                    category: 'Appearance',
+                },
+            },
+            contentPlacing: {
+                options: contentPlacingValues,
+                control: { type: 'select' },
+                table: {
+                    category: 'Other',
+                },
+            },
+            stretching: {
+                options: stretchingValues,
+                control: { type: 'select' },
+                table: {
+                    category: 'Other',
+                },
+            },
+            pin: {
+                options: pinValues,
+                control: { type: 'select' },
+                table: { defaultValue: { summary: 'bottom' }, category: 'Other' },
+            },
+            isLoading: {
+                control: { type: 'boolean' },
+                table: { defaultValue: { summary: 'false' }, category: 'State' },
+            },
+            disabled: {
+                control: { type: 'boolean' },
+                table: { defaultValue: { summary: 'false' }, category: 'State' },
+            },
+            value: {
+                control: { type: 'text' },
+                table: {
+                    category: 'Content',
+                },
+            },
+            text: {
+                control: { type: 'text' },
+                table: {
+                    category: 'Content',
+                },
+            },
+            ...additionalArgTypes,
+            ...disableProps([
+                'theme',
+                'loader',
+                'onClick',
+                'onFocus',
+                'onBlur',
+                'outlined',
+                'contentLeft',
+                'contentRight',
+                'shiftLeft',
+                'shiftRight',
+                'stretch',
+                'as',
+                'forwardedAs',
+                'pin',
+                'focused',
+                'blur',
+                'square',
+                ...disablePropsList,
+            ]),
+        },
+    };
+};

utils/plasma-sb-utils/src/components/Button/stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { IconMic } from '@salutejs/plasma-icons';
+
+const onClick = action('onClick');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const getIconSize = (size: string) => (size === 'xs' || size === 'xxs' ? 'xs' : 's');
+const shouldShowIcon = (enabled: boolean, size: string) => enabled && size !== 'xxs';
+
+export const createDefaultStory = (Button: any) => {
+    return ({ enableContentLeft, enableContentRight, size, ...rest }: any) => {
+        const computedContentSlot = (predicate: boolean) =>
+            predicate ? <IconMic size={getIconSize(size)} color="inherit" /> : undefined;
+
+        return (
+            <Button
+                contentLeft={computedContentSlot(shouldShowIcon(enableContentLeft, size))}
+                contentRight={computedContentSlot(shouldShowIcon(enableContentRight, size))}
+                size={size}
+                onClick={onClick}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...rest}
+            />
+        );
+    };
+};

utils/plasma-sb-utils/src/components/index.ts

@@ -3,3 +3,4 @@ export { IconPlaceholder } from './IconPlaceholder';
 export { PaletteGrid } from './PaletteGrid';
 export { InSpacing as InSpacingDecorator } from './StoryDecorators';
 export { ThemeColors } from './ThemeColors';
+export * from './Button';