sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,334 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { addDays, addMonths } from 'date-fns';
+import { RangeCalendar } from './range-calendar';
+
+interface DateRange {
+  start: Date | undefined;
+  end: Date | undefined;
+}
+
+const meta: Meta<typeof RangeCalendar> = {
+  title: 'Components/Forms/RangeCalendar',
+  component: RangeCalendar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A calendar component for selecting date ranges. Displays two months side-by-side by default. Supports hover preview, min/max dates, and disabled dates.',
+      },
+    },
+  },
+  argTypes: {
+    numberOfMonths: {
+      control: { type: 'number', min: 1, max: 3 },
+      description: 'Number of months to display',
+      table: {
+        defaultValue: { summary: '2' },
+      },
+    },
+  },
+};
+
+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="space-y-4">
+        <RangeCalendar
+          value={range}
+          onValueChange={setRange}
+        />
+        <div className="text-sm text-foreground-muted">
+          {range.start && <span>Start: {range.start.toLocaleDateString()}</span>}
+          {range.start && range.end && <span> | </span>}
+          {range.end && <span>End: {range.end.toLocaleDateString()}</span>}
+        </div>
+      </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 (
+      <RangeCalendar
+        value={range}
+        onValueChange={setRange}
+      />
+    );
+  },
+};
+
+// Single Month
+export const SingleMonth: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    return (
+      <RangeCalendar
+        value={range}
+        onValueChange={setRange}
+        numberOfMonths={1}
+      />
+    );
+  },
+};
+
+// Three Months
+export const ThreeMonths: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    return (
+      <RangeCalendar
+        value={range}
+        onValueChange={setRange}
+        numberOfMonths={3}
+      />
+    );
+  },
+};
+
+// 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="space-y-4">
+        <p className="text-sm text-foreground-muted">
+          Selection limited to next 60 days
+        </p>
+        <RangeCalendar
+          value={range}
+          onValueChange={setRange}
+          minDate={today}
+          maxDate={addDays(today, 60)}
+        />
+      </div>
+    );
+  },
+};
+
+// With Disabled Dates (Weekends)
+export const DisabledWeekends: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: 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 (business days only)
+        </p>
+        <RangeCalendar
+          value={range}
+          onValueChange={setRange}
+          disabled={isWeekend}
+        />
+      </div>
+    );
+  },
+};
+
+// Hotel Booking Example
+export const HotelBookingExample: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange>({ start: undefined, end: undefined });
+    const today = new Date();
+
+    // Simulate blocked dates (already booked)
+    const blockedRanges = [
+      { start: addDays(today, 5), end: addDays(today, 8) },
+      { start: addDays(today, 15), end: addDays(today, 18) },
+    ];
+
+    const isBlocked = (date: Date) => {
+      return blockedRanges.some(
+        blocked =>
+          date >= blocked.start && date <= blocked.end
+      );
+    };
+
+    const nights = range.start && range.end
+      ? Math.ceil((range.end.getTime() - range.start.getTime()) / (1000 * 60 * 60 * 24))
+      : 0;
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-4 text-sm">
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-4 bg-primary rounded-sm" />
+            <span>Selected</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-4 bg-primary/20 rounded-sm" />
+            <span>In Range</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-4 bg-secondary text-foreground-subtle text-xs flex items-center justify-center">x</div>
+            <span>Unavailable</span>
+          </div>
+        </div>
+        <RangeCalendar
+          value={range}
+          onValueChange={setRange}
+          minDate={today}
+          maxDate={addMonths(today, 6)}
+          disabled={isBlocked}
+        />
+        {nights > 0 && (
+          <div className="p-4 border border-border rounded-sm">
+            <div className="flex justify-between">
+              <span className="text-foreground-muted">Duration</span>
+              <span className="font-medium">{nights} night{nights !== 1 ? 's' : ''}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// Report Date Range Example
+export const ReportDateRangeExample: 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: 'This month', start: new Date(today.getFullYear(), today.getMonth(), 1), end: today },
+      { label: 'Last month', start: new Date(today.getFullYear(), today.getMonth() - 1, 1), end: new Date(today.getFullYear(), today.getMonth(), 0) },
+    ];
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {presets.map(preset => (
+            <button
+              key={preset.label}
+              onClick={() => setRange({ start: preset.start, end: preset.end })}
+              className="px-3 py-1 text-sm border border-border rounded-sm hover:bg-secondary-hover transition-colors"
+            >
+              {preset.label}
+            </button>
+          ))}
+          <button
+            onClick={() => setRange({ start: undefined, end: undefined })}
+            className="px-3 py-1 text-sm border border-border rounded-sm hover:bg-secondary-hover transition-colors text-foreground-muted"
+          >
+            Clear
+          </button>
+        </div>
+        <RangeCalendar
+          value={range}
+          onValueChange={setRange}
+          maxDate={today}
+        />
+        {range.start && range.end && (
+          <p className="text-sm">
+            Selected: {range.start.toLocaleDateString()} - {range.end.toLocaleDateString()}
+          </p>
+        )}
+      </div>
+    );
+  },
+};
+
+// All Configurations
+export const AllConfigurations: Story = {
+  render: () => {
+    const [range1, setRange1] = useState<DateRange>({ start: undefined, end: undefined });
+    const [range2, setRange2] = useState<DateRange>({ start: undefined, end: undefined });
+    const [range3, setRange3] = useState<DateRange>({ start: undefined, end: undefined });
+
+    return (
+      <div className="space-y-8">
+        <div>
+          <h4 className="text-sm font-medium mb-2">Single Month</h4>
+          <RangeCalendar
+            value={range1}
+            onValueChange={setRange1}
+            numberOfMonths={1}
+          />
+        </div>
+        <div>
+          <h4 className="text-sm font-medium mb-2">Two Months (Default)</h4>
+          <RangeCalendar
+            value={range2}
+            onValueChange={setRange2}
+            numberOfMonths={2}
+          />
+        </div>
+        <div>
+          <h4 className="text-sm font-medium mb-2">Three Months</h4>
+          <RangeCalendar
+            value={range3}
+            onValueChange={setRange3}
+            numberOfMonths={3}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => {
+    const [mobile, setMobile] = useState<DateRange>({ start: undefined, end: undefined });
+    const [tablet, setTablet] = useState<DateRange>({ start: undefined, end: undefined });
+    const [desktop, setDesktop] = useState<DateRange>({ start: undefined, end: undefined });
+
+    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 overflow-x-auto">
+            <RangeCalendar
+              value={mobile}
+              onValueChange={setMobile}
+              numberOfMonths={1}
+            />
+          </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">
+            <RangeCalendar
+              value={tablet}
+              onValueChange={setTablet}
+              numberOfMonths={2}
+            />
+          </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">
+            <RangeCalendar
+              value={desktop}
+              onValueChange={setDesktop}
+              numberOfMonths={3}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/dist/assets/components/scroll-shadow.stories.tsx

@@ -0,0 +1,335 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ScrollShadow } from './scroll-shadow';
+
+const meta: Meta<typeof ScrollShadow> = {
+  title: 'Components/Utilities/ScrollShadow',
+  component: ScrollShadow,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A container that shows gradient shadows at scroll boundaries to indicate more content. Useful for scroll containers with fixed heights.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal', 'both'],
+      description: 'Scroll direction to show shadows for',
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the shadow gradient',
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    hideScrollbar: {
+      control: 'boolean',
+      description: 'Hide the scrollbar',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleContent = Array.from({ length: 20 }, (_, i) => (
+  <div key={i} className="p-4 border-b border-border">
+    <h4 className="font-medium">Item {i + 1}</h4>
+    <p className="text-sm text-foreground-muted">
+      This is sample content for item {i + 1}. Scroll to see the shadow effect.
+    </p>
+  </div>
+));
+
+const horizontalItems = Array.from({ length: 15 }, (_, i) => (
+  <div
+    key={i}
+    className="flex-shrink-0 w-48 h-32 p-4 border border-border rounded-sm bg-card"
+  >
+    <h4 className="font-medium">Card {i + 1}</h4>
+    <p className="text-sm text-foreground-muted">Scroll horizontally</p>
+  </div>
+));
+
+// Vertical (Default)
+export const Vertical: Story = {
+  render: () => (
+    <ScrollShadow
+      orientation="vertical"
+      className="h-64 w-80 border border-border rounded-sm"
+    >
+      {sampleContent}
+    </ScrollShadow>
+  ),
+};
+
+// Horizontal
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollShadow
+      orientation="horizontal"
+      className="w-96 border border-border rounded-sm"
+    >
+      <div className="flex gap-4 p-4">
+        {horizontalItems}
+      </div>
+    </ScrollShadow>
+  ),
+};
+
+// Both Directions
+export const Both: Story = {
+  render: () => (
+    <ScrollShadow
+      orientation="both"
+      className="h-64 w-80 border border-border rounded-sm"
+    >
+      <div className="w-[600px]">
+        {sampleContent}
+        <div className="p-4 text-sm text-foreground-muted">
+          This content extends beyond the container width to demonstrate horizontal scrolling.
+        </div>
+      </div>
+    </ScrollShadow>
+  ),
+};
+
+// Small Shadow
+export const SmallShadow: Story = {
+  render: () => (
+    <ScrollShadow
+      size="sm"
+      className="h-64 w-80 border border-border rounded-sm"
+    >
+      {sampleContent}
+    </ScrollShadow>
+  ),
+};
+
+// Medium Shadow (Default)
+export const MediumShadow: Story = {
+  render: () => (
+    <ScrollShadow
+      size="md"
+      className="h-64 w-80 border border-border rounded-sm"
+    >
+      {sampleContent}
+    </ScrollShadow>
+  ),
+};
+
+// Large Shadow
+export const LargeShadow: Story = {
+  render: () => (
+    <ScrollShadow
+      size="lg"
+      className="h-64 w-80 border border-border rounded-sm"
+    >
+      {sampleContent}
+    </ScrollShadow>
+  ),
+};
+
+// Hidden Scrollbar
+export const HiddenScrollbar: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-foreground-muted">
+        Scrollbar is hidden but scrolling still works
+      </p>
+      <ScrollShadow
+        hideScrollbar
+        className="h-64 w-80 border border-border rounded-sm"
+      >
+        {sampleContent}
+      </ScrollShadow>
+    </div>
+  ),
+};
+
+// Product List Example
+export const ProductListExample: Story = {
+  render: () => {
+    const products = [
+      { name: 'In-Wall Speaker VP66', price: '$599', category: 'Architectural' },
+      { name: 'Soundbar SB500', price: '$799', category: 'Home Theater' },
+      { name: 'Outdoor Speaker LS6', price: '$449', category: 'Landscape' },
+      { name: 'Subwoofer SUB10', price: '$899', category: 'Performance' },
+      { name: 'In-Ceiling Speaker VP68', price: '$649', category: 'Architectural' },
+      { name: 'Garden Speaker GS6', price: '$399', category: 'Landscape' },
+      { name: 'Invisible Speaker IS4', price: '$1,199', category: 'Invisible' },
+      { name: 'Amplifier SA500', price: '$1,499', category: 'Electronics' },
+      { name: 'In-Wall Speaker VP86', price: '$799', category: 'Architectural' },
+      { name: 'Outdoor Rock Speaker RS6', price: '$549', category: 'Landscape' },
+    ];
+
+    return (
+      <div className="w-80 border border-border rounded-sm">
+        <div className="p-4 border-b border-border">
+          <h3 className="font-medium">Products ({products.length})</h3>
+        </div>
+        <ScrollShadow className="h-64">
+          {products.map((product, i) => (
+            <div key={i} className="p-4 border-b border-border hover:bg-secondary-hover transition-colors cursor-pointer">
+              <div className="flex justify-between items-start">
+                <div>
+                  <h4 className="font-medium text-sm">{product.name}</h4>
+                  <p className="text-xs text-foreground-muted">{product.category}</p>
+                </div>
+                <span className="font-medium">{product.price}</span>
+              </div>
+            </div>
+          ))}
+        </ScrollShadow>
+      </div>
+    );
+  },
+};
+
+// Image Gallery Example
+export const ImageGalleryExample: Story = {
+  render: () => {
+    const images = Array.from({ length: 10 }, (_, i) => ({
+      id: i,
+      title: `Image ${i + 1}`,
+    }));
+
+    return (
+      <div className="space-y-2">
+        <h3 className="font-medium">Gallery</h3>
+        <ScrollShadow
+          orientation="horizontal"
+          hideScrollbar
+          className="w-full"
+        >
+          <div className="flex gap-3 p-1">
+            {images.map((image) => (
+              <div
+                key={image.id}
+                className="flex-shrink-0 w-32 h-32 bg-secondary rounded-sm flex items-center justify-center text-foreground-muted text-sm"
+              >
+                {image.title}
+              </div>
+            ))}
+          </div>
+        </ScrollShadow>
+      </div>
+    );
+  },
+};
+
+// Dropdown Menu Example
+export const DropdownMenuExample: Story = {
+  render: () => {
+    const menuItems = [
+      'Dashboard',
+      'Products',
+      'Orders',
+      'Customers',
+      'Analytics',
+      'Reports',
+      'Settings',
+      'Help Center',
+      'Documentation',
+      'API Reference',
+      'System Status',
+      'Logout',
+    ];
+
+    return (
+      <div className="w-48 border border-border rounded-sm shadow-lg bg-card">
+        <ScrollShadow className="max-h-64">
+          {menuItems.map((item, i) => (
+            <button
+              key={i}
+              className="w-full px-4 py-2 text-left text-sm hover:bg-secondary-hover transition-colors"
+            >
+              {item}
+            </button>
+          ))}
+        </ScrollShadow>
+      </div>
+    );
+  },
+};
+
+// All Sizes Comparison
+export const AllSizesComparison: Story = {
+  render: () => (
+    <div className="flex gap-8">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Small</p>
+        <ScrollShadow size="sm" className="h-48 w-64 border border-border rounded-sm">
+          {sampleContent.slice(0, 10)}
+        </ScrollShadow>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Medium</p>
+        <ScrollShadow size="md" className="h-48 w-64 border border-border rounded-sm">
+          {sampleContent.slice(0, 10)}
+        </ScrollShadow>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Large</p>
+        <ScrollShadow size="lg" className="h-48 w-64 border border-border rounded-sm">
+          {sampleContent.slice(0, 10)}
+        </ScrollShadow>
+      </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">
+          <ScrollShadow className="h-48 border border-border rounded-sm">
+            {sampleContent.slice(0, 8)}
+          </ScrollShadow>
+        </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">
+          <ScrollShadow
+            orientation="horizontal"
+            className="border border-border rounded-sm"
+          >
+            <div className="flex gap-4 p-4">
+              {horizontalItems.slice(0, 8)}
+            </div>
+          </ScrollShadow>
+        </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">
+            <ScrollShadow size="sm" className="h-48 border border-border rounded-sm">
+              {sampleContent.slice(0, 8)}
+            </ScrollShadow>
+            <ScrollShadow size="md" className="h-48 border border-border rounded-sm">
+              {sampleContent.slice(0, 8)}
+            </ScrollShadow>
+            <ScrollShadow size="lg" className="h-48 border border-border rounded-sm">
+              {sampleContent.slice(0, 8)}
+            </ScrollShadow>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};