docs: update storybook docs (#1056)

gravity-ui · Oct 16, 2023 · f8d1ecb · f8d1ecb
1 parent 38e6308
commit f8d1ecb
Show file tree

Hide file tree

Showing 24 changed files with 327 additions and 305 deletions.
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -26,9 +26,9 @@ export const CloudThemeLight = create({
     inputTextColor: 'black',
     inputBorderRadius: 4,
 
-    brandUrl: 'https://github.com/gravity-ui/uikit',
+    brandUrl: 'https://gravity-ui.com/',
     brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
-                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Base Components</div>`,
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">UIKit</div>`,
 });
 
 export const CloudThemeDark = create({

diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import {StoryLayout} from '../../../demo/StoryLayout/StoryLayout';
+import {Showcase} from '../../../demo/Showcase';
 import {Icon as IconComponent} from '../../Icon/Icon';
 import {Button} from '../Button';
 
@@ -31,7 +31,7 @@ export const View: Story = {
 
 export const Size: Story = {
     render: (args) => (
-        <StoryLayout>
+        <Showcase>
             <Button {...args} size="xs">
                 Size xs
             </Button>
@@ -47,13 +47,13 @@ export const Size: Story = {
             <Button {...args} size="xl">
                 Size xl
             </Button>
-        </StoryLayout>
+        </Showcase>
     ),
 };
 
 export const Icon: Story = {
     render: (args) => (
-        <StoryLayout>
+        <Showcase>
             <Button {...args}>No icon</Button>
             <Button {...args}>
                 <IconComponent data={Heart} />
@@ -71,7 +71,7 @@ export const Icon: Story = {
             <Button {...args}>
                 <IconComponent data={Copy} />
             </Button>
-        </StoryLayout>
+        </Showcase>
     ),
 };
 
@@ -121,15 +121,15 @@ export const Width: Story = {
 export const Pin: Story = {
     render: (args) => {
         return (
-            <StoryLayout>
+            <Showcase>
                 <Button {...args}>Round</Button>
                 <Button {...args} pin="circle-circle">
                     Circle
                 </Button>
                 <Button {...args} pin="brick-brick">
                     Brick
                 </Button>
-            </StoryLayout>
+            </Showcase>
         );
     },
 };

diff --git a/src/components/Checkbox/__stories__/Checkbox.stories.tsx b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Checkbox} from '../Checkbox';
-import type {CheckboxProps} from '../Checkbox';
 
 import {CheckboxShowcase} from './CheckboxShowcase';
 
@@ -12,58 +12,58 @@ export default {
     component: Checkbox,
 } as Meta;
 
-const DefaultTemplate: StoryFn<CheckboxProps> = (args) => <Checkbox {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Checkbox>;
 
-const SizeTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        m: <Checkbox {...args} size="m" />
-        <span style={{margin: '16px'}} />
-        l: <Checkbox {...args} size="l" />
-    </React.Fragment>
-);
-export const Size = SizeTemplate.bind({});
+export const Default: Story = {
+    args: {
+        content: 'Label',
+    },
+};
 
-const DisabledTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} defaultChecked disabled content="Disabled checked" />
-        <span style={{margin: '16px'}} />
-        <Checkbox disabled content="Disabled" />
-    </React.Fragment>
-);
-export const Disabled = DisabledTemplate.bind({});
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true,
+    },
+};
 
-const IndeterminateTemplate: StoryFn<CheckboxProps> = (args) => (
-    <Checkbox {...args} indeterminate />
-);
-export const Indeterminate = IndeterminateTemplate.bind({});
+export const Indeterminate: Story = {
+    args: {
+        ...Default.args,
+        indeterminate: true,
+    },
+};
 
-const LabelTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} size="m" content="content m" />
-        <span style={{margin: '16px'}} />
-        <Checkbox {...args} size="l" content="content l" />
-        <div style={{width: 200, marginTop: 10}}>
-            <Checkbox {...args} size="m" style={{width: '100%'}}>
-                <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                    <span>Full</span>
-                    <span>width</span>
-                    <span>content</span>
-                </div>
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Checkbox {...args} size="m">
+                Size m
             </Checkbox>
-        </div>
-    </React.Fragment>
-);
-export const Label = LabelTemplate.bind({});
+            <Checkbox {...args} size="l">
+                Size l
+            </Checkbox>
+        </Showcase>
+    ),
+};
 
-const ControlledTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} content="Controlled checked" checked />
-        <span style={{margin: '16px'}} />
-        <Checkbox {...args} content="Controlled unchecked" checked={false} />
-    </React.Fragment>
-);
-export const Controlled = ControlledTemplate.bind({});
+export const Disabled: Story = {
+    render: (args) => (
+        <Showcase>
+            <Checkbox {...args} disabled checked={false}>
+                Unchecked
+            </Checkbox>
+            <Checkbox {...args} disabled checked>
+                Checked
+            </Checkbox>
+            <Checkbox {...args} disabled indeterminate>
+                Indeterminate
+            </Checkbox>
+        </Showcase>
+    ),
+};
 
