From 9f9f1a30bac5428f13ec8639ca0410704be99ab8 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Mon, 28 Oct 2024 15:21:04 +1100 Subject: [PATCH 1/3] deps: Remove lodash dependency --- .changeset/grumpy-knives-suffer.md | 5 + packages/braid-design-system/package.json | 6 +- .../src/lib/css/responsiveStyle.ts | 9 +- .../src/lib/playroom/playroomState.tsx | 2 +- .../src/lib/stories/all.stories.tsx | 12 +- .../src/lib/themes/baseTokens/apac.ts | 2 +- .../src/lib/themes/makeRuntimeTokens.ts | 2 +- .../src/lib/themes/makeVanillaTheme.ts | 2 +- .../src/lib/themes/themeUtils.ts | 3 +- .../src/lib/utils/mapValues.ts | 12 ++ packages/generate-component-docs/package.json | 6 +- .../src/contractSerialiser.ts | 2 +- .../generate-component-docs/src/generate.ts | 2 +- pnpm-lock.yaml | 147 ++++++++++++++---- site/package.json | 8 +- site/src/App/App.tsx | 18 +-- site/src/App/Code/Code.tsx | 2 +- site/src/App/DocNavigation/DocProps.tsx | 2 +- .../src/App/SideNavigation/SideNavigation.tsx | 7 +- site/src/App/navigationHelpers.ts | 13 +- site/src/App/routes/gallery/Gallery.tsx | 5 +- .../useSourceFromExample.ts | 2 +- site/src/render.tsx | 10 +- 23 files changed, 201 insertions(+), 78 deletions(-) create mode 100644 .changeset/grumpy-knives-suffer.md create mode 100644 packages/braid-design-system/src/lib/utils/mapValues.ts diff --git a/.changeset/grumpy-knives-suffer.md b/.changeset/grumpy-knives-suffer.md new file mode 100644 index 00000000000..62b905a5ff4 --- /dev/null +++ b/.changeset/grumpy-knives-suffer.md @@ -0,0 +1,5 @@ +--- +'braid-design-system': patch +--- + +Remove lodash dependency diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json index 10032eaf254..dc82070278e 100644 --- a/packages/braid-design-system/package.json +++ b/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", diff --git a/packages/braid-design-system/src/lib/css/responsiveStyle.ts b/packages/braid-design-system/src/lib/css/responsiveStyle.ts index a5765f6b61b..4691611f119 100644 --- a/packages/braid-design-system/src/lib/css/responsiveStyle.ts +++ b/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; 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': { diff --git a/packages/braid-design-system/src/lib/playroom/playroomState.tsx b/packages/braid-design-system/src/lib/playroom/playroomState.tsx index 1a621df1818..23b20779fbc 100644 --- a/packages/braid-design-system/src/lib/playroom/playroomState.tsx +++ b/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; diff --git a/packages/braid-design-system/src/lib/stories/all.stories.tsx b/packages/braid-design-system/src/lib/stories/all.stories.tsx index a06daed9aa5..957de5f44bc 100644 --- a/packages/braid-design-system/src/lib/stories/all.stories.tsx +++ b/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,12 @@ 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) + .map((theme) => theme.webFonts) + .flat() + .map((font) => font.linkTag), ), ).join(''); document.head.innerHTML += webFontLinkTags; @@ -109,7 +111,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; } diff --git a/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts index 62244979aa1..0ef495eae89 100644 --- a/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts +++ b/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'; diff --git a/packages/braid-design-system/src/lib/themes/makeRuntimeTokens.ts b/packages/braid-design-system/src/lib/themes/makeRuntimeTokens.ts index 95f12121fc2..12bb125d379 100644 --- a/packages/braid-design-system/src/lib/themes/makeRuntimeTokens.ts +++ b/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'; diff --git a/packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts b/packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts index e19f4b5ef39..bc8178af980 100644 --- a/packages/braid-design-system/src/lib/themes/makeVanillaTheme.ts +++ b/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'; diff --git a/packages/braid-design-system/src/lib/themes/themeUtils.ts b/packages/braid-design-system/src/lib/themes/themeUtils.ts index ba9fcb200d3..c98acdfd0dc 100644 --- a/packages/braid-design-system/src/lib/themes/themeUtils.ts +++ b/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': { diff --git a/packages/braid-design-system/src/lib/utils/mapValues.ts b/packages/braid-design-system/src/lib/utils/mapValues.ts new file mode 100644 index 00000000000..634417c0c62 --- /dev/null +++ b/packages/braid-design-system/src/lib/utils/mapValues.ts @@ -0,0 +1,12 @@ +export function mapValues( + 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, + ); +} diff --git a/packages/generate-component-docs/package.json b/packages/generate-component-docs/package.json index edfa67450a5..7f8e63ffa2b 100644 --- a/packages/generate-component-docs/package.json +++ b/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" } } diff --git a/packages/generate-component-docs/src/contractSerialiser.ts b/packages/generate-component-docs/src/contractSerialiser.ts index 36135ade98f..9a853c629bb 100644 --- a/packages/generate-component-docs/src/contractSerialiser.ts +++ b/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 = { diff --git a/packages/generate-component-docs/src/generate.ts b/packages/generate-component-docs/src/generate.ts index 0a545c829cd..607b9a98e2a 100644 --- a/packages/generate-component-docs/src/generate.ts +++ b/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']; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b539348de4..caab2eac4de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -212,9 +212,12 @@ importers: is-mobile: specifier: ^4.0.0 version: 4.0.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 + lodash.curry: + specifier: ^4.1.1 + version: 4.1.1 + lodash.merge: + specifier: ^4.6.2 + version: 4.6.2 polished: specifier: ^4.1.0 version: 4.2.2 @@ -282,9 +285,12 @@ importers: '@types/jest': specifier: ^29.0.0 version: 29.1.2 - '@types/lodash': - specifier: ^4.14.168 - version: 4.14.191 + '@types/lodash.curry': + specifier: ^4.1.9 + version: 4.1.9 + '@types/lodash.merge': + specifier: ^4.6.9 + version: 4.6.9 '@types/node': specifier: ^18.13.0 version: 18.13.0 @@ -452,9 +458,12 @@ importers: fs-extra: specifier: ^10.1.0 version: 10.1.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 + lodash.isequal: + specifier: ^4.5.0 + version: 4.5.0 + lodash.sortby: + specifier: ^4.7.0 + version: 4.7.0 tsx: specifier: ^4.7.0 version: 4.17.0 @@ -465,9 +474,12 @@ importers: '@types/fs-extra': specifier: ^9.0.13 version: 9.0.13 - '@types/lodash': - specifier: ^4.14.168 - version: 4.14.191 + '@types/lodash.isequal': + specifier: ^4.5.8 + version: 4.5.8 + '@types/lodash.sortby': + specifier: ^4.7.9 + version: 4.7.9 packages/source.macro: dependencies: @@ -508,9 +520,15 @@ importers: '@braid-design-system/source.macro': specifier: workspace:* version: link:../packages/source.macro - '@types/lodash': - specifier: ^4.14.168 - version: 4.14.191 + '@types/lodash.chunk': + specifier: ^4.2.9 + version: 4.2.9 + '@types/lodash.memoize': + specifier: ^4.1.9 + version: 4.1.9 + '@types/lodash.partition': + specifier: ^4.6.9 + version: 4.6.9 '@types/react': specifier: ^18.3.3 version: 18.3.3 @@ -550,9 +568,15 @@ importers: didyoumean2: specifier: ^6.0.1 version: 6.0.1 - lodash: - specifier: ^4.17.21 - version: 4.17.21 + lodash.chunk: + specifier: ^4.2.0 + version: 4.2.0 + lodash.memoize: + specifier: ^4.1.2 + version: 4.1.2 + lodash.partition: + specifier: ^4.6.0 + version: 4.6.0 mini-css-extract-plugin: specifier: ^2.6.0 version: 2.7.2(webpack@5.91.0(@swc/core@1.7.14)) @@ -2823,6 +2847,27 @@ packages: '@types/loadable__server@5.12.11': resolution: {integrity: sha512-GACLW+PTT5tXZgFc+wVxICMXCFACPEws+34a75qcYG7CkLaj2nItGE0xzor57H0hpkF59wHZJalMbg7n/wGCKw==} + '@types/lodash.chunk@4.2.9': + resolution: {integrity: sha512-Z9VtFUSnmT0No/QymqfG9AGbfOA4O5qB/uyP89xeZBqDAsKsB4gQFTqt7d0pHjbsTwtQ4yZObQVHuKlSOhIJ5Q==} + + '@types/lodash.curry@4.1.9': + resolution: {integrity: sha512-QV967vSflHEza0d0IMTK7fwbl+baPBXZjcESeAHrA5eSE+EHetaggZjPpkzX1NJh4qa8DLOLScwUR+f7FN85Zg==} + + '@types/lodash.isequal@4.5.8': + resolution: {integrity: sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==} + + '@types/lodash.memoize@4.1.9': + resolution: {integrity: sha512-glY1nQuoqX4Ft8Uk+KfJudOD7DQbbEDF6k9XpGncaohW3RW4eSWBlx6AA0fZCrh40tZcQNH4jS/Oc59J6Eq+aw==} + + '@types/lodash.merge@4.6.9': + resolution: {integrity: sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==} + + '@types/lodash.partition@4.6.9': + resolution: {integrity: sha512-ANgnHyTw/C07oHr/8/jzoc1BlZZFRafAyDvc04Z8qR1IvWZpAGB8aHPUkd0UCgJWOauqoCsILhvPLXKsTc4rXQ==} + + '@types/lodash.sortby@4.7.9': + resolution: {integrity: sha512-PDmjHnOlndLS59GofH0pnxIs+n9i4CWeXGErSB5JyNFHu2cmvW6mQOaUKjG8EDPkni14IgF8NsRW8bKvFzTm9A==} + '@types/lodash@4.14.191': resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} @@ -6326,6 +6371,12 @@ packages: lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + lodash.chunk@4.2.0: + resolution: {integrity: sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==} + + lodash.curry@4.1.1: + resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==} + lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} @@ -6344,6 +6395,12 @@ packages: lodash.mergewith@4.6.2: resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==} + lodash.partition@4.6.0: + resolution: {integrity: sha512-35L3dSF3Q6V1w5j6V3NhNlQjzsRDC/pYKCTdYTmwqSib+Q8ponkAmt/PwEOq3EmI38DSCl+SkIVwLd+uSlVdrg==} + + lodash.sortby@4.7.0: + resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==} + lodash.startcase@4.4.0: resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==} @@ -12290,6 +12347,34 @@ snapshots: dependencies: '@types/react': 18.3.3 + '@types/lodash.chunk@4.2.9': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.curry@4.1.9': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.isequal@4.5.8': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.memoize@4.1.9': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.merge@4.6.9': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.partition@4.6.9': + dependencies: + '@types/lodash': 4.14.191 + + '@types/lodash.sortby@4.7.9': + dependencies: + '@types/lodash': 4.14.191 + '@types/lodash@4.14.191': {} '@types/mdast@3.0.10': @@ -14667,9 +14752,9 @@ snapshots: '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-config-prettier: 8.10.0(eslint@8.57.0) - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-cypress: 3.4.0(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@7.17.0(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(jest@29.1.2(@types/node@18.13.0))(typescript@5.5.4) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -14689,13 +14774,13 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.6(supports-color@8.1.1) enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -14706,14 +14791,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.17.0(eslint@8.57.0)(typescript@5.5.4) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -14722,7 +14807,7 @@ snapshots: eslint: 8.57.0 globals: 13.24.0 - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -14732,7 +14817,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.17.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.0 is-glob: 4.0.3 @@ -16775,6 +16860,10 @@ snapshots: lodash.camelcase@4.3.0: {} + lodash.chunk@4.2.0: {} + + lodash.curry@4.1.1: {} + lodash.debounce@4.0.8: {} lodash.deburr@4.1.0: {} @@ -16787,6 +16876,10 @@ snapshots: lodash.mergewith@4.6.2: {} + lodash.partition@4.6.0: {} + + lodash.sortby@4.7.0: {} + lodash.startcase@4.4.0: {} lodash.uniq@4.5.0: {} diff --git a/site/package.json b/site/package.json index 0a98b00989f..7a96e544772 100644 --- a/site/package.json +++ b/site/package.json @@ -23,7 +23,9 @@ "@braid-design-system/docs-ui": "workspace:*", "@braid-design-system/generate-component-docs": "workspace:*", "@braid-design-system/source.macro": "workspace:*", - "@types/lodash": "^4.14.168", + "@types/lodash.chunk": "^4.2.9", + "@types/lodash.memoize": "^4.1.9", + "@types/lodash.partition": "^4.6.9", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/react-router-dom": "^5.3.3", @@ -37,7 +39,9 @@ "date-fns": "^2.28.0", "dedent": "^1.5.3", "didyoumean2": "^6.0.1", - "lodash": "^4.17.21", + "lodash.chunk": "^4.2.0", + "lodash.memoize": "^4.1.2", + "lodash.partition": "^4.6.0", "mini-css-extract-plugin": "^2.6.0", "npm-registry-client": "^8.6.0", "panzoom": "^9.4.2", diff --git a/site/src/App/App.tsx b/site/src/App/App.tsx index f7ee3dad723..e3deea7bb56 100644 --- a/site/src/App/App.tsx +++ b/site/src/App/App.tsx @@ -3,7 +3,6 @@ import 'braid-src/entries/reset'; import React, { StrictMode, useEffect } from 'react'; import { Route, Routes, Navigate } from 'react-router'; import { Link as ReactRouterLink } from 'react-router-dom'; -import map from 'lodash/map'; import { ThemeSettingProvider } from './ThemeSetting'; import docsTheme from 'braid-src/entries/themes/docs'; import { @@ -97,16 +96,13 @@ export const App = () => { }> } /> } /> - {map( - { - ...guides, - ...foundations, - ...examples, - }, - (routeProps, path) => ( - - ), - )} + {Object.entries({ + ...guides, + ...foundations, + ...examples, + }).map(([path, routeProps]) => ( + + ))} }> } /> diff --git a/site/src/App/Code/Code.tsx b/site/src/App/Code/Code.tsx index f6fea9dcf1f..74c4ce99400 100644 --- a/site/src/App/Code/Code.tsx +++ b/site/src/App/Code/Code.tsx @@ -1,7 +1,7 @@ import React, { type ReactElement, useState, useEffect, useRef } from 'react'; import copy from 'copy-to-clipboard'; import dedent from 'dedent'; -import memoize from 'lodash/memoize'; +import memoize from 'lodash.memoize'; import prettier from 'prettier/standalone'; import reactElementToJsxString from 'react-element-to-jsx-string'; import typescriptParser from 'prettier/parser-typescript'; diff --git a/site/src/App/DocNavigation/DocProps.tsx b/site/src/App/DocNavigation/DocProps.tsx index bdd5cab71ba..58697214416 100644 --- a/site/src/App/DocNavigation/DocProps.tsx +++ b/site/src/App/DocNavigation/DocProps.tsx @@ -1,5 +1,5 @@ import React, { Fragment, useContext, useMemo } from 'react'; -import partition from 'lodash/partition'; +import partition from 'lodash.partition'; import { Box, Text, diff --git a/site/src/App/SideNavigation/SideNavigation.tsx b/site/src/App/SideNavigation/SideNavigation.tsx index 064735c2e29..cd4e3f4d8b1 100644 --- a/site/src/App/SideNavigation/SideNavigation.tsx +++ b/site/src/App/SideNavigation/SideNavigation.tsx @@ -1,5 +1,4 @@ import React, { useMemo } from 'react'; -import map from 'lodash/map'; import guides from '../routes/guides'; import foundations from '../routes/foundations'; import examples from '../routes/examples'; @@ -73,7 +72,7 @@ export const SideNavigation = ({ onSelect }: SideNavigationProps) => { ({ + items={Object.entries(guides).map(([path, guide]) => ({ name: guide.title, badge: guide.badge, path, @@ -84,7 +83,7 @@ export const SideNavigation = ({ onSelect }: SideNavigationProps) => { ({ + items={Object.entries(foundations).map(([path, foundation]) => ({ name: foundation.title, badge: foundation.badge, path, @@ -95,7 +94,7 @@ export const SideNavigation = ({ onSelect }: SideNavigationProps) => { ({ + items={Object.entries(examples).map(([path, example]) => ({ name: example.title, badge: example.badge, path, diff --git a/site/src/App/navigationHelpers.ts b/site/src/App/navigationHelpers.ts index fe93bdcd90e..3422d5e9cc4 100644 --- a/site/src/App/navigationHelpers.ts +++ b/site/src/App/navigationHelpers.ts @@ -1,4 +1,3 @@ -import groupBy from 'lodash/groupBy'; import * as components from 'braid-src/lib/components'; import * as testComponents from 'braid-src/entries/test'; import * as css from 'braid-src/entries/css'; @@ -93,9 +92,15 @@ export const documentedComponents = documentedComponentNames.map((name) => { return { name, ...docs }; }); -export const categorisedComponents = groupBy( - documentedComponents, - (component) => component.category, +export const categorisedComponents = documentedComponents.reduce( + (acc, component) => ({ + ...acc, + [component.category]: [...(acc[component.category] || []), component], + }), + {} as Record< + (typeof documentedComponents)[number]['category'], + Array<(typeof documentedComponents)[number]> + >, ); const getComponentNameFromFilename = (filename: string) => { diff --git a/site/src/App/routes/gallery/Gallery.tsx b/site/src/App/routes/gallery/Gallery.tsx index b9e9248d13e..e57cc2f1393 100644 --- a/site/src/App/routes/gallery/Gallery.tsx +++ b/site/src/App/routes/gallery/Gallery.tsx @@ -13,7 +13,8 @@ import { useRecoilValue, useSetRecoilState, } from 'recoil'; -import { chunk, memoize, range } from 'lodash'; +import chunk from 'lodash.chunk'; +import memoize from 'lodash.memoize'; import copy from 'copy-to-clipboard'; import panzoom from 'panzoom'; @@ -386,7 +387,7 @@ const Stage = ({ setName, jumpTo, title }: StageProps) => { {items.map((row, index) => ( - {range(rowLength).map((item) => ( + {Array.from({ length: rowLength }).map((_, item) => ( {}; export const useSourceFromExample = ( id: string, { Example, code: codeOverride }: Pick, diff --git a/site/src/render.tsx b/site/src/render.tsx index 715bfeb6e39..ae7e1f52a9d 100644 --- a/site/src/render.tsx +++ b/site/src/render.tsx @@ -4,7 +4,6 @@ import { renderToString } from 'react-dom/server'; import { StaticRouter } from 'react-router-dom/server'; import { HelmetProvider } from 'react-helmet-async'; import dedent from 'dedent'; -import { uniq, flatten, values } from 'lodash'; import { App } from './App/App'; import type { RenderContext } from './types'; import { ConfigProvider } from './App/ConfigContext'; @@ -81,9 +80,12 @@ const skuRender: Render = { }), renderDocument: ({ headTags, bodyTags, app: { html, helmetContext } }) => { - const webFontLinkTags = uniq( - flatten(values(themes).map((theme) => theme.webFonts)).map( - (font) => font.linkTag, + const webFontLinkTags = Array.from( + new Set( + Object.values(themes) + .map((theme) => theme.webFonts) + .flat() + .map((font) => font.linkTag), ), ).join(''); const { helmet } = helmetContext; From 283dac8b55b8d7cc03e4d1378ca8fbd518b701d6 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Tue, 29 Oct 2024 08:35:36 +1100 Subject: [PATCH 2/3] Update snapshot --- .../src/__snapshots__/contract.test.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index b874b0bfe8b..e3a1ae17f22 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -2032,7 +2032,7 @@ exports[`BraidProvider 1`] = ` | FunctionComponent | { readonly __forwardRef__: ForwardRefExoticComponent>; } 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<...>; } }, } `; From 6617401944bb9e3e543ce5b2d83af3efe35ba64b Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Tue, 29 Oct 2024 08:53:25 +1100 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Adam Skoufis --- packages/braid-design-system/src/lib/stories/all.stories.tsx | 3 +-- site/src/render.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/braid-design-system/src/lib/stories/all.stories.tsx b/packages/braid-design-system/src/lib/stories/all.stories.tsx index 957de5f44bc..c42bc523fb6 100644 --- a/packages/braid-design-system/src/lib/stories/all.stories.tsx +++ b/packages/braid-design-system/src/lib/stories/all.stories.tsx @@ -15,8 +15,7 @@ import { darkMode } from '../css/atoms/sprinkles.css'; const webFontLinkTags = Array.from( new Set( Object.values(themes) - .map((theme) => theme.webFonts) - .flat() + .flatMap((theme) => theme.webFonts) .map((font) => font.linkTag), ), ).join(''); diff --git a/site/src/render.tsx b/site/src/render.tsx index ae7e1f52a9d..978dcf7deee 100644 --- a/site/src/render.tsx +++ b/site/src/render.tsx @@ -83,8 +83,7 @@ const skuRender: Render = { const webFontLinkTags = Array.from( new Set( Object.values(themes) - .map((theme) => theme.webFonts) - .flat() + .flatMap((theme) => theme.webFonts) .map((font) => font.linkTag), ), ).join('');