[Don't merge] Feature/we 1714 create a new configuration for the new UI kit

.babelrc.json

@@ -14,8 +14,5 @@
     ],
     "@babel/preset-typescript",
     ["@babel/preset-react", { "runtime": "automatic" }]
-  ],
-  "plugins": [
-    "babel-plugin-styled-components"
   ]
 }

.eslintrc.cjs

@@ -39,8 +39,8 @@ module.exports = {
     // Hacky workaround to enforce extensions in ESM imports. See:
     // https://github.com/import-js/eslint-plugin-import/issues/2170#issuecomment-1149473239
     'import/extensions': ['error', 'always', { ts: 'never', tsx: 'never' }],
-    'node/file-extension-in-import': ['error', 'always'],
     'node/no-missing-import': 'off',
+    '@typescript-eslint/no-require-imports': 'off',
   },
   overrides: [
     {

.github/workflows/deploy-lido-ui-v2.yml

@@ -0,0 +1,53 @@
+name: Deploy lido-ui-4
+
+on:
+  push:
+    branches:
+      - lido-ui-v4
+
+permissions:
+  contents: write
+  pages: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: production
+    env:
+      NODE_OPTIONS: --max_old_space_size=4096
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Build Components
+        run: yarn build
+
+      # - name: Publish to NPM
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      #     NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      #   run: |
+      #     echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+      #     yarn release
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      # - name: Deploy to GitHub Pages
+      #   uses: lidofinance/github-pages-action@v1
+      #   with:
+      #     branch: gh-pages
+      #     folder: storybook-static

.github/workflows/test-lido-ui-v2.yml

@@ -0,0 +1,173 @@
+name: Test lido-ui-v4
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - lido-ui-4
+
+permissions:
+  contents: read
+  security-events: write
+
+env:
+  NODE_OPTIONS: --max_old_space_size=4096
+
+jobs:
+  security:
+    uses: lidofinance/linters/.github/workflows/security.yml@master
+
+  actions:
+    uses: lidofinance/linters/.github/workflows/actions.yml@master
+
+  cache-deps:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+  check-types:
+    runs-on: ubuntu-latest
+    needs: cache-deps
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Check types
+        run: yarn types
+
+  lint-js:
+    runs-on: ubuntu-latest
+    needs: cache-deps
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint JS/TS
+        run: yarn lint:js
+
+  lint-css:
+    runs-on: ubuntu-latest
+    needs: cache-deps
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint CSS
+        run: yarn lint:css
+
+  run-tests:
+    runs-on: ubuntu-latest
+    needs: cache-deps
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run tests
+        run: yarn test
+
+  demo-build:
+    runs-on: ubuntu-latest
+    needs: cache-deps
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Try to build
+        run: yarn build

.releaserc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   branches: [
-    { name: 'main' },
+    { name: 'lido-ui-v4' },
     { name: 'next', channel: 'next', prerelease: true },
   ],
   plugins: [

.storybook/components/WithThemeProvider.tsx

@@ -1,17 +1,6 @@
 import { Decorator } from '@storybook/react'
-import { createGlobalStyle } from 'styled-components'
-import { CookieThemeProvider, ThemeName } from '../../packages/theme/index.js'
-
-const GlobalStyle = createGlobalStyle`
-  body {
-    padding: 0 !important;
-    display: flex;
-  }
-
-  html, body, #root {
-    min-height: 100vh;
-  }
-`
+import { ThemeName } from '../../packages/theme-css/constants'
+import { CookieThemeProvider } from '../../packages/theme-css/cookie-theme-provider'
 
 export const WithThemeProvider: Decorator<{
   themeOverride?: ThemeName | 'follow cookie and system'
@@ -24,7 +13,6 @@ export const WithThemeProvider: Decorator<{
           : args.themeOverride
       }
     >
-      <GlobalStyle />
       <div
         style={{
           minHeight: '100vh',

.storybook/preview.ts

@@ -1,10 +1,8 @@
 import { WithThemeProvider } from './components/WithThemeProvider.js'
-import themesParameters from './themes.js'
-import viewportParameters from './viewport.js'
+
+import '../styles/global.css'
 
 export const parameters = {
-  ...themesParameters,
-  ...viewportParameters,
   controls: { hideNoControlsWarning: true },
 }
 export const args = {

.stylelintrc

@@ -5,10 +5,20 @@
   "plugins": [
     "stylelint-prettier"
   ],
-  "customSyntax": "postcss-styled-syntax",
+  "ignoreFiles": [
+    "dist/**/*"
+  ],
   "rules": {
     "prettier/prettier": true,
     "custom-property-pattern": null,
-    "no-empty-source": null
+    "no-empty-source": null,
+    "selector-class-pattern": null,
+    "no-descending-specificity": null,
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["composes"]
+      }
+    ]
   }
 }