feat: code migration

.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$/,
+        },
+    },
+};

.storybook/tsconfig.json

@@ -1,7 +1,9 @@
 {
-    "extends": "..",
+    "extends": "@gravity-ui/tsconfig/tsconfig",
     "compilerOptions": {
-        "module": "commonjs",
-        "target": "ES2017"
+      "jsx": "react",
+      "baseUrl": ".",
+      "resolveJsonModule": true
     }
-}
+  }
+

README.md

@@ -1,15 +1,15 @@
-# @gravity-ui/package-example · [![npm package](https://img.shields.io/npm/v/@gravity-ui/package-example)](https://www.npmjs.com/package/@gravity-ui/package-example) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/package-example/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/package-example/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/package-example/)
+# @gravity-ui/dynamic-forms · [![npm package](https://img.shields.io/npm/v/@gravity-ui/dynamic-forms)](https://www.npmjs.com/package/@gravity-ui/dynamic-forms) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/dynamic-forms/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/dynamic-forms/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/dynamic-forms/)
 
-This is a template for typical package. 
+This is a template for typical package.
 
 1. Create a new repository and use this repository as a template.
-2. Replace `package-example` through the whole repository with your name.
+2. Replace `dynamic-forms` through the whole repository with your name.
 3. Overwrite other things at your desire.
 
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/package-example
+npm install --save-dev @gravity-ui/dynamic-forms
 ```
 
 ## Usage

gulpfile.js

@@ -0,0 +1,70 @@
+/* eslint-env node */
+const path = require('path');
+
+const {task, src, dest, series, parallel} = require('gulp');
+const sass = require('gulp-dart-sass');
+const replace = require('gulp-replace');
+const ts = require('gulp-typescript');
+const rimraf = require('rimraf');
+
+const BUILD_DIR = path.resolve('build');
+
+task('clean', (done) => {
+    rimraf.sync(BUILD_DIR);
+    rimraf.sync('styles/**/*.css');
+    done();
+});
+
+function compileTs(modules = false) {
+    const tsProject = ts.createProject('tsconfig.publish.json', {
+        declaration: modules,
+        module: modules ? 'esnext' : 'commonjs',
+    });
+
+    return src([
+        'src/**/*.{ts,tsx}',
+        '!src/stories/**/*',
+        '!src/**/__stories__/**/*',
+        '!src/**/__tests__/**/*',
+    ])
+        .pipe(
+            replace(/import '.+\.scss';/g, (match) =>
+                modules ? match.replace('.scss', '.css') : '',
+            ),
+        )
+        .pipe(tsProject())
+        .pipe(dest(path.resolve(BUILD_DIR, modules ? 'esm' : 'cjs')));
+}
+
+task('compile-to-esm', () => {
+    return compileTs(true);
+});
+
+task('compile-to-cjs', () => {
+    return compileTs();
+});
+
+task('copy-i18n', () => {
+    return src(['src/**/i18n/*.json'])
+        .pipe(dest(path.resolve(BUILD_DIR, 'esm')))
+        .pipe(dest(path.resolve(BUILD_DIR, 'cjs')));
+});
+
+task('styles-components', () => {
+    return src(['src/**/*.scss', '!src/**/__stories__/**/*', '!src/stories/**/*'])
+        .pipe(sass().on('error', sass.logError))
+        .pipe(dest(path.resolve(BUILD_DIR, 'esm')))
+        .pipe(dest(path.resolve(BUILD_DIR, 'cjs')));
+});
+
+task(
+    'build',
+    series([
+        'clean',
+        parallel(['compile-to-esm', 'compile-to-cjs']),
+        'copy-i18n',
+        parallel(['styles-components']),
+    ]),
+);
+
+task('default', series(['build']));