sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import { useState } from 'react';
+import { Pagination, CompactPagination, type PaginationButtonState } from './pagination';
+
+type PaginationStoryProps = ComponentProps<typeof Pagination> & {
+  state?: PaginationButtonState;
+};
+
+const meta: Meta<PaginationStoryProps> = {
+  title: 'Components/Navigation/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Navigation component for paginated content with multiple display options.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'active', 'disabled'],
+      description: 'Visual state for PaginationButton documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PaginationStoryProps>;
+
+export const Default: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const ManyPages: Story = {
+  render: () => {
+    const [page, setPage] = useState(15);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={50}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const FewPages: Story = {
+  render: () => {
+    const [page, setPage] = useState(2);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={5}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const FirstPage: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const LastPage: Story = {
+  render: () => {
+    const [page, setPage] = useState(10);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const MoreSiblings: Story = {
+  render: () => {
+    const [page, setPage] = useState(10);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={20}
+        onPageChange={setPage}
+        siblingCount={2}
+      />
+    );
+  },
+};
+
+export const Compact: Story = {
+  render: () => {
+    const [page, setPage] = useState(5);
+    return (
+      <CompactPagination
+        currentPage={page}
+        totalPages={20}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const BothStyles: Story = {
+  render: () => {
+    const [page, setPage] = useState(5);
+    return (
+      <div className="space-y-8">
+        <div>
+          <p className="text-xs text-foreground-muted mb-2">Full Pagination</p>
+          <Pagination
+            currentPage={page}
+            totalPages={20}
+            onPageChange={setPage}
+          />
+        </div>
+        <div>
+          <p className="text-xs text-foreground-muted mb-2">Compact Pagination</p>
+          <CompactPagination
+            currentPage={page}
+            totalPages={20}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const TableExample: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const itemsPerPage = 5;
+    const items = Array.from({ length: 23 }, (_, i) => ({
+      id: i + 1,
+      name: `Product ${i + 1}`,
+      price: `$${((i + 1) * 99).toFixed(2)}`,
+    }));
+    const totalPages = Math.ceil(items.length / itemsPerPage);
+    const displayedItems = items.slice((page - 1) * itemsPerPage, page * itemsPerPage);
+
+    return (
+      <div className="space-y-4">
+        <div className="border border-border">
+          <table className="w-full text-sm">
+            <thead className="bg-background-secondary">
+              <tr>
+                <th className="px-4 py-2 text-left">ID</th>
+                <th className="px-4 py-2 text-left">Name</th>
+                <th className="px-4 py-2 text-right">Price</th>
+              </tr>
+            </thead>
+            <tbody>
+              {displayedItems.map((item) => (
+                <tr key={item.id} className="border-t border-border">
+                  <td className="px-4 py-2">{item.id}</td>
+                  <td className="px-4 py-2">{item.name}</td>
+                  <td className="px-4 py-2 text-right">{item.price}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-foreground-muted">
+            Showing {(page - 1) * itemsPerPage + 1} to{' '}
+            {Math.min(page * itemsPerPage, items.length)} of {items.length} results
+          </p>
+          <Pagination
+            currentPage={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// State Matrix - Visual documentation of all PaginationButton states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: PaginationButtonState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
+    return (
+      <div className="space-y-6">
+        <h3 className="text-sm font-medium text-foreground-muted">PaginationButton States</h3>
+        <p className="text-xs text-foreground-muted">States are demonstrated via the Pagination component&apos;s active and disabled props.</p>
+        <div className="space-y-4">
+          <div>
+            <span className="text-xs font-medium text-foreground-muted uppercase">Default + Active</span>
+            <Pagination currentPage={3} totalPages={5} onPageChange={() => {}} />
+          </div>
+          <div>
+            <span className="text-xs font-medium text-foreground-muted uppercase">First Page (prev disabled)</span>
+            <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />
+          </div>
+          <div>
+            <span className="text-xs font-medium text-foreground-muted uppercase">Last Page (next disabled)</span>
+            <Pagination currentPage={5} totalPages={5} onPageChange={() => {}} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => {
+    const [mobilePage, setMobilePage] = useState(3);
+    const [tabletPage, setTabletPage] = useState(5);
+    const [desktopPage, setDesktopPage] = useState(10);
+
+    return (
+      <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">
+            <CompactPagination
+              currentPage={mobilePage}
+              totalPages={20}
+              onPageChange={setMobilePage}
+            />
+          </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-center">
+            <Pagination
+              currentPage={tabletPage}
+              totalPages={15}
+              onPageChange={setTabletPage}
+            />
+          </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 items-center justify-between">
+            <p className="text-sm text-foreground-muted">
+              Showing 91-100 of 500 results
+            </p>
+            <Pagination
+              currentPage={desktopPage}
+              totalPages={50}
+              onPageChange={setDesktopPage}
+              siblingCount={2}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/dist/assets/components/pagination.tsx

@@ -4,6 +4,22 @@ import { forwardRef } from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type PaginationButtonState = "default" | "hover" | "focus" | "active" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getButtonStateStyles = (state?: PaginationButtonState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "bg-secondary-hover",
+    focus: "ring-2 ring-border-focus ring-offset-2",
+    active: "bg-primary text-primary-foreground border-primary",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface PaginationProps {
   currentPage: number;
   totalPages: number;
@@ -121,30 +137,38 @@ export function Pagination({
 
 interface PaginationButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
+  /** Visual state for Storybook/Figma documentation */
+  state?: PaginationButtonState;
 }
 
 const PaginationButton = forwardRef<HTMLButtonElement, PaginationButtonProps>(
-  ({ className, active, disabled, children, ...props }, ref) => (
-    <button
-      ref={ref}
-      type="button"
-      disabled={disabled}
-      className={cn(
-        "flex h-9 min-w-9 items-center justify-center px-3 text-sm font-medium",
-        "border transition-colors",
-        "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2",
-        active
-          ? "bg-primary text-primary-foreground border-primary"
-          : disabled
-          ? "bg-transparent text-foreground-subtle border-transparent cursor-not-allowed"
-          : "bg-transparent text-foreground border-border hover:bg-secondary-hover",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  )
+  ({ className, active, disabled, state, children, ...props }, ref) => {
+    const isActive = active || state === "active";
+    const isDisabled = disabled || state === "disabled";
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={isDisabled}
+        className={cn(
+          "flex h-9 min-w-9 items-center justify-center px-3 text-sm font-medium",
+          "border transition-colors",
+          "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2",
+          isActive
+            ? "bg-primary text-primary-foreground border-primary"
+            : isDisabled
+            ? "bg-transparent text-foreground-subtle border-transparent cursor-not-allowed"
+            : "bg-transparent text-foreground border-border hover:bg-secondary-hover",
+          getButtonStateStyles(state),
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
 );
 
 PaginationButton.displayName = "PaginationButton";

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

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Popover, PopoverContent } from './popover';
+import { Button } from './button';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Overlays/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A floating panel that appears next to a trigger element.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    triggerOn: {
+      control: 'select',
+      options: ['click', 'hover'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Click me</Button>}>
+      <PopoverContent>
+        <p className="text-foreground-secondary">
+          This is the popover content. Click outside to close.
+        </p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const OnHover: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Hover me</Button>} triggerOn="hover">
+      <PopoverContent>
+        <p className="text-foreground-secondary">
+          This popover appears on hover.
+        </p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const TopPosition: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Open Top</Button>} position="top">
+      <PopoverContent>
+        <p className="text-foreground-secondary">Popover on top</p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const LeftPosition: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Open Left</Button>} position="left">
+      <PopoverContent>
+        <p className="text-foreground-secondary">Popover on left</p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const RightPosition: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Open Right</Button>} position="right">
+      <PopoverContent>
+        <p className="text-foreground-secondary">Popover on right</p>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const AllPositions: Story = {
+  render: () => (
+    <div className="flex items-center gap-8 p-16">
+      <Popover trigger={<Button variant="secondary" size="sm">Top</Button>} position="top">
+        <PopoverContent>
+          <p className="text-sm">Top position</p>
+        </PopoverContent>
+      </Popover>
+      <Popover trigger={<Button variant="secondary" size="sm">Bottom</Button>} position="bottom">
+        <PopoverContent>
+          <p className="text-sm">Bottom position</p>
+        </PopoverContent>
+      </Popover>
+      <Popover trigger={<Button variant="secondary" size="sm">Left</Button>} position="left">
+        <PopoverContent>
+          <p className="text-sm">Left position</p>
+        </PopoverContent>
+      </Popover>
+      <Popover trigger={<Button variant="secondary" size="sm">Right</Button>} position="right">
+        <PopoverContent>
+          <p className="text-sm">Right position</p>
+        </PopoverContent>
+      </Popover>
+    </div>
+  ),
+};
+
+export const MenuExample: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="secondary">Actions</Button>}>
+      <div className="py-2">
+        {['Edit', 'Duplicate', 'Archive', 'Delete'].map((action) => (
+          <button
+            key={action}
+            className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-secondary-hover transition-colors"
+          >
+            {action}
+          </button>
+        ))}
+      </div>
+    </Popover>
+  ),
+};
+
+export const UserMenuExample: Story = {
+  render: () => (
+    <Popover
+      trigger={
+        <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" />
+          <span className="text-sm text-foreground">John Doe</span>
+        </button>
+      }
+    >
+      <div className="w-48">
+        <div className="px-4 py-3 border-b border-border">
+          <p className="text-sm font-medium text-foreground">John Doe</p>
+          <p className="text-xs text-foreground-muted">john@example.com</p>
+        </div>
+        <div className="py-2">
+          {['Profile', 'Settings', 'Billing'].map((item) => (
+            <button
+              key={item}
+              className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-secondary-hover transition-colors"
+            >
+              {item}
+            </button>
+          ))}
+        </div>
+        <div className="py-2 border-t border-border">
+          <button className="w-full px-4 py-2 text-left text-sm text-error hover:bg-error-light transition-colors">
+            Sign out
+          </button>
+        </div>
+      </div>
+    </Popover>
+  ),
+};
+
+// 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">
+          <Popover trigger={<Button variant="secondary" size="sm">Actions</Button>}>
+            <PopoverContent>
+              <p className="text-sm">Popover content</p>
+            </PopoverContent>
+          </Popover>
+        </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-center gap-4">
+          <Popover trigger={<Button variant="secondary">Top</Button>} position="top">
+            <PopoverContent><p className="text-sm">Top popover</p></PopoverContent>
+          </Popover>
+          <Popover trigger={<Button variant="secondary">Bottom</Button>} position="bottom">
+            <PopoverContent><p className="text-sm">Bottom popover</p></PopoverContent>
+          </Popover>
+        </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">
+          <Popover trigger={<Button variant="secondary">User Menu</Button>}>
+            <div className="w-48">
+              <div className="px-4 py-3 border-b border-border">
+                <p className="text-sm font-medium">John Doe</p>
+                <p className="text-xs text-foreground-muted">john@example.com</p>
+              </div>
+              <div className="py-2">
+                <button className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover">Profile</button>
+                <button className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover">Settings</button>
+              </div>
+            </div>
+          </Popover>
+          <Popover trigger={<Button variant="secondary">Actions</Button>}>
+            <div className="py-2">
+              {['Edit', 'Duplicate', 'Archive', 'Delete'].map((action) => (
+                <button key={action} className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover">{action}</button>
+              ))}
+            </div>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  ),
+};