Get the storefront up and running again after Typescript migration (#846

) * 🚧 Work in progress Stuck on styled.css.withConfig is not a function * 🚧 Try to get storefront up and running again Try to get storefront up and running again -m Strange things are happening with styled.css.withConfig, had to disable the displayName in the config to avoid the error. Should not be necassary * ♻️ Swap the props table component with a generel link to storybook * ➕ Use EDS from npm instead of local version.
equinor · Nov 9, 2020 · 60a2641 · 60a2641
1 parent 183d790
commit 60a2641
Show file tree

Hide file tree

Showing 29 changed files with 214 additions and 73 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,3 +1,3 @@
 shared-workspace-shrinkwrap = true
-link-workspace-packages = true
+link-workspace-packages = false
 package-lock = true
diff --git a/apps/storefront/docs/components/accordion/usage.mdx b/apps/storefront/docs/components/accordion/usage.mdx
@@ -47,8 +47,8 @@ import { Accordion } from '@equinor/eds-core-react'
 
 ### Accordion
 
-<PropsTable props={Accordion.__docgenInfo.props} />
+<PropsTable props={Accordion} />
 
 ### AccordionItem
 
-<PropsTable props={Accordion.AccordionItem.__docgenInfo.props} />
+<PropsTable props={Accordion.AccordionItem} />
diff --git a/apps/storefront/docs/components/buttons/usage.mdx b/apps/storefront/docs/components/buttons/usage.mdx
@@ -37,4 +37,4 @@ import { Button } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Button.__docgenInfo.props} />
+<PropsTable props={Button} />
diff --git a/apps/storefront/docs/components/cards/usage.mdx b/apps/storefront/docs/components/cards/usage.mdx
@@ -45,20 +45,20 @@ import { Card } from '@equinor/eds-core-react'
 
 ### Card
 
-<PropsTable props={Card.__docgenInfo.props} />
+<PropsTable props={Card} />
 
 ### CardHeader
 
-<PropsTable props={Card.CardHeader.__docgenInfo.props} />
+<PropsTable props={Card.CardHeader} />
 
 ### CardHeaderTitle
 
-<PropsTable props={Card.CardHeaderTitle.__docgenInfo.props} />
+<PropsTable props={Card.CardHeaderTitle} />
 
 ### CardMedia
 
-<PropsTable props={Card.CardMedia.__docgenInfo.props} />
+<PropsTable props={Card.CardMedia} />
 
 ### CardActions
 
-<PropsTable props={Card.CardActions.__docgenInfo.props} />
+<PropsTable props={Card.CardActions} />
diff --git a/apps/storefront/docs/components/chips/usage.mdx b/apps/storefront/docs/components/chips/usage.mdx
@@ -42,4 +42,4 @@ import { Chip } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Chip.__docgenInfo.props} />
+<PropsTable props={Chip} />
diff --git a/apps/storefront/docs/components/divider/usage.mdx b/apps/storefront/docs/components/divider/usage.mdx
@@ -30,4 +30,4 @@ import { Divider } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Divider.__docgenInfo.props} />
+<PropsTable props={Divider} />
diff --git a/apps/storefront/docs/components/lists/usage.mdx b/apps/storefront/docs/components/lists/usage.mdx
@@ -27,8 +27,8 @@ import { List } from '@equinor/eds-core-react'
 
 ### List
 
-<PropsTable props={List.__docgenInfo.props} />
+<PropsTable props={List} />
 
 ### ListItem
 
-<PropsTable props={List.ListItem.__docgenInfo.props} />
+<PropsTable props={List.ListItem} />
diff --git a/apps/storefront/docs/components/navigation-table-of-contents/usage.mdx b/apps/storefront/docs/components/navigation-table-of-contents/usage.mdx
@@ -36,8 +36,8 @@ import { TableOfContents } from '@equinor/eds-core-react'
 
 ### TableOfContents
 
-<PropsTable props={TableOfContents.__docgenInfo.props} />
+<PropsTable props={TableOfContents} />
 
 ### LinkItem
 
-<PropsTable props={TableOfContents.LinkItem.__docgenInfo.props} />
+<PropsTable props={TableOfContents.LinkItem} />
diff --git a/apps/storefront/docs/components/navigation-tabs/usage.mdx b/apps/storefront/docs/components/navigation-tabs/usage.mdx
@@ -38,20 +38,20 @@ import { Tabs } from '@equinor/eds-core-react'
 
 ### Tabs
 
-<PropsTable props={Tabs.__docgenInfo.props} />
+<PropsTable props={Tabs} />
 
 ### TabList
 
-<PropsTable props={Tabs.TabList.__docgenInfo.props} />
+<PropsTable props={Tabs.TabList} />
 
 ### Tab
 
-<PropsTable props={Tabs.Tab.__docgenInfo.props} />
+<PropsTable props={Tabs.Tab} />
 
 ### TabPanels
 
