chore: update storybook to 9

.chromatic-fc/custom-addons/chromatic/index.js

@@ -1,5 +1,5 @@
 import {expressThemes, locales, S2ColorThemes, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';

.chromatic-fc/main.js

@@ -9,7 +9,7 @@ module.exports = {
     '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
-    '@storybook/addon-actions',
+    'storybook/actions',
     '@storybook/addon-a11y'
   ],
   typescript: {

.chromatic-fc/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

.chromatic-fc/preview.js

@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {VerticalCenter} from './layout';
 import {withChromaticProvider} from './custom-addons/chromatic';

.chromatic/custom-addons/chromatic/index.js

@@ -1,5 +1,5 @@
 import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';

.chromatic/main.js

@@ -9,7 +9,7 @@ module.exports = {
     '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
-    '@storybook/addon-actions',
+    'storybook/actions',
     '@storybook/addon-a11y'
   ],
   typescript: {

.chromatic/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

.chromatic/preview.js

@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {VerticalCenter} from './layout';
 import {withChromaticProvider} from './custom-addons/chromatic';

.circleci/comment.js

@@ -11,7 +11,7 @@ async function run() {
   let pr;
   // If we aren't running on a PR commit, double check if this is a branch created for a fork. If so, we'll need to
   // comment the build link on the fork.
-  if (!process.env.CIRCLE_PULL_REQUEST) {
+  if (true) {
     try {
       const commit = await octokit.git.getCommit({
         owner: 'adobe',
@@ -41,7 +41,7 @@ async function run() {
             break;
           }
         }
-      } else if (process.env.CIRCLE_BRANCH === 'main') {
+      } else if (true) {
         //If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build
         await octokit.repos.createCommitComment({
           owner: 'adobe',

.circleci/config.yml

@@ -910,9 +910,6 @@ workflows:
           requires:
             - install
       - verdaccio:
-          filters:
-            branches:
-              only: main
           requires:
             - install
       - v-docs:

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

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {addons} from '@storybook/preview-api';
-import {makeDecorator} from '@storybook/preview-api';
+import {addons, makeDecorator} from 'storybook/preview-api';
 // Importing from src so that HMR works.
 // Without this, all HMR updates will bubble through the index.ts and up
 // to the root instead of stopping at the story files.

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

@@ -1,5 +1,5 @@
 
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 

.storybook-s2/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/types";
+import type { StorybookConfig } from "storybook/internal/types";
 
 // const excludedProps = new Set([
 //   'id',
@@ -20,12 +20,9 @@ const config: StorybookConfig = {
     "../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     './custom-addons/provider/register',
     // "@storybook/addon-styling-webpack",
-    "storybook-dark-mode",
+    "@vueless/storybook-dark-mode",
     "@storybook/addon-a11y",
   ],
   framework: {

.storybook-s2/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false

.storybook-s2/preview.tsx

@@ -1,12 +1,11 @@
 import '@react-spectrum/s2/page.css';
-import { themes } from '@storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
-import { store } from 'storybook-dark-mode/dist/esm/Tool';
-import { addons } from '@storybook/preview-api';
-import { DocsContainer } from '@storybook/addon-docs';
+import { themes } from 'storybook/theming';
+import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+import { store } from '@vueless/storybook-dark-mode/dist/esm/Tool';
+import { addons } from 'storybook/preview-api';
 import React, { useEffect, useState } from 'react';
 import {withProviderSwitcher} from './custom-addons/provider';
-import {Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+import {DocsContainer, Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/addon-docs/blocks';
 import './global.css';
 
 const channel = addons.getChannel();
@@ -29,8 +28,10 @@ const preview = {
           return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
         }, []);
         var style = getComputedStyle(document.body)
+        console.log('got here');
         return <DocsContainer {...props} theme={{...(dark ? themes.dark : themes.light), appContentBg: style.getPropertyValue('--s2-container-bg').trim()}} />;
       },
+      codePanel: true,
       source: {
         // code: null, // Will disable code button, and show "No code available"
         transform: (code: string, ctx) => {
@@ -44,7 +45,9 @@ const preview = {
           return code;
         }
       },
-      page: () => (
+      page: () => {
+        console.log('got here 2');
+        return (
         <>
           <Title />
           <Subtitle />
@@ -53,7 +56,7 @@ const preview = {
           <Controls />
           <Stories includePrimary={false} />
         </>
-      )
+      )}
     },
     darkMode: {
       light: {

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

@@ -1,5 +1,5 @@
-import {addons, types, useParameter} from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
+import {addons, types, useParameter} from 'storybook/manager-api';
+import { AddonPanel } from 'storybook/internal/components';
 import React from 'react';
 
 const ADDON_ID = 'descriptionAddon';

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

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import {addons} from '@storybook/preview-api';
-import {makeDecorator} from '@storybook/preview-api';
+import {addons} from 'storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider} from '@react-spectrum/provider';
 import {expressThemes, themes, defaultTheme} from '../../constants';
 
@@ -24,6 +24,7 @@ function ProviderUpdater(props) {
   useEffect(() => {
     let channel = addons.getChannel();
     let providerUpdate = (event) => {
+      console.log('providerUpdate', event);
       setLocale(event.locale);
       setTheme(event.theme === 'Auto' ? undefined : event.theme);
       setScale(event.scale === 'Auto' ? undefined : event.scale);
@@ -39,6 +40,7 @@ function ProviderUpdater(props) {
   }, []);
 
   if (props.options.mainElement == null) {
+    console.log('mainElement is null', storyReady);
     return (
       <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
         <main>
@@ -47,6 +49,7 @@ function ProviderUpdater(props) {
       </Provider>
     );
   } else {
+    console.log('mainElement is not null');
     return (
       <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
         {storyReady && props.children}

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

@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 
@@ -75,6 +75,7 @@ function ProviderFieldSetter({api}) {
   };
   useEffect(() => {
     let storySwapped = () => {
+      console.log('storySwapped', values);
       channel.emit('provider/updated', values);
     };
     channel.on('rsp/ready-for-update', storySwapped);
@@ -121,6 +122,7 @@ function ProviderFieldSetter({api}) {
 }
 
 addons.register('ProviderSwitcher', (api) => {
+  console.log('ProviderSwitcher registering');
   addons.add('ProviderSwitcher', {
     title: 'viewport',
     type: types.TOOL,

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

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/preview-api';
+import {addons} from 'storybook/preview-api';
 import clsx from 'clsx';
 import React, {useEffect, useState} from 'react';
 

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

@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import React, {useEffect, useState} from 'react';
 
 const ScrollingToolbar = ({api}) => {

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

@@ -1,4 +1,4 @@
-import {addons, makeDecorator} from '@storybook/preview-api';
+import {addons, makeDecorator} from 'storybook/preview-api';
 import React, {StrictMode, useEffect, useState} from 'react';
 
 function StrictModeDecorator(props) {

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

@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import React, {useEffect, useState} from 'react';
 
 const StrictModeToolBar = ({api}) => {

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

@@ -1,6 +1,6 @@
-import {themes} from '@storybook/theming';
-import {addons} from '@storybook/manager-api';
-import {FORCE_RE_RENDER} from '@storybook/core-events';
+import {themes} from 'storybook/theming';
+import {addons} from 'storybook/manager-api';
+import {FORCE_RE_RENDER} from 'storybook/internal/core-events';
 // temporary until we have a better place to grab it from
 import * as packageJSON from '../../../packages/@adobe/react-spectrum/package.json';
 

.storybook/main.js

@@ -7,10 +7,9 @@ module.exports = {
   ],
 
   addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-a11y",
-    "@storybook/addon-controls",
-    "storybook-dark-mode",
+    'storybook/actions',
+    '@storybook/addon-a11y',
+    '@vueless/storybook-dark-mode',
     './custom-addons/provider/register.js',
     './custom-addons/descriptions/register.js',
     './custom-addons/theme/register.js',
@@ -24,8 +23,8 @@ module.exports = {
   },
 
   framework: {
-    name: "storybook-react-parcel",
-    options: {},
+    name: 'storybook-react-parcel',
+    options: {}
   },
 
   core: {

.storybook/manager.js

@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

.storybook/preview.js

@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {withProviderSwitcher} from './custom-addons/provider';
 import {withScrollingSwitcher} from './custom-addons/scrolling';

.storybook/test-runner.js

@@ -1,5 +1,5 @@
 const {configureAxe, checkA11y, injectAxe} = require('axe-playwright');
-const {getStoryContext} = require('@storybook/test-runner');
+const {getStoryContext} = require('storybook/test-runner');
 
 
 /*

.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch

@@ -0,0 +1,50 @@
+diff --git a/dist/esm/Tool.js b/dist/esm/Tool.js
+index 12b99ffbcc3002b3a9081d02db230ea6eb9990d7..8e1c4dc9dd3caa6834dafd54291e97599a65c136 100644
+--- a/dist/esm/Tool.js
++++ b/dist/esm/Tool.js
+@@ -20,11 +20,11 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+ import * as React from 'react';
+ import { global } from '@storybook/global';
+-import { themes } from '@storybook/theming';
+-import { IconButton } from '@storybook/components';
++import { themes } from 'storybook/theming';
++import { IconButton } from 'storybook/internal/components';
+ import { MoonIcon, SunIcon } from '@storybook/icons';
+-import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from '@storybook/core-events';
+-import { useParameter } from '@storybook/manager-api';
++import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from 'storybook/internal/core-events';
++import { useParameter } from 'storybook/manager-api';
+ import equal from 'fast-deep-equal';
+ import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from './constants';
+ var _ref = global,
+diff --git a/dist/esm/index.js b/dist/esm/index.js
+index f9fba78c0a84fc5e07fea8c9096983806874a592..19b4cc6964561e38f77fd64aef8eac6573ccadf1 100644
+--- a/dist/esm/index.js
++++ b/dist/esm/index.js
+@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+-import { addons, useState, useEffect } from '@storybook/preview-api';
++import { addons, useState, useEffect } from 'storybook/preview-api';
+ import { DARK_MODE_EVENT_NAME } from './constants';
+ import { store } from './Tool';
+
+diff --git a/dist/esm/preset/manager.js b/dist/esm/preset/manager.js
+index 4b14ca543bb350a1adc9d08521bcf2980204aab0..d125d1c504e8fa60ccab95c6e22ca16e1cc4d011 100644
+--- a/dist/esm/preset/manager.js
++++ b/dist/esm/preset/manager.js
+@@ -4,9 +4,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+-import { addons } from '@storybook/manager-api';
+-import { Addon_TypesEnum } from '@storybook/types';
+-import { themes } from '@storybook/theming';
++import { addons } from 'storybook/manager-api';
++import { Addon_TypesEnum } from 'storybook/internal/types';
++import { themes } from 'storybook/theming';
+ import * as React from 'react';
+ import Tool, { prefersDark, store } from '../Tool';
+ var currentStore = store();

examples/s2-next-macros/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "@react-spectrum/s2": "^0.3.0",
     "next": "14.1.3",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "unplugin-parcel-macros": "0.0.3"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "typescript": "^5"