From f33fb0f7d0e049935176ee7cb5005e8add04f129 Mon Sep 17 00:00:00 2001 From: cheton Date: Sat, 18 Jan 2025 15:54:34 +0800 Subject: [PATCH 1/3] feat: eliminate the `lodash.get` dependency --- packages/react/package.json | 1 - packages/react/src/css-baseline/base-css.js | 8 +++++--- packages/react/src/drawer/styles.js | 5 ++--- packages/react/src/modal/styles.js | 5 ++--- yarn.lock | 8 -------- 5 files changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index a0485d8b84..45fef698a9 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,7 +32,6 @@ "@tonic-ui/utils": "^2.1.1", "date-fns": "2.x", "ensure-type": "^1.5.1", - "lodash.get": "4.x", "micro-memoize": "4.x", "react-focus-lock": "2.x", "react-is": "^16.14.0 || ^17 || ^18", diff --git a/packages/react/src/css-baseline/base-css.js b/packages/react/src/css-baseline/base-css.js index d0cd3a49ea..a64b384107 100644 --- a/packages/react/src/css-baseline/base-css.js +++ b/packages/react/src/css-baseline/base-css.js @@ -1,7 +1,9 @@ import { css } from '@emotion/react'; -import _get from 'lodash.get'; const baseCSS = theme => { + const baseFonts = theme?.fonts?.['base'] ?? 'inherit'; + const monoFonts = theme?.fonts?.['mono'] ?? 'inherit'; + return css` /** * Apply a natural box layout model to all elements, but allowing components to change. @@ -14,14 +16,14 @@ const baseCSS = theme => { } html { - font-family: ${_get(theme, 'fonts.base')}; + font-family: ${baseFonts}; } pre, code, kbd, samp { - font-family: ${_get(theme, 'fonts.mono')}; + font-family: ${monoFonts}; } `; }; diff --git a/packages/react/src/drawer/styles.js b/packages/react/src/drawer/styles.js index 981154c3e2..7e44c77c16 100644 --- a/packages/react/src/drawer/styles.js +++ b/packages/react/src/drawer/styles.js @@ -1,4 +1,3 @@ -import _get from 'lodash.get'; import { useColorMode } from '../color-mode'; import { useColorStyle } from '../color-style'; import { useIconButtonStyle } from '../shared/styles'; @@ -219,7 +218,7 @@ const useDrawerBodyStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${_get(sizes, '4x')} + ${_get(lineHeights, 'xl')} + ${_get(sizes, '3x')})`, + marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, }, }; }; @@ -240,7 +239,7 @@ const useDrawerFooterStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${_get(sizes, '4x')} + ${_get(lineHeights, 'xl')} + ${_get(sizes, '3x')})`, + marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, }, }; }; diff --git a/packages/react/src/modal/styles.js b/packages/react/src/modal/styles.js index b465510900..7de40b6b1c 100644 --- a/packages/react/src/modal/styles.js +++ b/packages/react/src/modal/styles.js @@ -1,4 +1,3 @@ -import _get from 'lodash.get'; import { useColorMode } from '../color-mode'; import { useColorStyle } from '../color-style'; import { useIconButtonStyle } from '../shared/styles'; @@ -197,7 +196,7 @@ const useModalBodyStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${_get(sizes, '4x')} + ${_get(lineHeights, 'xl')} + ${_get(sizes, '3x')})`, + marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, }, }; }; @@ -220,7 +219,7 @@ const useModalFooterStyle = () => { _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${_get(sizes, '4x')} + ${_get(lineHeights, 'xl')} + ${_get(sizes, '3x')})`, + marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, }, }; }; diff --git a/yarn.lock b/yarn.lock index b0c3eb32de..10fdfd71da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4727,7 +4727,6 @@ __metadata: jest-axe: ^8.0.0 jest-environment-jsdom: ^29.0.0 jest-extended: ^4.0.0 - lodash.get: 4.x micro-memoize: 4.x react: ^16.14.0 || ^17 || ^18 react-dom: ^16.14.0 || ^17 || ^18 @@ -11626,13 +11625,6 @@ __metadata: languageName: node linkType: hard -"lodash.get@npm:4.x": - version: 4.4.2 - resolution: "lodash.get@npm:4.4.2" - checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545 - languageName: node - linkType: hard - "lodash.isfunction@npm:^3.0.9": version: 3.0.9 resolution: "lodash.isfunction@npm:3.0.9" From 49c0be9eab62196a11616fbfc081dc4d10b2960c Mon Sep 17 00:00:00 2001 From: cheton Date: Sat, 18 Jan 2025 16:12:09 +0800 Subject: [PATCH 2/3] feat: use `pixelize` to prevent potential CSS `calc()` error --- packages/react/src/drawer/styles.js | 5 +++-- packages/react/src/modal/styles.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react/src/drawer/styles.js b/packages/react/src/drawer/styles.js index 7e44c77c16..e97ffaebf3 100644 --- a/packages/react/src/drawer/styles.js +++ b/packages/react/src/drawer/styles.js @@ -2,6 +2,7 @@ import { useColorMode } from '../color-mode'; import { useColorStyle } from '../color-style'; import { useIconButtonStyle } from '../shared/styles'; import { useTheme } from '../theme'; +import pixelize from '../utils/pixelize'; const defaultPlacement = 'right'; const defaultSize = 'auto'; @@ -218,7 +219,7 @@ const useDrawerBodyStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, + marginTop: `calc(${pixelize(sizes['4x'])} + ${pixelize(lineHeights['xl'])} + ${pixelize(sizes['3x'])})`, }, }; }; @@ -239,7 +240,7 @@ const useDrawerFooterStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, + marginTop: `calc(${pixelize(sizes['4x'])} + ${pixelize(lineHeights['xl'])} + ${pixelize(sizes['3x'])})`, }, }; }; diff --git a/packages/react/src/modal/styles.js b/packages/react/src/modal/styles.js index 7de40b6b1c..d50966b70e 100644 --- a/packages/react/src/modal/styles.js +++ b/packages/react/src/modal/styles.js @@ -2,6 +2,7 @@ import { useColorMode } from '../color-mode'; import { useColorStyle } from '../color-style'; import { useIconButtonStyle } from '../shared/styles'; import { useTheme } from '../theme'; +import pixelize from '../utils/pixelize'; const defaultSize = 'auto'; @@ -196,7 +197,7 @@ const useModalBodyStyle = ({ _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, + marginTop: `calc(${pixelize(sizes['4x'])} + ${pixelize(lineHeights['xl'])} + ${pixelize(sizes['3x'])})`, }, }; }; @@ -219,7 +220,7 @@ const useModalFooterStyle = () => { _firstOfType: { // Sets the margin area on the top if it is the first child // 4x (padding-top) + xl (line-height) + 3x (padding-bottom) - marginTop: `calc(${sizes?.['4x']} + ${lineHeights?.['xl']} + ${sizes?.['3x']})`, + marginTop: `calc(${pixelize(sizes['4x'])} + ${pixelize(lineHeights['xl'])} + ${pixelize(sizes['3x'])})`, }, }; }; From a000ea74cc7b1ad515bf46a86590a6887a0dcdaf Mon Sep 17 00:00:00 2001 From: Cheton Wu <447801+cheton@users.noreply.github.com> Date: Sat, 18 Jan 2025 16:34:49 +0800 Subject: [PATCH 3/3] Create tonic-ui-963.md --- .changeset/tonic-ui-963.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tonic-ui-963.md diff --git a/.changeset/tonic-ui-963.md b/.changeset/tonic-ui-963.md new file mode 100644 index 0000000000..fbdc0aac7e --- /dev/null +++ b/.changeset/tonic-ui-963.md @@ -0,0 +1,5 @@ +--- +"@tonic-ui/react": minor +--- + +feat: eliminate the `lodash.get` dependency