feat: add Badge and DropdownMenu stories

Author: mdatelle

unraid-ui/src/components/common/badge/Badge.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import type { UiBadgeProps } from "@/types/badge";
+import type { Component } from "vue";
 import { badgeVariants } from "./badge.variants";
 
-const props = withDefaults(defineProps<UiBadgeProps>(), {
+export interface BadgeProps {
+  variant?: "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | 
+    "pink" | "orange" | "black" | "white" | "transparent" | "current" | "gray";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  icon?: Component;
+  iconRight?: Component;
+  iconStyles?: string;
+}
+
+const props = withDefaults(defineProps<BadgeProps>(), {
   variant: "gray",
+  size: "md",
   icon: undefined,
   iconRight: undefined,
   iconStyles: "",
-  size: "md",
 });
 
 const badgeClasses = computed(() => {

unraid-ui/stories/components/common/Badge.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import BadgeComponent from "../../../src/components/common/badge/Badge.vue";
+
+const meta = {
+  title: "Components/Common",
+  component: BadgeComponent,
+} satisfies Meta<typeof BadgeComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Badge: Story = {
+  args: {
+    variant: "gray",
+    size: "md",
+    default: "Badge",
+  },
+  render: (args) => ({
+    components: { BadgeComponent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BadgeComponent :variant="args.variant" :size="args.size">
+        {{ args.default }}
+      </BadgeComponent>
+    `,
+  }),
+}; 

unraid-ui/stories/components/common/Button.stories.ts

@@ -4,27 +4,6 @@ import ButtonComponent from "../../../src/components/common/button/Button.vue";
 const meta = {
   title: "Components/Common",
   component: ButtonComponent,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      description: "Style variant of the button",
-      control: "select",
-      defaultValue: "primary",
-    },
-    size: {
-      description: "Size of the button",
-      control: "select",
-      defaultValue: "md",
-    },
-    class: {
-      description: "Additional CSS classes",
-      control: "text",
-    },
-    default: {
-      description: "Button content (slot)",
-      control: "text",
-    },
-  },
 } satisfies Meta<typeof ButtonComponent>;
 
 export default meta;

unraid-ui/stories/components/common/DropdownMenu.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import DropdownMenu from "../../../src/components/common/dropdown-menu/DropdownMenu.vue";
+import DropdownMenuTrigger from "../../../src/components/common/dropdown-menu/DropdownMenuTrigger.vue";
+import DropdownMenuContent from "../../../src/components/common/dropdown-menu/DropdownMenuContent.vue";
+import DropdownMenuItem from "../../../src/components/common/dropdown-menu/DropdownMenuItem.vue";
+import DropdownMenuLabel from "../../../src/components/common/dropdown-menu/DropdownMenuLabel.vue";
+import DropdownMenuSeparator from "../../../src/components/common/dropdown-menu/DropdownMenuSeparator.vue";
+import Button from "../../../src/components/common/button/Button.vue";
+
+const meta = {
+  title: "Components/Common",
+  component: DropdownMenu,
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dropdown: Story = {
+  render: () => ({
+    components: {
+      DropdownMenu,
+      DropdownMenuTrigger,
+      DropdownMenuContent,
+      DropdownMenuItem,
+      DropdownMenuLabel,
+      DropdownMenuSeparator,
+      Button,
+    },
+    template: `
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="secondary">Open Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Logout</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    `,
+  }),
+};