Initial implementation

.eslintignore

@@ -0,0 +1,2 @@
+storybook-static
+!.storybook

.eslintrc

@@ -1,5 +1,9 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/prettier"],
+    "extends": [
+        "@gravity-ui/eslint-config",
+        "@gravity-ui/eslint-config/prettier",
+        "@gravity-ui/eslint-config/import-order"
+    ],
     "root": true,
     "env": {
         "node": true,

.gitignore

@@ -6,4 +6,7 @@
 node_modules
 
 # Artifacts
-dist
+/*.d.ts
+/*.js
+!/.*.js
+storybook-static

.prettierignore

@@ -1,4 +1,3 @@
 storybook-static
-dist
 CHANGELOG.md
-CONTRIBUTING.md
+CONTRIBUTING.md

.storybook/main.ts

@@ -1,24 +1,55 @@
 import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-    stories: ['../src/**/*.stories.@(ts|tsx)'],
+    stories: ['./src/**/*.stories.@(ts|tsx)'],
     addons: [
-        '@storybook/preset-scss',
+        {name: '@storybook/preset-scss', options: {rule: {sideEffects: true}}},
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
-        '@storybook/addon-webpack5-compiler-babel'
+        '@storybook/addon-webpack5-compiler-babel',
     ],
 
     framework: {
         name: '@storybook/react-webpack5',
-        options: {}
+        options: {},
     },
 
     docs: {
-        autodocs: true
+        autodocs: true,
     },
     core: {
         disableTelemetry: true,
     },
+
+    webpackFinal: async (webpackConfig) => {
+        webpackConfig.module?.rules?.forEach((rule) => {
+            if (!rule || typeof rule !== 'object') {
+                return rule;
+            }
+            const test = rule.test;
+
+            if (!test || typeof test !== 'object' || !('test' in test)) {
+                return rule;
+            }
+
+            if (test.test('.svg')) {
+                rule.exclude = /\.svg$/;
+            }
+        });
+
+        webpackConfig.module?.rules?.push({
+            test: /\.svg$/,
+            use: [
+                {
+                    loader: '@svgr/webpack',
+                    options: {
+                        icon: true,
+                    },
+                },
+            ],
+        });
+
+        return webpackConfig;
+    },
 };
 
 module.exports = config;

.storybook/manager.ts

@@ -0,0 +1,37 @@
+import {addons} from '@storybook/manager-api';
+import {create} from '@storybook/theming';
+
+import packageJson from '../package.json';
+
+addons.setConfig({
+    theme: create({
+        base: 'light',
+
+        colorPrimary: '#027bf3',
+        colorSecondary: '#79b1f9',
+
+        // Typography
+        fontBase: '"Helvetica Neue", Arial, Helvetica, sans-serif',
+        fontCode:
+            '"SF Mono", "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace',
+
+        // Text colors
+        textColor: 'black',
+        textInverseColor: 'black',
+
+        // Toolbar default and active colors
+        barTextColor: 'silver',
+        barSelectedColor: '#027bf3',
+        // barBg: '#027bf3',
+
+        // Form colors
+        inputBg: 'white',
+        inputBorder: 'silver',
+        inputTextColor: 'black',
+        inputBorderRadius: 4,
+
+        brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400; white-space: nowrap">Illustrations v${packageJson.version}</div>`,
+        brandUrl: 'https://gravity-ui.com',
+    }),
+});

.storybook/preview.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line import/order
+import '@gravity-ui/uikit/styles/fonts.css';
+// eslint-disable-next-line import/order
+import '@gravity-ui/uikit/styles/styles.css';
+
+import * as React from 'react';
+
+import {Flex, ThemeProvider} from '@gravity-ui/uikit';
+import type {Decorator, Preview} from '@storybook/react';
+
+import './theme.scss';
+
+const withThemeProvider: Decorator = (Story, context) => {
+    const {colorTheme} = context.globals;
+    const theme = colorTheme || 'light';
+
+    return (
+        <Flex>
+            <ThemeProvider theme={theme} scoped>
+                <Story {...context} theme={theme} />
+            </ThemeProvider>
+        </Flex>
+    );
+};
+
+const preview: Preview = {
+    decorators: [withThemeProvider],
+    parameters: {
+        options: {
+            storySort: {
+                method: 'alphabetical',
+            },
+        },
+    },
+    globalTypes: {
+        colorTheme: {
+            defaultValue: 'light',
+            toolbar: {
+                title: 'Theme',
+                icon: 'mirror',
+                items: [
+                    {value: 'light', right: '☼', title: 'Light'},
+                    {value: 'dark', right: '☾', title: 'Dark'},
+                ],
+            },
+        },
+    },
+};
+
+export default preview;

.storybook/src/ImportsTooltip/ImportsTooltip.scss

@@ -0,0 +1,21 @@
+@use '~@gravity-ui/uikit/styles/mixins';
+
+.imports-tooltip {
+    --g-popover-max-width: 1000px;
+
+    &__grid {
+        display: grid;
+        grid-template-columns: max-content minmax(max-content, 1fr);
+        gap: 12px;
+    }
+
+    &__label {
+        @include mixins.text-accent;
+    }
+
+    &__value {
+        white-space: nowrap;
+        font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
+            'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
+    }
+}

