[WEB-5083] chore: add stories to propel #7888

packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx

@@ -9,16 +9,6 @@ const meta: Meta<typeof Breadcrumbs> = {
   title: "UI/Breadcrumbs",
   component: Breadcrumbs,
   tags: ["autodocs"],
-  argTypes: {
-    isLoading: {
-      control: "boolean",
-      description: "Shows loading state of breadcrumbs",
-    },
-    onBack: {
-      action: "onBack",
-      description: "Callback function when back button is clicked",
-    },
-  },
 };
 
 type TBreadcrumbBlockProps = {

packages/ui/src/popovers/popover-menu.stories.tsx

@@ -1,44 +1,38 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { PopoverMenu } from "./popover-menu";
 
-const meta: Meta<typeof PopoverMenu> = {
-  title: "PopoverMenu",
-  component: PopoverMenu,
-};
-
-export default meta;
-
-// types
 type TPopoverMenu = {
   id: number;
   name: string;
 };
 
-type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
-
-// data
-const data: TPopoverMenu[] = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Doe" },
-  { id: 3, name: "John Smith" },
-  { id: 4, name: "Jane Smith" },
-];
-
-// components
-const PopoverMenuItemRender = (item: TPopoverMenu) => (
-  <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
-    {item.name}
-  </div>
-);
-
-// stories
-export const Default: Story = {
+const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
+  title: "Components/PopoverMenu",
+  component: PopoverMenu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
   args: {
     popperPosition: "bottom-start",
     panelClassName: "rounded bg-gray-100 p-2",
-    data: data,
+    data: [
+      { id: 1, name: "John Doe" },
+      { id: 2, name: "Jane Doe" },
+      { id: 3, name: "John Smith" },
+      { id: 4, name: "Jane Smith" },
+    ],
     keyExtractor: (item, index: number) => `${item.id}-${index}`,
-    render: (item) => PopoverMenuItemRender(item),
+    render: (item: TPopoverMenu) => (
+      <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
+        {item.name}
+      </div>
+    ),
   },
 };
+
+export default meta;
+type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
+
+export const Default: Story = {};

packages/ui/src/sortable/sortable.stories.tsx

@@ -2,26 +2,19 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Sortable } from "./sortable";
 
-const meta: Meta<typeof Sortable> = {
+type StoryItem = { id: string; name: string };
+
+const meta: Meta<typeof Sortable<StoryItem>> = {
   title: "Sortable",
   component: Sortable,
-};
-
-export default meta;
-
-type StoryItem = { id: string; name: string };
-type Story = StoryObj<typeof Sortable<StoryItem>>;
-
-const data = [
-  { id: "1", name: "John Doe" },
-  { id: "2", name: "Satish" },
-  { id: "3", name: "Alice" },
-  { id: "4", name: "Bob" },
-  { id: "5", name: "Charlie" },
-];
-export const Default: Story = {
   args: {
-    data,
+    data: [
+      { id: "1", name: "John Doe" },
+      { id: "2", name: "Satish" },
+      { id: "3", name: "Alice" },
+      { id: "4", name: "Bob" },
+      { id: "5", name: "Charlie" },
+    ],
     render: (item: StoryItem) => (
       // <Draggable data={item} className="rounded-lg">
       <div className="border ">{item.name}</div>
@@ -31,3 +24,9 @@ export const Default: Story = {
     keyExtractor: (item) => item.id,
   },
 };
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};