Enable strict mode in storybook on a per story basis (#3333)

* add checkbox to enable strict mode on a story by story basis

* checkbox for strict

* getting rid of storybook globals in favor of state

the globals are updating anymore for some reason...

* me dumb, me forget to convert to boolean

* removing style

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

.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 ? (
+    <StrictMode>
+      {children}
+    </StrictMode>
+  ) : children;
+}
+
+export const withStrictModeSwitcher = makeDecorator({
+  name: 'withStrictModeSwitcher',
+  parameterName: 'strictModeSwitcher',
+  wrapper: (getStory, context) => {
+    return (
+      <StrictModeDecorator>
+        {getStory(context)}
+      </StrictModeDecorator>
+    );
+  }
+});

.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 (
+    <div style={{display: 'flex', alignItems: 'center', fontSize: '12px'}}>
+      <div style={{marginRight: '10px'}}>
+        <label htmlFor="strictmode">StrictMode:
+          <input type="checkbox" id="strictmode" name="strictmode" checked={isStrict} onChange={onChange} />
+        </label>
+      </div>
+    </div>
+  );
+};
+
+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: () => <StrictModeToolBar api={api} />
+  });
+});

.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
-  },
+  }
 };

.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 = [
       <Story />
     </VerticalCenter>
   ),
+  withStrictModeSwitcher,
   withProviderSwitcher
 ];

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