From a0cdbdef45aff9ef62a96ffc050bfdbbf4b8704c Mon Sep 17 00:00:00 2001 From: Steven Pautz Date: Sat, 15 Aug 2020 16:06:46 -0400 Subject: [PATCH 1/3] Migrate from Storybook Knobs to Controls --- .storybook/main.js | 6 +- package.json | 1 - .../src/components/DemoContainer.tsx | 18 ++++- .../react-hibernate/stories/index.stories.tsx | 5 +- .../stories/pauseableContainers.stories.tsx | 15 ++-- .../stories/index.stories.tsx | 72 ++++++++++++++----- yarn.lock | 63 ++-------------- 7 files changed, 89 insertions(+), 91 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 34ab14e..2aaec05 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -6,5 +6,9 @@ module.exports = { "addons": [ "@storybook/addon-links", "@storybook/addon-essentials" - ] + ], + webpackFinal: async (config) => { + config.performance.hints = false; + return config; + }, } diff --git a/package.json b/package.json index 10a6d73..b3fb89f 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "@babel/preset-typescript": "^7.10.4", "@storybook/addon-actions": "^6.0.10", "@storybook/addon-essentials": "^6.0.10", - "@storybook/addon-knobs": "^6.0.10", "@storybook/addon-links": "^6.0.10", "@storybook/react": "^6.0.10", "@testing-library/jest-dom": "^5.11.3", diff --git a/packages/dev-helpers/src/components/DemoContainer.tsx b/packages/dev-helpers/src/components/DemoContainer.tsx index 0e434df..26c500a 100644 --- a/packages/dev-helpers/src/components/DemoContainer.tsx +++ b/packages/dev-helpers/src/components/DemoContainer.tsx @@ -11,6 +11,9 @@ import { incrementAction, DevHelperState } from '../redux'; export interface DemoContainerProps { title: string; withRedux?: boolean; + onMount?: () => void; + onRender?: () => void; + onUnmount?: () => void; } const selectEntireState = (state: DevHelperState): DevHelperState => state; @@ -18,7 +21,7 @@ const selectEntireState = (state: DevHelperState): DevHelperState => state; let totalInstanceCount = 0; const DemoContainer: React.FC = (props: DemoContainerProps): ReactElement => { - const { title, withRedux } = props; + const { title, withRedux, onMount, onRender, onUnmount } = props; // A simple per-Component instance counter const myInstanceNumRef = React.useRef(0); @@ -35,11 +38,22 @@ const DemoContainer: React.FC = (props: DemoContainerProps): React.useEffect((): (() => void) => { console.log(`DemoContainer ${titleWithMyInstanceNum} mounted`); - return (): void => console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`); + if (onMount) { + onMount(); + } + return (): void => { + console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`); + if (onUnmount) { + onUnmount(); + } + }; }, []); React.useEffect(() => { console.log(`DemoContainer ${titleWithMyInstanceNum} rendered`); + if (onRender) { + onRender(); + } }); // Our own local state diff --git a/packages/react-hibernate/stories/index.stories.tsx b/packages/react-hibernate/stories/index.stories.tsx index f635e91..f8c29d7 100644 --- a/packages/react-hibernate/stories/index.stories.tsx +++ b/packages/react-hibernate/stories/index.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { ReactNode } from 'react'; -import { withKnobs } from '@storybook/addon-knobs'; import 'typeface-roboto'; @@ -9,9 +8,9 @@ import { DemoContainer } from 'react-hibernate-dev-helpers'; import { HibernationProvider, HibernatingSubtree } from '../src'; export default { - title: 'Basic usage', + title: 'React Hibernate (unreleased)', component: HibernationProvider, - decorators: [withKnobs], + decorators: [], }; export const Default = (): ReactNode => { diff --git a/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx b/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx index 8cbe90c..83529fe 100644 --- a/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx +++ b/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx @@ -1,5 +1,4 @@ import React, { ReactNode, useCallback, useState } from 'react'; -import { withKnobs } from '@storybook/addon-knobs'; import Button from '@material-ui/core/Button'; import Chip from '@material-ui/core/Chip'; @@ -15,7 +14,7 @@ import ReduxMonitor from './ReduxMonitor'; export default { title: 'React Pauseable Containers', - decorators: [reduxDecorator, withKnobs], + decorators: [reduxDecorator], }; export const PauseableComponentContainerStory = (): ReactNode => { @@ -29,7 +28,7 @@ export const PauseableComponentContainerStory = (): ReactNode => { <PauseableComponentContainer> - The parent state includes a count variable which is passed to each child. + The parent state has a count, which gets passed to each child. Each child is wrapped in a PauseableComponentContainer whose{' '} @@ -48,7 +47,7 @@ export const PauseableComponentContainerStory = (): ReactNode => { ); }; -PauseableComponentContainerStory.story = { name: 'PauseableComponentContainer' }; +PauseableComponentContainerStory.storyName = 'PauseableComponentContainer'; const PauseableReduxContainerDemo = () => { return ( @@ -57,7 +56,7 @@ const PauseableReduxContainerDemo = () => { <PauseableReduxContainer> - The parent state includes a count variable which is passed to each child. + Redux state has a count, which each child displays. Each child is wrapped in a PauseableReduxContainer whose{' '} @@ -76,10 +75,8 @@ const PauseableReduxContainerDemo = () => { export const PauseableReduxContainerStory = (): ReactNode => { return ; }; -PauseableReduxContainerStory.story = { - name: 'PauseableReduxContainer', - decorators: [reduxDecorator], -}; +PauseableReduxContainerStory.storyName = 'PauseableReduxContainer'; +PauseableReduxContainerStory.decorators = [reduxDecorator]; // @TODO: A story where the PauseableReduxItems can dispatch actions // const dispatchWhenPaused = boolean('Allow dispatches from paused children', false); diff --git a/packages/react-router-hibernate/stories/index.stories.tsx b/packages/react-router-hibernate/stories/index.stories.tsx index 36c78e0..7be6bd1 100644 --- a/packages/react-router-hibernate/stories/index.stories.tsx +++ b/packages/react-router-hibernate/stories/index.stories.tsx @@ -1,25 +1,32 @@ import * as React from 'react'; -import { ReactElement, ReactNode } from 'react'; +import { ReactElement, ReactNode, useEffect } from 'react'; import { MemoryRouter, Redirect, Route, RouteProps } from 'react-router'; import { NavLink } from 'react-router-dom'; import Typography from '@material-ui/core/Typography'; -import { withKnobs, number } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; import 'typeface-roboto'; import { DemoContainer } from 'react-hibernate-dev-helpers'; -import { HibernatingRoute, HibernatingSwitch } from '../src'; +import { HibernatingRoute, HibernatingSwitch, HibernatingSwitchProps } from '../src'; export default { - title: 'Basic usage', + title: 'React Router Hibernate', component: HibernatingSwitch, - decorators: [withKnobs], + decorators: [], }; -export const MaxCacheTimeOneMinute = (): ReactNode => { - const maxCacheSize = number('maxCacheSize', -1); - const maxCacheTime = number('maxCacheTime', 60 * 1000); +const cacheOptionArgTypes = { + maxCacheSize: { control: { type: 'range', min: 0, max: 10, step: 1 } }, + maxCacheTime: { control: { type: 'range', min: 0, max: 600 * 1000, step: 1000 } }, + WrapperComponent: { control: { disable: true } }, +}; + +// maxCacheTime: starts with an infinite cache size and a short cache time + +export const MaxCacheTimeStory = (args: HibernatingSwitchProps): ReactNode => { + const { maxCacheSize, maxCacheTime } = args; return ( @@ -34,12 +41,17 @@ export const MaxCacheTimeOneMinute = (): ReactNode => { Route3 id=3 - After leaving a screen, its state will be retained for one minute + After leaving a screen, its state will be retained for ten seconds. Use the maxCacheTime + control to set any time up to ten minutes. - + @@ -51,10 +63,17 @@ export const MaxCacheTimeOneMinute = (): ReactNode => { ); }; +MaxCacheTimeStory.storyName = 'maxCacheTime'; +MaxCacheTimeStory.args = { + maxCacheSize: 0, + maxCacheTime: 10 * 1000, +}; +MaxCacheTimeStory.argTypes = cacheOptionArgTypes; + +// maxCacheTime: starts with a cache size of 1 and an infinite cache time -export const MaxCacheSizeOne = (): ReactNode => { - const maxCacheSize = number('maxCacheSize', 1); - const maxCacheTime = number('maxCacheTime', -1); +export const MaxCacheSizeStory = (args: HibernatingSwitchProps): ReactNode => { + const { maxCacheSize, maxCacheTime } = args; return ( @@ -68,7 +87,10 @@ export const MaxCacheSizeOne = (): ReactNode => { {' | '} Route3 id=3 - Only the last screen you visited will be retained + + Only the last screen you visited will be retained. Use the maxCacheSize control to set the + number of screens to retain. + @@ -84,12 +106,19 @@ export const MaxCacheSizeOne = (): ReactNode => { ); }; +MaxCacheSizeStory.storyName = 'maxCacheSize'; +MaxCacheSizeStory.args = { + maxCacheSize: 1, + maxCacheTime: 0, +}; +MaxCacheSizeStory.argTypes = cacheOptionArgTypes; + +// Mix and match const MyCustomRoute = (props: RouteProps): ReactElement => ; -export const MixRoutesAndHibernatingRoutes = (): ReactNode => { - const maxCacheSize = number('maxCacheSize', 0); - const maxCacheTime = number('maxCacheTime', 0); +export const MixedRouteTypesStory = (args: HibernatingSwitchProps): ReactNode => { + const { maxCacheSize, maxCacheTime } = args; return ( @@ -104,7 +133,8 @@ export const MixRoutesAndHibernatingRoutes = (): ReactNode => { Hibernating id=3 - The first two screens are never retained, the last three are + The first two screens are never hibernated/restored, the last three are. Use the controld to + adjust settings. @@ -122,3 +152,9 @@ export const MixRoutesAndHibernatingRoutes = (): ReactNode => { ); }; +MixedRouteTypesStory.storyName = 'Mixed route types'; +MixedRouteTypesStory.args = { + maxCacheSize: 5, + maxCacheTime: 60 * 1000, +}; +MixedRouteTypesStory.argTypes = cacheOptionArgTypes; diff --git a/yarn.lock b/yarn.lock index 7aa8419..c1e7ca8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1099,7 +1099,7 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9": +"@emotion/cache@^10.0.27": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ== @@ -1109,7 +1109,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.20", "@emotion/core@^10.0.9": +"@emotion/core@^10.0.20": version "10.0.34" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.34.tgz#a643889dc32bdde829482539c9438a026631187c" integrity sha512-Kcs8WHZG1NgaVFQsSpgN07G0xpfPAKUclwKvUqKrYrJovezl9uTz++1M4JfXHrgFVEiJ5QO46hMo1ZDDfvY/tw== @@ -1121,7 +1121,7 @@ "@emotion/sheet" "0.9.4" "@emotion/utils" "0.11.3" -"@emotion/css@^10.0.27", "@emotion/css@^10.0.9": +"@emotion/css@^10.0.27": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c" integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw== @@ -2594,31 +2594,6 @@ regenerator-runtime "^0.13.3" ts-dedent "^1.1.1" -"@storybook/addon-knobs@^6.0.10": - version "6.0.10" - resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.0.10.tgz#b5a1b15d6712ffbb8d4cedc9cb74016bbbe010cb" - integrity sha512-EnvWgBrHvCnxL8HLK3kTY11QvnGVI+cG/8mFyVKoMGv3JcriOG6nq94S4K9H4BMjQYv+T/Z5140m508RsbRuzg== - dependencies: - "@storybook/addons" "6.0.10" - "@storybook/api" "6.0.10" - "@storybook/channels" "6.0.10" - "@storybook/client-api" "6.0.10" - "@storybook/components" "6.0.10" - "@storybook/core-events" "6.0.10" - "@storybook/theming" "6.0.10" - copy-to-clipboard "^3.0.8" - core-js "^3.0.1" - escape-html "^1.0.3" - fast-deep-equal "^3.1.1" - global "^4.3.2" - lodash "^4.17.15" - prop-types "^15.7.2" - qs "^6.6.0" - react-color "^2.17.0" - react-lifecycles-compat "^3.0.4" - react-select "^3.0.8" - regenerator-runtime "^0.13.3" - "@storybook/addon-links@^6.0.10": version "6.0.10" resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.0.10.tgz#6637a5b29e6c39fa647ad77d0ab49a808cec5a1a" @@ -6994,7 +6969,7 @@ escalade@^3.0.2: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4" integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ== -escape-html@^1.0.3, escape-html@~1.0.3: +escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= @@ -10649,11 +10624,6 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.1" -memoize-one@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" - integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== - memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -12621,7 +12591,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -12943,13 +12913,6 @@ react-hotkeys@2.0.0: dependencies: prop-types "^15.6.1" -react-input-autosize@^2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2" - integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw== - dependencies: - prop-types "^15.5.8" - react-inspector@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.0.1.tgz#8a30f3d488c4f40203624bbe24800f508ae05d3a" @@ -13035,20 +12998,6 @@ react-router@5.2.0, react-router@^5.2.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-select@^3.0.8: - version "3.1.0" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27" - integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/cache" "^10.0.9" - "@emotion/core" "^10.0.9" - "@emotion/css" "^10.0.9" - memoize-one "^5.0.0" - prop-types "^15.6.0" - react-input-autosize "^2.2.2" - react-transition-group "^4.3.0" - react-sizeme@^2.6.7: version "2.6.12" resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e" @@ -13089,7 +13038,7 @@ react-textarea-autosize@^8.1.1: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react-transition-group@^4.3.0, react-transition-group@^4.4.0: +react-transition-group@^4.4.0: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== From ecac5a0e7bffcca9c9e0130bf549407906329dc9 Mon Sep 17 00:00:00 2001 From: Steven Pautz Date: Sat, 15 Aug 2020 17:21:51 -0400 Subject: [PATCH 2/3] Upgrade to Storybook 6 --- .storybook/main.js | 1 + .../src/components/DemoContainer.tsx | 13 +++--- .../stories/pauseableContainers.stories.tsx | 5 +++ .../stories/index.stories.tsx | 40 ++++++++++--------- 4 files changed, 35 insertions(+), 24 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 2aaec05..80f7f1a 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { "../packages/*/stories/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ + '@storybook/addon-actions', "@storybook/addon-links", "@storybook/addon-essentials" ], diff --git a/packages/dev-helpers/src/components/DemoContainer.tsx b/packages/dev-helpers/src/components/DemoContainer.tsx index 26c500a..6dfedac 100644 --- a/packages/dev-helpers/src/components/DemoContainer.tsx +++ b/packages/dev-helpers/src/components/DemoContainer.tsx @@ -11,9 +11,9 @@ import { incrementAction, DevHelperState } from '../redux'; export interface DemoContainerProps { title: string; withRedux?: boolean; - onMount?: () => void; - onRender?: () => void; - onUnmount?: () => void; + onMount?: (instanceTitle: string) => void; + onRender?: (instanceTitle: string) => void; + onUnmount?: (instanceTitle: string) => void; } const selectEntireState = (state: DevHelperState): DevHelperState => state; @@ -39,12 +39,13 @@ const DemoContainer: React.FC = (props: DemoContainerProps): React.useEffect((): (() => void) => { console.log(`DemoContainer ${titleWithMyInstanceNum} mounted`); if (onMount) { - onMount(); + // Wait an extra tick for Storybook to catch up, or else actions won't be logged + setTimeout(() => onMount(titleWithMyInstanceNum)); } return (): void => { console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`); if (onUnmount) { - onUnmount(); + setTimeout(() => onUnmount(titleWithMyInstanceNum)); } }; }, []); @@ -52,7 +53,7 @@ const DemoContainer: React.FC = (props: DemoContainerProps): React.useEffect(() => { console.log(`DemoContainer ${titleWithMyInstanceNum} rendered`); if (onRender) { - onRender(); + onRender(titleWithMyInstanceNum); } }); diff --git a/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx b/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx index 83529fe..dc6bf8d 100644 --- a/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx +++ b/packages/react-pauseable-containers/stories/pauseableContainers.stories.tsx @@ -15,6 +15,11 @@ import ReduxMonitor from './ReduxMonitor'; export default { title: 'React Pauseable Containers', decorators: [reduxDecorator], + parameters: { + options: { + showPanel: false, + }, + }, }; export const PauseableComponentContainerStory = (): ReactNode => { diff --git a/packages/react-router-hibernate/stories/index.stories.tsx b/packages/react-router-hibernate/stories/index.stories.tsx index 7be6bd1..c58527d 100644 --- a/packages/react-router-hibernate/stories/index.stories.tsx +++ b/packages/react-router-hibernate/stories/index.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ReactElement, ReactNode, useEffect } from 'react'; +import { ReactElement, ReactNode } from 'react'; import { MemoryRouter, Redirect, Route, RouteProps } from 'react-router'; import { NavLink } from 'react-router-dom'; import Typography from '@material-ui/core/Typography'; @@ -15,14 +15,22 @@ export default { title: 'React Router Hibernate', component: HibernatingSwitch, decorators: [], + parameters: { + options: { + showPanel: true, + }, + }, }; -const cacheOptionArgTypes = { +const storyArgTypes = { maxCacheSize: { control: { type: 'range', min: 0, max: 10, step: 1 } }, maxCacheTime: { control: { type: 'range', min: 0, max: 600 * 1000, step: 1000 } }, WrapperComponent: { control: { disable: true } }, }; +const logMountAction = action('mount'); +const logUnmountAction = action('unmount'); + // maxCacheTime: starts with an infinite cache size and a short cache time export const MaxCacheTimeStory = (args: HibernatingSwitchProps): ReactNode => { @@ -47,17 +55,13 @@ export const MaxCacheTimeStory = (args: HibernatingSwitchProps): ReactNode => { - + - + - + @@ -68,7 +72,7 @@ MaxCacheTimeStory.args = { maxCacheSize: 0, maxCacheTime: 10 * 1000, }; -MaxCacheTimeStory.argTypes = cacheOptionArgTypes; +MaxCacheTimeStory.argTypes = storyArgTypes; // maxCacheTime: starts with a cache size of 1 and an infinite cache time @@ -94,13 +98,13 @@ export const MaxCacheSizeStory = (args: HibernatingSwitchProps): ReactNode => { - + - + - + @@ -111,7 +115,7 @@ MaxCacheSizeStory.args = { maxCacheSize: 1, maxCacheTime: 0, }; -MaxCacheSizeStory.argTypes = cacheOptionArgTypes; +MaxCacheSizeStory.argTypes = storyArgTypes; // Mix and match @@ -139,13 +143,13 @@ export const MixedRouteTypesStory = (args: HibernatingSwitchProps): ReactNode => - + - + - + @@ -157,4 +161,4 @@ MixedRouteTypesStory.args = { maxCacheSize: 5, maxCacheTime: 60 * 1000, }; -MixedRouteTypesStory.argTypes = cacheOptionArgTypes; +MixedRouteTypesStory.argTypes = storyArgTypes; From 51295bb2084164d47b87886987612d809e3d2d6f Mon Sep 17 00:00:00 2001 From: Steven Pautz Date: Sat, 15 Aug 2020 17:29:29 -0400 Subject: [PATCH 3/3] Deploy storybook to gh-pages --- package.json | 3 ++ yarn.lock | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 125 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b3fb89f..4c7338d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "packages:dev": "lerna exec yon dev", "packages:all": "lerna exec yon all", "____ INDIVIDUAL COMMANDS ___________________________________________": "", + "demo:prepare": "yarn install && yarn build-storybook", + "demo:deploy": "gh-pages -d ./storybook-static", "format": "prettier --write \"**/*.*\"", "format:checkup": "prettier --list-different \"**/*.*\"", "lint": "eslint \"**/*.{js,jsx,json,ts,tsx}\"", @@ -67,6 +69,7 @@ "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.6", "fork-ts-checker-webpack-plugin": "^5.0.14", + "gh-pages": "^3.1.0", "husky": "^4.2.5", "jest": "^26.4.0", "lerna": "^3.22.1", diff --git a/yarn.lock b/yarn.lock index c1e7ca8..9087cc0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4244,6 +4244,13 @@ async@0.9.x: resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0= +async@^2.6.1: + version "2.6.3" + resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" + integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg== + dependencies: + lodash "^4.17.14" + asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" @@ -5522,7 +5529,7 @@ comma-separated-tokens@^1.0.0: resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea" integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw== -commander@^2.19.0, commander@^2.20.0: +commander@^2.18.0, commander@^2.19.0, commander@^2.20.0: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== @@ -6745,6 +6752,11 @@ elliptic@^6.5.3: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" +email-addresses@^3.0.1: + version "3.1.0" + resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb" + integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg== + emittery@^0.7.1: version "0.7.1" resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.1.tgz#c02375a927a40948c0345cc903072597f5270451" @@ -7461,6 +7473,28 @@ filelist@^1.0.1: dependencies: minimatch "^3.0.4" +filename-reserved-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4" + integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q= + +filenamify-url@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50" + integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A= + dependencies: + filenamify "^1.0.0" + humanize-url "^1.0.0" + +filenamify@^1.0.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5" + integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU= + dependencies: + filename-reserved-regex "^1.0.0" + strip-outer "^1.0.0" + trim-repeated "^1.0.0" + filesize@6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.0.1.tgz#f850b509909c7c86f7e450ea19006c31c2ed3d2f" @@ -7908,6 +7942,19 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" +gh-pages@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-3.1.0.tgz#ec3ed0f6a6e3fc3d888758fa018f08191c96bd55" + integrity sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w== + dependencies: + async "^2.6.1" + commander "^2.18.0" + email-addresses "^3.0.1" + filenamify-url "^1.0.0" + find-cache-dir "^3.3.1" + fs-extra "^8.1.0" + globby "^6.1.0" + git-raw-commits@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.0.tgz#d92addf74440c14bcc5c83ecce3fb7f8a79118b5" @@ -8014,7 +8061,7 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= -glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -8087,6 +8134,17 @@ globby@8.0.2: pify "^3.0.0" slash "^1.0.0" +globby@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" + integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw= + dependencies: + array-union "^1.0.1" + glob "^7.0.3" + object-assign "^4.0.1" + pify "^2.0.0" + pinkie-promise "^2.0.0" + globby@^9.2.0: version "9.2.0" resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d" @@ -8526,6 +8584,14 @@ humanize-ms@^1.2.1: dependencies: ms "^2.0.0" +humanize-url@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff" + integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8= + dependencies: + normalize-url "^1.0.0" + strip-url-auth "^1.0.0" + husky@^4.2.5: version "4.2.5" resolved "https://registry.yarnpkg.com/husky/-/husky-4.2.5.tgz#2b4f7622673a71579f901d9885ed448394b5fa36" @@ -11259,6 +11325,16 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= +normalize-url@^1.0.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" + integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= + dependencies: + object-assign "^4.0.1" + prepend-http "^1.0.0" + query-string "^4.1.0" + sort-keys "^1.0.0" + normalize-url@^3.0.0, normalize-url@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" @@ -12447,6 +12523,11 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= +prepend-http@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" + integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= + prettier-linter-helpers@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" @@ -12714,6 +12795,14 @@ qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== +query-string@^4.1.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" + integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= + dependencies: + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -14124,6 +14213,13 @@ socks@~2.3.2: ip "1.1.5" smart-buffer "^4.1.0" +sort-keys@^1.0.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" + integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= + dependencies: + is-plain-obj "^1.0.0" + sort-keys@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128" @@ -14367,6 +14463,11 @@ stream-shift@^1.0.0: resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d" integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ== +strict-uri-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" + integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= + string-argv@0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da" @@ -14571,6 +14672,18 @@ strip-json-comments@^3.1.0: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +strip-outer@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631" + integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg== + dependencies: + escape-string-regexp "^1.0.2" + +strip-url-auth@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae" + integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164= + strong-log-transformer@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10" @@ -15039,6 +15152,13 @@ trim-off-newlines@^1.0.0: resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3" integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM= +trim-repeated@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21" + integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE= + dependencies: + escape-string-regexp "^1.0.2" + trim-trailing-lines@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"