tech: add storybook addon story source-button (#8249)

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

@@ -0,0 +1,32 @@
+import { IconButton } from '@storybook/components';
+import { 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 pathWithoutFile = importPath.replace(/\/[^/]+\.stories\.tsx$/, '');
+  const cleanPath = pathWithoutFile.replace(/^\.\//, '');
+  return `${BASE_COMPONENTS_URL}/${cleanPath}/`;
+};
+
+export const SourceButton = () => {
+  const { index, storyId } = useStorybookState();
+
+  const story = index?.[storyId];
+  const importPath = story && 'importPath' in story && story.importPath;
+
+  if (!importPath) {
+    return null;
+  }
+
+  const sourceUrl = getComponentUrl(importPath);
+
+  return (
+    <a href={sourceUrl} target="_blank" rel="noreferrer">
+      <IconButton>
+        <GithubIcon />
+      </IconButton>
+    </a>
+  );
+};

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

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

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

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

packages/vkui/.storybook/main.ts

@@ -31,6 +31,7 @@ const config: StorybookConfig = {
     './addons/colorScheme',
     './addons/pointer',
     './addons/customPanelHeaderAfter',
+    './addons/source-button',
     './addons/storybook-theme',
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
   ],