xertica-ui 2.2.1 → 2.4.0

package/components/blocks/card-patterns/ProjectCard.tsx

@@ -1,123 +1,123 @@
-'use client';
-
-import * as React from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  CardAction,
-} from '../../ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
-import { Badge } from '../../ui/badge';
-import { Progress } from '../../ui/progress';
-import { cn } from '../../shared/utils';
-import type { ProgressVariant } from '../../ui/progress';
-
-export type ProjectStatus = 'active' | 'review' | 'done' | 'paused' | 'at-risk';
-
-export interface ProjectMember {
-  name: string;
-  initials: string;
-  avatar?: string;
-}
-
-export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  status: ProjectStatus;
-  progress: number;
-  dueDate?: string;
-  members?: ProjectMember[];
-  maxMembers?: number;
-  action?: React.ReactNode;
-}
-
-const statusVariantConfig: Record<
-  ProjectStatus,
-  {
-    variant: React.ComponentProps<typeof Badge>['variant'];
-    progressVariant: ProgressVariant;
-  }
-> = {
-  active: { variant: 'info', progressVariant: 'info' },
-  review: { variant: 'warning', progressVariant: 'warning' },
-  done: { variant: 'success', progressVariant: 'success' },
-  paused: { variant: 'secondary', progressVariant: 'default' },
-  'at-risk': { variant: 'destructive', progressVariant: 'destructive' },
-};
-
-export function ProjectCard({
-  title,
-  description,
-  status,
-  progress,
-  dueDate,
-  members = [],
-  maxMembers = 4,
-  action,
-  className,
-  ...props
-}: ProjectCardProps) {
-  const { t } = useTranslation();
-  const statusLabelMap = useMemo<Record<ProjectStatus, string>>(
-    () => ({
-      active: t('projectCard.status.active'),
-      review: t('projectCard.status.review'),
-      done: t('projectCard.status.completed'),
-      paused: t('projectCard.status.paused'),
-      'at-risk': t('projectCard.status.atRisk'),
-    }),
-    [t]
-  );
-  const { variant, progressVariant } = statusVariantConfig[status];
-  const label = statusLabelMap[status];
-  const visible = members.slice(0, maxMembers);
-  const overflow = members.length - maxMembers;
-
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardHeader>
-        <div className="flex flex-col gap-1 min-w-0">
-          <CardTitle className="truncate">{title}</CardTitle>
-          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
-        </div>
-        <CardAction className="flex items-center gap-2">
-          <Badge variant={variant}>{label}</Badge>
-          {action}
-        </CardAction>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        <div className="space-y-1.5">
-          <div className="flex justify-between text-xs text-muted-foreground">
-            <span>{t('projectCard.progress')}</span>
-            <span>{progress}%</span>
-          </div>
-          <Progress value={progress} variant={progressVariant} className="h-2" />
-        </div>
-      </CardContent>
-
-      <CardFooter className="flex items-center justify-between">
-        <div className="flex -space-x-2">
-          {visible.map(m => (
-            <Avatar key={m.name} className="size-7 border-2 border-background">
-              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
-              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
-            </Avatar>
-          ))}
-          {overflow > 0 && (
-            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
-              +{overflow}
-            </div>
-          )}
-        </div>
-        {dueDate && <span className="text-xs text-muted-foreground">{dueDate}</span>}
-      </CardFooter>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from '../../ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
+import { Badge } from '../../ui/badge';
+import { Progress } from '../../ui/progress';
+import { cn } from '../../shared/utils';
+import type { ProgressVariant } from '../../ui/progress';
+
+export type ProjectStatus = 'active' | 'review' | 'done' | 'paused' | 'at-risk';
+
+export interface ProjectMember {
+  name: string;
+  initials: string;
+  avatar?: string;
+}
+
+export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  status: ProjectStatus;
+  progress: number;
+  dueDate?: string;
+  members?: ProjectMember[];
+  maxMembers?: number;
+  action?: React.ReactNode;
+}
+
+const statusVariantConfig: Record<
+  ProjectStatus,
+  {
+    variant: React.ComponentProps<typeof Badge>['variant'];
+    progressVariant: ProgressVariant;
+  }
+> = {
+  active: { variant: 'info', progressVariant: 'info' },
+  review: { variant: 'warning', progressVariant: 'warning' },
+  done: { variant: 'success', progressVariant: 'success' },
+  paused: { variant: 'secondary', progressVariant: 'default' },
+  'at-risk': { variant: 'destructive', progressVariant: 'destructive' },
+};
+
+export function ProjectCard({
+  title,
+  description,
+  status,
+  progress,
+  dueDate,
+  members = [],
+  maxMembers = 4,
+  action,
+  className,
+  ...props
+}: ProjectCardProps) {
+  const { t } = useTranslation();
+  const statusLabelMap = useMemo<Record<ProjectStatus, string>>(
+    () => ({
+      active: t('projectCard.status.active'),
+      review: t('projectCard.status.review'),
+      done: t('projectCard.status.completed'),
+      paused: t('projectCard.status.paused'),
+      'at-risk': t('projectCard.status.atRisk'),
+    }),
+    [t]
+  );
+  const { variant, progressVariant } = statusVariantConfig[status];
+  const label = statusLabelMap[status];
+  const visible = members.slice(0, maxMembers);
+  const overflow = members.length - maxMembers;
+
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardHeader>
+        <div className="flex flex-col gap-1 min-w-0">
+          <CardTitle className="truncate">{title}</CardTitle>
+          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
+        </div>
+        <CardAction className="flex items-center gap-2">
+          <Badge variant={variant}>{label}</Badge>
+          {action}
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>{t('projectCard.progress')}</span>
+            <span>{progress}%</span>
+          </div>
+          <Progress value={progress} variant={progressVariant} className="h-2" />
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex items-center justify-between">
+        <div className="flex -space-x-2">
+          {visible.map(m => (
+            <Avatar key={m.name} className="size-7 border-2 border-background">
+              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
+              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
+            </Avatar>
+          ))}
+          {overflow > 0 && (
+            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
+              +{overflow}
+            </div>
+          )}
+        </div>
+        {dueDate && <span className="text-xs text-muted-foreground">{dueDate}</span>}
+      </CardFooter>
+    </Card>
+  );
+}