-<PropsTable props={Tabs.TabPanels.__docgenInfo.props} />
+<PropsTable props={Tabs.TabPanels} />
 
 ### TabPanel
 
-<PropsTable props={Tabs.TabPanel.__docgenInfo.props} />
+<PropsTable props={Tabs.TabPanel} />
diff --git a/apps/storefront/docs/components/navigation-top-bar/usage.mdx b/apps/storefront/docs/components/navigation-top-bar/usage.mdx
@@ -39,16 +39,16 @@ import { TopBar } from '@equinor/eds-core-react'
 
 ### TopBar
 
-<PropsTable props={TopBar.__docgenInfo.props} />
+<PropsTable props={TopBar} />
 
 ### Header
 
-<PropsTable props={TopBar.Header.__docgenInfo.props} />
+<PropsTable props={TopBar.Header} />
 
 ### CustomContent
 
-<PropsTable props={TopBar.CustomContent.__docgenInfo.props} />
+<PropsTable props={TopBar.CustomContent} />
 
 ### Actions
 
-<PropsTable props={TopBar.Actions.__docgenInfo.props} />
+<PropsTable props={TopBar.Actions} />
diff --git a/apps/storefront/docs/components/notification-banner/usage.mdx b/apps/storefront/docs/components/notification-banner/usage.mdx
@@ -41,16 +41,16 @@ import { Banner } from '@equinor/eds-core-react'
 
 ### Banner
 
-<PropsTable props={Banner.__docgenInfo.props} />
+<PropsTable props={Banner} />
 
 ### BannerMessage
 
-<PropsTable props={Banner.BannerMessage.__docgenInfo.props} />
+<PropsTable props={Banner.BannerMessage} />
 
 ### BannerIcon
 
-<PropsTable props={Banner.BannerIcon.__docgenInfo.props} />
+<PropsTable props={Banner.BannerIcon} />
 
 ### BannerActions
 
-<PropsTable props={Banner.BannerActions.__docgenInfo.props} />
+<PropsTable props={Banner.BannerActions} />
diff --git a/apps/storefront/docs/components/notification-dialog/usage.mdx b/apps/storefront/docs/components/notification-dialog/usage.mdx
@@ -38,16 +38,16 @@ import { Dialog } from '@equinor/eds-core-react'
 
 ### Dialog
 
-<PropsTable props={Dialog.__docgenInfo.props} />
+<PropsTable props={Dialog} />
 
 ### Actions
 
-<PropsTable props={Dialog.Actions.__docgenInfo.props} />
+<PropsTable props={Dialog.Actions} />
 
 ### Title
 
-<PropsTable props={Dialog.Title.__docgenInfo.props} />
+<PropsTable props={Dialog.Title} />
 
 ### CustomContent
 
-<PropsTable props={Dialog.CustomContent.__docgenInfo.props} />
+<PropsTable props={Dialog.CustomContent} />
diff --git a/apps/storefront/docs/components/notification-snackbar/usage.mdx b/apps/storefront/docs/components/notification-snackbar/usage.mdx
@@ -35,8 +35,8 @@ import { Snackbar } from '@equinor/eds-core-react'
 
 ### Snackbar
 
-<PropsTable props={Snackbar.__docgenInfo.props} />
+<PropsTable props={Snackbar} />
 
 ### SnackbarAction
 
-<PropsTable props={Snackbar.SnackbarAction.__docgenInfo.props} />
+<PropsTable props={Snackbar.SnackbarAction} />
diff --git a/apps/storefront/docs/components/popovers/usage.mdx b/apps/storefront/docs/components/popovers/usage.mdx
@@ -37,16 +37,16 @@ import { Popover } from '@equinor/eds-core-react'
 
 ### Popover
 
-<PropsTable props={Popover.__docgenInfo.props} />
+<PropsTable props={Popover} />
 
 ### PopoverAnchor
 
-<PropsTable props={Popover.PopoverAnchor.__docgenInfo.props} />
+<PropsTable props={Popover.PopoverAnchor} />
 
 ### PopoverTitle
 
-<PropsTable props={Popover.PopoverTitle.__docgenInfo.props} />
+<PropsTable props={Popover.PopoverTitle} />
 
 ### PopoverContent
 
