sonance-brand-mcp 1.1.3 → 1.1.7

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

@@ -0,0 +1,310 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ComponentProps } from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  type AccordionTriggerState,
+} from './accordion';
+
+type AccordionStoryProps = ComponentProps<typeof Accordion> & {
+  state?: AccordionTriggerState;
+};
+
+const meta: Meta<AccordionStoryProps> = {
+  title: 'Components/Data Display/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A vertically stacked set of interactive headings that reveal or hide associated content.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'expanded', 'disabled'],
+      description: 'Visual state for AccordionTrigger documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AccordionStoryProps>;
+
+const faqItems = [
+  {
+    value: 'item-1',
+    question: 'What makes Sonance speakers unique?',
+    answer: 'Sonance speakers are designed to deliver exceptional audio performance while seamlessly blending into any architectural environment. Our "Designed to Disappear" philosophy ensures that you hear great sound without seeing obtrusive speakers.',
+  },
+  {
+    value: 'item-2',
+    question: 'Are Sonance speakers suitable for outdoor use?',
+    answer: 'Yes! Our Garden Series and Landscape Collection are specifically engineered for outdoor environments. They feature weather-resistant construction and can withstand various climate conditions while delivering premium sound quality.',
+  },
+  {
+    value: 'item-3',
+    question: 'How do I choose the right speakers for my space?',
+    answer: 'Consider factors like room size, listening preferences, and installation requirements. Our in-wall and in-ceiling speakers are perfect for whole-home audio, while our soundbars excel in dedicated entertainment spaces. Contact our team for personalized recommendations.',
+  },
+  {
+    value: 'item-4',
+    question: 'Do Sonance products come with a warranty?',
+    answer: 'All Sonance products come with a comprehensive warranty. Residential products typically include a limited warranty, while professional installations may qualify for extended coverage. Check the specific product documentation for details.',
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-lg">
+      {faqItems.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.question}</AccordionTrigger>
+          <AccordionContent>{item.answer}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+};
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Accordion type="single" collapsible defaultValue="item-1" className="w-full max-w-lg">
+      {faqItems.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.question}</AccordionTrigger>
+          <AccordionContent>{item.answer}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+};
+
+export const MultipleOpen: Story = {
+  render: () => (
+    <Accordion type="multiple" defaultValue={['item-1', 'item-2']} className="w-full max-w-lg">
+      {faqItems.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.question}</AccordionTrigger>
+          <AccordionContent>{item.answer}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+};
+
+export const NonCollapsible: Story = {
+  render: () => (
+    <Accordion type="single" defaultValue="item-1" className="w-full max-w-lg">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Always One Open</AccordionTrigger>
+        <AccordionContent>
+          This accordion has collapsible=false (default), so one item must always be open.
+          Try clicking another item - the current one will close.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Click to Switch</AccordionTrigger>
+        <AccordionContent>
+          You can switch between items, but you cannot close all of them.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Third Option</AccordionTrigger>
+        <AccordionContent>
+          This behavior is useful for settings panels where at least one option must be visible.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const ProductSpecs: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-lg">
+      <AccordionItem value="specs">
+        <AccordionTrigger>Technical Specifications</AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Frequency Response</span>
+              <span>50Hz - 20kHz</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Impedance</span>
+              <span>8 Ohms</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Power Handling</span>
+              <span>100W RMS</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Sensitivity</span>
+              <span>89dB @ 1W/1m</span>
+            </div>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="dimensions">
+        <AccordionTrigger>Dimensions</AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Height</span>
+              <span>8.5&quot;</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Width</span>
+              <span>10.5&quot;</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Depth</span>
+              <span>3.8&quot;</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Weight</span>
+              <span>4.2 lbs</span>
+            </div>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="installation">
+        <AccordionTrigger>Installation Notes</AccordionTrigger>
+        <AccordionContent>
+          <ul className="list-disc list-inside space-y-1 text-sm">
+            <li>Suitable for new construction or retrofit</li>
+            <li>Requires 9&quot; x 11&quot; cutout</li>
+            <li>Mounting depth: 4&quot; minimum</li>
+            <li>Dog-ear mounting clips included</li>
+          </ul>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const SettingsPanel: Story = {
+  render: () => (
+    <div className="w-full max-w-lg border border-border rounded-lg overflow-hidden">
+      <Accordion type="single" collapsible>
+        <AccordionItem value="appearance">
+          <AccordionTrigger className="px-4">Appearance</AccordionTrigger>
+          <AccordionContent className="px-4">
+            <p className="text-foreground-muted mb-4">
+              Customize how the application looks on your device.
+            </p>
+            <div className="flex gap-4">
+              <button className="p-4 border-2 border-primary rounded text-sm">Light</button>
+              <button className="p-4 border border-border rounded text-sm">Dark</button>
+              <button className="p-4 border border-border rounded text-sm">System</button>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="notifications">
+          <AccordionTrigger className="px-4">Notifications</AccordionTrigger>
+          <AccordionContent className="px-4">
+            <p className="text-foreground-muted">
+              Configure how you receive notifications and alerts.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="privacy">
+          <AccordionTrigger className="px-4">Privacy & Security</AccordionTrigger>
+          <AccordionContent className="px-4">
+            <p className="text-foreground-muted">
+              Manage your privacy settings and security preferences.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all AccordionTrigger states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: AccordionTriggerState[] = ['default', 'hover', 'focus', 'expanded', 'disabled'];
+    return (
+      <div className="space-y-6 w-96">
+        <h3 className="text-sm font-medium text-foreground-muted">AccordionTrigger States</h3>
+        <div className="space-y-2">
+          {states.map((state) => (
+            <Accordion key={state} type="single" collapsible className="w-full">
+              <AccordionItem value="item">
+                <AccordionTrigger state={state}>{state} state</AccordionTrigger>
+                <AccordionContent>Content for {state} state demonstration.</AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          ))}
+        </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">
+          <Accordion type="single" collapsible defaultValue="item-1" className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>FAQ Question 1</AccordionTrigger>
+              <AccordionContent>Answer to the first question displayed on mobile.</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>FAQ Question 2</AccordionTrigger>
+              <AccordionContent>Answer to the second question.</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </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">
+          <Accordion type="single" collapsible defaultValue="specs" className="w-full">
+            <AccordionItem value="specs">
+              <AccordionTrigger>Technical Specifications</AccordionTrigger>
+              <AccordionContent>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div className="flex justify-between"><span className="text-foreground-muted">Frequency</span><span>50Hz - 20kHz</span></div>
+                  <div className="flex justify-between"><span className="text-foreground-muted">Impedance</span><span>8 Ohms</span></div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="dimensions">
+              <AccordionTrigger>Dimensions</AccordionTrigger>
+              <AccordionContent>Height: 8.5&quot;, Width: 10.5&quot;, Depth: 3.8&quot;</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </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">
+          <Accordion type="multiple" defaultValue={['item-1']} className="w-full">
+            {faqItems.map((item) => (
+              <AccordionItem key={item.value} value={item.value}>
+                <AccordionTrigger>{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/accordion.tsx

@@ -4,6 +4,22 @@ import { forwardRef, createContext, useContext, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type AccordionTriggerState = "default" | "hover" | "focus" | "expanded" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: AccordionTriggerState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "text-foreground-secondary",
+    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    expanded: "",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 interface AccordionContextValue {
   openItems: string[];
   toggleItem: (value: string) => void;
@@ -79,40 +95,50 @@ export function AccordionItem({ value, className, children }: AccordionItemProps
   );
 }
 
-export const AccordionTrigger = forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ className, children, ...props }, ref) => {
-  const accordionContext = useContext(AccordionContext);
-  const itemContext = useContext(AccordionItemContext);
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual state for Storybook/Figma documentation */
+  state?: AccordionTriggerState;
+}
 
-  if (!accordionContext || !itemContext) {
-    throw new Error("AccordionTrigger must be used within AccordionItem");
-  }
+export const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  ({ className, children, state, disabled, ...props }, ref) => {
+    const accordionContext = useContext(AccordionContext);
+    const itemContext = useContext(AccordionItemContext);
 
-  return (
-    <button
-      ref={ref}
-      type="button"
-      onClick={() => accordionContext.toggleItem(itemContext.value)}
-      className={cn(
-        "flex w-full items-center justify-between py-4 text-left font-medium text-foreground",
-        "transition-colors hover:text-foreground-secondary",
-        className
-      )}
-      aria-expanded={itemContext.isOpen}
-      {...props}
-    >
-      {children}
-      <ChevronDown
+    if (!accordionContext || !itemContext) {
+      throw new Error("AccordionTrigger must be used within AccordionItem");
+    }
+
+    const isExpanded = itemContext.isOpen || state === "expanded";
+    const isDisabled = disabled || state === "disabled";
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={() => !isDisabled && accordionContext.toggleItem(itemContext.value)}
+        disabled={isDisabled}
         className={cn(
-          "h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200",
-          itemContext.isOpen && "rotate-180"
+          "flex w-full items-center justify-between py-4 text-left font-medium text-foreground",
+          "transition-colors hover:text-foreground-secondary",
+          isDisabled && "opacity-50 cursor-not-allowed",
+          getStateStyles(state),
+          className
         )}
-      />
-    </button>
-  );
-});
+        aria-expanded={isExpanded}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-200",
+            isExpanded && "rotate-180"
+          )}
+        />
+      </button>
+    );
+  }
+);
 
 AccordionTrigger.displayName = "AccordionTrigger";
 

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

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Alert } from './alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'An alert component for displaying important messages. Supports multiple variants for different message types.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'error', 'warning', 'info'],
+      description: 'Visual style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    title: {
+      control: 'text',
+      description: 'Alert title',
+    },
+    children: {
+      control: 'text',
+      description: 'Alert content',
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Show close button',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  args: {
+    title: 'Heads up!',
+    children: 'You can add components and dependencies to your app using the CLI.',
+  },
+};
+
+// Success
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    title: 'Success',
+    children: 'Your changes have been saved successfully.',
+  },
+};
+
+// Error
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    title: 'Error',
+    children: 'There was a problem with your request. Please try again.',
+  },
+};
+
+// Warning
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    title: 'Warning',
+    children: 'Your subscription will expire in 3 days. Please renew to avoid interruption.',
+  },
+};
+
+// Info
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    title: 'Information',
+    children: 'A new version is available. Refresh to update.',
+  },
+};
+
+// Dismissible
+export const Dismissible: Story = {
+  args: {
+    variant: 'info',
+    title: 'Dismissible Alert',
+    children: 'This alert can be dismissed by clicking the X button.',
+    dismissible: true,
+    onClose: () => console.log('Alert dismissed'),
+  },
+};
+
+// Without Title
+export const WithoutTitle: Story = {
+  args: {
+    variant: 'info',
+    children: 'This is a simple alert without a title.',
+  },
+};
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-[500px]">
+      <Alert variant="default" title="Default">
+        This is a default alert for general information.
+      </Alert>
+      <Alert variant="success" title="Success">
+        Your operation completed successfully.
+      </Alert>
+      <Alert variant="error" title="Error">
+        Something went wrong. Please try again.
+      </Alert>
+      <Alert variant="warning" title="Warning">
+        Please review before proceeding.
+      </Alert>
+      <Alert variant="info" title="Info">
+        Here&apos;s some helpful information.
+      </Alert>
+    </div>
+  ),
+};
+
+// Form Validation Example
+export const FormValidationExample: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <Alert variant="error" title="Form Error">
+        <ul className="list-disc list-inside mt-2 space-y-1">
+          <li>Email address is required</li>
+          <li>Password must be at least 8 characters</li>
+          <li>Please accept the terms and conditions</li>
+        </ul>
+      </Alert>
+    </div>
+  ),
+};
+
+// Dismissible Examples
+export const DismissibleExamples: Story = {
+  render: () => (
+    <div className="space-y-4 w-[500px]">
+      <Alert variant="success" title="File uploaded" dismissible onClose={() => {}}>
+        document.pdf has been uploaded successfully.
+      </Alert>
+      <Alert variant="warning" dismissible onClose={() => {}}>
+        Your session will expire in 5 minutes.
+      </Alert>
+    </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 space-y-4">
+          <Alert variant="success" title="Success">
+            Your changes have been saved.
+          </Alert>
+          <Alert variant="error" title="Error">
+            Something went wrong.
+          </Alert>
+        </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 space-y-4">
+          <Alert variant="info" title="Information">
+            A new version is available. Please refresh to update.
+          </Alert>
+          <Alert variant="warning" title="Warning" dismissible onClose={() => {}}>
+            Your subscription expires in 3 days. Please renew to continue.
+          </Alert>
+        </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-2 gap-4">
+            <Alert variant="success" title="Success">Operation completed successfully.</Alert>
+            <Alert variant="error" title="Error">Please try again later.</Alert>
+            <Alert variant="warning" title="Warning">Review before proceeding.</Alert>
+            <Alert variant="info" title="Info">Helpful information here.</Alert>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};