sonance-brand-mcp 1.1.4 → 1.2.2

package/dist/assets/components/date-picker.tsx

@@ -6,6 +6,23 @@ import { Calendar as CalendarIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Calendar } from "./calendar";
 
+export type DatePickerState = "default" | "hover" | "focus" | "open" | "error" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: DatePickerState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover",
+    focus: "border-input-focus",
+    open: "border-input-focus",
+    error: "border-error",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface DatePickerProps {
   value?: Date;
   defaultValue?: Date;
@@ -18,6 +35,8 @@ interface DatePickerProps {
   minDate?: Date;
   maxDate?: Date;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: DatePickerState;
 }
 
 export function DatePicker({
@@ -32,7 +51,11 @@ export function DatePicker({
   minDate,
   maxDate,
   className,
+  state,
 }: DatePickerProps) {
+  const isDisabled = disabled || state === "disabled";
+  const hasError = error || state === "error";
+  const isOpenState = state === "open";
   const [internalValue, setInternalValue] = useState<Date | undefined>(defaultValue);
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -78,15 +101,16 @@ export function DatePicker({
       )}
       <button
         type="button"
-        onClick={() => !disabled && setIsOpen(!isOpen)}
-        disabled={disabled}
+        onClick={() => !isDisabled && setIsOpen(!isOpen)}
+        disabled={isDisabled}
         className={cn(
           "w-full flex items-center justify-between border border-input-border bg-input px-4 py-3",
           "text-left transition-colors duration-200",
           "focus:border-input-focus focus:outline-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          error && "border-error",
-          isOpen && "border-input-focus"
+          hasError && "border-error",
+          (isOpen || isOpenState) && "border-input-focus",
+          getStateStyles(state)
         )}
       >
         <span className={value ? "text-foreground" : "text-input-placeholder"}>

package/dist/assets/components/date-range-picker.stories.tsx

@@ -0,0 +1,340 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { addDays, addMonths } from 'date-fns';
+import { DateRangePicker } from './date-range-picker';
+
+interface DateRange {
+  start: Date | undefined;
+  end: Date | undefined;
+}
+
+const meta: Meta<typeof DateRangePicker> = {
+  title: 'Components/Forms/DateRangePicker',
+  component: DateRangePicker,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A date range picker for selecting start and end dates. Opens a dual-month calendar for easy range selection. Supports min/max constraints.',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Input label',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+      table: {
+        defaultValue: { summary: 'Select date range' },
+      },
+    },
+    dateFormat: {
+      control: 'text',
+      description: 'Display format for dates',
+      table: {
+        defaultValue: { summary: 'MMM d, yyyy' },
+      },
+    },
+    error: {
+      control: 'text',
+      description: 'Error message',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    return (
+      <div className="w-80">
+        <DateRangePicker
+          value={range}
+          onValueChange={setRange}
+        />
+      </div>
+    );
+  },
+};
+
+// With Label
+export const WithLabel: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    return (
+      <div className="w-80">
+        <DateRangePicker
+          label="Travel Dates"
+          value={range}
+          onValueChange={setRange}
+        />
+      </div>
+    );
+  },
+};
+
+// With Selected Range
+export const WithSelectedRange: Story = {
+  render: () => {
+    const today = new Date();
+    const [range, setRange] = useState<DateRange>({
+      start: today,
+      end: addDays(today, 7),
+    });
+    return (
+      <div className="w-80">
+        <DateRangePicker
+          label="Booking Period"
+          value={range}
+          onValueChange={setRange}
+        />
+      </div>
+    );
+  },
+};
+
+// With Error
+export const WithError: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    return (
+      <div className="w-80">
+        <DateRangePicker
+          label="Required Range"
+          error="Please select a date range"
+          value={range}
+          onValueChange={setRange}
+        />
+      </div>
+    );
+  },
+};
+
+// With Min/Max Dates
+export const WithMinMaxDates: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    const today = new Date();
+    return (
+      <div className="w-80 space-y-2">
+        <DateRangePicker
+          label="Event Period"
+          placeholder="Select dates within next 3 months"
+          value={range}
+          onValueChange={setRange}
+          minDate={today}
+          maxDate={addMonths(today, 3)}
+        />
+        <p className="text-xs text-foreground-muted">
+          Available dates: Today through {addMonths(today, 3).toLocaleDateString()}
+        </p>
+      </div>
+    );
+  },
+};
+
+// Disabled
+export const Disabled: Story = {
+  render: () => {
+    const today = new Date();
+    return (
+      <div className="w-80">
+        <DateRangePicker
+          label="Locked Period"
+          defaultValue={{ start: today, end: addDays(today, 5) }}
+          disabled
+        />
+      </div>
+    );
+  },
+};
+
+// Custom Format
+export const CustomFormat: Story = {
+  render: () => {
+    const today = new Date();
+    const [range, setRange] = useState<DateRange>({
+      start: today,
+      end: addDays(today, 7),
+    });
+    return (
+      <div className="w-80 space-y-4">
+        <DateRangePicker
+          label="Default Format"
+          dateFormat="MMM d, yyyy"
+          value={range}
+          onValueChange={setRange}
+        />
+        <DateRangePicker
+          label="Short Format"
+          dateFormat="MM/dd/yy"
+          value={range}
+          onValueChange={setRange}
+        />
+        <DateRangePicker
+          label="Verbose Format"
+          dateFormat="EEEE, MMMM d"
+          value={range}
+          onValueChange={setRange}
+        />
+      </div>
+    );
+  },
+};
+
+// Hotel Booking Example
+export const HotelBookingExample: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    const today = new Date();
+
+    const nights = range.start && range.end
+      ? Math.ceil((range.end.getTime() - range.start.getTime()) / (1000 * 60 * 60 * 24))
+      : 0;
+
+    return (
+      <div className="w-80 space-y-4 p-6 border border-border rounded-sm">
+        <h3 className="font-medium">Reserve Your Room</h3>
+        <DateRangePicker
+          label="Stay Duration"
+          placeholder="Select check-in and check-out"
+          value={range}
+          onValueChange={setRange}
+          minDate={today}
+          maxDate={addMonths(today, 6)}
+        />
+        {nights > 0 && (
+          <div className="space-y-2 pt-2 border-t border-border">
+            <div className="flex justify-between text-sm">
+              <span className="text-foreground-muted">Duration</span>
+              <span>{nights} night{nights > 1 ? 's' : ''}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-foreground-muted">Rate per night</span>
+              <span>$299</span>
+            </div>
+            <div className="flex justify-between font-medium pt-2 border-t border-border">
+              <span>Total</span>
+              <span>${(nights * 299).toLocaleString()}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// Report Filter Example
+export const ReportFilterExample: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    const today = new Date();
+
+    const presets = [
+      { label: 'Last 7 days', start: addDays(today, -7), end: today },
+      { label: 'Last 30 days', start: addDays(today, -30), end: today },
+      { label: 'Last 90 days', start: addDays(today, -90), end: today },
+      { label: 'This month', start: new Date(today.getFullYear(), today.getMonth(), 1), end: today },
+    ];
+
+    return (
+      <div className="w-80 space-y-4">
+        <DateRangePicker
+          label="Report Period"
+          value={range}
+          onValueChange={setRange}
+          maxDate={today}
+        />
+        <div className="flex flex-wrap gap-2">
+          {presets.map((preset) => (
+            <button
+              key={preset.label}
+              onClick={() => setRange({ start: preset.start, end: preset.end })}
+              className="text-xs px-2 py-1 border border-border rounded-sm hover:bg-secondary-hover transition-colors"
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+// All States
+export const AllStates: Story = {
+  render: () => {
+    const today = new Date();
+    return (
+      <div className="space-y-6 w-80">
+        <DateRangePicker label="Default" placeholder="Select date range" />
+        <DateRangePicker
+          label="With Value"
+          defaultValue={{ start: today, end: addDays(today, 7) }}
+        />
+        <DateRangePicker label="With Error" error="This field is required" />
+        <DateRangePicker
+          label="Disabled"
+          disabled
+          defaultValue={{ start: today, end: addDays(today, 3) }}
+        />
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => {
+    const today = 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">
+            <DateRangePicker label="Travel Dates" placeholder="Select dates" />
+          </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="grid grid-cols-2 gap-4">
+              <DateRangePicker label="Booking Period" placeholder="Select range" />
+              <DateRangePicker
+                label="With Value"
+                defaultValue={{ start: today, end: addDays(today, 7) }}
+              />
+            </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="grid grid-cols-3 gap-4">
+              <DateRangePicker label="Default" placeholder="Select range" />
+              <DateRangePicker label="With Error" error="Required field" />
+              <DateRangePicker
+                label="Disabled"
+                disabled
+                defaultValue={{ start: today, end: addDays(today, 5) }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+} from './dialog';
+import { Button } from './button';
+import { Input } from './input';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Overlays/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A modal dialog component for focused interactions. Includes backdrop, keyboard support (Escape to close), and scroll lock.',
+      },
+    },
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Dialog
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog Title</DialogTitle>
+              <DialogDescription>
+                This is a description of the dialog content.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <p className="text-foreground-secondary">
+                Dialog body content goes here. You can add any content you need.
+              </p>
+            </DialogBody>
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Confirmation Dialog
+export const Confirmation: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          Delete Item
+        </Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Delete Item?</DialogTitle>
+              <DialogDescription>
+                This action cannot be undone. This will permanently delete the item
+                from your account.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>Delete</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Form Dialog
+export const FormDialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Add New Item</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add New Item</DialogTitle>
+              <DialogDescription>
+                Fill out the form below to add a new item to your inventory.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <form className="space-y-4">
+                <Input label="Item Name" placeholder="Enter item name" />
+                <Input label="SKU" placeholder="Enter SKU" />
+                <Input label="Price" type="number" placeholder="0.00" />
+              </form>
+            </DialogBody>
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>Add Item</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Without Close Button
+export const WithoutCloseButton: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent showClose={false}>
+            <DialogHeader>
+              <DialogTitle>Required Action</DialogTitle>
+              <DialogDescription>
+                Please complete the required action before closing.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <p className="text-foreground-secondary">
+                This dialog has no close button, requiring user to use the action buttons.
+              </p>
+            </DialogBody>
+            <DialogFooter>
+              <Button onClick={() => setOpen(false)}>Complete</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Long Content Dialog
+export const LongContent: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Terms & Conditions</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Terms and Conditions</DialogTitle>
+            </DialogHeader>
+            <DialogBody className="max-h-[60vh] overflow-y-auto">
+              <div className="space-y-4 text-foreground-secondary text-sm">
+                {Array.from({ length: 10 }, (_, i) => (
+                  <p key={i}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                    enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                    in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                    nulla pariatur.
+                  </p>
+                ))}
+              </div>
+            </DialogBody>
+            <DialogFooter>
+              <Button variant="secondary" onClick={() => setOpen(false)}>
+                Decline
+              </Button>
+              <Button onClick={() => setOpen(false)}>Accept</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Simple Alert Dialog
+export const AlertDialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Show Alert</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <DialogContent className="max-w-sm">
+            <DialogHeader>
+              <DialogTitle>Alert</DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <p className="text-foreground-secondary">
+                Your session will expire in 5 minutes.
+              </p>
+            </DialogBody>
+            <DialogFooter>
+              <Button onClick={() => setOpen(false)}>Okay</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop (static previews)
+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 bg-black/50">
+          <div className="bg-background rounded-lg p-4 shadow-lg">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Confirm Action</h3>
+              <p className="text-sm text-foreground-secondary">Are you sure you want to proceed?</p>
+            </div>
+            <div className="flex flex-col gap-2 mt-4">
+              <Button className="w-full">Confirm</Button>
+              <Button variant="secondary" className="w-full">Cancel</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 bg-black/50 flex items-center justify-center">
+          <div className="bg-background rounded-lg p-6 shadow-lg w-[400px]">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Add New Item</h3>
+              <p className="text-sm text-foreground-secondary">Fill out the form below.</p>
+            </div>
+            <div className="space-y-4 mt-4">
+              <Input label="Item Name" placeholder="Enter name" />
+              <Input label="Price" type="number" placeholder="0.00" />
+            </div>
+            <div className="flex justify-end gap-2 mt-6">
+              <Button variant="secondary">Cancel</Button>
+              <Button>Add Item</Button>
+            </div>
+          </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 bg-black/50 flex items-center justify-center">
+          <div className="bg-background rounded-lg p-6 shadow-lg w-[500px]">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Delete Item?</h3>
+              <p className="text-sm text-foreground-secondary">This action cannot be undone. This will permanently delete the item from your account.</p>
+            </div>
+            <div className="flex justify-end gap-2 mt-6">
+              <Button variant="secondary">Cancel</Button>
+              <Button>Delete</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};