@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/resource-index/Page.tsx

@@ -0,0 +1,216 @@
+import {
+  BulkActionBar,
+  DataTable,
+  FilterBar,
+  NoResultsEmpty,
+  PageHeader,
+  type ActiveFilter,
+  type DataTableColumn,
+  type FilterField,
+  type SavedView,
+} from '@gntik-ai/blocks';
+import { Archive, Download, Plus, Trash2 } from '@gntik-ai/icons';
+import { Link, Page, Stack, type BreadcrumbItem } from '@gntik-ai/ui';
+import { useMemo, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  filterResources,
+  resourceBreadcrumbs,
+  resourceColumns,
+  resourceFilterFields,
+  resourceRows,
+  resourceSavedViews,
+  type ResourceRow,
+} from './data';
+
+export type ResourceBulkAction = 'export' | 'archive' | 'delete';
+
+/**
+ * `T` is the row type (default: the deployment fixture rows). Columns decide what is shown,
+ * sorted and filtered: a filter field reads the column with the same id.
+ */
+export interface ResourceIndexProps<T extends object = ResourceRow> {
+  title: string;
+  description: string;
+  breadcrumbs: BreadcrumbItem[];
+  /** Initial rows; the page keeps its own copy so the demo bulk actions take effect. */
+  rows: readonly T[];
+  columns: ReadonlyArray<DataTableColumn<T>>;
+  /** FilterBar fields; each `id` matches a column id (or a row property). */
+  filterFields: readonly FilterField[];
+  savedViews: readonly SavedView[];
+  /** Stable row id (defaults to `row.id`). */
+  getRowId: (row: T) => string;
+  /** Detail page of a row: the name cell becomes a kit Link (routed through LinkProvider). */
+  getRowHref: (row: T) => string;
+  /** Called when the name cell is activated (with `getRowHref`, on top of the navigation). */
+  onRowClick: (row: T) => void;
+  /** Column whose cell links to the row (defaults to the first column). */
+  linkColumnId: string;
+  /** Noun for counts and empty states, singular and plural. */
+  noun: [singular: string, plural: string];
+  createLabel: string;
+  onCreate: () => void;
+  onOpen: (row: T) => void;
+  /**
+   * Called for every bulk action. Without it, Archive pauses and Delete removes the rows locally
+   * (the fixture behaviour); with it the product decides and passes fresh `rows`.
+   */
+  onBulkAction: (action: ResourceBulkAction, ids: string[]) => void;
+  /** Local Archive without `onBulkAction`; defaults to `status: 'paused'` on rows that have a status. */
+  archiveRow: (row: T) => T;
+  loading: boolean;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const defaultRowId = (row: object): string => {
+  const id = (row as { id?: unknown }).id;
+  return typeof id === 'string' || typeof id === 'number' ? String(id) : '';
+};
+
+const defaultArchive = <T extends object>(row: T): T => ('status' in row ? { ...row, status: 'paused' } : row);
+
+/** Resource index: header, filter bar, selectable sortable table with pagination, bulk action bar and a no-results state. */
+export default function ResourceIndexPage<T extends object = ResourceRow>({
+  title = 'Deployments',
+  description = 'Every service deployed in this workspace, across regions.',
+  breadcrumbs = resourceBreadcrumbs,
+  rows: initialRows = resourceRows as unknown as readonly T[],
+  columns = resourceColumns as unknown as ReadonlyArray<DataTableColumn<T>>,
+  filterFields = resourceFilterFields,
+  savedViews = resourceSavedViews,
+  getRowId = defaultRowId,
+  getRowHref,
+  onRowClick,
+  linkColumnId,
+  noun = ['deployment', 'deployments'],
+  createLabel = 'New deployment',
+  onCreate,
+  onOpen,
+  onBulkAction,
+  archiveRow = defaultArchive,
+  loading = false,
+  shell,
+}: Partial<ResourceIndexProps<T>>) {
+  const [rows, setRows] = useState<readonly T[]>(initialRows);
+  const [query, setQuery] = useState('');
+  const [filters, setFilters] = useState<ActiveFilter[]>([]);
+  const [selected, setSelected] = useState<string[]>([]);
+  const visible = filterResources(rows, query, filters, columns);
+  const visibleSelected = selected.filter((id) => visible.some((r) => getRowId(r) === id));
+  const tableColumns = useMemo(
+    () => linkColumns(columns, linkColumnId ?? columns[0]?.id, getRowHref, onRowClick),
+    [columns, linkColumnId, getRowHref, onRowClick],
+  );
+
+  const runBulk = (action: ResourceBulkAction, ids: string[] = visibleSelected) => {
+    if (onBulkAction) onBulkAction(action, ids);
+    else if (action === 'delete') setRows((prev) => prev.filter((r) => !ids.includes(getRowId(r))));
+    else if (action === 'archive') setRows((prev) => prev.map((r) => (ids.includes(getRowId(r)) ? archiveRow(r) : r)));
+    if (action !== 'export') setSelected((prev) => prev.filter((id) => !ids.includes(id)));
+  };
+
+  return (
+    <ConsoleShell currentHref="/deployments" breadcrumbs={breadcrumbs} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title={title}
+            description={description}
+            status=""
+            meta={[{ label: 'Total', value: `${rows.length} ${rows.length === 1 ? noun[0] : noun[1]}` }]}
+            tabs={null}
+            actions={[{ label: createLabel, icon: Plus, variant: 'primary', onClick: onCreate }]}
+          />
+        }
+        actionBarLabel="Bulk actions"
+        actionBar={
+          visibleSelected.length > 0 ? (
+            <BulkActionBar
+              selectedCount={visibleSelected.length}
+              totalCount={visible.length}
+              noun={noun}
+              onClear={() => setSelected([])}
+              actions={[
+                { label: 'Export', icon: Download, onClick: () => runBulk('export') },
+                { label: 'Archive', icon: Archive, onClick: () => runBulk('archive') },
+                { label: 'Delete', icon: Trash2, variant: 'destructive', onClick: () => runBulk('delete') },
+              ]}
+            />
+          ) : undefined
+        }
+      >
+        <Stack gap={4}>
+          <FilterBar
+            fields={filterFields}
+            query={query}
+            onQueryChange={setQuery}
+            filters={filters}
+            onFiltersChange={setFilters}
+            defaultFilters={[]}
+            views={savedViews}
+            placeholder={`Search ${noun[1]} by name or id…`}
+            resultCount={visible.length}
+          />
+          <DataTable<T>
+            rows={visible}
+            columns={tableColumns}
+            getRowId={getRowId}
+            caption={title}
+            loading={loading}
+            selectedIds={visibleSelected}
+            onSelectionChange={setSelected}
+            // The BulkActionBar above already announces the count.
+            selectionSummary={false}
+            rowActions={(row) => [
+              { label: 'Open', onSelect: () => onOpen?.(row) },
+              'separator',
+              { label: 'Delete', icon: Trash2, destructive: true, onSelect: () => runBulk('delete', [getRowId(row)]) },
+            ]}
+            emptyState={
+              <NoResultsEmpty
+                entity={noun[1]}
+                query={query}
+                filterCount={filters.length}
+                onClearFilters={() => setFilters([])}
+                onClearSearch={() => setQuery('')}
+                titleAs="h2"
+              />
+            }
+          />
+        </Stack>
+      </Page>
+    </ConsoleShell>
+  );
+}
+
+/** Wraps the link column's cell in a kit Link (href) or a link-styled button (click only). */
+function linkColumns<T>(
+  columns: ReadonlyArray<DataTableColumn<T>>,
+  columnId: string | undefined,
+  getRowHref: ((row: T) => string) | undefined,
+  onRowClick: ((row: T) => void) | undefined,
+): ReadonlyArray<DataTableColumn<T>> {
+  if (!getRowHref && !onRowClick) return columns;
+  return columns.map((col) => {
+    if (col.id !== columnId) return col;
+    const content = (row: T) => (col.cell ? col.cell(row) : String(col.accessor?.(row) ?? ''));
+    return {
+      ...col,
+      cell: (row: T) => {
+        const onClick = onRowClick ? () => onRowClick(row) : undefined;
+        return getRowHref ? (
+          <Link href={getRowHref(row)} tone="inherit" underline="hover" onClick={onClick}>
+            {content(row)}
+          </Link>
+        ) : (
+          <Link render={<button type="button" />} tone="inherit" underline="hover" onClick={onClick}>
+            {content(row)}
+          </Link>
+        );
+      },
+    };
+  });
+}

