@tribepad/themis 1.0.0

package/src/elements/Avatar/Avatar.stories.tsx

@@ -0,0 +1,408 @@
+/**
+ * Avatar Component Stories
+ * Storybook stories for Avatar and AvatarGroup components
+ *
+ * @see avatar-prd.md (Product Requirements)
+ * @see plan.md (Implementation Plan)
+ */
+
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Avatar, AvatarGroup } from './index';
+
+const meta = {
+  title: 'Elements/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible avatar component with image/initials fallback, status rings, and WCAG 2.2 AAA compliance (7:1 contrast ratio, 44x44px touch targets).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Image source URL',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for accessibility (required)',
+    },
+    name: {
+      control: 'text',
+      description: 'Name used to generate initials fallback',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Visual size variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    shape: {
+      control: 'select',
+      options: ['circle', 'rounded'],
+      description: 'Shape variant',
+      table: {
+        defaultValue: { summary: 'circle' },
+      },
+    },
+    status: {
+      control: 'select',
+      options: [undefined, 'online', 'offline', 'busy', 'away'],
+      description: 'Status ring indicator',
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Example image URL
+const EXAMPLE_IMAGE = 'https://i.pravatar.cc/150?u=1';
+
+// ============================================================================
+// Basic Avatar Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    alt: 'Jane Doe',
+    name: 'Jane Doe',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    src: EXAMPLE_IMAGE,
+    alt: 'Jane Doe',
+  },
+};
+
+export const WithInitials: Story = {
+  args: {
+    alt: 'Jane Doe',
+    name: 'Jane Doe',
+  },
+};
+
+export const SingleName: Story = {
+  args: {
+    alt: 'Jane',
+    name: 'Jane',
+  },
+};
+
+// ============================================================================
+// Size Variants
+// ============================================================================
+
+export const SizeSmall: Story = {
+  args: {
+    alt: 'Small Avatar',
+    name: 'Small Avatar',
+    size: 'sm',
+  },
+};
+
+export const SizeDefault: Story = {
+  args: {
+    alt: 'Default Avatar',
+    name: 'Default Avatar',
+    size: 'default',
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    alt: 'Large Avatar',
+    name: 'Large Avatar',
+    size: 'lg',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar alt="Small" name="Small SM" size="sm" />
+      <Avatar alt="Default" name="Default MD" size="default" />
+      <Avatar alt="Large" name="Large LG" size="lg" />
+    </div>
+  ),
+};
+
+// ============================================================================
+// Shape Variants
+// ============================================================================
+
+export const ShapeCircle: Story = {
+  args: {
+    alt: 'Circle Avatar',
+    name: 'Circle Avatar',
+    shape: 'circle',
+  },
+};
+
+export const ShapeRounded: Story = {
+  args: {
+    alt: 'Rounded Avatar',
+    name: 'Rounded Avatar',
+    shape: 'rounded',
+  },
+};
+
+export const AllShapes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar alt="Circle" name="Circle Avatar" shape="circle" />
+      <Avatar alt="Rounded" name="Rounded Avatar" shape="rounded" />
+    </div>
+  ),
+};
+
+// ============================================================================
+// Status Indicators
+// ============================================================================
+
+export const StatusOnline: Story = {
+  args: {
+    alt: 'Online User',
+    name: 'Online User',
+    status: 'online',
+  },
+};
+
+export const StatusOffline: Story = {
+  args: {
+    alt: 'Offline User',
+    name: 'Offline User',
+    status: 'offline',
+  },
+};
+
+export const StatusBusy: Story = {
+  args: {
+    alt: 'Busy User',
+    name: 'Busy User',
+    status: 'busy',
+  },
+};
+
+export const StatusAway: Story = {
+  args: {
+    alt: 'Away User',
+    name: 'Away User',
+    status: 'away',
+  },
+};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar alt="Online" name="Online User" status="online" />
+      <Avatar alt="Offline" name="Offline User" status="offline" />
+      <Avatar alt="Busy" name="Busy User" status="busy" />
+      <Avatar alt="Away" name="Away User" status="away" />
+    </div>
+  ),
+};
+
+// ============================================================================
+// Actionable Avatar
+// ============================================================================
+
+export const Actionable: Story = {
+  args: {
+    alt: 'Clickable Avatar',
+    name: 'Clickable Avatar',
+    onPress: () => console.log('Avatar clicked'),
+  },
+};
+
+export const ActionableWithStatus: Story = {
+  args: {
+    alt: 'Jane Doe',
+    name: 'Jane Doe',
+    status: 'online',
+    onPress: () => console.log('Avatar clicked'),
+  },
+};
+
+export const ActionableWithImage: Story = {
+  args: {
+    src: EXAMPLE_IMAGE,
+    alt: 'Jane Doe',
+    onPress: () => console.log('Avatar clicked'),
+  },
+};
+
+// ============================================================================
+// Loading State
+// ============================================================================
+
+export const LoadingState: Story = {
+  name: 'Loading (Skeleton)',
+  args: {
+    src: 'https://slow-loading-image.example.com/image.jpg',
+    alt: 'Loading Avatar',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows skeleton shimmer while image is loading. Falls back to initials on error.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// AvatarGroup Stories
+// ============================================================================
+
+export const Group: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar alt="Jane Doe" name="Jane Doe" />
+      <Avatar alt="Bob Smith" name="Bob Smith" />
+      <Avatar alt="Alice Brown" name="Alice Brown" />
+    </AvatarGroup>
+  ),
+};
+
+export const GroupWithImages: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar src="https://i.pravatar.cc/150?u=1" alt="Jane Doe" />
+      <Avatar src="https://i.pravatar.cc/150?u=2" alt="Bob Smith" />
+      <Avatar src="https://i.pravatar.cc/150?u=3" alt="Alice Brown" />
+    </AvatarGroup>
+  ),
+};
+
+export const GroupWithOverflow: Story = {
+  render: () => (
+    <AvatarGroup max={3}>
+      <Avatar alt="Jane Doe" name="Jane Doe" />
+      <Avatar alt="Bob Smith" name="Bob Smith" />
+      <Avatar alt="Alice Brown" name="Alice Brown" />
+      <Avatar alt="Charlie Wilson" name="Charlie Wilson" />
+      <Avatar alt="Eve Davis" name="Eve Davis" />
+    </AvatarGroup>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows +2 overflow indicator when max=3 and there are 5 avatars.',
+      },
+    },
+  },
+};
+
+export const GroupActionable: Story = {
+  render: () => (
+    <AvatarGroup onPress={() => console.log('Group clicked')}>
+      <Avatar alt="Jane Doe" name="Jane Doe" />
+      <Avatar alt="Bob Smith" name="Bob Smith" />
+      <Avatar alt="Alice Brown" name="Alice Brown" />
+    </AvatarGroup>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Entire group is clickable. Individual avatars cannot have onPress.',
+      },
+    },
+  },
+};
+
+export const GroupSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-[var(--muted-foreground)]">sm:</span>
+        <AvatarGroup size="sm">
+          <Avatar alt="Jane" name="JD" />
+          <Avatar alt="Bob" name="BS" />
+          <Avatar alt="Alice" name="AB" />
+        </AvatarGroup>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-[var(--muted-foreground)]">default:</span>
+        <AvatarGroup size="default">
+          <Avatar alt="Jane" name="JD" />
+          <Avatar alt="Bob" name="BS" />
+          <Avatar alt="Alice" name="AB" />
+        </AvatarGroup>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="w-20 text-sm text-[var(--muted-foreground)]">lg:</span>
+        <AvatarGroup size="lg">
+          <Avatar alt="Jane" name="JD" />
+          <Avatar alt="Bob" name="BS" />
+          <Avatar alt="Alice" name="AB" />
+        </AvatarGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Group size affects overlap: sm=8px, default=12px, lg=16px.',
+      },
+    },
+  },
+};
+
+export const GroupRounded: Story = {
+  render: () => (
+    <AvatarGroup shape="rounded">
+      <Avatar alt="Jane Doe" name="Jane Doe" />
+      <Avatar alt="Bob Smith" name="Bob Smith" />
+      <Avatar alt="Alice Brown" name="Alice Brown" />
+    </AvatarGroup>
+  ),
+};
+
+// ============================================================================
+// Accessibility Demo
+// ============================================================================
+
+export const AccessibilityDemo: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h3 className="mb-2 text-sm font-medium">44x44px Touch Targets</h3>
+        <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+          All sizes maintain 44x44px minimum touch target for WCAG 2.2 AAA compliance.
+        </p>
+        <div className="flex items-center gap-4">
+          <Avatar alt="Small" name="SM" size="sm" onPress={() => console.log('Small avatar clicked')} />
+          <Avatar
+            alt="Default"
+            name="MD"
+            size="default"
+            onPress={() => console.log('Default avatar clicked')}
+          />
+          <Avatar alt="Large" name="LG" size="lg" onPress={() => console.log('Large avatar clicked')} />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-2 text-sm font-medium">Status Announced to Screen Readers</h3>
+        <p className="mb-4 text-xs text-[var(--muted-foreground)]">
+          Actionable avatars announce status in aria-label: &quot;Jane Doe, online&quot;
+        </p>
+        <Avatar
+          alt="Jane Doe"
+          name="Jane Doe"
+          status="online"
+          onPress={() => console.log('Avatar clicked')}
+        />
+      </div>
+    </div>
+  ),
+};