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

@@ -0,0 +1,44 @@
+name: Deploy 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@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:dry

.github/workflows/deploy.yml

@@ -1,9 +1,9 @@
-name: deploy
+name: Deploy lido-ui-v4
 
 on:
   push:
     branches:
-      - main
+      - lido-ui-v4
 
 permissions:
   contents: write

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

README.md

@@ -1,6 +1,6 @@
-# Lido UI Components
+# Lido UI Components v4
 
-> React components for Lido Finance projects.
+> React components (v4) for Lido Finance projects.
 
 Check out our Storybook at [https://ui.lido.fi](https://ui.lido.fi)
 
@@ -65,35 +65,8 @@ yarn build
 yarn dev
 ```
 
-### Adding a new package
-
-#### Add files
-
-1. Add a new package directory into the `packages` dir.
-2. Add `package.json`, check other packages to find out what you can copy from their `package.json` files.
-3. Fill in correctly the `name` field in the `package.json`.
-4. Add `README.md` and `LICENSE.txt`. You can copy `tsconfig.json` and `.npmignore` from other packages.
-5. Add the `src` directory, where the package's code will be placed.
-
-#### Run commands in the following order
-
-```
-yarn combine
-```
-
-It triggers a script, which updates the main `lido-ui` package. The script finds all packages, including the new one,
-and adds them to dependencies of `lido-ui` and to exports in its index file.
-
-```
-yarn install && yarn build
-```
-
 ## Publishing
 
 Packages are automatically published to npm when you push to master. The publication is based on [semantic-release](https://github.com/semantic-release/semantic-release) and [@qiwi/multi-semantic-release](https://github.com/qiwi/multi-semantic-release).
 
 For correct version detection, please follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/).
-
-## Linking
-
-To include a local version of modified lido in your project, run `yarn link` in `packages/lido` and run `yarn link lido` in project you want to use it in. Make sure to run `yarn unlink lido` after it's no longer needed.

RELEASES.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-[Release workflow](https://github.com/lidofinance/ui/blob/main/.github/workflows/deploy.yml) is triggered automatically on pushes to `main`. It will:
+[Release workflow](https://github.com/lidofinance/ui/blob/lido-ui-v4/.github/workflows/deploy.yml) is triggered automatically on pushes to `lido-ui-v4`. It will:
 
 - Build all packages
 - Run tests

global.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.0.0-next.17",
+  "version": "4.0.0-canary",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",
@@ -34,27 +34,25 @@
     "lint:fix": "set +e; yarn lint:js:fix; yarn lint:css:fix; set -e",
     "lint:js": "eslint .",
     "lint:js:fix": "eslint --fix .",
-    "lint:css": "stylelint '**/*Styles.tsx'",
-    "lint:css:fix": "yarn lint:css --fix",
+    "lint:css": "stylelint '**/*.css'",
+    "lint:css:fix": "yarn lint:css  --fix",
     "types": "tsc --noEmit",
     "prepare": "husky install",
     "release": "semantic-release",
     "release:dry": "yarn release --dry-run",
-    "icons:convert": "node ./packages/icons/converter/index.js"
+    "icons:convert": "node ./packages/icons/converter/index.cjs"
   },
   "peerDependencies": {
     "react": "16 || 17 || 18",
     "react-dom": "16 || 17 || 18",
-    "react-is": "16 || 17 || 18",
-    "styled-components": "^5.3.5"
+    "react-is": "16 || 17 || 18"
   },
   "dependencies": {
-    "@styled-system/should-forward-prop": "5.1.5",
+    "classnames": "^2.5.1",
     "react-collapsed": "3.0.2",
     "react-jazzicon": "^1.0.4",
     "react-toastify": "7.0.4",
     "react-transition-group": "4",
-    "styled-system": "5.1.5",
     "ua-parser-js": "^1.0.35",
     "use-callback-ref": "1.2.5"
   },
@@ -87,13 +85,10 @@
     "@types/react-dom": "18.0.6",
     "@types/react-is": "17.0.2",
     "@types/react-transition-group": "^4.4.6",
-    "@types/styled-components": "^5.1.26",
-    "@types/styled-system": "^5.1.16",
-    "@types/styled-system__should-forward-prop": "^5.1.2",
     "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
-    "babel-plugin-styled-components": "^2.1.4",
+    "autoprefixer": "^10.4.20",
     "browserslist": "^4.21.10",
     "conventional-changelog-conventionalcommits": "4.6.3",
     "eslint": "8.46.0",
@@ -112,27 +107,26 @@
     "jest-haste-map": "^29.0.1",
     "jest-resolve": "^29.0.1",
     "jest-runner": "^29.0.1",
-    "jest-styled-components": "^7.1.1",
     "lint-staged": "11.1.2",
     "postcss": "^8.4.27",
-    "postcss-styled-syntax": "^0.4.0",
     "prettier": "^3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
     "rimraf": "3.0.2",
     "rollup": "3.29.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^19.0.5",
     "storybook": "^7.2.3",
     "storybook-addon-swc": "^1.2.0",
     "storybook-dark-mode": "^3.0.1",
-    "styled-components": "^5.3.5",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.0.2",
     "ts-jest": "^29.1.1",
     "tslib": "2.3.1",
-    "typescript": "4.8",
+    "typescript": "4.9",
+    "typescript-plugin-css-modules": "^5.1.0",
     "zx": "^7.0.8"
   }
 }