Clean up docs build props tables (#182)

* clean up storybook docs prop tables

* remove designs addon

* add Events category to CheckboxGroup

---------

Co-authored-by: Reid Barber <[email protected]>

Author: 2 people

.storybook-s2/main.ts

@@ -24,8 +24,6 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     // "@storybook/addon-styling-webpack",
-    // re-enable when we get single components in Figma
-    "@storybook/addon-designs",
     "storybook-dark-mode"
   ],
   framework: {

.storybook-s2/preview.tsx

@@ -1,5 +1,5 @@
 import '../src/page';
-import {themes} from '@storybook/theming';
+import { themes } from '@storybook/theming';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { store } from 'storybook-dark-mode/dist/esm/Tool';
 import { addons } from '@storybook/preview-api';
@@ -17,6 +17,7 @@ const preview = {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {},
+      exclude: ['key', 'ref']
     },
     docs: {
       container: (props) => {
@@ -62,6 +63,20 @@ const preview = {
         brandImage: new URL('raw:logo-dark.svg', import.meta.url).toString()
       }
     }
+  },
+  argTypes: {
+    styles: {
+      table: {category: 'Styles'},
+      control: {disable: true},
+    },
+    UNSAFE_className: {
+      table: {category: 'Styles'},
+      control: {disable: true},
+    },
+    UNSAFE_style: {
+      table: {category: 'Styles'},
+      control: {disable: true},
+    }
   }
 };
 
@@ -79,7 +94,7 @@ export const parameters = {
       ]
     }
   },
-  layout: 'fullscreen'
+  layout: 'fullscreen',
 };
 
 export default preview;

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

@@ -13,7 +13,7 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import {ActionButton, Text} from '../src';
 import NewIcon from '../s2wf-icons/assets/svg/S2_Icon_New_20_N.svg';
-import {StaticColorDecorator} from './utils';
+import {StaticColorDecorator, categorizeArgTypes} from './utils';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import './unsafe.css';
 
@@ -23,7 +23,10 @@ const meta: Meta<typeof ActionButton> = {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
+  }
 };
 
 export default meta;

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

@@ -13,13 +13,17 @@
 import {ActionMenu, MenuItem} from '../src';
 
 import type {Meta, StoryObj} from '@storybook/react';
+import {categorizeArgTypes} from './utils';
 
 const meta: Meta<typeof ActionMenu> = {
   component: ActionMenu,
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onAction', 'onOpenChange'])
+  }
 };
 
 export default meta;

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

@@ -22,13 +22,16 @@ const meta: Meta<typeof Breadcrumbs> = {
   argTypes: {
     size: {
       control: 'radio',
-      options: [undefined, 'M', 'L']
+      options: ['M', 'L']
     },
     isDisabled: {
       control: {type: 'boolean'}
     },
     isMultiline: {
       control: {type: 'boolean'}
+    },
+    onAction: {
+      table: {category: 'Events'}
     }
   },
   tags: ['autodocs']

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

@@ -14,15 +14,18 @@ import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/assets/svg/S2_Icon_New_20_N.svg';
 import {Button, Text} from '../src';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
-import {StaticColorDecorator} from './utils';
+import {StaticColorDecorator, categorizeArgTypes} from './utils';
 
 const meta: Meta<typeof Button> = {
   component: Button,
   parameters: {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
+  }
 };
 
 export default meta;

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

@@ -19,7 +19,11 @@ const meta: Meta<typeof Checkbox> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    inputRef: {control: {disable: true}},
+    onChange: {table: {category: 'Events'}}
+  }
 };
 
 export default meta;

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

@@ -18,7 +18,10 @@ const meta: Meta<typeof CheckboxGroup> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {table: {category: 'Events'}}
+  }
 };
 
 export default meta;

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

@@ -12,13 +12,17 @@
 
 import {ColorArea} from '../src/ColorArea';
 import type {Meta} from '@storybook/react';
+import {categorizeArgTypes} from './utils';
 
 const meta: Meta<typeof ColorArea> = {
   component: ColorArea,
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd'])
+  }
 };
 
 export default meta;

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

@@ -18,7 +18,10 @@ const meta: Meta<typeof ColorField> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {table: {category: 'Events'}}
+  }
 };
 
 export default meta;