@altruist03/ui 0.1.0 → 0.2.0

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PersonIcon from "@mui/icons-material/Person";
+import { Avatar } from "./Avatar";
+import type { AvatarProps } from "./Avatar.types";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Design System/Avatar",
+  component: Avatar,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "24px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    size: "md",
+    shape: "circle",
+    variant: "text",
+    initials: "AB",
+    alt: "",
+  } as AvatarProps,
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
+    },
+    shape: {
+      control: { type: "radio" },
+      options: ["circle", "square"],
+    },
+    variant: {
+      control: { type: "radio" },
+      options: ["text", "icon", "image"],
+    },
+    initials: {
+      control: { type: "text" },
+    },
+    src: {
+      control: { type: "text" },
+    },
+    alt: {
+      control: { type: "text" },
+    },
+    iconType: {
+      control: { type: "radio" },
+      options: ["male", "female", "male-covered", "female-covered", "placeholder"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Playground: Story = {
+  args: {
+    size: "md",
+    shape: "circle",
+    variant: "text",
+    initials: "AB",
+  },
+};
+
+const SIZES = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"] as const;
+
+/** Grid matching Figma (node 43-19436): 7 columns = 7 sizes, rows = variants. Compare with Figma side-by-side. */
+const SIZE_LABELS: Record<(typeof SIZES)[number], string> = {
+  xs: "20px",
+  sm: "28px",
+  md: "36px",
+  lg: "44px",
+  xl: "60px",
+  xxl: "76px",
+  xxxl: "116px",
+};
+const gridRowStyle = {
+  display: "grid" as const,
+  gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+  gap: 16,
+  alignItems: "center",
+  justifyItems: "center",
+  marginBottom: 16,
+};
+
+export const FigmaGrid: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Layout matches Figma Avatar grid (7 sizes × variants). Sizes: xs=20px, sm=28px, md=36px, lg=44px, xl=60px, xxl=76px, xxxl=116px.",
+      },
+    },
+  },
+  render: () => (
+    <div style={{ padding: "8px 0" }}>
+      {/* Size labels row */}
+      <div style={{ ...gridRowStyle, marginBottom: 8, fontSize: 11, color: "#666" }}>
+        {SIZES.map((s) => (
+          <span key={s}>
+            {s} ({SIZE_LABELS[s]})
+          </span>
+        ))}
+      </div>
+      {/* Row 1: Text, circle */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar key={s} size={s} shape="circle" variant="text" initials="AB" />
+        ))}
+      </div>
+      {/* Row 2 & 3: Icon (male/female) circle – use same icon for both for now */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar
+            key={s}
+            size={s}
+            shape="circle"
+            variant="icon"
+            icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+          />
+        ))}
+      </div>
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar
+            key={s}
+            size={s}
+            shape="circle"
+            variant="icon"
+            icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+          />
+        ))}
+      </div>
+      {/* Row 4: Image placeholder, circle */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar key={s} size={s} shape="circle" variant="image" />
+        ))}
+      </div>
+      {/* Row 5: Text, square */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar key={s} size={s} shape="square" variant="text" initials="AB" />
+        ))}
+      </div>
+      {/* Row 6 & 7: Icon, square */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar
+            key={s}
+            size={s}
+            shape="square"
+            variant="icon"
+            icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+          />
+        ))}
+      </div>
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar
+            key={s}
+            size={s}
+            shape="square"
+            variant="icon"
+            icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+          />
+        ))}
+      </div>
+      {/* Row 8: Image placeholder, square */}
+      <div style={gridRowStyle}>
+        {SIZES.map((s) => (
+          <Avatar key={s} size={s} shape="square" variant="image" />
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {/* Text avatars – circular – all sizes */}
+      <div>
+        <h3 style={{ marginBottom: 12, fontSize: 14, fontWeight: 600 }}>
+          Text (circle)
+        </h3>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar key={s} size={s} shape="circle" variant="text" initials="AB" />
+          ))}
+        </div>
+      </div>
+
+      {/* Text avatars – square – all sizes */}
+      <div>
+        <h3 style={{ marginBottom: 12, fontSize: 14, fontWeight: 600 }}>
+          Text (square)
+        </h3>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar key={s} size={s} shape="square" variant="text" initials="AB" />
+          ))}
+        </div>
+      </div>
+
+      {/* Icon avatars – circular – all sizes */}
+      <div>
+        <h3 style={{ marginBottom: 12, fontSize: 14, fontWeight: 600 }}>
+          Icon (circle)
+        </h3>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar
+              key={s}
+              size={s}
+              shape="circle"
+              variant="icon"
+              icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Icon avatars – square – all sizes */}
+      <div>
+        <h3 style={{ marginBottom: 12, fontSize: 14, fontWeight: 600 }}>
+          Icon (square)
+        </h3>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar
+              key={s}
+              size={s}
+              shape="square"
+              variant="icon"
+              icon={<PersonIcon style={{ width: "100%", height: "100%" }} />}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Image placeholder – circular & square – all sizes */}
+      <div>
+        <h3 style={{ marginBottom: 12, fontSize: 14, fontWeight: 600 }}>
+          Image placeholder (no src)
+        </h3>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar key={s} size={s} shape="circle" variant="image" />
+          ))}
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            flexWrap: "wrap",
+            marginTop: 12,
+          }}
+        >
+          {SIZES.map((s) => (
+            <Avatar key={s} size={s} shape="square" variant="image" />
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useCallback } from "react";
+import { AVATAR_TOKENS } from "../../tokens";
+import type { AvatarSize } from "../../tokens";
+import type { AvatarProps } from "./Avatar.types";
+
+function toPxString(value: string | number): string {
+  if (typeof value === "number") return `${value}px`;
+  const s = String(value).trim();
+  if (/^\d+$/.test(s)) return `${s}px`;
+  return s.endsWith("px") ? s : s ? `${s}px` : "16px";
+}
+
+function parsePx(value: string | number, fallback: number): number {
+  if (typeof value === "number") return value;
+  const match = String(value).match(/^(-?\d+)/);
+  return match ? parseInt(match[1], 10) : fallback;
+}
+
+const AVATAR_SIZE_KEYS: Record<AvatarSize, string> = {
+  xs: "Xs",
+  sm: "Sm",
+  md: "Md",
+  lg: "Lg",
+  xl: "Xl",
+  xxl: "Xxl",
+  xxxl: "Xxxl",
+};
+
+function getSizeTokenKey(size: AvatarSize): string {
+  return AVATAR_SIZE_KEYS[size] ?? "Md";
+}
+
+/** Default placeholder SVG (wave/mountain shape) for image fallback */
+function PlaceholderSvg({
+  color,
+  backgroundColor,
+  sizePx,
+}: {
+  color: string;
+  backgroundColor: string;
+  sizePx: number;
+}) {
+  const s = sizePx;
+  return (
+    <svg
+      width={s}
+      height={s}
+      viewBox={`0 0 ${s} ${s}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <rect width={s} height={s} fill={backgroundColor} />
+      <path
+        d={`M 0 ${s * 0.6} Q ${s * 0.25} ${s * 0.35} ${s * 0.5} ${s * 0.55} T ${s} ${s * 0.5} V ${s} H 0 Z`}
+        fill={color}
+      />
+      <circle cx={s * 0.25} cy={s * 0.3} r={s * 0.05} fill={color} />
+    </svg>
+  );
+}
+
+/** Simple person silhouette for icon variant when no custom icon */
+function PersonIconSvg({
+  color,
+  sizePx,
+}: {
+  color: string;
+  sizePx: number;
+}) {
+  const s = sizePx;
+  const stroke = Math.max(1, Math.round(sizePx / 24));
+  return (
+    <svg
+      width={s}
+      height={s}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <circle cx="12" cy="8" r="3" />
+      <path d="M5 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2" />
+    </svg>
+  );
+}
+
+export const Avatar = ({
+  size = "md",
+  shape = "circle",
+  variant = "text",
+  initials = "AB",
+  src = null,
+  alt = "",
+  iconType = "male",
+  icon,
+  style,
+  ...rest
+}: AvatarProps) => {
+  const [imageError, setImageError] = useState(false);
+  const t = AVATAR_TOKENS;
+
+  const sizeKey = getSizeTokenKey(size as AvatarSize);
+  const sizeVal = toPxString(
+    (t[`size${sizeKey}` as keyof typeof t] as string) ?? t.sizeMd
+  );
+  const fontSizeVal = toPxString(
+    (t[`fontSize${sizeKey}` as keyof typeof t] as string) ?? t.fontSizeMd
+  );
+  const iconSizeVal = toPxString(
+    (t[`iconSize${sizeKey}` as keyof typeof t] as string) ?? t.iconSizeMd
+  );
+
+  const borderRadius =
+    shape === "circle" ? t.shapeCircle : t.shapeSquare;
+  const sizePx = parsePx(sizeVal, 28);
+  const iconSizePx = parsePx(iconSizeVal, 16);
+
+  const showImage = variant === "image" && src && !imageError;
+  const showPlaceholder =
+    variant === "image" && (!src || imageError);
+  const handleImageError = useCallback(() => setImageError(true), []);
+
+  const baseStyle: React.CSSProperties = {
+    width: sizeVal,
+    height: sizeVal,
+    minWidth: sizeVal,
+    minHeight: sizeVal,
+    borderRadius,
+    backgroundColor: t.background,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    ...style,
+  };
+
+  return (
+    <div
+      role="img"
+      aria-label={alt || (variant === "text" ? initials : undefined)}
+      style={baseStyle}
+      {...rest}
+    >
+      {variant === "text" && (
+        <span
+          style={{
+            color: t.textColor,
+            fontSize: fontSizeVal,
+            fontWeight: 600,
+            lineHeight: 1,
+            userSelect: "none",
+          }}
+        >
+          {initials.slice(0, 2).toUpperCase()}
+        </span>
+      )}
+
+      {variant === "icon" && (
+        <>
+          {icon !== undefined && icon !== null ? (
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: iconSizeVal,
+                height: iconSizeVal,
+                color: t.iconColor,
+              }}
+            >
+              {icon}
+            </span>
+          ) : (
+            <PersonIconSvg
+              color={t.iconColor}
+              sizePx={iconSizePx}
+            />
+          )}
+        </>
+      )}
+
+      {variant === "image" && showImage && (
+        <img
+          src={src!}
+          alt={alt}
+          onError={handleImageError}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+        />
+      )}
+
+      {variant === "image" && showPlaceholder && (
+        <PlaceholderSvg
+          color={t.placeholderShape}
+          backgroundColor={t.placeholderBackground}
+          sizePx={sizePx}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,33 @@
+import type { AvatarSize } from "../../tokens";
+
+export type AvatarShape = "circle" | "square";
+
+export type AvatarVariant = "text" | "icon" | "image";
+
+/** Built-in icon types for icon variant when no custom icon is provided */
+export type AvatarIconType =
+  | "male"
+  | "female"
+  | "male-covered"
+  | "female-covered"
+  | "placeholder";
+
+export interface AvatarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+  /** Size of the avatar */
+  size?: AvatarSize;
+  /** Shape: circle (default) or square */
+  shape?: AvatarShape;
+  /** Content variant: text (initials), icon, or image */
+  variant?: AvatarVariant;
+  /** Initials for variant="text" (e.g. "AB") */
+  initials?: string;
+  /** Image URL for variant="image". Falls back to placeholder on load error. */
+  src?: string | null;
+  /** Alt text for variant="image" */
+  alt?: string;
+  /** Built-in icon type for variant="icon" when icon prop is not provided */
+  iconType?: AvatarIconType;
+  /** Custom icon element for variant="icon". Overrides iconType when provided. */
+  icon?: React.ReactNode;
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+import type { BadgeProps } from './Badge.types';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Design System/Badge',
+  component: Badge,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: '24px',
+          maxWidth: '420px',
+          backgroundColor: '#E5E9EB',
+          borderRadius: '8px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: 'Verified',
+    variant: 'default',
+    size: 'md',
+    disabled: false,
+    color: 'grey',
+  } as BadgeProps,
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['default', 'circle'],
+    },
+    color: {
+      control: { type: 'radio' },
+      options: ['grey', 'white'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Verified',
+    size: 'md',
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      {/* Default / Non-removable */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="xs">Extra small</Badge>
+        <Badge size="sm">Small</Badge>
+        <Badge size="md">Medium</Badge>
+        <Badge size="lg">Large</Badge>
+      </div>
+
+      {/* Default / Non-removable - single */}
+      <Badge size="md">Verified</Badge>
+
+      {/* Removable */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="xs" onRemove={() => {}}>
+          Extra small removable
+        </Badge>
+        <Badge size="sm" onRemove={() => {}}>
+          Small removable
+        </Badge>
+        <Badge size="md" onRemove={() => {}}>
+          Verified
+        </Badge>
+        <Badge size="lg" onRemove={() => {}}>
+          Large removable
+        </Badge>
+      </div>
+
+      {/* Removable - single */}
+      <Badge size="md" onRemove={() => {}}>
+        Verified
+      </Badge>
+
+      {/* Disabled */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="md" disabled>
+          Disabled
+        </Badge>
+        <Badge size="md" onRemove={() => {}} disabled>
+          Disabled removable
+        </Badge>
+      </div>
+
+      {/* Badge with count */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="xs">1</Badge>
+        <Badge size="sm">1</Badge>
+        <Badge size="md">2</Badge>
+        <Badge size="lg">4</Badge>
+      </div>
+
+      {/* Circle with border */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="xs" variant="circle">
+          1
+        </Badge>
+        <Badge size="sm" variant="circle">
+          1
+        </Badge>
+        <Badge size="md" variant="circle">
+          2
+        </Badge>
+        <Badge size="lg" variant="circle">
+          4
+        </Badge>
+      </div>
+
+      {/* Color: white background */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center' }}>
+        <Badge size="md" color="white">
+          White
+        </Badge>
+        <Badge size="md" color="white" onRemove={() => {}}>
+          White removable
+        </Badge>
+      </div>
+    </div>
+  ),
+};