@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/data-display/ChartCard/ChartCard.tsx

@@ -0,0 +1,218 @@
+import {
+  AreaChart,
+  BarChart,
+  Heatmap,
+  LineChart,
+  chartFmt,
+  type ChartColor,
+  type ChartStateProps,
+  type HeatmapProps,
+  type ValueFormatter,
+} from '@gntik-ai/charts';
+import { Card, CardAction, CardDescription, CardHeader, CardTitle, cn, Toggle, ToggleGroup } from '@gntik-ai/ui';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { TrendDelta, type KpiDelta } from '../shared/TrendDelta';
+import { COST_BY_RANGE, COST_RANGES, type CostPoint } from './fixtures';
+
+export interface ChartCardRange {
+  /** Range key ("7d"); also the key into `dataByRange`. */
+  value: string;
+  label: string;
+  /** Optional headline for this range. */
+  summary?: { value: string; delta?: KpiDelta };
+}
+
+/** Heatmap-only options of a ChartCard with `kind="heatmap"`. */
+export type ChartCardHeatmapOptions = Pick<
+  HeatmapProps<object>,
+  'scale' | 'domain' | 'steps' | 'showValues' | 'rowHeader'
+>;
+
+export interface ChartCardProps<T extends object> extends ChartStateProps {
+  title?: string;
+  description?: string;
+  /** Ordered options; defaults to 7d/30d/90d. Unknown range keys fall back to the first option. */
+  ranges?: readonly ChartCardRange[];
+  /** Chart rows per range key. */
+  dataByRange?: Readonly<Record<string, readonly T[]>>;
+  /** X-axis field (heatmap: the row label field). */
+  index?: Extract<keyof T, string>;
+  /** Series fields, one legend entry each (heatmap: the columns, in order). */
+  categories?: ReadonlyArray<Extract<keyof T, string>>;
+  /**
+   * Chart type. `heatmap` renders an @gntik-ai/charts Heatmap: rows from `index`, columns from
+   * `categories`, its hue from `colors[0]`, its colour scale as the legend (`showLegend`) and its
+   * cells sized to fill `height`.
+   */
+  kind?: 'area' | 'line' | 'bar' | 'heatmap';
+  /** Heatmap options (scale, domain, steps, showValues, rowHeader). */
+  heatmap?: ChartCardHeatmapOptions;
+  stacked?: boolean;
+  colors?: readonly ChartColor[];
+  valueFormatter?: ValueFormatter;
+  showLegend?: boolean;
+  /** Hide the range control when a page toolbar owns the controlled `range`. */
+  showRangeToggle?: boolean;
+  /** Plot height in px (heatmap: the grid, column labels included). */
+  height?: number;
+  /** Initial uncontrolled selection; defaults to the first option. */
+  defaultRange?: string;
+  /** Controlled selection. Changes are requested through `onRangeChange` until this prop updates. */
+  range?: string;
+  onRangeChange?: (range: string) => void;
+  /** Extra header control (e.g. a MoreMenu), after the range toggle. */
+  action?: ReactNode;
+  /** Footer content under the chart. */
+  footer?: ReactNode;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const DEFAULT_CATEGORIES = ['Compute', 'Storage', 'Network'] as const;
+const DEFAULT_COLORS: readonly ChartColor[] = ['primary', 'violet', 'cyan'];
+
+/**
+ * Chart in a Card: title, optional headline value + delta, a configurable range ToggleGroup, and an
+ * @gntik-ai/charts area, line, bar or heatmap chart with its legend (heatmap: its colour scale).
+ * Defaults to 7d/30d/90d; hide the toggle when a toolbar owns the controlled range.
+ * The chart states (`state`, `emptyMessage`, `errorMessage`, `onRetry`) and `dataTable` pass through.
+ */
+export function ChartCard<T extends object = CostPoint>({
+  title = 'Infrastructure cost',
+  description = 'Spend by resource',
+  ranges = COST_RANGES,
+  dataByRange = COST_BY_RANGE as unknown as Readonly<Record<string, readonly T[]>>,
+  index = 'day' as Extract<keyof T, string>,
+  categories = DEFAULT_CATEGORIES as unknown as ReadonlyArray<Extract<keyof T, string>>,
+  kind = 'area',
+  heatmap,
+  stacked = true,
+  colors = DEFAULT_COLORS,
+  valueFormatter = chartFmt.usd,
+  showLegend = true,
+  showRangeToggle = true,
+  height = 240,
+  defaultRange,
+  range: rangeProp,
+  onRangeChange,
+  action,
+  footer,
+  titleAs = 'h3',
+  className,
+  state,
+  emptyMessage,
+  errorMessage,
+  onRetry,
+  dataTable,
+}: ChartCardProps<T>) {
+  const tabEntry = useRef(false);
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      tabEntry.current = event.key === 'Tab';
+    };
+    const clearTabEntry = () => {
+      tabEntry.current = false;
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('keyup', clearTabEntry, true);
+    window.addEventListener('blur', clearTabEntry);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('keyup', clearTabEntry, true);
+      window.removeEventListener('blur', clearTabEntry);
+    };
+  }, []);
+  const [inner, setInner] = useState(defaultRange ?? ranges[0]?.value ?? '');
+  const current = rangeProp ?? inner;
+  const matched = ranges.find((r) => r.value === current);
+  const active = matched ?? ranges[0];
+  useEffect(() => {
+    if (!matched && ranges.length > 0 && process.env.NODE_ENV === 'development') {
+      console.warn('ChartCard: range/defaultRange is not in ranges; falling back to the first option.');
+    }
+  }, [current, matched, ranges.length]);
+  const data = (active && dataByRange[active.value]) ?? [];
+  const chartLabel = `${title}${active ? `, ${active.label}` : ''}`;
+  const states = { state, emptyMessage, errorMessage, onRetry, dataTable };
+  const common = {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    showLegend,
+    height,
+    'aria-label': chartLabel,
+    ...states,
+  };
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-2">
+        <CardTitle as={titleAs}>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+        <CardAction className="flex items-center gap-2">
+          {showRangeToggle && ranges.length > 1 && (
+            <ToggleGroup
+              aria-label={`${title} range`}
+              size="sm"
+              value={active ? [active.value] : []}
+              onFocus={(event) => {
+                // Tab enters at the pressed option; pointer and restored focus stay on their original option.
+                if (!tabEntry.current) return;
+                if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+                const selected = event.currentTarget.querySelector<HTMLButtonElement>('[aria-pressed="true"]');
+                selected?.focus();
+              }}
+              onValueChange={(v) => {
+                const next = v[0];
+                if (!next) return;
+                if (rangeProp === undefined) setInner(next);
+                onRangeChange?.(next);
+              }}
+            >
+              {ranges.map((r) => (
+                <Toggle key={r.value} value={r.value} className="font-mono">
+                  {r.label}
+                </Toggle>
+              ))}
+            </ToggleGroup>
+          )}
+          {action}
+        </CardAction>
+      </CardHeader>
+      {active?.summary && (
+        <p className="flex flex-wrap items-baseline gap-x-2 px-5" aria-live="polite">
+          <span className="text-[24px] font-semibold tracking-tight text-foreground tabular-nums">
+            {active.summary.value}
+          </span>
+          {active.summary.delta && <TrendDelta {...active.summary.delta} />}
+        </p>
+      )}
+      <div className={cn('px-3 pb-4 pt-3 sm:px-4', !footer && 'pb-5')}>
+        {kind === 'heatmap' ? (
+          <Heatmap
+            data={data}
+            index={index}
+            categories={categories}
+            color={colors[0] ?? 'primary'}
+            valueFormatter={valueFormatter}
+            showScale={showLegend}
+            height={height}
+            aria-label={chartLabel}
+            {...heatmap}
+            {...states}
+            dataTable={dataTable ?? true}
+          />
+        ) : kind === 'bar' ? (
+          <BarChart {...common} stacked={stacked} />
+        ) : kind === 'line' ? (
+          <LineChart {...common} />
+        ) : (
+          <AreaChart {...common} stacked={stacked} />
+        )}
+      </div>
+      {footer && <div className="border-t border-border px-5 py-3 text-[12.5px] text-muted-foreground">{footer}</div>}
+    </Card>
+  );
+}

