docs(Loader/Spin): update stories layout (#2434)

Author: baevm

src/components/Loader/__stories__/Loader.stories.tsx

@@ -1,28 +1,41 @@
 import * as React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react-webpack5';
+import type {Meta, StoryObj} from '@storybook/react-webpack5';
 
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Loader} from '../Loader';
-import type {LoaderProps} from '../Loader';
 
 export default {
     title: 'Components/Feedback/Loader',
     component: Loader,
 } as Meta;
 
-const DefaultTemplate: StoryFn<LoaderProps> = (args) => <Loader {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Loader>;
 
-const SizeTemplate: StoryFn<LoaderProps> = (args) => {
-    return (
+const defaultDecorators = [
+    (Story) => (
+        <Showcase>
+            <Story />
+        </Showcase>
+    ),
+] satisfies Story['decorators'];
+
+export const Default: Story = {};
+
+export const Size: Story = {
+    decorators: defaultDecorators,
+    render: (args) => (
         <React.Fragment>
-            <Loader {...args} size="s" />
-            <span style={{margin: '16px'}} />
-            <Loader {...args} size="m" />
-            <span style={{margin: '16px'}} />
-            <Loader {...args} size="l" />
+            <ShowcaseItem title="Size s">
+                <Loader {...args} size="s" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size m">
+                <Loader {...args} size="m" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size l">
+                <Loader {...args} size="l" />
+            </ShowcaseItem>
         </React.Fragment>
-    );
+    ),
 };
-
-export const Size = SizeTemplate.bind({});

src/components/Spin/__stories__/Spin.stories.tsx

@@ -1,27 +1,47 @@
-import type {Meta, StoryFn} from '@storybook/react-webpack5';
+import * as React from 'react';
 
+import type {Meta, StoryObj} from '@storybook/react-webpack5';
+
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Spin} from '../Spin';
-import type {SpinProps} from '../Spin';
 
 export default {
     title: 'Components/Feedback/Spin',
     component: Spin,
 } as Meta;
 
-const DefaultTemplate: StoryFn<SpinProps> = (args) => <Spin {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Spin>;
+
+const defaultDecorators = [
+    (Story) => (
+        <Showcase>
+            <Story />
+        </Showcase>
+    ),
+] satisfies Story['decorators'];
+
+export const Default: Story = {};
 
-const SizeTemplate: StoryFn<SpinProps> = (args) => (
-    <div>
-        xs: <Spin {...args} size="xs" />
-        <span style={{margin: '16px'}} />
-        s: <Spin {...args} size="s" />
-        <span style={{margin: '16px'}} />
-        m: <Spin {...args} size="m" />
-        <span style={{margin: '16px'}} />
-        l: <Spin {...args} size="l" />
-        <span style={{margin: '16px'}} />
-        xl: <Spin {...args} size="xl" />
-    </div>
-);
-export const Size = SizeTemplate.bind({});
+export const Size: Story = {
+    decorators: defaultDecorators,
+    render: (args) => (
+        <React.Fragment>
+            <ShowcaseItem title="Size xs">
+                <Spin {...args} size="xs" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size s">
+                <Spin {...args} size="s" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size m">
+                <Spin {...args} size="m" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size l">
+                <Spin {...args} size="l" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size xl">
+                <Spin {...args} size="xl" />
+            </ShowcaseItem>
+        </React.Fragment>
+    ),
+};