chore: update storybook to 9 (#8634)

* 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.

* chore: storybook 9 upgrade

* try fixing docs

* fix a11y addon

* fix searchwithin stories

* fix lint

* fix darkmode

* fix dark mode

* fix tailwind starter

* turn on verdaccio

* fix install

* fix starters some more

* attempt to fix docs issue

* fix new imports

* fix starters typescript same as the tailwind example

* fix types in chromatic

* fix docs rendering

* clarify some code

* remove debugging

* remove unneeded patches

* turn off verdaccio

---------

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: snowystinger

.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

@@ -41,7 +41,7 @@ async function run() {
             break;
           }
         }
-      } else if (process.env.CIRCLE_BRANCH === 'main') {
+      } else if (!process.env.CIRCLE_PULL_REQUEST) {
         // 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',

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