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

Lines changed: 3 additions & 8 deletions
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

Lines changed: 3 additions & 8 deletions
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

Lines changed: 3 additions & 7 deletions
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

Lines changed: 2 additions & 7 deletions
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

Lines changed: 4 additions & 1 deletion
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

Lines changed: 8 additions & 17 deletions
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

Lines changed: 2 additions & 6 deletions
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

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎package.json

Lines changed: 19 additions & 22 deletions
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

Lines changed: 2 additions & 5 deletions
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+
});

0 commit comments

Comments
 (0)