chore: remove argTypesRegex and explicitly pass actions args in S2 storybook (#8844)

* chore: remove argTypesRegex and explicitly pass actions in s2 storybook

* clean up

Author: reidbarber

.storybook-s2/preview.tsx

@@ -16,7 +16,6 @@ channel.on(DARK_MODE_EVENT_NAME, isDark => document.documentElement.dataset.colo
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {},
       exclude: ['key', 'ref']

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

@@ -11,22 +11,25 @@
  */
 
 import {ActionButton, ActionButtonGroup, Text} from '../src';
-import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
+import {categorizeArgTypes, getActionArgs, 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, StoryObj} from '@storybook/react';
 import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
 import {style} from '../style' with { type: 'macro' };
 
+const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];
+
 const meta: Meta<typeof ActionButtonGroup> = {
   component: ActionButtonGroup,
   parameters: {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
+    ...categorizeArgTypes('Events', events)
   },
+  args: {...getActionArgs(events)},
   title: 'S2 Chromatic/ActionButtonGroup'
 };
 

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {categorizeArgTypes, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
+import {categorizeArgTypes, getActionArgs, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
@@ -19,15 +19,18 @@ import {shortName} from './utils';
 import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton, ToggleButtonProps} from '../src';
 
+const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];
+
 const meta: Meta<typeof ToggleButton> = {
   component: ToggleButton,
   parameters: {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
+    ...categorizeArgTypes('Events', events)
   },
+  args: {...getActionArgs(events)},
   title: 'S2 Chromatic/ToggleButton'
 };
 

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

@@ -11,22 +11,25 @@
  */
 
 import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
-import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
+import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from '../stories/utils';
 import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton, ToggleButtonGroup} from '../src';
 import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';
 
+const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];
+
 const meta: Meta<typeof ToggleButtonGroup> = {
   component: ToggleButtonGroup,
   parameters: {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
+    ...categorizeArgTypes('Events', events)
   },
+  args: {...getActionArgs(events)},
   title: 'S2 Chromatic/ToggleButtonGroup'
 };
 

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

@@ -12,14 +12,16 @@
 
 import {ActionButton, Avatar, NotificationBadge, Provider, Text} from '../src';
 import BellIcon from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
-import {categorizeArgTypes, StaticColorDecorator} from './utils';
+import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from './utils';
 import CommentIcon from '../s2wf-icons/S2_Icon_Comment_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {style} from '../style' with { type: 'macro' };
 import './unsafe.css';
 import {useNumberFormatter} from 'react-aria';
 
+const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'];
+
 const meta: Meta<typeof ActionButton> = {
   component: ActionButton,
   parameters: {
@@ -28,9 +30,10 @@ const meta: Meta<typeof ActionButton> = {
   decorators: [StaticColorDecorator],
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp']),
+    ...categorizeArgTypes('Events', events),
     children: {table: {disable: true}}
   },
+  args: {...getActionArgs(events)},
   title: 'ActionButton'
 };
 

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

@@ -12,19 +12,22 @@
 
 import {ActionMenu, MenuItem} from '../src';
 
-import {categorizeArgTypes} from './utils';
+import {categorizeArgTypes, getActionArgs} from './utils';
 import type {Meta, StoryObj} from '@storybook/react';
 
+const events = ['onAction', 'onOpenChange'];
+
 const meta: Meta<typeof ActionMenu<any>> = {
   component: ActionMenu,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onAction', 'onOpenChange']),
+    ...categorizeArgTypes('Events', events),
     children: {table: {disable: true}}
   },
+  args: {...getActionArgs(events)},
   title: 'ActionMenu'
 };
 

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

@@ -12,12 +12,14 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Text} from '../src';
-import {categorizeArgTypes, StaticColorDecorator} from './utils';
+import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from './utils';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useEffect, useRef, useState} from 'react';
 
+const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'];
+
 const meta: Meta<typeof Button> = {
   component: Button,
   parameters: {
@@ -26,9 +28,10 @@ const meta: Meta<typeof Button> = {
   decorators: [StaticColorDecorator],
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp']),
+    ...categorizeArgTypes('Events', events),
     children: {table: {disable: true}}
   },
+  args: {...getActionArgs(events)},
   title: 'Button'
 };
 

packages/@react-spectrum/s2/stories/Calendar.stories.tsx

@@ -12,21 +12,23 @@
 
 import {ActionButton, Calendar, CalendarProps} from '../src';
 import {CalendarDate, getLocalTimeZone, today} from '@internationalized/date';
-import {CalendarSwitcher, categorizeArgTypes} from './utils';
+import {CalendarSwitcher, categorizeArgTypes, getActionArgs} from './utils';
 import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl';
 import {DateValue} from 'react-aria';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactElement, useState} from 'react';
 import {style} from '../style' with {type: 'macro'};
 
+const events = ['onChange'];
+
 const meta: Meta<typeof Calendar> = {
   component: Calendar,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onChange']),
+    ...categorizeArgTypes('Events', events),
     errorMessage: {control: {type: 'text'}},
     visibleMonths: {
       control: {
@@ -35,6 +37,7 @@ const meta: Meta<typeof Calendar> = {
       options: [1, 2, 3]
     }
   },
+  args: {...getActionArgs(events)},
   title: 'Calendar',
   decorators: [
     (Story) => (

packages/@react-spectrum/s2/stories/ColorArea.stories.tsx

@@ -10,20 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
-import {categorizeArgTypes} from './utils';
+import {categorizeArgTypes, getActionArgs} from './utils';
 import {ColorArea} from '../src/ColorArea';
 import type {Meta, StoryObj} from '@storybook/react';
 
+const events = ['onChange', 'onChangeEnd'] as const;
+
 const meta: Meta<typeof ColorArea> = {
   component: ColorArea,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd']),
+    ...categorizeArgTypes('Events', [...events]),
     value: {control: {type: 'text'}}
   },
+  args: {...getActionArgs([...events])},
   title: 'ColorArea'
 };
 

packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx

@@ -10,21 +10,24 @@
  * governing permissions and limitations under the License.
  */
 
-import {categorizeArgTypes} from './utils';
+import {categorizeArgTypes, getActionArgs} from './utils';
 
 import {ColorSlider} from '../src/ColorSlider';
 import type {Meta, StoryObj} from '@storybook/react';
 
+const events = ['onChange', 'onChangeEnd'];
+
 const meta: Meta<typeof ColorSlider> = {
   component: ColorSlider,
   parameters: {
     layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {
-    ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd']),
+    ...categorizeArgTypes('Events', events),
     contextualHelp: {table: {disable: true}}
   },
+  args: {...getActionArgs(events)},
   title: 'ColorSlider'
 };