@rovula/ui 0.0.78 → 0.0.80

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,586 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menu, MenuItemType } from "./Menu";
+import { optionsToMenuItems } from "./helpers";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+import TextInput from "../TextInput/TextInput";
+import { ChevronDownIcon } from "@heroicons/react/16/solid";
+
+const meta = {
+  title: "Components/Menu",
+  component: Menu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-20 flex justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+// ==================== Basic Menu ====================
+
+export const Basic: StoryObj<typeof Menu> = {
+  render: () => {
+    const items: MenuItemType[] = [
+      { type: "item", item: { value: "1", label: "Option 1" } },
+      { type: "item", item: { value: "2", label: "Option 2" } },
+      { type: "item", item: { value: "3", label: "Option 3" } },
+      { type: "separator" },
+      { type: "item", item: { value: "4", label: "Option 4", disabled: true } },
+      { type: "item", item: { value: "5", label: "Delete", danger: true } },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        onSelect={(value) => console.log("Selected:", value)}
+      />
+    );
+  },
+};
+
+// ==================== With Icons ====================
+
+export const WithIcons: StoryObj<typeof Menu> = {
+  render: () => {
+    const items: MenuItemType[] = [
+      {
+        type: "item",
+        item: {
+          value: "profile",
+          label: "Profile",
+          icon: <Icon type="heroicons" name="user" className="size-4" />,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "settings",
+          label: "Settings",
+          icon: <Icon type="heroicons" name="cog-6-tooth" className="size-4" />,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "help",
+          label: "Help",
+          icon: (
+            <Icon
+              type="heroicons"
+              name="question-mark-circle"
+              className="size-4"
+            />
+          ),
+        },
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "logout",
+          label: "Logout",
+          icon: (
+            <Icon
+              type="heroicons"
+              name="arrow-right-on-rectangle"
+              className="size-4"
+            />
+          ),
+          danger: true,
+        },
+      },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        onSelect={(value) => console.log("Selected:", value)}
+      />
+    );
+  },
+};
+
+// ==================== With Checkbox ====================
+
+export const WithCheckbox: StoryObj<typeof Menu> = {
+  render: () => {
+    const [checked, setChecked] = useState({
+      notifications: true,
+      emails: false,
+      updates: true,
+    });
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "Preferences" },
+      {
+        type: "item",
+        item: {
+          value: "notifications",
+          label: "Notifications",
+          type: "checkbox",
+          checked: checked.notifications,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "emails",
+          label: "Email Alerts",
+          type: "checkbox",
+          checked: checked.emails,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "updates",
+          label: "Product Updates",
+          type: "checkbox",
+          checked: checked.updates,
+        },
+      },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        onSelect={(value) => {
+          setChecked((prev) => ({
+            ...prev,
+            [value]: !prev[value as keyof typeof prev],
+          }));
+        }}
+      />
+    );
+  },
+};
+
+// ==================== With Radio ====================
+
+export const WithRadio: StoryObj<typeof Menu> = {
+  render: () => {
+    const [selected, setSelected] = useState("light");
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "Theme" },
+      {
+        type: "item",
+        item: {
+          value: "light",
+          label: "Light",
+          type: "radio",
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "dark",
+          label: "Dark",
+          type: "radio",
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "system",
+          label: "System",
+          type: "radio",
+        },
+      },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        selectedValues={[selected]}
+        onSelect={(value) => setSelected(value)}
+      />
+    );
+  },
+};
+
+// ==================== Complex Menu ====================
+
+export const ComplexMenu: StoryObj<typeof Menu> = {
+  render: () => {
+    const [preferences, setPreferences] = useState({
+      notifications: true,
+      emails: false,
+    });
+    const [theme, setTheme] = useState("light");
+
+    const items: MenuItemType[] = [
+      { type: "label", label: "My Account" },
+      {
+        type: "item",
+        item: {
+          value: "profile",
+          label: "Profile",
+          icon: <Icon type="heroicons" name="user" className="size-4" />,
+          onClick: () => console.log("Go to profile"),
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "billing",
+          label: "Billing",
+          icon: <Icon type="heroicons" name="credit-card" className="size-4" />,
+          onClick: () => console.log("Go to billing"),
+        },
+      },
+      { type: "separator" },
+      { type: "label", label: "Preferences" },
+      {
+        type: "item",
+        item: {
+          value: "notifications",
+          label: "Push Notifications",
+          type: "checkbox",
+          checked: preferences.notifications,
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "emails",
+          label: "Email Notifications",
+          type: "checkbox",
+          checked: preferences.emails,
+        },
+      },
+      { type: "separator" },
+      { type: "label", label: "Theme" },
+      {
+        type: "item",
+        item: {
+          value: "light",
+          label: "Light Mode",
+          type: "radio",
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "dark",
+          label: "Dark Mode",
+          type: "radio",
+        },
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "logout",
+          label: "Logout",
+          icon: (
+            <Icon
+              type="heroicons"
+              name="arrow-right-on-rectangle"
+              className="size-4"
+            />
+          ),
+          danger: true,
+          onClick: () => console.log("Logout"),
+        },
+      },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        selectedValues={[theme]}
+        onSelect={(value, item) => {
+          // Handle different types
+          if (item.type === "checkbox") {
+            // Toggle checkbox
+            const key = value as keyof typeof preferences;
+            if (key in preferences) {
+              setPreferences({ ...preferences, [key]: !preferences[key] });
+            }
+          } else if (item.type === "radio") {
+            // Radio select
+            setTheme(value);
+          } else {
+            // Regular item
+            console.log("Item clicked:", value);
+          }
+        }}
+      />
+    );
+  },
+};
+
+// ==================== With Dropdown Trigger ====================
+
+export const WithDropdownTrigger: StoryObj<typeof Menu> = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const items: MenuItemType[] = [
+      {
+        type: "item",
+        item: {
+          value: "edit",
+          label: "Edit",
+          icon: <Icon type="heroicons" name="pencil" className="size-4" />,
+          onClick: () => {
+            console.log("Edit");
+            setIsOpen(false);
+          },
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "duplicate",
+          label: "Duplicate",
+          icon: (
+            <Icon
+              type="heroicons"
+              name="document-duplicate"
+              className="size-4"
+            />
+          ),
+          onClick: () => {
+            console.log("Duplicate");
+            setIsOpen(false);
+          },
+        },
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "archive",
+          label: "Archive",
+          icon: <Icon type="heroicons" name="archive-box" className="size-4" />,
+          onClick: () => {
+            console.log("Archive");
+            setIsOpen(false);
+          },
+        },
+      },
+      {
+        type: "item",
+        item: {
+          value: "delete",
+          label: "Delete",
+          icon: <Icon type="heroicons" name="trash" className="size-4" />,
+          danger: true,
+          onClick: () => {
+            console.log("Delete");
+            setIsOpen(false);
+          },
+        },
+      },
+    ];
+
+    return (
+      <div className="relative">
+        <Button onClick={() => setIsOpen(!isOpen)}>Actions</Button>
+        {isOpen && (
+          <>
+            <div
+              className="fixed inset-0 z-40"
+              onClick={() => setIsOpen(false)}
+            />
+            <div className="absolute top-full mt-2 z-50">
+              <Menu items={items} />
+            </div>
+          </>
+        )}
+      </div>
+    );
+  },
+};
+
+// ==================== Custom Items ====================
+
+export const CustomItems: StoryObj<typeof Menu> = {
+  render: () => {
+    const items: MenuItemType[] = [
+      { type: "label", label: "Recent Projects" },
+      {
+        type: "custom",
+        render: () => (
+          <div className="px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer">
+            <div className="font-semibold">Project Alpha</div>
+            <div className="text-xs text-gray-500">Updated 2 hours ago</div>
+          </div>
+        ),
+      },
+      {
+        type: "custom",
+        render: () => (
+          <div className="px-4 py-3 hover:bg-[var(--dropdown-menu-hover-bg)] cursor-pointer">
+            <div className="font-semibold">Project Beta</div>
+            <div className="text-xs text-gray-500">Updated yesterday</div>
+          </div>
+        ),
+      },
+      { type: "separator" },
+      {
+        type: "item",
+        item: {
+          value: "view-all",
+          label: "View All Projects",
+          icon: <Icon type="heroicons" name="folder-open" className="size-4" />,
+        },
+      },
+    ];
+
+    return (
+      <Menu
+        items={items}
+        onSelect={(value) => console.log("Selected:", value)}
+      />
+    );
+  },
+};
+
+// ==================== Dropdown Pattern (Select with Search) ====================
+
+export const DropdownPattern: StoryObj<typeof Menu> = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<string>("");
+    const [searchText, setSearchText] = useState("");
+
+    // Simulate options like Dropdown component
+    const allOptions = [
+      { value: "apple", label: "Apple" },
+      { value: "banana", label: "Banana" },
+      { value: "cherry", label: "Cherry" },
+      { value: "date", label: "Date" },
+      { value: "elderberry", label: "Elderberry" },
+      { value: "fig", label: "Fig" },
+      { value: "grape", label: "Grape" },
+    ];
+
+    // Filter options based on search
+    const filteredOptions = allOptions.filter((opt) =>
+      opt.label.toLowerCase().includes(searchText.toLowerCase())
+    );
+
+    // Convert to MenuItemType
+    const menuItems = optionsToMenuItems(filteredOptions);
+
+    // Add "not found" message if no results
+    if (filteredOptions.length === 0) {
+      menuItems.push({
+        type: "custom",
+        render: () => (
+          <div className="px-4 py-14 text-center text-input-text">
+            Not found
+          </div>
+        ),
+      });
+    }
+
+    const selectedLabel =
+      allOptions.find((opt) => opt.value === selectedValue)?.label || "";
+
+    return (
+      <div className="relative w-80">
+        <TextInput
+          value={searchText || selectedLabel}
+          onChange={(e) => setSearchText(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+          placeholder="Select a fruit..."
+          endIcon={<ChevronDownIcon className="size-5 text-gray-400" />}
+        />
+        {isOpen && (
+          <div className="absolute top-full mt-1 w-full z-50">
+            <Menu
+              items={menuItems}
+              selectedValues={[selectedValue]}
+              onSelect={(value) => {
+                setSelectedValue(value);
+                setSearchText("");
+                setIsOpen(false);
+              }}
+              className="max-h-60 overflow-y-auto"
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// ==================== Multi-Select Pattern ====================
+
+export const MultiSelectPattern: StoryObj<typeof Menu> = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+    const options = [
+      { value: "react", label: "React" },
+      { value: "vue", label: "Vue" },
+      { value: "angular", label: "Angular" },
+      { value: "svelte", label: "Svelte" },
+      { value: "solid", label: "Solid" },
+    ];
+
+    const items: MenuItemType[] = options.map((opt) => ({
+      type: "item",
+      item: {
+        value: opt.value,
+        label: opt.label,
+        type: "checkbox",
+        checked: selectedValues.includes(opt.value),
+      },
+    }));
+
+    const displayText =
+      selectedValues.length > 0
+        ? `${selectedValues.length} selected`
+        : "Select frameworks...";
+
+    return (
+      <div className="relative w-80">
+        <Button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full justify-between"
+        >
+          {displayText}
+          <ChevronDownIcon className="size-5 ml-2" />
+        </Button>
+        {isOpen && (
+          <>
+            <div
+              className="fixed inset-0 z-40"
+              onClick={() => setIsOpen(false)}
+            />
+            <div className="absolute top-full mt-2 w-full z-50">
+              <Menu
+                items={items}
+                onSelect={(value) => {
+                  if (selectedValues.includes(value)) {
+                    setSelectedValues(
+                      selectedValues.filter((v) => v !== value)
+                    );
+                  } else {
+                    setSelectedValues([...selectedValues, value]);
+                  }
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    );
+  },
+};