package/src/resource-index/data.ts

@@ -0,0 +1,84 @@
+import {
+  DEPLOYMENT_COLUMNS,
+  DEPLOYMENT_ROWS,
+  type ActiveFilter,
+  type DeploymentRow,
+  type FilterField,
+  type SavedView,
+} from '@gntik-ai/blocks';
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export type ResourceRow = DeploymentRow;
+
+export const resourceRows: ResourceRow[] = DEPLOYMENT_ROWS;
+export const resourceColumns = DEPLOYMENT_COLUMNS;
+
+export const resourceBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Overview', href: '/overview' },
+  { label: 'Deployments' },
+];
+
+export const resourceFilterFields: FilterField[] = [
+  { id: 'status', label: 'Status', options: ['Running', 'Queued', 'Paused', 'Degraded', 'Failed'] },
+  { id: 'region', label: 'Region', options: ['eu-west-1', 'us-east-1', 'ap-south-1', 'eu-central-1'] },
+];
+
+export const resourceSavedViews: SavedView[] = [
+  { value: 'all', label: 'All deployments', filters: [] },
+  {
+    value: 'attention',
+    label: 'Needs attention',
+    filters: [
+      { field: 'status', value: 'Degraded' },
+      { field: 'status', value: 'Failed' },
+    ],
+  },
+  {
+    value: 'eu',
+    label: 'EU regions',
+    filters: [
+      { field: 'region', value: 'eu-west-1' },
+      { field: 'region', value: 'eu-central-1' },
+    ],
+  },
+];
+
+type Column<T> = { id: string; accessor?: (row: T) => unknown };
+
+const fieldValue = <T extends object>(row: T, field: string, columns?: ReadonlyArray<Column<T>>): unknown => {
+  const accessor = columns?.find((c) => c.id === field)?.accessor;
+  return accessor ? accessor(row) : (row as Record<string, unknown>)[field];
+};
+
+const text = (v: unknown) => (typeof v === 'string' || typeof v === 'number' ? String(v).toLowerCase() : undefined);
+
+/**
+ * Search by name or id (or, without them, every column value); filters on one field are OR, across fields AND, matched case-insensitively.
+ * A filter field reads the column with the same id (its `accessor`), else the row property of that
+ * name, so statuses come from the columns.
+ */
+export function filterResources<T extends object = ResourceRow>(
+  rows: readonly T[],
+  query: string,
+  filters: readonly ActiveFilter[],
+  columns?: ReadonlyArray<Column<T>>,
+): T[] {
+  const q = query.trim().toLowerCase();
+  const byField = new Map<string, string[]>();
+  for (const f of filters) byField.set(f.field, [...(byField.get(f.field) ?? []), f.value.toLowerCase()]);
+  return rows.filter((row) => {
+    if (q) {
+      const r = row as Record<string, unknown>;
+      let haystack = [r.name, r.id].map(text).filter((v) => v !== undefined);
+      // Rows without a name/id: search every column value instead.
+      if (haystack.length === 0 && columns)
+        haystack = columns.map((c) => text(c.accessor?.(row))).filter((v) => v !== undefined);
+      if (!haystack.some((v) => v.includes(q))) return false;
+    }
+    for (const [field, values] of byField) {
+      const value = text(fieldValue(row, field, columns));
+      if (value !== undefined && !values.includes(value)) return false;
+    }
+    return true;
+  });
+}

