sonance-brand-mcp 1.1.3 → 1.1.7

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

@@ -0,0 +1,362 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Button, type ButtonState } from './button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Forms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A versatile button component with multiple variants and sizes. Follows Sonance brand guidelines with uppercase text and clean styling.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost', 'inverted'],
+      description: 'Visual style variant',
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Button size',
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'active', 'focus', 'disabled'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    children: {
+      control: 'text',
+      description: 'Button label',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+// Variants
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    children: 'Inverted Button',
+    variant: 'inverted',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-sonance-charcoal p-8 rounded">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Sizes
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    children: 'Medium Button',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'lg',
+  },
+};
+
+// States
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <div className="bg-sonance-charcoal p-2 rounded">
+        <Button variant="inverted">Inverted</Button>
+      </div>
+    </div>
+  ),
+};
+
+// All Sizes
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  ),
+};
+
+// Variant Matrix
+export const VariantMatrix: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-sm font-medium text-foreground-muted mb-3">Primary</h3>
+        <div className="flex items-center gap-4">
+          <Button variant="primary" size="sm">Small</Button>
+          <Button variant="primary" size="md">Medium</Button>
+          <Button variant="primary" size="lg">Large</Button>
+          <Button variant="primary" size="md" disabled>Disabled</Button>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-medium text-foreground-muted mb-3">Secondary</h3>
+        <div className="flex items-center gap-4">
+          <Button variant="secondary" size="sm">Small</Button>
+          <Button variant="secondary" size="md">Medium</Button>
+          <Button variant="secondary" size="lg">Large</Button>
+          <Button variant="secondary" size="md" disabled>Disabled</Button>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-medium text-foreground-muted mb-3">Ghost</h3>
+        <div className="flex items-center gap-4">
+          <Button variant="ghost" size="sm">Small</Button>
+          <Button variant="ghost" size="md">Medium</Button>
+          <Button variant="ghost" size="lg">Large</Button>
+          <Button variant="ghost" size="md" disabled>Disabled</Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Interactive States - for Figma documentation
+export const PrimaryStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-foreground-muted">Primary Button States</h3>
+      <div className="flex items-center gap-4">
+        <div className="text-center">
+          <Button variant="primary" state="default">Default</Button>
+          <p className="text-xs text-foreground-muted mt-2">Default</p>
+        </div>
+        <div className="text-center">
+          <Button variant="primary" state="hover">Hover</Button>
+          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+        </div>
+        <div className="text-center">
+          <Button variant="primary" state="active">Active</Button>
+          <p className="text-xs text-foreground-muted mt-2">Active</p>
+        </div>
+        <div className="text-center">
+          <Button variant="primary" state="focus">Focus</Button>
+          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+        </div>
+        <div className="text-center">
+          <Button variant="primary" state="disabled">Disabled</Button>
+          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const SecondaryStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-foreground-muted">Secondary Button States</h3>
+      <div className="flex items-center gap-4">
+        <div className="text-center">
+          <Button variant="secondary" state="default">Default</Button>
+          <p className="text-xs text-foreground-muted mt-2">Default</p>
+        </div>
+        <div className="text-center">
+          <Button variant="secondary" state="hover">Hover</Button>
+          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+        </div>
+        <div className="text-center">
+          <Button variant="secondary" state="active">Active</Button>
+          <p className="text-xs text-foreground-muted mt-2">Active</p>
+        </div>
+        <div className="text-center">
+          <Button variant="secondary" state="focus">Focus</Button>
+          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+        </div>
+        <div className="text-center">
+          <Button variant="secondary" state="disabled">Disabled</Button>
+          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const GhostStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium text-foreground-muted">Ghost Button States</h3>
+      <div className="flex items-center gap-4">
+        <div className="text-center">
+          <Button variant="ghost" state="default">Default</Button>
+          <p className="text-xs text-foreground-muted mt-2">Default</p>
+        </div>
+        <div className="text-center">
+          <Button variant="ghost" state="hover">Hover</Button>
+          <p className="text-xs text-foreground-muted mt-2">Hover</p>
+        </div>
+        <div className="text-center">
+          <Button variant="ghost" state="active">Active</Button>
+          <p className="text-xs text-foreground-muted mt-2">Active</p>
+        </div>
+        <div className="text-center">
+          <Button variant="ghost" state="focus">Focus</Button>
+          <p className="text-xs text-foreground-muted mt-2">Focus</p>
+        </div>
+        <div className="text-center">
+          <Button variant="ghost" state="disabled">Disabled</Button>
+          <p className="text-xs text-foreground-muted mt-2">Disabled</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Complete State Matrix - All variants × All states
+export const StateMatrix: Story = {
+  render: () => {
+    const variants = ['primary', 'secondary', 'ghost'] as const;
+    const states: ButtonState[] = ['default', 'hover', 'active', 'focus', 'disabled'];
+
+    return (
+      <div className="space-y-8">
+        <div className="grid grid-cols-6 gap-4 text-center">
+          <div></div>
+          {states.map((state) => (
+            <div key={state} className="text-xs font-medium text-foreground-muted uppercase">
+              {state}
+            </div>
+          ))}
+        </div>
+        {variants.map((variant) => (
+          <div key={variant} className="grid grid-cols-6 gap-4 items-center">
+            <div className="text-xs font-medium text-foreground-muted uppercase">{variant}</div>
+            {states.map((state) => (
+              <Button key={`${variant}-${state}`} variant={variant} state={state}>
+                Button
+              </Button>
+            ))}
+          </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">
+          <div className="flex flex-col gap-2">
+            <Button variant="primary" className="w-full">Primary Button</Button>
+            <Button variant="secondary" className="w-full">Secondary Button</Button>
+            <div className="flex gap-2">
+              <Button variant="primary" size="sm">Small</Button>
+              <Button variant="secondary" size="sm">Small</Button>
+            </div>
+          </div>
+        </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">
+          <div className="flex gap-4">
+            <Button variant="primary">Primary Button</Button>
+            <Button variant="secondary">Secondary Button</Button>
+            <Button variant="ghost">Ghost Button</Button>
+          </div>
+        </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">
+          <div className="flex gap-4 items-center">
+            <Button variant="primary" size="lg">Large Primary</Button>
+            <Button variant="secondary" size="lg">Large Secondary</Button>
+            <Button variant="ghost" size="lg">Large Ghost</Button>
+            <Button variant="primary" size="md">Medium</Button>
+            <Button variant="secondary" size="md">Medium</Button>
+            <Button variant="primary" size="sm">Small</Button>
+            <Button variant="secondary" size="sm">Small</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/button.tsx

@@ -2,6 +2,8 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { forwardRef } from "react";
 
+export type ButtonState = "default" | "hover" | "active" | "focus" | "disabled";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
   {
@@ -28,16 +30,59 @@ const buttonVariants = cva(
   }
 );
 
+// State styles for Storybook/Figma visualization
+const getStateStyles = (variant: string | null | undefined, state?: ButtonState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, Record<string, string>> = {
+    primary: {
+      hover: "bg-primary-hover",
+      active: "bg-primary-active",
+      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    secondary: {
+      hover: "bg-secondary-hover border-border-hover",
+      active: "bg-secondary-hover",
+      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    ghost: {
+      hover: "bg-secondary-hover",
+      active: "bg-secondary-hover",
+      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    inverted: {
+      hover: "opacity-90",
+      active: "opacity-80",
+      focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+  };
+
+  return stateMap[variant || "primary"]?.[state] || "";
+};
+
 interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+    VariantProps<typeof buttonVariants> {
+  /** Visual state for Storybook/Figma documentation */
+  state?: ButtonState;
+}
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, state, disabled, ...props }, ref) => {
+    const isDisabled = disabled || state === "disabled";
+
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          getStateStyles(variant, state)
+        )}
         ref={ref}
+        disabled={isDisabled}
         {...props}
       />
     );

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

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { addDays, subDays } from 'date-fns';
+import { Calendar, MiniCalendar } from './calendar';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Forms/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A date calendar component for selecting single dates. Supports min/max dates, disabled dates, and customizable styling.',
+      },
+    },
+  },
+  argTypes: {
+    selected: {
+      control: 'date',
+      description: 'The currently selected date',
+    },
+    minDate: {
+      control: 'date',
+      description: 'Minimum selectable date',
+    },
+    maxDate: {
+      control: 'date',
+      description: 'Maximum selectable date',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(undefined);
+    return (
+      <Calendar
+        selected={selected}
+        onSelect={setSelected}
+        className="w-fit"
+      />
+    );
+  },
+};
+
+// With Selected Date
+export const WithSelectedDate: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date>(new Date());
+    return (
+      <Calendar
+        selected={selected}
+        onSelect={setSelected}
+        className="w-fit"
+      />
+    );
+  },
+};
+
+// With Min/Max Dates
+export const WithMinMaxDates: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(undefined);
+    const today = new Date();
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Only dates within the next 30 days are selectable
+        </p>
+        <Calendar
+          selected={selected}
+          onSelect={setSelected}
+          minDate={today}
+          maxDate={addDays(today, 30)}
+          className="w-fit"
+        />
+      </div>
+    );
+  },
+};
+
+// With Disabled Dates (weekends)
+export const DisabledWeekends: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(undefined);
+    const isWeekend = (date: Date) => {
+      const day = date.getDay();
+      return day === 0 || day === 6;
+    };
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Weekends are disabled
+        </p>
+        <Calendar
+          selected={selected}
+          onSelect={setSelected}
+          disabled={isWeekend}
+          className="w-fit"
+        />
+      </div>
+    );
+  },
+};
+
+// Past Dates Only
+export const PastDatesOnly: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(undefined);
+    const today = new Date();
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Only past dates are selectable (useful for birthdays)
+        </p>
+        <Calendar
+          selected={selected}
+          onSelect={setSelected}
+          maxDate={subDays(today, 1)}
+          className="w-fit"
+        />
+      </div>
+    );
+  },
+};
+
+// Mini Calendar
+export const Mini: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(new Date());
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Compact calendar for smaller spaces
+        </p>
+        <MiniCalendar
+          selected={selected}
+          onSelect={setSelected}
+          className="w-fit"
+        />
+      </div>
+    );
+  },
+};
+
+// Booking Example
+export const BookingExample: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(undefined);
+    const today = new Date();
+
+    // Simulate some booked dates
+    const bookedDates = [
+      addDays(today, 3),
+      addDays(today, 4),
+      addDays(today, 10),
+      addDays(today, 11),
+      addDays(today, 12),
+    ];
+
+    const isBooked = (date: Date) => {
+      return bookedDates.some(
+        bookedDate =>
+          bookedDate.getDate() === date.getDate() &&
+          bookedDate.getMonth() === date.getMonth() &&
+          bookedDate.getFullYear() === date.getFullYear()
+      );
+    };
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Select an available appointment date
+        </p>
+        <Calendar
+          selected={selected}
+          onSelect={setSelected}
+          minDate={today}
+          maxDate={addDays(today, 60)}
+          disabled={isBooked}
+          className="w-fit"
+        />
+        {selected && (
+          <p className="text-sm text-foreground">
+            Selected: {selected.toLocaleDateString()}
+          </p>
+        )}
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => {
+    const [mobile, setMobile] = useState<Date | undefined>(new Date());
+    const [tablet, setTablet] = useState<Date | undefined>(new Date());
+    const [desktop, setDesktop] = useState<Date | undefined>(new Date());
+
+    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">
+            <MiniCalendar
+              selected={mobile}
+              onSelect={setMobile}
+              className="w-fit"
+            />
+          </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">
+            <Calendar
+              selected={tablet}
+              onSelect={setTablet}
+              className="w-fit"
+            />
+          </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">
+            <div className="flex gap-8">
+              <Calendar
+                selected={desktop}
+                onSelect={setDesktop}
+                className="w-fit"
+              />
+              <div className="text-sm text-foreground-muted">
+                {desktop && <p>Selected: {desktop.toLocaleDateString()}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};