feat: code migration (#1)

Author: bocembocem

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-typescript", "@babel/preset-env"]
+}

.eslintignore

@@ -0,0 +1,2 @@
+dist
+build

.github/workflows/main-preview.yml

@@ -9,24 +9,24 @@ jobs:
     name: Build and Deploy
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: 14
-    - name: Install Packages
-      run: npm ci
-      shell: bash
-    - name: Build Storybook
-      run: npx build-storybook
-      shell: bash
-    - name: Upload to S3
-      uses: gravity-ui/preview-upload-to-s3-action@v1
-      with:
-        src-path: storybook-static
-        dest-path: /package-example/main/
-        s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
-        s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install Packages
+        run: npm ci
+        shell: bash
+      - name: Build Storybook
+        run: npx build-storybook
+        shell: bash
+      - name: Upload to S3
+        uses: gravity-ui/preview-upload-to-s3-action@v1
+        with:
+          src-path: storybook-static
+          dest-path: /dynamic-forms/main/
+          s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+          s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

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

@@ -4,7 +4,7 @@ on:
   workflow_run:
     workflows: ['PR Preview Build']
     types:
-    - completed
+      - completed
 
 jobs:
   deploy:
@@ -14,9 +14,9 @@ jobs:
       github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
     steps:
-    - uses: gravity-ui/preview-deploy-action@v1
-      with:
-        project: package-example
-        github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
-        s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
-        s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
+      - uses: gravity-ui/preview-deploy-action@v1
+        with:
+          project: dynamic-forms
+          github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          s3-key-id: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+          s3-secret-key: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}

.gitignore

@@ -7,3 +7,5 @@ node_modules
 
 # Artifacts
 dist
+build
+storybook-static

.storybook/decorators/index.ts

@@ -0,0 +1 @@
+export * from './withTheme';

.storybook/decorators/styles.scss

@@ -0,0 +1,9 @@
+html,
+body,
+#root {
+    height: 100%;
+}
+
+* {
+    box-sizing: border-box;
+}

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type {DecoratorFn} from '@storybook/react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.scss';
+import './styles.scss';
+
+export const withTheme: DecoratorFn = (Story, context) => (
+    <React.StrictMode>
+        <ThemeProvider theme={context.globals.theme}>
+            <Story {...context} />
+        </ThemeProvider>
+    </React.StrictMode>
+);

.storybook/main.ts

@@ -1,11 +1,16 @@
 import type {StorybookConfig} from '@storybook/core-common';
 
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
 const config: StorybookConfig = {
-    stories: ['../src/**/*.stories.@(ts|tsx)'],
-    addons: [
-        '@storybook/preset-scss',
-        {name: '@storybook/addon-essentials', options: {backgrounds: false}},
-    ],
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/preset-scss'],
+    framework: '@storybook/react',
+    webpackFinal: async (config) => {
+        config.plugins?.push(new MonacoWebpackPlugin({languages: ['json']}));
+
+        return config;
+    },
 };
 
 module.exports = config;

.storybook/preview.ts

@@ -0,0 +1,13 @@
+import {withTheme} from './decorators';
+
+export const decorators = [withTheme];
+
+export const parameters = {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+};