deps: Remove lodash dependency (#1639)

.changeset/grumpy-knives-suffer.md

@@ -0,0 +1,5 @@
+---
+'braid-design-system': patch
+---
+
+Remove lodash dependency

packages/braid-design-system/package.json

@@ -199,7 +199,8 @@
     "dedent": "^1.5.3",
     "gradient-parser": "^1.0.0",
     "is-mobile": "^4.0.0",
-    "lodash": "^4.17.21",
+    "lodash.curry": "^4.1.1",
+    "lodash.merge": "^4.6.2",
     "polished": "^4.1.0",
     "react-focus-lock": "^2.9.7",
     "react-is": "^18.2.0",
@@ -224,7 +225,8 @@
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^29.0.0",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash.curry": "^4.1.9",
+    "@types/lodash.merge": "^4.6.9",
     "@types/node": "^18.13.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

packages/braid-design-system/src/lib/css/responsiveStyle.ts

@@ -1,12 +1,13 @@
-import omit from 'lodash/omit';
-import mapValues from 'lodash/mapValues';
+import { mapValues } from '../utils/mapValues';
 import type { StyleRule } from '@vanilla-extract/css';
 import { breakpoints } from './breakpoints';
 
+const { mobile: _, ...breakpointsAboveMobile } = breakpoints;
+
 type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
 
 export const breakpointQuery = mapValues(
-  omit(breakpoints, 'mobile'),
+  breakpointsAboveMobile,
   (bp) => `screen and (min-width: ${bp}px)`,
 );
 
@@ -37,7 +38,7 @@ export const responsiveStyle = ({
   desktop,
   wide,
 }: ResponsiveStyle): StyleRule => ({
-  ...omit(mobile, '@media'),
+  ...mobile,
   ...(tablet || desktop || wide
     ? {
         '@media': {

packages/braid-design-system/src/lib/playroom/playroomState.tsx

@@ -5,7 +5,7 @@ import React, {
   useState,
   useMemo,
 } from 'react';
-import curry from 'lodash/curry';
+import curry from 'lodash.curry';
 
 export interface StateProp {
   stateName?: string;

packages/braid-design-system/src/lib/stories/all.stories.tsx

@@ -3,7 +3,6 @@ import '../../entries/reset';
 import React, { type ReactNode, Fragment, useId } from 'react';
 import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
-import { uniq, flatten, values } from 'lodash';
 import * as themes from '../themes';
 import type { ComponentScreenshot } from 'site/types';
 import { PlayroomStateProvider } from '../playroom/playroomState';
@@ -13,9 +12,11 @@ import { BraidProvider, ToastProvider } from '../components';
 import { Box } from '../components/Box/Box';
 import { darkMode } from '../css/atoms/sprinkles.css';
 
-const webFontLinkTags = uniq(
-  flatten(values(themes).map((theme) => theme.webFonts)).map(
-    (font) => font.linkTag,
+const webFontLinkTags = Array.from(
+  new Set(
+    Object.values(themes)
+      .flatMap((theme) => theme.webFonts)
+      .map((font) => font.linkTag),
   ),
 ).join('');
 document.head.innerHTML += webFontLinkTags;
@@ -109,7 +110,7 @@ Object.keys(allStories)
   .forEach((componentName) => {
     const stories = storiesOf(componentName, module);
     const docs = allStories[componentName];
-    const storyThemes = values(themes).filter((theme) => {
+    const storyThemes = Object.values(themes).filter((theme) => {
       if (theme.name === 'docs') {
         return false;
       }

packages/braid-design-system/src/lib/themes/baseTokens/apac.ts

@@ -1,7 +1,7 @@
 import robotoMetrics from '@capsizecss/metrics/roboto';
 import type { DeepPartial } from 'utility-types';
 import { darken, lighten, rgba, saturate } from 'polished';
-import merge from 'lodash/merge';
+import merge from 'lodash.merge';
 import { palette } from '../../color/palette';
 import { type BraidTokens, extractFontMetricsForTheme } from '../tokenType';
 

packages/braid-design-system/src/lib/themes/makeRuntimeTokens.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues';
+import { mapValues } from '../utils/mapValues';
 
 import { isLight } from '../utils';
 import type { BraidTokens } from './tokenType';

packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues';
+import { mapValues } from '../utils/mapValues';
 import { getCapHeight, precomputeValues } from '@capsizecss/core';
 
 import type { BraidTokens, TextDefinition } from './tokenType';

packages/braid-design-system/src/lib/themes/themeUtils.ts

@@ -1,5 +1,4 @@
 import type { StyleRule } from '@vanilla-extract/css';
-import omit from 'lodash/omit';
 import type { Breakpoint } from '../css/breakpoints';
 
 interface RequiredTokens {
@@ -36,7 +35,7 @@ export const makeThemeUtils = (tokens: RequiredTokens) => {
     desktop,
     wide,
   }: ResponsiveStyle): StyleRule => ({
-    ...omit(mobile, '@media'),
+    ...mobile,
     ...(tablet || desktop || wide
       ? {
           '@media': {

packages/braid-design-system/src/lib/utils/mapValues.ts

@@ -0,0 +1,12 @@
+export function mapValues<T extends object, TResult>(
+  obj: T,
+  fn: (value: T[keyof T], key: keyof T) => TResult,
+) {
+  return Object.entries(obj).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [key]: fn(value, key as keyof T),
+    }),
+    {} as Record<keyof T, TResult>,
+  );
+}

packages/generate-component-docs/package.json

@@ -17,12 +17,14 @@
   "license": "MIT",
   "dependencies": {
     "fs-extra": "^10.1.0",
-    "lodash": "^4.17.21",
+    "lodash.isequal": "^4.5.0",
+    "lodash.sortby": "^4.7.0",
     "tsx": "^4.7.0",
     "typescript": "~5.5.4"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/lodash": "^4.14.168"
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.sortby": "^4.7.9"
   }
 }

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -2032,7 +2032,7 @@ exports[`BraidProvider 1`] = `
         | FunctionComponent<LinkComponentProps>
         | { readonly __forwardRef__: ForwardRefExoticComponent<LinkComponentProps & RefAttributes<HTMLAnchorElement>>; }
     styleBody?: boolean
-    theme: { vanillaTheme: string; name: string; displayName: string; legacy: boolean; background: { lightMode: string; darkMode: string; }; webFonts: { linkTag: string; }[]; space: { grid: number; space: { gutter: number; ... 7 more ...; xxxlarge: number; }; }; color: { ...; }; backgroundLightness: { ...; }; }
+    theme: { vanillaTheme: string; name: string; displayName: string; legacy: boolean; background: { lightMode: string; darkMode: string; }; webFonts: { linkTag: string; }[]; space: { grid: number; space: { gutter: number; ... 7 more ...; xxxlarge: number; }; }; color: { ...; }; backgroundLightness: Record<...>; }
 },
 }
 `;

packages/generate-component-docs/src/contractSerialiser.ts

@@ -1,4 +1,4 @@
-import sortBy from 'lodash/sortBy';
+import sortBy from 'lodash.sortby';
 import type { NormalisedPropType } from './generate';
 
 export const typeSerializer = {

packages/generate-component-docs/src/generate.ts

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import ts, { type CompilerOptions } from 'typescript';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'lodash.isequal';
 
 const MAX_DEPTH = 10;
 const aliasWhitelist = ['ClassValue'];