fix up chromatics and tests

.chromatic-fc/main.js

@@ -4,7 +4,7 @@ module.exports = {
     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/main.js

@@ -4,7 +4,7 @@ module.exports = {
     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'

.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/custom-addons/provider/index.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {addons} from '@storybook/preview-api';
 import {makeDecorator} from '@storybook/preview-api';
-import {getQueryParams} from '@storybook/client-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,6 +1,6 @@
 
 import {addons, types} from '@storybook/manager-api';
-import {getQueryParams} from '@storybook/client-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} 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/manager-api';
-import {getQueryParams} from '@storybook/client-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/preview-api';
-import {getQueryParams} from '@storybook/client-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/manager-api';
-import {getQueryParams} from '@storybook/client-api';
+import {getQueryParams} from '@storybook/preview-api';
 import React, {useEffect, useState} from 'react';
 
 const StrictModeToolBar = ({api}) => {

package.json

@@ -91,15 +91,13 @@
     "@storybook/addon-controls": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
     "@storybook/api": "^7.6.17",
-    "@storybook/client-api": "^7.6.17",
     "@storybook/components": "^7.6.17",
     "@storybook/manager-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",
-    "@storybook/testing-react": "^1.3.0",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -164,9 +162,9 @@
     "postcss-import": "^15.1.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
-    "react": "^19.0.0-canary-4c12339ce-20240408",
+    "react": "^18.0.0",
     "react-axe": "^3.0.2",
-    "react-dom": "^19.0.0-canary-4c12339ce-20240408",
+    "react-dom": "^18.0.0",
     "react-frame-component": "^5.0.0",
     "react-test-renderer": "^16.9.0",
     "recast": "^0.20",
@@ -201,8 +199,7 @@
     "remark-parse": "10.0.1",
     "browserslist": "4.23.0",
     "@storybook/core-common": "7.6.10",
-    "storybook-builder-parcel/@storybook/core-common": "7.6.10",
-    "@storybook/testing-react/@storybook/csf": "0.1.3"
+    "storybook-builder-parcel/@storybook/core-common": "7.6.10"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@react-aria/focus/stories/FocusScope.stories.tsx

@@ -24,7 +24,6 @@ interface StoryProps {
 
 const meta: Meta<StoryProps> = {
   title: 'FocusScope',
-  component: FocusScope,
   parameters: {
     description: {
       data: 'Should not be able to click or navigate back into inputs from previous "dialogs".'

packages/@react-aria/focus/test/FocusScopeOwnerDocument.test.js

@@ -16,10 +16,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import userEvent from '@testing-library/user-event';
 
-const REACT_VERSION = React.version;
-const reactMajor = parseInt(REACT_VERSION.split('.')[0], 10);
-let root;
-
 describe('FocusScope', function () {
   let iframe;
   let iframeRoot;
@@ -28,14 +24,7 @@ describe('FocusScope', function () {
 
   const IframeExample = ({children}) => {
     React.useEffect(() => {
-      function renderIframe() {
-        if (reactMajor >= 19) {
-          root.render(<>{children}</>);
-        } else {
-          ReactDOM.render(<>{children}</>, iframeRoot);
-        }
-      }
-      renderIframe();
+      ReactDOM.render(<>{children}</>, iframeRoot);
     }, [children]);
 
     return null;
@@ -52,13 +41,6 @@ describe('FocusScope', function () {
     const iframeDocument = iframe.contentWindow.document;
     iframeRoot = iframeDocument.createElement('div');
     iframeDocument.body.appendChild(iframeRoot);
-
-    if (reactMajor >= 19) {
-      await act(async () => {
-        let {createRoot} = await import('react-dom/client');
-        root = createRoot(iframeRoot);
-      });
-    }
   });
 
   afterEach(() => {

packages/@react-aria/label/test/useField.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {composeStories} from '@storybook/testing-react';
+import {composeStories} from '@storybook/react';
 import React from 'react';
 import {render, renderHook} from '@react-spectrum/test-utils';
 import * as stories from '../stories/useField.stories';

packages/@react-aria/table/test/ariaTableResizing.test.tsx

@@ -12,7 +12,7 @@
 
 import {act, fireEvent} from '@react-spectrum/test-utils';
 import {Cell, Column, Row, TableBody, TableHeader} from '@react-stately/table';
-import {composeStories} from '@storybook/testing-react';
+import {composeStories} from '@storybook/react';
 import {Key} from '@react-types/shared';
 import React from 'react';
 import {render} from '@testing-library/react';

packages/@react-aria/utils/stories/platform.stories.tsx

@@ -10,7 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-import {StoryFn as _Story, Meta} from '@storybook/react';
 import {
   isAndroid,
   isAppleDevice,
@@ -21,20 +20,14 @@ import {
   isMac,
   isWebKit
 } from '../src';
+import {Meta} from '@storybook/react';
 import React from 'react';
 
-/**
- * Helper type so `bind` returns the actual Story type.
- */
-interface Story<T> extends _Story<T> {
-  bind: (this: ThisParameterType<typeof Function.bind>, thisArg: Parameters<typeof Function.bind>[0], ...argArray: Parameters<typeof Function.bind>[1][]) => _Story<T>
-}
-
 export default {
   title: 'platform'
 } as Meta<object>;
 
-const Template: Story<object> = (args) => (
+const Template = (args) => (
   <table {...args}>
     <tr>
       <th>Platform</th>

packages/@react-spectrum/accordion/chromatic/Accordion.chromatic-fc.tsx → packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx

@@ -12,7 +12,7 @@
 
 import {Meta} from '@storybook/react';
 import {SpectrumAccordionProps} from '@react-types/accordion';
-import {Template} from './Accordion.chromatic';
+import {Template} from '../chromatic/Accordion.stories';
 
 const meta: Meta<SpectrumAccordionProps<object>> = {
   title: 'Accordion'

packages/@react-spectrum/actionbar/chromatic/ActionBar.chromatic-fc.tsx → packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx

@@ -11,7 +11,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default, LargeWidth} from './ActionBar.chromatic';
+import {Default, LargeWidth} from '../chromatic/ActionBar.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
 

packages/@react-spectrum/actionbar/package.json

@@ -43,6 +43,7 @@
     "@react-aria/utils": "^3.23.2",
     "@react-spectrum/actiongroup": "^3.10.3",
     "@react-spectrum/button": "^3.16.2",
+    "@react-spectrum/layout": "^3.6.3",
     "@react-spectrum/overlays": "^5.5.5",
     "@react-spectrum/text": "^3.5.3",
     "@react-spectrum/utils": "^3.11.5",

packages/@react-spectrum/actiongroup/chromatic/ActionGroup.chromatic-fc.tsx → packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 
-import {Compact, Default, IsDisabled, IsEmphasized, IsQuiet, StaticColorBlack, StaticColorWhite} from './ActionGroup.chromatic';
+import {Compact, Default, IsDisabled, IsEmphasized, IsQuiet, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionGroup.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
 

packages/@react-spectrum/actiongroup/package.json

@@ -41,6 +41,7 @@
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/utils": "^3.23.2",
     "@react-spectrum/button": "^3.16.2",
+    "@react-spectrum/layout": "^3.6.3",
     "@react-spectrum/menu": "^3.18.1",
     "@react-spectrum/text": "^3.5.3",
     "@react-spectrum/tooltip": "^3.6.5",

packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.chromatic-fc.tsx → packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Template} from './SearchAutocomplete.chromatic';
+import {Template} from '../chromatic/SearchAutocomplete.stories';
 
 export default {
   title: 'SearchAutocomplete'

packages/@react-spectrum/autocomplete/chromatic/SearchAutocompleteRTL.chromatic.tsx → packages/@react-spectrum/autocomplete/chromatic/SearchAutocompleteRTL.stories.tsx

@@ -22,4 +22,4 @@ const meta: Meta = {
 
 export default meta;
 
-export {PropDefaults, PropInputValue, PropAriaLabelled, PropLabelEnd, PropLabelSide, PropCustomWidth, PropIconFilter, PropIconNull} from './SearchAutocomplete.chromatic';
+export {PropDefaults, PropInputValue, PropAriaLabelled, PropLabelEnd, PropLabelSide, PropCustomWidth, PropIconFilter, PropIconNull} from './SearchAutocomplete.stories';

packages/@react-spectrum/avatar/package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@react-aria/utils": "^3.23.2",
+    "@react-spectrum/layout": "^3.6.3",
     "@react-spectrum/utils": "^3.11.5",
     "@react-types/avatar": "^3.0.5",
     "@react-types/shared": "^3.22.1",

packages/@react-spectrum/badge/chromatic/Badge.chromatic-fc.tsx → packages/@react-spectrum/badge/chromatic-fc/Badge.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {Badge} from '..';
-import {BadgeStory, renderVariants} from './Badge.chromatic';
+import {BadgeStory, renderVariants} from '../chromatic/Badge.stories';
 import CheckmarkCircle from '@spectrum-icons/workflow/src/CheckmarkCircle';
 import {ComponentMeta} from '@storybook/react';
 import React from 'react';

packages/@react-spectrum/badge/package.json

@@ -41,6 +41,7 @@
     "@react-spectrum/utils": "^3.11.5",
     "@react-types/badge": "^3.1.7",
     "@react-types/shared": "^3.22.1",
+    "@spectrum-icons/workflow": "^4.2.10",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {

packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.chromatic-fc.tsx → packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {Template} from './Breadcrumbs.chromatic';
+import {Default as ChromaticDefault} from '../chromatic/Breadcrumbs.stories';
 
 export default {
   title: 'Breadcrumbs'
 };
 
 export const Default = {
-  render: Template
+  ...ChromaticDefault
 };

packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.chromatic.tsx → packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx

@@ -23,49 +23,44 @@ const meta: Meta<SpectrumBreadcrumbsProps<object>> = {
 
 export default meta;
 
-export const Template = (args) => (
-  <Breadcrumbs {...args}>
-    <Item key="Folder 1">The quick brown fox jumps over</Item>
-    <Item key="Folder 2">My Documents</Item>
-    <Item key="Folder 3">Kangaroos jump high</Item>
-    <Item key="Folder 4">Koalas are very cute</Item>
-    <Item key="Folder 5">Wombat's noses</Item>
-    <Item key="Folder 6">Wattle trees</Item>
-    <Item key="Folder 7">April 7</Item>
-  </Breadcrumbs>
-);
 
 export const Default = {
-  render: Template
+  args: {
+    children: [
+      <Item key="Folder 1">The quick brown fox jumps over</Item>,
+      <Item key="Folder 2">My Documents</Item>,
+      <Item key="Folder 3">Kangaroos jump high</Item>,
+      <Item key="Folder 4">Koalas are very cute</Item>,
+      <Item key="Folder 5">Wombat's noses</Item>,
+      <Item key="Folder 6">Wattle trees</Item>,
+      <Item key="Folder 7">April 7</Item>
+    ]
+  }
 };
 
 export const IsMultiline = {
-  render: Template,
-  args: {isMultiline: true}
+  args: {...Default.args, isMultiline: true}
 };
 
 export const SizeS = {
-  render: Template,
-  args: {size: 'S'}
+  args: {...Default.args, size: 'S'}
 };
 
 export const SizeM = {
-  render: Template,
-  args: {size: 'M'}
+  args: {...Default.args, size: 'M'}
 };
 
 export const Truncated = {
-  render: Template,
   decorators: [
     (Story) => (
       <div style={{width: '100px'}}>
         <Story />
       </div>
     )
-  ]
+  ],
+  args: {...Default.args}
 };
 
 export const ShowRoot = {
-  render: Template,
-  args: {showRoot: true}
+  args: {...Default.args, showRoot: true}
 };

packages/@react-spectrum/button/chromatic/ActionButton.chromatic-fc.tsx → packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
-import {IconText, StaticColorBlack, StaticColorWhite} from './ActionButton.chromatic';
+import {IconText, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionButton.stories';
 import React from 'react';
 
 export default {

packages/@react-spectrum/button/chromatic/Button.chromatic-fc.tsx → packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ElementA, VariantAccent, VariantNegative, VariantPrimary, WithIcon} from './Button.chromatic';
+import {ElementA, VariantAccent, VariantNegative, VariantPrimary, WithIcon} from '../chromatic/Button.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';