.storybook/src/ImportsTooltip/ImportsTooltip.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import {Button, Card, Label, Popover, PopoverInstanceProps, spacing} from '@gravity-ui/uikit';
+
+import {cn} from '../cn';
+import {IllustrationMeta} from '../types';
+
+import './ImportsTooltip.scss';
+
+export interface ImportsTooltipProps {
+    meta: IllustrationMeta;
+    children: React.ReactElement;
+}
+
+const b = cn('imports-tooltip');
+
+export function ImportsTooltip({meta: {svgName, componentName}, children}: ImportsTooltipProps) {
+    const popoverRef = React.useRef<PopoverInstanceProps>(null);
+    const content = React.useMemo(() => {
+        const importSvgLight = buildIconSvgPath(svgName, componentName, 'light');
+        const importSvgDark = buildIconSvgPath(svgName, componentName, 'dark');
+        const importComponent = buildIconImportLine(componentName);
+        return (
+            <div className={b('grid')}>
+                <div className={b('label')}>Name</div>
+                <div className={b('value')}>
+                    <Label type="copy" copyText={componentName}>
+                        {componentName}
+                    </Label>
+                </div>
+                <div className={b('label')}>Svg (light theme)</div>
+                <div className={b('value')}>
+                    <Label type="copy" copyText={importSvgLight}>
+                        {importSvgLight}
+                    </Label>
+                </div>
+                <div className={b('label')}>Svg (dark theme)</div>
+                <div className={b('value')}>
+                    <Label type="copy" copyText={importSvgDark}>
+                        {importSvgDark}
+                    </Label>
+                </div>
+                <div className={b('label')}>Component</div>
+                <div className={b('value')}>
+                    <Label type="copy" copyText={importComponent}>
+                        {importComponent}
+                    </Label>
+                </div>
+            </div>
+        );
+    }, []);
+
+    return (
+        <Card className={spacing({p: 2})}>
+            <div>
+                <Popover
+                    ref={popoverRef}
+                    content={content}
+                    placement={['bottom', 'top']}
+                    tooltipClassName={b()}
+                    openOnHover={false}
+                    disablePortal
+                >
+                    <Button view="flat-info">{componentName}</Button>
+                </Popover>
+            </div>
+            {children}
+        </Card>
+    );
+}
+
+function buildIconSvgPath(svgName: string, componentName: string, theme: 'light' | 'dark') {
+    return `import ${componentName}Icon from '@gravity-ui/illustrations/svgs/${theme}/${svgName}.svg';`;
+}
+function buildIconImportLine(componentName: string) {
+    return `import {${componentName}} from '@gravity-ui/illustrations';`;
+}

.storybook/src/Showcase.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {Flex, Icon, spacing} from '@gravity-ui/uikit';
+import {Meta, StoryFn} from '@storybook/react';
+
+import {ImportsTooltip} from './ImportsTooltip/ImportsTooltip';
+import {IllustrationMeta} from './types';
+
+import metadata from '../../metadata.json';
+
+const meta = {
+    title: 'Components',
+    id: 'components',
+    args: {
+        size: 300,
+    },
+} as Meta;
+
+export default meta;
+
+const items = (metadata.illustrations as IllustrationMeta[]).map((meta) => {
+    const Component = require(`../../src/components/${meta.componentName}.tsx`).default;
+
+    return {
+        meta,
+        Component,
+    };
+});
+
+export const Components: StoryFn = ({size}) => {
+    return (
+        <div className={spacing({p: 4})}>
+            <Flex gap={8} wrap>
+                {items.map(({meta, Component}) => {
+                    return (
+                        <ImportsTooltip key={meta.svgName} meta={meta}>
+                            <Icon data={Component} size={size} />
+                        </ImportsTooltip>
+                    );
+                })}
+            </Flex>
+        </div>
+    );
+};

.storybook/src/Svgs.stories.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import {Flex, Icon, spacing} from '@gravity-ui/uikit';
+import {Meta, StoryFn} from '@storybook/react';
+
+import {ImportsTooltip} from './ImportsTooltip/ImportsTooltip';
+import {IllustrationMeta} from './types';
+
+import metadata from '../../metadata.json';
+
+const meta = {
+    title: 'Svgs',
+    id: 'svgs',
+    args: {
+        size: 300,
+    },
+} as Meta;
+
+export default meta;
+
+interface Item {
+    meta: IllustrationMeta;
+    Component: any;
+}
+
+const items = (metadata.illustrations as IllustrationMeta[]).map((meta) => {
+    const ComponentLight = require(`../../svgs/${meta.svgName}-light.svg`).default;
+    const ComponentDark = require(`../../svgs/${meta.svgName}-dark.svg`).default;
+
+    return {
+        meta,
+        ComponentLight,
+        ComponentDark,
+    };
+});
+
+const svgsRenderer =
+    (renderItems: Item[]): StoryFn =>
+    ({size}) => {
+        return (
+            <div className={spacing({p: 4})}>
+                <Flex gap={8} wrap>
+                    {renderItems.map(({meta: itemMeta, Component}) => {
+                        return (
+                            <ImportsTooltip key={itemMeta.svgName} meta={itemMeta}>
+                                <Icon data={Component} size={size} />
+                            </ImportsTooltip>
+                        );
+                    })}
+                </Flex>
+            </div>
+        );
+    };
+
+export const Light = svgsRenderer(
+    items.map(({meta, ComponentLight}) => ({meta, Component: ComponentLight})),
+);
+export const Dark = svgsRenderer(
+    items.map(({meta, ComponentDark}) => ({meta, Component: ComponentDark})),
+);

.storybook/src/assets.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+    const content: SVGIconData;
+
+    export default content;
+}
+
+declare module '*.png' {
+    export default string;
+}