feat(tw-merge): ✨ add tailwind merge for cx

adaptui · Sep 16, 2021 · 344045d · 344045d
1 parent c582366
commit 344045d
Show file tree

Hide file tree

Showing 101 changed files with 1,876 additions and 2,699 deletions.
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "preset.js"
   ],
   "scripts": {
-    "postinstall": "concurrently \"husky install\" \"patch-package\"",
+    "postinstall": "husky install",
     "keys": "node scripts/generateKeys",
     "storybook": "cross-env TAILWIND_MODE=watch start-storybook -p 6006",
     "test": "jest --config ./jest.config.ts --no-cache",
@@ -83,12 +83,13 @@
   },
   "dependencies": {
     "@react-aria/live-announcer": "^3.0.1",
-    "@renderlesskit/react": "^0.5.3",
+    "@renderlesskit/react": "^0.6.0",
     "lodash": "^4.17.21",
     "reakit": "^1.3.9",
     "reakit-system": "^0.15.2",
     "reakit-utils": "^0.15.2",
-    "reakit-warning": "^0.6.2"
+    "reakit-warning": "^0.6.2",
+    "tailwind-merge": "^0.6.0"
   },
   "devDependencies": {
     "@babel/cli": "7.15.4",
@@ -97,36 +98,36 @@
     "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
     "@babel/plugin-proposal-private-methods": "^7.14.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.15.4",
-    "@babel/preset-env": "7.15.4",
+    "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "7.15.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@release-it/conventional-changelog": "^3.3.0",
-    "@storybook/addon-a11y": "6.4.0-alpha.34",
-    "@storybook/addon-actions": "6.4.0-alpha.34",
-    "@storybook/addon-essentials": "6.4.0-alpha.34",
+    "@storybook/addon-a11y": "6.3.8",
+    "@storybook/addon-actions": "6.3.8",
+    "@storybook/addon-essentials": "6.3.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.4.0-alpha.34",
-    "@testing-library/dom": "^8.3.0",
+    "@storybook/react": "^6.3.8",
+    "@testing-library/dom": "^8.5.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/jest-axe": "^3.5.2",
-    "@types/node": "^16.9.0",
-    "@types/react": "^17.0.20",
+    "@types/node": "^16.9.1",
+    "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/tailwindcss": "^2.2.1",
     "@types/testing-library__jest-dom": "^5.14.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "all-contributors-cli": "^6.20.0",
     "autoprefixer": "10.3.4",
     "axe-core": "^4.3.3",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.1.1",
+    "babel-jest": "^27.2.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "babel-plugin-lodash": "^3.3.4",
@@ -137,7 +138,7 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.9.2",
+    "eslint-plugin-flowtype": "^6.0.1",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -149,7 +150,7 @@
     "fs-extra": "^10.0.0",
     "gacp": "^2.10.2",
     "husky": "^7.0.2",
-    "jest": "^27.1.1",
+    "jest": "^27.2.0",
     "jest-axe": "^5.0.1",
     "ladash": "^1.2.0",
     "lint-staged": "^11.1.2",
@@ -159,23 +160,23 @@
     "postcss-cli": "^8.3.1",
     "postcss-focus-visible": "^5.0.0",
     "postcss-selector-parser": "^6.0.6",
-    "prettier": "2.4.0",
+    "prettier": "2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.15.2",
+    "react-hook-form": "^7.15.3",
     "react-icons": "^4.2.0",
     "reakit-test-utils": "^0.15.2",
     "release-it": "^14.11.5",
     "rimraf": "^3.0.2",
-    "sort-package-json": "^1.50.0",
+    "sort-package-json": "^1.51.0",
     "storybook-addon-pseudo-states": "^1.0.0",
     "storybook-builder-vite": "^0.0.12",
-    "tailwindcss": "2.2.14",
+    "tailwindcss": "2.2.15",
     "ts-morph": "^12.0.0",
     "ts-node": "^10.2.1",
     "tsd": "^0.17.0",
-    "typescript": "^4.4.2",
-    "vite": "^2.5.6"
+    "typescript": "^4.4.3",
+    "vite": "^2.5.7"
   },
   "peerDependencies": {
     "deepmerge": "4.x",

diff --git a/patches/tailwindcss+2.2.14.patch b/patches/tailwindcss+2.2.14.patch
diff --git a/renderlesskit.config.ts b/renderlesskit.config.ts
@@ -5,20 +5,16 @@ export const theme = extendTheme({
   extend: {
     button: {
       variant: {
-        tertiary: "bg-purple-600 lib:text-white",
+        default: {
+          tertiary: "bg-purple-600 text-white",
+        },
       },
       size: {
-        xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",
+        default: {
+          xxl: "h-14 min-w-14 px-6 rounded-xl text-xl",
+        },
       },
     },
-    // alert: {
-    //   status: {
-    //     info: {
-    //       base: "bg-red-500",
-    //       icon: "text-white",
-    //     },
-    //   },
-    // },
   },
 });
 

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import {
   AlertIcon,

diff --git a/src/alert/AlertActionButton.tsx b/src/alert/AlertActionButton.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { useAlertContext } from "./Alert";

diff --git a/src/alert/AlertActions.tsx b/src/alert/AlertActions.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { Box, BoxProps } from "../box";

diff --git a/src/alert/AlertBody.tsx b/src/alert/AlertBody.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { Box, BoxProps } from "../box";

diff --git a/src/alert/AlertCloseButton.tsx b/src/alert/AlertCloseButton.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { useAlertContext } from "./Alert";

diff --git a/src/alert/AlertDescription.tsx b/src/alert/AlertDescription.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { Box, BoxProps } from "../box";

diff --git a/src/alert/AlertIcon.tsx b/src/alert/AlertIcon.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import {
   InfoCircleIcon,

diff --git a/src/alert/AlertTitle.tsx b/src/alert/AlertTitle.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../index";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/AvatarBadge.tsx b/src/avatar/AvatarBadge.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/AvatarIcon.tsx b/src/avatar/AvatarIcon.tsx
@@ -1,6 +1,6 @@
 import { isValidElement, cloneElement } from "react";
 import { Box, BoxProps } from "reakit";
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { forwardRefWithAs } from "../utils/types";

diff --git a/src/avatar/AvatarImage.tsx b/src/avatar/AvatarImage.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/AvatarName.tsx b/src/avatar/AvatarName.tsx
@@ -1,4 +1,4 @@
-import { cx } from "@renderlesskit/react";
+import { twMerge as cx } from "tailwind-merge";
 
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";

diff --git a/src/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -3,16 +3,16 @@
 exports[`<Avatar /> should render Avatar 1`] = `
 <DocumentFragment>
   <div
-    class="lib:relative lib:inline-flex lib:items-center lib:justify-center lib:rounded-full lib:flex-shrink-0 lib:bg-gray-100 lib:h-6 lib:w-6 lib:ring-white"
+    class="relative inline-flex items-center justify-center rounded-full flex-shrink-0 bg-gray-100 h-6 w-6 ring-white"
     data-testid="testid-avatar_children"
   >
     <span
       aria-label="Avatar Icon"
-      class="lib:inline-flex lib:text-gray-500 lib:text-xs"
+      class="inline-flex text-gray-500 text-xs"
     >
       <svg
         aria-hidden="true"
-        class="lib:w-[1em] lib:h-[1em] lib:inline-block lib:leading-[1em] lib:flex-shrink-0 lib:text-current lib:align-middle"
+        class="w-[1em] h-[1em] inline-block leading-[1em] flex-shrink-0 text-current align-middle"
         data-testid="testid-icon"
         focusable="false"
         role="img"
@@ -35,16 +35,16 @@ exports[`<Avatar /> should render Avatar 1`] = `
 exports[`<Avatar /> should render with AvatarBadge 1`] = `
 <DocumentFragment>
   <div
-    class="lib:relative lib:inline-flex lib:items-center lib:justify-center lib:rounded-full lib:flex-shrink-0 lib:bg-gray-100 lib:h-6 lib:w-6 lib:ring-white"
+    class="relative inline-flex items-center justify-center rounded-full flex-shrink-0 bg-gray-100 h-6 w-6 ring-white"
     data-testid="testid-avatar_children"
   >
     <span
       aria-label="Avatar Icon"
-      class="lib:inline-flex lib:text-gray-500 lib:text-xs"
+      class="inline-flex text-gray-500 text-xs"
     >
       <svg
         aria-hidden="true"
-        class="lib:w-[1em] lib:h-[1em] lib:inline-block lib:leading-[1em] lib:flex-shrink-0 lib:text-current lib:align-middle"
+        class="w-[1em] h-[1em] inline-block leading-[1em] flex-shrink-0 text-current align-middle"
         data-testid="testid-icon"
         focusable="false"
         role="img"
@@ -61,11 +61,11 @@ exports[`<Avatar /> should render with AvatarBadge 1`] = `
       </svg>
     </span>
     <div
-      class="lib:absolute lib:flex lib:items-center lib:justify-center lib:ring-white lib:rounded-full lib:text-[0.25rem] lib:ring-2 lib:bottom-0 lib:right-0"
+      class="absolute flex items-center justify-center ring-white rounded-full text-[0.25rem] ring-2 bottom-0 right-0"
       data-testid="testid-avatar-badge"
     >
       <svg
-        class="lib:w-[1em] lib:h-[1em] lib:inline-block lib:leading-[1em] lib:flex-shrink-0 lib:text-current lib:align-middle lib:text-green-500 lib:ring-white lib:ring-opacity-100 lib:ring-1.5 lib:text-[5px]"
+        class="w-[1em] h-[1em] inline-block flex-shrink-0 align-middle text-green-500 ring-white ring-opacity-100 ring-1.5 text-[5px]"
         data-testid="testid-icon"
         focusable="false"
         viewBox="0 0 9 9"