tech(storybook): add storybook addon documentation link button

packages/vkui/.storybook/addons/documentation-button/DocumentationButton.tsx

@@ -0,0 +1,50 @@
+import { IconButton } from '@storybook/components';
+import { useGlobals, useStorybookState } from '@storybook/manager-api';
+import { DocumentIcon } from '@storybook/icons';
+import * as React from 'react';
+
+function getVersionFromUrl() {
+  const url = window.location.href;
+  const match = url.match(/\/(\d+\.\d+\.\d+)\//);
+  return match ? match[1] : '';
+}
+
+const getComponentUrl = (docsBaseUrl: string, componentName: string): string => {
+  const version = getVersionFromUrl();
+  if (version) {
+    return `${docsBaseUrl}${version}/#/${componentName}/`;
+  }
+  return `${docsBaseUrl}#/${componentName}/`;
+};
+
+function extractComponentName(path: string): string {
+  const match = path.match(/\/([^/]+)\/\1\.stories\.tsx$/);
+  return match ? match[1] : '';
+}
+
+export const DocumentationButton = () => {
+  const { index, storyId } = useStorybookState();
+  const [globals] = useGlobals();
+  const story = index?.[storyId];
+  const importPath = story && 'importPath' in story && story.importPath;
+
+  if (!importPath) {
+    return null;
+  }
+
+  const componentName = extractComponentName(importPath);
+  const hasDocumentation = globals.styleguideComponents.includes(componentName);
+  if (!hasDocumentation) {
+    return null;
+  }
+
+  const documentationUrl = getComponentUrl(globals.styleguideBaseUrl, componentName);
+
+  return (
+    <a href={documentationUrl} target="_blank" rel="noreferrer">
+      <IconButton>
+        <DocumentIcon />
+      </IconButton>
+    </a>
+  );
+};

packages/vkui/.storybook/addons/documentation-button/constants.ts

@@ -0,0 +1 @@
+export const ADDON_ID = 'storybook/documentation';

packages/vkui/.storybook/addons/documentation-button/register.ts

@@ -0,0 +1,11 @@
+import { addons, types } from '@storybook/manager-api';
+import { ADDON_ID } from './constants';
+import { DocumentationButton } from './DocumentationButton';
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Documentation',
+    type: types.TOOL,
+    render: DocumentationButton,
+  });
+});

packages/vkui/.storybook/addons/source-button/SourceButton.tsx

@@ -1,17 +1,17 @@
 import { IconButton } from '@storybook/components';
-import { useStorybookState } from '@storybook/manager-api';
+import { useGlobals, useStorybookState } from '@storybook/manager-api';
 import { GithubIcon } from '@storybook/icons';
 import * as React from 'react';
-import { BASE_COMPONENTS_URL } from './constants';
 
