Configure canary prod build

.chromatic-fc/.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

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

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

.chromatic-fc/main.js

@@ -1,7 +1,8 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
   stories: ['../packages/**/chromatic/**/*.chromatic-fc.{js,jsx,ts,tsx}'],
   addons: process.env.NODE_ENV === 'production' ? [] : [

.chromatic-fc/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });

.chromatic-fc/preview.js

@@ -12,10 +12,11 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) =>
-      a[1].kind === b[1].kind
+    storySort: (a, b) => {
+      return a.title === b.title
         ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, {numeric: true})
+        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    }
   },
   a11y: {},
   layout: 'fullscreen',

.chromatic/.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
+  "transformers": {
+    "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

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

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

.chromatic/main.js

@@ -1,7 +1,8 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
   stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
   addons: process.env.NODE_ENV === 'production' ? [] : [

.chromatic/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });

.chromatic/preview.js

@@ -12,7 +12,11 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+    storySort: (a, b) => {
+      return a.title === b.title
+        ? 0
+        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    }
   },
   a11y: {},
   layout: 'fullscreen'

.circleci/config.yml

@@ -412,6 +412,21 @@ jobs:
           paths:
             - '*/storybook-17/'
 
+  storybook-canary:
+    executor: rsp-large
+    steps:
+      - restore_cache:
+          key: react-spectrum-canary-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build storybook-canary
+          command: make storybook-canary
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/storybook-canary/'
+
   docs:
     executor: rsp-xlarge
     steps:
@@ -594,6 +609,9 @@ workflows:
       - storybook-17:
           requires:
             - install-17
+      - storybook-canary:
+          requires:
+            - install-canary
       - docs:
           requires:
             - install
@@ -619,6 +637,7 @@ workflows:
             - storybook
             - storybook-16
             - storybook-17
+            - storybook-canary
             - docs
       - deploy-verdaccio:
           requires:

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