-<PropsTable props={Popover.PopoverContent.__docgenInfo.props} />
+<PropsTable props={Popover.PopoverContent} />
diff --git a/apps/storefront/docs/components/progress-indicators/usage.mdx b/apps/storefront/docs/components/progress-indicators/usage.mdx
@@ -32,16 +32,16 @@ import {
 
 ### CircularProgress
 
-<PropsTable props={CircularProgress.__docgenInfo.props} />
+<PropsTable props={CircularProgress} />
 
 ### DotProgress
 
-<PropsTable props={DotProgress.__docgenInfo.props} />
+<PropsTable props={DotProgress} />
 
 ### LinearProgress
 
-<PropsTable props={LinearProgress.__docgenInfo.props} />
+<PropsTable props={LinearProgress} />
 
 ### StarProgress
 
-<PropsTable props={StarProgress.__docgenInfo.props} />
+<PropsTable props={StarProgress} />
diff --git a/apps/storefront/docs/components/scrim/usage.mdx b/apps/storefront/docs/components/scrim/usage.mdx
@@ -25,4 +25,4 @@ import { Scrim } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Scrim.__docgenInfo.props} />
+<PropsTable props={Scrim} />
diff --git a/apps/storefront/docs/components/search/usage.mdx b/apps/storefront/docs/components/search/usage.mdx
@@ -38,4 +38,4 @@ import { Search } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Search.__docgenInfo.props} />
+<PropsTable props={Search} />
diff --git a/apps/storefront/docs/components/selection-controls/usage.mdx b/apps/storefront/docs/components/selection-controls/usage.mdx
@@ -27,12 +27,12 @@ import { Checkbox, Switch, Radio } from '@equinor/eds-core-react'
 
 ### Switch
 
-<PropsTable props={Switch.__docgenInfo.props} />
+<PropsTable props={Switch} />
 
 ### Checkbox
 
-<PropsTable props={Checkbox.__docgenInfo.props} />
+<PropsTable props={Checkbox} />
 
 ### Radio
 
-<PropsTable props={Radio.__docgenInfo.props} />
+<PropsTable props={Radio} />
diff --git a/apps/storefront/docs/components/side-sheet/usage.mdx b/apps/storefront/docs/components/side-sheet/usage.mdx
@@ -44,4 +44,4 @@ import { SideSheet } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={SideSheet.__docgenInfo.props} />
+<PropsTable props={SideSheet} />
diff --git a/apps/storefront/docs/components/slider/usage.mdx b/apps/storefront/docs/components/slider/usage.mdx
@@ -40,4 +40,4 @@ import { Slider } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Slider.__docgenInfo.props} />
+<PropsTable props={Slider} />
diff --git a/apps/storefront/docs/components/table/usage.mdx b/apps/storefront/docs/components/table/usage.mdx
@@ -76,20 +76,20 @@ Select all the `Table` header layers and convert them to a frame/artboard by usi
 
 ### Table
 
-<PropsTable props={Table.__docgenInfo.props} />
+<PropsTable props={Table} />
 
 ### Head
 
-<PropsTable props={Table.Head.__docgenInfo.props} />
+<PropsTable props={Table.Head} />
 
 ### Body
 
-<PropsTable props={Table.Body.__docgenInfo.props} />
+<PropsTable props={Table.Body} />
 
 ### Row
 
-<PropsTable props={Table.Row.__docgenInfo.props} />
+<PropsTable props={Table.Row} />
 
 ### Cell
 
-<PropsTable props={Table.Cell.__docgenInfo.props} />
+<PropsTable props={Table.Cell} />
diff --git a/apps/storefront/docs/components/text-fields/usage.mdx b/apps/storefront/docs/components/text-fields/usage.mdx
@@ -36,4 +36,4 @@ import { TextField } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={TextField.__docgenInfo.props} />
+<PropsTable props={TextField} />
diff --git a/apps/storefront/docs/components/tooltip/usage.mdx b/apps/storefront/docs/components/tooltip/usage.mdx
@@ -32,4 +32,4 @@ import { Tooltip } from '@equinor/eds-core-react'
 
 ## API
 
-<PropsTable props={Tooltip.__docgenInfo.props} />
+<PropsTable props={Tooltip} />
diff --git a/apps/storefront/doczrc.js b/apps/storefront/doczrc.js
@@ -1,6 +1,7 @@
 /* eslint import/no-default-export: off*/
 export default {
   files: '**/*.mdx',
+  typescript: true,
   // will be prefixed in <title>
   themeConfig: {
     // “The initialColorMode flag no longer works, use initialColorModeName instead” it says on https://theme-ui.com/migrating/

diff --git a/apps/storefront/gatsby-config.js b/apps/storefront/gatsby-config.js
@@ -64,7 +64,10 @@ module.exports = {
       },
     },
     {
-      resolve: 'gatsby-plugin-styled-components',
+      resolve: `gatsby-plugin-styled-components`,
+      options: {
+        displayName: false,
+      },
     },
     {
       resolve: 'gatsby-plugin-load-script',

diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -13,12 +13,13 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.28",
-    "@equinor/eds-core-react": "workspace:*",
-    "@equinor/eds-icons": "workspace:*",
-    "@equinor/eds-tokens": "workspace:*",
+    "@equinor/eds-core-react": "^0.6.2",
+    "@equinor/eds-icons": "^0.4.0",
+    "@equinor/eds-tokens": "^0.4.0",
     "@mdx-js/react": "^1.6.6",
     "@mikaelkristiansson/domready": "^1.0.10",
     "@reach/router": "^1.3.4",
+    "babel-plugin-styled-components": "^1.11.1",
     "docz": "^2.3.1",
     "focus-visible": "^5.1.0",
     "gatsby": "^2.23.10",