package/src/resource-index/template.meta.ts

@@ -0,0 +1,21 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Resource index',
+  family: 'Resources',
+  priority: 'P1',
+  status: 'beta',
+  description:
+    'List page for any resource: header with the create action, filter bar with saved views, a selectable sortable table with pagination, a sticky bulk action bar and a no-results state.',
+  layout: 'SidebarLayout + Page',
+  blocks: [
+    'app-sidebar',
+    'app-topbar',
+    'page-header',
+    'filter-bar',
+    'data-table',
+    'pagination-footer',
+    'bulk-action-bar',
+    'empty-states',
+  ],
+};

package/src/resource-tree/Page.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ResourceTreePage from './Page';
+import { groupRows, treeResources } from './data';
+
+describe('ResourceTreePage', () => {
+  it('renders the tree and one table per group', { timeout: 15000 }, async () => {
+    render(<ResourceTreePage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Resources' })).toBeInTheDocument();
+    expect(screen.getByRole('tree', { name: 'Teams and projects' })).toBeInTheDocument();
+    const groups = groupRows(treeResources, 'kind');
+    for (const g of groups) expect(screen.getByRole('table', { name: `${g.label} resources` })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /\+2 more/ }).length).toBeGreaterThan(0);
+    await expectNoAxeViolations();
+  });
+
+  it('filters by a tree node and regroups', { timeout: 15000 }, async () => {
+    render(<ResourceTreePage />);
+    await userEvent.click(within(screen.getByRole('tree')).getByText('compliance'));
+    expect(screen.getByText('compliance · 2 resources')).toBeInTheDocument();
+    expect(screen.queryByRole('table', { name: 'Services resources' })).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('combobox', { name: 'Group by' }));
+    await userEvent.click(await screen.findByRole('option', { name: 'Region' }));
+    const table = screen.getByRole('table', { name: 'ap-south-1 resources' });
+    expect(within(table).getAllByRole('row')).toHaveLength(3);
+    await userEvent.click(screen.getByRole('button', { name: 'All resources' }));
+    expect(screen.getByText(`All resources · ${treeResources.length} resources`)).toBeInTheDocument();
+  });
+});

