docs: migrate stories to use LiveEdit, add TS inner types to those st…

…ories (#2080)
mondaycom · May 2, 2024 · f92fbc1 · f92fbc1
1 parent 8513ba9
commit f92fbc1
Show file tree

Hide file tree

Showing 34 changed files with 536 additions and 272 deletions.
diff --git a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
@@ -1,6 +1,9 @@
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import BaseInput from "../BaseInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof BaseInput>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: BaseInput
@@ -12,10 +15,10 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   tags: ["internal"]
-};
+} satisfies Meta<typeof BaseInput>;
 
 const baseInputTemplate = createComponentTemplate(BaseInput);
 
-export const Overview = {
+export const Overview: Story = {
   render: baseInputTemplate.bind({})
 };
diff --git a/packages/core/src/components/Button/__stories__/button.mdx b/packages/core/src/components/Button/__stories__/button.mdx
@@ -1,5 +1,5 @@
 import Button from "../Button";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BUTTON_GROUP,
   BADGE,

diff --git a/packages/core/src/components/Button/__stories__/button.stories.tsx b/packages/core/src/components/Button/__stories__/button.stories.tsx
@@ -4,6 +4,9 @@ import { Add, Calendar, Check, Remove } from "../../Icon/Icons";
 import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/createStoryMetaSettingsDecorator";
 import Button from "../Button";
 import "./button.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Button>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Button,
@@ -17,43 +20,46 @@ export default {
   component: Button,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Button>;
 
 const buttonTemplate = createComponentTemplate(Button);
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonTemplate.bind({}),
-  name: "Overview",
   args: {
     children: "Button"
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const ButtonKinds = {
+export const ButtonKinds: Story = {
   render: () => (
     <>
       <Button>Primary</Button>
       <Button kind={Button.kinds.SECONDARY}>Secondary</Button>
       <Button kind={Button.kinds.TERTIARY}>Tertiary</Button>
     </>
   ),
-
   name: "Button kinds"
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <>
       <Button size={Button.sizes.LARGE}>Large</Button>
       <Button size={Button.sizes.MEDIUM}>Medium</Button>
       <Button size={Button.sizes.SMALL}>Small</Button>
     </>
-  ),
-
-  name: "Sizes"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <>
       <Button disabled>Primary</Button>
@@ -64,45 +70,45 @@ export const Disabled = {
         Tertiary
       </Button>
     </>
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <>
       <Button>Regular</Button>
       <Button active>Active</Button>
     </>
-  ),
-
-  name: "States"
+  )
 };
 
-export const PositiveAndNegative = {
+export const PositiveAndNegative: Story = {
   render: () => (
     <>
       <Button color={Button.colors.POSITIVE}>Positive</Button>
       <Button color={Button.colors.NEGATIVE}>Negative</Button>
     </>
   ),
-
   name: "Positive and Negative"
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => (
     <>
       <Button rightIcon={Calendar}>Right icon</Button>
       <Button leftIcon={Calendar}>Left icon</Button>
     </>
   ),
-
-  name: "Icons"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Calendar }
+      }
+    }
+  }
 };
 
-export const LoadingState = {
+export const LoadingState: Story = {
   render: () => {
     const [loading, setLoading] = useState(false);
     const onClick = useCallback(() => {
@@ -114,11 +120,10 @@ export const LoadingState = {
       </Button>
     );
   },
-
   name: "Loading state"
 };
 
-export const SuccessState = {
+export const SuccessState: Story = {
   render: () => {
     const [success, setSuccess] = useState(false);
     const onClick = useCallback(() => {
@@ -130,11 +135,17 @@ export const SuccessState = {
       </Button>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Check }
+      }
+    }
+  },
   name: "Success state"
 };
 
-export const OnColorStates = {
+export const OnColorStates: Story = {
   render: () => (
     <>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -166,11 +177,10 @@ export const OnColorStates = {
       </div>
     </>
   ),
-
   name: "On color states"
 };
 
-export const AdjacentButtons = {
+export const AdjacentButtons: Story = {
   render: () => (
     <div>
       <Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} ariaLabel="decrease zoom level" rightFlat>
@@ -181,6 +191,12 @@ export const AdjacentButtons = {
       </Button>
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Remove, Add }
+      }
+    }
+  },
   name: "Adjacent buttons"
 };
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import ButtonGroup from "../ButtonGroup";
 import { Mobile } from "../../Icon/Icons";
 import { BREADCRUBMS, BUTTON, TABS } from "../../../storybook/components/related-components/component-description-map";

diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -2,6 +2,9 @@ import ButtonGroup from "../ButtonGroup";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import "./buttonGroup.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof ButtonGroup>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ButtonGroup,
@@ -16,11 +19,10 @@ export default {
   component: ButtonGroup,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof ButtonGroup>;
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonGroupTemplate.bind({}),
-  name: "Overview",
 
   args: {
     options: [
@@ -43,10 +45,17 @@ export const Overview = {
     ],
 
     value: 1
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -70,12 +79,10 @@ export const Default = {
         }
       ]}
     />
-  ),
-
-  name: "Default"
+  )
 };
 
-export const Tertiary = {
+export const Tertiary: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -100,12 +107,10 @@ export const Tertiary = {
         }
       ]}
     />
-  ),
-
-  name: "Tertiary"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <ButtonGroup
       disabled
@@ -129,12 +134,10 @@ export const Disabled = {
         }
       ]}
     />
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const DisabledSingeButton = {
+export const DisabledSingeButton: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -160,11 +163,10 @@ export const DisabledSingeButton = {
       ]}
     />
   ),
-
   name: "Disabled - Singe Button"
 };
 
-export const Size = {
+export const Size: Story = {
   render: () => (
     <>
       <div className="monday-storybook-button-group_column">
@@ -196,12 +198,10 @@ export const Size = {
         />
       </div>
     </>
-  ),
-
-  name: "Size"
+  )
 };
 
-export const ButtonGroupInSettings = {
+export const ButtonGroupInSettings: Story = {
   render: () => (
     <div className="monday-storybook-button-group_column">
       Function
@@ -230,11 +230,10 @@ export const ButtonGroupInSettings = {
       />
     </div>
   ),
-
   name: "Button group in settings"
 };
 
-export const ButtonGroupAsToggle = {
+export const ButtonGroupAsToggle: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -251,6 +250,5 @@ export const ButtonGroupAsToggle = {
       ]}
     />
   ),
-
   name: "Button group as toggle"
 };
diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.mdx b/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Checkbox from "../Checkbox";
 import { createComponentTemplate, Link } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";