chore: RSP storybook updates (#8391)

* chore: TS explicit module boundaries RSP 1

* card

* checkbox

* Color

* combobox, contextualhelp, datepicker

* dialog

* divider, dropzone, form, icon, illustratedmessage, image

* fix lint

* inlinealert, label, labeledvalue, layout

* link, list, listbox

* menu

* meter, numberfield, overlays, picker

* progress, provider, radio

* searchfield, slider, steplist, story-utils, switch

* table

* tabs, text, textfield, toast, tooltip

* finish last tab

* tree, view, well

* revert source file changes

* categorise all RAC stories

Author: snowystinger

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

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
 import {SpectrumAccordionProps} from '../src/Accordion';
 import {Template} from '../chromatic/Accordion.stories';
 
@@ -20,7 +21,9 @@ const meta: Meta<SpectrumAccordionProps> = {
 
 export default meta;
 
-export const Default = {
-  render: Template,
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };

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

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle, SpectrumAccordionProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Accordion',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Template = (args: SpectrumAccordionProps): JSX.Element => (
   <Accordion {...args}>
     <Disclosure id="files">
       <DisclosureTitle>
@@ -51,16 +53,16 @@ export const Template = (args) => (
   </Accordion>
 );
 
-export const Default = {
-  render: Template
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithExpandedKeys = {
-  render: Template,
+export const WithExpandedKeys: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };
 
-export const WithDisabledDisclosure = {
+export const WithDisabledDisclosure: AccordionStory = {
   render: (args) => (
     <Accordion {...args}>
       <Disclosure id="files">
@@ -90,22 +92,22 @@ export const WithDisabledDisclosure = {
     </Accordion>)
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WithWrappingTitle = {
+export const WithWrappingTitle: AccordionStory = {
   render: (args) => (
     <Accordion maxWidth="size-3000" {...args}>
       <Disclosure id="files">
         <DisclosureTitle>
-          Long long long long long long long long long long long long long  long long long wrapping title 
+          Long long long long long long long long long long long long long  long long long wrapping title
         </DisclosureTitle>
         <DisclosurePanel>
           Files content

packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Disclosure, DisclosurePanel, DisclosureTitle, SpectrumDisclosureProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Disclosure',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type DisclosureStory = StoryObj<SpectrumDisclosureProps>;
+
+export const Template = (args: SpectrumDisclosureProps): JSX.Element => (
   <Disclosure {...args}>
     <DisclosureTitle>
       Your files
@@ -33,27 +35,29 @@ export const Template = (args) => (
   </Disclosure>
 );
 
-export const Default = {
-  render: Template
+export const Default: DisclosureStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WrappingTitle = (args) => (
-  <Disclosure maxWidth="size-3000" {...args}>
-    <DisclosureTitle>
-      Long long long long long long long long long long long long long  long long long wrapping title 
-    </DisclosureTitle>
-    <DisclosurePanel>
-      Files content
-    </DisclosurePanel>
-  </Disclosure>
-);
+export const WrappingTitle: DisclosureStory = {
+  render: (args) => (
+    <Disclosure maxWidth="size-3000" {...args}>
+      <DisclosureTitle>
+        Long long long long long long long long long long long long long  long long long wrapping title
+      </DisclosureTitle>
+      <DisclosurePanel>
+        Files content
+      </DisclosurePanel>
+    </Disclosure>
+  )
+};

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

@@ -11,20 +11,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default, LargeWidth} from '../chromatic/ActionBar.stories';
+import {Example} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const All = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const All: ActionBarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Default</h2>
-    <Default />
+    <Flex gap="size-250">
+      <Example />
+      <Example defaultSelectedKeys={new Set(['Foo 1'])} />
+    </Flex>
     <h2>Large width</h2>
-    <LargeWidth />
+    <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
   </Flex>
 );
 All.story = {

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

@@ -13,12 +13,15 @@
 import {Example, Example2} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const Default = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const Default: ActionBarStory = () => (
   <Flex gap="size-250">
     <Example />
     <Example defaultSelectedKeys={new Set(['Foo 1'])} />
@@ -29,28 +32,28 @@ Default.story = {
   name: 'default'
 };
 
-export const IsEmphasized = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
+export const IsEmphasized: ActionBarStory = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const LargeWidth = () => (
+export const LargeWidth: ActionBarStory = () => (
   <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
 LargeWidth.story = {
   name: 'large width'
 };
 
-export const CollapsedIcons = () => (
+export const CollapsedIcons: ActionBarStory = () => (
   <Example isEmphasized tableWidth={500} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
 CollapsedIcons.story = {
   name: 'collapsed icons'
 };
 
-export const CollapseRounding = () => (
+export const CollapseRounding: ActionBarStory = () => (
   <Example2 tableWidth={800} defaultSelectedKeys={new Set(['Foo 1'])} />
 );

packages/@react-spectrum/actionbar/stories/Example.tsx

@@ -19,7 +19,7 @@ import Duplicate from '@spectrum-icons/workflow/Duplicate';
 import Edit from '@spectrum-icons/workflow/Edit';
 import {mergeProps} from '@react-aria/utils';
 import Move from '@spectrum-icons/workflow/Move';
-import React, {useRef, useState} from 'react';
+import React, {JSX, useRef, useState} from 'react';
 import {Selection} from '@react-types/shared';
 import {Text} from '@react-spectrum/text';
 
@@ -48,7 +48,7 @@ let defaultItems = [
   {test: 'Test 2', foo: 'Foo 16', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'}
 ];
 
-export function Example(props: any = {}) {
+export function Example(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 
@@ -118,7 +118,7 @@ export function Example(props: any = {}) {
   );
 }
 
-export function Example2(props: any = {}) {
+export function Example2(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 

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

@@ -11,32 +11,41 @@
  */
 
 
-import {Compact, Default, IsDisabled, IsEmphasized, IsQuiet, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionGroup.stories';
+import {docItems, editItems, Render, viewItems} from '../chromatic/ActionGroup.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
+import {View} from '@react-spectrum/view';
 
 export default {
   title: 'ActionGroup'
 };
 
-export const All = () => (
+export type ActionGroupStory = StoryFn<typeof Render>;
+
+export const All: ActionGroupStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>default</h2>
-    <Default />
+    <Render items={docItems} />
     <h2>isDisabled</h2>
-    <IsDisabled />
+    <Render items={docItems} isDisabled defaultSelectedKeys={['1']} />
     <h2>compact</h2>
-    <Compact />
+    <Render items={viewItems} density="compact" defaultSelectedKeys={['1']} />
     <h2>isQuiet</h2>
-    <IsQuiet />
+    <Render items={editItems} isQuiet defaultSelectedKeys={['1']} />
     <h2>isEmphasized</h2>
-    <IsEmphasized />
+    <Render items={docItems} isEmphasized defaultSelectedKeys={['1']} />
     <h2>staticColor: black</h2>
-    <StaticColorBlack />
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render items={viewItems} staticColor="black" defaultSelectedKeys={['1']} />
+    </View>
     <h2>staticColor: white</h2>
-    <StaticColorWhite />
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render items={viewItems} staticColor="white" defaultSelectedKeys={['1']} />
+    </View>
   </Flex>
 );
+
 All.story = {
   name: 'all'
 };