feat: upgrade storybook (#696)

* chore: upgrade version * chrome: make this works * chore: fix bugs * feat(storybook): sort stories by alphabet (#708) * feat(storybook): make "Docs" tab default (#707) * Feat/change story docs structure (#714) * fix(storybook): fix typo * refactor(storybook): add tabs to all stories * refactor(storybook): fix some refactoring errors Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> * Feat/live edit storybook docs (#716) * chore(release): 17.4.2 [skip ci] ## [17.4.2](v17.4.1...v17.4.2) (2021-06-09) ### Bug Fixes * **skeleton:** remove vars that purge kills ([886d1b2](886d1b2)) * chore: publish - @alfalab/core-components-calendar-with-skeleton@2.0.3 - @alfalab/core-components-skeleton@1.4.1 * chore: add codemod for heading, label, paragraph (#690) * chore: add heading, label and paragraph codemode * style(select): change optgroup label color (#701) Co-authored-by: Михаил Корецкий <mkoretskiy@MacBook-Pro-Mihail.local> * fix(select): fix checkmark position on click theme (#699) * feat(notification): add null autoCloseDelay (#698) Co-authored-by: Кононенко Артем Игоревич <AIKononenko@alfabank.ru> * feat(select): add useSelectWithLoading preset (#693) * chore(release): 17.5.0 [skip ci] # [17.5.0](v17.4.2...v17.5.0) (2021-06-17) ### Bug Fixes * **select:** fix checkmark position on click theme ([#699](#699)) ([0a3bab5](0a3bab5)) ### Features * **notification:** add null autoCloseDelay ([#698](#698)) ([6c2f0e0](6c2f0e0)) * **select:** add useSelectWithLoading preset ([#693](#693)) ([12d542f](12d542f)) * fix(calendar-with-skeleton): ref & six weeks height issues (#705) * chore(release): 17.5.1 [skip ci] ## [17.5.1](v17.5.0...v17.5.1) (2021-06-21) ### Bug Fixes * **calendar-with-skeleton:** ref & six weeks height issues ([#705](#705)) ([907ebe1](907ebe1)) * feat(dark-theme-styles-injector): add prop for selector (#709) * feat(themes): change colors building * feat(dark-theme-styles-injector): add prop for selector * fix(intl-phone-input): format input value (#703) Co-authored-by: Александр Серов <ARserov@alfabank.ru> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> * feat(textarea): add value counter (#695) * feat(textarea): add value counter * feat(textarea): remove pluralize from counter text * feat(slider-input): design updates (#673) * test(keyboard-focusable): update screenshot * feat(form-control): change focused state bg-color * feat(input): swap right addons and error/success icon * feat(slider-input): update design * feat(input): change default error icon * feat(themes): add error icon to site theme * feat(input): update default error icon * docs(slider-input): add site theme to demo * feat(slider-input): add right slots margins * feat(themes): fix click form control * chore(release): 17.6.0 [skip ci] # [17.6.0](v17.5.1...v17.6.0) (2021-06-22) ### Bug Fixes * **intl-phone-input:** format input value ([#703](#703)) ([b5e91ed](b5e91ed)) ### Features * **dark-theme-styles-injector:** add prop for selector ([#709](#709)) ([f74cdc7](f74cdc7)) * **slider-input:** design updates ([#673](#673)) ([794e3cc](794e3cc)) * **textarea:** add value counter ([#695](#695)) ([cbc6bd3](cbc6bd3)) * test: update screenshot * chore: publish - @alfalab/core-components-amount-input@4.0.20 - @alfalab/core-components-attach@2.0.2 - @alfalab/core-components-bank-card@3.4.8 - @alfalab/core-components-calendar-input@3.0.8 - @alfalab/core-components-calendar-range@2.0.3 - @alfalab/core-components-calendar-with-skeleton@2.0.4 - @alfalab/core-components-dark-theme-styles-injector@1.5.0 - @alfalab/core-components-form-control@6.2.0 - @alfalab/core-components-input-autocomplete@6.1.7 - @alfalab/core-components-input@6.2.0 - @alfalab/core-components-intl-phone-input@4.1.7 - @alfalab/core-components-keyboard-focusable@1.3.0 - @alfalab/core-components-masked-input@3.2.27 - @alfalab/core-components-notification-manager@3.0.2 - @alfalab/core-components-notification@4.1.0 - @alfalab/core-components-phone-input@4.0.20 - @alfalab/core-components-picker-button@5.0.4 - @alfalab/core-components-select@8.1.0 - @alfalab/core-components-slider-input@3.2.0 - @alfalab/core-components-tabs@4.1.1 - @alfalab/core-components-textarea@5.1.0 - @alfalab/core-components-themes@4.3.0 - @alfalab/core-components-with-suffix@2.4.19 * fix(storybook): fix typo * refactor(storybook): add tabs to all stories * refactor(storybook): fix some refactoring errors n * test(select): update screenshots * feat(storybook): add live-edit stories without dependencies * feat(bottom-sheet): new component (PDS-228) (#645) * feat(bottom-sheet): add base of component * feat(bottom-sheet): add base of swipe * feat(bottom-sheet): add swiping * fix(toast-plate): fix cross color (#642) * chore(release): 16.1.2 [skip ci] ## [16.1.2](v16.1.1...v16.1.2) (2021-05-05) ### Bug Fixes * **toast-plate:** fix cross color ([#642](#642)) ([96a17fd](96a17fd)) * chore: publish - @alfalab/core-components-notification-manager@2.0.2 - @alfalab/core-components-notification@3.0.2 - @alfalab/core-components-toast-plate@2.3.1 - @alfalab/core-components-toast@2.0.1 * fix: update popover versions (#646) * fix(calendar-input): update popover version * fix(toast): update popover version * fix(tooltip): update popover version * chore(release): 16.1.3 [skip ci] ## [16.1.3](v16.1.2...v16.1.3) (2021-05-06) ### Bug Fixes * update popover versions ([#646](#646)) ([199cf80](199cf80)) * chore: publish - @alfalab/core-components-calendar-input@3.0.1 - @alfalab/core-components-calendar-range@1.3.27 - @alfalab/core-components-toast@2.0.2 - @alfalab/core-components-tooltip@3.0.1 * feat(button): add loader minimal display interval (#634) * feat(button): add loader minimal display interval * test(button): add some tests * feat(icon-button): add negative view (#635) * chore(release): 16.2.0 [skip ci] # [16.2.0](v16.1.3...v16.2.0) (2021-05-07) ### Features * **button:** add loader minimal display interval ([#634](#634)) ([d2f7edc](d2f7edc)) * **icon-button:** add negative view ([#635](#635)) ([7006116](7006116)) * chore: publish - @alfalab/core-components-button@2.2.0-beta.4 - @alfalab/core-components-file-upload-item@1.1.2 - @alfalab/core-components-icon-button@1.3.0 * feat(button): fix version (#648) * chore(deps-dev): bump json from 9.0.6 to 10.0.0 (#647) Bumps [json](https://github.com/trentm/json) from 9.0.6 to 10.0.0. - [Release notes](https://github.com/trentm/json/releases) - [Changelog](https://github.com/trentm/json/blob/master/CHANGES.md) - [Commits](trentm/json@9.0.6...10.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(intl-phone-input): add autocomplete (#630) * feat(intl-phone-input): draft intlphone input with autocomplete * chore: pochinil * feat(intl-phone-input): update country select styles * feat(intl-phone-input): dont erase country code * fix(intl-phone-input): fix registry * fix(intl-phone-input): fix registry * fix(intl-phone-input): fix build * fix(intl-phone-input): ts error * feat(intl-phone-input): return old deps * feat(intl-phone-input): add new props * fix(intl-phone-input): pasting starting with 8 * test(intl-phone-input): fix screenshot tests * fix(intl-phone-input): fix ts error Co-authored-by: Александр Серов <ARserov@alfabank.ru> Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> Co-authored-by: dmitrsavk <dmitrsavk@yandex.ru> * chore(release): 16.3.0 [skip ci] # [16.3.0](v16.2.0...v16.3.0) (2021-05-07) ### Features * **button:** fix version ([#648](#648)) ([ec51599](ec51599)) * **intl-phone-input:** add autocomplete ([#630](#630)) ([18b5714](18b5714)) * chore: publish - @alfalab/core-components-alert@1.1.5 - @alfalab/core-components-amount-input@4.0.15 - @alfalab/core-components-attach@1.4.22 - @alfalab/core-components-bank-card@3.4.2 - @alfalab/core-components-button@2.3.0 - @alfalab/core-components-calendar-input@3.0.2 - @alfalab/core-components-calendar-range@1.3.28 - @alfalab/core-components-calendar-with-skeleton@1.1.2 - @alfalab/core-components-calendar@1.2.10 - @alfalab/core-components-confirmation@5.0.0 - @alfalab/core-components-file-upload-item@1.1.3 - @alfalab/core-components-icon-button@1.3.1 - @alfalab/core-components-input-autocomplete@6.1.0 - @alfalab/core-components-input@6.0.14 - @alfalab/core-components-intl-phone-input@4.1.0 - @alfalab/core-components-masked-input@3.2.21 - @alfalab/core-components-modal@1.4.2 - @alfalab/core-components-notification-manager@2.0.3 - @alfalab/core-components-notification@3.0.3 - @alfalab/core-components-phone-input@4.0.14 - @alfalab/core-components-picker-button@4.0.2 - @alfalab/core-components-plate@1.7.2 - @alfalab/core-components-select@8.0.2 - @alfalab/core-components-slider-input@3.1.2 - @alfalab/core-components-toast-plate@2.3.2 - @alfalab/core-components-toast@2.0.3 - @alfalab/core-components-with-suffix@2.4.14 * feat(base-modal): add utils export * test: update snapshots fix(backdrop): fix opacity feat(bottom-sheet): updates docs(bottom-sheet): updates feat(bottom-sheet): updates docs(bottom-sheet): updates feat(bottom-sheet): try scroll feat(bottom-sheet): try scroll feat(bottom-sheet): some fixes feat(bottom-sheet): add footer highlighted feat(bottom-sheet): updates feat(bottom-sheet): updates feat(bottom-sheet): add base of tests * test(bottom-sheet): fix * test(bottom-sheet): add some tests * test(bottom-sheet): add swipe test * test(bottom-sheet): add some tests * feat(bottom-sheet): add swipe velocity to sheet * refactor(bottom-sheet): migrate to base modal (#669) * refactor(bottom-sheet): migrate to base-modal * feat(bottom-sheet): updates Co-authored-by: dmitrsavk <dmitrsavk@yandex.ru> * feat(bottom-sheet): some design-review fixes * feat(bottom-sheet): updates * feat(bottom-sheet): change animation Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Aleksandr Serov <33555131+AleksandrSerov@users.noreply.github.com> Co-authored-by: Александр Серов <ARserov@alfabank.ru> Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> * fix(base-modal): fix has scroll bug (#712) * fix(base-modal): fix has scroll bug * fix(base-modal): revert observer on content ref * fix(base-select): revert ref Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> * fix(space): remove last element margin (#713) Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> * fix(typography): add missing weight styles (#719) * fix(typography): add missing weight styles * updated screenshot * feat(confirmation): add property for change retry button text (#720) * feat(confirmation): add property for change retry button text * feat(confirmation): rename buttonRetryText to buttonReturnText * feat(confirmation): add property for change retry button text Property buttonRetryText now changes button label at first screen instead of help screen BREAKING CHANGE: buttonRetryText renamed to buttonReturnText Co-authored-by: Alexander Soldatov <aesoldatov@alfabank.ru> * feat(skeleton): add display var, change default to block (#718) BREAKING CHANGE: inline-block changes to block * chore(release): 18.0.0 [skip ci] # [18.0.0](v17.6.0...v18.0.0) (2021-06-28) ### Bug Fixes * **base-modal:** fix has scroll bug ([#712](#712)) ([a6749a1](a6749a1)) * **space:** remove last element margin ([#713](#713)) ([bc36cf7](bc36cf7)) * **typography:** add missing weight styles ([#719](#719)) ([6b855aa](6b855aa)) ### Features * **bottom-sheet:** new component (PDS-228) ([#645](#645)) ([1f7391d](1f7391d)), closes [#642](#642) [#642](#642) [#646](#646) [#646](#646) [#634](#634) [#635](#635) [#634](#634) [#635](#635) [#648](#648) [#647](#647) [#630](#630) [#648](#648) [#630](#630) [#669](#669) * **confirmation:** add property for change retry button text ([#720](#720)) ([c0f7688](c0f7688)) * **skeleton:** add display var, change default to block ([#718](#718)) ([27aaa60](27aaa60)) ### BREAKING CHANGES * **skeleton:** inline-block changes to block * **confirmation:** buttonRetryText renamed to buttonReturnText Co-authored-by: Alexander Soldatov <aesoldatov@alfabank.ru> * chore: publish - @alfalab/core-components-base-modal@2.1.0 - @alfalab/core-components-bottom-sheet@1.1.0 - @alfalab/core-components-calendar-with-skeleton@2.0.5 - @alfalab/core-components-circular-progress-bar@1.2.11 - @alfalab/core-components-confirmation@7.0.0 - @alfalab/core-components-drawer@2.1.3 - @alfalab/core-components-input-autocomplete@6.1.8 - @alfalab/core-components-intl-phone-input@4.1.8 - @alfalab/core-components-list-header@1.1.9 - @alfalab/core-components-modal@1.5.5 - @alfalab/core-components-picker-button@5.0.5 - @alfalab/core-components-select@8.1.1 - @alfalab/core-components-skeleton@2.0.0 - @alfalab/core-components-space@1.1.1 - @alfalab/core-components-typography@1.5.1 * feat(password-input): add password input (PDS-233) (#691) * feat(password-input): add password input * feat(password-input): fixes * test(password-input): add screenshot tests * feat(password-input): hide reveal icon in ms-edge browser * feat(password-input): change icon-button view to secondary * docs: fix tabs * chore(release): 18.1.0 [skip ci] # [18.1.0](v18.0.0...v18.1.0) (2021-06-29) ### Features * **password-input:** add password input (PDS-233) ([#691](#691)) ([d872e4d](d872e4d)) * chore: publish - @alfalab/core-components-password-input@1.1.0 - @alfalab/core-components-toast@2.2.0 * fix(dark-theme-styles-injector): fix rendering passed styles (#723) * feat(calendar-range): pass props to render calendar in popper (#702) * feat(calendar-range): pass props to render calendar in popper * test: update test screenshot * revert: revert update of test screenshot * refactor(calendar-range): change interface for calendarPosition prop * chore(calendar-range): add calendarPosition knob to component story * chore(calendar-range): chanage knob to demo variant * feat(calendar-range): fully adds popover variant * test(calendar-range): adds tests for popover variant * test(calendar-range): small fixes for popover variant tests * test(calendar-range): fix typo in test * refactor(calendar-range): fix import, interface, ts feature * test(calendar-range): add tests for useCalendarMaxMinDates Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> Co-authored-by: Dmitry Savkin <dmitrsavk@yandex.ru> * chore(release): 18.2.0 [skip ci] # [18.2.0](v18.1.0...v18.2.0) (2021-06-30) ### Bug Fixes * **dark-theme-styles-injector:** fix rendering passed styles ([#723](#723)) ([882841c](882841c)) ### Features * **calendar-range:** pass props to render calendar in popper ([#702](#702)) ([4369e46](4369e46)) * chore: publish - @alfalab/core-components-calendar-input@3.1.0 - @alfalab/core-components-calendar-range@2.1.0 - @alfalab/core-components-dark-theme-styles-injector@1.5.1 * fix(base-modal): resubscribe observer when content node changed * chore(release): 18.2.1 [skip ci] ## [18.2.1](v18.2.0...v18.2.1) (2021-07-02) ### Bug Fixes * **base-modal:** resubscribe observer when content node changed ([2fef06e](2fef06e)) * chore: publish - @alfalab/core-components-base-modal@2.1.1 - @alfalab/core-components-bottom-sheet@1.1.1 - @alfalab/core-components-drawer@2.1.4 - @alfalab/core-components-modal@1.5.6 * chore: upgrade version * chrome: make this works * chore: fix bugs * feat(storybook): sort stories by alphabet (#708) * feat(storybook): make "Docs" tab default (#707) * Feat/change story docs structure (#714) * fix(storybook): fix typo * refactor(storybook): add tabs to all stories * refactor(storybook): fix some refactoring errors n Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> * chore: update all stories, omg Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Dmitry Savkin <dmitrsavk@yandex.ru> Co-authored-by: Михаил Корецкий <mkoretskiy@MacBook-Pro-Mihail.local> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com> Co-authored-by: Artem Kononenko <Artess999@users.noreply.github.com> Co-authored-by: Кононенко Артем Игоревич <AIKononenko@alfabank.ru> Co-authored-by: Aleksandr Serov <33555131+AleksandrSerov@users.noreply.github.com> Co-authored-by: Александр Серов <ARserov@alfabank.ru> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> Co-authored-by: Aleksandr Dyuzhikov <alex.duzh@gmail.com> Co-authored-by: Mikhail Gekhman <45306345+avlnche64@users.noreply.github.com> Co-authored-by: Evgeny Sergeev <SiebenSieben@gmail.com> Co-authored-by: Alexander Soldatov <inc1uder@ya.ru> Co-authored-by: Alexander Soldatov <aesoldatov@alfabank.ru> * chore: fix case * chore: update stories * chore: update & fix screenshots * chore: fix select test * chore: stories * chore: stories * docs: add changelogs (#722) * docs: updates * docs: updates Co-authored-by: reme3d2y <AYatsenko@alfabank.ru> * chore: global styles * chore: changelog story * chore: sorting * chore: styles * chore: styles * chore: fix import * feat: show theme-switcher in all tabs * chore: update sb & drop addon-actions * chore: drop button inverted themes * chore: update vars stories * chore: styles * chore: remove relative imports Co-authored-by: Mikhail <koretsky97@gmail.com> Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Dmitry Savkin <dmitrsavk@yandex.ru> Co-authored-by: Михаил Корецкий <mkoretskiy@MacBook-Pro-Mihail.local> Co-authored-by: Artem Kononenko <Artess999@users.noreply.github.com> Co-authored-by: Кононенко Артем Игоревич <AIKononenko@alfabank.ru> Co-authored-by: Aleksandr Serov <33555131+AleksandrSerov@users.noreply.github.com> Co-authored-by: Александр Серов <ARserov@alfabank.ru> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Aleksandr Dyuzhikov <alex.duzh@gmail.com> Co-authored-by: Mikhail Gekhman <45306345+avlnche64@users.noreply.github.com> Co-authored-by: Evgeny Sergeev <SiebenSieben@gmail.com> Co-authored-by: Alexander Soldatov <inc1uder@ya.ru> Co-authored-by: Alexander Soldatov <aesoldatov@alfabank.ru>
alfa-laboratory · Jul 8, 2021 · bf8350e · bf8350e
1 parent 3112f69
commit bf8350e
Show file tree

Hide file tree

Showing 305 changed files with 12,161 additions and 9,806 deletions.
diff --git a/.storybook/addons/theme-switcher/register.js b/.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,
     });

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/...ocks/component-header/ComponentHeader.css → ...mponent-header/ComponentHeader.module.css b/...ocks/component-header/ComponentHeader.css → ...mponent-header/ComponentHeader.module.css
diff --git a/.storybook/blocks/component-header/ComponentHeader.tsx b/.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;

