perf: Cherry-pick Lodash imports for smaller bundles

Use Cherry-picked Lodash imports for smaller bundles

.eslintrc.js

@@ -48,5 +48,12 @@ module.exports = {
         '@typescript-eslint/restrict-template-expressions': 'off',
       },
     },
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      plugins: ['lodash'],
+      rules: {
+        'lodash/import-scope': ['error', 'method'],
+      },
+    },
   ],
 };

jest.preset.js

@@ -1,5 +1,5 @@
 const nxPreset = require('@nx/jest/preset').default;
-const { kebabCase } = require('lodash');
+const kebabCase = require('lodash/kebabCase');
 
 const targetProject = kebabCase(
   process.env.NX_TASK_TARGET_PROJECT || 'unknown'

package.json

@@ -25,7 +25,7 @@
     "@types/classnames": "2.2.10",
     "@types/invariant": "2.2.29",
     "@types/konami-code-js": "^0.8.0",
-    "@types/lodash": "4.14.168",
+    "@types/lodash": "4.17.0",
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@types/react-test-renderer": "^17.0.1",
@@ -70,6 +70,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
+    "eslint-plugin-lodash": "^7.4.0",
     "onchange": "^7.0.2",
     "webpack": "4.46.0"
   },

packages/gamut-patterns/pattern-template.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const { startCase } = require('lodash');
+const startCase = require('lodash/startCase');
 
 function patternTemplate(api, opts, { jsx }) {
   const template = api.template.smart({ plugins: ['jsx', 'typescript'] });

packages/gamut-styles/src/ColorMode.tsx

@@ -6,7 +6,8 @@ import {
 } from '@codecademy/variance';
 import { CSSObject, Theme, ThemeProvider, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { mapValues, pick } from 'lodash';
+import mapValues from 'lodash/mapValues';
+import pick from 'lodash/pick';
 import {
   ComponentProps,
   createContext,

packages/gamut-styles/src/__tests__/Background.test.tsx

@@ -1,7 +1,7 @@
 import { matchers } from '@emotion/jest';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { setupRtl as setupRtlBase } from 'component-test-setup';
-import { overArgs } from 'lodash';
+import overArgs from 'lodash/overArgs';
 import * as React from 'react';
 
 import { Background } from '../Background';

packages/gamut-styles/src/utilities/themed.ts

@@ -1,6 +1,6 @@
 import { Path, PathValue } from '@codecademy/variance';
 import { Theme } from '@emotion/react';
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 /**
  * Creates a function that will look up the a design token from the `theme` context of a
@@ -19,5 +19,5 @@ export type SafeThemeValues = Omit<
 export function themed<P extends Path<SafeThemeValues>>(
   path: P
 ): (props: { theme: Theme }) => PathValue<SafeThemeValues, P> {
-  return ({ theme }) => get(theme, path);
+  return ({ theme }) => get(theme, path as string);
 }

packages/gamut-tests/src/index.tsx

@@ -3,7 +3,7 @@ import {
   setupEnzyme as setupEnzymeBase,
   setupRtl as setupRtlBase,
 } from 'component-test-setup';
-import { overArgs } from 'lodash';
+import overArgs from 'lodash/overArgs';
 import * as React from 'react';
 
 // See https://www.notion.so/codecademy/Frontend-Unit-Tests-1cbf4e078a6647559b4583dfb6d3cb18

packages/gamut/src/ButtonDeprecated/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import cx from 'classnames';
-import { hasIn } from 'lodash';
+import hasIn from 'lodash/hasIn';
 import { ReactNode } from 'react';
 import * as React from 'react';
 

packages/gamut/src/ConnectedForm/utils.tsx

@@ -1,4 +1,6 @@
-import { isNull, isUndefined, omit } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+import omit from 'lodash/omit';
 import {
   ChangeEvent,
   ChangeEventHandler,

packages/gamut/src/DataList/Controls/FilterControl.tsx

@@ -1,7 +1,7 @@
 import { FilterIcon } from '@codecademy/gamut-icons';
 import { states } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 import { useRef, useState } from 'react';
 import * as React from 'react';
 

packages/gamut/src/DataList/hooks/useListControls.tsx

@@ -1,4 +1,4 @@
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 
 import {

packages/gamut/src/DataList/hooks/useLocalQuery.tsx

@@ -1,4 +1,4 @@
-import { orderBy } from 'lodash';
+import orderBy from 'lodash/orderBy';
 import { useCallback, useMemo, useState } from 'react';
 
 import { ColumnConfig, IdentifiableKeys, OnQueryChange, Query } from '..';

packages/gamut/src/Form/utils.tsx

@@ -1,4 +1,5 @@
-import { each, isObject } from 'lodash';
+import each from 'lodash/each';
+import isObject from 'lodash/isObject';
 
 import {
   ExtendedOption,

packages/gamut/src/GridForm/GridFormInputGroup/GridFormRadioGroupInput/index.tsx

@@ -1,4 +1,4 @@
-import { isString } from 'lodash';
+import isString from 'lodash/isString';
 import * as React from 'react';
 import { UseFormReturn } from 'react-hook-form';
 

packages/gamut/src/GridForm/utils.ts

@@ -1,4 +1,4 @@
-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 
 import { GridFormField } from './types';
 

packages/gamut/src/Layout/LayoutGrid.tsx

@@ -1,7 +1,7 @@
 import { pxRem, styledOptions, system, theme } from '@codecademy/gamut-styles';
 import { StyleProps, variance } from '@codecademy/variance';
 import styled from '@emotion/styled';
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 
 const columns = 12;
 

packages/gamut/src/List/List.tsx

@@ -1,4 +1,4 @@
-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 import { ComponentProps, forwardRef, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 

packages/gamut/src/Markdown/libs/overrides/index.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import HtmlToReact from 'html-to-react';
 import camelCaseMap from 'html-to-react/lib/camel-case-attribute-names';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import * as React from 'react';
 
 // eslint-disable-next-line gamut/no-css-standalone

packages/gamut/src/Markdown/libs/overrides/utils.tsx

@@ -1,4 +1,4 @@
-import { find } from 'lodash';
+import find from 'lodash/find';
 
 import { HTMLToReactNode } from '.';
 

packages/gamut/src/utils/__tests__/omitProps.test.tsx

@@ -1,4 +1,4 @@
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 
 import { omitProps } from '../omitProps';
 

packages/gamut/src/utils/omitProps.tsx

@@ -1,5 +1,7 @@
 import invariant from 'invariant';
-import { AnyKindOfDictionary, isPlainObject, omit, without } from 'lodash';
+import isPlainObject from 'lodash/isPlainObject';
+import omit from 'lodash/omit';
+import without from 'lodash/without';
 
 export type RemoveFrom<TContainer, TRemoved> = {
   [P in keyof TContainer]: P extends keyof TRemoved ? never : TContainer[P];
@@ -28,7 +30,7 @@ export function omitProps<TOmittedProps extends {}, TProps extends {}>(
   const dataProps = propsToOmit.filter((p) => /^data-.*/.exec(p));
 
   return omit(
-    (props as unknown) as AnyKindOfDictionary,
+    (props as unknown) as Record<string | number, unknown>,
     without(propsToOmit, 'children', 'className', ...dataProps)
   ) as RemoveFrom<TOmittedProps, TProps>;
 }

packages/styleguide/.storybook/addons/system/components/PropsTable.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, useMemo } from 'react';
 import * as React from 'react';
 import { PROP_GROUPS } from '../propMeta';
 import { ArgsTable } from '@storybook/addon-docs/blocks';
