sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/dropdown.stories.tsx

@@ -0,0 +1,342 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import { Settings, User, LogOut, Edit, Copy, Trash2 } from 'lucide-react';
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownLabel,
+  type DropdownTriggerState,
+  type DropdownItemState,
+} from './dropdown';
+import { Button } from './button';
+
+type DropdownStoryProps = ComponentProps<typeof Dropdown> & {
+  triggerState?: DropdownTriggerState;
+  itemState?: DropdownItemState;
+};
+
+const meta: Meta<DropdownStoryProps> = {
+  title: 'Components/Navigation/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A dropdown menu component with support for sections, icons, shortcuts, and selection states.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    triggerState: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'open', 'disabled'],
+      description: 'Visual state for DropdownTrigger documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    itemState: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'selected', 'disabled'],
+      description: 'Visual state for DropdownItem documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropdownStoryProps>;
+
+export const Default: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Options</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem>New File</DropdownItem>
+        <DropdownItem>New Folder</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem>Settings</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Actions</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem icon={<Edit className="h-4 w-4" />}>Edit</DropdownItem>
+        <DropdownItem icon={<Copy className="h-4 w-4" />}>Duplicate</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem icon={<Trash2 className="h-4 w-4" />} destructive>
+          Delete
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Edit</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem shortcut="⌘X">Cut</DropdownItem>
+        <DropdownItem shortcut="⌘C">Copy</DropdownItem>
+        <DropdownItem shortcut="⌘V">Paste</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem shortcut="⌘Z">Undo</DropdownItem>
+        <DropdownItem shortcut="⌘⇧Z">Redo</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const WithSections: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Menu</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownLabel>Account</DropdownLabel>
+        <DropdownItem icon={<User className="h-4 w-4" />}>Profile</DropdownItem>
+        <DropdownItem icon={<Settings className="h-4 w-4" />}>Settings</DropdownItem>
+        <DropdownSeparator />
+        <DropdownLabel>Danger Zone</DropdownLabel>
+        <DropdownItem icon={<LogOut className="h-4 w-4" />} destructive>
+          Sign Out
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const WithSelectedItem: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Sort By</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem selected>Name</DropdownItem>
+        <DropdownItem>Date Modified</DropdownItem>
+        <DropdownItem>Date Created</DropdownItem>
+        <DropdownItem>Size</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const WithDisabledItems: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>File</DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem>New</DropdownItem>
+        <DropdownItem>Open</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem disabled>Save (no changes)</DropdownItem>
+        <DropdownItem>Save As...</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const AlignCenter: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger>Centered</DropdownTrigger>
+      <DropdownMenu align="center">
+        <DropdownItem>Option 1</DropdownItem>
+        <DropdownItem>Option 2</DropdownItem>
+        <DropdownItem>Option 3</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const AlignEnd: Story = {
+  render: () => (
+    <div className="flex justify-end w-64">
+      <Dropdown>
+        <DropdownTrigger>Right Aligned</DropdownTrigger>
+        <DropdownMenu align="end">
+          <DropdownItem>Option 1</DropdownItem>
+          <DropdownItem>Option 2</DropdownItem>
+          <DropdownItem>Option 3</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+  ),
+};
+
+export const CustomTrigger: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <Button variant="secondary">Custom Button Trigger</Button>
+      </DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem>Action 1</DropdownItem>
+        <DropdownItem>Action 2</DropdownItem>
+        <DropdownItem>Action 3</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+export const UserMenu: Story = {
+  render: () => (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <button className="flex items-center gap-2 p-2 hover:bg-secondary-hover rounded transition-colors">
+          <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
+            JD
+          </div>
+          <span className="text-sm font-medium text-foreground">John Doe</span>
+        </button>
+      </DropdownTrigger>
+      <DropdownMenu align="end">
+        <div className="px-3 py-2 border-b border-border">
+          <p className="text-sm font-medium text-foreground">John Doe</p>
+          <p className="text-xs text-foreground-muted">john@sonance.com</p>
+        </div>
+        <DropdownItem icon={<User className="h-4 w-4" />}>Profile</DropdownItem>
+        <DropdownItem icon={<Settings className="h-4 w-4" />}>Settings</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem icon={<LogOut className="h-4 w-4" />} destructive>
+          Sign Out
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const triggerStates: DropdownTriggerState[] = ['default', 'hover', 'focus', 'open', 'disabled'];
+    const itemStates: DropdownItemState[] = ['default', 'hover', 'focus', 'selected', 'disabled'];
+    return (
+      <div className="space-y-8">
+        <div>
+          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownTrigger States</h3>
+          <div className="flex flex-wrap gap-4">
+            {triggerStates.map((state) => (
+              <div key={state} className="flex flex-col items-center gap-2">
+                <span className="text-xs font-medium text-foreground-muted uppercase">{state}</span>
+                <Dropdown>
+                  <DropdownTrigger state={state}>{state}</DropdownTrigger>
+                  <DropdownMenu>
+                    <DropdownItem>Option</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div>
+          <h3 className="text-sm font-medium text-foreground-muted mb-4">DropdownItem States (Open menu to see)</h3>
+          <Dropdown>
+            <DropdownTrigger state="open">View Item States</DropdownTrigger>
+            <DropdownMenu>
+              {itemStates.map((state) => (
+                <DropdownItem key={state} state={state}>
+                  {state} item
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] border border-dashed border-border p-4 flex justify-center">
+          <Dropdown>
+            <DropdownTrigger>Actions</DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem icon={<Edit className="h-4 w-4" />}>Edit</DropdownItem>
+              <DropdownItem icon={<Copy className="h-4 w-4" />}>Copy</DropdownItem>
+              <DropdownSeparator />
+              <DropdownItem icon={<Trash2 className="h-4 w-4" />} destructive>Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <div className="w-[768px] border border-dashed border-border p-4 flex justify-between">
+          <Dropdown>
+            <DropdownTrigger>File</DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem shortcut="⌘N">New</DropdownItem>
+              <DropdownItem shortcut="⌘O">Open</DropdownItem>
+              <DropdownSeparator />
+              <DropdownItem shortcut="⌘S">Save</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+          <Dropdown>
+            <DropdownTrigger>Edit</DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem shortcut="⌘X">Cut</DropdownItem>
+              <DropdownItem shortcut="⌘C">Copy</DropdownItem>
+              <DropdownItem shortcut="⌘V">Paste</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <div className="w-[1280px] border border-dashed border-border p-4 flex justify-between items-center">
+          <div className="flex gap-4">
+            <Dropdown>
+              <DropdownTrigger>File</DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>New File</DropdownItem>
+                <DropdownItem>New Folder</DropdownItem>
+                <DropdownSeparator />
+                <DropdownItem>Settings</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger>Edit</DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem shortcut="⌘Z">Undo</DropdownItem>
+                <DropdownItem shortcut="⌘⇧Z">Redo</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+          <Dropdown>
+            <DropdownTrigger asChild>
+              <button className="flex items-center gap-2 p-2 hover:bg-secondary-hover rounded">
+                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">JD</div>
+                <span className="text-sm font-medium">John Doe</span>
+              </button>
+            </DropdownTrigger>
+            <DropdownMenu align="end">
+              <DropdownItem icon={<User className="h-4 w-4" />}>Profile</DropdownItem>
+              <DropdownItem icon={<Settings className="h-4 w-4" />}>Settings</DropdownItem>
+              <DropdownSeparator />
+              <DropdownItem icon={<LogOut className="h-4 w-4" />} destructive>Sign Out</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/dropdown.tsx

@@ -4,6 +4,37 @@ import { useState, useRef, useEffect, createContext, useContext } from "react";
 import { ChevronDown, Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type DropdownTriggerState = "default" | "hover" | "focus" | "open" | "disabled";
+export type DropdownItemState = "default" | "hover" | "focus" | "selected" | "disabled";
+
+// State styles for DropdownTrigger Storybook/Figma visualization
+const getTriggerStateStyles = (state?: DropdownTriggerState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "bg-secondary-hover",
+    focus: "ring-2 ring-border-focus",
+    open: "",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
+// State styles for DropdownItem Storybook/Figma visualization
+const getItemStateStyles = (state?: DropdownItemState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "bg-secondary-hover",
+    focus: "ring-2 ring-border-focus ring-inset",
+    selected: "bg-primary text-primary-foreground",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface DropdownContextValue {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
@@ -60,17 +91,22 @@ interface DropdownTriggerProps {
   children: React.ReactNode;
   className?: string;
   asChild?: boolean;
+  disabled?: boolean;
+  /** Visual state for Storybook/Figma documentation */
+  state?: DropdownTriggerState;
 }
 
-export function DropdownTrigger({ children, className, asChild }: DropdownTriggerProps) {
+export function DropdownTrigger({ children, className, asChild, disabled, state }: DropdownTriggerProps) {
   const context = useContext(DropdownContext);
   if (!context) throw new Error("DropdownTrigger must be used within Dropdown");
 
   const { isOpen, setIsOpen } = context;
+  const isDisabled = disabled || state === "disabled";
+  const isOpenState = state === "open";
 
   if (asChild) {
     return (
-      <span onClick={() => setIsOpen(!isOpen)} className={className}>
+      <span onClick={() => !isDisabled && setIsOpen(!isOpen)} className={className}>
         {children}
       </span>
     );
@@ -79,22 +115,25 @@ export function DropdownTrigger({ children, className, asChild }: DropdownTrigge
   return (
     <button
       type="button"
-      onClick={() => setIsOpen(!isOpen)}
+      onClick={() => !isDisabled && setIsOpen(!isOpen)}
+      disabled={isDisabled}
       className={cn(
         "inline-flex items-center justify-center gap-2 px-4 py-2",
         "text-sm font-medium text-foreground",
         "border border-border bg-background hover:bg-secondary-hover",
         "transition-colors focus:outline-none focus:ring-2 focus:ring-border-focus",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        getTriggerStateStyles(state),
         className
       )}
-      aria-expanded={isOpen}
+      aria-expanded={isOpen || isOpenState}
       aria-haspopup="menu"
     >
       {children}
       <ChevronDown
         className={cn(
           "h-4 w-4 transition-transform duration-200",
-          isOpen && "rotate-180"
+          (isOpen || isOpenState) && "rotate-180"
         )}
       />
     </button>
@@ -146,6 +185,8 @@ interface DropdownItemProps {
   icon?: React.ReactNode;
   shortcut?: string;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: DropdownItemState;
 }
 
 export function DropdownItem({
@@ -157,14 +198,17 @@ export function DropdownItem({
   icon,
   shortcut,
   className,
+  state,
 }: DropdownItemProps) {
   const context = useContext(DropdownContext);
   if (!context) throw new Error("DropdownItem must be used within Dropdown");
 
   const { closeDropdown } = context;
+  const isDisabled = disabled || state === "disabled";
+  const isSelected = selected || state === "selected";
 
   const handleClick = () => {
-    if (!disabled) {
+    if (!isDisabled) {
       onClick?.();
       closeDropdown();
     }
@@ -175,23 +219,24 @@ export function DropdownItem({
       type="button"
       role="menuitem"
       onClick={handleClick}
-      disabled={disabled}
+      disabled={isDisabled}
       className={cn(
         "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
         "transition-colors",
-        disabled
+        isDisabled
           ? "cursor-not-allowed opacity-50"
           : destructive
           ? "text-error hover:bg-error-light"
-          : selected
+          : isSelected
           ? "bg-primary text-primary-foreground"
           : "text-foreground hover:bg-secondary-hover",
+        getItemStateStyles(state),
         className
       )}
     >
       {icon && <span className="w-4 h-4 shrink-0">{icon}</span>}
       <span className="flex-1">{children}</span>
-      {selected && !icon && <Check className="h-4 w-4 ml-auto" />}
+      {isSelected && !icon && <Check className="h-4 w-4 ml-auto" />}
       {shortcut && (
         <span className="ml-auto text-xs text-foreground-muted">{shortcut}</span>
       )}