diff --git a/.storybook/blocks/example/LiveExample.tsx b/.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,

diff --git a/.storybook/blocks/example/index.module.css b/.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;
         }
 

diff --git a/.storybook/blocks/example/utils/scope.ts b/.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,
 };
diff --git a/.storybook/blocks/grid/Col.css → .storybook/blocks/grid/Col.module.css b/.storybook/blocks/grid/Col.css → .storybook/blocks/grid/Col.module.css
diff --git a/.storybook/blocks/grid/Col.tsx b/.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;

diff --git a/.storybook/blocks/grid/Container.css → .storybook/blocks/grid/Container.module.css b/.storybook/blocks/grid/Container.css → .storybook/blocks/grid/Container.module.css
diff --git a/.storybook/blocks/grid/Container.tsx b/.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;

diff --git a/.storybook/blocks/grid/Row.css → .storybook/blocks/grid/Row.module.css b/.storybook/blocks/grid/Row.css → .storybook/blocks/grid/Row.module.css
diff --git a/.storybook/blocks/grid/Row.tsx b/.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;

diff --git a/.storybook/blocks/index.ts b/.storybook/blocks/index.ts
@@ -1,3 +1,4 @@
+export * from './changelog';
 export * from './css-vars';
 export * from './component-header';
 export * from './status';

diff --git a/.storybook/blocks/status/Status.css → .storybook/blocks/status/Status.module.css b/.storybook/blocks/status/Status.css → .storybook/blocks/status/Status.module.css
diff --git a/.storybook/blocks/status/Status.tsx b/.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',

diff --git a/.storybook/blocks/tabs/component.tsx b/.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]);