chore: Improve React Fast Refresh in storybook (#7435)

* Improve React Fast Refresh in storybook

* Migrate forwardRef syntax to avoid underscores in the name

* Resolve storybook versions to a single one

* Update docs

* Bump version

.chromatic-fc/.parcelrc

@@ -1,17 +1,12 @@
 {
-  "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
   "transformers": {
-    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }

.chromatic/.parcelrc

@@ -1,17 +1,12 @@
 {
-  "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob",  "..."],
   "transformers": {
-    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }

.parcelrc-storybook

@@ -1,11 +1,7 @@
 {
-  "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
   "transformers": {
-    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
-    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ]
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"]
   }
 }

.storybook-s2/.parcelrc

@@ -1,17 +1,12 @@
 {
-  "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
   "transformers": {
-    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
     "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "*.css": ["@parcel/transformer-css"],
-    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ],
     "*.svg": ["@parcel/transformer-svg-react"],
     "*.{mdx,md}": ["parcel-transformer-mdx-storybook"],
     "raw:*": ["@parcel/transformer-raw"]

.storybook-s2/custom-addons/provider/index.js

@@ -2,7 +2,10 @@ import React, {useEffect, useState} from 'react';
 import {addons} from '@storybook/preview-api';
 import {makeDecorator} from '@storybook/preview-api';
 import {getQueryParams} from '@storybook/preview-api';
-import {Provider} from '@react-spectrum/s2';
+// Importing from src so that HMR works.
+// Without this, all HMR updates will bubble through the index.ts and up 
+// to the root instead of stopping at the story files.
+import {Provider} from '@react-spectrum/s2/src/Provider';
 
 document.body.style.margin = '0';
 

.storybook-s2/preview.tsx

@@ -32,23 +32,14 @@ const preview = {
       },
       source: {
         // code: null, // Will disable code button, and show "No code available"
-        transform: (code: string) => {
-          // Replace any <_ with <
-          code = code.replace(/<\s?_/g, '<');
-          // Replace any </_ with </
-          code = code.replace(/<\/\s?_/g, '</');
-          // Remove any className prop
-          code = code.replace(/\s+className=".*"/g, '');
-          // Remove any styles prop
-          code = code.replace(/\s+styles=".*"/g, '');
-          // Remove any on* prop
-          code = code.replace(/\s+on[A-Z].*={.*}/g, '');
-          // Replace components like <{one letter} /> with <Icon />
-          code = code.replace(/<([a-z])\s?\/>/g, '<Icon />');
-          // Replace <No Display Name /> with <Cloud />
-          code = code.replace(/<No\sDisplay\sName\s\/>/g, '<Cloud />');
-          // Move any lines with just a > to the previous line
-          code = code.replace(/\n\s*>/g, '>');
+        transform: (code: string, ctx) => {
+          code = ctx.parameters.docs?.source?.originalSource ?? code;
+          code = code.replace(/ \{\.\.\.args\}/g, '');
+          if (/^(.*?) =>/.test(code)) {
+            code = code.replace(/^(.*?) => /, '');
+            code = code.replace(/^\s{2}(\s+)/gm, '$1');
+            code = code.replace(/\n\s{2}(.*)$/, '\n$1');
+          }
           return code;
         }
       }

.storybook/.parcelrc

@@ -1,12 +1,8 @@
 {
-  "extends": "@parcel/config-default",
-  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
   "transformers": {
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
-    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
-      "@parcel/transformer-js",
-      "@parcel/transformer-react-refresh-wrap"
-    ],
     "raw:*": ["@parcel/transformer-raw"]
   }
 }

package.json

@@ -86,29 +86,30 @@
     "@faker-js/faker": "^8.4.1",
     "@jdb8/eslint-plugin-monorepo": "^1.0.1",
     "@octokit/rest": "*",
-    "@parcel/bundler-library": "2.12.0",
-    "@parcel/config-default": "^2.13.0",
-    "@parcel/core": "^2.13.0",
-    "@parcel/optimizer-data-url": "^2.13.0",
-    "@parcel/optimizer-terser": "^2.13.0",
-    "@parcel/packager-ts": "^2.13.0",
-    "@parcel/reporter-cli": "^2.13.0",
-    "@parcel/resolver-glob": "^2.13.0",
-    "@parcel/transformer-inline": "^2.13.0",
-    "@parcel/transformer-inline-string": "^2.13.0",
-    "@parcel/transformer-svg-react": "^2.13.0",
-    "@parcel/transformer-typescript-types": "^2.13.0",
+    "@parcel/bundler-library": "^2.12.1",
+    "@parcel/config-default": "^2.13.1",
+    "@parcel/config-storybook": "^0.0.2",
+    "@parcel/core": "^2.13.1",
+    "@parcel/optimizer-data-url": "^2.13.1",
+    "@parcel/optimizer-terser": "^2.13.1",
+    "@parcel/packager-ts": "^2.13.1",
+    "@parcel/reporter-cli": "^2.13.1",
+    "@parcel/resolver-glob": "^2.13.1",
+    "@parcel/transformer-inline": "^2.13.1",
+    "@parcel/transformer-inline-string": "^2.13.1",
+    "@parcel/transformer-svg-react": "^2.13.1",
+    "@parcel/transformer-typescript-types": "^2.13.1",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "1.0.1",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
+    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/addon-controls": "^7.6.19",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/addon-themes": "7.6.19",
+    "@storybook/addon-themes": "^7.6.19",
     "@storybook/api": "^7.6.19",
     "@storybook/components": "^7.6.19",
     "@storybook/manager-api": "^7.6.19",
@@ -176,9 +177,8 @@
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
-    "parcel": "^2.13.0",
+    "parcel": "^2.13.1",
     "parcel-optimizer-strict-mode": "workspace:^",
-    "parcel-resolver-storybook": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/parcel-resolver-storybook?master",
     "patch-package": "^6.2.0",
     "playwright": "^1.45.3",
     "plop": "^2.4.0",
@@ -199,9 +199,8 @@
     "sharp": "^0.33.5",
     "sinon": "^7.3.1",
     "storybook": "^7.6.19",
-    "storybook-builder-parcel": "patch:storybook-builder-parcel@https%3A//gitpkg.vercel.app/mischnic/storybook-parcel/packages/storybook-builder-parcel?master#~/.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch",
     "storybook-dark-mode": "^3.0.3",
-    "storybook-react-parcel": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/storybook-react-parcel?master",
+    "storybook-react-parcel": "^0.0.1",
     "tailwind-variants": "^0.1.18",
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
@@ -228,8 +227,6 @@
     "remark-parse": "10.0.1",
     "browserslist": "4.24.0",
     "caniuse-lite": "1.0.30001563",
-    "@storybook/core-common": "7.6.19",
-    "storybook-builder-parcel/@storybook/core-common": "7.6.19",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
     "recast": "0.23.6",

packages/@react-aria/dnd/src/DragPreview.tsx

@@ -18,7 +18,7 @@ export interface DragPreviewProps {
   children: (items: DragItem[]) => JSX.Element | null
 }
 
-function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
+export const DragPreview = React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
   let render = props.children;
   let [children, setChildren] = useState<JSX.Element | null>(null);
   let domRef = useRef<HTMLDivElement | null>(null);
@@ -57,7 +57,4 @@ function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRende
       {children}
     </div>
   );
-}
-
-let _DragPreview = React.forwardRef(DragPreview);
-export {_DragPreview as DragPreview};
+});

packages/@react-aria/focus/src/useFocusable.tsx

@@ -44,7 +44,7 @@ function useFocusableContext(ref: RefObject<FocusableElement | null>): Focusable
 /**
  * Provides DOM props to the nearest focusable child.
  */
-function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
+export const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
   let {children, ...otherProps} = props;
   let objRef = useObjectRef(ref);
   let context = {
@@ -57,10 +57,7 @@ function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<Focu
       {children}
     </FocusableContext.Provider>
   );
-}
-
-let _FocusableProvider = React.forwardRef(FocusableProvider);
-export {_FocusableProvider as FocusableProvider};
+});
 
 export interface FocusableAria {
   /** Props for the focusable element. */

packages/@react-aria/virtualizer/src/Virtualizer.tsx

@@ -36,7 +36,9 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
   layoutOptions?: O
 }
 
-function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+export const Virtualizer = React.forwardRef(function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
   let {
     children: renderView,
     renderWrapper,
@@ -82,12 +84,7 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
       {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}
     </ScrollView>
   );
-}
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
-export {_Virtualizer as Virtualizer};
+}) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
 
 function renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {
   return views.map(view => {