Skip to content

Commit 114f890

Browse files
snowystingerLFDanLu
snowystinger
and
LFDanLu
authored
chore: Storybook 8 using parcel builder (#8272)
* Starting point * install state with parcel-bundler-storybook local * renders v3 and s2 * fix lint, multiple copies of storybook, paths * mostly fix the docs pages * fix tests * fix docs build * turn on verdaccio * preemptively fix verdaccio * fix lint - largely undoable when everything moves back to the other repo * Revert "fix docs build" This reverts commit 225c07b. * fix date range picker test locally * fix icon rendering with context * bump to latest release in effort to fix docs addon * partial revert to get icons in buttons working again * remove dead patch * fix sb docs * remove accidental story * fix tailwind starter * try fixing verdaccio * fix docs example build * fix version of plugin * undo webpack plugin for vite app * set a default path for storybook v3 * Revert "turn on verdaccio" This reverts commit a420e84. * fix a11y addon * fix searchwithin stories * fix lint * Reapply "turn on verdaccio" This reverts commit 37f7962. * Revert "Reapply "turn on verdaccio"" This reverts commit 26eb687. * fix merge * Reapply "turn on verdaccio" * Revert "Reapply "turn on verdaccio"" This reverts commit cbb470e. * remove leftover console logs * turn on verdaccio * fix storybook build * Revert "turn on verdaccio" This reverts commit efb41e5. * remove console logs --------- Co-authored-by: Daniel Lu <[email protected]>
1 parent bbf9a13 commit 114f890

File tree

183 files changed

+2757
-3730
lines changed

Some content is hidden

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

183 files changed

+2757
-3730
lines changed

‎.circleci/comment.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ async function run() {
6060
[Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
6161
[Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
6262
[Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
63-
[Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
63+
[Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
6464
[S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)`
6565
});
6666
}
@@ -79,7 +79,7 @@ async function run() {
7979
issue_number: pr,
8080
body: `Build successful! 🎉
8181
82-
* [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
82+
* [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
8383
* [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
8484
* [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
8585
* [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React, {useEffect, useState} from 'react';
22
import {addons} from '@storybook/preview-api';
33
import {makeDecorator} from '@storybook/preview-api';
4-
import {getQueryParams} from '@storybook/preview-api';
54
// Importing from src so that HMR works.
6-
// Without this, all HMR updates will bubble through the index.ts and up
5+
// Without this, all HMR updates will bubble through the index.ts and up
76
// to the root instead of stopping at the story files.
87
import {Provider} from '../../../packages/@react-spectrum/s2/src/Provider';
98

109
document.body.style.margin = '0';
1110

12-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
13-
if (k.includes('providerSwitcher-')) {
14-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
15-
}
16-
return acc;
17-
}, {});
18-
1911
function ProviderUpdater(props) {
20-
let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
12+
let params = new URLSearchParams(document.location.search);
13+
let localeParam = params.get('providerSwitcher-locale') || undefined;
14+
let [localeValue, setLocale] = useState(localeParam);
2115

2216
useEffect(() => {
2317
let channel = addons.getChannel();

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11

22
import {addons, types} from '@storybook/manager-api';
3-
import {getQueryParams} from '@storybook/preview-api';
43
import {locales} from '../../constants';
54
import React, {useEffect, useState} from 'react';
65

7-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
8-
if (k.includes('providerSwitcher-')) {
9-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
10-
}
11-
return acc;
12-
}, {});
13-
146
function ProviderFieldSetter({api}) {
15-
let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined});
7+
let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
8+
let [values, setValues] = useState({locale: localeParam});
169
let channel = addons.getChannel();
1710
let onLocaleChange = (e) => {
1811
let newValue = e.target.value || undefined;

‎.storybook-s2/docs/Icons.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import icons from '@react-spectrum/s2/s2wf-icons/*.svg';
1+
import icons from '../../packages/@react-spectrum/s2/s2wf-icons/*.svg';
22
import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
33
import {ActionButton, Text} from '@react-spectrum/s2';
44
import {H2, H3, P, Code, Pre, Link} from './typography';

‎.storybook-s2/main.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ const config: StorybookConfig = {
3131
framework: {
3232
name: "storybook-react-parcel",
3333
options: {},
34+
},
35+
core: {
36+
disableWhatsNewNotifications: true
3437
}
3538
// typescript: {
3639
// reactDocgen: 'react-docgen-typescript',

‎.storybook/custom-addons/descriptions/register.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
2-
import {addons, types} from '@storybook/manager-api';
1+
import {addons, types, useParameter} from '@storybook/manager-api';
32
import { AddonPanel } from '@storybook/components';
43
import React from 'react';
5-
import { useParameter } from '@storybook/api';
64

75
const ADDON_ID = 'descriptionAddon';
86
const PANEL_ID = `${ADDON_ID}/panel`;
@@ -19,10 +17,10 @@ addons.register(ADDON_ID, (api) => {
1917
addons.add(PANEL_ID, {
2018
type: types.PANEL,
2119
title: 'Description',
22-
render: ({ active }) => (
20+
render: ({active}) => (
2321
<AddonPanel active={active}>
2422
<MyPanel />
2523
</AddonPanel>
26-
),
24+
)
2725
});
2826
});

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import React, {useEffect, useState} from 'react';
22
import {addons} from '@storybook/preview-api';
33
import {makeDecorator} from '@storybook/preview-api';
4-
import {getQueryParams} from '@storybook/preview-api';
54
import {Provider} from '@react-spectrum/provider';
65
import {expressThemes, themes, defaultTheme} from '../../constants';
76

87
document.body.style.margin = '0';
98

10-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
11-
if (k.includes('providerSwitcher-')) {
12-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
13-
}
14-
return acc;
15-
}, {});
16-
179
function ProviderUpdater(props) {
18-
let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
19-
let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
20-
let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
21-
let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
10+
let params = new URLSearchParams(document.location.search);
11+
let localeParam = params.get("providerSwitcher-locale") || undefined;
12+
let [localeValue, setLocale] = useState(localeParam);
13+
let themeParam = params.get("providerSwitcher-theme") || undefined;
14+
let [themeValue, setTheme] = useState(themeParam);
15+
let scaleParam = params.get("providerSwitcher-scale") || undefined;
16+
let [scaleValue, setScale] = useState(scaleParam);
17+
let expressParam = params.get("providerSwitcher-express") || undefined;
18+
let [expressValue, setExpress] = useState(expressParam === 'true');
2219
let [storyReady, setStoryReady] = useState(window.parent === window || window.parent !== window.top); // reduce content flash because it takes a moment to get the provider details
2320
// Typically themes are provided with both light + dark, and both scales.
2421
// To build our selector to see all themes, we need to hack it a bit.

‎.storybook/custom-addons/provider/register.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
21
import {addons, types} from '@storybook/manager-api';
3-
import {getQueryParams} from '@storybook/preview-api';
42
import {locales} from '../../constants';
53
import React, {useEffect, useState} from 'react';
64

7-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
8-
if (k.includes('providerSwitcher-')) {
9-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
10-
}
11-
return acc;
12-
}, {});
135

146
let THEMES = [
157
{label: 'Auto', value: ''},
@@ -37,7 +29,17 @@ let TOAST_POSITIONS = [
3729
];
3830

3931
function ProviderFieldSetter({api}) {
40-
let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, express: providerValuesFromUrl.express === 'true'});
32+
let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
33+
let themeParam = api.getQueryParam('providerSwitcher-theme') || undefined;
34+
let scaleParam = api.getQueryParam('providerSwitcher-scale') || undefined;
35+
let expressParam = api.getQueryParam('providerSwitcher-express') || undefined;
36+
37+
let [values, setValues] = useState({
38+
locale: localeParam,
39+
theme: themeParam,
40+
scale: scaleParam,
41+
express: expressParam === 'true'
42+
});
4143
let channel = addons.getChannel();
4244
let onLocaleChange = (e) => {
4345
let newValue = e.target.value || undefined;

‎.storybook/custom-addons/scrolling/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {addons} from '@storybook/preview-api';
22
import clsx from 'clsx';
3-
import {getQueryParams} from '@storybook/preview-api';
43
import React, {useEffect, useState} from 'react';
54

65
function ScrollingDecorator(props) {
76
let {children} = props;
8-
let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
7+
let params = new URLSearchParams(document.location.search);
8+
let scrolling = params.get('scrolling') || undefined;
9+
let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
910

1011
useEffect(() => {
1112
let channel = addons.getChannel();

‎.storybook/custom-addons/scrolling/register.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {addons, types} from '@storybook/manager-api';
2-
import {getQueryParams} from '@storybook/preview-api';
32
import React, {useEffect, useState} from 'react';
43

54
const ScrollingToolbar = ({api}) => {
65
let channel = addons.getChannel();
7-
let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
6+
let scrolling = api.getQueryParam('scrolling');
7+
let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
88
let onChange = () => {
99
setScrolling((old) => {
1010
channel.emit('scrolling/updated', !old);

0 commit comments

Comments
 (0)