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 <dl1644@gmail.com>

Author: snowystinger

.circleci/comment.js

@@ -60,7 +60,7 @@ async function run() {
       [Publish stats](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/publish.json)
       [Size diff since last release](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/size-diff.txt)
       [Docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/docs/index.html)
-      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+      [Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
       [S2 Storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)`
         });
       }
@@ -79,7 +79,7 @@ async function run() {
         issue_number: pr,
         body: `Build successful! 🎉
 
-  * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+  * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
   * [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

@@ -1,23 +1,17 @@
 import React, {useEffect, useState} from 'react';
 import {addons} from '@storybook/preview-api';
 import {makeDecorator} from '@storybook/preview-api';
-import {getQueryParams} from '@storybook/preview-api';
 // Importing from src so that HMR works.
-// Without this, all HMR updates will bubble through the index.ts and up 
+// 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 '../../../packages/@react-spectrum/s2/src/Provider';
 
 document.body.style.margin = '0';
 
-const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
-  if (k.includes('providerSwitcher-')) {
-    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
-  }
-  return acc;
-}, {});
-
 function ProviderUpdater(props) {
-  let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
+  let params = new URLSearchParams(document.location.search);
+  let localeParam = params.get('providerSwitcher-locale') || undefined;
+  let [localeValue, setLocale] = useState(localeParam);
 
   useEffect(() => {
     let channel = addons.getChannel();

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

@@ -1,18 +1,11 @@
 
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 
-const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
-  if (k.includes('providerSwitcher-')) {
-    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
-  }
-  return acc;
-}, {});
-
 function ProviderFieldSetter({api}) {
-  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined});
+  let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
+  let [values, setValues] = useState({locale: localeParam});
   let channel = addons.getChannel();
   let onLocaleChange = (e) => {
     let newValue = e.target.value || undefined;

.storybook-s2/docs/Icons.jsx

@@ -1,4 +1,4 @@
-import icons from '@react-spectrum/s2/s2wf-icons/*.svg';
+import icons from '../../packages/@react-spectrum/s2/s2wf-icons/*.svg';
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
 import {ActionButton, Text} from '@react-spectrum/s2';
 import {H2, H3, P, Code, Pre, Link} from './typography';

.storybook-s2/main.ts

@@ -31,6 +31,9 @@ const config: StorybookConfig = {
   framework: {
     name: "storybook-react-parcel",
     options: {},
+  },
+  core: {
+    disableWhatsNewNotifications: true
   }
   // typescript: {
   //   reactDocgen: 'react-docgen-typescript',

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

@@ -1,8 +1,6 @@
-
-import {addons, types} from '@storybook/manager-api';
+import {addons, types, useParameter} from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
 import React from 'react';
-import { useParameter } from '@storybook/api';
 
 const ADDON_ID = 'descriptionAddon';
 const PANEL_ID = `${ADDON_ID}/panel`;
@@ -19,10 +17,10 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'Description',
-    render: ({ active }) => (
+    render: ({active}) => (
       <AddonPanel active={active}>
         <MyPanel />
       </AddonPanel>
-    ),
+    )
   });
 });

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

@@ -1,24 +1,21 @@
 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/provider';
 import {expressThemes, themes, defaultTheme} from '../../constants';
 
 document.body.style.margin = '0';
 
-const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
-  if (k.includes('providerSwitcher-')) {
-    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
-  }
-  return acc;
-}, {});
-
 function ProviderUpdater(props) {
-  let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
-  let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
-  let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
-  let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
+  let params = new URLSearchParams(document.location.search);
+  let localeParam = params.get("providerSwitcher-locale") || undefined;
+  let [localeValue, setLocale] = useState(localeParam);
+  let themeParam = params.get("providerSwitcher-theme") || undefined;
+  let [themeValue, setTheme] = useState(themeParam);
+  let scaleParam = params.get("providerSwitcher-scale") || undefined;
+  let [scaleValue, setScale] = useState(scaleParam);
+  let expressParam = params.get("providerSwitcher-express") || undefined;
+  let [expressValue, setExpress] = useState(expressParam === 'true');
   let [storyReady, setStoryReady] = useState(window.parent === window || window.parent !== window.top); // reduce content flash because it takes a moment to get the provider details
   // Typically themes are provided with both light + dark, and both scales.
   // To build our selector to see all themes, we need to hack it a bit.

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

@@ -1,15 +1,7 @@
-
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 
-const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
-  if (k.includes('providerSwitcher-')) {
-    return { ...acc, [k.replace('providerSwitcher-', '')]: v };
-  }
-  return acc;
-}, {});
 
 let THEMES = [
   {label: 'Auto', value: ''},
@@ -37,7 +29,17 @@ let TOAST_POSITIONS = [
 ];
 
 function ProviderFieldSetter({api}) {
-  let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, express: providerValuesFromUrl.express === 'true'});
+  let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
+  let themeParam = api.getQueryParam('providerSwitcher-theme') || undefined;
+  let scaleParam = api.getQueryParam('providerSwitcher-scale') || undefined;
+  let expressParam = api.getQueryParam('providerSwitcher-express') || undefined;
+
+  let [values, setValues] = useState({
+    locale: localeParam,
+    theme: themeParam,
+    scale: scaleParam,
+    express: expressParam === 'true'
+  });
   let channel = addons.getChannel();
   let onLocaleChange = (e) => {
     let newValue = e.target.value || undefined;

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

@@ -1,11 +1,12 @@
 import {addons} from '@storybook/preview-api';
 import clsx from 'clsx';
-import {getQueryParams} from '@storybook/preview-api';
 import React, {useEffect, useState} from 'react';
 
 function ScrollingDecorator(props) {
   let {children} = props;
-  let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
+  let params = new URLSearchParams(document.location.search);
+  let scrolling = params.get('scrolling') || undefined;
+  let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
 
   useEffect(() => {
     let channel = addons.getChannel();

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

@@ -1,10 +1,10 @@
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
 import React, {useEffect, useState} from 'react';
 
 const ScrollingToolbar = ({api}) => {
   let channel = addons.getChannel();
-  let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
+  let scrolling = api.getQueryParam('scrolling');
+  let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
   let onChange = () => {
     setScrolling((old) => {
       channel.emit('scrolling/updated', !old);