LG-3800: Direct lodash imports (#2196)

* fix lodash bundle

* with changeset

* better changelog

.changeset/early-timers-smash.md

@@ -0,0 +1,19 @@
+---
+'@lg-tools/storybook-decorators': patch
+'@leafygreen-ui/search-input': patch
+'@leafygreen-ui/date-picker': patch
+'@leafygreen-ui/testing-lib': patch
+'@leafygreen-ui/date-utils': patch
+'@leafygreen-ui/pagination': patch
+'@lg-tools/storybook': patch
+'@leafygreen-ui/hooks': patch
+'@leafygreen-ui/table': patch
+'@leafygreen-ui/toast': patch
+'@lg-tools/slackbot': patch
+'@lg-tools/validate': patch
+'@leafygreen-ui/lib': patch
+'@lg-tools/create': patch
+'@lg-tools/build': patch
+---
+
+Fixes `lodash` imports to use default exports of specific functions to reduce component's bundle size.

packages/date-picker/src/DatePicker.stories.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { StoryFn } from '@storybook/react';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import Button from '@leafygreen-ui/button';
 import {

packages/date-picker/src/DatePicker/DatePickerContext/DatePickerContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 
 import {
   DateType,

packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx

@@ -5,7 +5,7 @@ import React, {
   KeyboardEventHandler,
   MouseEventHandler,
 } from 'react';
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 
 import { isInvalidDateObject, isSameUTCDay } from '@leafygreen-ui/date-utils';
 import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib';

packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.stories.tsx

@@ -2,7 +2,8 @@
 import React, { useRef, useState } from 'react';
 import { Decorator, StoryFn, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { last, omit } from 'lodash';
+import last from 'lodash/last';
+import omit from 'lodash/omit';
 import MockDate from 'mockdate';
 
 import {

packages/date-picker/src/shared/components/DateInput/DateInputBox/DateInputBox.tsx

@@ -1,6 +1,6 @@
 import React, { FocusEventHandler, useEffect } from 'react';
-import { isNull } from 'lodash';
 import isEqual from 'lodash/isEqual';
+import isNull from 'lodash/isNull';
 
 import {
   isDateObject,

packages/date-picker/src/shared/components/DateInput/DateInputSegment/utils/getNewSegmentValueFromInputValue/getNewSegmentValueFromInputValue.spec.ts

@@ -1,4 +1,4 @@
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import { defaultMax, defaultMin } from '../../../../../constants';
 import { DateSegment } from '../../../../../types';

packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts

@@ -1,5 +1,6 @@
 import { useEffect, useReducer } from 'react';
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { DateType, isSameUTCDay, isValidDate } from '@leafygreen-ui/date-utils';
 import { usePrevious } from '@leafygreen-ui/hooks';

packages/date-picker/src/shared/utils/isValidValueForSegment/index.ts

@@ -1,4 +1,4 @@
-import { inRange } from 'lodash';
+import inRange from 'lodash/inRange';
 
 import { defaultMax, defaultMin } from '../../constants';
 import { DateSegment, DateSegmentValue } from '../../types';

packages/date-utils/src/getSimulatedTZDate/getSimulatedTZDate.spec.ts

@@ -1,4 +1,4 @@
-import { padStart } from 'lodash';
+import padStart from 'lodash/padStart';
 
 import { Month } from '../constants';
 import { newUTC } from '../newUTC';

packages/date-utils/src/getWeekdayName/getWeekdayName.ts

@@ -1,4 +1,4 @@
-import { truncate } from 'lodash';
+import truncate from 'lodash/truncate';
 
 import { Month } from '../constants';
 import { normalizeLocale } from '../normalizeLocale';

packages/date-utils/src/getWeeksArray/getWeeksArray.spec.ts

@@ -1,4 +1,4 @@
-import { isNull } from 'lodash';
+import isNull from 'lodash/isNull';
 
 import { Month } from '../constants';
 

packages/hooks/src/useAutoScroll/useAutoScroll.story.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import { css } from '@leafygreen-ui/emotion';
 import { StoryMetaType } from '@leafygreen-ui/lib';

packages/lib/src/storybook/StoryMeta.ts

@@ -1,4 +1,4 @@
-import { mergeWith } from 'lodash';
+import mergeWith from 'lodash/mergeWith';
 
 import { StoryMetaType } from './StoryMeta.types';
 

packages/pagination/src/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { range } from 'lodash';
+import range from 'lodash/range';
 import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';

packages/search-input/src/SearchInput.story.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import React, { ChangeEventHandler, FormEventHandler, useState } from 'react';
 import { StoryFn } from '@storybook/react';
-import { kebabCase, startCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
+import startCase from 'lodash/startCase';
 
 import { css } from '@leafygreen-ui/emotion';
 import {

packages/table/src/utils/makeData.testutils.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { faker } from '@faker-js/faker';
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 import Code from '@leafygreen-ui/code';
 

packages/testing-lib/src/tabNTimes/index.ts

@@ -1,5 +1,5 @@
 import userEvent from '@testing-library/user-event';
-import { range } from 'lodash';
+import range from 'lodash/range';
 
 /** Presses the `tab` key `count` times */
 export const tabNTimes = (count: number) => {

packages/toast/src/Toast.story.tsx

@@ -2,7 +2,8 @@
 import React, { useEffect, useState } from 'react';
 import { faker } from '@faker-js/faker';
 import { StoryContext, StoryFn } from '@storybook/react';
-import { range, startCase } from 'lodash';
+import range from 'lodash/range';
+import startCase from 'lodash/startCase';
 
 import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';

packages/toast/src/ToastContainer/ToastContainer.spec.tsx

@@ -10,7 +10,8 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { defaults, range } from 'lodash';
+import defaults from 'lodash/defaults';
+import range from 'lodash/range';
 
 import { transitionDuration } from '@leafygreen-ui/tokens';
 

packages/toast/src/ToastContainer/utils/useToastHeights.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 import { spacing } from '@leafygreen-ui/tokens';
 

packages/toast/src/ToastContainer/utils/useToastTransitions.ts

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 const transitionDebounceTime = 100;
 

packages/toast/src/ToastContext/useToast/useToast.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 import { ToastContext } from '../ToastContext';
 import { ToastContextProps } from '../ToastContext.types';

scripts/proptypes.ts

@@ -3,7 +3,7 @@ import { PropItem } from 'react-docgen-typescript';
 import { CustomComponentDoc } from '@lg-tools/build/src/tsdoc.utils';
 import { Command } from 'commander';
 import { readFileSync } from 'fs';
-import { pickBy } from 'lodash';
+import pickBy from 'lodash/pickBy';
 import path from 'path';
 
 /**

tools/build/src/tsdoc/tsdocParser.ts

@@ -7,7 +7,10 @@ import {
 } from 'react-docgen-typescript';
 import chalk from 'chalk';
 import fse from 'fs-extra';
-import { camelCase, defaults, isUndefined, uniqBy } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import defaults from 'lodash/defaults';
+import isUndefined from 'lodash/isUndefined';
+import uniqBy from 'lodash/uniqBy';
 import path from 'path';
 import { CompilerOptions, JsxEmit } from 'typescript';
 

tools/create/src/utils/getNameVariants.ts

@@ -1,4 +1,6 @@
-import { camelCase, kebabCase, startCase } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import kebabCase from 'lodash/kebabCase';
+import startCase from 'lodash/startCase';
 
 export function getNameVariants(name: string) {
   // Construct all required parameters

tools/slackbot/src/release-bot/utils/generateGreeting.ts

@@ -1,4 +1,4 @@
-import { sample } from 'lodash';
+import sample from 'lodash/sample';
 
 export function generateGreeting(length: number) {
   const EMOJIS = [

tools/slackbot/src/release-bot/utils/parseChangeLog.ts

@@ -1,4 +1,4 @@
-import { uniq } from 'lodash';
+import uniq from 'lodash/uniq';
 
 import { ComponentUpdateObject } from '../release-bot.types';
 

tools/slackbot/src/release-bot/utils/utils.ts

@@ -1,4 +1,4 @@
-import { isUndefined } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
 
 /* UTILS */
 

tools/storybook-decorators/src/decorators/PropCombinations/PropCombinationsDecorator.tsx

@@ -11,7 +11,8 @@
 
 import React from 'react';
 import { Decorator, StoryContext, StoryFn } from '@storybook/react';
-import { entries, isUndefined } from 'lodash';
+import entries from 'lodash/entries';
+import isUndefined from 'lodash/isUndefined';
 
 import {
   type GeneratedStoryConfig,

tools/storybook-decorators/src/decorators/PropCombinations/components/PropCombinations.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { ReactElement } from 'react';
 import { Args, StoryFn } from '@storybook/react';
-import { entries } from 'lodash';
+import entries from 'lodash/entries';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { GeneratedStoryConfig } from '@leafygreen-ui/lib';

tools/storybook-decorators/src/decorators/PropCombinations/utils/RecursiveCombinations.ts

@@ -1,4 +1,4 @@
-import { keys } from 'lodash';
+import keys from 'lodash/keys';
 
 import { GeneratedStoryConfig } from '@leafygreen-ui/lib';
 

tools/storybook-decorators/src/decorators/PropCombinations/utils/isGeneratedStory.ts

@@ -1,5 +1,6 @@
 import { StoryContext } from '@storybook/react';
-import { isUndefined, startCase } from 'lodash';
+import isUndefined from 'lodash/isUndefined';
+import startCase from 'lodash/startCase';
 
 import { GeneratedStoryConfig } from '@leafygreen-ui/lib';
 

tools/storybook-decorators/src/decorators/PropCombinations/utils/shouldExcludePropCombo.ts

@@ -1,4 +1,8 @@
-import { entries, has, isEqual, isUndefined, keys } from 'lodash';
+import entries from 'lodash/entries';
+import has from 'lodash/has';
+import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
+import keys from 'lodash/keys';
 
 import {
   type ExtendedComponentProps,

tools/storybook-decorators/src/decorators/PropCombinations/utils/valStr.ts

@@ -1,4 +1,5 @@
-import { isNull, isUndefined } from 'lodash';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 /**
  * @returns the provided value as a string

tools/storybook/src/main/index.ts

@@ -3,7 +3,7 @@
  */
 
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { isRegExp } from 'lodash';
+import isRegExp from 'lodash/isRegExp';
 import { ProvidePlugin, RuleSetRule } from 'webpack';
 
 import { findStories } from './findStories';

tools/validate/src/dependencies/utils/getPackageDependencies.ts

@@ -1,6 +1,6 @@
 import { getAllPackageNames } from '@lg-tools/meta';
 import { readFileSync } from 'fs-extra';
-import { defaults } from 'lodash';
+import defaults from 'lodash/defaults';
 
 interface DependenciesOptions {
   dev?: boolean;

tools/validate/src/dependencies/validateListedDependencies.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import chalk from 'chalk';
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import path from 'path';
 
 import { ValidateCommandOptions } from '../validate.types';

tools/validate/src/dependencies/validateListedDevDependencies.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import chalk from 'chalk';
-import { pick } from 'lodash';
+import pick from 'lodash/pick';
 import path from 'path';
 
 import { ValidateCommandOptions } from '../validate.types';