chore: TS explicit module S2

packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx

@@ -13,7 +13,7 @@
 import {ActionButton, Text} from '../src';
 import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButton.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
@@ -29,6 +29,8 @@ const meta: Meta<typeof ActionButton> = {
 
 export default meta;
 
+type ActionButtonStory = StoryObj<typeof ActionButton>;
+
 let states = [
   {isQuiet: true},
   {isDisabled: true},
@@ -64,19 +66,19 @@ const Template = (args) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: ActionButtonStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithIcon = {
-  render: Template,
+export const WithIcon: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><NewIcon /><Text>Press me</Text></>
   }
 };
 
-export const IconOnly = {
-  render: Template,
+export const IconOnly: ActionButtonStory = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <NewIcon />
   }

packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx

@@ -14,7 +14,7 @@ import {ActionButton, ActionButtonGroup, Text} from '../src';
 import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
 import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
 import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg';
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
 import {style} from '../style' with { type: 'macro' };
 
@@ -46,26 +46,32 @@ let justifiedStyle = style({
   }
 });
 
-export const Example: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
-    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
-    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
-  </ActionButtonGroup>
-);
+export const Example: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+      <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+      <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+    </ActionButtonGroup>
+  )
+};
 
-export const IconOnly: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
-    <ActionButton aria-label="Cut"><Cut /></ActionButton>
-    <ActionButton aria-label="Copy"><Copy /></ActionButton>
-    <ActionButton aria-label="Paste"><Paste /></ActionButton>
-  </ActionButtonGroup>
-);
+export const IconOnly: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+      <ActionButton aria-label="Cut"><Cut /></ActionButton>
+      <ActionButton aria-label="Copy"><Copy /></ActionButton>
+      <ActionButton aria-label="Paste"><Paste /></ActionButton>
+    </ActionButtonGroup>
+  )
+};
 
-export const Justified: StoryFn<typeof ActionButtonGroup> = (args) => (
-  <ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
-    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
-    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
-    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
-  </ActionButtonGroup>
-);
+export const Justified: StoryObj<typeof ActionButtonGroup> = {
+  render: (args) => (
+    <ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
+      <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+      <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+      <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+    </ActionButtonGroup>
+  )
+};

packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx

@@ -26,20 +26,22 @@ const meta: Meta<typeof ActionMenu<any>> = {
 export default meta;
 type Story = StoryObj<typeof ActionMenu<any>>;
 
-export const Static: Story = {...Example};
-
-Static.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Static: Story = {
+  ...Example,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };
 
-export const Dynamic = {...DynamicExample};
-
-Dynamic.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Dynamic: Story = {
+  ...DynamicExample,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };

packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx

@@ -26,11 +26,12 @@ const meta: Meta<typeof AlertDialog> = {
 
 export default meta;
 
-export const Example = {...Base} as StoryObj;
-
-Example.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  await userEvent.keyboard('[Enter]');
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('alertdialog');
+export const Example: StoryObj<typeof AlertDialog> = {
+  ...Base,
+  play: async ({canvasElement}) => {
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('alertdialog');
+  }
 };

packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx

@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 
 const meta: Meta<typeof Avatar> = {
@@ -23,12 +23,13 @@ const meta: Meta<typeof Avatar> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Avatar>;
 
-export const Default = {
+export const Default: Story = {
   render: () => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
 };
 
-export const OverBackground = {
+export const OverBackground: Story = {
   render: () => (
     <div className={style({backgroundColor: 'indigo-800', padding: 40})}>
       <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />

packages/@react-spectrum/s2/chromatic/Badge.stories.tsx

@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Badge} from '../src';
+import {Badge, BadgeProps} from '../src';
 import {Example} from '../stories/Badge.stories';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 
@@ -26,6 +27,7 @@ const meta: Meta<typeof Badge> = {
 };
 
 export default meta;
+type Story = StoryObj<typeof Template>;
 
 let states = [
   {size: ['S', 'M', 'L', 'XL']},
@@ -36,7 +38,7 @@ let states = [
 let combinations = generatePowerset(states);
 let chunkSize = Math.ceil(combinations.length / 3);
 
-const Template = ({combos, ...args}) => {
+const Template = ({combos, ...args}: {combos: any[], args: BadgeProps}): ReactNode => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
@@ -52,20 +54,20 @@ const Template = ({combos, ...args}) => {
   );
 };
 
-export const Default = {
-  render: Template,
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
   name: 'all visual option combos 1 of 3',
   args: {combos: combinations.slice(0, chunkSize)}
 };
 
-export const ComboPt2 = {
-  render: Template,
+export const ComboPt2: Story = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize, chunkSize * 2)},
   name: 'all visual option combos 2 of 3'
 };
 
-export const ComboPt3 = {
-  render: Template,
+export const ComboPt3: Story = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
   name: 'all visual option combos 3 of 3'
 };

packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx

@@ -14,6 +14,7 @@ import {Breadcrumb, Breadcrumbs} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Many} from '../stories/Breadcrumbs.stories';
 import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 import {userEvent, within} from '@storybook/testing-library';
@@ -26,19 +27,19 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
-export const Dynamic = Many as StoryObj;
-
-Dynamic.parameters = {
-  // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
-  chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
-};
-
-Dynamic.play = async ({canvasElement}) => {
-  // This uses click because using .tab twice didn't move focus to the menu
-  let trigger = await within(canvasElement).findByRole('button');
-  await userEvent.click(trigger);
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('menu');
+export const Dynamic: StoryObj<typeof Breadcrumbs> = {
+  ...Many,
+  parameters: {
+    // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  play: async ({canvasElement}) => {
+    // This uses click because using .tab twice didn't move focus to the menu
+    let trigger = await within(canvasElement).findByRole('button');
+    await userEvent.click(trigger);
+    let body = canvasElement.ownerDocument.body;
+    await within(body).findByRole('menu');
+  }
 };
 
 let states = [
@@ -48,7 +49,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = () => {
+const Template = (): ReactNode => {
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
@@ -76,8 +77,8 @@ const Template = () => {
   );
 };
 
-export const Powerset = {
-  render: Template,
+export const Powerset: StoryObj<typeof Template> = {
+  render: () => <Template />,
   parameters: {
     chromaticProvider: {locales: ['en-US'], disableAnimations: true}
   }

packages/@react-spectrum/s2/chromatic/Button.stories.tsx

@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Text} from '../src';
+import {Button, ButtonProps, Text} from '../src';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {ReactNode} from 'react';
 import {shortName} from './utils';
 import {StaticColorProvider} from '../stories/utils';
 import {style} from '../style' with { type: 'macro' };
@@ -39,7 +40,7 @@ let states = [
 
 let combinations = generatePowerset(states);
 
-const Template = (args) => {
+const Template = (args: ButtonProps): ReactNode => {
   let {children, ...otherArgs} = args;
   return (
     <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
@@ -65,19 +66,19 @@ const Template = (args) => {
   );
 };
 
-export const Default = {
-  render: Template
+export const Default: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithIcon = {
-  render: Template,
+export const WithIcon: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <><NewIcon /><Text>Press me</Text></>
   }
 };
 
-export const IconOnly = {
-  render: Template,
+export const IconOnly: StoryObj<typeof Button> = {
+  render: (args) => <Template {...args} />,
   args: {
     children: <NewIcon />
   }