diff --git a/.storybook/custom-addons/strictmode/index.js b/.storybook/custom-addons/strictmode/index.js deleted file mode 100644 index 49415f62acf..00000000000 --- a/.storybook/custom-addons/strictmode/index.js +++ /dev/null @@ -1,37 +0,0 @@ -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 deleted file mode 100644 index b226fe1e0b3..00000000000 --- a/.storybook/custom-addons/strictmode/register.js +++ /dev/null @@ -1,40 +0,0 @@ -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 5d73778c058..24a0f04b09d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -11,11 +11,13 @@ module.exports = { 'storybook-dark-mode', './custom-addons/provider/register', './custom-addons/descriptions/register', - './custom-addons/theme/register', - './custom-addons/strictmode/register' + './custom-addons/theme/register' ], typescript: { check: false, reactDocgen: false - } + }, + reactOptions: { + strictMode: process.env.STRICT_MODE + }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index bc696a5a6b5..0b268d77a1b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,7 +2,6 @@ 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 @@ -30,6 +29,5 @@ export const decorators = [ ), - withStrictModeSwitcher, withProviderSwitcher ]; diff --git a/package.json b/package.json index 5679a401113..049bc351fb4 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "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",