sonance-brand-mcp 1.1.4 → 1.2.2

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

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Toast, ToastProvider, useToast } from './toast';
+import { Button } from './button';
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Feedback/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Toast notifications for displaying brief messages. Includes multiple variants and a provider for managing toasts.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'error', 'warning', 'info'],
+    },
+    title: { control: 'text' },
+    description: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Notification',
+    description: 'This is a default toast notification.',
+    onClose: () => {},
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    title: 'Success',
+    description: 'Your changes have been saved successfully.',
+    onClose: () => {},
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    title: 'Error',
+    description: 'Something went wrong. Please try again.',
+    onClose: () => {},
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    title: 'Warning',
+    description: 'Your session will expire in 5 minutes.',
+    onClose: () => {},
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    title: 'Information',
+    description: 'A new version is available.',
+    onClose: () => {},
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 w-96">
+      <Toast variant="default" title="Default" description="Default notification" onClose={() => {}} />
+      <Toast variant="success" title="Success" description="Operation completed" onClose={() => {}} />
+      <Toast variant="error" title="Error" description="Something went wrong" onClose={() => {}} />
+      <Toast variant="warning" title="Warning" description="Please review" onClose={() => {}} />
+      <Toast variant="info" title="Info" description="New update available" onClose={() => {}} />
+    </div>
+  ),
+};
+
+export const WithAction: Story = {
+  args: {
+    variant: 'info',
+    title: 'New version available',
+    description: 'A new version of the app is ready to install.',
+    onClose: () => {},
+    action: (
+      <Button size="sm" variant="secondary">
+        Update now
+      </Button>
+    ),
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    title: 'File uploaded successfully',
+    onClose: () => {},
+  },
+};
+
+// Interactive demo with ToastProvider
+function ToastDemo() {
+  const { addToast } = useToast();
+
+  return (
+    <div className="space-y-4">
+      <Button
+        onClick={() =>
+          addToast({
+            title: 'Success',
+            description: 'Your changes have been saved.',
+            variant: 'success',
+          })
+        }
+      >
+        Show Success Toast
+      </Button>
+      <Button
+        variant="secondary"
+        onClick={() =>
+          addToast({
+            title: 'Error',
+            description: 'Failed to save changes.',
+            variant: 'error',
+          })
+        }
+      >
+        Show Error Toast
+      </Button>
+      <Button
+        variant="ghost"
+        onClick={() =>
+          addToast({
+            title: 'Info',
+            description: 'New message received.',
+            variant: 'info',
+          })
+        }
+      >
+        Show Info Toast
+      </Button>
+    </div>
+  );
+}
+
+export const InteractiveDemo: Story = {
+  render: () => (
+    <ToastProvider position="bottom-right">
+      <ToastDemo />
+    </ToastProvider>
+  ),
+};
+
+// 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-2">
+          <Toast variant="success" title="Success" description="Changes saved." onClose={() => {}} />
+          <Toast variant="error" title="Error" description="Failed to save." onClose={() => {}} />
+        </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">
+            <Toast variant="success" title="Success" description="Your changes have been saved." onClose={() => {}} />
+            <Toast variant="warning" title="Warning" description="Session expires soon." onClose={() => {}} />
+          </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">
+            <Toast variant="default" title="Notification" description="Default toast notification." onClose={() => {}} />
+            <Toast variant="success" title="Success" description="Operation completed." onClose={() => {}} />
+            <Toast variant="error" title="Error" description="Something went wrong." onClose={() => {}} />
+            <Toast variant="info" title="Info" description="New update available." onClose={() => {}} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Tooltip } from './tooltip';
+import { Button } from './button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Overlays/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component for displaying additional information on hover. Supports multiple positions.',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of the tooltip relative to the trigger',
+      table: {
+        defaultValue: { summary: 'top' },
+      },
+    },
+    delay: {
+      control: 'number',
+      description: 'Delay before showing tooltip (ms)',
+      table: {
+        defaultValue: { summary: '200' },
+      },
+    },
+    content: {
+      control: 'text',
+      description: 'Tooltip content',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default
+export const Default: Story = {
+  render: () => (
+    <Tooltip content="This is a tooltip">
+      <Button variant="secondary">Hover me</Button>
+    </Tooltip>
+  ),
+};
+
+// Top Position
+export const Top: Story = {
+  render: () => (
+    <Tooltip content="Tooltip on top" side="top">
+      <Button variant="secondary">Top</Button>
+    </Tooltip>
+  ),
+};
+
+// Bottom Position
+export const Bottom: Story = {
+  render: () => (
+    <Tooltip content="Tooltip on bottom" side="bottom">
+      <Button variant="secondary">Bottom</Button>
+    </Tooltip>
+  ),
+};
+
+// Left Position
+export const Left: Story = {
+  render: () => (
+    <Tooltip content="Tooltip on left" side="left">
+      <Button variant="secondary">Left</Button>
+    </Tooltip>
+  ),
+};
+
+// Right Position
+export const Right: Story = {
+  render: () => (
+    <Tooltip content="Tooltip on right" side="right">
+      <Button variant="secondary">Right</Button>
+    </Tooltip>
+  ),
+};
+
+// All Positions
+export const AllPositions: Story = {
+  render: () => (
+    <div className="flex items-center gap-8 p-8">
+      <Tooltip content="Top tooltip" side="top">
+        <Button variant="secondary">Top</Button>
+      </Tooltip>
+      <Tooltip content="Bottom tooltip" side="bottom">
+        <Button variant="secondary">Bottom</Button>
+      </Tooltip>
+      <Tooltip content="Left tooltip" side="left">
+        <Button variant="secondary">Left</Button>
+      </Tooltip>
+      <Tooltip content="Right tooltip" side="right">
+        <Button variant="secondary">Right</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+
+// With Delay
+export const WithDelay: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip content="No delay (0ms)" delay={0}>
+        <Button variant="secondary">Instant</Button>
+      </Tooltip>
+      <Tooltip content="Default delay (200ms)" delay={200}>
+        <Button variant="secondary">Default</Button>
+      </Tooltip>
+      <Tooltip content="Slow delay (500ms)" delay={500}>
+        <Button variant="secondary">Slow</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+
+// On Icon Button
+export const OnIconButton: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip content="Edit item">
+        <button className="p-2 text-foreground-muted hover:text-foreground transition-colors">
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          </svg>
+        </button>
+      </Tooltip>
+      <Tooltip content="Delete item">
+        <button className="p-2 text-foreground-muted hover:text-error transition-colors">
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      </Tooltip>
+      <Tooltip content="Share item">
+        <button className="p-2 text-foreground-muted hover:text-foreground transition-colors">
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+          </svg>
+        </button>
+      </Tooltip>
+    </div>
+  ),
+};
+
+// Long Content
+export const LongContent: Story = {
+  render: () => (
+    <Tooltip content="This is a tooltip with longer content that explains something in more detail">
+      <Button variant="secondary">Hover for details</Button>
+    </Tooltip>
+  ),
+};
+
+// On Text
+export const OnText: Story = {
+  render: () => (
+    <p className="text-foreground-secondary">
+      Hover over the{' '}
+      <Tooltip content="This is additional information">
+        <span className="text-foreground border-b border-dashed border-foreground-muted cursor-help">
+          underlined text
+        </span>
+      </Tooltip>{' '}
+      to see more information.
+    </p>
+  ),
+};
+
+// 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 flex justify-center">
+          <Tooltip content="Mobile tooltip">
+            <Button variant="secondary" size="sm">Hover me</Button>
+          </Tooltip>
+        </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 flex justify-center gap-4">
+          <Tooltip content="Top" side="top">
+            <Button variant="secondary">Top</Button>
+          </Tooltip>
+          <Tooltip content="Bottom" side="bottom">
+            <Button variant="secondary">Bottom</Button>
+          </Tooltip>
+          <Tooltip content="Left" side="left">
+            <Button variant="secondary">Left</Button>
+          </Tooltip>
+          <Tooltip content="Right" side="right">
+            <Button variant="secondary">Right</Button>
+          </Tooltip>
+        </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 flex justify-between items-center">
+          <Tooltip content="Edit item">
+            <Button variant="ghost" size="sm">Edit</Button>
+          </Tooltip>
+          <Tooltip content="This is a longer tooltip with more detailed explanation">
+            <Button variant="secondary">Hover for details</Button>
+          </Tooltip>
+          <Tooltip content="Delete permanently" side="left">
+            <Button variant="ghost" size="sm">Delete</Button>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { User, UserCard, UserListItem } from './user';
+import { Button } from './button';
+
+const meta: Meta<typeof User> = {
+  title: 'Components/Data Display/User',
+  component: User,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Components for displaying user information with avatars and metadata.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: 'John Doe',
+    description: 'Product Designer',
+  },
+};
+
+export const WithAvatar: Story = {
+  args: {
+    name: 'Jane Smith',
+    description: 'Engineering Lead',
+    avatarSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Small</p>
+        <User name="John Doe" description="Designer" size="sm" />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Medium (default)</p>
+        <User name="John Doe" description="Designer" size="md" />
+      </div>
+      <div>
+        <p className="text-xs text-foreground-muted mb-2">Large</p>
+        <User name="John Doe" description="Designer" size="lg" />
+      </div>
+    </div>
+  ),
+};
+
+export const NameOnly: Story = {
+  args: {
+    name: 'Alex Johnson',
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    name: 'Michael Brown',
+    description: 'Sales Manager',
+    avatarFallback: 'MB',
+  },
+};
+
+export const Card: Story = {
+  render: () => (
+    <div className="w-80">
+      <UserCard
+        name="Sarah Wilson"
+        description="sarah@sonance.com"
+        avatarSrc="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop"
+        actions={<Button size="sm" variant="secondary">Follow</Button>}
+      />
+    </div>
+  ),
+};
+
+export const CardVariations: Story = {
+  render: () => (
+    <div className="space-y-4 w-80">
+      <UserCard
+        name="David Lee"
+        description="Architect"
+        actions={<Button size="sm" variant="secondary">Message</Button>}
+      />
+      <UserCard
+        name="Emily Chen"
+        description="emily.chen@sonance.com"
+        avatarSrc="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
+        actions={
+          <div className="flex gap-2">
+            <Button size="sm" variant="ghost">Ignore</Button>
+            <Button size="sm">Accept</Button>
+          </div>
+        }
+      />
+    </div>
+  ),
+};
+
+export const ListItem: Story = {
+  render: () => (
+    <div className="w-80 border border-border">
+      <UserListItem
+        name="Chris Taylor"
+        description="chris@example.com"
+        onClick={() => console.log('Clicked Chris')}
+      />
+      <UserListItem
+        name="Sam Anderson"
+        description="sam@example.com"
+        selected
+        onClick={() => console.log('Clicked Sam')}
+      />
+      <UserListItem
+        name="Jordan Martinez"
+        description="jordan@example.com"
+        onClick={() => console.log('Clicked Jordan')}
+      />
+    </div>
+  ),
+};
+
+export const ListWithActions: Story = {
+  render: () => (
+    <div className="w-96 border border-border">
+      <UserListItem
+        name="Alice Brown"
+        description="Project Manager"
+        avatarSrc="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop"
+        actions={<Button size="sm" variant="ghost">Remove</Button>}
+      />
+      <UserListItem
+        name="Bob Johnson"
+        description="Developer"
+        actions={<Button size="sm" variant="ghost">Remove</Button>}
+      />
+      <UserListItem
+        name="Carol White"
+        description="Designer"
+        actions={<Button size="sm" variant="ghost">Remove</Button>}
+      />
+    </div>
+  ),
+};
+
+export const TeamList: Story = {
+  render: () => {
+    const team = [
+      { name: 'Mark Thompson', role: 'CEO', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop' },
+      { name: 'Lisa Wang', role: 'CTO', avatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=100&h=100&fit=crop' },
+      { name: 'James Miller', role: 'Head of Design', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop' },
+      { name: 'Nina Patel', role: 'Head of Engineering', avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop' },
+    ];
+
+    return (
+      <div className="w-80">
+        <h3 className="text-sm font-medium text-foreground mb-4">Leadership Team</h3>
+        <div className="space-y-3">
+          {team.map((member) => (
+            <User
+              key={member.name}
+              name={member.name}
+              description={member.role}
+              avatarSrc={member.avatar}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-4">User Component</h3>
+        <User name="Alex Johnson" description="Product Designer" />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-4">User Card</h3>
+        <UserCard
+          name="Sarah Wilson"
+          description="sarah@sonance.com"
+          actions={<Button size="sm" variant="secondary">Follow</Button>}
+          className="w-80"
+        />
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-foreground mb-4">User List Items</h3>
+        <div className="w-80 border border-border">
+          <UserListItem name="Chris Taylor" description="chris@example.com" />
+          <UserListItem name="Sam Anderson" description="sam@example.com" selected />
+          <UserListItem name="Jordan Martinez" description="jordan@example.com" />
+        </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">
+          <User name="John Doe" description="Product Designer" size="md" />
+        </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">
+            <UserCard
+              name="Sarah Wilson"
+              description="sarah@sonance.com"
+              actions={<Button size="sm" variant="secondary">Follow</Button>}
+            />
+            <UserCard
+              name="James Miller"
+              description="james@sonance.com"
+              actions={<Button size="sm" variant="secondary">Follow</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="grid grid-cols-3 gap-4">
+            <div className="border border-border">
+              <UserListItem name="Chris Taylor" description="chris@example.com" />
+              <UserListItem name="Sam Anderson" description="sam@example.com" selected />
+              <UserListItem name="Jordan Martinez" description="jordan@example.com" />
+            </div>
+            <UserCard
+              name="Emily Chen"
+              description="emily@sonance.com"
+              avatarSrc="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop"
+              actions={
+                <div className="flex gap-2">
+                  <Button size="sm" variant="ghost">Ignore</Button>
+                  <Button size="sm">Accept</Button>
+                </div>
+              }
+            />
+            <div className="space-y-3">
+              <User name="User Small" description="Designer" size="sm" />
+              <User name="User Medium" description="Developer" size="md" />
+              <User name="User Large" description="Manager" size="lg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};