@rovula/ui 0.1.20 → 0.1.22

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

@@ -1,586 +0,0 @@
-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>
-    );
-  },
-};