package/src/data-display/ChartCard/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Chart card',
+  family: 'data-display',
+  status: 'beta',
+  description:
+    'A Card with chart and legend: default 7d/30d/90d or custom ranges via ranges, controlled range/onRangeChange, and showRangeToggle={false} when a toolbar owns the range (pass its window as range). Supports title, optional headline and delta, area/line/bar/heatmap charts, and loading, empty and error states. Supply matching dataByRange keys and use defaultRange for initial uncontrolled selection; the toolbar is the only range control when the toggle is hidden. Unknown range/defaultRange keys fall back to the first option for selection, data and label, with a development-only warning.',
+  uses: ['Card', 'ToggleGroup', 'AreaChart', 'LineChart', 'BarChart', 'Heatmap', 'ChartLegend'],
+};

package/src/data-display/ChartCard/examples/custom-ranges.tsx

@@ -0,0 +1,37 @@
+import { ChartCard, type ChartCardRange } from '../ChartCard';
+
+export const REQUEST_RANGES: readonly ChartCardRange[] = [
+  { value: '24h', label: '24h', summary: { value: '1,240 requests' } },
+  { value: '7d', label: '7d', summary: { value: '8,680 requests' } },
+  { value: '30d', label: '30d', summary: { value: '37,200 requests' } },
+];
+
+export const REQUEST_DATA = {
+  '24h': [
+    { time: '00:00', Requests: 580 },
+    { time: '12:00', Requests: 660 },
+  ],
+  '7d': [
+    { time: 'Mon', Requests: 4080 },
+    { time: 'Sun', Requests: 4600 },
+  ],
+  '30d': [
+    { time: 'Week 1', Requests: 18000 },
+    { time: 'Week 4', Requests: 19200 },
+  ],
+};
+
+/** Ordered consumer windows replace the default 7d/30d/90d options. */
+export default function CustomRangeChartCard() {
+  return (
+    <ChartCard
+      title="Requests"
+      description="Request volume over the selected window"
+      ranges={REQUEST_RANGES}
+      dataByRange={REQUEST_DATA}
+      index="time"
+      categories={['Requests']}
+      valueFormatter={(value) => `${value.toLocaleString('en-US')} requests`}
+    />
+  );
+}

