feat(plasma-ui): part 5

.eslintignore

@@ -66,6 +66,7 @@ packages/plasma-hope/*
 
 packages/plasma-ui/*
 !packages/plasma-ui/src
+!packages/plasma-ui/src-linaria
 
 packages/plasma-web/*
 !packages/plasma-web/src

packages/plasma-ui/.gitignore

@@ -17,3 +17,4 @@ build-sb
 
 /src-linaria-temp
 /css
+!css/package.json

packages/plasma-ui/package.json

@@ -87,7 +87,7 @@
   "scripts": {
     "prepare": "npm run build",
     "prebuild": "rm -rf ./components ./es ./helpers ./hocs ./hooks ./mixins ./tokens ./types ./utils index.d.ts index.d.ts.map index.js index.js.map",
-    "build": "npm run build:cjs && npm run build:esm",
+    "build": "npm run build:cjs && npm run build:esm && npm run build:css",
     "postbuild": "tsc --outDir . --emitDeclarationOnly",
     "build:cjs": "BABEL_ENV=cjs SC_NAMESPACE=plasma-ui USE_COLLECT_PACKAGE_INFO=true babel ./src --out-dir . --extensions .ts,.tsx",
     "build:esm": "BABEL_ENV=esm SC_NAMESPACE=plasma-ui USE_COLLECT_PACKAGE_INFO=true babel ./src --out-dir ./es --extensions .ts,.tsx",

packages/plasma-ui/src-linaria/components/Button/Button.config.d.ts

@@ -0,0 +1,34 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        focused: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            primary: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            secondary: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            warning: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            critical: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            checked: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            overlay: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            clear: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+        };
+        size: {
+            l: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            m: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            s: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+        };
+        disabled: {
+            true: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+        };
+        focused: {
+            true: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+        };
+        stretching: {
+            auto: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            filled: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+            fixed: import('@salutejs/plasma-new-hope/types/engines/types').PolymorphicClassName;
+        };
+    };
+};

packages/plasma-ui/src-linaria/components/Button/Button.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonProps } from '@salutejs/plasma-core';
+import React from 'react';
+/**
+ * Кнопка.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps<HTMLElement> & React.RefAttributes<any>>;

packages/plasma-ui/src-linaria/components/Button/Button.stories.tsx

@@ -3,216 +3,99 @@ 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, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
-import { Button } from '.';
+import { actionWithPersistedEvent, disableProps, InSpacingDecorator } from '../../../src/helpers';
+import type { ActionButtonProps } from '../../../src';
+import { ActionButton } from '../../../src';
 
-type ButtonProps = ComponentProps<typeof Button>;
+import { Button } from '.';
 
-const views = ['default', 'accent', 'success', 'warning', 'critical', 'dark', 'light'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
-const stretchingValues = ['auto', 'filled', 'fixed'];
-const pinValues = [
-    '',
-    'square-square',
-    'square-clear',
-    'clear-square',
-    'clear-clear',
-    'clear-circle',
-    'circle-clear',
-    'circle-circle',
-];
-const contentPlacinValues = ['default', 'relaxed'];
+const onClick = actionWithPersistedEvent('onClick');
+const onFocus = actionWithPersistedEvent('onFocus');
+const onBlur = actionWithPersistedEvent('onBlur');
 
-const onClick = action('onClick');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
+type ButtonProps = ComponentProps<typeof Button>;
 
 const meta: Meta<ButtonProps> = {
     title: 'Linaria/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,
+            options: ['primary', 'secondary', 'warning', 'critical', 'checked', 'overlay', 'clear'],
             control: {
                 type: 'select',
             },
         },
         size: {
-            options: sizes,
+            options: ['l', 'm', 's'],
             control: {
-                type: 'select',
+                type: 'inline-radio',
             },
         },
-        value: {
+        text: {
             control: {
                 type: 'text',
             },
         },
-        contentPlacing: {
-            options: contentPlacinValues,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
         pin: {
-            options: pinValues,
+            options: [
+                'square-square',
+                'square-clear',
+                'clear-square',
+                'clear-clear',
+                'clear-circle',
+                'circle-clear',
+                'circle-circle',
+            ],
             control: {
                 type: 'select',
             },
-            table: { defaultValue: { summary: 'bottom' } },
         },
         ...disableProps([
             'theme',
-            'loader',
-            'onClick',
-            'onFocus',
-            'onBlur',
-            'outlined',
+            'as',
+            'forwardedAs',
+            'scaleOnHover',
+            'scaleOnPress',
             'contentLeft',
             'contentRight',
             'shiftLeft',
             'shiftRight',
-            'stretch',
-            'as',
-            'forwardedAs',
+            'onClick',
+            'onFocus',
+            'onBlur',
+            'blur',
         ]),
     },
 };
 
 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 ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            size={size}
-            onClick={onClick}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            {...rest}
-        />
-    );
+type StoryButtonProps = Omit<ButtonProps, 'children' | 'contentLeft' | 'contentRight'> & {
+    enableIcon: boolean;
+    isLoading: boolean;
 };
 
-export const Default: StoryObj<StoryPropsDefault> = {
+export const Default: StoryObj<StoryButtonProps> = {
     args: {
-        enableContentLeft: false,
-        enableContentRight: false,
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['value']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const WithValue: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-    },
-    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 ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={enableContentRight ? <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']),
+        text: 'Hello Plasma',
+        size: 'm',
+        view: 'primary',
+        pin: 'square-square',
+        enableIcon: true,
+        scaleOnInteraction: true,
+        outlined: true,
+        focused: false,
+        disabled: false,
+        square: false,
+        stretch: false,
+        isLoading: false,
+        onClick,
+        onFocus,
+        onBlur,
     },
-    render: (args) => <StoryLoading {...args} />,
+    render: ({ enableIcon, text, ...rest }) => (
+        <Button text={text} contentLeft={enableIcon ? <IconMic size="s" color="inherit" /> : undefined} {...rest} />
+    ),
 };

packages/plasma-ui/src-linaria/components/Button/Button.tsx

@@ -1,4 +1,6 @@
 import { buttonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ButtonProps } from '@salutejs/plasma-core';
+import React, { forwardRef } from 'react';
 
 import { config } from './Button.config';
 
@@ -8,4 +10,12 @@ const ButtonComponent = component(mergedConfig);
 /**
  * Кнопка.
  */
-export const Button = ButtonComponent;
+export const Button = forwardRef<any, ButtonProps>((props, ref) => {
+    const { text, children, ...rest } = props;
+
+    return (
+        <ButtonComponent ref={ref} {...rest}>
+            {children || text}
+        </ButtonComponent>
+    );
+});

packages/plasma-ui/src-linaria/components/Button/index.d.ts

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

packages/plasma-ui/src-linaria/index.d.ts

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

packages/plasma-ui/tsconfig.json

@@ -39,13 +39,15 @@
             "react": ["./node_modules/@types/react"]
         }
     },
-    "include": ["./src"],
+    "include": ["./src", "./src-linaria"],
     "exclude": [
         "./src/helpers",
         "./src/showcase",
         "./src/**/*.stories.tsx",
+        "./src-linaria/**/*.stories.tsx",
         "**/*.test.tsx",
         "./src/**/*.component-test.tsx",
+        "./src-linaria/**/*.component-test.tsx",
         "./src/**/*.perftest.tsx"
     ]
 }