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/publish-canary.yml

@@ -0,0 +1,44 @@
+name: Publish canary lido-ui-v4
+
+on:
+  push:
+    branches:
+      - lido-ui-v4-canary
+
+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@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          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:dry

.github/workflows/deploy.yml → .github/workflows/publish.yml

@@ -1,9 +1,9 @@
-name: deploy
+name: Publish lido-ui-v4
 
 on:
   push:
     branches:
-      - main
+      - lido-ui-v4
 
 permissions:
   contents: write
@@ -17,15 +17,15 @@ jobs:
       NODE_OPTIONS: --max_old_space_size=4096
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
           cache: 'yarn'
 
       - name: Install Dependencies

.github/workflows/test.yml

@@ -22,17 +22,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
@@ -45,17 +45,17 @@ jobs:
     needs: cache-deps
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
@@ -71,17 +71,17 @@ jobs:
     needs: cache-deps
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
@@ -97,17 +97,17 @@ jobs:
     needs: cache-deps
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
@@ -123,17 +123,17 @@ jobs:
     needs: cache-deps
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
@@ -149,17 +149,17 @@ jobs:
     needs: cache-deps
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version-file: .nvmrc
 
       - name: Restore cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}

.nvmrc

@@ -0,0 +1 @@
+20

.releaserc.cjs

@@ -1,7 +1,9 @@
 module.exports = {
   branches: [
-    { name: 'main' },
-    { name: 'next', channel: 'next', prerelease: true },
+    { name: 'lido-ui-v4' },
+    {
+      name: 'lido-ui-v4-canary', "channel": "alpha", "prerelease": "alpha"
+    },
   ],
   plugins: [
     ['@semantic-release/commit-analyzer', { preset: 'conventionalcommits' }],

.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"]
+      }
+    ]
   }
 }