package/components/blocks/card-patterns/ProjectCardSkeleton.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-} from '../../ui/card';
+import { Card, CardHeader, CardContent, CardFooter } from '../../ui/card';
 import { Skeleton } from '../../ui/skeleton';
 import { cn } from '../../shared/utils';
 

package/components/blocks/card-patterns/QuickActionCard.tsx

@@ -1,68 +1,68 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardContent } from '../../ui/card';
-import { Button } from '../../ui/button';
-import { Badge } from '../../ui/badge';
-import { cn } from '../../shared/utils';
-
-export interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  icon: React.ReactNode;
-  badge?: string;
-  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
-  actionLabel: string;
-  actionVariant?: React.ComponentProps<typeof Button>['variant'];
-  onAction?: () => void;
-  disabled?: boolean;
-}
-
-export function QuickActionCard({
-  title,
-  description,
-  icon,
-  badge,
-  badgeVariant = 'secondary',
-  actionLabel,
-  actionVariant = 'default',
-  onAction,
-  disabled,
-  className,
-  ...props
-}: QuickActionCardProps) {
-  return (
-    <Card
-      className={cn(
-        'w-full group transition-shadow hover:shadow-md',
-        disabled && 'opacity-60 pointer-events-none',
-        className
-      )}
-      {...props}
-    >
-      <CardContent className="pt-6 flex flex-col items-start gap-4">
-        <div className="flex items-start justify-between w-full">
-          <div className="p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary">{icon}</div>
-          {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
-        </div>
-
-        <div className="space-y-1 flex-1">
-          <p className="font-semibold text-sm leading-tight">{title}</p>
-          {description && (
-            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
-          )}
-        </div>
-
-        <Button
-          variant={actionVariant}
-          size="sm"
-          className="w-full"
-          onClick={onAction}
-          disabled={disabled}
-        >
-          {actionLabel}
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { Card, CardContent } from '../../ui/card';
+import { Button } from '../../ui/button';
+import { Badge } from '../../ui/badge';
+import { cn } from '../../shared/utils';
+
+export interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  icon: React.ReactNode;
+  badge?: string;
+  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
+  actionLabel: string;
+  actionVariant?: React.ComponentProps<typeof Button>['variant'];
+  onAction?: () => void;
+  disabled?: boolean;
+}
+
+export function QuickActionCard({
+  title,
+  description,
+  icon,
+  badge,
+  badgeVariant = 'secondary',
+  actionLabel,
+  actionVariant = 'default',
+  onAction,
+  disabled,
+  className,
+  ...props
+}: QuickActionCardProps) {
+  return (
+    <Card
+      className={cn(
+        'w-full group transition-shadow hover:shadow-md',
+        disabled && 'opacity-60 pointer-events-none',
+        className
+      )}
+      {...props}
+    >
+      <CardContent className="pt-6 flex flex-col items-start gap-4">
+        <div className="flex items-start justify-between w-full">
+          <div className="p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary">{icon}</div>
+          {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
+        </div>
+
+        <div className="space-y-1 flex-1">
+          <p className="font-semibold text-sm leading-tight">{title}</p>
+          {description && (
+            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
+          )}
+        </div>
+
+        <Button
+          variant={actionVariant}
+          size="sm"
+          className="w-full"
+          onClick={onAction}
+          disabled={disabled}
+        >
+          {actionLabel}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

package/components/blocks/card-patterns/card-patterns.mdx

@@ -1,123 +1,123 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CardPatternsStories from './card-patterns.stories';
-
-<Meta of={CardPatternsStories} />
-
-<Title />
-<Subtitle>Pre-composed card blocks for dashboards and feature pages — plus matching skeleton variants for loading states.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Overview
-
-Six composed card components built exclusively from `ui/` primitives — no external dependencies. Each card has a matching `*Skeleton` companion that mirrors its layout with pulsing placeholders for use while data is loading.
-
-| Card                | Skeleton companion         |
-| ------------------- | -------------------------- |
-| `ActivityCard`      | `ActivityCardSkeleton`     |
-| `ProfileCard`       | `ProfileCardSkeleton`      |
-| `ProjectCard`       | `ProjectCardSkeleton`      |
-| `NotificationCard`  | `NotificationCardSkeleton` |
-| `QuickActionCard`   | `QuickActionCardSkeleton`  |
-| `FeatureCard`       | `FeatureCardSkeleton`      |
-
-> A matching `StatsCardSkeleton` is also available from `xertica-ui` (lives in `ui/stats-card/`).
-
----
-
-## Import
-
-```tsx
-// All cards and skeletons are re-exported from the root barrel
-import {
-  ActivityCard, ActivityCardSkeleton,
-  ProfileCard, ProfileCardSkeleton,
-  ProjectCard, ProjectCardSkeleton,
-  NotificationCard, NotificationCardSkeleton,
-  QuickActionCard, QuickActionCardSkeleton,
-  FeatureCard, FeatureCardSkeleton,
-} from 'xertica-ui';
-```
-
----
-
-## When to Use Cards
-
-- You need a recurring dashboard pattern (activity feed, KPI, project status, notifications) and don't want to re-compose it from scratch in every feature.
-- The pattern is stable and reused across multiple pages.
-
-## When NOT to Use Cards
-
-- One-off layouts specific to a single page — compose directly from `Card` and `ui/` primitives instead.
-- When the pattern has significant data-fetching logic — keep the block as a pure presentational component and handle state in the feature layer.
-
----
-
-## Loading-state pattern
-
-Always pair each card with its matching `*Skeleton` for loading states — never render a spinner or empty container while data fetches. The skeleton variants mirror the final layout closely, preventing layout shift when data arrives.
-
-```tsx
-function ActivityFeed() {
-  const { data: items, isLoading } = useActivityItems();
-
-  if (isLoading) return <ActivityCardSkeleton rows={5} />;
-  return <ActivityCard items={items!} />;
-}
-```
-
-For grids, render one skeleton per expected card:
-
-```tsx
-{isLoading ? (
-  <>
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-  </>
-) : (
-  data.map(item => <FeatureCard key={item.id} {...item} />)
-)}
-```
-
----
-
-## Skeleton configuration
-
-Each skeleton accepts props that tune which layout regions are rendered, so the placeholder matches the loaded state exactly.
-
-| Skeleton                   | Props                                       |
-| -------------------------- | ------------------------------------------- |
-| `ActivityCardSkeleton`     | `rows` (default `5`)                        |
-| `ProfileCardSkeleton`      | `showStats`, `showActions`                  |
-| `ProjectCardSkeleton`      | `memberCount` (default `3`)                 |
-| `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll`         |
-| `QuickActionCardSkeleton`  | —                                           |
-| `FeatureCardSkeleton`      | `showAction`                                |
-| `StatsCardSkeleton`        | `showIcon`, `showTrend`                     |
-
-Set `rows={maxItems}` on list-style skeletons to match the loaded state's row count.
-
----
-
-## Stories
-
-<Stories />
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **Import block components from `xertica-ui`** — they are included in the root barrel.
-> - **Pass all data as props** — never embed fetch calls inside block components.
-> - **Keep `maxItems` at a sensible limit (4–6)** to avoid overflow in fixed-height containers.
-> - **Always pair each card with its matching `*Skeleton`** — do not render a spinner or empty container while data fetches.
-> - **Skeleton row counts should match the expected data count** — pass `rows={maxItems}` to `ActivityCardSkeleton`/`NotificationCardSkeleton`.
-> - **For chart panels**, use `ChartCard` from `xertica-ui/ui` (not a block component) with any dashboard-ready chart as `children`.
-> - **`FeatureCard` badge wraps to a new line** when title + badge don't fit — this is intentional; do not constrain the container width to force inline layout.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CardPatternsStories from './card-patterns.stories';
+
+<Meta of={CardPatternsStories} />
+
+<Title />
+<Subtitle>Pre-composed card blocks for dashboards and feature pages — plus matching skeleton variants for loading states.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Overview
+
+Six composed card components built exclusively from `ui/` primitives — no external dependencies. Each card has a matching `*Skeleton` companion that mirrors its layout with pulsing placeholders for use while data is loading.
+
+| Card                | Skeleton companion         |
+| ------------------- | -------------------------- |
+| `ActivityCard`      | `ActivityCardSkeleton`     |
+| `ProfileCard`       | `ProfileCardSkeleton`      |
+| `ProjectCard`       | `ProjectCardSkeleton`      |
+| `NotificationCard`  | `NotificationCardSkeleton` |
+| `QuickActionCard`   | `QuickActionCardSkeleton`  |
+| `FeatureCard`       | `FeatureCardSkeleton`      |
+
+> A matching `StatsCardSkeleton` is also available from `xertica-ui` (lives in `ui/stats-card/`).
+
+---
+
+## Import
+
+```tsx
+// All cards and skeletons are re-exported from the root barrel
+import {
+  ActivityCard, ActivityCardSkeleton,
+  ProfileCard, ProfileCardSkeleton,
+  ProjectCard, ProjectCardSkeleton,
+  NotificationCard, NotificationCardSkeleton,
+  QuickActionCard, QuickActionCardSkeleton,
+  FeatureCard, FeatureCardSkeleton,
+} from 'xertica-ui';
+```
+
+---
+
+## When to Use Cards
+
+- You need a recurring dashboard pattern (activity feed, KPI, project status, notifications) and don't want to re-compose it from scratch in every feature.
+- The pattern is stable and reused across multiple pages.
+
+## When NOT to Use Cards
+
+- One-off layouts specific to a single page — compose directly from `Card` and `ui/` primitives instead.
+- When the pattern has significant data-fetching logic — keep the block as a pure presentational component and handle state in the feature layer.
+
+---
+
+## Loading-state pattern
+
+Always pair each card with its matching `*Skeleton` for loading states — never render a spinner or empty container while data fetches. The skeleton variants mirror the final layout closely, preventing layout shift when data arrives.
+
+```tsx
+function ActivityFeed() {
+  const { data: items, isLoading } = useActivityItems();
+
+  if (isLoading) return <ActivityCardSkeleton rows={5} />;
+  return <ActivityCard items={items!} />;
+}
+```
+
+For grids, render one skeleton per expected card:
+
+```tsx
+{isLoading ? (
+  <>
+    <FeatureCardSkeleton showAction />
+    <FeatureCardSkeleton showAction />
+    <FeatureCardSkeleton showAction />
+  </>
+) : (
+  data.map(item => <FeatureCard key={item.id} {...item} />)
+)}
+```
+
+---
+
+## Skeleton configuration
+
+Each skeleton accepts props that tune which layout regions are rendered, so the placeholder matches the loaded state exactly.
+
+| Skeleton                   | Props                                       |
+| -------------------------- | ------------------------------------------- |
+| `ActivityCardSkeleton`     | `rows` (default `5`)                        |
+| `ProfileCardSkeleton`      | `showStats`, `showActions`                  |
+| `ProjectCardSkeleton`      | `memberCount` (default `3`)                 |
+| `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll`         |
+| `QuickActionCardSkeleton`  | —                                           |
+| `FeatureCardSkeleton`      | `showAction`                                |
+| `StatsCardSkeleton`        | `showIcon`, `showTrend`                     |
+
+Set `rows={maxItems}` on list-style skeletons to match the loaded state's row count.
+
+---
+
+## Stories
+
+<Stories />
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **Import block components from `xertica-ui`** — they are included in the root barrel.
+> - **Pass all data as props** — never embed fetch calls inside block components.
+> - **Keep `maxItems` at a sensible limit (4–6)** to avoid overflow in fixed-height containers.
+> - **Always pair each card with its matching `*Skeleton`** — do not render a spinner or empty container while data fetches.
+> - **Skeleton row counts should match the expected data count** — pass `rows={maxItems}` to `ActivityCardSkeleton`/`NotificationCardSkeleton`.
+> - **For chart panels**, use `ChartCard` from `xertica-ui/ui` (not a block component) with any dashboard-ready chart as `children`.
+> - **`FeatureCard` badge wraps to a new line** when title + badge don't fit — this is intentional; do not constrain the container width to force inline layout.