refactor(storybook): build storybook simple story args interfaces usi…

…ng component class (#9457) **Related Issue:** [#9437](#9437) ## Summary Replaces Storybook's manually built simple story args interfaces with props pulled from the component's class.
Esri · Jun 7, 2024 · 99eac2e · 99eac2e
1 parent 64a6679
commit 99eac2e
Show file tree

Hide file tree

Showing 69 changed files with 485 additions and 618 deletions.
diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts
@@ -1,19 +1,14 @@
+import { AccordionItem } from "../accordion-item/accordion-item";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { iconNames } from "../../../.storybook/helpers";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Accordion } from "./accordion";
 const { scale, appearance, selectionMode } = ATTRIBUTES;
 
-interface AccordionArgs {
-  scale: string;
-  appearance: string;
-  selectionMode: string;
-  heading: string;
-  description: string;
-  iconStart: string;
-  iconEnd: string;
-}
+type AccordionStoryArgs = Pick<Accordion, "scale" | "appearance" | "selectionMode"> &
+  Pick<AccordionItem, "heading" | "description" | "iconStart" | "iconEnd">;
 
 export default {
   title: "Components/Accordion",
@@ -62,7 +57,7 @@ const accordionItemContent = `Custom content here<br/><img src="${placeholderIma
   height: 133,
 })}"><br/>More custom content here`;
 
-export const simple = (args: AccordionArgs): string => html`
+export const simple = (args: AccordionStoryArgs): string => html`
   <calcite-accordion scale="${args.scale}" appearance="${args.appearance}" selection-mode="${args.selectionMode}">
     <calcite-accordion-item
       heading="${args.heading}"

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ActionBar } from "./action-bar";
 const { position } = ATTRIBUTES;
 
-interface ActionBarArgs {
-  expandDisabled: boolean;
-  expanded: boolean;
-  position: string;
-}
+type ActionBarStoryArgs = Pick<ActionBar, "expandDisabled" | "expanded" | "position">;
 
 export default {
   title: "Components/Action Bar",
@@ -24,7 +21,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionBarArgs): string => html`
+export const simple = (args: ActionBarStoryArgs): string => html`
   <calcite-action-bar
     ${boolean("expand-disabled", args.expandDisabled)}
     ${boolean("expanded", args.expanded)}

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ActionPad } from "./action-pad";
 const { position } = ATTRIBUTES;
 
-interface ActionPadArgs {
-  expandDisabled: boolean;
-  expanded: boolean;
-  position: string;
-}
+type ActionPadStoryArgs = Pick<ActionPad, "expandDisabled" | "expanded" | "position">;
 
 export default {
   title: "Components/Action Pad",
@@ -29,7 +26,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionPadArgs): string => html`
+export const simple = (args: ActionPadStoryArgs): string => html`
   <calcite-action-pad
     ${boolean("expand-disabled", args.expandDisabled)}
     ${boolean("expanded", args.expanded)}

diff --git a/packages/calcite-components/src/components/action/action.stories.ts b/packages/calcite-components/src/components/action/action.stories.ts
@@ -2,22 +2,24 @@ import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { iconNames } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Action } from "./action";
 const { alignment, appearance, scale } = ATTRIBUTES;
 
-interface ActionArgs {
-  active: boolean;
-  alignment: string;
-  appearance: string;
-  compact: boolean;
-  disabled: boolean;
-  icon: string;
-  indicator: boolean;
-  label: string;
-  loading: boolean;
-  scale: string;
-  text: string;
-  textEnabled: boolean;
-}
+type ActionStoryArgs = Pick<
+  Action,
+  | "active"
+  | "alignment"
+  | "appearance"
+  | "compact"
+  | "disabled"
+  | "icon"
+  | "indicator"
+  | "label"
+  | "loading"
+  | "scale"
+  | "text"
+  | "textEnabled"
+>;
 
 export default {
   title: "Components/Buttons/Action",
@@ -55,7 +57,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionArgs): string => html`
+export const simple = (args: ActionStoryArgs): string => html`
   <div>
     <calcite-action
       ${boolean("active", args.active)}

