fix: better tree shaking with @carbon/icons-react and carbon-react-components

examples/discovery-search-app/package.json

@@ -49,5 +49,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!carbon-components-react)/"
+    ]
   }
 }

packages/discovery-react-components/rollup.config.js

@@ -44,7 +44,7 @@ export default {
     }
   ],
   external: Object.keys(pkg.peerDependencies).concat([
-    'carbon-components-react/lib/components/ListBox'
+    'carbon-components-react/es/components/ListBox'
   ]),
   plugins: [
     replacePdfWorker,

packages/discovery-react-components/src/components/CIDocument/components/NavigationToolbar/NavigationToolbar.tsx

@@ -2,8 +2,8 @@ import React, { FC } from 'react';
 import cx from 'classnames';
 import { settings } from 'carbon-components';
 import { Button } from 'carbon-components-react';
-import ChevronLeft16 from '@carbon/icons-react/lib/chevron--left/16';
-import ChevronRight16 from '@carbon/icons-react/lib/chevron--right/16';
+import { ChevronLeft16 } from '@carbon/icons-react';
+import { ChevronRight16 } from '@carbon/icons-react';
 import { defaultMessages, Messages } from './messages';
 
 type ChangeFn = (index: number) => void;

packages/discovery-react-components/src/components/DocumentPreview/components/PreviewToolbar/PreviewToolbar.tsx

@@ -2,11 +2,11 @@ import React, { SFC, useRef, useEffect, ReactElement } from 'react';
 import { Button, FormLabel, Form, TextInput } from 'carbon-components-react';
 import { settings } from 'carbon-components';
 
-import ZoomIn24 from '@carbon/icons-react/lib/zoom--in/24.js';
-import ZoomOut24 from '@carbon/icons-react/lib/zoom--out/24.js';
-import CaretLeft24 from '@carbon/icons-react/lib/caret--left/24.js';
-import CaretRight24 from '@carbon/icons-react/lib/caret--right/24.js';
-import Reset24 from '@carbon/icons-react/lib/reset/24.js';
+import { ZoomIn24 } from '@carbon/icons-react';
+import { ZoomOut24 } from '@carbon/icons-react';
+import { CaretLeft24 } from '@carbon/icons-react';
+import { CaretRight24 } from '@carbon/icons-react';
+import { Reset24 } from '@carbon/icons-react';
 
 export const ZOOM_IN = 'zoom-in';
 export const ZOOM_OUT = 'zoom-out';

packages/discovery-react-components/src/components/SearchFacets/SearchFacets.tsx

@@ -2,7 +2,7 @@ import React, { FC, useContext, useState, SyntheticEvent } from 'react';
 import DiscoveryV2 from 'ibm-watson/discovery/v2';
 import { Button } from 'carbon-components-react';
 import { settings } from 'carbon-components';
-import Close from '@carbon/icons-react/lib/close/16';
+import { Close16 } from '@carbon/icons-react';
 import { SearchContext, SearchApi } from 'components/DiscoverySearch/DiscoverySearch';
 import { mergeFilterFacets } from './utils/mergeFilterFacets';
 import { mergeDynamicFacets } from './utils/mergeDynamicFacets';
@@ -235,7 +235,7 @@ const SearchFacets: FC<SearchFacetsProps> = ({
             className={`${settings.prefix}--search-facets__button-clear-all`}
             id={`${facetsId}--search-facets-button-clear-all`}
             kind="ghost"
-            renderIcon={Close}
+            renderIcon={Close16}
             size="small"
             onClick={handleOnClear}
           >

packages/discovery-react-components/src/components/SearchFacets/components/FacetsGroups/CategoryFacets.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useEffect, SyntheticEvent } from 'react';
 import { Button } from 'carbon-components-react';
-import ChevronDown from '@carbon/icons-react/lib/chevron--down/16';
-import ChevronUp from '@carbon/icons-react/lib/chevron--up/16';
+import { ChevronDown16 } from '@carbon/icons-react';
+import { ChevronUp16 } from '@carbon/icons-react';
 import { Messages } from 'components/SearchFacets/messages';
 import { MultiSelectFacetsGroup } from './MultiSelectFacetsGroup';
 import { SingleSelectFacetsGroup } from './SingleSelectFacetsGroup';
@@ -112,7 +112,7 @@ export const CategoryFacets: FC<CategoryFacetsProps> = ({
   };
 
   const categoryFacetsToShow = isCollapsed ? facets.slice(0, collapsedFacetsCount) : facets;
-  const iconToRender = categoryIsExpanded ? ChevronUp : ChevronDown;
+  const iconToRender = categoryIsExpanded ? ChevronUp16 : ChevronDown16;
   const totalNumberFacets = facets.length;
   const showMoreButtonOnClick =
     totalNumberFacets <= MAX_FACETS_UNTIL_MODAL ? toggleFacetsCollapse : setModalOpen;

packages/discovery-react-components/src/components/SearchFacets/components/FacetsGroups/CollapsibleFacetsGroup.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useEffect, SyntheticEvent } from 'react';
 import filter from 'lodash/filter';
 import get from 'lodash/get';
-import ListBox from 'carbon-components-react/lib/components/ListBox';
+import ListBox from 'carbon-components-react/es/components/ListBox';
 import {
   fieldsetClasses,
   labelClasses,

packages/discovery-react-components/src/components/SearchInput/SearchInput.tsx

@@ -7,11 +7,11 @@ import get from 'lodash/get';
 import React, { FC, useContext, useEffect, useState, SyntheticEvent, KeyboardEvent } from 'react';
 import { settings } from 'carbon-components';
 import { Search as CarbonSearchInput } from 'carbon-components-react';
-import ListBox from 'carbon-components-react/lib/components/ListBox';
+import ListBox from 'carbon-components-react/es/components/ListBox';
 import { SearchApi, SearchContext } from 'components/DiscoverySearch/DiscoverySearch';
 import useDebounce from 'utils/useDebounce';
 import uuid from 'uuid';
-import Search16 from '@carbon/icons-react/lib/search/16';
+import { Search16 } from '@carbon/icons-react';
 import DiscoveryV2 from 'ibm-watson/discovery/v2';
 import { useDeepCompareCallback } from 'utils/useDeepCompareMemoize';
 import { defaultMessages, Messages } from './messages';

packages/discovery-react-components/src/components/SearchResults/components/ResultElement/ResultElement.tsx

@@ -1,8 +1,8 @@
 import React, { useLayoutEffect } from 'react';
 import { SelectedResult } from 'components/DiscoverySearch/DiscoverySearch';
 import { Button, Tile } from 'carbon-components-react';
-import Launch from '@carbon/icons-react/lib/launch/16';
-import TableSplit from '@carbon/icons-react/lib/table--split/16';
+import { Launch16 } from '@carbon/icons-react';
+import { TableSplit16 } from '@carbon/icons-react';
 import DOMPurify from 'dompurify';
 import {
   searchResultContentWrapperBodyClass,
@@ -72,7 +72,7 @@ export const ResultElement: React.FunctionComponent<ResultElementProps> = ({
       ? elementBodyClassNames.push(passageTextClassName)
       : elementBodyClassNames.push(searchResultContentWrapperBodyPassageHighlightsClass);
   }
-  const icon = elementType === 'table' ? TableSplit : Launch;
+  const icon = elementType === 'table' ? TableSplit16 : Launch16;
 
   const elementBodyProps = {
     className: elementBodyClassNames.join(' '),

packages/discovery-react-components/src/components/StructuredQuery/components/AddRuleGroupButton/AddRuleGroupButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, Dispatch, SetStateAction } from 'react';
 import { Button } from 'carbon-components-react';
-import Add16 from '@carbon/icons-react/lib/add/16';
+import { Add16 } from '@carbon/icons-react';
 import { Messages } from 'components/StructuredQuery/messages';
 import { getNewId } from 'components/StructuredQuery/utils';
 import { StructuredQuerySelection } from 'components/StructuredQuery/utils/structuredQueryInterfaces';

packages/discovery-react-components/src/components/StructuredQuery/components/AddRuleRowButton/AddRuleRowButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, Dispatch, SetStateAction } from 'react';
 import { Button } from 'carbon-components-react';
-import Add16 from '@carbon/icons-react/lib/add/16';
+import { Add16 } from '@carbon/icons-react';
 import { Messages } from 'components/StructuredQuery/messages';
 import { StructuredQuerySelection } from 'components/StructuredQuery/utils/structuredQueryInterfaces';
 import { getNewId } from 'components/StructuredQuery/utils';

packages/discovery-react-components/src/components/StructuredQuery/components/RemoveRuleRowButton/RemoveRuleRowButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC, Dispatch, SetStateAction } from 'react';
 import omit from 'lodash/omit';
 import { Button } from 'carbon-components-react';
-import SubtractAlt16 from '@carbon/icons-react/lib/subtract--alt/16';
+import { SubtractAlt16 } from '@carbon/icons-react';
 import { Messages } from 'components/StructuredQuery/messages';
 import { StructuredQuerySelection } from 'components/StructuredQuery/utils/structuredQueryInterfaces';
 

packages/discovery-react-components/src/typings.d.ts

@@ -16,11 +16,11 @@ declare module '*.svg' {
 
 declare module 'carbon-components-react';
 declare module 'carbon-components';
-declare module '@carbon/icons-react/*';
+declare module '@carbon/icons-react';
 declare module '*.md';
 declare module 'marked';
 declare module 'uuid';
-declare module 'carbon-components-react/lib/components/ListBox';
+declare module 'carbon-components-react/es/components/ListBox';
 
 // Required for storybook build
 // https://github.com/storybookjs/storybook/issues/8233#issuecomment-558563086