docs: add docs tab in storybook (#61)

.storybook/docs.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {
+    Description,
+    DocsContext,
+    Subtitle,
+    Title,
+} from '@storybook/addon-docs/';
+
+const readmeCache: Record<string, {default: string}> = {};
+
+function importAllReadme(ctx: __WebpackModuleApi.RequireContext) {
+    const path = ctx.id.split(' ')[0].replace('./', '') + '/';
+    ctx.keys().forEach((key) => {
+        const dirPath = key.replace(/^\.\//, path).replace(/\/readme\.md$/i, '');
+        readmeCache[dirPath] = ctx(key);
+    });
+}
+
+importAllReadme(require.context('../src/components', true, /readme\.md$/i));
+
+export const Docs = () => {
+    const context = React.useContext(DocsContext);
+    const fileName = context?.parameters?.fileName;
+    const kind = context.kind;
+    let isComponent = false;
+    if (kind && /Components\//.test(kind)) {
+        isComponent = true;
+    }
+
+    let dirPath;
+    if (isComponent && fileName) {
+        const pathArr = fileName.split('/');
+        dirPath = pathArr.slice(1, pathArr.length - 2).join('/');
+    }
+
+    let sourceBadgeContent;
+    if (dirPath) {
+        sourceBadgeContent = (
+            <a
+                href={`https://github.com/gravity-ui/components/tree/main/${dirPath}`}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img src="https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/icons/github-badge.svg" />
+            </a>
+        );
+    }
+
+    let readmeContent;
+    if (dirPath && readmeCache[dirPath]) {
+        readmeContent = (
+            <div
+                className="yfm yfm_only-light"
+                dangerouslySetInnerHTML={{__html: readmeCache[dirPath].default}}
+            />
+        );
+    }
+
+    return (
+        <>
+            {/* <Title /> */}
+            {sourceBadgeContent}
+            {/* <Subtitle /> */}
+            {/* <Description /> */}
+            {readmeContent}
+        </>
+    );
+};

.storybook/main.ts

@@ -1,12 +1,30 @@
 import type {StorybookConfig} from '@storybook/core-common';
 
+const {join} = require('path');
+
+
 const config: StorybookConfig = {
     stories: ['../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
     ],
+
+    webpackFinal: (storybookBaseConfig) => {
+        storybookBaseConfig?.module?.rules.push({
+            test: /\.md$/,
+            include: [join(__dirname, '../src')],
+            use: [{loader: 'markdown-loader'}],
+        });
+
+        // to turn fileName in context.parameters into path form number in production bundle
+        if (storybookBaseConfig?.optimization) {
+            storybookBaseConfig.optimization.moduleIds = 'named';
+        }
+
+        return storybookBaseConfig;
+    },
 };
 
 module.exports = config;

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import './styles.scss';
 import '@gravity-ui/uikit/styles/styles.css';
 
 import React from 'react';
@@ -7,6 +8,7 @@ import {ThemeProvider, MobileProvider, Lang, configure as uiKitConfigure} from '
 import {configure} from '../src';
 import {withMobile} from './decorators/withMobile';
 import {withLang} from './decorators/withLang';
+import {Docs} from './docs';
 
 configure({
     lang: Lang.En,
@@ -31,7 +33,7 @@ export const decorators = [withMobile, withLang, withContextProvider];
 
 export const parameters = {
     docs: {
-        theme: 'light',
+        page: Docs,
     },
     jsx: {showFunctions: true},
     viewport: {

.storybook/styles.scss

@@ -0,0 +1 @@
+@import '~@doc-tools/transform/dist/css/yfm.css';