package/src/data-display/ChartCard/examples/heatmap.tsx

@@ -0,0 +1,20 @@
+import { ChartCard } from '../ChartCard';
+import { TRAFFIC_BUCKETS, TRAFFIC_BY_RANGE, TRAFFIC_RANGES, type TrafficRow } from '../fixtures';
+
+/** A ChartCard with a heatmap: weekday × time-of-day traffic, colour scale as the legend. */
+export default function HeatmapChartCard() {
+  return (
+    <ChartCard<TrafficRow>
+      kind="heatmap"
+      title="Traffic by hour"
+      description="Requests per weekday, in thousands"
+      ranges={TRAFFIC_RANGES}
+      dataByRange={TRAFFIC_BY_RANGE}
+      index="day"
+      categories={TRAFFIC_BUCKETS}
+      valueFormatter={(v) => `${v}k`}
+      heatmap={{ rowHeader: 'Day', showValues: false }}
+      height={240}
+    />
+  );
+}

package/src/data-display/ChartCard/examples/toolbar-owned-range.tsx

@@ -0,0 +1,34 @@
+import { SimpleSelect } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ChartCard } from '../ChartCard';
+import { REQUEST_DATA, REQUEST_RANGES } from './custom-ranges';
+
+/** The page toolbar owns the only range control; each card follows its controlled window. */
+export default function ToolbarOwnedRangeChartCard() {
+  const [range, setRange] = useState('24h');
+  return (
+    <div className="grid gap-4">
+      <SimpleSelect
+        label="Page window"
+        items={REQUEST_RANGES}
+        value={range}
+        onValueChange={(value) => {
+          if (value !== null) setRange(value);
+        }}
+      />
+      <ChartCard
+        title="Requests"
+        description="Request volume over the page window"
+        ranges={REQUEST_RANGES}
+        range={range}
+        showRangeToggle={false}
+        dataByRange={REQUEST_DATA}
+        index="time"
+        categories={['Requests']}
+        valueFormatter={(value) => `${value.toLocaleString('en-US')} requests`}
+        emptyMessage="No requests in this window"
+        errorMessage="Request volume unavailable"
+      />
+    </div>
+  );
+}

