fix: Use /lib in deep-import for Icons to correct build portability (#2143)

Luke Bowerman · web-flow · commit ef2b2995c602 · 2021-03-31T08:59:16.000-07:00
diff --git a/babel.config.js b/babel.config.js
@@ -34,6 +34,7 @@ const ignore = [
   '**/stories/*',
   '__snapshots__',
   '__tests__',
+  '__mocks__',
 ]
 
 const plugins = [
@@ -58,11 +59,8 @@ module.exports = (api) => {
           [
             '@babel/env',
             {
-              corejs: 3,
-              targets: {
-                node: 6,
-              },
-              useBuiltIns: 'usage',
+              bugfixes: true,
+              targets: { ie: '11' },
             },
           ],
           ...presets,
@@ -75,9 +73,9 @@ module.exports = (api) => {
           [
             '@babel/env',
             {
-              corejs: 3,
+              bugfixes: true,
               modules: false,
-              useBuiltIns: 'usage',
+              targets: { ie: '11' },
             },
           ],
           ...presets,
diff --git a/jest-image-snapshots.config.js b/jest-image-snapshots.config.js
@@ -31,8 +31,6 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
   moduleNameMapper: {
     '@looker/([^/]+)$': '<rootDir>/packages/$1/src',
-    // Deep imports (e.g. icons)
-    '@looker/([^/]+)/src/(.+)$': '<rootDir>/packages/$1/src/$2',
     '\\.(css)$': '<rootDir>/config/jest/styleMock.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$':
       '<rootDir>/config/jest/fileMock.js',
diff --git a/jest.config.js b/jest.config.js
@@ -33,8 +33,6 @@ module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
     '@looker/([^/]+)$': '<rootDir>/packages/$1/src',
-    // Deep imports (e.g. icons)
-    '@looker/([^/]+)/src/(.+)$': '<rootDir>/packages/$1/src/$2',
     '\\.(css)$': '<rootDir>/config/jest/styleMock.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/jest/fileMock.js',
diff --git a/packages/components-theme-editor/src/ThemeEditor.tsx b/packages/components-theme-editor/src/ThemeEditor.tsx
@@ -24,7 +24,7 @@
 
  */
 
-import { Beaker } from '@looker/icons/src/Beaker'
+import { Beaker } from '@looker/icons/lib/Beaker'
 import { IconButton, Dialog } from '@looker/components'
 import React, { FC } from 'react'
 import {
diff --git a/packages/components/src/Avatar/Avatar.test.tsx b/packages/components/src/Avatar/Avatar.test.tsx
@@ -25,7 +25,7 @@
  */
 
 import { renderWithTheme } from '@looker/components-test-utils'
-import { Account } from '@looker/icons/src/Account'
+import { Account } from '@looker/icons/lib/Account'
 import { Code } from '@styled-icons/material/Code'
 import { screen, fireEvent } from '@testing-library/react'
 import React from 'react'
diff --git a/packages/components/src/Breakpoint/Breakpoint.story.tsx b/packages/components/src/Breakpoint/Breakpoint.story.tsx
@@ -24,7 +24,7 @@
 
  */
 import React, { FC } from 'react'
-import { LookerLogo } from '@looker/icons/src/LookerLogo'
+import { LookerLogo } from '@looker/icons/lib/LookerLogo'
 import { Story } from '@storybook/react/types-6-0'
 import {
   SpaceProps,
diff --git a/packages/components/src/DataTable/stories/State.tsx b/packages/components/src/DataTable/stories/State.tsx
@@ -24,7 +24,7 @@
 
  */
 
-import { Beaker } from '@looker/icons/src/Beaker'
+import { Beaker } from '@looker/icons/lib/Beaker'
 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
 import { Icon } from '../../Icon'
diff --git a/packages/components/src/Form/Fields/FieldText/FieldText.story.tsx b/packages/components/src/Form/Fields/FieldText/FieldText.story.tsx
@@ -24,7 +24,7 @@
 
  */
 
-import { Account } from '@looker/icons/src/Account'
+import { Account } from '@looker/icons/lib/Account'
 import { Story } from '@storybook/react/types-6-0'
 import { AddAlert } from '@styled-icons/material/AddAlert'
 import { Favorite } from '@styled-icons/material/Favorite'
diff --git a/packages/components/src/Form/Inputs/InputText/InputText.test.tsx b/packages/components/src/Form/Inputs/InputText/InputText.test.tsx
@@ -27,7 +27,7 @@
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { renderWithTheme } from '@looker/components-test-utils'
-import { Account } from '@looker/icons/src/Account'
+import { Account } from '@looker/icons/lib/Account'
 import { Favorite } from '@styled-icons/material/Favorite'
 import React from 'react'
 
diff --git a/packages/components/src/Form/Inputs/Select/Select.test.tsx b/packages/components/src/Form/Inputs/Select/Select.test.tsx
@@ -28,7 +28,7 @@ import {
   getAllComboboxOptionText,
   renderWithTheme,
 } from '@looker/components-test-utils'
-import { ChartBar } from '@looker/icons/src/ChartBar'
+import { ChartBar } from '@looker/icons/lib/ChartBar'
 import { BarChart } from '@styled-icons/material/BarChart'
 import { fireEvent, screen } from '@testing-library/react'
 import React, { useState, useMemo, useEffect } from 'react'
diff --git a/packages/components/src/Form/Inputs/Select/stories/Select.story.tsx b/packages/components/src/Form/Inputs/Select/stories/Select.story.tsx
@@ -25,7 +25,7 @@
  */
 
 import { Story } from '@storybook/react/types-6-0'
-import { ChartBar } from '@looker/icons/src/ChartBar'
+import { ChartBar } from '@looker/icons/lib/ChartBar'
 import { PieChart } from '@styled-icons/material/PieChart'
 import { TableChart } from '@styled-icons/material/TableChart'
 import React from 'react'
diff --git a/packages/components/src/Form/Inputs/Select/stories/options.tsx b/packages/components/src/Form/Inputs/Select/stories/options.tsx
@@ -24,10 +24,10 @@
 
  */
 
-import { ChartArea } from '@looker/icons/src/ChartArea'
-import { ChartBar } from '@looker/icons/src/ChartBar'
-import { ChartBoxPlot } from '@looker/icons/src/ChartBoxPlot'
-import { ChartTimeline } from '@looker/icons/src/ChartTimeline'
+import { ChartArea } from '@looker/icons/lib/ChartArea'
+import { ChartBar } from '@looker/icons/lib/ChartBar'
+import { ChartBoxPlot } from '@looker/icons/lib/ChartBoxPlot'
+import { ChartTimeline } from '@looker/icons/lib/ChartTimeline'
 import { BarChart } from '@styled-icons/material/BarChart'
 import { BubbleChart } from '@styled-icons/material/BubbleChart'
 import { DonutLarge } from '@styled-icons/material/DonutLarge'
diff --git a/packages/components/src/Layout/Box/Box.story.tsx b/packages/components/src/Layout/Box/Box.story.tsx
@@ -24,7 +24,7 @@
 
  */
 
-import { LogoRings } from '@looker/icons/src/LogoRings'
+import { LogoRings } from '@looker/icons/lib/LogoRings'
 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
 import { VIEWPORT_MAP } from '../../utils-storybook'
diff --git a/packages/components/src/Layout/Semantics/Story/ExamplePage.story.tsx b/packages/components/src/Layout/Semantics/Story/ExamplePage.story.tsx
@@ -26,7 +26,7 @@
 
 import React from 'react'
 import styled from 'styled-components'
-import { LogoRings } from '@looker/icons/src/LogoRings'
+import { LogoRings } from '@looker/icons/lib/LogoRings'
 import { Story } from '@storybook/react/types-6-0'
 import { PieChart } from '@styled-icons/material/PieChart'
 import { VerifiedUser } from '@styled-icons/material/VerifiedUser'
diff --git a/packages/components/src/Layout/Space/Space.story.tsx b/packages/components/src/Layout/Space/Space.story.tsx
@@ -25,7 +25,7 @@
  */
 
 import { Story } from '@storybook/react/types-6-0'
-import { Account } from '@looker/icons/src/Account'
+import { Account } from '@looker/icons/lib/Account'
 import { Delete } from '@styled-icons/material/Delete'
 import React from 'react'
 import { Button, IconButton } from '../../Button'
diff --git a/packages/components/src/List/List.story.tsx b/packages/components/src/List/List.story.tsx
@@ -26,7 +26,7 @@
 
 import React, { FC, useState } from 'react'
 import { Story } from '@storybook/react/types-6-0'
-import { Pivot } from '@looker/icons/src/Pivot'
+import { Pivot } from '@looker/icons/lib/Pivot'
 import { DateRange } from '@styled-icons/material-outlined/DateRange'
 import { Box, Grid, Space } from '../Layout'
 import { DensityRamp } from './types'
diff --git a/packages/components/src/List/ListItem.story.tsx b/packages/components/src/List/ListItem.story.tsx
@@ -25,7 +25,7 @@
  */
 
 import React, { FC } from 'react'
-import { Pivot } from '@looker/icons/src/Pivot'
+import { Pivot } from '@looker/icons/lib/Pivot'
 import { Story } from '@storybook/react/types-6-0'
 import { PersonOutline } from '@styled-icons/material/PersonOutline'
 import { DateRange } from '@styled-icons/material-outlined/DateRange'
diff --git a/packages/components/src/List/ListItem.test.tsx b/packages/components/src/List/ListItem.test.tsx
@@ -28,7 +28,7 @@ import 'jest-styled-components'
 import React from 'react'
 import { renderWithTheme } from '@looker/components-test-utils'
 import { fireEvent, configure, screen } from '@testing-library/react'
-import { Beaker } from '@looker/icons/src/Beaker'
+import { Beaker } from '@looker/icons/lib/Beaker'
 
 import { ListItem } from './ListItem'
 
diff --git a/packages/components/src/Menu/Menu.story.tsx b/packages/components/src/Menu/Menu.story.tsx
@@ -23,11 +23,11 @@
  SOFTWARE.
 
  */
-import { Account } from '@looker/icons/src/Account'
-import { IdeFileDashboard } from '@looker/icons/src/IdeFileDashboard'
-import { IdeFileDocument } from '@looker/icons/src/IdeFileDocument'
-import { IdeFileGeneric } from '@looker/icons/src/IdeFileGeneric'
-import { LogoRings } from '@looker/icons/src/LogoRings'
+import { Account } from '@looker/icons/lib/Account'
+import { IdeFileDashboard } from '@looker/icons/lib/IdeFileDashboard'
+import { IdeFileDocument } from '@looker/icons/lib/IdeFileDocument'
+import { IdeFileGeneric } from '@looker/icons/lib/IdeFileGeneric'
+import { LogoRings } from '@looker/icons/lib/LogoRings'
 import { AddAlert } from '@styled-icons/material/AddAlert'
 import { Chat } from '@styled-icons/material/Chat'
 import { Create } from '@styled-icons/material/Create'
diff --git a/packages/components/src/Menu/MenuItem.test.tsx b/packages/components/src/Menu/MenuItem.test.tsx
@@ -27,7 +27,7 @@
 import 'jest-styled-components'
 import React from 'react'
 import { renderWithTheme } from '@looker/components-test-utils'
-import { Beaker } from '@looker/icons/src/Beaker'
+import { Beaker } from '@looker/icons/lib/Beaker'
 import { screen, fireEvent } from '@testing-library/react'
 
 import { MenuItem } from './MenuItem'
diff --git a/packages/components/src/Pagination/Pagination.tsx b/packages/components/src/Pagination/Pagination.tsx
@@ -27,8 +27,8 @@
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 import styled from 'styled-components'
-import { DoubleChevronLeft } from '@looker/icons/src/DoubleChevronLeft'
-import { DoubleChevronRight } from '@looker/icons/src/DoubleChevronRight'
+import { DoubleChevronLeft } from '@looker/icons/lib/DoubleChevronLeft'
+import { DoubleChevronRight } from '@looker/icons/lib/DoubleChevronRight'
 import { ChevronLeft } from '@styled-icons/material-rounded/ChevronLeft'
 import { ChevronRight } from '@styled-icons/material-rounded/ChevronRight'
 import { Flex } from '../Layout'
diff --git a/packages/components/src/Tree/stories/FieldPicker.story.tsx b/packages/components/src/Tree/stories/FieldPicker.story.tsx
@@ -26,7 +26,7 @@
 
 import React, { FC, ReactNode, useState } from 'react'
 import styled from 'styled-components'
-import { Pivot } from '@looker/icons/src/Pivot'
+import { Pivot } from '@looker/icons/lib/Pivot'
 import { FilterList } from '@styled-icons/material/FilterList'
 import { MoreVert } from '@styled-icons/material/MoreVert'
 import { Info } from '@styled-icons/material-outlined/Info'
diff --git a/packages/components/src/Tree/stories/FileTree.story.tsx b/packages/components/src/Tree/stories/FileTree.story.tsx
@@ -25,8 +25,8 @@
  */
 
 import React from 'react'
-import { IdeDimension } from '@looker/icons/src/IdeDimension'
-import { IdeDimensionGroup } from '@looker/icons/src/IdeDimensionGroup'
+import { IdeDimension } from '@looker/icons/lib/IdeDimension'
+import { IdeDimensionGroup } from '@looker/icons/lib/IdeDimensionGroup'
 import { Story } from '@storybook/react/types-6-0'
 import { Explore } from '@styled-icons/material-outlined/Explore'
 import { TableChart } from '@styled-icons/material-outlined/TableChart'
diff --git a/packages/components/src/Tree/stories/LongLabels.story.tsx b/packages/components/src/Tree/stories/LongLabels.story.tsx
@@ -25,8 +25,8 @@
  */
 
 import React from 'react'
-import { IdeDimension } from '@looker/icons/src/IdeDimension'
-import { IdeDimensionGroup } from '@looker/icons/src/IdeDimensionGroup'
+import { IdeDimension } from '@looker/icons/lib/IdeDimension'
+import { IdeDimensionGroup } from '@looker/icons/lib/IdeDimensionGroup'
 import { Info } from '@styled-icons/material/Info'
 import { Explore } from '@styled-icons/material-outlined/Explore'
 import { TableChart } from '@styled-icons/material-outlined/TableChart'
diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
@@ -81,7 +81,7 @@ module.exports = {
       {
         paths: [
           {
-            message: "Please import icons from '@looker/icons/src/SomeIcon'",
+            message: "Please import icons from '@looker/icons/lib/SomeIcon'",
             name: '@looker/icons',
           },
           {
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -18,7 +18,8 @@
     "access": "public"
   },
   "scripts": {
-    "prebuild": "./bin/prebuild.js"
+    "prebuild": "./bin/prebuild.js",
+    "postprebuild": "babel src --env-name esm --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --no-comments && tsc -b tsconfig.build.json"
   },
   "dependencies": {
     "@styled-icons/styled-icon": "^10.6.3"
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,7 +5,8 @@
     "pretty": true,
     "baseUrl": ".",
     "paths": {
-      "@looker/*": ["packages/*/src"]
+      "@looker/*": ["packages/*/src"],
+      "@looker/icons": ["packages/icons/lib"]
     }
   },
   "include": [
