chore: Storybook 8 using parcel builder

.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);

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

@@ -1,10 +1,11 @@
 import {addons, makeDecorator} from '@storybook/preview-api';
-import {getQueryParams} from '@storybook/preview-api';
 import React, {StrictMode, useEffect, useState} from 'react';
 
 function StrictModeDecorator(props) {
   let {children} = props;
-  let [isStrict, setStrict] = useState(getQueryParams()?.strict !== 'false');
+  let params = new URLSearchParams(document.location.search);
+  let strictParam = params.get("strict") || undefined;
+  let [isStrict, setStrict] = useState(strictParam !== 'false');
 
   useEffect(() => {
     let channel = addons.getChannel();

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

@@ -1,15 +1,15 @@
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
 import React, {useEffect, useState} from 'react';
 
 const StrictModeToolBar = ({api}) => {
   let channel = addons.getChannel();
-  let [isStrict, setStrict] = useState(getQueryParams()?.strict !== 'false');
+  let strictParam = api.getQueryParam('strict');
+  let [isStrict, setStrict] = useState(strictParam !== 'false');
   let onChange = () => {
     setStrict((old) => {
       channel.emit('strict/updated', !old);
       return !old;
-    })
+    });
   };
 
   useEffect(() => {

.storybook/main.js

@@ -11,11 +11,11 @@ module.exports = {
     "@storybook/addon-a11y",
     "@storybook/addon-controls",
     "storybook-dark-mode",
-    './custom-addons/provider/register',
-    './custom-addons/descriptions/register',
-    './custom-addons/theme/register',
-    './custom-addons/strictmode/register',
-    './custom-addons/scrolling/register'
+    './custom-addons/provider/register.js',
+    './custom-addons/descriptions/register.js',
+    './custom-addons/theme/register.js',
+    './custom-addons/strictmode/register.js',
+    './custom-addons/scrolling/register.js'
   ],
 
   typescript: {
@@ -26,5 +26,9 @@ module.exports = {
   framework: {
     name: "storybook-react-parcel",
     options: {},
+  },
+
+  core: {
+    disableWhatsNewNotifications: true
   }
 };

.yarn/patches/@storybook-addon-a11y-npm-8.6.14-2119c57a0f.patch

@@ -0,0 +1,12 @@
+diff --git a/dist/preview.mjs b/dist/preview.mjs
+index 18cee31b7f18549923cca6dbe0fc3a90a3cbb88a..b512062bbe219a2bcd9fe3e4da0a355f19ade7e6 100644
+--- a/dist/preview.mjs
++++ b/dist/preview.mjs
+@@ -2,6 +2,6 @@ import { expect } from '@storybook/test';
+ import { addons } from 'storybook/internal/preview-api';
+ import { global } from '@storybook/global';
+
+-var ADDON_ID="storybook/a11y";var RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`;var EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL};var{document}=global,channel=addons.getChannel(),defaultParameters={config:{},options:{}},disabledRules=["region"],queue=[],isRunning=!1,runNext=async()=>{if(queue.length===0){isRunning=!1;return}isRunning=!0;let next=queue.shift();next&&await next(),runNext();},run=async(input=defaultParameters)=>{let{default:axe}=await import('axe-core'),{element="body",config={},options={}}=input,htmlElement=document.querySelector(element)??document.body;if(!htmlElement)return;axe.reset();let configWithDefault={...config,rules:[...disabledRules.map(id=>({id,enabled:!1})),...config?.rules??[]]};return axe.configure(configWithDefault),new Promise((resolve,reject)=>{let task=async()=>{try{let result=await axe.run(htmlElement,options);resolve(result);}catch(error){reject(error);}};queue.push(task),isRunning||runNext();})};channel.on(EVENTS.MANUAL,async(storyId,input=defaultParameters)=>{try{let result=await run(input),resultJson=JSON.parse(JSON.stringify(result));channel.emit(EVENTS.RESULT,resultJson,storyId);}catch(error){channel.emit(EVENTS.ERROR,error);}});function getIsVitestStandaloneRun(){try{return import.meta.env.VITEST_STORYBOOK==="false"}catch{return !1}}var vitestMatchersExtended=!1,experimental_afterEach=async({reporting,parameters:parameters2,globals})=>{let a11yParameter=parameters2.a11y,a11yGlobals=globals.a11y,shouldRunEnvironmentIndependent=a11yParameter?.manual!==!0&&a11yParameter?.disable!==!0&&a11yParameter?.test!=="off"&&a11yGlobals?.manual!==!0,getMode=()=>{switch(a11yParameter?.test){case"todo":return "warning";case"error":default:return "failed"}};if(shouldRunEnvironmentIndependent)try{let result=await run(a11yParameter);if(result){let hasViolations=(result?.violations.length??0)>0;if(reporting.addReport({type:"a11y",version:1,result,status:hasViolations?getMode():"passed"}),getIsVitestStandaloneRun()&&hasViolations&&getMode()==="failed"){if(!vitestMatchersExtended){let{toHaveNoViolations}=await import('./matchers-7Z3WT2CE.mjs');expect.extend({toHaveNoViolations}),vitestMatchersExtended=!0;}expect(result).toHaveNoViolations();}}}catch(e){if(reporting.addReport({type:"a11y",version:1,result:{error:e},status:"failed"}),getIsVitestStandaloneRun())throw e}},initialGlobals={a11y:{manual:!1}},parameters={a11y:{test:"todo"}};
++var ADDON_ID="storybook/a11y";var RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`;var EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL};var{document}=global,channel=addons.getChannel(),defaultParameters={config:{},options:{}},disabledRules=["region"],queue=[],isRunning=!1,runNext=async()=>{if(queue.length===0){isRunning=!1;return}isRunning=!0;let next=queue.shift();next&&await next(),runNext();},run=async(input=defaultParameters)=>{let axe=await import('axe-core'),{element="body",config={},options={}}=input,htmlElement=document.querySelector(element)??document.body;if(!htmlElement)return;axe.reset();let configWithDefault={...config,rules:[...disabledRules.map(id=>({id,enabled:!1})),...config?.rules??[]]};return axe.configure(configWithDefault),new Promise((resolve,reject)=>{let task=async()=>{try{let result=await axe.run(htmlElement,options);resolve(result);}catch(error){reject(error);}};queue.push(task),isRunning||runNext();})};channel.on(EVENTS.MANUAL,async(storyId,input=defaultParameters)=>{try{let result=await run(input),resultJson=JSON.parse(JSON.stringify(result));channel.emit(EVENTS.RESULT,resultJson,storyId);}catch(error){channel.emit(EVENTS.ERROR,error);}});function getIsVitestStandaloneRun(){try{return import.meta.env.VITEST_STORYBOOK==="false"}catch{return !1}}var vitestMatchersExtended=!1,experimental_afterEach=async({reporting,parameters:parameters2,globals})=>{let a11yParameter=parameters2.a11y,a11yGlobals=globals.a11y,shouldRunEnvironmentIndependent=a11yParameter?.manual!==!0&&a11yParameter?.disable!==!0&&a11yParameter?.test!=="off"&&a11yGlobals?.manual!==!0,getMode=()=>{switch(a11yParameter?.test){case"todo":return "warning";case"error":default:return "failed"}};if(shouldRunEnvironmentIndependent)try{let result=await run(a11yParameter);if(result){let hasViolations=(result?.violations.length??0)>0;if(reporting.addReport({type:"a11y",version:1,result,status:hasViolations?getMode():"passed"}),getIsVitestStandaloneRun()&&hasViolations&&getMode()==="failed"){if(!vitestMatchersExtended){let{toHaveNoViolations}=await import('./matchers-7Z3WT2CE.mjs');expect.extend({toHaveNoViolations}),vitestMatchersExtended=!0;}expect(result).toHaveNoViolations();}}}catch(e){if(reporting.addReport({type:"a11y",version:1,result:{error:e},status:"failed"}),getIsVitestStandaloneRun())throw e}},initialGlobals={a11y:{manual:!1}},parameters={a11y:{test:"todo"}};
+
+ export { experimental_afterEach, initialGlobals, parameters };

.yarn/patches/@storybook-addon-docs-npm-8.6.14-12ab3f55f8.patch

@@ -0,0 +1,12 @@
+diff --git a/dist/index.d.ts b/dist/index.d.ts
+index 73034b75e2303b40fee8898b973e28e216c90043..9aa139b8a225219f7f957cacc087c3185480f1c5 100644
+--- a/dist/index.d.ts
++++ b/dist/index.d.ts
+@@ -1,6 +1,7 @@
+ import * as core_dist_types from 'storybook/internal/types';
+ export * from '@storybook/blocks';
+ import { Renderer, DocsRenderFunction, ModuleExports, ModuleExport } from 'storybook/internal/types';
++import { JSX } from 'react';
+
+ declare class DocsRenderer<TRenderer extends Renderer> {
+     render: DocsRenderFunction<TRenderer>;