web/packages/design-system/lib/components/Avatar/Avatar.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { Avatar } from "."
import { config } from "./variants"

const meta: Meta<typeof Avatar> = {
  title: "Core Components/Avatar",
  component: Avatar,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    size: {
      control: { type: "select" },
      options: Object.keys(config.variants.size),
    },
  },
}

export default meta

type Story = StoryObj<typeof Avatar>
const imageFile = "./img/profile-picture.png" as const
export const WithImage: Story = {
  args: {
    src: imageFile,
    alt: "Profile photo",
    size: "md",
  },
}

export const WithInitials: Story = {
  args: {
    initials: "FR",
    size: "md",
  },
}

export const Fallback: Story = {
  args: {
    size: "md",
  },
}

export const SmallSize: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Avatar src={imageFile} alt="Profile photo" size="sm" />
      <Avatar initials="FR" size="sm" />
      <Avatar size="sm" />
    </div>
  ),
}

export const MediumSize: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Avatar src={imageFile} alt="Profile photo" size="md" />
      <Avatar initials="FR" size="md" />
      <Avatar size="md" />
    </div>
  ),
}

export const LargeSize: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <Avatar src={imageFile} alt="Profile photo" size="lg" />
      <Avatar initials="FR" size="lg" />
      <Avatar size="lg" />
    </div>
  ),
}

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "8px",
          alignItems: "center",
        }}
      >
        <Avatar initials="FR" size="sm" />
        <span style={{ fontSize: "12px" }}>Small (20px)</span>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "8px",
          alignItems: "center",
        }}
      >
        <Avatar initials="FR" size="md" />
        <span style={{ fontSize: "12px" }}>Medium (32px)</span>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "8px",
          alignItems: "center",
        }}
      >
        <Avatar initials="FR" size="lg" />
        <span style={{ fontSize: "12px" }}>Large (55px)</span>
      </div>
    </div>
  ),
}