package/src/data-display/ChartCard/fixtures.ts

@@ -0,0 +1,82 @@
+import type { ChartCardRange } from './ChartCard';
+
+export interface CostPoint {
+  day: string;
+  Compute: number;
+  Storage: number;
+  Network: number;
+}
+
+const series = (labels: string[], base: [number, number, number], step: [number, number, number]): CostPoint[] =>
+  labels.map((day, i) => ({
+    day,
+    Compute: Math.round(base[0] + step[0] * i + ((i * 37) % 11) * 4),
+    Storage: Math.round(base[1] + step[1] * i + ((i * 13) % 7) * 2),
+    Network: Math.round(base[2] + step[2] * i + ((i * 29) % 5) * 3),
+  }));
+
+const DAYS7 = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const DAYS30 = Array.from({ length: 30 }, (_, i) => `Day ${i + 1}`);
+const WEEKS13 = Array.from({ length: 13 }, (_, i) => `Week ${i + 1}`);
+
+/** Infrastructure cost by resource, per range. */
+export const COST_BY_RANGE: Record<string, CostPoint[]> = {
+  '7d': series(DAYS7, [180, 42, 120], [6, 1, 2]),
+  '30d': series(DAYS30, [160, 40, 110], [2, 0.4, 1]),
+  '90d': series(WEEKS13, [1100, 280, 760], [40, 6, 18]),
+};
+
+export const COST_RANGES: ChartCardRange[] = [
+  {
+    value: '7d',
+    label: '7d',
+    summary: { value: '$2,412', delta: { value: '+9.7%', direction: 'up', sentiment: 'negative' } },
+  },
+  {
+    value: '30d',
+    label: '30d',
+    summary: { value: '$9,880', delta: { value: '+4.1%', direction: 'up', sentiment: 'negative' } },
+  },
+  {
+    value: '90d',
+    label: '90d',
+    summary: { value: '$27,306', delta: { value: '−2.3%', direction: 'down', sentiment: 'positive' } },
+  },
+];
+
+export interface TrafficRow {
+  day: string;
+  '00h': number;
+  '03h': number;
+  '06h': number;
+  '09h': number;
+  '12h': number;
+  '15h': number;
+  '18h': number;
+  '21h': number;
+}
+
+/** Three-hour buckets of TRAFFIC_BY_RANGE, in display order. */
+export const TRAFFIC_BUCKETS = ['00h', '03h', '06h', '09h', '12h', '15h', '18h', '21h'] as const;
+
+const SHAPE = [0.18, 0.12, 0.3, 0.82, 1, 0.94, 0.7, 0.4];
+
+/** Requests (thousands) per weekday and three-hour bucket: a heatmap for a ChartCard. */
+export const TRAFFIC_BY_RANGE: Record<string, TrafficRow[]> = {
+  '7d': DAYS7.map((day, d) => {
+    const weekend = d >= 5 ? 0.45 : 1;
+    const row = { day } as TrafficRow;
+    TRAFFIC_BUCKETS.forEach((bucket, b) => {
+      row[bucket] = Math.round((SHAPE[b] ?? 0) * weekend * (42 + ((d * 7 + b * 3) % 9)));
+    });
+    return row;
+  }),
+};
+
+export const TRAFFIC_RANGES: ChartCardRange[] = [
+  {
+    value: '7d',
+    label: 'Last 7 days',
+    summary: { value: '4.8M requests', delta: { value: '+6.2%', direction: 'up', sentiment: 'positive' } },
+  },
+];

