Skip to content

Commit 10a43de

Browse files
devongovettdevongovett
authored
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
1 parent b54c0d4 commit 10a43de

File tree

243 files changed

+2451
-4468
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

243 files changed

+2451
-4468
lines changed

‎.chromatic-fc/.parcelrc

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
{
2-
"extends": "@parcel/config-default",
3-
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
2+
"extends": "@parcel/config-storybook",
3+
"resolvers": ["@parcel/resolver-glob", "..."],
44
"transformers": {
5-
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
65
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
76
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
87
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
98
// Disable PostCSS from running over style macro output
109
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
11-
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
12-
"@parcel/transformer-js",
13-
"@parcel/transformer-react-refresh-wrap"
14-
],
15-
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
10+
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
1611
}
1712
}

‎.chromatic/.parcelrc

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
{
2-
"extends": "@parcel/config-default",
3-
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
2+
"extends": "@parcel/config-storybook",
3+
"resolvers": ["@parcel/resolver-glob", "..."],
44
"transformers": {
5-
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
65
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
76
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
87
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
98
// Disable PostCSS from running over style macro output
109
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
11-
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
12-
"@parcel/transformer-js",
13-
"@parcel/transformer-react-refresh-wrap"
14-
],
15-
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
10+
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
1611
}
1712
}

‎.parcelrc-storybook

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
{
2-
"extends": "@parcel/config-default",
3-
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
2+
"extends": "@parcel/config-storybook",
3+
"resolvers": ["@parcel/resolver-glob", "..."],
44
"transformers": {
5-
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
6-
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
7-
"@parcel/transformer-js",
8-
"@parcel/transformer-react-refresh-wrap"
9-
]
5+
"packages/*/*/intl/*.json": ["parcel-transformer-intl"]
106
}
117
}

