chore: stories

alfa-laboratory · Jul 7, 2021 · d57a1ad · d57a1ad
1 parent 129620c
commit d57a1ad
Show file tree

Hide file tree

Showing 81 changed files with 190 additions and 195 deletions.
diff --git a/.storybook/blocks/tabs/component.tsx b/.storybook/blocks/tabs/component.tsx
@@ -1,4 +1,12 @@
-import React, { FC, useState, useMemo, useCallback, ReactNode } from 'react';
+import React, {
+    FC,
+    useState,
+    useMemo,
+    useCallback,
+    ReactNode,
+    isValidElement,
+    ReactElement,
+} from 'react';
 import { TabsResponsive, Tab, TabsResponsiveProps } from '@alfalab/core-components-tabs';
 
 enum TabName {
@@ -36,24 +44,21 @@ export const Tabs: FC<Props> = ({
     );
 
     const renderTabs = (): TabsResponsiveProps['children'] => {
-        const result = [
+        return [
             <Tab title={TabTitle[TabName.DESCRIPTION]} id={TabName.DESCRIPTION}>
                 <div style={{ marginTop: '40px' }}>{description}</div>
             </Tab>,
-            <Tab title={TabTitle[TabName.PROPS]} id={TabName.PROPS}>
-                {props}
-            </Tab>,
-        ];
-
-        if (cssVars) {
-            result.push(
+            props ? (
+                <Tab title={TabTitle[TabName.PROPS]} id={TabName.PROPS}>
+                    {props}
+                </Tab>
+            ) : null,
+            cssVars ? (
                 <Tab title={TabTitle[TabName.CSS_VARS]} id={TabName.CSS_VARS}>
                     <div style={{ marginTop: '40px' }}>{cssVars}</div>
-                </Tab>,
-            );
-        }
-
-        return result;
+                </Tab>
+            ) : null,
+        ].filter(isValidElement) as ReactElement[];
     };
 
     const tabs = useMemo(() => renderTabs(), [description, props, cssVars]);

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -22,7 +22,10 @@ module.exports = {
     stories: ['../packages/**/*.stories.@(ts|md)x', '../docs/**/*.stories.@(ts|md)x'],
     addons: [
         '@storybook/addon-knobs',
-        '@storybook/addon-docs',
+        {
+            name: '@storybook/addon-docs',
+            options: { transcludeMarkdown: true },
+        },
         '@storybook/addon-actions',
         '@storybook/preset-create-react-app',
     ],

diff --git a/.storybook/public/global.css b/.storybook/public/global.css
@@ -530,13 +530,15 @@ body[data-theme$='-inverted'] .sbdocs-preview {
 }
 
 div.lib {
-    margin: var(--gap-6xl-neg) var(--gap-m-neg) 0;
+    position: relative;
+    margin: 0 var(--gap-m-neg) 0;
 }
 
 .lib-header {
     position: relative;
 }
 
+.lib:before,
 .lib-header:before,
 .lib-header:after {
     display: block;

diff --git a/docs/1.getting-started.stories.mdx b/docs/1.getting-started.stories.mdx
@@ -1,6 +1,5 @@
-import { Description } from '@storybook/addon-docs/blocks';
 import GitHubButton from 'react-github-btn'
-import readme from '../README.md';
+import Readme from '../README.md';
 import { version } from '../package.json';
 
 <Meta
@@ -57,6 +56,4 @@ import { version } from '../package.json';
   </div>
 </div>
 
-<Description>
-  { readme }
-</Description>
+<Readme />
diff --git a/docs/10.breakpoints.stories.mdx b/docs/10.breakpoints.stories.mdx
@@ -1,5 +1,5 @@
 <Meta
-  title='Гайдлайны/Брейкпоинты' 
+  title='Гайдлайны/Брейкпоинты'
   parameters={{ previewTabs: { canvas: { hidden: true } }}}
 />
 
@@ -41,7 +41,7 @@
 При особой необходимости, для рендеринга по условию в шаблонах используйте компонент [Mq](https://alfa-laboratory.github.io/core-components/master/?path=/docs/компоненты--mq), который основан на `window.matchMedia API`:
 
 ```tsx
-import { Mq, useMatchMedia } from '@alfalab/core-components-mq';
+import { Mq, useMatchMedia } from '@alfalab/core-components/mq';
 
 const Component = () => (
     <Mq query='--mobile'>

diff --git a/docs/12.migrations.stories.mdx b/docs/12.migrations.stories.mdx
@@ -1,6 +1,5 @@
-import { Description } from '@storybook/addon-docs/blocks';
-import migrationsReadme from '../packages/codemod/README.md';
+import MigrationsReadme from '../packages/codemod/README.md';
 
 <Meta title='Гайдлайны/Миграция со старых компонентов' />
 
-<Description>{migrationsReadme}</Description>
+<MigrationsReadme />
diff --git a/packages/alert/src/docs/Component.stories.mdx b/packages/alert/src/docs/Component.stories.mdx
@@ -38,12 +38,12 @@ import Description from './description.mdx'
 <ComponentHeader
     name='Alert'
     version={version}
-    package='@alfalab/core-components-alert'
+    package='@alfalab/core-components/alert'
     stage={1}
 />
 
 ```tsx
-import { Alert } from '@alfalab/core-components-alert';
+import { Alert } from '@alfalab/core-components/alert';
 ```
 
 <Tabs

diff --git a/packages/amount-input/src/docs/Component.stories.mdx b/packages/amount-input/src/docs/Component.stories.mdx
@@ -46,13 +46,13 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='AmountInput'
     version={version}
-    package='@alfalab/core-components-amount-input'
+    package='@alfalab/core-components/amount-input'
     stage={2}
     design='https://www.figma.com/file/KlFOLLkKO8rtvvQE3RXuhq/Click-Library?node-id=532%3A544'
 />
 
 ```tsx
-import { AmountInput } from '@alfalab/core-components-amount-input';
+import { AmountInput } from '@alfalab/core-components/amount-input';
 ```
 
 <Tabs

diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx
@@ -69,12 +69,12 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='Amount'
     version={version}
-    package='@alfalab/core-components-amount'
+    package='@alfalab/core-components/amount'
     stage={3}
 />
 
 ```tsx
-import { Amount } from '@alfalab/core-components-amount';
+import { Amount } from '@alfalab/core-components/amount';
 ```
 
 <Tabs

diff --git a/packages/amount/src/docs/description.mdx b/packages/amount/src/docs/description.mdx
@@ -2,7 +2,7 @@
 https://design.alfabank.ru/patterns/amount
 
 ```tsx live
-// import { Typography } from '@alfalab/core-components-typography';
+// import { Typography } from '@alfalab/core-components/typography';
 
 <Typography.Title font='system'>
     <Amount value={100000000} minority={100} view='withZeroMinorPart' />

diff --git a/packages/attach/src/docs/Component.stories.mdx b/packages/attach/src/docs/Component.stories.mdx
@@ -32,12 +32,12 @@ import Description from './description.mdx';
 <ComponentHeader
     name='Attach'
     version={version}
-    package='@alfalab/core-components-attach'
+    package='@alfalab/core-components/attach'
     stage={2}
 />
 
 ```tsx
-import { Attach } from '@alfalab/core-components-attach';
+import { Attach } from '@alfalab/core-components/attach';
 ```
 
 <Tabs

diff --git a/packages/backdrop/src/docs/Component.stories.mdx b/packages/backdrop/src/docs/Component.stories.mdx
@@ -31,13 +31,13 @@ import vars from '!!raw-loader!../vars.css';
 <ComponentHeader
     name='Backdrop'
     version={version}
-    package='@alfalab/core-components-backdrop'
+    package='@alfalab/core-components/backdrop'
     stage={1}
 />
 
 
 ```tsx
-import { Backdrop } from '@alfalab/core-components-backdrop';
+import { Backdrop } from '@alfalab/core-components/backdrop';
 ```
 
 <Tabs

diff --git a/packages/badge/src/docs/Component.stories.mdx b/packages/badge/src/docs/Component.stories.mdx
@@ -61,12 +61,12 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='Badge'
     version={version}
-    package='@alfalab/core-components-badge'
+    package='@alfalab/core-components/badge'
     stage={3}
 />
 
 ```tsx
-import { Badge } from '@alfalab/core-components-badge';
+import { Badge } from '@alfalab/core-components/badge';
 ```
 
 <Tabs

diff --git a/packages/bank-card/src/docs/Component.stories.mdx b/packages/bank-card/src/docs/Component.stories.mdx
@@ -25,13 +25,13 @@ import Description from './description.mdx';
 <ComponentHeader
     name='BankCard'
     version={version}
-    package='@alfalab/core-components-bank-card'
+    package='@alfalab/core-components/bank-card'
     stage={2}
     design='https://www.figma.com/file/XvRLVKtW2FIQa1Rl3w7ZdP/Passcode-%D0%BF%D1%80%D0%BE%D1%82%D0%BE%D1%82%D0%B8%D0%BF?node-id=1%3A1100'
 />
 
 ```tsx
-import { BankCard } from '@alfalab/core-components-bank-card';
+import { BankCard } from '@alfalab/core-components/bank-card';
 ```
 
 <Tabs

diff --git a/packages/base-modal/src/docs/Component.stories.mdx b/packages/base-modal/src/docs/Component.stories.mdx
@@ -40,13 +40,13 @@ import Description from './description.mdx';
 <ComponentHeader
     name='BaseModal'
     version={version}
-    package='@alfalab/core-components-base-modal'
+    package='@alfalab/core-components/base-modal'
     stage={1}
 />
 
 
 ```tsx
-import { BaseModal } from '@alfalab/core-components-base-modal';
+import { BaseModal } from '@alfalab/core-components/base-modal';
 ```
 
 

diff --git a/packages/bottom-sheet/src/docs/Component.stories.mdx b/packages/bottom-sheet/src/docs/Component.stories.mdx
@@ -82,7 +82,7 @@ export const longText = Array(10).fill(shortText).join('\n\n');
 />
 
 ```tsx
-import { BottomSheet } from '@alfalab/core-components-bottom-sheet';
+import { BottomSheet } from '@alfalab/core-components/bottom-sheet';
 ```
 
 <Tabs

diff --git a/packages/calendar-input/src/docs/Component.stories.mdx b/packages/calendar-input/src/docs/Component.stories.mdx
@@ -49,13 +49,13 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='CalendarInput'
     version={version}
-    package='@alfalab/core-components-calendar-input'
+    package='@alfalab/core-components/calendar-input'
     stage={2}
     design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=13931%3A20767'
 />
 
 ```tsx
-import { CalendarInput } from '@alfalab/core-components-calendar-input';
+import { CalendarInput } from '@alfalab/core-components/calendar-input';
 ```
 
 <Tabs

diff --git a/packages/calendar-range/src/docs/Component.stories.mdx b/packages/calendar-range/src/docs/Component.stories.mdx
@@ -26,13 +26,13 @@ import Description from './description.mdx';
 <ComponentHeader
     name='CalendarRange'
     version={version}
-    package='@alfalab/core-components-calendar-range'
+    package='@alfalab/core-components/calendar-range'
     stage={1}
     design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=13931%3A20767'
 />
 
 ```tsx
-import { CalendarRange } from '@alfalab/core-components-calendar-range';
+import { CalendarRange } from '@alfalab/core-components/calendar-range';
 ```
 
 <Tabs

diff --git a/packages/calendar-with-skeleton/src/docs/Component.stories.mdx b/packages/calendar-with-skeleton/src/docs/Component.stories.mdx
@@ -36,13 +36,13 @@ import { CalendarWithSkeleton } from '../.';
 <ComponentHeader
     name='CalendarWithSkeleton'
     version={version}
-    package='@alfalab/core-components-calendar-with-skeleton'
+    package='@alfalab/core-components/calendar-with-skeleton'
     stage={1}
     design='https://www.figma.com/file/uGndMZufgvqxaNQTaNTEjG/B2B-Web-Components?node-id=3911%3A22929'
 />
 
 ```tsx
-import { CalendarWithSkeleton } from '@alfalab/core-components-calendar-with-skeleton';
+import { CalendarWithSkeleton } from '@alfalab/core-components/calendar-with-skeleton';
 ```
 
 <Tabs

diff --git a/packages/calendar/src/docs/Component.stories.mdx b/packages/calendar/src/docs/Component.stories.mdx
@@ -42,13 +42,13 @@ import vars from '!!raw-loader!../vars.css';
 <ComponentHeader
     name='Calendar'
     version={version}
-    package='@alfalab/core-components-calendar'
+    package='@alfalab/core-components/calendar'
     stage={2}
     design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=3423%3A6'
 />
 
 ```tsx
-import { Calendar } from '@alfalab/core-components-calendar';
+import { Calendar } from '@alfalab/core-components/calendar';
 ```
 
 <Tabs

diff --git a/packages/card-image/src/docs/Component.stories.mdx b/packages/card-image/src/docs/Component.stories.mdx
@@ -34,12 +34,12 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='CardImage'
     version={version}
-    package='@alfalab/core-components-card-image'
+    package='@alfalab/core-components/card-image'
     stage={1}
 />
 
 ```tsx
-import { CardImage } from '@alfalab/core-components-card-image';
+import { CardImage } from '@alfalab/core-components/card-image';
 ```
 
 <Tabs

diff --git a/packages/cdn-icon/src/docs/Component.stories.mdx b/packages/cdn-icon/src/docs/Component.stories.mdx
@@ -25,13 +25,13 @@ import Description from './description.mdx';
 <ComponentHeader
     name='CDNIcon'
     version={version}
-    package='@alfalab/core-components-cdn-icon'
+    package='@alfalab/core-components/cdn-icon'
     stage={2}
     design='https://www.figma.com/file/QoGuPDB1hAMoMMqsQQ4Mx7lB/Icons?node-id=3890%3A311'
 />
 
 ```tsx
-import { CDNIcon } from '@alfalab/core-components-cdn-icon';
+import { CDNIcon } from '@alfalab/core-components/cdn-icon';
 ```
 
 <Tabs

diff --git a/packages/checkbox-group/src/docs/Component.stories.mdx b/packages/checkbox-group/src/docs/Component.stories.mdx
@@ -51,13 +51,13 @@ import Description from './description.mdx';
 <ComponentHeader
     name='CheckboxGroup'
     version={version}
-    package='@alfalab/core-components-checkbox-group'
+    package='@alfalab/core-components/checkbox-group'
     stage={2}
     design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=83%3A306'
 />
 
 ```tsx
-import { CheckboxGroup } from '@alfalab/core-components-checkbox-group';
+import { CheckboxGroup } from '@alfalab/core-components/checkbox-group';
 ```
 
 <Tabs

diff --git a/packages/checkbox/src/docs/Component.stories.mdx b/packages/checkbox/src/docs/Component.stories.mdx
@@ -54,13 +54,13 @@ import styles from '!!raw-loader!../index.module.css';
 <ComponentHeader
     name='Checkbox'
     version={version}
-    package='@alfalab/core-components-checkbox'
+    package='@alfalab/core-components/checkbox'
     stage={2}
     design='https://www.figma.com/file/hqSP3L6qu8UcL3sf18Su1M/Web-Components?node-id=83%3A306'
 />
 
 ```tsx
-import { Checkbox } from '@alfalab/core-components-checkbox';
+import { Checkbox } from '@alfalab/core-components/checkbox';
 ```
 
 <Tabs