-const getComponentUrl = (importPath: string): string => {
+const getComponentUrl = (repositoryUrl: string, importPath: string): string => {
   const pathWithoutFile = importPath.replace(/\/[^/]+\.stories\.tsx$/, '');
   const cleanPath = pathWithoutFile.replace(/^\.\//, '');
-  return `${BASE_COMPONENTS_URL}/${cleanPath}/`;
+  return `${repositoryUrl}/${cleanPath}/`;
 };
 
 export const SourceButton = () => {
   const { index, storyId } = useStorybookState();
+  const [globals] = useGlobals();
 
   const story = index?.[storyId];
   const importPath = story && 'importPath' in story && story.importPath;
@@ -20,7 +20,7 @@ export const SourceButton = () => {
     return null;
   }
 
-  const sourceUrl = getComponentUrl(importPath);
+  const sourceUrl = getComponentUrl(globals.componentsSourceBaseUrl, importPath);
 
   return (
     <a href={sourceUrl} target="_blank" rel="noreferrer">

packages/vkui/.storybook/addons/source-button/constants.ts

@@ -1,2 +1 @@
 export const ADDON_ID = 'storybook/source';
-export const BASE_COMPONENTS_URL = 'https://github.com/VKCOM/VKUI/tree/master/packages/vkui';

packages/vkui/.storybook/helpers/index.ts

@@ -0,0 +1,28 @@
+import styleguideConfig from '../../../../styleguide/config.js';
+
+function extractComponentName(path: string): string {
+  const match = path.match(/\/([^/]+)\/\1\.tsx$/);
+  return match ? match[1] : '';
+}
+
+export function getStyleGuideComponents() {
+  const componentsSection = styleguideConfig.sections.find(
+    (section) => section.name === 'Компоненты',
+  );
+
+  const handleSections = (sections, resultArray: string[]) => {
+    sections.forEach((section) => {
+      const components =
+        typeof section.components === 'function' ? section.components() : section.components;
+      resultArray.push(...components.map(extractComponentName));
+      if (section.sections) {
+        handleSections(section.sections, resultArray);
+      }
+    });
+  };
+
+  const allComponents = [];
+  handleSections(componentsSection.sections, allComponents);
+
+  return allComponents;
+}

packages/vkui/.storybook/main.ts

@@ -1,8 +1,10 @@
-import { Configuration } from 'webpack';
+import { Configuration, DefinePlugin } from 'webpack';
 import type { Options } from '@swc/core';
 import path from 'path';
+import { readFileSync } from 'fs';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import WebpackCommonConfig from '../../../webpack.common.config';
+import { getStyleGuideComponents } from './helpers';
 
 const cssRegExpString = /\.css$/.toString();
 
@@ -32,6 +34,7 @@ const config: StorybookConfig = {
     './addons/pointer',
     './addons/customPanelHeaderAfter',
     './addons/source-button',
+    './addons/documentation-button',
     './addons/storybook-theme',
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
   ],
@@ -64,6 +67,16 @@ const config: StorybookConfig = {
     const rulesWithoutCss = excludeCssRulesFromConfig(config) ?? [];
 
     config.module!.rules = [...rulesWithoutCss, ...commonCssRules];
+    const packageJSON = JSON.parse(readFileSync('./package.json', 'utf-8'));
+    config.plugins.push(
+      new DefinePlugin({
+        __STYLEGUIDE_COMPONENTS_CONFIG__: JSON.stringify(getStyleGuideComponents()),
+        __STYLEGUIDE_URL__: JSON.stringify(packageJSON.homepage),
+        __COMPONENTS_SOURCE_BASE_URL__: JSON.stringify(
+          `${packageJSON.repository.url.replace('.git', '')}/tree/master/${packageJSON.repository.directory}`,
+        ),
+      }),
+    );
 
     return config;
   },

packages/vkui/.storybook/preview.ts

@@ -9,6 +9,12 @@ import { withConsole } from '@storybook/addon-console';
 import { BREAKPOINTS } from '../src/lib/adaptivity';
 import { withVKUIWrapper } from '../src/storybook/VKUIDecorators';
 
+declare global {
+  const __STYLEGUIDE_COMPONENTS_CONFIG__: Record<string, boolean>;
+  const __STYLEGUIDE_URL__: string;
+  const __COMPONENTS_SOURCE_BASE_URL__: string;
+}
+
 interface CustomViewPortItem {
   name: string;
   styles: {
@@ -56,6 +62,15 @@ const preview: Preview = {
     cartesian: { disabled: true },
   },
   globalTypes: {
+    styleguideComponents: {
+      defaultValue: __STYLEGUIDE_COMPONENTS_CONFIG__,
+    },
+    styleguideBaseUrl: {
+      defaultValue: __STYLEGUIDE_URL__,
+    },
+    componentsSourceBaseUrl: {
+      defaultValue: __COMPONENTS_SOURCE_BASE_URL__,
+    },
     colorScheme: {
       defaultValue: 'light',
     },