From be85f3e823fc8adebe6303595b0434afffb1e038 Mon Sep 17 00:00:00 2001 From: Brian Arthur Cooper Date: Mon, 3 May 2021 15:22:02 -0400 Subject: [PATCH] chore(components): sub in storybook for styleguidist (#7549) Co-authored-by: Mike Cousins --- .eslintignore | 3 + .eslintrc.js | 9 +- .flowconfig | 2 +- .../components-test-build-deploy.yaml | 8 +- .gitignore | 3 + .storybook/main.js | 13 + .storybook/preview.js | 17 + Makefile | 6 +- components/Makefile | 14 +- components/src/alerts/AlertItem.md | 157 - components/src/alerts/AlertItem.stories.tsx | 49 + components/src/alerts/AlertItem.tsx | 1 - components/src/buttons/FlatButton.md | 82 - components/src/buttons/IconButton.md | 44 - components/src/buttons/OutlineButton.md | 43 - components/src/buttons/PrimaryButton.md | 57 - components/src/deck/Deck.md | 5 - components/src/deck/Labware.md | 23 - components/src/deck/LabwareRender.md | 48 - components/src/deck/LabwareRender.stories.tsx | 92 + components/src/deck/Module.md | 5 - components/src/deck/Module.stories.tsx | 61 + components/src/deck/RobotWorkSpace.md | 40 - .../src/deck/RobotWorkSpace.stories.tsx | 76 + components/src/forms/CheckboxField.md | 45 - .../src/forms/CheckboxField.stories.tsx | 31 + components/src/forms/CheckboxField.tsx | 6 + components/src/forms/DropdownField.md | 77 - .../src/forms/DropdownField.stories.tsx | 44 + components/src/forms/FormGroup.md | 25 - components/src/forms/FormGroup.stories.tsx | 23 + components/src/forms/InputField.md | 77 - components/src/forms/InputField.stories.tsx | 39 + components/src/forms/RadioGroup.md | 28 - components/src/forms/RadioGroup.stories.tsx | 40 + components/src/forms/Select.css | 9 +- components/src/forms/Select.md | 87 - components/src/forms/Select.stories.tsx | 117 + components/src/forms/SelectField.md | 35 - components/src/forms/ToggleField.md | 14 - components/src/forms/ToggleField.stories.tsx | 31 + .../src/forms/__tests__/SelectField.test.tsx | 6 +- components/src/icons/Icon.md | 26 - components/src/icons/Icon.stories.tsx | 33 + components/src/icons/NotificationIcon.md | 11 - components/src/instrument/InfoItem.md | 3 - .../src/instrument/InstrumentDiagram.md | 35 - .../instrument/InstrumentDiagram.stories.tsx | 42 + components/src/instrument/InstrumentGroup.md | 15 - .../instrument/InstrumentGroup.stories.tsx | 88 + components/src/instrument/PipetteSelect.md | 29 - .../src/instrument/PipetteSelect.stories.tsx | 31 + .../src/interaction-enhancers/ClickOutside.md | 26 - .../interaction-enhancers/HandleKeypress.md | 24 - components/src/lists/CollapsibleItem.tsx | 3 + components/src/lists/ListItem.md | 29 - components/src/lists/ListItem.tsx | 2 + components/src/lists/SidePanelGroup.md | 37 - components/src/lists/SidePanelGroup.tsx | 2 + components/src/lists/TitledList.md | 59 - components/src/lists/TitledList.tsx | 3 + components/src/modals/AlertModal.md | 124 - components/src/modals/BaseModal.md | 54 - components/src/modals/ContinueModal.md | 26 - components/src/modals/Modal.md | 34 - components/src/modals/Modal.stories.tsx | 112 + components/src/modals/ModalPage.md | 19 - components/src/modals/Overlay.md | 39 - components/src/modals/SpinnerModal.md | 7 - components/src/modals/SpinnerModalPage.md | 16 - components/src/nav/SidePanel.stories.tsx | 29 + components/src/primitives/Box.md | 28 - components/src/primitives/Box.stories.tsx | 21 + components/src/primitives/Box.tsx | 2 +- components/src/primitives/Btn.md | 51 - components/src/primitives/Btn.stories.tsx | 60 + components/src/primitives/Btn.tsx | 4 - components/src/primitives/Flex.md | 23 - components/src/primitives/Flex.stories.tsx | 35 + components/src/primitives/Link.md | 32 - components/src/primitives/Link.stories.tsx | 24 + components/src/primitives/Svg.stories.tsx | 36 + components/src/primitives/Text.md | 24 - components/src/primitives/Text.stories.tsx | 17 + components/src/slotmap/SlotMap.md | 31 - components/src/slotmap/SlotMap.tsx | 3 + components/src/structure/Card.md | 55 - components/src/structure/Card.stories.tsx | 28 + components/src/structure/LabeledValue.md | 5 - .../src/structure/LabeledValue.stories.tsx | 17 + components/src/structure/PageTabs.tsx | 2 + components/src/structure/Pill.md | 15 - components/src/structure/Pill.tsx | 2 + components/src/structure/Splash.md | 5 - components/src/structure/Splash.stories.tsx | 24 + components/src/structure/TitleBar.md | 43 - components/src/structure/TitleBar.stories.tsx | 42 + components/src/tabbedNav/NavTab.md | 44 - components/src/tabbedNav/index.ts | 3 + components/src/tooltips/DeprecatedTooltip.md | 49 - components/src/tooltips/HoverTooltip.md | 57 - components/src/tooltips/Tooltip.md | 83 - components/src/tooltips/Tooltip.stories.tsx | 94 + .../__tests__/useHoverTooltip.test.tsx | 6 +- components/styleguide.config.js | 136 - components/tsconfig.json | 3 +- flow-typed/npm/react-styleguidist_vx.x.x.js | 1467 ------ package.json | 5 +- shared-data/tsconfig.json | 2 +- tsconfig-eslint.json | 19 + yarn.lock | 4381 ++++++++++++++--- 111 files changed, 5093 insertions(+), 4435 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js delete mode 100644 components/src/alerts/AlertItem.md create mode 100644 components/src/alerts/AlertItem.stories.tsx delete mode 100644 components/src/buttons/FlatButton.md delete mode 100644 components/src/buttons/IconButton.md delete mode 100644 components/src/buttons/OutlineButton.md delete mode 100644 components/src/buttons/PrimaryButton.md delete mode 100644 components/src/deck/Deck.md delete mode 100644 components/src/deck/Labware.md delete mode 100644 components/src/deck/LabwareRender.md create mode 100644 components/src/deck/LabwareRender.stories.tsx delete mode 100644 components/src/deck/Module.md create mode 100644 components/src/deck/Module.stories.tsx delete mode 100644 components/src/deck/RobotWorkSpace.md create mode 100644 components/src/deck/RobotWorkSpace.stories.tsx delete mode 100644 components/src/forms/CheckboxField.md create mode 100644 components/src/forms/CheckboxField.stories.tsx delete mode 100644 components/src/forms/DropdownField.md create mode 100644 components/src/forms/DropdownField.stories.tsx delete mode 100644 components/src/forms/FormGroup.md create mode 100644 components/src/forms/FormGroup.stories.tsx delete mode 100644 components/src/forms/InputField.md create mode 100644 components/src/forms/InputField.stories.tsx delete mode 100644 components/src/forms/RadioGroup.md create mode 100644 components/src/forms/RadioGroup.stories.tsx delete mode 100644 components/src/forms/Select.md create mode 100644 components/src/forms/Select.stories.tsx delete mode 100644 components/src/forms/SelectField.md delete mode 100644 components/src/forms/ToggleField.md create mode 100644 components/src/forms/ToggleField.stories.tsx delete mode 100644 components/src/icons/Icon.md create mode 100644 components/src/icons/Icon.stories.tsx delete mode 100644 components/src/icons/NotificationIcon.md delete mode 100644 components/src/instrument/InfoItem.md delete mode 100644 components/src/instrument/InstrumentDiagram.md create mode 100644 components/src/instrument/InstrumentDiagram.stories.tsx delete mode 100644 components/src/instrument/InstrumentGroup.md create mode 100644 components/src/instrument/InstrumentGroup.stories.tsx delete mode 100644 components/src/instrument/PipetteSelect.md create mode 100644 components/src/instrument/PipetteSelect.stories.tsx delete mode 100644 components/src/interaction-enhancers/ClickOutside.md delete mode 100644 components/src/interaction-enhancers/HandleKeypress.md delete mode 100644 components/src/lists/ListItem.md delete mode 100644 components/src/lists/SidePanelGroup.md delete mode 100644 components/src/lists/TitledList.md delete mode 100644 components/src/modals/AlertModal.md delete mode 100644 components/src/modals/BaseModal.md delete mode 100644 components/src/modals/ContinueModal.md delete mode 100644 components/src/modals/Modal.md create mode 100644 components/src/modals/Modal.stories.tsx delete mode 100644 components/src/modals/ModalPage.md delete mode 100644 components/src/modals/Overlay.md delete mode 100644 components/src/modals/SpinnerModal.md delete mode 100644 components/src/modals/SpinnerModalPage.md create mode 100644 components/src/nav/SidePanel.stories.tsx delete mode 100644 components/src/primitives/Box.md create mode 100644 components/src/primitives/Box.stories.tsx delete mode 100644 components/src/primitives/Btn.md create mode 100644 components/src/primitives/Btn.stories.tsx delete mode 100644 components/src/primitives/Flex.md create mode 100644 components/src/primitives/Flex.stories.tsx delete mode 100644 components/src/primitives/Link.md create mode 100644 components/src/primitives/Link.stories.tsx create mode 100644 components/src/primitives/Svg.stories.tsx delete mode 100644 components/src/primitives/Text.md create mode 100644 components/src/primitives/Text.stories.tsx delete mode 100644 components/src/slotmap/SlotMap.md delete mode 100644 components/src/structure/Card.md create mode 100644 components/src/structure/Card.stories.tsx delete mode 100644 components/src/structure/LabeledValue.md create mode 100644 components/src/structure/LabeledValue.stories.tsx delete mode 100644 components/src/structure/Pill.md delete mode 100644 components/src/structure/Splash.md create mode 100644 components/src/structure/Splash.stories.tsx delete mode 100644 components/src/structure/TitleBar.md create mode 100644 components/src/structure/TitleBar.stories.tsx delete mode 100644 components/src/tabbedNav/NavTab.md delete mode 100644 components/src/tooltips/DeprecatedTooltip.md delete mode 100644 components/src/tooltips/HoverTooltip.md delete mode 100644 components/src/tooltips/Tooltip.md create mode 100644 components/src/tooltips/Tooltip.stories.tsx delete mode 100644 components/styleguide.config.js delete mode 100644 flow-typed/npm/react-styleguidist_vx.x.x.js create mode 100644 tsconfig-eslint.json diff --git a/.eslintignore b/.eslintignore index 89e5119e967..1138ac413a8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -26,5 +26,8 @@ lerna.json !api/release-notes.md !app-shell/build/release-notes.md +# components library +storybook-static + # mypy **/.mypy_cache/** diff --git a/.eslintrc.js b/.eslintrc.js index daf265f4d5d..b00107a516e 100644 --- a/.eslintrc.js +++ b/.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'], diff --git a/.flowconfig b/.flowconfig index 83705fe154a..a792b070250 100644 --- a/.flowconfig +++ b/.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 diff --git a/.github/workflows/components-test-build-deploy.yaml b/.github/workflows/components-test-build-deploy.yaml index 5c8d22dd17c..b108d79d12a 100644 --- a/.github/workflows/components-test-build-deploy.yaml +++ b/.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' diff --git a/.gitignore b/.gitignore index 8af7101b844..170725f29ef 100755 --- a/.gitignore +++ b/.gitignore @@ -122,3 +122,6 @@ api/pyproject.toml # typescript incremental files *.tsbuildinfo + +# Static storybook build artifacts +storybook-static/ \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 00000000000..0fd53c7b80d --- /dev/null +++ b/.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'], +} diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 00000000000..cc5da362027 --- /dev/null +++ b/.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 => ( + <> + + + + ), +] diff --git a/Makefile b/Makefile index 7e693c2d6b2..952cfb554d4 100755 --- a/Makefile +++ b/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: diff --git a/components/Makefile b/components/Makefile index cfe491a3d4a..eb838a54fcd 100644 --- a/components/Makefile +++ b/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) diff --git a/components/src/alerts/AlertItem.md b/components/src/alerts/AlertItem.md deleted file mode 100644 index 135cb59ded0..00000000000 --- a/components/src/alerts/AlertItem.md +++ /dev/null @@ -1,157 +0,0 @@ -Basic usage: - -```js -const [state, setState] = React.useState({ alert: 'success' }) -;
- {state.alert && ( - setState({ alert: '' })} - title={'good job!'} - /> - )} -
-``` - -```js -const [state, setState] = React.useState({ alert: 'warning' }) -;
- {state.alert && ( - setState({ alert: '' })} - title={'some sort of warning...'} - /> - )} -
-``` - -```js -
- -
-``` - -```js -const [state, setState] = React.useState({ alert: 'info' }) -;
- {state.alert && ( - setState({ alert: '' })} - title={'some informative text...'} - /> - )} -
-``` - -Override the default icon with iconName: - -```js -const [state, setState] = React.useState({ alert: 'info' }) -;
- {state.alert && ( - setState({ alert: '' })} - icon={{ name: 'pause-circle' }} - title={'alert icon default override'} - /> - )} -
-``` - -Add additional information with children: - -```js -const [state, setState] = React.useState({ alert: 'warning' }) -;
- {state.alert && ( - setState({ alert: '' })} - title={'some sort of warning...'} - > -

More informative warning title

-

- and some info on how to fix it -

- - )} -
-``` - -Stackable: - -```js -
- console.log('dismiss warning 1')} - title={ - 'Warning 1 with longer text longer text longer text longer text longer text longer text has X' - } - /> - - - console.log('dismiss warning 3')} - title={'Warning 3'} - > -

Some additional info

- - console.log('dismiss warning 4')} - title={'Warning 4'} - /> -
-``` diff --git a/components/src/alerts/AlertItem.stories.tsx b/components/src/alerts/AlertItem.stories.tsx new file mode 100644 index 00000000000..23607281b75 --- /dev/null +++ b/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> = 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 +> = args => ( +
+