-const ShowcaseTemplate: StoryFn = () => <CheckboxShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const ShowcaseStory: Story = {
+    render: () => <CheckboxShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
@@ -6,8 +6,8 @@ import {Checkbox} from '../Checkbox';
 
 export function CheckboxShowcase() {
     return (
-        <Showcase title="Checkbox">
-            <ShowcaseItem title="size">
+        <Showcase>
+            <ShowcaseItem title="Size">
                 <p>
                     <Checkbox size="m" checked={false} content="size m" />
                     <span style={{margin: '8px'}} />
@@ -23,7 +23,7 @@ export function CheckboxShowcase() {
                     <Checkbox size="l" indeterminate={true} content="size l" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="disabled">
+            <ShowcaseItem title="Disabled">
                 <p>
                     <Checkbox checked={false} disabled content="unchecked" />
                 </p>
@@ -34,15 +34,15 @@ export function CheckboxShowcase() {
                     <Checkbox checked={true} disabled content="checked" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="uncontrolled">
+            <ShowcaseItem title="Uncontrolled">
                 <p>
                     <Checkbox defaultChecked={false} content="unchecked" />
                 </p>
                 <p>
                     <Checkbox defaultChecked={true} content="checked" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="controlled">
+            <ShowcaseItem title="Controlled">
                 <p>
                     <Checkbox checked={false} content="unchecked" />
                 </p>

diff --git a/src/components/Checkbox/__stories__/Docs.mdx b/src/components/Checkbox/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Checkbox.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Radio/__stories__/Docs.mdx b/src/components/Radio/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Radio.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Radio/__stories__/Radio.stories.tsx b/src/components/Radio/__stories__/Radio.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Radio} from '../Radio';
-import type {RadioProps} from '../Radio';
 
 import {RadioShowcase} from './RadioShowcase';
 
@@ -12,8 +12,48 @@ export default {
     component: Radio,
 } as Meta;
 
-const DefaultTemplate: StoryFn<RadioProps> = (args) => <Radio {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Radio>;
 
-const ShowcaseTemplate: StoryFn = () => <RadioShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const Default: Story = {
+    args: {
+        content: 'Label',
+    },
+};
+
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true,
+    },
+};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Radio {...args} size="m">
+                Size m
+            </Radio>
+            <Radio {...args} size="l">
+                Size l
+            </Radio>
+        </Showcase>
+    ),
+};
+
+export const Disabled: Story = {
+    render: (args) => (
+        <Showcase>
+            <Radio {...args} disabled checked={false}>
+                Unchecked
+            </Radio>
+            <Radio {...args} disabled checked>
+                Checked
+            </Radio>
+        </Showcase>
+    ),
+};
+
+export const ShowcaseStory: Story = {
+    render: () => <RadioShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/Radio/__stories__/RadioShowcase.tsx b/src/components/Radio/__stories__/RadioShowcase.tsx
@@ -6,8 +6,8 @@ import {Radio} from '../Radio';
 
 export function RadioShowcase() {
     return (
-        <Showcase title="Radio">
-            <ShowcaseItem title="size">
+        <Showcase>
+            <ShowcaseItem title="Size">
                 <p>
                     <Radio size="m" content="size m" value="value 1" />
                     <span style={{margin: '8px'}} />
@@ -19,11 +19,11 @@ export function RadioShowcase() {
                     <Radio size="l" content="size l" value="value 2" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="disabled">
+            <ShowcaseItem title="Disabled">
                 <p>
                     <Radio
                         size="m"
-                        content="unchecked"
+                        content="Unchecked"
                         defaultChecked={false}
                         value="value 1"
                         disabled
@@ -32,14 +32,14 @@ export function RadioShowcase() {
                 <p>
                     <Radio
                         size="m"
-                        content="checked"
+                        content="Checked"
                         defaultChecked={true}
                         value="value 2"
                         disabled
                     />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="uncontrolled">
+            <ShowcaseItem title="Uncontrolled">
                 <p>
                     <Radio size="m" content="checked" defaultChecked={true} value="value 1" />
                 </p>
@@ -48,7 +48,7 @@ export function RadioShowcase() {
                 </p>
             </ShowcaseItem>
 
-            <ShowcaseItem title="controlled">
+            <ShowcaseItem title="Controlled">
                 <p>
                     <Radio size="m" content="checked" checked={true} value="value 1" />
                 </p>

diff --git a/src/components/RadioButton/__stories__/Docs.mdx b/src/components/RadioButton/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './RadioButton.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>