‎.storybook-s2/.parcelrc

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
{
2-
"extends": "@parcel/config-default",
3-
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
2+
"extends": "@parcel/config-storybook",
3+
"resolvers": ["@parcel/resolver-glob", "..."],
44
"transformers": {
5-
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
65
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
76
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
87
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
98
// Disable PostCSS from running over style macro output
109
"*.css": ["@parcel/transformer-css"],
11-
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
12-
"@parcel/transformer-js",
13-
"@parcel/transformer-react-refresh-wrap"
14-
],
1510
"*.svg": ["@parcel/transformer-svg-react"],
1611
"*.{mdx,md}": ["parcel-transformer-mdx-storybook"],
1712
"raw:*": ["@parcel/transformer-raw"]

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import React, {useEffect, useState} from 'react';
22
import {addons} from '@storybook/preview-api';
33
import {makeDecorator} from '@storybook/preview-api';
44
import {getQueryParams} from '@storybook/preview-api';
5-
import {Provider} from '@react-spectrum/s2';
5+
// Importing from src so that HMR works.
6+
// Without this, all HMR updates will bubble through the index.ts and up
7+
// to the root instead of stopping at the story files.
8+
import {Provider} from '@react-spectrum/s2/src/Provider';
69

710
document.body.style.margin = '0';
811

‎.storybook-s2/preview.tsx

+8-17
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,14 @@ const preview = {
3232
},
3333
source: {
3434
// code: null, // Will disable code button, and show "No code available"
35-
transform: (code: string) => {
36-
// Replace any <_ with <
37-
code = code.replace(/<\s?_/g, '<');
38-
// Replace any </_ with </
39-
code = code.replace(/<\/\s?_/g, '</');
40-
// Remove any className prop
41-
code = code.replace(/\s+className=".*"/g, '');
42-
// Remove any styles prop
43-
code = code.replace(/\s+styles=".*"/g, '');
44-
// Remove any on* prop
45-
code = code.replace(/\s+on[A-Z].*={.*}/g, '');
46-
// Replace components like <{one letter} /> with <Icon />
47-
code = code.replace(/<([a-z])\s?\/>/g, '<Icon />');
48-
// Replace <No Display Name /> with <Cloud />
49-
code = code.replace(/<No\sDisplay\sName\s\/>/g, '<Cloud />');
50-
// Move any lines with just a > to the previous line
51-
code = code.replace(/\n\s*>/g, '>');
35+
transform: (code: string, ctx) => {
36+
code = ctx.parameters.docs?.source?.originalSource ?? code;
37+
code = code.replace(/ \{\.\.\.args\}/g, '');
38+
if (/^(.*?) =>/.test(code)) {
39+
code = code.replace(/^(.*?) => /, '');
40+
code = code.replace(/^\s{2}(\s+)/gm, '$1');
41+
code = code.replace(/\n\s{2}(.*)$/, '\n$1');
42+
}
5243
return code;
5344
}
5445
}

‎.storybook/.parcelrc

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{
2-
"extends": "@parcel/config-default",
3-
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
2+
"extends": "@parcel/config-storybook",
3+
"resolvers": ["@parcel/resolver-glob", "..."],
44
"transformers": {
55
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
6-
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
7-
"@parcel/transformer-js",
8-
"@parcel/transformer-react-refresh-wrap"
9-
],
106
"raw:*": ["@parcel/transformer-raw"]
117
}
128
}

‎.yarn/patches/storybook-builder-parcel-https-7ea26540e8.patch

-54
This file was deleted.

‎package.json

+19-22
Original file line numberDiff line numberDiff line change
@@ -86,29 +86,30 @@
8686
"@faker-js/faker": "^8.4.1",
8787
"@jdb8/eslint-plugin-monorepo": "^1.0.1",
8888
"@octokit/rest": "*",
89-
"@parcel/bundler-library": "2.12.0",
90-
"@parcel/config-default": "^2.13.0",
91-
"@parcel/core": "^2.13.0",
92-
"@parcel/optimizer-data-url": "^2.13.0",
93-
"@parcel/optimizer-terser": "^2.13.0",
94-
"@parcel/packager-ts": "^2.13.0",
95-
"@parcel/reporter-cli": "^2.13.0",
96-
"@parcel/resolver-glob": "^2.13.0",
97-
"@parcel/transformer-inline": "^2.13.0",
98-
"@parcel/transformer-inline-string": "^2.13.0",
99-
"@parcel/transformer-svg-react": "^2.13.0",
100-
"@parcel/transformer-typescript-types": "^2.13.0",
89+
"@parcel/bundler-library": "^2.12.1",
90+
"@parcel/config-default": "^2.13.1",
91+
"@parcel/config-storybook": "^0.0.2",
92+
"@parcel/core": "^2.13.1",
93+
"@parcel/optimizer-data-url": "^2.13.1",
94+
"@parcel/optimizer-terser": "^2.13.1",
95+
"@parcel/packager-ts": "^2.13.1",
96+
"@parcel/reporter-cli": "^2.13.1",
97+
"@parcel/resolver-glob": "^2.13.1",
98+
"@parcel/transformer-inline": "^2.13.1",
99+
"@parcel/transformer-inline-string": "^2.13.1",
100+
"@parcel/transformer-svg-react": "^2.13.1",
101+
"@parcel/transformer-typescript-types": "^2.13.1",
101102
"@react-spectrum/s2-icon-builder": "^0.2.0",
102103
"@spectrum-css/component-builder": "1.0.1",
103104
"@spectrum-css/vars": "^2.3.0",
104-
"@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
105+
"@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
105106
"@storybook/addon-actions": "^7.6.19",
106107
"@storybook/addon-controls": "^7.6.19",
107-
"@storybook/addon-essentials": "7.6.19",
108-
"@storybook/addon-interactions": "7.6.19",
108+
"@storybook/addon-essentials": "^7.6.19",
109+
"@storybook/addon-interactions": "^7.6.19",
109110
"@storybook/addon-links": "^7.6.19",
110111
"@storybook/addon-onboarding": "1.0.8",
111-
"@storybook/addon-themes": "7.6.19",
112+
"@storybook/addon-themes": "^7.6.19",
112113
"@storybook/api": "^7.6.19",
113114
"@storybook/components": "^7.6.19",
114115
"@storybook/manager-api": "^7.6.19",
@@ -176,9 +177,8 @@
176177
"npm-cli-login": "^1.0.0",
177178
"nyc": "^10.2.0",
178179
"p-queue": "^6.2.1",
179-
"parcel": "^2.13.0",
180+
"parcel": "^2.13.1",
180181
"parcel-optimizer-strict-mode": "workspace:^",
181-
"parcel-resolver-storybook": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/parcel-resolver-storybook?master",
182182
"patch-package": "^6.2.0",
183183
"playwright": "^1.45.3",
184184
"plop": "^2.4.0",
@@ -199,9 +199,8 @@
199199
"sharp": "^0.33.5",
200200
"sinon": "^7.3.1",
201201
"storybook": "^7.6.19",
202-
"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",
203202
"storybook-dark-mode": "^3.0.3",
204-
"storybook-react-parcel": "https://gitpkg.vercel.app/mischnic/storybook-parcel/packages/storybook-react-parcel?master",
203+
"storybook-react-parcel": "^0.0.1",
205204
"tailwind-variants": "^0.1.18",
206205
"tailwindcss": "^3.4.0",
207206
"tailwindcss-animate": "^1.0.7",
@@ -228,8 +227,6 @@
228227
"remark-parse": "10.0.1",
229228
"browserslist": "4.24.0",
230229
"caniuse-lite": "1.0.30001563",
231-
"@storybook/core-common": "7.6.19",
232-
"storybook-builder-parcel/@storybook/core-common": "7.6.19",
233230
"@types/react": "npm:[email protected]",
234231
"@types/react-dom": "npm:[email protected]",
235232
"recast": "0.23.6",

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface DragPreviewProps {
1818
children: (items: DragItem[]) => JSX.Element | null
1919
}
2020

21-
function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
21+
export const DragPreview = React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
2222
let render = props.children;
2323
let [children, setChildren] = useState<JSX.Element | null>(null);
2424
let domRef = useRef<HTMLDivElement | null>(null);
@@ -57,7 +57,4 @@ function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRende
5757
{children}
5858
</div>
5959
);
60-
}
61-
62-
let _DragPreview = React.forwardRef(DragPreview);
63-
export {_DragPreview as DragPreview};
60+
});

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function useFocusableContext(ref: RefObject<FocusableElement | null>): Focusable
4444
/**
4545
* Provides DOM props to the nearest focusable child.
4646
*/
47-
function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
47+
export const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
4848
let {children, ...otherProps} = props;
4949
let objRef = useObjectRef(ref);
5050
let context = {
@@ -57,10 +57,7 @@ function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<Focu
5757
{children}
5858
</FocusableContext.Provider>
5959
);
60-
}
61-
62-
let _FocusableProvider = React.forwardRef(FocusableProvider);
63-
export {_FocusableProvider as FocusableProvider};
60+
});
6461

6562
export interface FocusableAria {
6663
/** Props for the focusable element. */

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
3636
layoutOptions?: O
3737
}
3838

39-
function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
39+
// forwardRef doesn't support generic parameters, so cast the result to the correct type
40+
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
41+
export const Virtualizer = React.forwardRef(function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
4042
let {
4143
children: renderView,
4244
renderWrapper,
@@ -82,12 +84,7 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
8284
{renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}
8385
</ScrollView>
8486
);
85-
}
86-
87-
// forwardRef doesn't support generic parameters, so cast the result to the correct type
88-
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
89-
const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
90-
export {_Virtualizer as Virtualizer};
87+
}) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
9188

9289
function renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {
9390
return views.map(view => {

0 commit comments

Comments
 (0)