feat: upgrade storybook

.storybook/addons/theme-switcher/register.js

@@ -29,7 +29,7 @@ const Addon = () => {
     return (
         themes.length > 0 && (
             <div className='tool'>
-                <span className='label'>Theme:</span>
+                <span className='label'>Выбор темы: </span>
                 <Form.Select size={1} onChange={handleChange} className='select' value={theme}>
                     {['default'].concat(themes).map(themeName => (
                         <option
@@ -48,7 +48,7 @@ const Addon = () => {
 addons.register(ADDON_ID, () => {
     addons.add(ADDON_ID, {
         type: types.TOOL,
-        match: ({ viewMode }) => viewMode === 'story',
+        match: () => true,
         render: () => <Addon />,
         paramKey: ADDON_ID,
     });

.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>;
+};

.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);
+    }
+}

.storybook/blocks/changelog/index.ts

@@ -0,0 +1 @@
+export * from './changelog';

.storybook/blocks/component-header/ComponentHeader.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { Title } from '@storybook/addon-docs/blocks';
 import { Status } from 'storybook/blocks/status';
 
-import styles from './ComponentHeader.css';
+import styles from './ComponentHeader.module.css';
 
 type ComponentHeaderProps = {
     name: string;

.storybook/blocks/example/LiveExample.tsx

@@ -2,7 +2,6 @@ import React, { FC, useState } from 'react';
 import { LiveProvider, LiveEditor, LivePreview } from 'react-live';
 import { ActionBar } from '@storybook/components';
 import { PrismTheme } from 'prism-react-renderer';
-
 import { ErrorSection } from './ErrorSection';
 import globalScope from './utils/scope';
 
@@ -30,7 +29,7 @@ export const LiveExample: FC<LiveExampleProps> = ({
         window.open(
             `${
                 window.parent.location.pathname
-            }?path=/docs/гайдлайны-песочница--page/code=${encodeURIComponent(code)}`,
+            }?path=/docs/компоненты-песочница--page/code=${encodeURIComponent(code)}`,
         );
     };
 
@@ -45,10 +44,16 @@ export const LiveExample: FC<LiveExampleProps> = ({
         },
     ];
 
+    const code2 = code
+        .split('\n')
+        .filter(line => line.startsWith('//') === false)
+        .join('\n')
+        .trim();
+
     return (
         <LiveProvider
             code={code}
-            noInline={code.startsWith('<') === false}
+            noInline={code2.startsWith('<') === false && code2.startsWith('//') === false}
             theme={theme}
             scope={{
                 ...globalScope,

.storybook/blocks/example/index.module.css

@@ -46,9 +46,10 @@
     & button {
         justify-content: center;
         min-width: 110px;
-        transition: 0.2s ease;
+        transition: box-shadow 0.2s ease;
 
         &:focus {
+            outline: 0;
             box-shadow: none;
         }
 

.storybook/blocks/example/utils/scope.ts

@@ -1,6 +1,8 @@
 import { ComponentType } from 'react';
 import * as grid from '../../grid';
 import * as glyph from '@alfalab/icons-glyph';
+import * as dateUtils from 'date-fns';
+import * as knobs from '@storybook/addon-knobs';
 
 const req = require.context(
     '../../../../packages',
@@ -12,11 +14,14 @@ const isComponent = (component: any) =>
     ['function', 'object'].some(t => typeof component === t) &&
     ['displayName', '$$typeof'].some(p => p in component);
 
+const isComponentsMap = (component: any) =>
+    component && Object.values(component).some(isComponent)
+
 const components = req.keys().reduce((acc: Record<string, ComponentType<unknown>>, key) => {
     Object.entries(req(key)).forEach(([componentName, component]: [string, any]) => {
-        if (isComponent(component)) {
+        // if (isComponent(component) || isComponentsMap(component)) {
             acc[componentName] = component;
-        }
+        // }
     });
 
     return acc;
@@ -26,4 +31,6 @@ export default {
     ...components,
     ...grid,
     ...glyph,
+    ...dateUtils,
+    ...knobs,
 };

.storybook/blocks/grid/Col.tsx

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes, useCallback, ChangeEvent, ReactNode } from 'react';
 import cn from 'classnames';
 
-import styles from './Col.css';
+import styles from './Col.module.css';
 
 type ColProps = {
     children?: ReactNode;

.storybook/blocks/grid/Container.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import cn from 'classnames';
 
-import styles from './Container.css';
+import styles from './Container.module.css';
 
 type ContainerProps = {
     children?: ReactNode;

.storybook/blocks/grid/Row.tsx

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes, useCallback, ChangeEvent, ReactNode } from 'react';
 import cn from 'classnames';
 
-import styles from './Row.css';
+import styles from './Row.module.css';
 
 type RowProps = {
     children?: ReactNode;

.storybook/blocks/index.ts

@@ -1,3 +1,4 @@
+export * from './changelog';
 export * from './css-vars';
 export * from './component-header';
 export * from './status';

.storybook/blocks/status/Status.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import cn from 'classnames';
 
-import styles from './Status.css';
+import styles from './Status.module.css';
 
 const STATUS = {
     1: 'Draft',

.storybook/blocks/tabs/component.tsx

@@ -1,29 +1,42 @@
-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';
+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);
@@ -36,24 +49,28 @@ 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,
+            changelog ? (
+                <Tab title={TabTitle[TabName.CHANGELOG]} id={TabName.CHANGELOG}>
+                    <div style={{ marginTop: '40px' }}>
+                        <Changelog content={changelog} />
+                    </div>
+                </Tab>
+            ) : null,
+        ].filter(isValidElement) as ReactElement[];
     };
 
     const tabs = useMemo(() => renderTabs(), [description, props, cssVars]);