chore: update docs Gallery,Gap,Grid (#876)

core-ds · Oct 3, 2023 · d29aa43 · d29aa43
1 parent 30281bb
commit d29aa43
Show file tree

Hide file tree

Showing 18 changed files with 654 additions and 501 deletions.
diff --git a/.storybook/public/images/gallery_1.jpg b/.storybook/public/images/gallery_1.jpg
diff --git a/.storybook/public/images/gallery_2.jpg b/.storybook/public/images/gallery_2.jpg
diff --git a/.storybook/public/images/gallery_3.jpg b/.storybook/public/images/gallery_3.jpg
diff --git a/.storybook/public/images/gallery_4.jpg b/.storybook/public/images/gallery_4.jpg
diff --git a/packages/gallery/src/docs/Component.docs.mdx b/packages/gallery/src/docs/Component.docs.mdx
@@ -0,0 +1,22 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+import packageJson from '../../package.json';
+
+<Meta of={Stories} />
+
+<ComponentHeader
+    name='Gallery'
+    version={packageJson.version}
+    children='Используется для просмотра изображений.'
+/>
+
+<Tabs
+    description={<Description />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+    development={<Development />}
+/>
diff --git a/...es/gallery/src/docs/Component.stories.mdx → ...es/gallery/src/docs/Component.stories.tsx b/...es/gallery/src/docs/Component.stories.mdx → ...es/gallery/src/docs/Component.stories.tsx
@@ -1,20 +1,20 @@
-import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { boolean } from '@storybook/addon-knobs';
-import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 import { Button } from '@alfalab/core-components-button';
 import { Gallery } from '@alfalab/core-components-gallery';
 
-import { Gallery as GalleryTS } from '../Component';
-import packageJson from '../../package.json';
-import Description from './description.mdx';
-import Changelog from '../../CHANGELOG.md?raw';
+const meta: Meta<typeof Gallery> = {
+    title: 'Components/Gallery',
+    component: Gallery,
+    id: 'Gallery',
+};
 
-<Meta title='Components/Gallery' component={Gallery} id='Gallery' />
+type Story = StoryObj<typeof Gallery>;
 
-{/* Canvas */}
-
-<Story name='Gallery'>
-    {React.createElement(() => {
+export const gallery: Story = {
+    name: 'Gallery',
+    render: () => {
         const [openMultiple, setOpenMultiple] = React.useState(false);
         const [open, setOpen] = React.useState(false);
         return (
@@ -81,19 +81,7 @@ import Changelog from '../../CHANGELOG.md?raw';
                 />
             </div>
         );
-    })}
-</Story>
-
-{/* Docs */}
-
-<ComponentHeader name='Gallery' version={packageJson.version} />
-
-```jsx
-import { Gallery } from '@alfalab/core-components/gallery';
-```
+    },
+};
 
-<Tabs
-    description={<Description />}
-    changelog={<Markdown>{Changelog}</Markdown>}
-    props={<ArgsTable of={GalleryTS} />}
-/>
+export default meta;
diff --git a/packages/gallery/src/docs/description.mdx b/packages/gallery/src/docs/description.mdx
@@ -1,101 +1,73 @@
-import { Plate } from '@alfalab/core-components-plate';
-import { Badge } from '@alfalab/core-components-badge';
-import { InformationCircleMIcon } from '@alfalab/icons-glyph/InformationCircleMIcon';
+## Примеры
 
-Компонент просмотра изображений
-
-<Plate
-    view='common'
-    leftAddons={
-        <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
-    }
->
-    <span>
-        Чтобы скачивание изображений работало корректно, убедитесь, что в ответе от сервера
-        выставлен заголовок <b>content-disposition: attachment</b>
-    </span>
-</Plate>
-
-```jsx live
-const Example = () => {
+```jsx live mobileHeight={500}
+render(() => {
     const [open, setOpen] = React.useState(false);
+    const [imagesQuantity, setImagesQuantity] = React.useState('some');
 
+    const onImagesQuantityChange = (_, payload) => {
+        setImagesQuantity(payload.value);
+    };
+
     const images = [
         {
-            name: 'Горизонтальное изображение.jpg',
-            src: 'https://unsplash.com/photos/ywiAen4L4qA/download?force=true'
+            name: 'Вертикальное изображение',
+            src: './images/gallery_1.jpg'
+        },
+        {
+            name: 'Горизонтальное  изображение',
+            src: './images/gallery_2.jpg'
         },
         {
-            name: 'Вертикальное изображение.jpg',
-            src: 'https://unsplash.com/photos/J3WbMATCz8I/download?force=true'
+            name: 'Квадратное изображение',
+            src: './images/gallery_3.jpg'
         },
         {
-            name: 'Маленькое изображение.jpg',
-            src: 'https://picsum.photos/100/100'
+            name: 'Маленькое изображение',
+            src: './images/gallery_4.jpg'
         },
         {
             name: 'Битое изображение.jpg',
             src: 'https://picsum.photos'
         },
-        {
-            name: 'Изображение с прозрачностью.png',
-            src: 'https://clipart-best.com/img/bush/bush-clip-art-22.png'
-        }
-    ]
-
-    return (
-        <div>
-            <Button view="primary" onClick={() => { setOpen(true) }}>Открыть галерею</Button>
-
-            <Gallery
-                open={open}
-                onClose={() => {
-                    setOpen(false);
-                }}
-                images={[...images, ...images, ...images, ...images, ...images]}
-            />
-        </div>
-    )
-}
-
-render(<Example />)
-```
-
-Галерея с одним изображением:
-
-```jsx live
-const Example = () => {
-    const [open, setOpen] = React.useState(false);
-
-    const images = [
-        {
-            name: 'Горизонтальное изображение.jpg',
-            src: 'https://unsplash.com/photos/ywiAen4L4qA/download?force=true'
-        }
     ]
 
     return (
-        <div>
-            <Button view="primary" onClick={() => { setOpen(true) }}>Открыть галерею</Button>
-
+        <div style={{width: 320}}>
+            <Button 
+                view="secondary" 
+                block={true}
+                onClick={() => setOpen(true)}
+                >
+                    Открыть галерею
+            </Button>
             <Gallery
                 open={open}
                 onClose={() => {
                     setOpen(false);
                 }}
-                images={images}
+                images={imagesQuantity === 'some' ? images : [images[0]]}
             />
+            <Gap size='xl'/>
+            <RadioGroup
+                label='Количество изображений'
+                direction='vertical'
+                name='radioGroup'
+                onChange={onImagesQuantityChange}
+                value={imagesQuantity}
+            >
+                <Radio size='m' label='Несколько' value='some' />
+                <Radio size='m' label='Одно' value='one' />
+            </RadioGroup>
         </div>
-    )
-}
-
-render(<Example />)
+    );
+});
 ```
 
-Еще одна галерея:
+## Галерея с предпросмотром
 
-```jsx live
-const Example = () => {
+```jsx live mobileHeight={875}
+render(() => {
     const [open, setOpen] = React.useState(false);
     const [initialSlide, setInitialSlide] = React.useState(0);
 
@@ -111,34 +83,22 @@ const Example = () => {
 
     const images = [
         {
-            src: 'https://lastfm.freetls.fastly.net/i/u/ar0/b2bcf80a513341d0c1ebbe4027c81a69.png'
-        },
-        {
-            src: 'https://prelestno24.ru/800/600/https/i.pinimg.com/736x/1b/27/5b/1b275b675d3c3abbdfe39e45e08faa2c.jpg'
-        },
-        {
-            src: 'https://www.shans-na-schastye.ru/wp-content/uploads/2020/12/novyj-god-doma-pochemu-eto-ploxo-scaled.jpeg'
+            src: './images/gallery_1.jpg'
         },
         {
-            src: 'https://demotivation.ru/wp-content/uploads/2020/08/s1200-1-25.jpg'
+            src: './images/gallery_2.jpg'
         },
         {
-            src: 'https://huntland.ru/wp-content/uploads/2019/01/kavkazskiy_lesnoy_kot_10.jpg'
+            src: './images/gallery_3.jpg'
         },
         {
-            src: 'https://krasivosti.pro/uploads/posts/2021-04/1618933529_29-krasivosti_pro-p-sokol-sapsan-v-tundre-ptitsi-krasivo-foto-33.jpg'
+            src: './images/gallery_4.jpg'
         },
-        {
-            src: 'https://best-top10.ru/wp-content/uploads/2016/12/medved_gizli.jpg'
-        },
-        {
-            src: 'https://s1.1zoom.ru/b5949/146/Sunrises_and_sunsets_Winter_Sweden_Arvika_Snow_Fir_515425_1600x1200.jpg'
-        }
     ]
 
     return (
         <div>
-            <div style={{ display: 'flex', flexWrap: 'wrap', maxWidth: '850px' }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: isMobile() ? 'center' : 'left' }}>
                 {images.map((image, index) => (
                     <div
                         key={image.src}
@@ -164,8 +124,6 @@ const Example = () => {
                 initialSlide={initialSlide}
             />
         </div>
-    )
-}
-
-render(<Example />)
+    );
+});
 ```
diff --git a/packages/gallery/src/docs/development.mdx b/packages/gallery/src/docs/development.mdx
@@ -0,0 +1,22 @@
+import { ArgsTable } from '@storybook/addon-docs';
+import { Plate } from '@alfalab/core-components/plate';
+import { Gallery } from '../index';
+
+## Подключение
+
+```jsx
+import { Gallery } from '@alfalab/core-components/gallery';
+```
+
+## Использование
+
+<Plate
+    view='attention'
+    limitContentWidth={false}
+    title='Чтобы скачивание изображений работало корректно, убедитесь, что в ответе от сервера выставлен заголовок content-disposition: attachment'
+    titleView='light'
+/>
+
+## Свойства
+
+<ArgsTable of={Gallery} />
diff --git a/packages/gap/src/docs/Component.docs.mdx b/packages/gap/src/docs/Component.docs.mdx
@@ -0,0 +1,22 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+import packageJson from '../../package.json';
+
+<Meta of={Stories} />
+
+<ComponentHeader
+    name='Gap'
+    version={packageJson.version}
+    children='Используется для создания отступов между блоками.'
+/>
+
+<Tabs
+    description={<Description />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+    development={<Development />}
+/>
diff --git a/packages/gap/src/docs/Component.stories.mdx b/packages/gap/src/docs/Component.stories.mdx