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

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,

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,31 +20,35 @@ 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>
@@ -53,7 +60,7 @@ export const Sizes = {
   name: "Sizes"
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <>
       <Button disabled>Primary</Button>
@@ -64,45 +71,44 @@ 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(() => {
@@ -113,12 +119,10 @@ export const LoadingState = {
         Click here for loading
       </Button>
     );
-  },
-
-  name: "Loading state"
+  }
 };
 
-export const SuccessState = {
+export const SuccessState: Story = {
   render: () => {
     const [success, setSuccess] = useState(false);
     const onClick = useCallback(() => {
@@ -130,11 +134,16 @@ export const SuccessState = {
       </Button>
     );
   },
-
-  name: "Success state"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Check }
+      }
+    }
+  }
 };
 
-export const OnColorStates = {
+export const OnColorStates: Story = {
   render: () => (
     <>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -165,12 +174,10 @@ export const OnColorStates = {
         </div>
       </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 +188,11 @@ export const AdjacentButtons = {
       </Button>
     </div>
   ),
-
-  name: "Adjacent buttons"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Remove, Add }
+      }
+    }
+  }
 };

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";

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"
@@ -159,12 +162,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 +197,10 @@ export const Size = {
         />
       </div>
     </>
-  ),
-
-  name: "Size"
+  )
 };
 
-export const ButtonGroupInSettings = {
+export const ButtonGroupInSettings: Story = {
   render: () => (
     <div className="monday-storybook-button-group_column">
       Function
@@ -229,12 +228,10 @@ export const ButtonGroupInSettings = {
         ]}
       />
     </div>
-  ),
-
-  name: "Button group in settings"
+  )
 };
 
-export const ButtonGroupAsToggle = {
+export const ButtonGroupAsToggle: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -250,7 +247,5 @@ export const ButtonGroupAsToggle = {
         }
       ]}
     />
-  ),
-
-  name: "Button group as toggle"
+  )
 };

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";