added storybook

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type {StorybookConfig} from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
+    stories: ['../demo/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: [
+        '@storybook/preset-scss',
+        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+    ],
+    typescript: {
+        check: true,
+    },
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import {themes} from './theme';
+
+addons.setConfig({
+    theme: themes.light,
+});

.storybook/preview.ts

@@ -0,0 +1,47 @@
+import type {Preview} from '@storybook/react';
+import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+
+import {withThemeProvider, withLang} from '../demo/utils/preview';
+
+const preview: Preview = {
+    decorators: [withThemeProvider, withLang],
+    parameters: {
+        jsx: {showFunctions: true}, // To show functions in sources
+        viewport: {
+            viewports: MINIMAL_VIEWPORTS,
+        },
+        options: {
+            storySort: {
+                order: ['Landing', '*'],
+            },
+        },
+    },
+    globalTypes: {
+        theme: {
+            defaultValue: 'light',
+            toolbar: {
+                title: 'Theme',
+                icon: 'mirror',
+                items: [
+                    {value: 'light', right: '☼', title: 'Light'},
+                    {value: 'dark', right: '☾', title: 'Dark'},
+                    {value: 'light-hc', right: '☼', title: 'High Contrast Light (beta)'},
+                    {value: 'dark-hc', right: '☾', title: 'High Contrast Dark (beta)'},
+                ],
+            },
+        },
+        lang: {
+            defaultValue: 'en',
+            toolbar: {
+                title: 'Language',
+                icon: 'globe',
+                items: [
+                    {value: 'en', right: '🇬🇧', title: 'En'},
+                    {value: 'ru', right: '🇷🇺', title: 'Ru'},
+                ],
+            },
+        },
+    },
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,41 @@
+import {create} from '@storybook/theming';
+
+export const ThemeLight = create({
+    base: 'light',
+
+    colorPrimary: '#027bf3',
+    colorSecondary: 'rgba(2, 123, 243, 0.6)',
+
+    // 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,
+
+    brandUrl: 'https://github.com/gravity-ui/landing',
+    brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Landing</div>
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Landing</div>`,
+});
+
+export const ThemeDark = create({
+    base: 'dark',
+});
+
+export const themes = {
+    light: ThemeLight,
+    dark: ThemeDark,
+};

.storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "ES2017"
+    },
+    "include": ["src/**/*", "demo/**/*"],
+}

demo/Landing.stories.tsx

@@ -0,0 +1,5 @@
+import type {Meta} from '@storybook/react';
+
+export default {
+    title: 'Landing / Landing example',
+} as Meta;