community-rule/stories/asset/Avatar.stories.js

import Avatar from "../../app/components/asset/Avatar";
import {
  AVATAR_SHAPE_OPTIONS,
  AVATAR_SIZE_OPTIONS,
  AVATAR_VARIANT_OPTIONS,
} from "../../lib/propNormalization";

export default {
  title: "Components/Asset/Avatar",
  component: Avatar,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "Rounded profile image with initials or a person mark when the image is missing or fails to load. Stack with **AvatarContainer**.",
      },
    },
  },
  argTypes: {
    src: {
      control: { type: "text" },
      description: "The source URL of the avatar image",
    },
    alt: {
      control: { type: "text" },
      description: "Alt text for accessibility",
    },
    initials: {
      control: { type: "text" },
      description: "Fallback initials when the image is missing or errors",
    },
    size: {
      control: { type: "select" },
      options: [...AVATAR_SIZE_OPTIONS],
      description: "The size of the avatar",
    },
    shape: {
      control: { type: "select" },
      options: [...AVATAR_SHAPE_OPTIONS],
      description: "Circle (default) or rounded square",
    },
    variant: {
      control: { type: "select" },
      options: [...AVATAR_VARIANT_OPTIONS],
      description: "Fallback chrome: filled cream or outlined yellow",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
  },
  tags: ["autodocs"],
};

export const Default = {
  args: {
    src: "assets/marketing/avatar-1.svg",
    alt: "User Avatar",
    size: "medium",
  },
};

export const Sizes = {
  args: {
    src: "assets/marketing/avatar-1.svg",
    alt: "User Avatar",
  },
  render: (args) => (
    <div className="space-y-4">
      <div className="space-x-4">
        <Avatar {...args} size="small" />
        <Avatar {...args} size="medium" />
        <Avatar {...args} size="large" />
        <Avatar {...args} size="xlarge" />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Different size variants available for the avatar component.",
      },
    },
  },
};

export const InitialsFallback = {
  args: {
    alt: "Ada Lovelace",
    initials: "Ada Lovelace",
    size: "large",
  },
};

export const PersonMarkFallback = {
  args: {
    alt: "Community member",
    size: "large",
  },
};

export const OutlinedFallback = {
  args: {
    alt: "Ada Lovelace",
    initials: "AL",
    size: "large",
    variant: "outlined",
  },
};

export const RoundedSquare = {
  args: {
    alt: "Organization",
    initials: "CR",
    size: "large",
    shape: "rounded-square",
  },
};

export const BrokenImage = {
  args: {
    src: "assets/marketing/missing-avatar.png",
    alt: "Ada Lovelace",
    initials: "Ada Lovelace",
    size: "large",
  },
};

export const Clickable = {
  args: {
    alt: "Ada Lovelace",
    initials: "AL",
    size: "large",
    onClick: () => {},
  },
  argTypes: {
    onClick: { action: "clicked" },
  },
};

export const DifferentAvatars = {
  args: {
    size: "large",
  },
  render: (args) => (
    <div className="space-y-4">
      <div className="space-x-4">
        <Avatar {...args} src="assets/marketing/avatar-1.svg" alt="User 1" />
        <Avatar {...args} src="assets/marketing/avatar-2.svg" alt="User 2" />
        <Avatar {...args} src="assets/marketing/avatar-3.svg" alt="User 3" />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Different avatar images available in the project.",
      },
    },
  },
};

export const AllSizesWithDifferentAvatars = {
  args: {},
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="text-white font-semibold mb-3">Small Size</h3>
        <div className="space-x-4">
          <Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
          <Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
          <Avatar size="small" src="assets/marketing/avatar-3.svg" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Medium Size</h3>
        <div className="space-x-4">
          <Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
          <Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
          <Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Large Size</h3>
        <div className="space-x-4">
          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">XLarge Size</h3>
        <div className="space-x-4">
          <Avatar size="xlarge" src="assets/marketing/avatar-1.svg" alt="User 1" />
          <Avatar size="xlarge" src="assets/marketing/avatar-2.svg" alt="User 2" />
          <Avatar size="xlarge" src="assets/marketing/avatar-3.svg" alt="User 3" />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Complete overview of all avatar sizes with different user images.",
      },
    },
  },
};