feat: move components from uikit

.babelrc

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/ci.yml

@@ -18,8 +18,8 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v2
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Lint Files
@@ -38,8 +38,8 @@ jobs:
     - name: Setup Node
       uses: actions/setup-node@v2
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Unit Tests

.github/workflows/main-preview.yml

@@ -16,15 +16,13 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
       - name: Install Packages
         run: npm ci
         shell: bash
       - name: Build Storybook
-        run: npx build-storybook
+        run: npx sb build
         shell: bash
-        env:
-          TS_NODE_PROJECT: .storybook/tsconfig.json
       - name: Upload to S3
         uses: gravity-ui/preview-upload-to-s3-action@v1
         with:

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

@@ -9,5 +9,5 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: gravity-ui/preview-build-action@v1
-      env:
-        TS_NODE_PROJECT: .storybook/tsconfig.json
+      with:
+        node-version: 18

.github/workflows/release.yml

@@ -12,3 +12,4 @@ jobs:
       with:
         github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
         npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
+        node-version: 18

.nvmrc

@@ -1 +1 @@
-14
+18

.storybook/docs.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 
-import {
-    Description,
-    DocsContext,
-    Subtitle,
-    Title,
-} from '@storybook/addon-docs/';
+import {DocsContext} from '@storybook/addon-docs';
 
 const readmeCache: Record<string, {default: string}> = {};
 
@@ -59,10 +54,7 @@ export const Docs = () => {
 
     return (
         <>
-            {/* <Title /> */}
             {sourceBadgeContent}
-            {/* <Subtitle /> */}
-            {/* <Description /> */}
             {readmeContent}
         </>
     );

.storybook/main.ts

@@ -2,8 +2,11 @@ import type {StorybookConfig} from '@storybook/core-common';
 
 const {join} = require('path');
 
-
 const config: StorybookConfig = {
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
     stories: ['../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/preset-scss',
@@ -27,4 +30,4 @@ const config: StorybookConfig = {
     },
 };
 
-module.exports = config;
+export default config;

.storybook/preview.tsx

@@ -3,7 +3,7 @@ import '@gravity-ui/uikit/styles/styles.css';
 
 import React from 'react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import type {DecoratorFn} from '@storybook/react';
+import type {Decorator, Preview} from '@storybook/react';
 import {ThemeProvider, MobileProvider, Lang, configure as uiKitConfigure} from '@gravity-ui/uikit';
 import {configure} from '../src';
 import {withMobile} from './decorators/withMobile';
@@ -17,7 +17,7 @@ uiKitConfigure({
     lang: Lang.En,
 });
 
-const withContextProvider: DecoratorFn = (Story, context) => {
+const withContextProvider: Decorator = (Story, context) => {
     return (
         <React.StrictMode>
             <ThemeProvider theme={context.globals.theme}>
@@ -29,57 +29,59 @@ const withContextProvider: DecoratorFn = (Story, context) => {
     );
 };
 
-export const decorators = [withMobile, withLang, withContextProvider];
-
-export const parameters = {
-    docs: {
-        page: Docs,
-    },
-    jsx: {showFunctions: true},
-    viewport: {
-        viewports: MINIMAL_VIEWPORTS,
-    },
-    options: {
-        storySort: {
-            order: ['Theme', 'Components', ['Basic']],
-            method: 'alphabetical',
+const preview: Preview = {
+    decorators: [withMobile, withLang, withContextProvider],
+    parameters: {
+        docs: {
+            page: Docs,
         },
-    },
-};
-
-export const globalTypes = {
-    theme: {
-        name: 'Theme',
-        defaultValue: 'light',
-        toolbar: {
-            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)'},
-            ],
+        jsx: {showFunctions: true},
+        viewport: {
+            viewports: MINIMAL_VIEWPORTS,
         },
-    },
-    lang: {
-        name: 'Language',
-        defaultValue: 'en',
-        toolbar: {
-            icon: 'globe',
-            items: [
-                {value: 'en', right: '🇬🇧', title: 'En'},
-                {value: 'ru', right: '🇷🇺', title: 'Ru'},
-            ],
+        options: {
+            storySort: {
+                order: ['Theme', 'Components', ['Basic']],
+                method: 'alphabetical',
+            },
         },
     },
-    platform: {
-        name: 'Platform',
-        defaultValue: 'desktop',
-        toolbar: {
-            items: [
-                {value: 'desktop', title: 'Desktop', icon: 'browser'},
-                {value: 'mobile', title: 'Mobile', icon: 'mobile'},
-            ],
+    globalTypes: {
+        theme: {
+            name: 'Theme',
+            defaultValue: 'light',
+            toolbar: {
+                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: {
+            name: 'Language',
+            defaultValue: 'en',
+            toolbar: {
+                icon: 'globe',
+                items: [
+                    {value: 'en', right: '🇬🇧', title: 'En'},
+                    {value: 'ru', right: '🇷🇺', title: 'Ru'},
+                ],
+            },
+        },
+        platform: {
+            name: 'Platform',
+            defaultValue: 'desktop',
+            toolbar: {
+                items: [
+                    {value: 'desktop', title: 'Desktop', icon: 'browser'},
+                    {value: 'mobile', title: 'Mobile', icon: 'mobile'},
+                ],
+            },
         },
     },
 };
+
+export default preview;

.storybook/theme.ts

@@ -28,7 +28,7 @@ export const CloudThemeLight = create({
 
     brandUrl: 'https://github.com/gravity-ui/uikit',
     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;">Base Components</div>`,
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Components</div>`,
 });
 
 export const CloudThemeDark = create({

CODEOWNERS

@@ -1,4 +1,6 @@
 * @amje @ValeraS @korvin89
 /src/components/FormRow @ogonkov
 /src/components/PlaceholderContainer @Marginy605
+/src/components/PromoSheet @Avol-V
+/src/components/SharePopover @niktverd
 /src/components/StoreBadge @NikitaCG

jest.config.js

@@ -3,9 +3,16 @@ module.exports = {
     moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
     rootDir: '.',
     transform: {
-        '^.+\\.tsx?$': 'ts-jest',
+        '\\.[jt]sx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
     },
-    transformIgnorePatterns: ['node_modules/(?!(@gravity-ui)/)'],
+    transformIgnorePatterns: ['node_modules/(?!(@gravity-ui|tinygesture))'],
     coverageDirectory: './coverage',
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/__stories__/**/*', '!**/*/*.stories.{ts,tsx}'],
+    testEnvironment: 'jsdom',
+    setupFiles: ['<rootDir>/test-utils/setup-tests.ts'],
+    setupFilesAfterEnv: ['<rootDir>/test-utils/setup-tests-after.ts'],
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'jest-transform-css',
+    },
+    testMatch: ['**/*.test.[jt]s?(x)'],
 };