Starting point

Author: snowystinger

.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/register.js

@@ -1,15 +1,8 @@
-
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
+import {useParameter} 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 +30,13 @@ 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 [values, setValues] = useState({
+    locale: useParameter('providerSwitcher-locale') || undefined,
+    theme: useParameter('providerSwitcher-theme') || undefined,
+    scale: useParameter('providerSwitcher-scale') || undefined,
+    express: useParameter('providerSwitcher-express') === 'true'
+  });
   let channel = addons.getChannel();
   let onLocaleChange = (e) => {
     let newValue = e.target.value || undefined;

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

@@ -1,10 +1,11 @@
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
+import {useParameter} 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 = useParameter('scrolling');
+  let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
   let onChange = () => {
     setScrolling((old) => {
       channel.emit('scrolling/updated', !old);

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

@@ -1,15 +1,16 @@
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/preview-api';
+import {useParameter} 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 = useParameter('strict');
+  let [isStrict, setStrict] = useState(strictParam !== 'false');
   let onChange = () => {
     setStrict((old) => {
       channel.emit('strict/updated', !old);
       return !old;
-    })
+    });
   };
 
   useEffect(() => {

package.json

@@ -103,23 +103,21 @@
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
-    "@storybook/addon-actions": "^7.6.19",
-    "@storybook/addon-controls": "^7.6.19",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
-    "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/addon-themes": "^7.6.19",
-    "@storybook/api": "^7.6.19",
-    "@storybook/components": "^7.6.19",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.19",
-    "@storybook/preview": "^7.6.19",
-    "@storybook/preview-api": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-controls": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-jest": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-onboarding": "^8.6.7",
+    "@storybook/addon-themes": "^8.6.7",
+    "@storybook/components": "^8.6.7",
+    "@storybook/manager-api": "^8.6.7",
+    "@storybook/preview": "^8.6.7",
+    "@storybook/preview-api": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/test-runner": "^0.22.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.36",
     "@swc/jest": "^0.2.36",
@@ -130,7 +128,6 @@
     "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "npm:types-react@19.0.0-rc.0",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
-    "@types/storybook__react": "^4.0.2",
     "@yarnpkg/types": "^4.0.0",
     "autoprefixer": "^9.6.0",
     "axe-core": "^4.6.3",
@@ -200,9 +197,9 @@
     "rimraf": "^2.6.3",
     "sharp": "^0.33.5",
     "sinon": "^7.3.1",
-    "storybook": "^7.6.19",
-    "storybook-dark-mode": "^3.0.3",
-    "storybook-react-parcel": "^0.0.1",
+    "storybook": "^8.6.7",
+    "storybook-dark-mode": "^4.0.2",
+    "storybook-react-parcel": "workspace:^",
     "tailwind-variants": "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch",
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",

packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx

@@ -16,7 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DatePicker} from '../';
 import {Heading} from '@react-spectrum/text';
 import React from 'react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/test';
 
 export default {
   title: 'DatePicker',

packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx

@@ -16,7 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DateRangePicker} from '../';
 import {Heading} from '@react-spectrum/text';
 import React from 'react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/test';
 
 export default {
   title: 'DateRangePicker',

packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/test';
 
 const meta: Meta<SpectrumMenuTriggerProps> = {
   title: 'MenuTrigger/SubmenuTrigger',

packages/@react-spectrum/picker/stories/Picker.stories.tsx

@@ -27,7 +27,7 @@ import {Item, Picker, Section, SpectrumPickerProps} from '../';
 import Paste from '@spectrum-icons/workflow/Paste';
 import React,  {useState} from 'react';
 import {useAsyncList} from '@react-stately/data';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/test';
 
 let flatOptions = [
   {id: 1, name: 'Aardvark'},

packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx

@@ -13,7 +13,7 @@
 import {ActionMenu} from '../src';
 import {DynamicExample, Example} from '../stories/ActionMenu.stories';
 import type {Meta, StoryObj} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/test';
 
 const meta: Meta<typeof ActionMenu<any>> = {
   component: ActionMenu,