[WIP] chore: Storybook 8 using parcel builder

.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

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

.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.
@@ -27,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);
@@ -42,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>
@@ -50,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,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;
@@ -73,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);
@@ -119,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,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
   }
 };