Improve Storybook docs build (adobe#114)

* add menu and actionmenu * fix stories for actionbutton and checkboxgroup * fix actionbutton resizing story * Remove styles prop from code output * remove handlers from code output * add // code: null to config * fix StaticColorDecorator * cleanup * improve dialog example * add global padding to stories * remove css file * remove role from DialogProps type * improve ActionButton story * use single quotes for jsdoc @default * cleanup Dialog stories and code output Co-authored-by: Reid Barber <reid@reidbarber.com>
blefnk · Mar 26, 2024 · 9d93b70 · 9d93b70
1 parent e4587dd
commit 9d93b70
Show file tree

Hide file tree

Showing 29 changed files with 219 additions and 76 deletions.
diff --git a/.storybook-s2/preview.ts b/.storybook-s2/preview.ts
@@ -18,13 +18,18 @@ const preview = {
     docs: {
       theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? themes.dark : themes.light,
       source: {
+        // code: null, // Will disable code button, and show "No code available"
         transform: (code: string) => {
           // Replace any <_ with <
           code = code.replace(/<\s?_/g, '<');
           // Replace any </_ with </
           code = code.replace(/<\/\s?_/g, '</');
           // Remove any className prop
           code = code.replace(/\s+className=".*"/g, '');
+          // Remove any styles prop
+          code = code.replace(/\s+styles=".*"/g, '');
+          // Remove any on* prop
+          code = code.replace(/\s+on[A-Z].*={.*}/g, '');
           return code;
         }
       }

diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -12,7 +12,7 @@ export interface ActionButtonStyleProps {
   /**
    * The size of the ActionButton.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the ActionButton appears over a color background. */

diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
@@ -14,19 +14,19 @@ interface ButtonStyleProps {
   /**
    * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.
    *
-   * @default "primary"
+   * @default 'primary'
    */
   variant?: 'primary' | 'secondary' | 'accent' | 'negative',
   /**
    * The background style of the Button.
    *
-   * @default "fill"
+   * @default 'fill'
    */
   treatment?: 'fill' | 'outline',
   /**
    * The size of the Button.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */

diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -28,7 +28,7 @@ interface ButtonGroupStyleProps {
   /**
    * The size of the Buttons within the ButtonGroup.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -14,7 +14,7 @@ interface CheckboxStyleProps {
   /**
    * The size of the Checkbox.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** Whether the Checkbox should be displayed with an emphasized style. */

diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -15,7 +15,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   /**
    * The size of the Checkboxes in the CheckboxGroup.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**

diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx
@@ -13,7 +13,7 @@ interface ClearButtonStyleProps {
   /**
    * The size of the ClearButton.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -11,7 +11,7 @@ interface CloseButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'ch
   /**
    * The size of the CloseButton.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */

diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -11,15 +11,15 @@ import {DOMRef} from '@react-types/shared';
 import {StyleProps} from './style-utils';
 
 // TODO: what style overrides should be allowed?
-export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {
+export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'role'>, StyleProps {
   /**
    * Whether the Dialog is dismissable.
    */
   isDismissable?: boolean,
   /**
    * The size of the Dialog.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L'
 }

diff --git a/packages/@react-spectrum/s2/src/DialogTrigger.tsx b/packages/@react-spectrum/s2/src/DialogTrigger.tsx
@@ -5,7 +5,7 @@ export interface DialogTriggerProps extends AriaDialogTriggerProps, Pick<AriaPop
   /**
    * The type of Dialog that should be rendered. 
    * 
-   * @default "modal"
+   * @default 'modal'
    */
   type?: 'modal' | 'popover' | 'fullscreen' | 'fullscreenTakeover', // TODO: add tray back in
   /**

diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -25,7 +25,7 @@ interface IllustratedMessageStyleProps {
   /**
    * The size of the IllustratedMessage.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L',
   /**

diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -58,7 +58,7 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   /**
    * The size of the Menu.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**

diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -10,8 +10,8 @@ import {ColorSchemeContext} from './Provider';
 interface ModalProps extends ModalOverlayProps {
   /**
    * The size of the Modal.
-   *
-   * @default "M"
+   * 
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
 }

diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -27,7 +27,7 @@ export interface PickerStyleProps {
   /**
    * The size of the Picker.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** Whether the picker should be displayed with a quiet style. */

diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -15,7 +15,7 @@ interface ProgressBarStyleProps {
   /**
    * The size of the ProgressBar.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**

diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -11,7 +11,7 @@ export interface ProgressCircleStyleProps {
   /**
    * The size of the ProgressCircle.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */

diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -23,7 +23,7 @@ interface ContextProps {
   /**
    * The size of the Radio.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**

diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -18,13 +18,13 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   /**
    * The size of the RadioGroup.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * The axis the radio elements should align with.
    *
-   * @default "vertical"
+   * @default 'vertical'
    */
   orientation?: Orientation,
   /**

diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -21,7 +21,7 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
   /**
    * The size of the SearchField.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -15,7 +15,7 @@ interface StatusLightStyleProps {
   /**
    * The size of the StatusLight.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -16,7 +16,7 @@ interface SwitchStyleProps {
   /**
    * The size of the Switch.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -36,7 +36,7 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
   /**
    * The size of the tag group.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L',
   /** Whether the tags are displayed in an emphasized style. */

diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -22,7 +22,7 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   /**
    * The size of the text field.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -2,11 +2,16 @@ 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 {style} from '../style/spectrum-theme' with { type: 'macro' };
 
 const meta: Meta<typeof ActionButton> = {
   component: ActionButton,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774&t=iiwXqxruSpzhT0fe-0'
+    }
   },
   decorators: [StaticColorDecorator],
   tags: ['autodocs']
@@ -18,7 +23,20 @@ type Story = StoryObj<typeof ActionButton>;
 export const Example: Story = {
   render: (args) => {
     return (
-      <div style={{display: 'flex', gap: 8, justifyContent: 'center', resize: 'horizontal', overflow: 'auto'}}>
+      <div style={{display: 'flex', gap: 8, padding: 8, justifyContent: 'center', overflow: 'auto'}}>
+        <ActionButton {...args}><NewIcon /></ActionButton>
+        <ActionButton {...args}>Press me</ActionButton>
+        <ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
+        <ActionButton {...args}><Text>Press me</Text><NewIcon /></ActionButton>
+      </div>
+    );
+  }
+};
+
+export const ResizingExample: Story = {
+  render: (args) => {
+    return (
+      <div className={style({display: 'flex', gap: 8, justifyContent: 'center', resize: 'horizontal', overflow: 'auto'})}>
         <ActionButton {...args}><NewIcon /></ActionButton>
         <ActionButton {...args}>Press me</ActionButton>
         <ActionButton {...args}><NewIcon /><Text>Press me</Text></ActionButton>
@@ -27,9 +45,8 @@ export const Example: Story = {
     );
   },
   parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774&t=iiwXqxruSpzhT0fe-0'
+    docs: {
+      disable: true
     }
   }
 };
@@ -141,5 +158,10 @@ export const Fonts: Story = {
         </div>
       </div>
     );
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
@@ -6,7 +6,8 @@ const meta: Meta<typeof ActionMenu> = {
   component: ActionMenu,
   parameters: {
     layout: 'centered'
-  }
+  },
+  tags: ['autodocs']
 };
 
 export default meta;

diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -1,5 +1,5 @@
 import {CheckboxGroup, Checkbox} from '../src';
-import type {Meta} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof CheckboxGroup> = {
   component: CheckboxGroup,
@@ -11,27 +11,40 @@ const meta: Meta<typeof CheckboxGroup> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <CheckboxGroup {...args}>
-    <Checkbox value="soccer">Soccer</Checkbox>
-    <Checkbox value="baseball">Baseball</Checkbox>
-    <Checkbox value="basketball">Basketball</Checkbox>
-  </CheckboxGroup>
-);
+type Story = StoryObj<typeof CheckboxGroup>;
 
-
-export const CheckboxGroupOverridesIsEmphasized = (args: any) => (
-  <CheckboxGroup {...args}>
-    <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
-    <Checkbox value="baseball">Baseball</Checkbox>
-    <Checkbox value="basketball">Basketball</Checkbox>
-  </CheckboxGroup>
-);
-
-Example.args = {
-  label: 'Favorite sports'
+export const Example: Story = {
+  render(args) {
+    return (
+      <CheckboxGroup {...args}>
+        <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
+        <Checkbox value="baseball">Baseball</Checkbox>
+        <Checkbox value="basketball">Basketball</Checkbox>
+      </CheckboxGroup>
+    );
+  },
+  args: {
+    label: 'Favorite sports'
+  }
 };
 
-CheckboxGroupOverridesIsEmphasized.args = {
-  label: 'Favorite sports'
+export const CheckboxGroupOverridesIsEmphasized: Story = {
+  render(args) {
+    return (
+      <CheckboxGroup {...args}>
+        <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
+        <Checkbox value="baseball">Baseball</Checkbox>
+        <Checkbox value="basketball">Basketball</Checkbox>
+      </CheckboxGroup>
+    );
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  },
+  args: {
+    label: 'Favorite sports'
+  }
 };
+