sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Select, NativeSelect, type SelectState } from './select';
+
+const defaultOptions = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+const countryOptions = [
+  { value: 'us', label: 'United States' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+];
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Forms/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A dropdown select component for choosing from a list of options.',
+      },
+    },
+  },
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    error: { control: 'text' },
+    disabled: { control: 'boolean' },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'open', 'error', 'disabled'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    options: defaultOptions,
+    placeholder: 'Select an option',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    options: countryOptions,
+    label: 'Country',
+    placeholder: 'Select a country',
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    options: countryOptions,
+    label: 'Country',
+    defaultValue: 'us',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    options: countryOptions,
+    label: 'Country',
+    placeholder: 'Select a country',
+    error: 'Please select a country',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options: countryOptions,
+    label: 'Country',
+    defaultValue: 'us',
+    disabled: true,
+  },
+};
+
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      { value: 'available', label: 'Available' },
+      { value: 'limited', label: 'Limited Stock' },
+      { value: 'outofstock', label: 'Out of Stock', disabled: true },
+    ],
+    label: 'Availability',
+    placeholder: 'Select availability',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6 w-72">
+      <Select options={defaultOptions} placeholder="Default select" />
+      <Select options={countryOptions} label="With Label" placeholder="Select..." />
+      <Select options={countryOptions} label="With Value" defaultValue="uk" />
+      <Select options={countryOptions} label="With Error" error="Required field" />
+      <Select options={countryOptions} label="Disabled" defaultValue="us" disabled />
+    </div>
+  ),
+};
+
+// Native Select stories
+export const NativeSelectDefault: StoryObj<typeof NativeSelect> = {
+  render: () => (
+    <NativeSelect options={countryOptions} label="Native Select" />
+  ),
+};
+
+export const NativeSelectWithError: StoryObj<typeof NativeSelect> = {
+  render: () => (
+    <NativeSelect
+      options={countryOptions}
+      label="Native Select"
+      error="Please select an option"
+    />
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: SelectState[] = ['default', 'hover', 'focus', 'open', 'error', 'disabled'];
+    return (
+      <div className="space-y-6 w-80">
+        <h3 className="text-sm font-medium text-foreground-muted">Select States</h3>
+        <div className="grid grid-cols-1 gap-4">
+          {states.map((state) => (
+            <div key={state} className="flex items-center gap-4">
+              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <Select
+                state={state}
+                options={defaultOptions}
+                placeholder="Select option"
+                label={state === 'error' ? undefined : undefined}
+                error={state === 'error' ? 'Error message' : undefined}
+              />
+            </div>
+          ))}
+        </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 space-y-4">
+          <Select options={countryOptions} label="Country" placeholder="Select..." />
+          <Select options={defaultOptions} label="Option" placeholder="Choose..." />
+        </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">
+            <Select options={countryOptions} label="Country" placeholder="Select country..." />
+            <Select options={defaultOptions} label="Category" placeholder="Select category..." />
+          </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-4 gap-4">
+            <Select options={countryOptions} label="Country" defaultValue="us" />
+            <Select options={defaultOptions} label="Default" placeholder="Select..." />
+            <Select options={countryOptions} label="With Error" error="Required" />
+            <Select options={countryOptions} label="Disabled" defaultValue="uk" disabled />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/dist/assets/components/select.tsx

@@ -4,6 +4,23 @@ import { forwardRef, useState, useRef, useEffect } from "react";
 import { ChevronDown, Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+export type SelectState = "default" | "hover" | "focus" | "open" | "error" | "disabled";
+
+// State styles for Storybook/Figma visualization
+const getStateStyles = (state?: SelectState) => {
+  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 SelectOption {
   value: string;
   label: string;
@@ -20,6 +37,8 @@ interface SelectProps {
   error?: string;
   disabled?: boolean;
   className?: string;
+  /** Visual state for Storybook/Figma documentation */
+  state?: SelectState;
 }
 
 export function Select({
@@ -32,7 +51,11 @@ export function Select({
   error,
   disabled = false,
   className,
+  state,
 }: SelectProps) {
+  const isDisabled = disabled || state === "disabled";
+  const hasError = error || state === "error";
+  const isOpenState = state === "open";
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -80,15 +103,16 @@ export function Select({
       <div className="relative">
         <button
           type="button"
-          onClick={() => !disabled && setIsOpen(!isOpen)}
-          disabled={disabled}
+          onClick={() => !isDisabled && setIsOpen(!isOpen)}
+          disabled={isDisabled}
           className={cn(
             "flex w-full items-center justify-between border border-input-border bg-input px-4 py-3",
             "text-left text-foreground 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={cn(!selectedOption && "text-input-placeholder")}>
@@ -97,7 +121,7 @@ export function Select({
           <ChevronDown
             className={cn(
               "h-4 w-4 text-foreground-muted transition-transform duration-200",
-              isOpen && "rotate-180"
+              (isOpen || isOpenState) && "rotate-180"
             )}
           />
         </button>
@@ -136,15 +160,36 @@ export function Select({
   );
 }
 
+export type NativeSelectState = "default" | "hover" | "focus" | "error" | "disabled";
+
+// State styles for NativeSelect Storybook/Figma visualization
+const getNativeSelectStateStyles = (state?: NativeSelectState) => {
+  if (!state || state === "default") return "";
+
+  const stateMap: Record<string, string> = {
+    hover: "border-border-hover",
+    focus: "border-input-focus",
+    error: "border-error",
+    disabled: "opacity-50 cursor-not-allowed",
+  };
+
+  return stateMap[state] || "";
+};
+
 // Native Select for forms
 interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
   label?: string;
   error?: string;
   options: SelectOption[];
+  /** Visual state for Storybook/Figma documentation */
+  state?: NativeSelectState;
 }
 
 export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ className, label, error, options, ...props }, ref) => {
+  ({ className, label, error, options, state, disabled, ...props }, ref) => {
+    const isDisabled = disabled || state === "disabled";
+    const hasError = error || state === "error";
+
     return (
       <div className="w-full">
         {label && (
@@ -155,12 +200,14 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
         <div className="relative">
           <select
             ref={ref}
+            disabled={isDisabled}
             className={cn(
               "w-full appearance-none border border-input-border bg-input px-4 py-3 pr-10",
               "text-foreground transition-colors duration-200",
               "focus:border-input-focus focus:outline-none",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              error && "border-error",
+              hasError && "border-error",
+              getNativeSelectStateStyles(state),
               className
             )}
             {...props}

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

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable } from './skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Feedback/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Skeleton loading placeholders for content that is loading.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['text', 'circular', 'rectangular'],
+    },
+    width: { control: 'text' },
+    height: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: 'h-4 w-full',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    width: '200px',
+  },
+};
+
+export const Circular: Story = {
+  args: {
+    variant: 'circular',
+    width: 48,
+    height: 48,
+  },
+};
+
+export const Rectangular: Story = {
+  args: {
+    variant: 'rectangular',
+    width: '100%',
+    height: 200,
+  },
+};
+
+export const TextLines: StoryObj<typeof SkeletonText> = {
+  render: () => (
+    <div className="w-80">
+      <SkeletonText lines={3} />
+    </div>
+  ),
+};
+
+export const AvatarSkeleton: StoryObj<typeof SkeletonAvatar> = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <SkeletonAvatar size="sm" />
+      <SkeletonAvatar size="md" />
+      <SkeletonAvatar size="lg" />
+    </div>
+  ),
+};
+
+export const CardSkeleton: StoryObj<typeof SkeletonCard> = {
+  render: () => (
+    <div className="w-72">
+      <SkeletonCard />
+    </div>
+  ),
+};
+
+export const TableSkeleton: StoryObj<typeof SkeletonTable> = {
+  render: () => (
+    <div className="w-full">
+      <SkeletonTable rows={5} columns={4} />
+    </div>
+  ),
+};
+
+export const ProfileSkeleton: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 w-80">
+      <SkeletonAvatar size="lg" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+    </div>
+  ),
+};
+
+export const ListSkeleton: Story = {
+  render: () => (
+    <div className="space-y-4 w-96">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="flex items-center gap-4">
+          <SkeletonAvatar size="md" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const GridSkeleton: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      {[1, 2, 3].map((i) => (
+        <SkeletonCard key={i} />
+      ))}
+    </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">
+          <div className="flex items-center gap-4">
+            <SkeletonAvatar size="md" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-3 w-1/2" />
+            </div>
+          </div>
+          <SkeletonCard />
+        </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">
+            <SkeletonCard />
+            <SkeletonCard />
+          </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">
+          <SkeletonTable rows={4} columns={5} />
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Slider, type SliderState } from './slider';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Components/Forms/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A slider input for selecting numeric values within a range.',
+      },
+    },
+  },
+  argTypes: {
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    defaultValue: { control: 'number' },
+    label: { control: 'text' },
+    showValue: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'focus', 'active', 'disabled'],
+      description: 'Visual state for documentation',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: 50,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Volume',
+    defaultValue: 75,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: 'Brightness',
+    showValue: true,
+    defaultValue: 60,
+  },
+};
+
+export const CustomRange: Story = {
+  args: {
+    label: 'Price Range',
+    min: 0,
+    max: 1000,
+    step: 50,
+    defaultValue: 500,
+    showValue: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Slider',
+    defaultValue: 30,
+    disabled: true,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-8 w-80">
+      <Slider defaultValue={50} />
+      <Slider label="With Label" defaultValue={75} />
+      <Slider label="With Value Display" showValue defaultValue={60} />
+      <Slider label="Custom Step (10)" step={10} showValue defaultValue={40} />
+      <Slider label="Disabled" disabled defaultValue={30} />
+    </div>
+  ),
+};
+
+// State Matrix - Visual documentation of all states
+export const StateMatrix: Story = {
+  render: () => {
+    const states: SliderState[] = ['default', 'hover', 'focus', 'active', 'disabled'];
+    return (
+      <div className="space-y-6 w-80">
+        <h3 className="text-sm font-medium text-foreground-muted">Slider States</h3>
+        <div className="space-y-6">
+          {states.map((state) => (
+            <div key={state} className="flex items-center gap-4">
+              <span className="text-xs font-medium text-foreground-muted uppercase w-20">{state}</span>
+              <Slider state={state} defaultValue={50} label={state} />
+            </div>
+          ))}
+        </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 space-y-6">
+          <Slider label="Volume" showValue defaultValue={75} />
+          <Slider label="Brightness" showValue defaultValue={50} />
+        </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-8">
+            <Slider label="Bass" showValue defaultValue={60} />
+            <Slider label="Treble" showValue defaultValue={40} />
+          </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-4 gap-8">
+            <Slider label="Volume" showValue defaultValue={80} />
+            <Slider label="Balance" showValue defaultValue={50} min={-50} max={50} />
+            <Slider label="Fade" showValue defaultValue={0} min={-10} max={10} />
+            <Slider label="Disabled" disabled defaultValue={30} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};