Add proptypes for Storybook (#304)

* conditionally bundle proptypes

* only build umd bundle for storybook

* use env variable when building core-react for storybook

* configure storybook

* combine mdx and csf stories

* rewrite stories

* remove unused imports

* add back unused import that turned out to be used

* override docs styles

* don’t use equinor type in code

* use style prop instead of extended component

apps/storybook-react/.storybook/components/Preview.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Preview as StorybookPreview } from '@storybook/addon-docs/blocks'
+
+const Preview = ({ children, ...props }) => (
+  <StorybookPreview {...props}>{children}</StorybookPreview>
+)

apps/storybook-react/.storybook/main.js

@@ -1,10 +1,16 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.jsx'],
+  stories: ['../docs/**/*.story.mdx', '../stories/**/*.stor(y|ies).(jsx|mdx)'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
     '@storybook/addon-a11y',
     '@storybook/addon-knobs',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    },
   ],
 }

apps/storybook-react/.storybook/preview-head.html

@@ -4,3 +4,12 @@
   rel="stylesheet"
   href="https://eds-static.equinor.com/font/equinor-font.css"
 />
+
+<style>
+  .sbdocs.sbdocs *:not(code):not(.token) {
+    font-family: Equinor, sans-serif !important;
+  }
+  .sbdocs.sbdocs-a {
+    font-size: inherit;
+  }
+</style>

apps/storybook-react/.storybook/preview.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { addParameters, addDecorator } from '@storybook/react'
 import { withA11y } from '@storybook/addon-a11y'
 import { createGlobalStyle } from 'styled-components'
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -10,6 +11,10 @@ const GlobalStyle = createGlobalStyle`
 `
 
 addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
   options: {
     storySort: (a, b) =>
       a[1].kind === b[1].kind

apps/storybook-react/Dockerfile.dev

@@ -21,7 +21,7 @@ COPY ./apps/storybook-react ./storybook-react
 # build storybook and dependencies
 WORKDIR /app
 RUN pnpm --filter @equinor/eds-core-react install && \
-  pnpm --filter @equinor/eds-core-react run build
+  pnpm --filter @equinor/eds-core-react run build:for-storybook
 
 RUN pnpm --filter @equinor/eds-tokens install && \
   pnpm --filter @equinor/eds-tokens run build

apps/storybook-react/docs/Intro.story.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+import { Typography } from '@equinor/eds-core-react'
+
+<Meta title="Articles|Intro" />
+
+# @equinor/eds-core-react 
+
+[![Version](https://img.shields.io/npm/v/@equinor/eds-core-react)](https://www.npmjs.com/package/@equinor/eds-core-react)
+
+<Typography variant="ingress">This is the storybook for the React implementation of the Equinor Design System. We have a <a href="https://eds.equinor.com/">storefront</a> with extensive documentation, this storybook is just for showcasing the components and as a place to put developer documentation until we move that to the storefront.</Typography>
+
+If you want to get in touch with the team, you’ll find us in the Equinor slack channel [#eds-design-system](https://equinor.slack.com/archives/CJT20H1B9). The `@equinor/eds-core-react` package can be installed from [NPM](https://equinor.slack.com/archives/CJT20H1B9) – and the source code (not public yet) is on [Github](https://github.com/equinor/design-system).

apps/storybook-react/package.json

@@ -17,20 +17,24 @@
     "@storybook/react": "^5.3.2",
     "babel-runtime": "^6.26.0",
     "core-js": "^2.6.11",
-    "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@mdx-js/loader": "^1.5.8",
+    "@storybook/addon-a11y": "^5.3.12",
+    "@storybook/addon-actions": "^5.3.2",
+    "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.2",
     "@storybook/addon-links": "^5.3.2",
     "@storybook/addon-storysource": "^5.3.2",
-    "@storybook/source-loader": "^5.3.2",
-    "@storybook/addon-a11y": "^5.3.12",
-    "@storybook/addon-actions": "^5.3.2",
     "@storybook/addons": "^5.3.2",
+    "@storybook/source-loader": "^5.3.2",
     "@storybook/theming": "^5.3.2",
-    "babel-loader": "^8.0.6"
+    "babel-loader": "^8.1.0",
+    "react": "^16.13.1",
+    "react-is": "^16.13.1"
   }
 }