docs: add changelogs (#722)

* docs: updates * docs: updates Co-authored-by: reme3d2y <[email protected]>
alfa-laboratory · Jul 7, 2021 · 5988a3b · 5988a3b
1 parent bc5d769
commit 5988a3b
Show file tree

Hide file tree

Showing 79 changed files with 325 additions and 396 deletions.
diff --git a/.storybook/blocks/changelog/changelog.tsx b/.storybook/blocks/changelog/changelog.tsx
@@ -0,0 +1,11 @@
+import React, { FC, ReactNode } from 'react';
+
+import styles from './index.module.css';
+
+type Props = {
+    content: ReactNode;
+};
+
+export const Changelog: FC<Props> = ({ content }) => {
+    return <div className={styles.changelog}>{content}</div>;
+};
diff --git a/.storybook/blocks/changelog/index.module.css b/.storybook/blocks/changelog/index.module.css
@@ -0,0 +1,57 @@
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+@import '../../../packages/vars/src/index.css';
+
+.changelog {
+    & h1:global(.sbdocs):first-child {
+        display: none;
+
+        & + p {
+            display: none;
+        }
+    }
+
+    & h1:global(.sbdocs) {
+        @mixin headline_medium;
+
+        margin: var(--gap-2xl) 0 var(--gap-m);
+        color: var(--color-light-text-primary);
+        border-bottom: 1px solid var(--color-light-border-secondary);
+
+        & a {
+            @mixin headline_medium;
+
+            border: none;
+        }
+    }
+
+    & h2:global(.sbdocs) {
+        @mixin headline_xsmall;
+
+        border: 0;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+        margin-bottom: var(--gap-s);
+        padding-bottom: var(--gap-xs);
+        border-bottom: 1px solid var(--color-light-border-secondary);
+
+        &:after {
+            display: none;
+        }
+
+        & a {
+            @mixin headline_xsmall;
+
+            border: none;
+        }
+
+        & + p {
+            margin-bottom: var(--gap-xl);
+        }
+    }
+
+    & h3:global(.sbdocs) {
+        margin-top: var(--gap-m);
+    }
+}
diff --git a/.storybook/blocks/changelog/index.ts b/.storybook/blocks/changelog/index.ts
@@ -0,0 +1 @@
+export * from './changelog';
diff --git a/.storybook/blocks/example/index.module.css b/.storybook/blocks/example/index.module.css
@@ -49,7 +49,7 @@
         transition: box-shadow 0.2s ease;
 
         &:focus {
-            @mixin focus-outline;
+            outline: 0;
             box-shadow: none;
         }
 

diff --git a/.storybook/blocks/tabs/component.tsx b/.storybook/blocks/tabs/component.tsx
@@ -8,30 +8,35 @@ import React, {
     ReactElement,
 } from 'react';
 import { TabsResponsive, Tab, TabsResponsiveProps } from '@alfalab/core-components-tabs';
+import { Changelog } from '../changelog';
 
 enum TabName {
     DESCRIPTION = 'DESCRIPTION',
     PROPS = 'PROPS',
     CSS_VARS = 'CSS_VARS',
+    CHANGELOG = 'CHANGELOG',
 }
 
 const TabTitle = {
     [TabName.DESCRIPTION]: 'Описание',
     [TabName.PROPS]: 'Свойства',
     [TabName.CSS_VARS]: 'CSS-переменные',
+    [TabName.CHANGELOG]: 'Что нового',
 };
 
 type Props = {
     description: ReactNode;
     props: ReactNode;
     cssVars?: ReactNode;
+    changelog?: string;
     defaultSelected?: TabName;
 };
 
 export const Tabs: FC<Props> = ({
     description,
     props,
     cssVars,
+    changelog,
     defaultSelected = TabName.DESCRIPTION,
 }) => {
     const [selected, setSelected] = useState(defaultSelected);
@@ -58,6 +63,13 @@ export const Tabs: FC<Props> = ({
                     <div style={{ marginTop: '40px' }}>{cssVars}</div>
                 </Tab>
             ) : null,
+            changelog ? (
+                <Tab title={TabTitle[TabName.CHANGELOG]} id={TabName.CHANGELOG}>
+                    <div style={{ marginTop: '40px' }}>
+                        <Changelog content={changelog} />
+                    </div>
+                </Tab>
+            ) : null,
         ].filter(isValidElement) as ReactElement[];
     };
 

diff --git a/docs/13.changelog.stories.mdx b/docs/13.changelog.stories.mdx
@@ -0,0 +1,6 @@
+import { Description } from '@storybook/addon-docs/blocks';
+import changelog from '../CHANGELOG.md';
+
+<Meta title='Гайдлайны/Changelog' />
+
+<Description>{changelog.replace(/^# \[/gm, '## [')}</Description>
diff --git a/packages/alert/src/docs/Component.stories.mdx b/packages/alert/src/docs/Component.stories.mdx
@@ -1,14 +1,14 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { select, text, boolean } from '@storybook/addon-knobs';
-import { Container, Row, Col } from 'storybook/blocks/grid';
-import { Tabs } from 'storybook/blocks/tabs';
-import { ComponentHeader } from 'storybook/blocks/component-header';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
 
 import { Button } from '../../../button/src';
 
 import { Alert } from '../Component';
 import { name, version } from '../../package.json';
 import Description from './description.mdx'
+import Changelog from '../../CHANGELOG.md';
+
 
 <Meta
     title='Компоненты/Alert'
@@ -49,4 +49,5 @@ import { Alert } from '@alfalab/core-components/alert';
 <Tabs
     description={<Description />}
     props={<Props of={Alert} />}
+    changelog={<Changelog />}
 />
diff --git a/packages/amount-input/src/docs/Component.stories.mdx b/packages/amount-input/src/docs/Component.stories.mdx
@@ -2,15 +2,15 @@ import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
 import { text, select, boolean, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Icon from '@alfalab/icons-glyph/StarMIcon';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { CssVars } from 'storybook/blocks/css-vars';
-import { Tabs } from 'storybook/blocks/tabs';
+import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { AmountInput } from '../Component';
 import { name, version } from '../../package.json';
+import Changelog from '../../CHANGELOG.md';
 import Description from './description.mdx';
 import styles from '!!raw-loader!../index.module.css';
 
+
 <Meta
     title='Компоненты/AmountInput'
     component={AmountInput}
@@ -57,6 +57,7 @@ import { AmountInput } from '@alfalab/core-components/amount-input';
 
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={AmountInput} />}
     cssVars={<CssVars css={styles} />}
 />
diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx
@@ -2,13 +2,12 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { text, select, boolean, number } from '@storybook/addon-knobs';
 import { getAllCurrencyCodes } from '@alfalab/utils';
 import { Container, Row, Col } from 'storybook/blocks/grid';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs';
-import { CssVars } from 'storybook/blocks/css-vars';
+import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { Amount } from '../component';
 import { name, version } from '../../package.json';
-import Description from './description.mdx'
+import Description from './description.mdx';
+import Changelog from '../../CHANGELOG.md';
 import styles from '!!raw-loader!../index.module.css';
 
 
@@ -31,7 +30,7 @@ import styles from '!!raw-loader!../index.module.css';
         const className = select('className', '');
         const dataTestId = text('dataTestId', '');
         return (
-            <React.Fragment>
+            <Container>
                 <Row>
                     <Col>Amount</Col>
                     <Col>Amount.Pure (Без стилей)</Col>
@@ -58,7 +57,7 @@ import styles from '!!raw-loader!../index.module.css';
                         />
                     </Col>
                 </Row>
-            </React.Fragment>
+            </Container>
         );
     })}
 </Story>