diff --git a/packages/calcite-components/src/components/avatar/avatar.stories.ts b/packages/calcite-components/src/components/avatar/avatar.stories.ts
@@ -1,24 +1,18 @@
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Avatar } from "./avatar";
 const { scale } = ATTRIBUTES;
 
-interface AvatarArgs {
-  scale: string;
-  fullName: string;
-  label: string;
-  userName: string;
-  userId: string;
-  thumbnail: string;
-}
+type AvatarStoryArgs = Pick<Avatar, "scale" | "fullName" | "label" | "username" | "userId" | "thumbnail">;
 
 export default {
   title: "Components/Avatar",
   args: {
     scale: scale.defaultValue,
     fullName: "John Doe",
     label: "John Doe",
-    userName: "jdoe",
+    username: "jdoe",
     userId: "9a7c50e6b3ce4b859f7b31e302437164",
     thumbnail: placeholderImage({ width: 120, height: 120 }),
   },
@@ -30,12 +24,12 @@ export default {
   },
 };
 
-export const simple = (args: AvatarArgs): string => html`
+export const simple = (args: AvatarStoryArgs): string => html`
   <calcite-avatar
     scale="${args.scale}"
     full-name="${args.fullName}"
     label="${args.label}"
-    username="${args.userName}"
+    username="${args.username}"
     user-id="${args.userId}"
     thumbnail="${args.thumbnail}"
   >

diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
@@ -1,28 +1,24 @@
+import { BlockSection } from "../block-section/block-section";
 import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Block } from "./block";
 const { toggleDisplay } = ATTRIBUTES;
 