-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 
 import {
   PropItem,

packages/styleguide/.storybook/addons/system/components/useSystemProps.ts

@@ -1,5 +1,5 @@
 import { useReducer, useMemo, useContext } from 'react';
-import { intersection } from 'lodash';
+import intersection from 'lodash/intersection';
 import { DocsContext } from '@storybook/addon-docs/blocks';
 import { ALL_PROPS, PropGroups, PROP_GROUPS } from '../propMeta';
 

packages/styleguide/.storybook/addons/system/enhancers.ts

@@ -1,6 +1,10 @@
-import { mapValues } from 'lodash/fp';
+import mapValues from 'lodash/fp/mapValues';
 import { ArgTypesEnhancer } from '@storybook/client-api';
-import { hasIn, isObject, isString, kebabCase, merge } from 'lodash';
+import hasIn from 'lodash/hasIn';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import kebabCase from 'lodash/kebabCase';
+import merge from 'lodash/merge';
 import { ALL_PROPS, PROP_MAP, PROP_GROUPS } from './propMeta';
 import { theme } from '@codecademy/gamut-styles';
 

packages/styleguide/.storybook/components/Docs/DocsContainer.tsx

@@ -19,7 +19,7 @@ import {
 import { NavigationProvider } from '../Navigation/NavigationProvider';
 import { useEffect } from 'react';
 import * as React from 'react';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { Link } from '../Markdown/Elements';
 import { coreTheme } from '@codecademy/gamut-styles/src/themes/core';
 

packages/styleguide/.storybook/components/Navigation/NavigationProvider.tsx

@@ -1,5 +1,6 @@
 import { DocsContext } from '@storybook/addon-docs/blocks';
-import { get, mapValues } from 'lodash';
+import get from 'lodash/get';
+import mapValues from 'lodash/mapValues';
 import { useContext, createContext, useMemo } from 'react';
 import * as React from 'react';
 import {

packages/styleguide/.storybook/components/Navigation/utils.ts

@@ -1,6 +1,13 @@
 import { DocsContextProps } from '@storybook/addon-docs/blocks';
-import { set, head, keyBy, isEmpty, tail, update, assign } from 'lodash';
-import { merge } from 'lodash/fp';
+import set from 'lodash/set';
+import head from 'lodash/head';
+import keyBy from 'lodash/keyBy';
+import isEmpty from 'lodash/isEmpty';
+import tail from 'lodash/tail';
+import update from 'lodash/update';
+import assign from 'lodash/assign';
+
+import merge from 'lodash/fp/merge';
 import {
   ComponentRegistry,
   ContentItem,

packages/styleguide/stories/Atoms/Icons/constants.tsx

@@ -1,6 +1,8 @@
 // eslint-disable-next-line gamut/import-paths
 import * as icons from '@codecademy/gamut-icons/src/icons/regular';
-import { keys, omit, pick } from 'lodash';
+import keys from 'lodash/keys';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
 
 export const ICONS = icons;
 

packages/styleguide/stories/Foundations/System/tables.tsx

@@ -2,7 +2,7 @@
 
 import { Anchor } from '@codecademy/gamut/src';
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 
 import { Code, LinkTo } from '~styleguide/blocks';
 

packages/styleguide/stories/Molecules/Tip/DeprecatedToolTip.stories.mdx

@@ -10,7 +10,7 @@ import { InfoCircleIcon } from '@codecademy/gamut-icons/src';
 import title from '@codecademy/macros/lib/title.macro';
 import { PropsTable } from '@codecademy/storybook-addon-variance';
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import { upperFirst } from 'lodash';
+import upperFirst from 'lodash/upperFirst';
 
 import { LinkTo } from '~styleguide/blocks';
 

packages/styleguide/stories/Organisms/Lists & Tables/examples.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   useLocalQuery,
 } from '@codecademy/gamut';
-import { uniq } from 'lodash';
+import uniq from 'lodash/uniq';
 import { useCallback, useMemo, useState } from 'react';
 
 const crew = [

packages/styleguide/stories/Typography/Anchor.stories.mdx

@@ -2,7 +2,7 @@ import { Anchor, Box, Column, LayoutGrid, Text } from '@codecademy/gamut/src';
 import { Background } from '@codecademy/gamut-styles/src';
 import title from '@codecademy/macros/lib/title.macro';
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import { startCase } from 'lodash';
+import startCase from 'lodash/startCase';
 
 import { LinkTo, PropsTable } from '~styleguide/blocks';
 

packages/variance/src/core.ts

@@ -1,4 +1,9 @@
-import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
+import get from 'lodash/get';
+import identity from 'lodash/identity';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isUndefined from 'lodash/isUndefined';
+import merge from 'lodash/merge';
 
 import { createScaleLookup } from './scales/createScaleLookup';
 import {

packages/variance/src/createTheme/createTheme.test.ts

@@ -1,4 +1,4 @@
-import { mapValues } from 'lodash';
+import mapValues from 'lodash/mapValues';
 
 import { createTheme } from './createTheme';
 

packages/variance/src/createTheme/createTheme.ts

@@ -1,4 +1,5 @@
-import { mapValues, merge } from 'lodash';
+import mapValues from 'lodash/mapValues';
+import merge from 'lodash/merge';
 
 import { CSSObject } from '../types/props';
 import { AbstractTheme } from '../types/theme';

packages/variance/src/scales/createScaleLookup.ts

@@ -1,4 +1,7 @@
-import { get, isArray, isObject, isString } from 'lodash';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 
 import { Prop } from '../types/config';
 import { ThemeProps } from '../types/props';

packages/variance/src/transforms/transformSize.ts

@@ -1,4 +1,4 @@
-import { isNumber } from 'lodash';
+import isNumber from 'lodash/isNumber';
 
 export const percentageOrAbsolute = (coordinate: number) => {
   if (coordinate === 0) {

packages/variance/src/utils/flattenScale.ts

@@ -1,4 +1,4 @@
-import { isObject } from 'lodash';
+import isObject from 'lodash/isObject';
 
 /**
  * Returns an exhaustive list of all possible paths of an object T for keys K.

packages/variance/src/utils/getStaticProperties.ts

@@ -1,4 +1,5 @@
-import { keys, pick } from 'lodash';
+import keys from 'lodash/keys';
+import pick from 'lodash/pick';
 
 export const getStaticCss = (
   props: Record<string, any>,

packages/variance/src/utils/responsive.ts

@@ -1,4 +1,5 @@
-import { intersection, omit } from 'lodash';
+import intersection from 'lodash/intersection';
+import omit from 'lodash/omit';
 
 import { AbstractPropTransformer } from '../types/config';
 import {

packages/variance/src/utils/serializeTokens.ts

@@ -1,5 +1,6 @@
 import { Theme } from '@emotion/react';
-import { isObject, merge } from 'lodash';
+import isObject from 'lodash/isObject';
+import merge from 'lodash/merge';
 
 import { CSSObject } from '../types/props';