@@ -79,6 +78,7 @@ import { Amount } from '@alfalab/core-components/amount';
 
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={Amount} />}
     cssVars={<CssVars css={styles} />}
 />
diff --git a/packages/attach/src/docs/Component.stories.mdx b/packages/attach/src/docs/Component.stories.mdx
@@ -1,11 +1,12 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
 import { text, select, boolean, number } from '@storybook/addon-knobs';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
 
 import { Attach } from '../Component';
 import { name, version } from '../../package.json';
 import Description from './description.mdx';
+import Changelog from '../../CHANGELOG.md';
+
 
 <Meta
     title='Компоненты/Attach'
@@ -42,5 +43,6 @@ import { Attach } from '@alfalab/core-components/attach';
 
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={Attach} />}
 />
diff --git a/packages/backdrop/src/docs/Component.stories.mdx b/packages/backdrop/src/docs/Component.stories.mdx
@@ -1,13 +1,13 @@
-import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Props, Story } from '@storybook/addon-docs/blocks';
 import {boolean, select, text} from '@storybook/addon-knobs';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs'
-import { CssVars } from 'storybook/blocks/css-vars';
+import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { Backdrop } from '../Component';
 import { version } from '../../package.json';
 import Description from './description.mdx';
-import vars from '!!raw-loader!../vars.css';
+import Changelog from '../../CHANGELOG.md';
+import styles from '!!raw-loader!../vars.css';
+
 
 <Meta
     title='Компоненты/Backdrop'
