chore(components): sub in storybook for styleguidist

.eslintignore

@@ -16,6 +16,8 @@ components/flow-types/**
 app-shell/lib/**
 discovery-client/lib/**
 **/lib/**/*.d.ts
+# TODO add story files back to linting once the are parsed by tsc
+**/*.stories.tsx
 
 # prettier
 **/package.json

.flowconfig

@@ -37,7 +37,7 @@ merge_timeout=300
 esproposal.optional_chaining=enable
 ; default value of 19 (16 * 2^19 bytes > 8ish MB) isn't quite enough and can
 ; result in flow crashing with `Unhandled exception: SharedMem.Hash_table_full`
-sharedmemory.hash_table_pow=20
+sharedmemory.hash_table_pow=21
 ; enable types-first mode for speed and explicitness
 ; https://flow.org/en/docs/lang/types-first/
 types_first=true

.github/workflows/components-test-build-deploy.yaml

@@ -5,6 +5,7 @@ name: 'Components test, build, and deploy'
 on:
   pull_request:
     paths:
+      - 'Makefile'
       - 'components/**'
       - 'webpack-config/**'
       - 'package.json'
@@ -84,7 +85,7 @@ jobs:
         uses: actions/upload-artifact@v2
         with:
           name: 'components-artifact'
-          path: components/dist
+          path: storybook-static
   deploy-components:
     name: 'deploy components artifact to S3'
     runs-on: 'ubuntu-18.04'

.gitignore

@@ -122,3 +122,6 @@ api/pyproject.toml
 
 # typescript incremental files
 *.tsbuildinfo
+
+# Static storybook build artifacts
+storybook-static/

.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path')
+
+const { baseConfig } = require('@opentrons/webpack-config')
+
+module.exports = {
+  webpackFinal: config => {
+    // grab rules to parse out story files
+    const storyRules = config.module.rules.filter(r => {
+      return String(r.test).includes('stor') ? r : null
+    })
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [...baseConfig.module.rules, ...storyRules],
+      },
+    }
+  },
+  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}
+
+import React from 'react'
+
+import { GlobalStyle } from '../app/src/atoms/GlobalStyle'
+
+// Global decorator to apply the styles to all stories
+export const decorators = [
+  Story => (
+    <>
+      <GlobalStyle />
+      <Story />
+    </>
+  ),
+]

Makefile

@@ -225,6 +225,10 @@ circular-dependencies-js:
 	madge $(and $(CI),--no-spinner --no-color) --circular labware-library/src/index.tsx
 	madge $(and $(CI),--no-spinner --no-color) --circular app/src/index.js
 
+.PHONY: storybook
+storybook:
+	yarn storybook
+
 .PHONY: bump
 bump:
 	@echo "Bumping versions"

components/Makefile

@@ -19,15 +19,15 @@ setup:
 
 .PHONY: clean
 clean:
-	yarn shx rm -rf dist
+	yarn shx rm -rf ../storybook-static
 
 # artifacts
 #####################################################################
 
 .PHONY: dist
 dist: export NODE_ENV := development
 dist:
-	yarn styleguidist build
+	(cd .. && yarn build-storybook)
 
 .PHONY: flow-types
 flow-types: $(flow_out)
@@ -41,4 +41,4 @@ flow-types/%.js.flow: lib/%.d.ts
 .PHONY: dev
 build: export NODE_ENV := development
 dev:
-	yarn styleguidist server
+	(cd .. && yarn storybook)

components/package.json

@@ -36,5 +36,6 @@
     "react-remove-scroll": "1.0.8",
     "react-select": "3.0.8",
     "styled-components": "5.1.1"
-  }
+  },
+  "devDependencies": {}
 }

components/src/alerts/AlertItem.stories.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { AlertItem } from './AlertItem'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/AlertItem',
+  component: AlertItem,
+  argTypes: { onCloseClick: { action: 'clicked' } },
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof AlertItem>> = args => (
+  <AlertItem {...args} />
+)
+
+export const Basic = Template.bind({})
+Basic.args = {
+  type: 'success',
+  title: 'good job!',
+}
+
+export const OverriddenIcon = Template.bind({})
+OverriddenIcon.args = {
+  type: 'info',
+  title: 'Alert with overridden icon',
+  icon: { name: 'pause-circle' },
+}
+
+export const Stackable: Story<
+  React.ComponentProps<typeof AlertItem>
+> = args => (
+  <div>
+    <Template {...args} type="warning" title={'Warning with close button'} />
+    <Template
+      {...args}
+      onCloseClick={undefined}
+      type="warning"
+      title={'Warning with no close button'}
+    />
+    <Template {...args} type="warning" title={'Warning with no children'} />
+    <Template
+      {...args}
+      type="warning"
+      title={'Warning with React Node children'}
+    >
+      <p>Some additional info</p>
+    </Template>
+  </div>
+)

components/src/alerts/AlertItem.tsx

@@ -8,7 +8,6 @@ import type { IconProps } from '../icons'
 
 export type AlertType = 'success' | 'warning' | 'error' | 'info'
 
-// TODO(bc, 2021-03-23): create and use AlertType Enum here and in rest of file
 export interface AlertItemProps {
   /** name constant of the icon to display */
   type: AlertType