-interface BlockArgs {
-  heading: string;
-  description: string;
-  blockOpen: boolean;
-  collapsible: boolean;
-  loading: boolean;
-  disabled: boolean;
-  headingLevel: number;
+interface BlockStoryArgs
+  extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
+    Pick<BlockSection, "toggleDisplay"> {
   text: string;
-  sectionOpen: boolean;
-  toggleDisplay: string;
+  sectionOpen: BlockSection["open"];
 }
 
 export default {
   title: "Components/Block",
   args: {
     heading: "Heading",
     description: "description",
-    blockOpen: true,
+    open: true,
     collapsible: true,
     loading: false,
     disabled: false,
@@ -42,11 +38,11 @@ export default {
   },
 };
 
-export const simple = (args: BlockArgs): string => html`
+export const simple = (args: BlockStoryArgs): string => html`
   <calcite-block
     heading="${args.heading}"
     description="${args.description}"
-    ${boolean("open", args.blockOpen)}
+    ${boolean("open", args.open)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
     ${boolean("disabled", args.disabled)}

diff --git a/packages/calcite-components/src/components/button/button.stories.ts b/packages/calcite-components/src/components/button/button.stories.ts
@@ -2,17 +2,11 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Button } from "./button";
 const { appearance, kind, scale, width } = ATTRIBUTES;
 
-interface ButtonArgs {
-  appearance: string;
-  kind: string;
-  scale: string;
-  round: boolean;
-  href: string;
-  loading: boolean;
-  disabled: boolean;
-  width: string;
+interface ButtonStoryArgs
+  extends Pick<Button, "appearance" | "kind" | "scale" | "round" | "href" | "loading" | "disabled" | "width"> {
   text: string;
 }
 
@@ -49,7 +43,7 @@ export default {
   },
 };
 
-export const simple = (args: ButtonArgs): string => html`
+export const simple = (args: ButtonStoryArgs): string => html`
   <calcite-button
     appearance="${args.appearance}"
     kind="${args.kind}"

diff --git a/packages/calcite-components/src/components/card-group/card-group.stories.ts b/packages/calcite-components/src/components/card-group/card-group.stories.ts
@@ -2,10 +2,10 @@ import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { CardGroup } from "./card-group";
 const { selectionMode } = ATTRIBUTES;
 
-interface CardGroupArgs {
-  selectionMode: string;
+interface CardGroupStoryArgs extends Pick<CardGroup, "selectionMode"> {
   src: string;
 }
 
@@ -28,7 +28,7 @@ export default {
   },
 };
 
-export const simple = (args: CardGroupArgs): string => html`
+export const simple = (args: CardGroupStoryArgs): string => html`
   <calcite-card-group selection-mode="${args.selectionMode}">
     <calcite-card label="test card">
       <img slot="thumbnail" alt="Sample image alt" src="${args.src}" />

diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
@@ -2,13 +2,10 @@ import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Card } from "./card";
 const { logicalFlowPosition } = ATTRIBUTES;
 
-interface CardArgs {
-  loading: boolean;
-  selected: boolean;
-  thumbnailPosition: string;
-}
+type CardStoryArgs = Pick<Card, "loading" | "selected" | "thumbnailPosition">;
 
 export default {
   title: "Components/Card",
@@ -60,7 +57,7 @@ const footerEndButtonsHtml = html`
   </div>
 `;
 
-export const simple = (args: CardArgs): string => html`
+export const simple = (args: CardStoryArgs): string => html`
   <div style="width: 260px">
     <calcite-card
       ${boolean("loading", args.loading)}
@@ -72,7 +69,7 @@ export const simple = (args: CardArgs): string => html`
   </div>
 `;
 
-export const simpleWithFooterLinks = (args: CardArgs): string => html`
+export const simpleWithFooterLinks = (args: CardStoryArgs): string => html`
   <div style="width:260px">
     <calcite-card
       ${boolean("loading", args.loading)}
@@ -84,7 +81,7 @@ export const simpleWithFooterLinks = (args: CardArgs): string => html`
   </div>
 `;
 
-export const simpleWithFooterButton = (args: CardArgs): string => html`
+export const simpleWithFooterButton = (args: CardStoryArgs): string => html`
   <div style="width:260px">
     <calcite-card
       ${boolean("loading", args.loading)}

diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -2,24 +2,21 @@ import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Carousel } from "./carousel";
 const { arrowType } = ATTRIBUTES;
 
-interface CarouselArgs {
-  controlOverlay: boolean;
-  disabled: boolean;
-  autoPlayDuration: number;
-  autoPlay: boolean;
-  label: string;
-  arrowType: string;
-}
+type CarouselStoryArgs = Pick<
+  Carousel,
+  "controlOverlay" | "disabled" | "autoplayDuration" | "autoplay" | "label" | "arrowType"
+>;
 
 export default {
   title: "Components/Carousel",
   args: {
     controlOverlay: false,
     disabled: false,
-    autoPlayDuration: 6000,
-    autoPlay: false,
+    autoplayDuration: 6000,
+    autoplay: false,
     label: "Example carousel label",
     arrowType: arrowType.defaultValue,
   },
@@ -31,13 +28,13 @@ export default {
   },
 };
 
-export const simple = (args: CarouselArgs): string =>
+export const simple = (args: CarouselStoryArgs): string =>
   html` <div style="width:600px;height:400px;">
     <calcite-carousel
       control-overlay="${args.controlOverlay}"
       ${boolean("disabled", args.disabled)}
-      autoplay-duration="${args.autoPlayDuration}"
-      ${boolean("autoplay", args.autoPlay)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
       label="${args.label}"
       arrow-type="${args.arrowType}"
     >

diff --git a/packages/calcite-components/src/components/checkbox/checkbox.stories.ts b/packages/calcite-components/src/components/checkbox/checkbox.stories.ts
@@ -1,16 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Checkbox } from "./checkbox";
 const { scale, status } = ATTRIBUTES;
 
-interface CheckboxArgs {
-  checked: boolean;
-  disabled: boolean;
-  indeterminate: boolean;
-  scale: string;
-  status: string;
-  label: string;
-}
+type CheckboxStoryArgs = Pick<Checkbox, "checked" | "disabled" | "indeterminate" | "scale" | "status" | "label">;
 
 export default {
   title: "Components/Controls/Checkbox",
@@ -34,7 +28,7 @@ export default {
   },
 };
 
-export const simple = (args: CheckboxArgs): string => html`
+export const simple = (args: CheckboxStoryArgs): string => html`
   <calcite-label layout="inline">
     <calcite-checkbox
       ${boolean("checked", args.checked)}