@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/page-chrome/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,73 @@
+import { Button, cn } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+import type { PageChromeAction } from '../types';
+
+export interface SectionHeaderProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Count pill after the title (members, items…). */
+  count?: number;
+  /** Small actions on the right; the last one without a variant is secondary. */
+  actions?: PageChromeAction[];
+  /** Heading level that fits the page outline. */
+  as?: 'h2' | 'h3';
+  /** Hairline under the header. */
+  bordered?: boolean;
+  /** Id for the heading, so a section can use `aria-labelledby`. */
+  headingId?: string;
+  className?: string;
+}
+
+const sectionHeaderDefaultActions: PageChromeAction[] = [{ label: 'Add policy', variant: 'secondary' }];
+
+/** Heading for a section inside a page: title (+ count), description and small actions. */
+export function SectionHeader({
+  title = 'Policies',
+  description = 'Guardrails applied to every deployment in this project.',
+  count,
+  actions = sectionHeaderDefaultActions,
+  as: Heading = 'h2',
+  bordered = true,
+  headingId,
+  className,
+}: SectionHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-wrap items-end justify-between gap-x-4 gap-y-3',
+        bordered && 'border-b border-border pb-3',
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        <div className="flex items-center gap-2.5">
+          <Heading id={headingId} className="text-[17px] font-semibold tracking-tight text-foreground">
+            {title}
+          </Heading>
+          {count != null && (
+            <span className="inline-flex h-5 items-center rounded-full bg-secondary px-2 font-mono text-[11px] text-muted-foreground">
+              {count.toLocaleString('en-US')}
+            </span>
+          )}
+        </div>
+        {description != null && <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>}
+      </div>
+      {actions.length > 0 && (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {actions.map((a) => (
+            <Button
+              key={a.id ?? a.label}
+              size="sm"
+              variant={a.variant ?? 'secondary'}
+              icon={a.icon}
+              disabled={a.disabled}
+              onClick={a.onClick}
+            >
+              {a.label}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/page-chrome/SectionHeader/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Section header',
+  family: 'page-chrome',
+  status: 'beta',
+  description: 'Heading for a section within a page: title with optional count, description and small actions.',
+  uses: ['Button'],
+};

package/src/page-chrome/StickyActionBar/StickyActionBar.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 { StickyActionBar } from './StickyActionBar';
+
+describe('StickyActionBar', () => {
+  it('renders the dirty state by default', async () => {
+    const { container } = render(<StickyActionBar />);
+    expect(screen.getByRole('region', { name: 'Save changes' })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('You have unsaved changes');
+    await expectNoAxeViolations(container);
+  });
+
+  it('saves, discards and disables while clean', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+    const { rerender } = render(<StickyActionBar onSave={onSave} onCancel={onCancel} />);
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+    await user.click(screen.getByRole('button', { name: 'Discard' }));
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    rerender(<StickyActionBar dirty={false} onSave={onSave} />);
+    expect(screen.getByRole('status')).toHaveTextContent('All changes saved');
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeDisabled();
+    rerender(<StickyActionBar dirty={false} hideWhenClean />);
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+  });
+});

package/src/page-chrome/StickyActionBar/StickyActionBar.tsx

@@ -0,0 +1,66 @@
+import { Button, cn, useI18n } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+
+export interface StickyActionBarProps {
+  /** Whether the form has unsaved changes; Save and Discard are disabled while clean. */
+  dirty?: boolean;
+  /** Shows a spinner on Save and blocks both buttons. */
+  saving?: boolean;
+  onSave?: () => void;
+  onCancel?: () => void;
+  /** Text while dirty. */
+  dirtyMessage?: ReactNode;
+  /** Text while clean. */
+  cleanMessage?: ReactNode;
+  saveLabel?: string;
+  cancelLabel?: string;
+  /** Render nothing while clean (the bar slides in only when there is something to save). */
+  hideWhenClean?: boolean;
+  /** Accessible name of the region. */
+  'aria-label'?: string;
+  className?: string;
+}
+
+/** Bottom bar for long forms: unsaved-changes status plus Discard / Save, sticky to the viewport. */
+export function StickyActionBar({
+  dirty = true,
+  saving = false,
+  onSave,
+  onCancel,
+  dirtyMessage: dirtyMessageProp,
+  cleanMessage: cleanMessageProp,
+  saveLabel: saveLabelProp,
+  cancelLabel: cancelLabelProp,
+  hideWhenClean = false,
+  'aria-label': ariaLabelProp,
+  className,
+}: StickyActionBarProps) {
+  const { t } = useI18n();
+  const dirtyMessage = dirtyMessageProp ?? t('actionBar.unsaved');
+  const cleanMessage = cleanMessageProp ?? t('actionBar.saved');
+  const saveLabel = saveLabelProp ?? t('actionBar.save');
+  const cancelLabel = cancelLabelProp ?? t('actionBar.discard');
+  const ariaLabel = ariaLabelProp ?? t('actionBar.save');
+  if (hideWhenClean && !dirty && !saving) return null;
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cn('sticky bottom-0 z-20 border-t border-border bg-card px-4 py-3 shadow-sm sm:px-6', className)}
+    >
+      <div className="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p role="status" className="flex items-center gap-2 text-[13px] text-foreground">
+          <span aria-hidden className={cn('size-2 shrink-0 rounded-full', dirty ? 'bg-warning' : 'bg-success')} />
+          {saving ? t('actionBar.saving') : dirty ? dirtyMessage : cleanMessage}
+        </p>
+        <div className="flex items-center gap-2 sm:justify-end [&>*]:flex-1 sm:[&>*]:flex-none">
+          <Button variant="ghost" disabled={!dirty || saving} onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+          <Button variant="primary" loading={saving} disabled={!dirty} onClick={onSave}>
+            {saveLabel}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/page-chrome/StickyActionBar/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Sticky action bar',
+  family: 'page-chrome',
+  status: 'beta',
+  description: 'Sticky bottom bar for long forms with an unsaved-changes status, Discard and Save (with saving state).',
+  uses: ['Button'],
+};

package/src/page-chrome/index.ts

@@ -0,0 +1,13 @@
+export type { PageChromeAction } from './types';
+export * from './PageHeader/PageHeader';
+export * from './PageHeader/fixtures';
+export { meta as pageHeaderMeta } from './PageHeader/block.meta';
+export * from './SectionHeader/SectionHeader';
+export { meta as sectionHeaderMeta } from './SectionHeader/block.meta';
+export * from './PageToolbar/PageToolbar';
+export * from './PageToolbar/fixtures';
+export { meta as pageToolbarMeta } from './PageToolbar/block.meta';
+export * from './StickyActionBar/StickyActionBar';
+export { meta as stickyActionBarMeta } from './StickyActionBar/block.meta';
+export * from './BulkActionBar/BulkActionBar';
+export { meta as bulkActionBarMeta } from './BulkActionBar/block.meta';

package/src/page-chrome/types.ts

@@ -0,0 +1,25 @@
+import type { ButtonProps, MoreMenuAction } from '@gntik-ai/ui';
+import type { LucideIcon } from '@gntik-ai/icons';
+
+/** A header/toolbar action rendered as a kit Button (or a MoreMenu item when folded). */
+export interface PageChromeAction {
+  /** Stable key; defaults to `label`. */
+  id?: string;
+  label: string;
+  icon?: LucideIcon;
+  /** Button style; when omitted the block picks one (primary for the main action, secondary otherwise). */
+  variant?: ButtonProps['variant'];
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+/** Maps a PageChromeAction to a MoreMenu item (destructive variant → destructive item). */
+export function toMenuAction(action: PageChromeAction): MoreMenuAction {
+  return {
+    label: action.label,
+    icon: action.icon,
+    disabled: action.disabled,
+    destructive: action.variant === 'destructive',
+    onSelect: action.onClick,
+  };
+}

package/src/scheduling/AgendaList/AgendaList.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { AgendaList } from './AgendaList';
+
+describe('AgendaList', () => {
+  it('groups the next seven days by day', async () => {
+    const { container } = render(<AgendaList />);
+    expect(screen.getByRole('heading', { name: 'Today · Wednesday, April 15' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Tomorrow · Thursday, April 16' })).toBeInTheDocument();
+    expect(
+      within(screen.getByRole('list', { name: 'Today · Wednesday, April 15' })).getAllByRole('listitem'),
+    ).toHaveLength(9);
+    expect(screen.queryByRole('heading', { name: /April 22/ })).not.toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('reports clicks and shows the empty state', async () => {
+    const user = userEvent.setup();
+    const onEventClick = vi.fn();
+    const { unmount } = render(<AgendaList onEventClick={onEventClick} />);
+    await user.click(screen.getByRole('button', { name: /Checkout hotfix/ }));
+    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ title: 'Checkout hotfix' }));
+    unmount();
+    render(<AgendaList events={[]} />);
+    expect(screen.getByRole('heading', { name: 'Nothing scheduled' })).toBeInTheDocument();
+  });
+});

package/src/scheduling/AgendaList/AgendaList.tsx

@@ -0,0 +1,165 @@
+import { useId, useMemo } from 'react';
+import { Badge, EmptyState, cn, useI18n } from '@gntik-ai/ui';
+import { CalendarDays, ChevronRight, Clock } from '@gntik-ai/icons';
+import { EventTile } from '../shared/EventTile';
+import { addDays, dayKey, formatDay, formatRange, sameDay } from '../shared/dates';
+import { defaultEventKinds, groupByDay, kindOf, TONE, type EventKind, type ScheduleEvent } from '../shared/events';
+import { sampleEvents, sampleToday } from '../shared/fixtures';
+
+export interface AgendaListProps {
+  events?: ScheduleEvent[];
+  /** The app's "today": labels the Today/Tomorrow groups. */
+  today?: Date;
+  /** Only events on or after this day. Defaults to `today`; pass null for all. */
+  from?: Date | null;
+  /** Number of days shown from `from`. Default 7; null for no limit. */
+  days?: number | null;
+  /** Makes each row a button. */
+  onEventClick?: (event: ScheduleEvent) => void;
+  kinds?: Record<string, EventKind>;
+  title?: string;
+  /** Max height of the scrolling list in px. */
+  maxHeight?: number;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  /** Heading level of the title, to fit the page outline (default h3); inner headings use the next level. */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** Upcoming scheduled work grouped by day, each row with a kind tile, time range and location. */
+export function AgendaList({
+  events = sampleEvents,
+  today = sampleToday,
+  from,
+  days = 7,
+  onEventClick,
+  kinds = defaultEventKinds,
+  title: titleProp,
+  maxHeight,
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
+  titleAs: TitleTag = 'h3',
+  className,
+}: AgendaListProps) {
+  const { t, locale } = useI18n();
+  const title = titleProp ?? t('calendar.agenda');
+  const emptyTitle = emptyTitleProp ?? t('calendar.emptyTitle');
+  const emptyDescription = emptyDescriptionProp ?? t('calendar.emptyDescription');
+  const SubTag = TitleTag === 'h2' ? 'h3' : TitleTag === 'h3' ? 'h4' : 'h5';
+  const uid = useId();
+  const start = from === undefined ? today : from;
+  const groups = useMemo(() => {
+    const first = start ? dayKey(start) : null;
+    const last = start && days != null ? dayKey(addDays(start, days - 1)) : null;
+    return [...groupByDay(events).entries()]
+      .filter(([key]) => (first == null || key >= first) && (last == null || key <= last))
+      .sort(([a], [b]) => a.localeCompare(b));
+  }, [events, start, days]);
+
+  const dayLabel = (d: Date) => {
+    if (sameDay(d, today)) return `${t('calendar.today')} · ${formatDay(d, locale)}`;
+    if (sameDay(d, addDays(today, 1))) return `${t('calendar.tomorrow')} · ${formatDay(d, locale)}`;
+    return formatDay(d, locale);
+  };
+
+  return (
+    <section aria-label={title} className={cn('overflow-hidden rounded-xl border border-border bg-card', className)}>
+      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3 sm:px-5">
+        <TitleTag className="text-[15px] font-semibold tracking-tight text-foreground">{title}</TitleTag>
+        <span className="font-mono text-[11px] text-muted-foreground">
+          {groups.reduce((n, [, list]) => n + list.length, 0)} scheduled
+        </span>
+      </div>
+      {groups.length === 0 ? (
+        <EmptyState
+          icon={CalendarDays}
+          title={emptyTitle}
+          titleAs={TitleTag === 'h2' ? 'h3' : 'h4'}
+          description={emptyDescription}
+          className="py-12"
+        />
+      ) : (
+        <div
+          style={maxHeight ? { maxHeight } : undefined}
+          tabIndex={maxHeight ? 0 : undefined}
+          role={maxHeight ? 'region' : undefined}
+          aria-label={maxHeight ? `${title} list` : undefined}
+          className="overflow-y-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+        >
+          {groups.map(([key, list]) => {
+            const first = list[0];
+            if (!first) return null;
+            const headingId = `${uid}-${key}`;
+            return (
+              <div key={key}>
+                <SubTag
+                  id={headingId}
+                  className="border-b border-border bg-secondary/30 px-4 py-2 font-mono text-[11px] tracking-wide text-muted-foreground uppercase sm:px-5"
+                >
+                  {dayLabel(first.start)}
+                </SubTag>
+                <ul
+                  aria-labelledby={headingId}
+                  className="divide-y divide-border border-b border-border last:border-b-0"
+                >
+                  {list.map((event) => {
+                    const kind = kindOf(event, kinds);
+                    const range = formatRange(event.start, event.end, locale);
+                    const content = (
+                      <>
+                        <EventTile kind={kind} />
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate text-[13px] font-semibold text-foreground">
+                            {event.title}
+                          </span>
+                          <span className="mt-0.5 flex items-center gap-1.5 font-mono text-[11.5px] text-muted-foreground">
+                            <Clock size={12} aria-hidden className="shrink-0" />
+                            <span>{range}</span>
+                            {event.location && (
+                              <>
+                                <span aria-hidden>·</span>
+                                <span className="truncate">{event.location}</span>
+                              </>
+                            )}
+                          </span>
+                        </span>
+                        <Badge tone={TONE[kind.tone].badge} size="sm" className="hidden sm:inline-flex">
+                          {kind.label}
+                        </Badge>
+                      </>
+                    );
+                    const row = 'flex w-full items-center gap-3.5 px-4 py-3 text-start sm:px-5';
+                    return (
+                      <li key={event.id}>
+                        {onEventClick ? (
+                          <button
+                            type="button"
+                            onClick={() => onEventClick(event)}
+                            className={cn(
+                              row,
+                              'group transition-colors hover:bg-accent/30 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none',
+                            )}
+                          >
+                            {content}
+                            <ChevronRight
+                              size={16}
+                              aria-hidden
+                              className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground rtl:-scale-x-100"
+                            />
+                          </button>
+                        ) : (
+                          <div className={row}>{content}</div>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/scheduling/AgendaList/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Agenda list',
+  family: 'scheduling',
+  status: 'beta',
+  description:
+    'Upcoming scheduled work grouped by day (Today/Tomorrow labels), each row with a kind tile, time range, location and kind badge; empty state included.',
+  uses: ['Badge', 'EmptyState'],
+};

package/src/scheduling/MonthCalendar/MonthCalendar.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { MonthCalendar } from './MonthCalendar';
+
+describe('MonthCalendar', () => {
+  it('renders the sample month with today and event counts', async () => {
+    const { container } = render(<MonthCalendar />);
+    expect(screen.getByRole('heading', { name: 'April 2026' })).toBeInTheDocument();
+    expect(screen.getByRole('grid', { name: 'April 2026' })).toBeInTheDocument();
+    const today = screen.getByRole('button', { name: 'Wednesday, April 15, 2026, 9 events' });
+    expect(today).toHaveAttribute('aria-current', 'date');
+    expect(today).toHaveAttribute('tabindex', '0');
+    await expectNoAxeViolations(container);
+  });
+
+  it('navigates with the keyboard and selects a day', async () => {
+    const user = userEvent.setup();
+    const onSelectDate = vi.fn();
+    render(<MonthCalendar onSelectDate={onSelectDate} />);
+    screen.getByRole('button', { name: /April 15, 2026/ }).focus();
+    await user.keyboard('{ArrowDown}{ArrowRight}');
+    expect(screen.getByRole('button', { name: /April 23, 2026/ })).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(onSelectDate).toHaveBeenCalledWith(new Date(2026, 3, 23), []);
+    await user.keyboard('{PageDown}');
+    expect(screen.getByRole('heading', { name: 'May 2026' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /May 23, 2026/ })).toHaveFocus();
+    await user.click(screen.getByRole('button', { name: 'Previous month' }));
+    expect(screen.getByRole('heading', { name: 'April 2026' })).toBeInTheDocument();
+  });
+});