fix(button): 🐛 fix button transform & use lesser lodash fn

adaptui · Jul 16, 2021 · db79d5a · db79d5a
1 parent 0f098d7
commit db79d5a
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 14 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -22,6 +22,7 @@ module.exports = function (api) {
 
   const plugins = [
     ["@babel/plugin-proposal-class-properties"],
+    ["lodash"],
     isBuild
       ? [
           "babel-plugin-jsx-remove-data-test-id",

diff --git a/package.json b/package.json
@@ -108,7 +108,6 @@
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.24",
     "@types/jest-axe": "^3.5.2",
-    "@types/lodash-es": "^4.17.4",
     "@types/node": "^16.3.2",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
@@ -122,6 +121,7 @@
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
+    "babel-plugin-lodash": "^3.3.4",
     "concurrently": "^6.2.0",
     "cross-env": "^7.0.3",
     "date-fns": "^2.22.1",

diff --git a/src/theme/defaultTheme/button.ts b/src/theme/defaultTheme/button.ts
@@ -1,5 +1,5 @@
 export const button = {
-  base: "lib:relative lib:inline-flex lib:items-center lib:justify-center lib:font-medium lib:w-auto lib:outline-none focus-visible:lib:ring-2 disabled:lib:text-gray-400 disabled:cursor-not-allowed  lib:space-x-1.5 lib:appearance-none lib:whitespace-nowrap lib:align-middle lib:select-none  lib:transform lib:translate-y-0 hover:lib:-translate-y-px active:lib:translate-y-0 lib:transition-all",
+  base: "lib:relative lib:inline-flex lib:items-center lib:justify-center lib:font-medium lib:w-auto button-transform lib:outline-none focus-visible:lib:ring-2 disabled:lib:text-gray-400 disabled:cursor-not-allowed  lib:space-x-1.5 lib:appearance-none lib:whitespace-nowrap lib:align-middle lib:select-none lib:transition-all",
   size: {
     sm: "lib:h-[26px] lib:min-w-[26px] lib:px-2 lib:rounded-lg lib:text-cxs pb-px",
     md: "lib:h-[30px] lib:min-w-[30px] lib:px-2.5 lib:rounded-lg lib:text-sm",

diff --git a/src/theme/mergeThemes.ts b/src/theme/mergeThemes.ts
@@ -1,6 +1,12 @@
 import { cx } from "@renderlesskit/react";
-import { defaults, mergeWith, isString, isUndefined } from "lodash";
-import { PartialDefaultTheme, DefaultTheme, ExtendableDefaultTheme } from ".";
+import { defaults, mergeWith } from "lodash";
+
+import {
+  PartialDefaultTheme,
+  DefaultTheme,
+  ExtendableDefaultTheme,
+} from "./index";
+import { isString, isUndefined } from "../utils";
 
 export function mergeThemes(themes: PartialDefaultTheme[]) {
   return {

diff --git a/src/utils/index.tsx b/src/utils/index.tsx
@@ -146,3 +146,7 @@ export const withIconA11y = (icon: React.ReactElement, props?: Dict) => {
       })
     : icon;
 };
+
+export function isUndefined(value: any): value is undefined {
+  return typeof value === "undefined" || value === undefined;
+}
diff --git a/tailwindPlugins/utilities.js b/tailwindPlugins/utilities.js
@@ -20,6 +20,15 @@ const utilities = plugin(function ({ addUtilities }) {
     ".touch-action-none": {
       "touch-action": "none",
     },
+    ".button-transform": {
+      transform: "translateY(0px)",
+    },
+    ".button-transform:hover": {
+      transform: "translateY(-1px)",
+    },
+    ".button-transform:active": {
+      transform: "translateY(0px)",
+    },
   };
 
   addUtilities(utilities, ["lib", "DEFAULT", "responsive"]);

diff --git a/yarn.lock b/yarn.lock
@@ -211,7 +211,7 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
   integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
@@ -1131,7 +1131,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.14.5", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.14.5", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
   integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
@@ -3238,13 +3238,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash-es@^4.17.4":
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.4.tgz#b2e440d2bf8a93584a9fd798452ec497986c9b97"
-  integrity sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==
-  dependencies:
-    "@types/lodash" "*"
-
 "@types/[email protected]":
   version "4.6.6"
   resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
@@ -4344,6 +4337,17 @@ babel-plugin-jsx-remove-data-test-id@^3.0.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-jsx-remove-data-test-id/-/babel-plugin-jsx-remove-data-test-id-3.0.0.tgz#15c95f97ce0ff60d72b29e403bde245f86393288"
   integrity sha512-E4uM/LIUizjy2Z5tVAfa8pSXsYgoKWJ97kzuEMfsIxSLSNDWsAhgFVPkgNuakViX5dkNjw1DKIi0VpWP6djqbw==
 
+babel-plugin-lodash@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz#4f6844358a1340baed182adbeffa8df9967bc196"
+  integrity sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0-beta.49"
+    "@babel/types" "^7.0.0-beta.49"
+    glob "^7.1.1"
+    lodash "^4.17.10"
+    require-package-name "^2.0.1"
+
 babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -9973,7 +9977,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-[email protected], lodash@^4.11.2, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+[email protected], lodash@^4.11.2, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12501,6 +12505,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+require-package-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
+  integrity sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=
+
 resolve-alpn@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.1.2.tgz#30b60cfbb0c0b8dc897940fe13fe255afcdd4d28"