chore: setup orbit-components to TW (#3910)

* chore: setup orbit-components to TW * chore: add stylelint-config-tailwindcss * chore: add tailwind linting configs * chore(tailwind): add palette type export * chore: add common TW classes * chore(tokens): fix paletteColors type issue chore: add tokens index.ts to flow ignore --------- Co-authored-by: mainframev <[email protected]>
kiwicom · Jul 31, 2023 · 3b3dd2d · 3b3dd2d
1 parent 7089013
commit 3b3dd2d
Show file tree

Hide file tree

Showing 39 changed files with 3,063 additions and 138 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,6 +1,11 @@
 const { DEV_DEPENDENCIES } = require("./utils/eslint");
 
-const CONFIGS = ["airbnb", "plugin:react-hooks/recommended", "plugin:prettier/recommended"];
+const CONFIGS = [
+  "airbnb",
+  "plugin:react-hooks/recommended",
+  "plugin:prettier/recommended",
+  "plugin:tailwindcss/recommended",
+];
 
 module.exports = {
   root: true,
@@ -44,6 +49,8 @@ module.exports = {
     "react/no-access-state-in-setstate": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "no-await-in-loop": "off",
+    "tailwindcss/classnames-order": "off",
+    "tailwindcss/no-custom-classname": [1, { whitelist: ["(orbit\\-).*"] }],
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {

diff --git a/.flowconfig b/.flowconfig
@@ -4,6 +4,7 @@
 <PROJECT_ROOT>/packages/*/umd/.*
 <PROJECT_ROOT>/packages/babel-plugin-orbit-components/dist/
 <PROJECT_ROOT>/packages/babel-plugin-orbit-components/__fixtures__/
+<PROJECT_ROOT>/packages/orbit-design-tokens/dist/index.js.flow
 
 .*/node_modules/webpack-cli/lib/utils/__tests__/
 .*/node_modules/immutable/.*

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -28,6 +28,9 @@ jobs:
       - name: Compile design tokens
         run: yarn tokens build
 
+      - name: Build tailwind
+        run: yarn tailwind-preset build
+
       - name: Build Storybook
         run: yarn components build:storybook
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -30,6 +30,7 @@ jobs:
           GITLAB_TOKEN: ${{ secrets.GITLAB_TOKEN }}
         run: |
           yarn tokens build
+          yarn tailwind-preset build
           yarn components build
           yarn tracking build
           yarn themer build
@@ -97,6 +98,7 @@ jobs:
       - name: Build
         run: |
           yarn tokens build
+          yarn tailwind-preset build
           yarn components build
 
       - name: Cypress

diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "printWidth": 100,
   "trailingComma": "all",
   "endOfLine": "lf",
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "tailwindFunctions": ["cx"]
 }
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,11 @@
   "overrides": [
     {
       "files": ["*.ts?(x)"],
-      "extends": ["stylelint-config-recommended", "stylelint-config-styled-components"]
+      "extends": [
+        "stylelint-config-recommended",
+        "stylelint-config-styled-components",
+        "stylelint-config-tailwindcss"
+      ]
     }
   ],
   "rules": {

diff --git a/package.json b/package.json
@@ -20,12 +20,12 @@
     "eslint:docs": "eslint --fix docs/src/documentation --report-unused-disable-directives",
     "loki:approve": "yarn components loki approve",
     "loki:test": "yarn components loki test",
-    "orbit-kiwi:build": "yarn && yarn tokens build && yarn components build && yarn themer build && yarn docs build",
+    "orbit-kiwi:build": "yarn && yarn tokens build && yarn tailwind-preset build && yarn components build && yarn themer build && yarn docs build",
     "postinstall": "lerna run postinstall --stream",
     "prepare": "husky install",
     "prettier:test": "prettier --check '**/*.md'",
     "publish-packages": "zx scripts/publish.mjs",
-    "size:build": "yarn tokens build && yarn components size:build",
+    "size:build": "yarn tokens build && yarn tailwind-preset build && yarn components size:build",
     "size": "yarn size:build && size-limit",
     "test-ci": "jest --ci --maxWorkers=2 && lerna run test",
     "test": "jest",
@@ -66,12 +66,18 @@
     "@size-limit/file": "^8.0.0",
     "@size-limit/webpack": "^8.0.0",
     "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@testing-library/cypress": "^8.0.0",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/user-event": "^13.1.1",
     "@types/dedent": "^0.7.0",
     "@types/dotenv-safe": "^8.1.2",
     "@types/lodash": "^4.14.194",
     "@types/prettier": "^2.7.2",
     "@types/react": "^17.0.26",
     "@types/react-dom": "^17.0.9",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "babel-jest": "^28.1.3",
@@ -88,21 +94,16 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-node": "^0.3.7",
     "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-orbit-components": "*",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-orbit-components": "*",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "@testing-library/cypress": "^8.0.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "^13.1.1",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "fast-glob": "^3.2.12",
     "filedirname": "^2.7.0",
     "flow-bin": "^0.187.1",
@@ -114,9 +115,11 @@
     "lint-staged": "^12.3.2",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.24",
+    "postcss-cli": "^10.1.0",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "raf": "^3.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -126,6 +129,7 @@
     "stylelint": "^15.10.1",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-config-tailwindcss": "^0.0.7",
     "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
     "tsc-files": "^1.1.3",

diff --git a/packages/orbit-components/.storybook/main.ts b/packages/orbit-components/.storybook/main.ts
@@ -14,6 +14,12 @@ const config: StorybookConfig = {
         controls: false,
       },
     },
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        postCss: true,
+      },
+    },
   ],
   webpackFinal(cfg) {
     if (cfg) {

diff --git a/packages/orbit-components/.storybook/preview.ts b/packages/orbit-components/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import "loki/configure-react";
 import { Preview } from "@storybook/react";
 
+import "../src/tailwind.css";
 import { QUERIES } from "../src/utils/mediaQuery/consts";
 import orbitDecorator from "./orbitDecorator";
 import theme from "../src/defaultTheme";

diff --git a/packages/orbit-components/config/build/consts.mts b/packages/orbit-components/config/build/consts.mts
@@ -16,6 +16,7 @@ export const COMPILE_IGNORE_PATTERNS = [
   "**/*.test.*",
   "**/__tests__/**/*",
   "**/__typetests__/**/*",
+  "**/test-utils.tsx",
 ];
 
-export const DECLARATIONS_IGNORE_PATTERN = ["**/RenderInRtl.{tsx,d.ts}"];
+export const DECLARATIONS_IGNORE_PATTERN = ["**/RenderInRtl.{tsx,d.ts}", "**/test-utils.d.ts"];
diff --git a/packages/orbit-components/config/build/index.mts b/packages/orbit-components/config/build/index.mts
@@ -11,6 +11,10 @@ import buildSize from "./buildSize.mjs";
 
   await $`del ${OUTPUT_PATTERNS}`;
 
+  logStep("Building tailwind");
+
+  await $`yarn tailwind`;
+
   logStep("Building icons");
 
   await $`ts-node --esm config/build/buildIcons.mts`;

diff --git a/packages/orbit-components/package.json b/packages/orbit-components/package.json
@@ -12,6 +12,7 @@
     "cy:run": "start-server-and-test cy:dev http-get://localhost:3000 'cypress run'",
     "cy:open": "start-server-and-test cy:dev http-get://localhost:3000 'cypress open'",
     "build": "ts-node --esm config/build/index.mts",
+    "tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./lib/tailwind.css",
     "prepublishOnly": "yarn build",
     "size:build": "yarn build --size",
     "size": "size-limit",
@@ -72,7 +73,9 @@
   },
   "dependencies": {
     "@kiwicom/orbit-design-tokens": "^5.0.0-beta.2",
+    "@kiwicom/orbit-tailwind-preset": "^1.0.0-beta.2",
     "@popperjs/core": "^2.9.2",
+    "clsx": "^2.0.0",
     "react-hot-toast": "^2.4.0",
     "react-popper": "^2.2.5",
     "react-uid": "^2.3.2"
@@ -87,6 +90,7 @@
     "@size-limit/webpack-why": "^8.0.0",
     "@storybook/addon-essentials": "^7.0.23",
     "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-styling": "^1.3.1",
     "@storybook/addons": "^7.0.23",
     "@storybook/blocks": "^7.0.23",
     "@storybook/react": "^7.0.23",
@@ -97,6 +101,7 @@
     "@svgr/plugin-jsx": "^6.3.1",
     "@svgr/plugin-prettier": "^6.3.1",
     "@svgr/plugin-svgo": "^6.3.1",
+    "@testing-library/react": "^11.2.7",
     "@types/readable-stream": "^2.3.13",
     "@types/styled-components": "^5.1.15",
     "@types/svgicons2svgfont": "^10.0.1",

diff --git a/packages/orbit-components/postcss.config.js b/packages/orbit-components/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/orbit-components/src/Box/types.d.ts b/packages/orbit-components/src/Box/types.d.ts
@@ -13,19 +13,16 @@ export type Elevation =
   | "raisedReverse";
 
 export type ColorTokens =
-  | "productLight"
-  | "productLightHover"
-  | "productLightActive"
-  | "productNormal"
-  | "productNormalHover"
-  | "productNormalActive"
-  | "productDark"
-  | "productDarkHover"
-  | "productDarkActive"
-  | "productDarker"
-  | "white"
-  | "whiteHover"
-  | "whiteActive"
+  | "blueLight"
+  | "blueLightHover"
+  | "blueLightActive"
+  | "blueNormal"
+  | "blueNormalHover"
+  | "blueNormalActive"
+  | "blueDark"
+  | "blueDarkHover"
+  | "blueDarkActive"
+  | "blueDarker"
   | "cloudLight"
   | "cloudLightHover"
   | "cloudLightActive"
@@ -35,12 +32,22 @@ export type ColorTokens =
   | "cloudDark"
   | "cloudDarkHover"
   | "cloudDarkActive"
-  | "inkLight"
-  | "inkLightHover"
-  | "inkLightActive"
+  | "greenLight"
+  | "greenLightHover"
+  | "greenLightActive"
+  | "greenNormal"
+  | "greenNormalHover"
+  | "greenNormalActive"
+  | "greenDark"
+  | "greenDarkHover"
+  | "greenDarkActive"
+  | "greenDarker"
   | "inkDark"
   | "inkDarkHover"
   | "inkDarkActive"
+  | "inkLight"
+  | "inkLightHover"
+  | "inkLightActive"
   | "inkNormal"
   | "inkNormalHover"
   | "inkNormalActive"
@@ -54,6 +61,16 @@ export type ColorTokens =
   | "orangeDarkHover"
   | "orangeDarkActive"
   | "orangeDarker"
+  | "productLight"
+  | "productLightHover"
+  | "productLightActive"
+  | "productNormal"
+  | "productNormalHover"
+  | "productNormalActive"
+  | "productDark"
+  | "productDarkHover"
+  | "productDarkActive"
+  | "productDarker"
   | "redLight"
   | "redLightHover"
   | "redLightActive"
@@ -64,31 +81,13 @@ export type ColorTokens =
   | "redDarkHover"
   | "redDarkActive"
   | "redDarker"
-  | "greenLight"
-  | "greenLightHover"
-  | "greenLightActive"
-  | "greenNormal"
-  | "greenNormalHover"
-  | "greenNormalActive"
-  | "greenDark"
-  | "greenDarkHover"
-  | "greenDarkActive"
-  | "greenDarker"
-  | "blueLight"
-  | "blueLightHover"
-  | "bundleBasic"
-  | "bundleMedium"
-  | "blueLightActive"
-  | "blueNormal"
-  | "blueNormalHover"
-  | "blueNormalActive"
-  | "blueDark"
-  | "blueDarkHover"
-  | "blueDarkActive"
-  | "blueDarker"
   | "socialFacebook"
   | "socialFacebookHover"
-  | "socialFacebookActive";
+  | "socialFacebookActive"
+  | "white"
+  | "whiteNormal"
+  | "whiteHover"
+  | "whiteActive";
 
 export type SpacingToken =
   | "none"