chore: storybook cleanup

Author: PahaN47

.storybook/addons/yaml-addon/register.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {AddonPanel} from '@storybook/components';
 import {addons, types, useGlobals, useArgs} from '@storybook/manager-api';
-import yaml from 'js-yaml';
+import yaml, {JSON_SCHEMA} from 'js-yaml';
 import {ClipboardButton, ThemeProvider} from '@gravity-ui/uikit';
 
 import './AddonYaml.css';
@@ -20,6 +20,7 @@ const YamlPanel = () => {
                 lineWidth: -1,
                 forceQuotes: true,
                 skipInvalid: true,
+                noRefs: true,
             }),
         [params],
     );

src/components/Button/__stories__/Button.stories.scss

@@ -0,0 +1,12 @@
+@import '../../../../styles/variables.scss';
+
+.pc-Grid {
+    section {
+        border-radius: $indentXXS;
+    }
+
+    .col {
+        display: flex;
+        align-items: center;
+    }
+}

src/components/Button/__stories__/Button.stories.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-
 import {Meta, StoryFn} from '@storybook/react';
 
-import {Col, Row} from '../../../grid';
+import {Col, Grid, Row} from '../../../grid';
 import Button, {ButtonProps} from '../Button';
 
 import data from './data.json';
 
+import './Button.stories.scss';
+
 export default {
     component: Button,
     title: 'Components/Links and buttons/Button',
@@ -31,7 +31,7 @@ const SizesTemplate: StoryFn<ButtonProps> = (args) => (
     </Row>
 );
 const ThemesSizesTemplate: StoryFn<ButtonProps> = (args) => (
-    <React.Fragment>
+    <Grid>
         <Row>
             <Col />
             <Col>s</Col>
@@ -55,11 +55,11 @@ const ThemesSizesTemplate: StoryFn<ButtonProps> = (args) => (
         <SizesTemplate {...args} theme="flat-danger" />
         <SizesTemplate {...args} theme="flat-secondary" />
         <SizesTemplate {...args} theme="normal-contrast" />
-        <section style={{color: '#3a74ff'}}>
+        <section style={{color: '#fff', background: '#3a74ff'}}>
             <SizesTemplate {...args} theme="outlined-contrast" />
             <SizesTemplate {...args} theme="flat-contrast" />
         </section>
-    </React.Fragment>
+    </Grid>
 );
 
 const WidthTemplate: StoryFn<ButtonProps> = (args) => (

src/components/Title/__stories__/Title.stories.tsx

@@ -18,50 +18,19 @@ const SizesTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => {
 
     return (
         <div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.l,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.m,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.s,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
-            <div style={{paddingBottom: '64px'}}>
-                <Title
-                    {...args}
-                    title={
-                        {
-                            ...data.sizes.xs,
-                            ...titleItemObjectProps,
-                        } as TitleItemProps
-                    }
-                />
-            </div>
+            {Object.entries(data.sizes).map(([size, props]) => (
+                <div key={size} style={{paddingBottom: '64px'}}>
+                    <Title
+                        {...args}
+                        title={
+                            {
+                                ...props,
+                                ...titleItemObjectProps,
+                            } as TitleItemProps
+                        }
+                    />
+                </div>
+            ))}
         </div>
     );
 };

src/components/Title/__stories__/data.json

@@ -25,21 +25,25 @@
     }
   },
   "sizes": {
-    "xs": {
-      "text": "Size XS",
-      "textSize": "xs"
-    },
-    "s": {
-      "text": "Size S",
-      "textSize": "s"
+    "l": {
+      "text": "Size L",
+      "textSize": "l"
     },
     "m": {
       "text": "Size M",
       "textSize": "m"
     },
-    "l": {
-      "text": "Size L",
-      "textSize": "l"
+    "sm": {
+      "text": "Size SM",
+      "textSize": "sm"
+    },
+    "s": {
+      "text": "Size S",
+      "textSize": "s"
+    },
+    "xs": {
+      "text": "Size XS",
+      "textSize": "xs"
     }
   }
 }