added preview flow

.github/workflows/pr-preview-build.yml

@@ -0,0 +1,13 @@
+name: PR Preview Build
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: gravity-ui/preview-build-action@v1
+        with:
+          node-version: 18

.github/workflows/pr-preview-deploy.yml

@@ -0,0 +1,22 @@
+name: PR Preview Deploy
+
+on:
+  workflow_run:
+    workflows: ['PR Preview Build']
+    types:
+      - completed
+
+jobs:
+  deploy:
+    name: Deploy
+    if: >
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: gravity-ui/preview-deploy-action@v1
+        with:
+          project: landing
+          github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+          s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.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;