diff --git a/.storybook/custom-addons/strictmode/index.js b/.storybook/custom-addons/strictmode/index.js new file mode 100644 index 00000000000..49415f62acf --- /dev/null +++ b/.storybook/custom-addons/strictmode/index.js @@ -0,0 +1,37 @@ +import {addons, makeDecorator} from '@storybook/addons'; +import {getQueryParams} from '@storybook/client-api'; +import React, {StrictMode, useEffect, useState} from 'react'; + +function StrictModeDecorator(props) { + let {children} = props; + let [isStrict, setStrict] = useState(getQueryParams()?.strict === 'true' || false); + + useEffect(() => { + let channel = addons.getChannel(); + let updateStrict = (val) => { + setStrict(val); + }; + channel.on('strict/updated', updateStrict); + return () => { + channel.removeListener('strict/updated', updateStrict); + }; + }, []); + + return isStrict ? ( + + {children} + + ) : children; +} + +export const withStrictModeSwitcher = makeDecorator({ + name: 'withStrictModeSwitcher', + parameterName: 'strictModeSwitcher', + wrapper: (getStory, context) => { + return ( + + {getStory(context)} + + ); + } +}); diff --git a/.storybook/custom-addons/strictmode/register.js b/.storybook/custom-addons/strictmode/register.js new file mode 100644 index 00000000000..b226fe1e0b3 --- /dev/null +++ b/.storybook/custom-addons/strictmode/register.js @@ -0,0 +1,40 @@ +import {addons, types} from '@storybook/addons'; +import {getQueryParams} from '@storybook/client-api'; +import React, {useEffect, useState} from 'react'; + +const StrictModeToolBar = ({api}) => { + let channel = addons.getChannel(); + let [isStrict, setStrict] = useState(getQueryParams()?.strict === 'true' || false); + let onChange = () => { + setStrict((old) => { + channel.emit('strict/updated', !old); + return !old; + }) + }; + + useEffect(() => { + api.setQueryParams({ + 'strict': isStrict + }); + }); + + return ( +
+
+ +
+
+ ); +}; + +addons.register('StrictModeSwitcher', (api) => { + addons.add('StrictModeSwitcher', { + title: 'Strict mode switcher', + type: types.TOOL, + //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active + match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: () => + }); +}); diff --git a/.storybook/main.js b/.storybook/main.js index 24a0f04b09d..5d73778c058 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -11,13 +11,11 @@ module.exports = { 'storybook-dark-mode', './custom-addons/provider/register', './custom-addons/descriptions/register', - './custom-addons/theme/register' + './custom-addons/theme/register', + './custom-addons/strictmode/register' ], typescript: { check: false, reactDocgen: false - }, - reactOptions: { - strictMode: process.env.STRICT_MODE - }, + } }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 0b268d77a1b..bc696a5a6b5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,6 +2,7 @@ import {configureActions} from '@storybook/addon-actions'; import React from 'react'; import {VerticalCenter} from './layout'; import {withProviderSwitcher} from './custom-addons/provider'; +import {withStrictModeSwitcher} from './custom-addons/strictmode'; // decorator order matters, the last one will be the outer most @@ -29,5 +30,6 @@ export const decorators = [ ), + withStrictModeSwitcher, withProviderSwitcher ]; diff --git a/package.json b/package.json index 049bc351fb4..5679a401113 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8", "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8", "start": "cross-env NODE_ENV=storybook start-storybook -p 9003 --ci -c '.storybook'", - "start-strict": "cross-env NODE_ENV=storybook STRICT_MODE=1 start-storybook -p 9003 --ci -c '.storybook'", "build:storybook": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook", "build:storybook-16": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16", "build:storybook-17": "build-storybook -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",