Merge branch 'main' into chervyakovru-patch-1

.babelrc

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

.eslintignore

@@ -1,2 +1,3 @@
 storybook-static
 build
+!/.storybook

.eslintrc

@@ -1,20 +1,57 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/prettier"],
+    "extends": [
+        "@gravity-ui/eslint-config",
+        "@gravity-ui/eslint-config/client",
+        "@gravity-ui/eslint-config/prettier",
+        "@gravity-ui/eslint-config/a11y"
+    ],
     "root": true,
-    "env": {
-        "node": true,
-        "jest": true
+    "rules": {
+        "react/jsx-fragments": ["error", "element"],
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
+                "message": "Please use import React from 'react' instead."
+            },
+            {
+                "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
+                "message": "Don't use React.FC"
+            }
+        ],
+        "jsx-a11y/no-autofocus": 0
     },
     "overrides": [
         {
             "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
-            "extends": ["plugin:testing-library/react"]
+            "env": {
+                "node": true,
+                "jest": true
+            },
+            "extends": ["plugin:testing-library/react"],
+            "rules": {
+                "jsx-a11y/no-static-element-interactions": 0
+            },
+            "excludedFiles": "**/__tests__/**/*.visual.test.*"
         },
         {
             "files": ["**/__stories__/**/*.[jt]s?(x)"],
             "rules": {
                 "no-console": "off"
             }
+        },
+        {
+            "files": ["**/*.js", "!src/**/*"],
+            "env": {
+                "node": true
+            }
+        },
+        {
+            "files": ["**/__tests__/**/*.visual.test.*"],
+            "env": {
+                "node": true,
+                "jest": true
+            }
         }
     ]
 }

.github/workflows/ci.yml

@@ -11,14 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
+      uses: actions/checkout@v3
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Lint Files
@@ -31,14 +29,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
+      uses: actions/checkout@v3
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       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

@@ -10,21 +10,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
+      uses: actions/checkout@v3
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 18
+        cache: npm
     - 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/playwright.yml

@@ -0,0 +1,49 @@
+name: Playwright Tests
+
+on:
+  # push:
+    # branches: [main, next]
+  pull_request:
+
+jobs:
+  test:
+    name: Test component
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run playwright
+      env:
+        CI: 'true'
+    - name: Upload Playwright playwright report to GitHub Actions Artifacts
+      if: always()
+      uses: actions/upload-artifact@v3
+      with:
+        name: playwright-report
+        path: playwright-report
+        retention-days: 1
+    - name: Upload Playwright report
+      if: always()
+      env:
+        AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
+        AWS_DEFAULT_REGION: ru-central1
+        AWS_EC2_METADATA_DISABLED: true
+      run: aws s3 cp ./playwright-report s3://playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/ --endpoint-url=https://storage.yandexcloud.net --recursive
+      shell: bash 
+    - name: Create Comment
+      if: always()
+      uses: marocchino/sticky-pull-request-comment@v2
+      with:
+        GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+        number: ${{ github.event.pull_request.number }}
+        header:  playwright test
+        message: '[Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/uikit/pulls/${{ github.event.pull_request.number }}/index.html) is ready.'
+

.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,4 +12,4 @@ jobs:
       with:
         github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
         npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
-        node-version: 14
+        node-version: 18

.gitignore

@@ -1,9 +1,15 @@
 .idea
 .vscode
+.history
+.DS_Store
+*.log
 
 node_modules
 
 /storybook-static
 /build
 /styles/**/*.css
 /coverage
+/playwright/playwright/.cache
+/playwright-report
+/test-results

.npmrc

@@ -1 +1,2 @@
 registry=https://registry.npmjs.org
+legacy-peer-deps=true

.nvmrc

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

.storybook/decorators/withLang.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import type {DecoratorFn} from '@storybook/react';
+
+import type {Decorator} from '@storybook/react';
+
 import {Lang, configure} from '../../src';
 
-export const withLang: DecoratorFn = (Story, context) => {
+export const WithLang: Decorator = (Story, context) => {
     const lang = context.globals.lang;
 
     configure({

.storybook/decorators/withMobile.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import type {DecoratorFn} from '@storybook/react';
+
+import type {Decorator} from '@storybook/react';
+
 import {useMobile} from '../../src';
 
-export const withMobile: DecoratorFn = (Story, context) => {
+export const WithMobile: Decorator = (Story, context) => {
     const mobileValue = context.globals.platform === 'mobile';
 
     const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks

.storybook/main.ts

@@ -1,12 +1,19 @@
-import type {StorybookConfig} from '@storybook/core-common';
+import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-    stories: ['../src/**/*.stories.@(ts|tsx)'],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+    docs: {
+        defaultName: 'Docs',
+    },
     addons: [
         '@storybook/preset-scss',
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
     ],
 };
 
-module.exports = config;
+export default config;

.storybook/manager.ts

@@ -1,4 +1,5 @@
 import {addons} from '@storybook/addons';
+
 import {themes} from './theme';
 
 addons.setConfig({

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>