Update stories to match new component organization

stories/navigation/MenuBarItem.stories.js

@@ -0,0 +1,184 @@
+import MenuBarItem from "../../app/components/navigation/MenuBarItem";
+
+export default {
+  title: "Components/Navigation/MenuBarItem",
+  component: MenuBarItem,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "home"],
+      description: "The visual style variant of the menu item",
+    },
+    size: {
+      control: { type: "select" },
+      options: [
+        "xsmall",
+        "xsmallUseCases",
+        "homeMd",
+        "homeUseCases",
+        "large",
+        "largeUseCases",
+        "homeXlarge",
+        "xlarge",
+      ],
+      description: "The size of the menu item",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the menu item is disabled",
+    },
+    href: {
+      control: { type: "text" },
+      description: "The link destination",
+    },
+    onClick: { action: "clicked" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    children: "Menu Item",
+    size: "large",
+  },
+};
+
+export const Variants = {
+  args: {
+    children: "Menu Item",
+    size: "large",
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <div className="space-x-4">
+        <MenuBarItem {...args} variant="default">
+          Default
+        </MenuBarItem>
+        <MenuBarItem {...args} variant="home">
+          Home
+        </MenuBarItem>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Different visual variants of the menu item component.",
+      },
+    },
+  },
+};
+
+export const Sizes = {
+  args: {
+    children: "Menu Item",
+    variant: "default",
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <div className="space-x-4">
+        <MenuBarItem {...args} size="xsmall">
+          XSmall
+        </MenuBarItem>
+        <MenuBarItem {...args} size="large">
+          Large
+        </MenuBarItem>
+        <MenuBarItem {...args} size="xlarge">
+          XLarge
+        </MenuBarItem>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Different sizes available for the menu item component.",
+      },
+    },
+  },
+};
+
+export const States = {
+  args: {
+    children: "Menu Item",
+    size: "large",
+    variant: "default",
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <div className="space-x-4">
+        <MenuBarItem {...args}>Normal</MenuBarItem>
+        <MenuBarItem {...args} disabled>
+          Disabled
+        </MenuBarItem>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Different states of the menu item component.",
+      },
+    },
+  },
+};
+
+export const AllVariants = {
+  args: {},
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
+        <div className="space-x-4">
+          <MenuBarItem size="xsmall">XSmall</MenuBarItem>
+          <MenuBarItem size="large">Large</MenuBarItem>
+          <MenuBarItem size="xlarge">XLarge</MenuBarItem>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Home Variant</h3>
+        <div className="space-x-4">
+          <MenuBarItem variant="home" size="xsmall">
+            XSmall
+          </MenuBarItem>
+          <MenuBarItem variant="home" size="large">
+            Large
+          </MenuBarItem>
+          <MenuBarItem variant="home" size="xlarge">
+            XLarge
+          </MenuBarItem>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Disabled States</h3>
+        <div className="space-x-4">
+          <MenuBarItem size="large" disabled>
+            Default Disabled
+          </MenuBarItem>
+          <MenuBarItem variant="home" size="large" disabled>
+            Home Disabled
+          </MenuBarItem>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete overview of all menu item variants, sizes, and states.",
+      },
+    },
+  },
+};