package/src/data-display/CommentThread/CommentThread.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { CommentThread } from './CommentThread';
+
+describe('CommentThread', () => {
+  it('renders the comments and an empty composer', async () => {
+    const { container } = render(<CommentThread />);
+    expect(screen.getByRole('list', { name: '3 comments' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Comment' })).toBeDisabled();
+    await expectNoAxeViolations(container);
+  });
+
+  it('posts a reply with the button and with Ctrl+Enter', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<CommentThread onSubmit={onSubmit} />);
+    const box = screen.getByRole('textbox', { name: 'Write a comment' });
+    await user.type(box, '  Merged, thanks!  ');
+    await user.click(screen.getByRole('button', { name: 'Comment' }));
+    expect(onSubmit).toHaveBeenCalledWith('Merged, thanks!');
+    expect(screen.getByText('Merged, thanks!')).toBeInTheDocument();
+    expect(box).toHaveValue('');
+    await user.type(box, 'Follow-up');
+    await user.keyboard('{Control>}{Enter}{/Control}');
+    expect(onSubmit).toHaveBeenLastCalledWith('Follow-up');
+    expect(screen.getByRole('list', { name: '5 comments' })).toBeInTheDocument();
+  });
+});

package/src/data-display/CommentThread/CommentThread.tsx

@@ -0,0 +1,120 @@
+import { Avatar, Button, cn, Textarea, Timestamp, type DateInput, useI18n } from '@gntik-ai/ui';
+import { useId, useState, type FormEvent, type KeyboardEvent } from 'react';
+import { COMMENT_AUTHOR, REVIEW_COMMENTS } from './fixtures';
+
+export interface CommentAuthor {
+  name: string;
+  src?: string;
+}
+
+export interface ThreadComment {
+  id: string;
+  author: CommentAuthor;
+  /** Plain text (no markdown); line breaks are kept. */
+  body: string;
+  at: DateInput;
+}
+
+export interface CommentThreadProps {
+  comments?: readonly ThreadComment[];
+  /** Author of new comments (the signed-in user). */
+  currentUser?: CommentAuthor;
+  /** Called with the trimmed text when a comment is posted. */
+  onSubmit?: (body: string) => void;
+  /** Append posted comments locally (default). Turn off when the parent updates `comments`. */
+  appendOnSubmit?: boolean;
+  /** Accessible name of the thread. */
+  label?: string;
+  placeholder?: string;
+  submitLabel?: string;
+  className?: string;
+}
+
+/** Comment thread: avatar, author, plain-text body and Timestamp, with a reply composer (⌘/Ctrl+Enter posts). */
+export function CommentThread({
+  comments = REVIEW_COMMENTS,
+  currentUser = COMMENT_AUTHOR,
+  onSubmit,
+  appendOnSubmit = true,
+  label: labelProp,
+  placeholder: placeholderProp,
+  submitLabel: submitLabelProp,
+  className,
+}: CommentThreadProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('comments.label');
+  const placeholder = placeholderProp ?? t('comments.placeholder');
+  const submitLabel = submitLabelProp ?? t('comments.submit');
+  const [draft, setDraft] = useState('');
+  const [posted, setPosted] = useState<ThreadComment[]>([]);
+  const hintId = useId();
+  const all = appendOnSubmit ? [...comments, ...posted] : comments;
+  const text = draft.trim();
+
+  const post = () => {
+    if (!text) return;
+    onSubmit?.(text);
+    if (appendOnSubmit)
+      setPosted((prev) => [
+        ...prev,
+        { id: `local-${prev.length + 1}`, author: currentUser, body: text, at: Date.now() },
+      ]);
+    setDraft('');
+  };
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    post();
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      post();
+    }
+  };
+
+  return (
+    <section aria-label={label} className={cn('flex flex-col gap-6', className)}>
+      <ul aria-label={`${all.length} ${all.length === 1 ? 'comment' : 'comments'}`} className="flex flex-col gap-5">
+        {all.map((comment, i) => (
+          <li key={comment.id} className="relative flex gap-3">
+            {i < all.length - 1 && (
+              <span aria-hidden className="absolute top-9 -bottom-5 start-[15.5px] w-px bg-border" />
+            )}
+            <Avatar name={comment.author.name} src={comment.author.src} size="sm" className="relative z-10" />
+            <article className="min-w-0 flex-1 rounded-lg border border-border bg-background/50 p-3">
+              <header className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
+                <span className="text-[12.5px] font-semibold text-foreground">{comment.author.name}</span>
+                <Timestamp value={comment.at} className="font-mono text-[11px]" />
+              </header>
+              <p className="mt-1 text-[13px] leading-relaxed whitespace-pre-line text-foreground/85">{comment.body}</p>
+            </article>
+          </li>
+        ))}
+      </ul>
+      <form onSubmit={submit} className="flex gap-3">
+        <Avatar name={currentUser.name} src={currentUser.src} size="sm" />
+        <div className="min-w-0 flex-1 rounded-lg border border-border bg-background/50 transition-colors focus-within:border-primary/50">
+          <Textarea
+            aria-label={t('comments.write')}
+            aria-describedby={hintId}
+            value={draft}
+            onValueChange={setDraft}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            rows={3}
+            resize="none"
+            className="border-0 bg-transparent shadow-none"
+          />
+          <div className="flex items-center justify-between gap-2 border-t border-border/60 px-3 py-2">
+            <span id={hintId} className="text-[11.5px] text-muted-foreground">
+              Plain text · ⌘/Ctrl + Enter to post
+            </span>
+            <Button type="submit" size="sm" disabled={!text}>
+              {submitLabel}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </section>
+  );
+}

