chore(components): sub in storybook for styleguidist (#7549)

Co-authored-by: Mike Cousins <[email protected]>

.eslintignore

@@ -26,5 +26,8 @@ lerna.json
 !api/release-notes.md
 !app-shell/build/release-notes.md
 
+# components library
+storybook-static
+
 # mypy
 **/.mypy_cache/**

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   root: true,
 
   parserOptions: {
-    project: './*/tsconfig.json',
+    project: './tsconfig-eslint.json',
   },
 
   extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'],
@@ -97,6 +97,13 @@ module.exports = {
         'jest/no-done-callback': 'warn',
       },
     },
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'import/no-default-export': 'off',
+        '@typescript-eslint/consistent-type-assertions': 'off',
+      },
+    },
     {
       files: ['**/cypress/**'],
       extends: ['plugin:cypress/recommended'],

.flowconfig

@@ -38,7 +38,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'
@@ -78,17 +79,16 @@ jobs:
           yarn config set cache-folder ./.yarn-cache
           make setup-js
       - name: 'build components'
-        run: |
-          make -C components
+        run: make -C components
       - name: 'upload github artifact'
         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'
-    needs: ["js-unit-test", "build-components"]
+    needs: ['js-unit-test', 'build-components']
     if: github.event_name != 'pull_request'
     steps:
       - uses: 'actions/checkout@v2'

.gitignore

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

.storybook/main.js

@@ -0,0 +1,13 @@
+'use strict'
+
+const { baseConfig } = require('@opentrons/webpack-config')
+
+module.exports = {
+  webpackFinal: config => ({
+    ...config,
+    module: { ...config.module, rules: baseConfig.module.rules },
+    plugins: [...config.plugins, ...baseConfig.plugins],
+  }),
+  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

@@ -12,14 +12,15 @@ SHELL := bash
 PATH := $(shell yarn bin):$(PATH)
 
 API_DIR := api
+APP_SHELL_DIR := app-shell
+COMPONENTS_DIR := components
 DISCOVERY_CLIENT_DIR := discovery-client
 LABWARE_LIBRARY_DIR := labware-library
+NOTIFY_SERVER_DIR := notify-server
 PROTOCOL_DESIGNER_DIR := protocol-designer
 SHARED_DATA_DIR := shared-data
 UPDATE_SERVER_DIR := update-server
 ROBOT_SERVER_DIR := robot-server
-NOTIFY_SERVER_DIR := notify-server
-APP_SHELL_DIR := app-shell
 
 # This may be set as an environment variable (and is by CI tasks that upload
 # to test pypi) to add a .dev extension to the python package versions. If
@@ -57,6 +58,7 @@ clean-py:
 .PHONY: clean-js
 clean-js: clean-ts
 	$(MAKE) -C $(DISCOVERY_CLIENT_DIR) clean
+	$(MAKE) -C $(COMPONENTS_DIR) clean
 
 .PHONY: setup-py
 setup-py:

components/Makefile

@@ -1,7 +1,7 @@
 # opentrons component library makefile
 
 # dev server port
-port ?= 8081
+port ?= 6060
 
 # type definitions
 typedefs := $(shell yarn -s shx find "lib/**/*.d.ts")
@@ -13,21 +13,16 @@ flow_out := $(patsubst lib/%.d.ts,flow-types/%.js.flow,$(typedefs))
 .PHONY: all
 all: clean dist
 
-.PHONY: setup
-setup:
-	yarn
-
 .PHONY: clean
 clean:
-	yarn shx rm -rf dist
+	yarn --cwd .. shx rm -rf storybook-static
 
 # artifacts
 #####################################################################
 
 .PHONY: dist
-dist: export NODE_ENV := development
 dist:
-	yarn styleguidist build
+	yarn --cwd .. build-storybook
 
 .PHONY: flow-types
 flow-types: $(flow_out)
@@ -39,6 +34,5 @@ flow-types/%.js.flow: lib/%.d.ts
 #####################################################################
 
 .PHONY: dev
-build: export NODE_ENV := development
 dev:
-	yarn styleguidist server
+	yarn --cwd .. start-storybook --port $(port)

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