Optimize imports and exports for tree-shaking

next.config.js

@@ -100,6 +100,9 @@ const config = {
   },
   experimental: {
     modularizeImports: {
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
       '@mui/material': {
         transform: '@mui/material/{{member}}',
       },

pages/_app.page.tsx

@@ -5,8 +5,7 @@ import React, { ReactElement, useMemo } from 'react';
 import { ApolloProvider as RawApolloProvider } from '@apollo/client';
 import createEmotionCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
-import { Box } from '@mui/material';
-import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import { Box, StyledEngineProvider } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import {

pages/accountLists/[accountListId]/contacts/ContactsContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import _, { debounce } from 'lodash';
+import { type DebouncedFunc, debounce, omit } from 'lodash';
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
 import { useGetIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated';
 import { useLocale } from 'src/hooks/useLocale';
@@ -51,7 +51,7 @@ export type ContactsType = {
     flows?: boolean,
     map?: boolean,
   ) => void;
-  setSearchTerm: _.DebouncedFunc<(searchTerm: string) => void>;
+  setSearchTerm: DebouncedFunc<(searchTerm: string) => void>;
   handleViewModeChange: (
     event: React.MouseEvent<HTMLElement>,
     view: string,
@@ -295,7 +295,7 @@ export const ContactsProvider: React.FC<Props> = ({
       filteredQuery.filters = encodeURI(JSON.stringify({ ids }));
     }
     if (viewMode !== TableViewModeEnum.Map && urlFilters && urlFilters.ids) {
-      const newFilters = _.omit(activeFilters, 'ids');
+      const newFilters = omit(activeFilters, 'ids');
       if (Object.keys(newFilters).length > 0) {
         filteredQuery.filters = encodeURI(JSON.stringify(newFilters));
       } else {

pages/accountLists/[accountListId]/contacts/ContactsPage.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useState } from 'react';
-import _ from 'lodash';
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
 import { suggestArticles } from 'src/lib/helpScout';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';

pages/accountLists/[accountListId]/contacts/[[...contactId]].page.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import { ContactsContainer } from 'src/components/Contacts/ContactsContainer';
 import { ContactsPage } from './ContactsPage';

pages/accountLists/[accountListId]/contacts/flows/setup.page.tsx

@@ -1,8 +1,8 @@
 import Head from 'next/head';
 import React, { useCallback, useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import { useSnackbar } from 'notistack';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -180,7 +180,7 @@ const ContactFlowSetupPage: React.FC = () => {
     const originalOptions = userOptions?.userOptions.find(
       (option) => option.key === 'flows',
     )?.value;
-    if (!_.isEqual(originalOptions, flowOptions)) {
+    if (!isEqual(originalOptions, flowOptions)) {
       updateOptions(flowOptions);
     }
   };

pages/accountLists/[accountListId]/contacts/helpers.ts

@@ -1,6 +1,6 @@
 import { DateTime } from 'luxon';
 import { TableViewModeEnum } from 'src/components/Shared/Header/ListHeader';
-import { dateFormatShort } from 'src/lib/intlFormat/intlFormat';
+import { dateFormatShort } from 'src/lib/intlFormat';
 import { ContactsQuery } from './Contacts.generated';
 import { Coordinates } from './map/map';
 

pages/accountLists/[accountListId]/reports/designationAccounts.page.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/accountLists/[accountListId]/reports/donations/[[...contactId]].page.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]].page.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/accountLists/[accountListId]/reports/responsibilityCenters.page.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]].page.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx

@@ -5,7 +5,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { Box, Button, ButtonGroup, Hidden } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';

pages/api/auth/apiOauthSignIn.ts

@@ -1,8 +1,7 @@
 /* eslint-disable */
-import * as Types from 'src/graphql/types.generated';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
+import type * as Types from 'src/graphql/types.generated';
+import { gql, useMutation } from '@apollo/client';
+import type * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
 export type ApiOauthSignInMutationVariables = Types.Exact<{
   accessToken: Types.Scalars['String']['input'];
@@ -74,10 +73,10 @@ export function useApiOauthSignInMutation(
   >,
 ) {
   const options = { ...defaultOptions, ...baseOptions };
-  return Apollo.useMutation<
-    ApiOauthSignInMutation,
-    ApiOauthSignInMutationVariables
-  >(ApiOauthSignInDocument, options);
+  return useMutation<ApiOauthSignInMutation, ApiOauthSignInMutationVariables>(
+    ApiOauthSignInDocument,
+    options,
+  );
 }
 export type ApiOauthSignInMutationHookResult = ReturnType<
   typeof useApiOauthSignInMutation

src/components/Coaching/AppealProgress/AppealProgress.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
+import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import StyledProgress from 'src/components/StyledProgress';

src/components/Coaching/CoachingDetail/CoachingSidebar.tsx

@@ -15,8 +15,7 @@ import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { GetTaskAnalyticsQuery } from 'src/components/Dashboard/ThisWeek/NewsletterMenu/NewsletterMenu.generated';
 import { useLocale } from 'src/hooks/useLocale';
-import { currencyFormat } from 'src/lib/intlFormat';
-import { dateFormat } from 'src/lib/intlFormat/intlFormat';
+import { currencyFormat, dateFormat } from 'src/lib/intlFormat';
 import theme from 'src/theme';
 import { CollapsibleEmailList } from '../../Shared/CollapsibleContactInfo/CollapsibleEmailList';
 import { CollapsiblePhoneList } from '../../Shared/CollapsibleContactInfo/CollapsiblePhoneList';

src/components/Coaching/CoachingDetail/MonthlyCommitment/MonthlyCommitment.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Box, CardContent, CardHeader, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import {
+  Box,
+  CardContent,
+  CardHeader,
+  Skeleton,
+  Typography,
+} from '@mui/material';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import {

src/components/Coaching/CoachingList.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Divider, Skeleton, Typography } from '@mui/material';
 // TODO: This icon is not defined on @mui/icons-material, find replacement.
 // import { EcoOutlined } from '@mui/icons-material';
-import Skeleton from '@mui/material/Skeleton';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { CoachingRow } from './CoachingRow/CoachingRow';

src/components/Coaching/CoachingRow/CoachingRow.tsx

@@ -1,10 +1,7 @@
 import NextLink from 'next/link';
 import React, { useState } from 'react';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Link } from '@mui/material';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
+import { Box, Button, Link, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useRequiredSession } from 'src/hooks/useRequiredSession';

src/components/Contacts/CelebrationIcons/CelebrationIcons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Cake from '@mui/icons-material/Cake';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { DateTime, Interval } from 'luxon';
 import { useTranslation } from 'react-i18next';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import Close from '@mui/icons-material/Close';
-import { Avatar, Box, IconButton, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Avatar, Box, IconButton, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { StatusEnum } from 'src/graphql/types.generated';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderAddressSection.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import LocationOn from '@mui/icons-material/LocationOn';
-import { Box, Link, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Box, Link, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import theme from '../../../../../theme';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderEmailSection.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import Email from '@mui/icons-material/Email';
-import { Link, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Link, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import theme from '../../../../../theme';
 import { ContactHeaderEmailFragment } from './ContactHeaderEmail.generated';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderNewsletterSection.tsx

@@ -1,8 +1,7 @@
 import React, { ReactElement } from 'react';
 import { mdiNewspaperVariantOutline } from '@mdi/js';
 import Icon from '@mdi/react';
-import Skeleton from '@mui/material/Skeleton';
-import Typography from '@mui/material/Typography';
+import { Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedSendNewsletter } from 'src/utils/functions/getLocalizedSendNewsletter';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPartnerSection.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
-import { Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { ContactHeaderSection } from './ContactHeaderSection';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderPhoneSection.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import Phone from '@mui/icons-material/Phone';
-import { Box, Link, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Box, Link, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import theme from '../../../../../theme';
 import { ContactHeaderPhoneFragment } from './ContactHeaderPhone.generated';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderSection.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 interface Props {

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderStatusSection.tsx

@@ -1,9 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import CreateIcon from '@mui/icons-material/Create';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Skeleton from '@mui/material/Skeleton';
-import Typography from '@mui/material/Typography';
+import { Box, IconButton, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
+import { SvgIcon } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import theme from '../../../../../theme';
 

src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box, Divider, Typography } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { Box, Divider, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import {

src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/ContactDetailsTabMailing.tsx

@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { useLocale } from 'src/hooks/useLocale';
-import { dateFormat } from 'src/lib/intlFormat/intlFormat';
+import { dateFormat } from 'src/lib/intlFormat';
 import { getLocalizedSendNewsletter } from 'src/utils/functions/getLocalizedSendNewsletter';
 import { sourceToStr } from 'src/utils/sourceToStr';
 import {

src/components/Contacts/ContactDetails/ContactDetailsTab/Other/ContactDetailsOther.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
+import { Box, IconButton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import i18n from 'i18next';
 import { useTranslation } from 'react-i18next';

src/components/Contacts/ContactDetails/ContactDetailsTab/Other/EditContactOtherModal/EditContactOtherModal.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Formik } from 'formik';
-import debounce from 'lodash/fp/debounce';
+import { debounce } from 'lodash';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
@@ -109,9 +109,9 @@ export const EditContactOtherModal: React.FC<EditContactOtherModalProps> = ({
   const [searchTerm, setSearchTerm] = useState(referral?.referredBy.name ?? '');
 
   const handleSearchTermChange = useCallback(
-    debounce(500, (event) => {
+    debounce((event) => {
       setSearchTerm(event.target.value);
-    }),
+    }, 500),
     [],
   );
 

src/components/Contacts/ContactDetails/ContactDetailsTab/PartnerAccounts/ContactDetailsPartnerAccounts.tsx

@@ -1,10 +1,7 @@
 import React, { ReactElement, useState } from 'react';
 import Add from '@mui/icons-material/Add';
 import Delete from '@mui/icons-material/Delete';
-import { TextField } from '@mui/material';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
+import { Box, IconButton, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { Formik } from 'formik';
 import { useSnackbar } from 'notistack';

src/components/Contacts/ContactDetails/ContactDetailsTab/People/ContactDetailsTabPeople.tsx

@@ -19,7 +19,7 @@ import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { MergePeopleModal } from 'src/components/Contacts/MassActions/MergePeople/MergePeopleModal';
 import { useLocale } from 'src/hooks/useLocale';
-import { dateFromParts } from 'src/lib/intlFormat/intlFormat';
+import { dateFromParts } from 'src/lib/intlFormat';
 import { RingIcon } from '../../../RingIcon';
 import {
   ContactDetailContext,

src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/ModalSectionContainer/ModalSectionContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 interface ModalSectionContainerProps {

src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/ModalSectionDeleteIcon/ModalSectionDeleteIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
-import IconButton from '@mui/material/IconButton';
+import { IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 

src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/ModalSectionIcon/ModalSectionIcon.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 const IconContainer = styled(Box, {