Implement custom docs template

.storybook/custom-docs/blocks/Import.tsx

@@ -0,0 +1,28 @@
+import {Source, useOf} from '@storybook/addon-docs/blocks';
+
+import {getSlugFromPath} from './utils';
+
+export const Import = () => {
+  const {preparedMeta} = useOf('meta', ['meta']);
+  const exportName = preparedMeta?.component?.displayName ?? preparedMeta?.component?.name;
+  const slug = getSlugFromPath(preparedMeta?.parameters?.fileName || '');
+
+  if (!slug || !exportName) {
+    return null;
+  }
+
+  const builtPath = `import ${exportName} from '@jetbrains/ring-ui-built/components/${slug}/${slug}';`;
+  const sourcePath = `import ${exportName} from '@jetbrains/ring-ui/components/${slug}/${slug}';`;
+
+  return (
+    <>
+      <h3>{'Import'}</h3>
+
+      <p>{'Quick start (ready-to-use ES modules):'}</p>
+      <Source language='tsx' code={builtPath} />
+
+      <p>{'Build from sources (webpack):'}</p>
+      <Source language='tsx' code={sourcePath} />
+    </>
+  );
+};

.storybook/custom-docs/blocks/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Extracts the base component name (slug) from a Storybook file path.
+ *
+ * Example: getSlugFromPath('/src/button/button.stories.tsx') → 'button'
+ */
+export const getSlugFromPath = (path: string) =>
+  (path.split(/[/\\]/).pop() ?? '').replace(/\.(stories|story)\.[^.]+$/i, '');

.storybook/custom-docs/custom-docs.tsx

@@ -0,0 +1,12 @@
+import {Controls, Primary, Title} from '@storybook/addon-docs/blocks';
+
+import {Import} from './blocks/Import';
+
+export const CustomDocs = () => (
+  <>
+    <Title />
+    <Primary />
+    <Import />
+    <Controls />
+  </>
+);

.storybook/preview.ts → .storybook/preview.tsx

@@ -10,6 +10,7 @@ import strictModeDecorator from './strict-mode-decorator';
 import stylesDecorator from './styles-decorator';
 import themeDecorator from './theme-decorator';
 import {darkMatcher, theme} from './theme';
+import {CustomDocs} from './custom-docs/custom-docs';
 
 const updateTheme = () => applyTheme(darkMatcher.matches ? Theme.DARK : Theme.LIGHT, document.documentElement);
 updateTheme();
@@ -28,6 +29,7 @@ export const parameters = {
       notes ?? component?.__docgenInfo?.description,
     theme,
     codePanel: true,
+    page: CustomDocs,
   },
   a11y: {
     test: 'error',

test-helpers/jest-globals.js

@@ -47,7 +47,7 @@ Object.defineProperty(window, 'matchMedia', {
   }),
 });
 
-setProjectAnnotations(require('../.storybook/preview.ts'));
+setProjectAnnotations(require('../.storybook/preview.tsx'));
 
 HTMLDialogElement.prototype.show = jest.fn();
 HTMLDialogElement.prototype.showModal = jest.fn();