package/src/data-display/CommentThread/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Comment thread',
+  family: 'data-display',
+  status: 'beta',
+  description:
+    'Plain-text comments with avatar, author and Timestamp, plus a reply composer (Textarea + Button, ⌘/Ctrl+Enter posts).',
+  uses: ['Avatar', 'Timestamp', 'Textarea', 'Button'],
+};

package/src/data-display/CommentThread/fixtures.ts

@@ -0,0 +1,28 @@
+import type { ThreadComment, CommentAuthor } from './CommentThread';
+
+const MIN = 60_000;
+const NOW = Date.now();
+
+export const COMMENT_AUTHOR: CommentAuthor = { name: 'Jordan Blake' };
+
+/** Review discussion on a pull request, oldest first. */
+export const REVIEW_COMMENTS: ThreadComment[] = [
+  {
+    id: 'c1',
+    author: { name: 'Ana Lopez' },
+    body: 'The retry policy now backs off exponentially. Can someone check the timeout on the invoice worker?',
+    at: NOW - 95 * MIN,
+  },
+  {
+    id: 'c2',
+    author: { name: 'Sam Carter' },
+    body: 'Looks good. 30 seconds is fine for the worker, the queue redelivers after 60.',
+    at: NOW - 70 * MIN,
+  },
+  {
+    id: 'c3',
+    author: { name: 'Priya Nair' },
+    body: 'Approved. Please add a changelog entry before merging.',
+    at: NOW - 12 * MIN,
+  },
+];

package/src/data-display/DescriptionListCard/DescriptionListCard.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { DescriptionListCard } from './DescriptionListCard';
+
+describe('DescriptionListCard', () => {
+  it('renders labels and values', async () => {
+    const { container } = render(<DescriptionListCard onEdit={() => {}} />);
+    expect(screen.getByText('Deployment ID')).toBeInTheDocument();
+    expect(screen.getByText('dep_7f3c9a21')).toBeInTheDocument();
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('copies a value and calls onEdit', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, 'writeText');
+    const onCopy = vi.fn();
+    const onEdit = vi.fn();
+    render(<DescriptionListCard onCopy={onCopy} onEdit={onEdit} />);
+    await user.click(screen.getByRole('button', { name: 'Copy Deployment ID' }));
+    expect(writeText).toHaveBeenCalledWith('dep_7f3c9a21');
+    expect(onCopy).toHaveBeenCalledWith(expect.objectContaining({ id: 'id' }));
+    expect(screen.getByRole('button', { name: 'Deployment ID copied' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+    expect(onEdit).toHaveBeenCalled();
+  });
+});