Enable strict mode toggle in storybook (#3870)

* 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

* fix storybook crash when saving changes in FocusScope file

core issue is with react fast refresh in parcel, fix to be patched there eventually. For now this is a stopgap fix, see vitejs/vite#3301 for a similar issue

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

packages/@react-spectrum/provider/src/Provider.tsx

@@ -18,6 +18,7 @@ import {
   useStyleProps
 } from '@react-spectrum/utils';
 import clsx from 'clsx';
+import {Context} from './context';
 import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {I18nProvider, useLocale} from '@react-aria/i18n';
@@ -30,9 +31,6 @@ import {useColorScheme, useScale} from './mediaQueries';
 // @ts-ignore
 import {version} from '../package.json';
 
-const Context = React.createContext<ProviderContext | null>(null);
-Context.displayName = 'ProviderContext';
-
 const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536};
 
 function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {

packages/@react-spectrum/provider/src/context.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ProviderContext} from '@react-types/provider';
+import React from 'react';
+
+// Context is placed in a separate file to avoid fast refresh issue where the old provider context values
+// are immediately replaced with the null default. Stopgap solution until we fix this in parcel.
+export const Context = React.createContext<ProviderContext | null>(null);
+Context.displayName = 'ProviderContext';