@@ -42,7 +42,8 @@ import { Backdrop } from '@alfalab/core-components/backdrop';
 
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={Backdrop} />}
-    cssVars={<CssVars css={vars}/>}
+    cssVars={<CssVars css={styles}/>}
 />
 
diff --git a/packages/badge/src/docs/Component.stories.mdx b/packages/badge/src/docs/Component.stories.mdx
@@ -1,8 +1,6 @@
 import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
 import { select, number, boolean } from '@storybook/addon-knobs';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs';
-import { CssVars } from 'storybook/blocks/css-vars';
+import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { CheckmarkOnCircleMIcon } from '@alfalab/icons-glyph';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph';
@@ -14,6 +12,7 @@ import { ClockMIcon } from '@alfalab/icons-glyph';
 import { Badge } from '../Component';
 import { name, version } from '../../package.json';
 import Description from './description.mdx';
+import Changelog from '../../CHANGELOG.md';
 import styles from '!!raw-loader!../index.module.css';
 
 
@@ -70,7 +69,8 @@ import { Badge } from '@alfalab/core-components/badge';
 ```
 
 <Tabs
-  description={<Description />}
-  props={<Props of={Badge} />}
-  cssVars={<CssVars css={styles} />}
+    description={<Description />}
+    changelog={<Changelog />}
+    props={<Props of={Badge} />}
+    cssVars={<CssVars css={styles} />}
 />
diff --git a/packages/bank-card/src/docs/Component.stories.mdx b/packages/bank-card/src/docs/Component.stories.mdx
@@ -1,11 +1,12 @@
 import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
 import { text, select } from '@storybook/addon-knobs';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
 
 import { BankCard } from '../Component';
 import { name, version } from '../../package.json';
 import Description from './description.mdx';
+import Changelog from '../../CHANGELOG.md';
+
 
 <Meta
     title='Компоненты/BankCard'
@@ -35,6 +36,7 @@ import { BankCard } from '@alfalab/core-components/bank-card';
 ```
 
 <Tabs
-  description={<Description />}
-  props={<Props of={BankCard} />}
+    description={<Description />}
+    changelog={<Changelog />}
+    props={<Props of={BankCard} />}
 />
diff --git a/packages/base-modal/src/docs/Component.stories.mdx b/packages/base-modal/src/docs/Component.stories.mdx
@@ -1,10 +1,11 @@
 import { Meta, Props, Preview, Story } from '@storybook/addon-docs/blocks';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+
 import { Button } from '../../../button/src';
 
 import { BaseModal } from '../Component';
 import { version } from '../../package.json';
+import Changelog from '../../CHANGELOG.md';
 import Description from './description.mdx';
 
 
@@ -49,8 +50,8 @@ import Description from './description.mdx';
 import { BaseModal } from '@alfalab/core-components/base-modal';
 ```
 
-
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={BaseModal} />}
 />
diff --git a/packages/bottom-sheet/src/docs/Component.stories.mdx b/packages/bottom-sheet/src/docs/Component.stories.mdx
@@ -1,12 +1,11 @@
-import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
-import { text, select, boolean, number } from '@storybook/addon-knobs';
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { text, boolean } from '@storybook/addon-knobs';
 import { Button } from '@alfalab/core-components-button';
-import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Tabs } from 'storybook/blocks/tabs'
-import { CssVars } from 'storybook/blocks/css-vars';
+import { ComponentHeader, Tabs, CssVars } from 'storybook/blocks';
 
 import { BottomSheet } from '../';
 import { name, version } from '../../package.json';
+import Changelog from '../../CHANGELOG.md';
 import Description from './description.mdx';
 import vars from '!!raw-loader!../index.module.css';
 
@@ -15,6 +14,7 @@ export const shortText =
 
 export const longText = Array(10).fill(shortText).join('\n\n');
 
+
 <Meta
     title='Компоненты/BottomSheet'
     component={BottomSheet}
@@ -87,6 +87,7 @@ import { BottomSheet } from '@alfalab/core-components/bottom-sheet';
 
 <Tabs
     description={<Description />}
+    changelog={<Changelog />}
     props={<Props of={BottomSheet} />}
     cssVars={<CssVars css={vars}/>}
 />