package/src/resource-tree/Page.tsx

@@ -0,0 +1,232 @@
+import { DataTable, PageHeader, SectionHeader, type DataTableColumn } from '@gntik-ai/blocks';
+import { Plus } from '@gntik-ai/icons';
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  HStack,
+  OverflowList,
+  Page,
+  SimpleSelect,
+  Stack,
+  StatusTag,
+  Text,
+  Timestamp,
+  TreeList,
+  type BreadcrumbItem,
+  type StatusDefinition,
+} from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  buildResourceTree,
+  groupByLabels,
+  groupRows,
+  kindIcons,
+  resourceTreeBreadcrumbs,
+  rowsUnder,
+  treeResources,
+  type ResourceGroupBy,
+  type TreeResource,
+} from './data';
+
+export interface ResourceTreeProps {
+  resources: TreeResource[];
+  defaultGroupBy: ResourceGroupBy;
+  /** Initially selected tree node (`team:<name>` or `project:<name>`); none = every resource. */
+  defaultNodeId: string | null;
+  onOpen: (resource: TreeResource) => void;
+  onCreate: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const STATUSES: Record<string, StatusDefinition> = {
+  healthy: { label: 'Healthy', tone: 'success' },
+  degraded: { label: 'Degraded', tone: 'warning' },
+  stopped: { label: 'Stopped', tone: 'neutral' },
+};
+
+const GROUP_ITEMS = (Object.keys(groupByLabels) as ResourceGroupBy[]).map((value) => ({
+  value,
+  label: groupByLabels[value],
+}));
+
+function columns(onOpen?: (r: TreeResource) => void): DataTableColumn<TreeResource>[] {
+  return [
+    {
+      id: 'name',
+      header: 'Name',
+      accessor: (r) => r.name,
+      sortable: true,
+      cell: (r) => {
+        const Icon = kindIcons[r.kind];
+        return (
+          <span className="inline-flex items-center gap-2">
+            <Icon size={14} aria-hidden className="shrink-0 text-muted-foreground" />
+            {onOpen ? (
+              <button
+                type="button"
+                onClick={() => onOpen(r)}
+                className="font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+              >
+                {r.name}
+              </button>
+            ) : (
+              <span className="font-medium text-foreground">{r.name}</span>
+            )}
+          </span>
+        );
+      },
+    },
+    { id: 'project', header: 'Project', accessor: (r) => r.project, sortable: true, variant: 'muted' },
+    { id: 'region', header: 'Region', accessor: (r) => r.region, variant: 'mono' },
+    {
+      id: 'status',
+      header: 'Status',
+      accessor: (r) => r.status,
+      cell: (r) => <StatusTag status={r.status} statuses={STATUSES} />,
+    },
+    {
+      id: 'tags',
+      header: 'Tags',
+      cell: (r) => (
+        <OverflowList
+          label={`${r.name} tags`}
+          items={r.tags}
+          max={2}
+          renderItem={(t) => (
+            <Badge variant="outline" size="sm">
+              {t}
+            </Badge>
+          )}
+          renderOverflowItem={(t) => t}
+        />
+      ),
+    },
+    {
+      id: 'updated',
+      header: 'Updated',
+      accessor: (r) => r.updatedAt,
+      sortable: true,
+      cell: (r) => <Timestamp value={r.updatedAt} className="text-muted-foreground" />,
+    },
+  ];
+}
+
+/** Resource index browsed by a team → project TreeList, with grouped DataTables and tag overflow. */
+export default function ResourceTreePage(props: Partial<ResourceTreeProps>) {
+  const {
+    resources = treeResources,
+    defaultGroupBy = 'kind',
+    defaultNodeId = null,
+    onOpen,
+    onCreate,
+    breadcrumbs = resourceTreeBreadcrumbs,
+    currentHref = '/resources',
+    shell,
+  } = props;
+  const [nodeId, setNodeId] = useState<string | null>(defaultNodeId);
+  const [groupBy, setGroupBy] = useState<ResourceGroupBy>(defaultGroupBy);
+  const ids = useId();
+  const tree = buildResourceTree(resources);
+  const rows = rowsUnder(resources, nodeId);
+  const groups = groupRows(rows, groupBy);
+  const scope = nodeId ? nodeId.split(':')[1] : 'All resources';
+  const cols = columns(onOpen);
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title="Resources"
+            description="Services, databases, buckets and queues by team and project."
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[{ label: 'New resource', icon: Plus, onClick: onCreate }]}
+          />
+        }
+      >
+        <div className="grid gap-6 lg:grid-cols-[17rem_minmax(0,1fr)]">
+          <Card className="self-start">
+            <CardHeader divided>
+              <CardTitle as="h2">Teams</CardTitle>
+            </CardHeader>
+            <CardBody className="p-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="mb-1 w-full justify-start"
+                aria-pressed={nodeId === null}
+                onClick={() => setNodeId(null)}
+              >
+                All resources
+              </Button>
+              <TreeList
+                aria-label="Teams and projects"
+                nodes={tree}
+                defaultExpanded={tree.map((n) => n.id)}
+                selectionMode="single"
+                selected={nodeId ? [nodeId] : []}
+                onSelectedChange={(next) => setNodeId(next[0] ?? null)}
+              />
+            </CardBody>
+          </Card>
+          <Stack gap={6} className="min-w-0">
+            <HStack gap={3} wrap justify="between">
+              <Text id={`${ids}-scope`} as="span" variant="label" aria-live="polite">
+                {scope} · {rows.length === 1 ? '1 resource' : `${rows.length} resources`}
+              </Text>
+              <HStack gap={2}>
+                <Text as="span" variant="supporting" tone="muted">
+                  Group by
+                </Text>
+                <SimpleSelect
+                  aria-label="Group by"
+                  size="sm"
+                  items={GROUP_ITEMS}
+                  value={groupBy}
+                  onValueChange={(v) => v && setGroupBy(v)}
+                  className="w-32"
+                />
+              </HStack>
+            </HStack>
+            {groups.length === 0 ? (
+              <EmptyState
+                size="sm"
+                titleAs="h2"
+                title="No resources here"
+                description="Pick another team or project."
+              />
+            ) : (
+              groups.map((g) => (
+                <section key={g.key} aria-labelledby={`${ids}-${g.key}`}>
+                  <SectionHeader headingId={`${ids}-${g.key}`} title={g.label} count={g.rows.length} as="h2" />
+                  <DataTable<TreeResource>
+                    rows={g.rows}
+                    columns={cols}
+                    caption={`${g.label} resources`}
+                    getRowLabel={(r) => r.name}
+                    paginated={false}
+                    showDensityToggle={false}
+                    showColumnMenu={false}
+                    defaultSort={{ columnId: 'name', direction: 'ascending' }}
+                  />
+                </section>
+              ))
+            )}
+          </Stack>
+        </div>
+      </Page>
+    </ConsoleShell>
+  );
+}