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",