refactor: remove lodash

DevoInc · Oct 29, 2024 · 5e72dd8 · 5e72dd8
1 parent ead2549
commit 5e72dd8
Show file tree

Hide file tree

Showing 17 changed files with 53 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,6 @@
     "happy-dom": "^15.7.4",
     "identity-obj-proxy": "^3.0.0",
     "js-cookie": "^3.0.5",
-    "lodash": "^4.17.21",
     "mermaid": "^11.2.1",
     "oxlint": "^0.9.8",
     "polished": "^4.3.1",
@@ -96,8 +95,5 @@
   "engines": {
     "node": ">=18",
     "npm": ">=7"
-  },
-  "overrides": {
-    "@types/lodash": "4.14.197"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -34,7 +34,6 @@
     "@dnd-kit/sortable": "7.x.x",
     "@popperjs/core": "2.x.x",
     "ahooks": "3.x.x",
-    "lodash": "4.x.x",
     "polished": "4.x.x",
     "react": "16.x || 17.x || 18.x",
     "react-dock": "0.x.x",

diff --git a/packages/core/src/components/Avatar/components/AvatarContainer/StyledAvatarContainer.ts b/packages/core/src/components/Avatar/components/AvatarContainer/StyledAvatarContainer.ts
@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import type { IAvatarStyled } from '../../declarations';
 
 import { getAvatarSizeConfig } from '../../utils';
 
 import { typoMixin } from '../../../../styled/';
+import { getTokenKeyFromColorScheme } from '../../../../helpers';
 
 export interface StyledAvatarContainerProps
   extends Pick<
@@ -30,7 +30,7 @@ export const StyledAvatarContainer = styled.span<StyledAvatarContainerProps>`
     theme,
     $variant,
   }) => {
-    const colorSchemeForTokens = camelCase($colorScheme);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
     const cmpTokens = theme.cmp.avatar;
     const bgColor = cmpTokens.color.background[colorSchemeForTokens];
     const color = cmpTokens.color.text[colorSchemeForTokens];

diff --git a/packages/core/src/components/Badge/components/BadgeContainer/StyledBadgeContainer.ts b/packages/core/src/components/Badge/components/BadgeContainer/StyledBadgeContainer.ts
@@ -1,7 +1,10 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
-import { isValidColor, getAccTextColor } from '../../../../helpers';
+import {
+  isValidColor,
+  getAccTextColor,
+  getTokenKeyFromColorScheme,
+} from '../../../../helpers';
 import { getBadgeInverseModeColor } from '../../helpers';
 
 import type { IBadgeContainer } from './declarations';
@@ -28,7 +31,7 @@ export const StyledBadgeContainer = styled.span<StyledBadgeContainerProps>`
     $size = 'md',
     theme,
   }) => {
-    const colorSchemeForTokens = camelCase($colorScheme);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
     const contentType = $hasContent ? 'hasContent' : 'isEmpty';
     const cmpTokens = theme.cmp.badge;
     const squareSize = cmpTokens.size.square[contentType][$size];

diff --git a/packages/core/src/components/Button/components/ButtonContainer/StyledButtonContainer.ts b/packages/core/src/components/Button/components/ButtonContainer/StyledButtonContainer.ts
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import {
   typoMixin,
@@ -8,6 +7,7 @@ import {
 } from '../../../../styled/mixins';
 import { loadingAnimationMixin } from '../../helpers';
 import type { IButtonContainerStyled } from './declarations';
+import { getTokenKeyFromColorScheme } from '../../../../helpers';
 
 export interface StyledButtonContainerProps extends IButtonContainerStyled {}
 
@@ -25,7 +25,7 @@ export const StyledButtonContainer = styled.button<StyledButtonContainerProps>`
     theme,
   }) => {
     const isIconButtonDropdown = $icon && $squared && $hasDropdown;
-    const colorSchemeForTokens = camelCase($colorScheme);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
     const buttonTokens = theme.cmp.button;
     const IconButtonDropdownTokens = theme.cmp.iconButtonDropdown;
     const boxShadowTokens = buttonTokens.elevation.boxShadow;

diff --git a/packages/core/src/components/Divider/StyledDivider.ts b/packages/core/src/components/Divider/StyledDivider.ts
@@ -1,8 +1,7 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import type { IDividerStyled } from './declarations';
-import { getSpacingPropCss } from '../../helpers';
+import { getSpacingPropCss, getTokenKeyFromColorScheme } from '../../helpers';
 
 export interface StyledDividerProps extends IDividerStyled {}
 
@@ -21,7 +20,7 @@ export const StyledDivider = styled.hr<StyledDividerProps>`
     $width,
   }) => {
     const cmpTokens = theme.cmp.divider;
-    const colorSchemeForTokens = camelCase($colorScheme);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
     const defaultSpacing =
       cmpTokens.space.margin[$vertical ? 'vertical' : 'base'];
     const spacing = $margin

diff --git a/packages/core/src/components/Panel/helpers.ts b/packages/core/src/components/Panel/helpers.ts
@@ -3,7 +3,7 @@ import { css, DefaultTheme } from 'styled-components';
 
 import type { BoxProps } from '../Box';
 import { pseudoElementOverlayMixin } from '../../styled';
-import { camelCase } from 'lodash';
+import { getTokenKeyFromColorScheme } from '../../helpers';
 
 export interface PanelMixinProps
   extends Pick<BoxProps, 'display' | 'elevation'> {
@@ -19,7 +19,7 @@ export interface PanelMixinProps
 export const panelMixin =
   (theme: DefaultTheme) =>
   ({ bordered, colorScheme, display, elevation }: PanelMixinProps) => {
-    const elevationForTokens = camelCase(elevation);
+    const elevationForTokens = getTokenKeyFromColorScheme(elevation);
     const tokens = theme.cmp.panel;
     const borderColor = tokens.color.border[elevationForTokens];
     const borderWidth = tokens.shape.borderSize;

diff --git a/packages/core/src/components/Partitions/components/PartitionsItem/StyledPartitionsItem.tsx b/packages/core/src/components/Partitions/components/PartitionsItem/StyledPartitionsItem.tsx
@@ -1,8 +1,7 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import type { IPartitionsItem, TPartitionsSize } from '../../declarations';
-import { isValidColor } from '../../../../helpers';
+import { getTokenKeyFromColorScheme, isValidColor } from '../../../../helpers';
 
 export interface StyledPartitionsItemProps {
   /** The size of the partition item. */
@@ -16,7 +15,7 @@ export interface StyledPartitionsItemProps {
 export const StyledPartitionsItem = styled.li<StyledPartitionsItemProps>`
   transition: all 0.15s ease;
   background-color: ${({ $color, theme }) => {
-    const colorSchemeForTokens = camelCase($color);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($color);
     return isValidColor($color)
       ? $color
       : theme.cmp.partitions.color.background[colorSchemeForTokens];

diff --git a/packages/core/src/components/SelectControl/SelectControl.tsx b/packages/core/src/components/SelectControl/SelectControl.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { get } from 'lodash';
 import {
   CSSObjectWithLabel,
   GroupBase,
@@ -134,7 +133,7 @@ export const SelectControl = <
       // react-select will be constantly changing the state and re-rendering
       // all the selects, even the closed ones.
       ev != null &&
-      get(ev, 'srcElement.classList') != null &&
+      ev?.srcElement?.classList != null &&
       ev.srcElement.getElementsByClassName(
         `${rest.classNamePrefix}__control--menu-is-open`,
       ).length &&

diff --git a/packages/core/src/components/Tag/components/TagContainer/StyledTagContainer.ts b/packages/core/src/components/Tag/components/TagContainer/StyledTagContainer.ts
@@ -1,8 +1,11 @@
 import styled, { css } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import { typoMixin } from '../../../../styled';
-import { getAccTextColor, isValidColor } from '../../../../helpers';
+import {
+  getAccTextColor,
+  getTokenKeyFromColorScheme,
+  isValidColor,
+} from '../../../../helpers';
 import type { ITag } from '../../declarations';
 
 export interface StyledTagContainerProps {
@@ -22,7 +25,7 @@ export const StyledTagContainer = styled.span<StyledTagContainerProps>`
     $size = 'md',
     theme,
   }) => {
-    const colorSchemeForTokens = camelCase($colorScheme);
+    const colorSchemeForTokens = getTokenKeyFromColorScheme($colorScheme);
 
     const isBlendColorScheme =
       $colorScheme === 'blend-base' || $colorScheme === 'blend-inverse';

diff --git a/packages/core/src/helpers/color/index.ts b/packages/core/src/helpers/color/index.ts
@@ -1,4 +1,5 @@
 export * from './accessibility';
 export * from './colors';
 export * from './getters';
+export * from './tokens';
 export * from './validation';
diff --git a/packages/core/src/helpers/color/tokens.test.ts b/packages/core/src/helpers/color/tokens.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'vitest';
+
+import { getTokenKeyFromColorScheme } from './tokens';
+
+describe('helpers', () => {
+  describe('color', () => {
+    describe('tokens', () => {
+      const cases: [string, string, string][] = [
+        ['test', 'test', 'test'],
+        ['test-test', 'test-test', 'testTest'],
+      ];
+
+      test.each(cases)('%s', (_title, colorScheme, expected) => {
+        expect(getTokenKeyFromColorScheme(colorScheme)).toBe(expected);
+      });
+    });
+  });
+});
diff --git a/packages/core/src/helpers/color/tokens.ts b/packages/core/src/helpers/color/tokens.ts
@@ -0,0 +1,9 @@
+// colorScheme could be 'blend-base', 'data-green', ...
+// and in tokens the colorSchemes are 'blendBase', 'dataGreen', ...
+export const getTokenKeyFromColorScheme = (colorScheme: string) =>
+  colorScheme
+    .split('-')
+    .map((chunk, index) =>
+      index === 0 ? chunk : `${chunk[0].toUpperCase()}${chunk.slice(1)}`,
+    )
+    .join('');
diff --git a/packages/core/src/helpers/icon/color.ts b/packages/core/src/helpers/icon/color.ts
@@ -1,8 +1,8 @@
 import { DefaultTheme } from 'styled-components';
-import { camelCase } from 'lodash';
 
 import { isValidColor } from '../color';
 import type { TAllColorScheme } from '../../declarations';
+import { getTokenKeyFromColorScheme } from '../color/tokens';
 
 export const getIconColorSchemeToken = ({
   colorScheme,
@@ -11,7 +11,7 @@ export const getIconColorSchemeToken = ({
   colorScheme: TAllColorScheme;
   theme: DefaultTheme;
 }) => {
-  const colorSchemeForTokens = camelCase(colorScheme);
+  const colorSchemeForTokens = getTokenKeyFromColorScheme(colorScheme);
   return theme.cmp.icon.color.fill[colorSchemeForTokens];
 };
 

diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
@@ -21,7 +21,6 @@ export default defineConfig({
         'react-dom/server',
         'react/jsx-runtime',
         'react-window',
-        'lodash',
         'react-select',
         'react-select/creatable',
         '@dnd-kit/core',

diff --git a/packages/table/vite.config.ts b/packages/table/vite.config.ts
@@ -27,7 +27,6 @@ export default defineConfig({
         'react-dom',
         'react/jsx-runtime',
         'styled-components',
-        'lodash',
         'date-fns',
         'date-fns-tz',
         'date-fns/locale',