@@ -25,10 +25,8 @@ function ProviderUpdater(props) {
   let theme = (expressValue ? expressThemes : themes)[themeValue || 'light'] || defaultTheme;
   let colorScheme = themeValue && themeValue.replace(/est$/, '');
   useEffect(() => {
-    console.log('use effect running?')
     let channel = addons.getChannel();
     let providerUpdate = (event) => {
-      console.log('provider/updated channel called?')
       setLocale(event.locale);
       setTheme(event.theme === 'Auto' ? undefined : event.theme);
       setScale(event.scale === 'Auto' ? undefined : event.scale);
@@ -64,7 +62,6 @@ export const withProviderSwitcher = makeDecorator({
   name: 'withProviderSwitcher',
   parameterName: 'providerSwitcher',
   wrapper: (getStory, context, {options, parameters}) => {
-    console.log('render wrapper?')
     options = {...options, ...parameters};
     return (
       <ProviderUpdater options={options} context={context}>

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

@@ -72,9 +72,7 @@ function ProviderFieldSetter({api}) {
     });
   };
   useEffect(() => {
-    console.log('registers useEffect time to listen')
     let storySwapped = () => {
-      console.log('story swapped emitted')
       channel.emit('provider/updated', values);
     };
     channel.on('rsp/ready-for-update', storySwapped);

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

@@ -1,5 +1,5 @@
 import {themes} from '@storybook/theming';
-import {addons} from '@storybook/preview-api';
+import {addons} from '@storybook/manager-api';
 import {FORCE_RE_RENDER} from '@storybook/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

@@ -1,5 +1,4 @@
 
-import { dirname, join } from "path";
 module.exports = {
   stories: ['../packages/**/stories/*.stories.{js,jsx,ts,tsx}'],
 

.storybook/preview.js

@@ -16,7 +16,7 @@ export const parameters = {
       return a.title === b.title
         ? 0
         : a.id.localeCompare(b.id, undefined, { numeric: true });
-    },
+    }
   },
   a11y: {
     config: {

Makefile

@@ -81,6 +81,9 @@ storybook-16:
 storybook-17:
 	yarn build:storybook-17
 
+storybook-canary:
+	yarn build:storybook-canary
+
 # for now doesn't have deploy since v3 doesn't have a place for docs and stuff yet
 ci:
 	$(MAKE) publish

package.json

@@ -17,6 +17,7 @@
     "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "build:storybook-16": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-16",
     "build:storybook-17": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-17",
+    "build:storybook-canary": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook-canary",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'",
     "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
     "start:chromatic-fc": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9005 --ci -c '.chromatic-fc'",
@@ -93,8 +94,8 @@
     "@storybook/client-api": "^7.6.17",
     "@storybook/components": "^7.6.17",
     "@storybook/manager-api": "^7.6.17",
-    "@storybook/preview-api": "^7.6.17",
     "@storybook/preview": "^7.6.17",
+    "@storybook/preview-api": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
@@ -163,9 +164,9 @@
     "postcss-import": "^15.1.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^18.0.0",
+    "react": "^19.0.0-canary-4c12339ce-20240408",
     "react-axe": "^3.0.2",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0-canary-4c12339ce-20240408",
     "react-frame-component": "^5.0.0",
     "react-test-renderer": "^16.9.0",
     "recast": "^0.20",

patches/parcel-resolver-storybook+1.0.0.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/parcel-resolver-storybook/StorybookResolver.js b/node_modules/parcel-resolver-storybook/StorybookResolver.js
+index f8374c4..da45365 100644
+--- a/node_modules/parcel-resolver-storybook/StorybookResolver.js
++++ b/node_modules/parcel-resolver-storybook/StorybookResolver.js
+@@ -3,11 +3,13 @@ const { Resolver } = require("@parcel/plugin");
+ const reactVersion = require("react-dom/package.json").version;
+ const { default: NodeResolver } = require("@parcel/node-resolver-core");
+
++const REACT_MAJOR_VERSION = parseInt(reactVersion.split('.')[0], 10);
++
+ module.exports = new Resolver({
+   async resolve({ dependency, options, specifier, logger }) {
+     // Workaround for interop issue
+     if (specifier === "react-dom/client") {
+-      let specifier = reactVersion.startsWith("18")
++      let specifier = REACT_MAJOR_VERSION >= 18
+         ? "react-dom/client.js"
+         : "react-dom/index.js";
+       return {

yarn.lock

@@ -19694,6 +19694,13 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dom@^19.0.0-canary-4c12339ce-20240408:
+  version "19.0.0-canary-4c12339ce-20240408"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0-canary-4c12339ce-20240408.tgz#86e23459210ed40500b2424e4c3a218782bfbf7f"
+  integrity sha512-dMttAQ6IA63sUCCw+ZBE4QBO87PGjEcgNhNTYGHmw15ONqeUKQ8XmGEUKBOTmux7CIV9gdmKr3BGUFdGeT5ERA==
+  dependencies:
+    scheduler "0.25.0-canary-4c12339ce-20240408"
+
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@@ -19808,6 +19815,11 @@ react@^18.0.0:
   dependencies:
     loose-envify "^1.1.0"
 
+react@^19.0.0-canary-4c12339ce-20240408:
+  version "19.0.0-canary-4c12339ce-20240408"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0-canary-4c12339ce-20240408.tgz#21bb23e15848af30655039a0d5496ccea3ea3c36"
+  integrity sha512-QdQl76CTAmYrwjxq6fZRDWw2/MHPNxkYQ1xZVir2MbK/wxK62vFAPGr2j/AXs36ADVUq+tUGx4XNmdgnfL4f1Q==
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -20670,6 +20682,11 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@0.25.0-canary-4c12339ce-20240408:
+  version "0.25.0-canary-4c12339ce-20240408"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0-canary-4c12339ce-20240408.tgz#313e246cf1991e5f38aba45a738e844a1ae2bff6"
+  integrity sha512-XGG/Y5q5jeJy+rKp963+nlz81H/eDEMDmwem8QFHkuufjW/IEhM9ha6PO76m9qA6Qr59HVjlTGJ6D1bH1lemeQ==
+
 scheduler@^0.16.2:
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1"