plasma-infra(b2c): Migrate to CSF 3 [Migrate SB 7 Part 1]

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

@@ -1,24 +1,23 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
-import { Story, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { AudioPlayer } from '.';
 import type { AudioPlayerProps } from '.';
 
-export default {
+const meta: Meta<AudioPlayerProps> = {
     title: 'Controls/AudioPlayer',
     component: AudioPlayer,
-    argTypes: {},
     decorators: [InSpacingDecorator],
-} as Meta;
+};
+
+export default meta;
 
 const StyledWrapper = styled.div`
     width: 23.75rem;
 `;
 
-interface StoryProps extends AudioPlayerProps {}
-
 const song = {
     name: 'I’m Not Okay',
     duration: 128,
@@ -28,7 +27,7 @@ const song = {
     canDelete: true,
 };
 
-export const Base: Story<StoryProps> = ({ ...rest }) => {
+const StoryAudioPlayer = (props: AudioPlayerProps) => {
     const [state, setState] = useState({
         isSelected: false,
         isPlaying: false,
@@ -68,8 +67,12 @@ export const Base: Story<StoryProps> = ({ ...rest }) => {
                     event.stopPropagation();
                     onPlay();
                 }}
-                {...rest}
+                {...props}
             />
         </StyledWrapper>
     );
 };
+
+export const Base: StoryObj<AudioPlayerProps> = {
+    render: (args) => <StoryAudioPlayer {...args} />,
+};

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

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { IconSettings } from '@salutejs/plasma-icons';
 import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
-import { Badge, badgeSizes, badgeViews, BadgeSize, BadgeView, BadgeProps } from '.';
+import { Badge, badgeSizes, badgeViews, BadgeSize, BadgeView } from '.';
+import type { BadgeProps } from '.';
 
 const sizeKeys = Object.keys(badgeSizes) as BadgeSize[];
 const viewKeys = Object.keys(badgeViews) as BadgeView[];
 
-const propsToDisable = ['contentLeft', 'circled', 'theme', 'as', 'forwardedAs'];
-
-export default {
+const meta: Meta<BadgeProps> = {
     title: 'Content/Badge',
     component: Badge,
     decorators: [InSpacingDecorator],
@@ -27,17 +26,20 @@ export default {
                 type: 'select',
             },
         },
-        ...disableProps(propsToDisable),
+        ...disableProps(['contentLeft', 'circled', 'theme', 'as', 'forwardedAs']),
     },
-} as Meta;
+};
 
-export const Default: Story<BadgeProps & { enableIcon: boolean }> = ({ enableIcon, ...rest }) => (
-    <Badge contentLeft={enableIcon && <IconSettings color="inherit" size="xs" />} {...rest} />
-);
+export default meta;
 
-Default.args = {
-    text: 'Badge',
-    size: 'l',
-    view: 'primary',
-    enableIcon: false,
+export const Default: StoryObj<BadgeProps & { enableIcon: boolean }> = {
+    args: {
+        text: 'Badge',
+        size: 'l',
+        view: 'primary',
+        enableIcon: false,
+    },
+    render: ({ enableIcon, ...rest }) => (
+        <Badge contentLeft={enableIcon && <IconSettings color="inherit" size="xs" />} {...rest} />
+    ),
 };

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

@@ -1,12 +1,17 @@
 import React, { useState, useCallback, useRef } from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { IconPlaceholder, disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
-import { Button, ButtonProps } from '.';
+import { Button } from '.';
+import type { ButtonProps } from '.';
+
+type StoryButtonProps = ButtonProps & { contentType: string; isLoading: boolean };
 
 const views = ['primary', 'secondary', 'success', 'critical'];
+
 const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+
 const pins = [
     'square-square',
     'circle-circle',
@@ -23,20 +28,15 @@ const onClick = action('onClick');
 const onFocus = action('onFocus');
 const onBlur = action('onBlur');
 
-const propsToDisable = [
-    'theme',
-    'as',
-    'forwardedAs',
-    'contentLeft',
-    'contentRight',
-    'shiftLeft',
-    'shiftRight',
-    'blur',
-    'stretch',
-    'square',
-];
+const iconSize = {
+    l: 's',
+    m: 's',
+    s: 's',
+    xs: 'xs',
+    xxs: 'xs',
+};
 
-export default {
+const meta: Meta<StoryButtonProps> = {
     title: 'Controls/Button',
     decorators: [InSpacingDecorator],
     argTypes: {
@@ -46,11 +46,6 @@ export default {
                 type: 'select',
             },
         },
-        text: {
-            control: {
-                type: 'text',
-            },
-        },
         size: {
             options: sizes,
             control: {
@@ -69,38 +64,68 @@ export default {
                 type: 'select',
             },
         },
-        ...disableProps(propsToDisable),
+        ...disableProps([
+            'theme',
+            'as',
+            'forwardedAs',
+            'contentLeft',
+            'contentRight',
+            'shiftLeft',
+            'shiftRight',
+            'blur',
+            'stretch',
+            'square',
+            'onClick',
+            'onFocus',
+            'onBlur',
+        ]),
     },
-} as Meta;
-
-type ButtonStoryProps = ButtonProps & { contentType: string; isLoading: boolean };
-
-const args: ButtonStoryProps = {
-    view: 'primary',
-    size: 'l',
-    pin: 'square-square',
-    disabled: false,
-    outlined: true,
-    focused: false,
-    text: 'Label',
-    contentType: 'Text',
-    isLoading: false,
-    onClick,
-    onFocus,
-    onBlur,
 };
 
-const iconSize = {
-    l: 's',
-    m: 's',
-    s: 's',
-    xs: 'xs',
-    xxs: 'xs',
+export default meta;
+
+type Story = StoryObj<StoryButtonProps>;
+
+const StoryBaseButton: Story = {
+    args: {
+        view: 'primary',
+        size: 'l',
+        pin: 'square-square',
+        disabled: false,
+        outlined: true,
+        focused: false,
+        text: 'Label',
+        contentType: 'Text',
+        isLoading: false,
+        onClick,
+        onFocus,
+        onBlur,
+    },
 };
 
-export const Default: Story<ButtonStoryProps> = ({ contentType, text, ...rest }) => {
-    return (
+export const Default: Story = {
+    ...StoryBaseButton,
+    render: ({ contentType, text, ...rest }) => {
+        return (
+            <Button
+                text={contentType !== 'Left' && text}
+                contentLeft={
+                    (contentType === 'Left' || contentType === 'Text+Left') && (
+                        <IconPlaceholder size={iconSize[rest.size]} />
+                    )
+                }
+                contentRight={contentType === 'Text+Right' && <IconPlaceholder size={iconSize[rest.size]} />}
+                {...rest}
+            />
+        );
+    },
+};
+
+export const Anchor: Story = {
+    ...StoryBaseButton,
+    render: ({ contentType, text, ...rest }) => (
         <Button
+            as="a"
             text={contentType !== 'Left' && text}
             contentLeft={
                 (contentType === 'Left' || contentType === 'Text+Left') && (
@@ -110,31 +135,10 @@ export const Default: Story<ButtonStoryProps> = ({ contentType, text, ...rest })
             contentRight={contentType === 'Text+Right' && <IconPlaceholder size={iconSize[rest.size]} />}
             {...rest}
         />
-    );
+    ),
 };
 
-Default.args = args;
-
-export const Anchor: Story<ButtonStoryProps> = ({ contentType, text, ...rest }) => (
-    <Button
-        as="a"
-        text={contentType !== 'Left' && text}
-        contentLeft={
-            (contentType === 'Left' || contentType === 'Text+Left') && <IconPlaceholder size={iconSize[rest.size]} />
-        }
-        contentRight={contentType === 'Text+Right' && <IconPlaceholder size={iconSize[rest.size]} />}
-        {...rest}
-    />
-);
-
-Anchor.args = args;
-
-const argsLoading: ButtonStoryProps = {
-    ...args,
-    text: 'Start loading',
-};
-
-export const Loading: Story<ButtonStoryProps> = ({ contentType, isLoading, text, onClick: _onClick, ...rest }) => {
+const StoryButtonLoading = ({ contentType, isLoading, text, onClick: _onClick, ...rest }: StoryButtonProps) => {
     const [loading, setLoading] = useState(isLoading);
     const [count, setCount] = useState(0);
     const intervalId = useRef<number | undefined>();
@@ -179,4 +183,20 @@ export const Loading: Story<ButtonStoryProps> = ({ contentType, isLoading, text,
     );
 };
 
-Loading.args = argsLoading;
+export const Loading: Story = {
+    args: {
+        view: 'primary',
+        size: 'l',
+        pin: 'square-square',
+        disabled: false,
+        outlined: true,
+        focused: false,
+        contentType: 'Text',
+        text: 'Start loading',
+        isLoading: false,
+        onClick,
+        onFocus,
+        onBlur,
+    },
+    render: (args) => <StoryButtonLoading {...args} />,
+};