Storybook 7

.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,9 +1,10 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic-fc.{js,jsx,ts,tsx}'],
+  stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

.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,9 +1,10 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
+  stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

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

@@ -76,6 +76,7 @@ async function run() {
         body: `Build successful! 🎉
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html)
+  * [View the storybook-canary](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-canary/index.html)
   * [View the storybook-17](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-17/index.html)
   * [View the storybook-16](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-16/index.html)
   * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`

.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:
@@ -588,6 +603,9 @@ workflows:
       - storybook-17:
           requires:
             - install-17
+      - storybook-canary:
+          requires:
+            - install-canary
       - docs:
           requires:
             - install
@@ -610,6 +628,7 @@ workflows:
             - storybook
             - storybook-16
             - storybook-17
+            - storybook-canary
             - docs
       - deploy-verdaccio:
           requires:

.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
       }]
     }
   }, {
-    files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
+    files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/chromatic-fc/**', '**/__tests__/**'],
     rules: {
       'rsp-rules/no-react-key': [ERROR],
       'rsp-rules/act-events-test': ERROR,

.storybook/.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"
+    ]
+  }
+}

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

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

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import addons, { makeDecorator } from '@storybook/addons';
-import {getQueryParams} from '@storybook/client-api';
+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';
 

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

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

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

@@ -1,6 +1,6 @@
-import {addons, makeDecorator} from '@storybook/addons';
+import {addons} from '@storybook/preview-api';
 import clsx from 'clsx';
-import {getQueryParams} from '@storybook/client-api';
+import {getQueryParams} from '@storybook/preview-api';
 import React, {useEffect, useState} from 'react';
 
 function ScrollingDecorator(props) {

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

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

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

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

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

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

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

@@ -1,10 +1,9 @@
 import {themes} from '@storybook/theming';
-import addons from '@storybook/addons';
+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';
 
-// Automatically switch light/dark theme based on system pref.
 addons.register('theme-switcher', api => {
   let query = window.matchMedia('(prefers-color-scheme: dark)');
   let update = () => {

.storybook/main.js

@@ -1,22 +1,26 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
-  },
   stories: ['../packages/**/stories/*.stories.{js,jsx,ts,tsx}'],
+
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-controls',
-    'storybook-dark-mode',
+    "@storybook/addon-actions",
+    "@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'
   ],
+
   typescript: {
     check: false,
     reactDocgen: false
+  },
+
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   }
 };

.storybook/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,
+  }
 });

.storybook/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: {
     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

examples/rsp-webpack-4/package.json

@@ -23,10 +23,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.0",
-    "@babel/cli": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.24.3",
+    "@babel/cli": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.3",
     "webpack": "4.46.0",
     "webpack-cli": "3.1.1",
     "webpack-dev-server": "3.1.8",