Merge pull request #687 from glints-dev/feature/lodash-es

yjwong · web-flow · commit 75985f1afcfb · 2022-11-13T02:02:55.000+08:00
Migrate from lodash to lodash-es
diff --git a/babel.config.js b/babel.config.js
diff --git a/package.json b/package.json
@@ -66,7 +66,8 @@
     "@types/async": "^3.2.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.149",
+    "@types/lodash": "^4.14.188",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^12.12.7",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -100,7 +101,8 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-styled-components": "^7.0.2",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "prettier": "1.18.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -126,6 +128,7 @@
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
+    "lodash-es": "^4.0.0",
     "react": "^16.3.0 || ^17",
     "react-dom": "^16.3.0 || ^17",
     "styled-components": "^4.0.0 || ^5.0.0"
@@ -134,7 +137,10 @@
     "moduleNameMapper": {
       ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
       ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js"
-    }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!lodash-es)"
+    ]
   },
   "optionalDependencies": {
     "@glints/poppins": "^1.0.2"
diff --git a/src/Display/Collapsible/Collapsible.tsx b/src/Display/Collapsible/Collapsible.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, FC, useState, ReactNode } from 'react';
 import classNames from 'classnames';
-import isUndefined from 'lodash/isUndefined';
+import { isUndefined } from 'lodash-es';
+
 import { ArrowDownIcon } from '../../General/Icon/components';
 
 import {
diff --git a/src/Display/Modal/Modal.stories.tsx b/src/Display/Modal/Modal.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react';
-import { times, constant } from 'lodash';
+import { constant, times } from 'lodash-es';
 
 import { Modal, Props } from './Modal';
 import { Button } from '../../General/Button/Button';
diff --git a/src/Display/Modal/Modal.tsx b/src/Display/Modal/Modal.tsx
@@ -10,7 +10,7 @@ import React, {
   ReactElement,
 } from 'react';
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 import {
   disableBodyScroll,
   enableBodyScroll,
diff --git a/src/Display/Slider/Slider.tsx b/src/Display/Slider/Slider.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import isNil from 'lodash/isNil';
+import { isNil } from 'lodash-es';
 
 import classNames from 'classnames';
 
diff --git a/src/General/Alert/Alert.tsx b/src/General/Alert/Alert.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import classNames from 'classnames';
+import isUndefined from 'lodash/isUndefined';
 
 import {
   CheckmarkSolidIcon,
@@ -16,7 +17,6 @@ import {
 } from './AlertStyle';
 
 import { Greyscale, PrimaryColor, SecondaryColor } from '../../Utils/Colors';
-import { isUndefined } from 'lodash';
 import { DelayedUnmount } from '../../Utils/DelayedUnmount';
 
 export const Alert = ({
diff --git a/src/General/Badge/Badge.tsx b/src/General/Badge/Badge.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import isNil from 'lodash/isNil';
+import { isNil } from 'lodash-es';
 import { BadgeContainer } from './BadgeStyle';
 import { BadgeVariant } from './BadgeVariant';
 
diff --git a/src/General/Icon/IconStoriesHelpers.tsx b/src/General/Icon/IconStoriesHelpers.tsx
@@ -1,6 +1,7 @@
-import { sampleSize } from 'lodash';
+import { sampleSize } from 'lodash-es';
 import React, { useState, FC } from 'react';
 import styled from 'styled-components';
+
 import TextField from '../../Input/TextField';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Greyscale } from '../../Utils/Colors';
diff --git a/src/General/Icon/LegacyIcon.tsx b/src/General/Icon/LegacyIcon.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import camelCase from 'lodash/camelCase';
-import upperFirst from 'lodash/upperFirst';
+import { camelCase, upperFirst } from 'lodash-es';
 
 import { ICONS } from '../../Utils/Icon/IconLibrary';
 
diff --git a/src/Input/Checkbox/Checkbox.tsx b/src/Input/Checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { isUndefined } from 'lodash-es';
 
 import { CheckboxContainer } from './CheckboxStyle';
-import isUndefined from 'lodash/isUndefined';
 
 export type CheckedState = 'false' | 'true' | 'mixed';
 
diff --git a/src/Input/DownshiftSelect/Select.stories.tsx b/src/Input/DownshiftSelect/Select.stories.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react';
-import { Select, Props, ItemProps, Item } from './Select';
-import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { identity, sample, sampleSize } from 'lodash-es';
 import styled from 'styled-components';
 
-import * as Components from './SelectStyle';
 import { SecondaryColor } from '../../Utils/Colors';
 import { Button } from '../../General/Button/Button';
 import { Box } from '../../Layout/Box';
-import { identity, sample, sampleSize } from 'lodash';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { TextField } from '../..';
 
+import { Select, Props, ItemProps, Item } from './Select';
+import * as Components from './SelectStyle';
+
 const StoryContainer = styled(BaseContainer)`
   min-height: 250px;
 `;
diff --git a/src/Input/DownshiftSelect/Select.test.tsx b/src/Input/DownshiftSelect/Select.test.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { render, fireEvent, queryAllByAttribute } from '@testing-library/react';
 import _userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
+import { first, identity } from 'lodash-es';
+
 import { Select, Item, ItemProps } from './Select';
-import { first, identity } from 'lodash';
 import { Item as ItemComponent, Label as LabelComponent } from './SelectStyle';
 
 // userEvent is typed incorrectly. The tab function exists, but is not declared
diff --git a/src/Input/DownshiftSelect/Select.tsx b/src/Input/DownshiftSelect/Select.tsx
@@ -1,12 +1,12 @@
 import React, { HTMLProps, useState } from 'react';
 import { useCombobox, UseComboboxProps } from 'downshift';
+import { groupBy, indexOf, isFunction, isUndefined, noop } from 'lodash-es';
+import { useId } from 'react-id-generator';
 
 import * as internalComponents from './SelectStyle';
 import { ArrowDownIcon } from '../../General/Icon/components';
 import { ArrowUpIcon } from '../../General/Icon/components';
 import { CloseCircleSolidIcon } from '../../General/Icon/components';
-import { groupBy, indexOf, isFunction, isUndefined, noop } from 'lodash';
-import { useId } from 'react-id-generator';
 
 export interface Item {
   value: string;
diff --git a/src/Input/PhoneNumberInput/PhoneNumberInput.test.tsx b/src/Input/PhoneNumberInput/PhoneNumberInput.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import _userEvent from '@testing-library/user-event';
+import { noop } from 'lodash-es';
+import { resetId } from 'react-id-generator';
+
 import '@testing-library/jest-dom/extend-expect';
 import { PhoneNumberInput, CallingCodeOption, Props } from './PhoneNumberInput';
-import { noop } from 'lodash';
-import { resetId } from 'react-id-generator';
 import { Tag } from '../..';
 
 // userEvent is typed incorrectly. The tab function exists, but is not declared
diff --git a/src/Input/PhoneNumberInput/PhoneNumberInput.tsx b/src/Input/PhoneNumberInput/PhoneNumberInput.tsx
@@ -1,7 +1,8 @@
 import { useCombobox } from 'downshift';
-import { find, orderBy } from 'lodash';
+import { find, orderBy } from 'lodash-es';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { useId } from 'react-id-generator';
+
 import { ArrowDownIcon, ArrowUpIcon, Flex } from '../..';
 import { useOutsideAlerter } from '../../Utils/useOutsideAlerter';
 import * as S from './PhoneNumberInputStyles';
diff --git a/src/Input/Select/Select.test.tsx b/src/Input/Select/Select.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as lodash from 'lodash';
+import { times } from 'lodash-es';
 import * as renderer from 'react-test-renderer';
 import 'jest-styled-components';
 import '@testing-library/jest-dom/extend-expect';
@@ -105,9 +105,7 @@ function setupSelectOptionFromMenuWithKeyHandling() {
   const arrowDownEvent = { key: 'ArrowDown', keyCode: 40 };
   const enterEvent = { key: 'Enter', keyCode: 13 };
 
-  lodash.times(randomIndex, () =>
-    fireEvent.keyDown(selectInput, arrowDownEvent)
-  );
+  times(randomIndex, () => fireEvent.keyDown(selectInput, arrowDownEvent));
   fireEvent.keyDown(selectInput, enterEvent);
   fireEvent.change(selectInput, {
     target: { value: randomOption.textContent },
diff --git a/src/Input/Select/Select.tsx b/src/Input/Select/Select.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import get from 'lodash/get';
-import toLower from 'lodash/toLower';
+import { get, toLower } from 'lodash-es';
 import classNames from 'classnames';
 
 import SelectList, { SelectItemProps } from './SelectList';
@@ -127,9 +126,12 @@ const Select: React.FC<Props> & {
     return matchedChildrenOptions;
   }, [children, inputValue, disableTyping, isInputChange, filterFunction]);
 
-  const [options, setOptions] = React.useState<React.ReactNode[]>(
-    availableOptions
-  );
+  const [options, setOptions] = React.useState<
+    React.ReactElement<
+      SelectItemProps,
+      string | React.JSXElementConstructor<unknown>
+    >[]
+  >(availableOptions);
 
   React.useEffect(
     function updateOptionsAndActiveIndex() {
diff --git a/src/Input/Select/SelectList.tsx b/src/Input/Select/SelectList.tsx
@@ -80,7 +80,7 @@ interface Props {
 export interface SelectItemProps {
   children: string;
   value?: string;
-  onOptionClick?(e: React.MouseEvent<HTMLLIElement, MouseEvent>): void;
+  onOptionClick?(e: React.ChangeEvent<HTMLInputElement>): void;
 }
 
 export default SelectList;
diff --git a/src/Input/Textarea/Textarea.tsx b/src/Input/Textarea/Textarea.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes, RefObject } from 'react';
 
 import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 
 import {
   TextareaContainer,
diff --git a/src/Layout/Grid/Grid.stories.mdx b/src/Layout/Grid/Grid.stories.mdx
@@ -1,7 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
+import { times, constant } from 'lodash-es';
+
 import Grid from './index';
 import { Cell } from './GridStoriesHelpers';
-import { times, constant } from 'lodash';
 import { Box } from '../Box';
 
 <Meta title="Layout/Grid" />
diff --git a/stories/Display/SliderStory.tsx b/stories/Display/SliderStory.tsx
diff --git a/stories/General/ButtonStory.tsx b/stories/General/ButtonStory.tsx
diff --git a/stories/Input/TextFieldStory.tsx b/stories/Input/TextFieldStory.tsx
diff --git a/stories/Input/TextareaStory.tsx b/stories/Input/TextareaStory.tsx
diff --git a/stories/Input/ToggleSwitchStory.tsx b/stories/Input/ToggleSwitchStory.tsx
diff --git a/stories/index.tsx b/stories/index.tsx
diff --git a/yarn.lock b/yarn.lock
