@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/search-results/Page.tsx

@@ -0,0 +1,243 @@
+import { NoResultsEmpty, PageHeader, SectionHeader } from '@gntik-ai/blocks';
+import { Search } from '@gntik-ai/icons';
+import {
+  Checkbox,
+  CheckboxGroup,
+  Grid,
+  GridItem,
+  Input,
+  Kbd,
+  Link,
+  Page,
+  Stack,
+  useI18n,
+  type BreadcrumbItem,
+} from '@gntik-ai/ui';
+import { useId, useRef, useState, type KeyboardEvent } from 'react';
+import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import {
+  searchBreadcrumbs,
+  searchDefaultQuery,
+  searchFacets,
+  searchHits,
+  searchTypeLabels,
+  searchTypeOrder,
+  type SearchFacet,
+  type SearchHit,
+} from './data';
+
+export type SearchSelection = Record<SearchFacet['id'], string[]>;
+
+export interface SearchResultsProps {
+  /** The index to search (a product passes its server results and keeps `query` in sync). */
+  hits: SearchHit[];
+  facets: SearchFacet[];
+  defaultQuery: string;
+  onQueryChange: (query: string) => void;
+  onSelectionChange: (selection: SearchSelection) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentHref: string;
+  /** ConsoleShell props (app nav, user, workspaces, sidebar footer, topbar…). */
+  shell: Omit<ConsoleShellProps, 'children'>;
+}
+
+const EMPTY_SELECTION: SearchSelection = { type: [], owner: [] };
+
+const facetValue = (hit: SearchHit, facet: SearchFacet['id']) => (facet === 'type' ? hit.type : hit.owner);
+
+/** Hits whose title or snippet contain the query (case-insensitive). */
+export function matchQuery(hits: readonly SearchHit[], query: string) {
+  const q = query.trim().toLowerCase();
+  return q ? hits.filter((h) => `${h.title} ${h.snippet}`.toLowerCase().includes(q)) : [...hits];
+}
+
+/** Search results: ConsoleShell + Page with Checkbox-group facets and results grouped by type. */
+export default function SearchResultsPage(props: Partial<SearchResultsProps>) {
+  const { t } = useI18n();
+  const {
+    hits = searchHits,
+    facets = searchFacets,
+    defaultQuery = searchDefaultQuery,
+    onQueryChange,
+    onSelectionChange,
+    breadcrumbs = searchBreadcrumbs,
+    currentHref = '/search',
+    shell,
+  } = props;
+  const id = useId();
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const [query, setQuery] = useState(defaultQuery);
+  const [selection, setSelection] = useState<SearchSelection>(EMPTY_SELECTION);
+
+  const matched = matchQuery(hits, query);
+  const results = matched.filter((h) =>
+    (Object.keys(selection) as Array<SearchFacet['id']>).every(
+      (f) => selection[f].length === 0 || selection[f].includes(facetValue(h, f)),
+    ),
+  );
+  const groups = searchTypeOrder
+    .map((type) => ({ type, hits: results.filter((h) => h.type === type) }))
+    .filter((g) => g.hits.length > 0);
+  const filterCount = selection.type.length + selection.owner.length;
+
+  const changeQuery = (next: string) => {
+    setQuery(next);
+    onQueryChange?.(next);
+  };
+  const changeSelection = (next: SearchSelection) => {
+    setSelection(next);
+    onSelectionChange?.(next);
+  };
+
+  /** Arrow keys move through every result link; Home / End jump to the ends. */
+  const focusResult = (move: 'first' | 'last' | 1 | -1) => {
+    const links = Array.from(resultsRef.current?.querySelectorAll<HTMLAnchorElement>('a[data-search-result]') ?? []);
+    if (links.length === 0) return;
+    const at = links.indexOf(document.activeElement as HTMLAnchorElement);
+    const next =
+      move === 'first' ? 0 : move === 'last' ? links.length - 1 : Math.min(links.length - 1, Math.max(0, at + move));
+    links[next]?.focus();
+  };
+  const onResultsKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    const keys: Record<string, 'first' | 'last' | 1 | -1> = { ArrowDown: 1, ArrowUp: -1, Home: 'first', End: 'last' };
+    const move = keys[e.key];
+    if (move === undefined) return;
+    e.preventDefault();
+    focusResult(move);
+  };
+
+  return (
+    <ConsoleShell breadcrumbs={breadcrumbs} currentHref={currentHref} {...shell}>
+      <Page
+        width="wide"
+        header={
+          <PageHeader
+            breadcrumbs={null}
+            title="Search"
+            description="Projects, deployments, members and documents across the workspace."
+            status=""
+            meta={[]}
+            tabs={null}
+            actions={[]}
+          />
+        }
+      >
+        <div role="search" aria-label="Workspace search">
+          <Input
+            type="search"
+            aria-label="Search the workspace"
+            aria-describedby={`${id}-hint`}
+            leadingIcon={Search}
+            value={query}
+            onValueChange={(v) => changeQuery(String(v))}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                focusResult('first');
+              }
+            }}
+            placeholder={t('common.searchPlaceholder')}
+            className="max-w-xl"
+          />
+          <p id={`${id}-hint`} className="mt-2 text-[12px] text-muted-foreground">
+            <Kbd>↓</Kbd> moves into the results · <Kbd>↑</Kbd> <Kbd>↓</Kbd> step through them
+          </p>
+        </div>
+        <Grid cols={{ base: 1, lg: 4 }} gap={6}>
+          <GridItem as="aside" aria-label={t('filters.label')} span={{ base: 1, lg: 1 }}>
+            <Stack gap={6}>
+              {facets.map((facet) => (
+                <div key={facet.id}>
+                  <p
+                    id={`${id}-${facet.id}`}
+                    className="mb-2.5 font-mono text-[10.5px] font-medium tracking-[0.12em] text-muted-foreground uppercase"
+                  >
+                    {facet.label}
+                  </p>
+                  <CheckboxGroup
+                    aria-labelledby={`${id}-${facet.id}`}
+                    value={selection[facet.id]}
+                    onValueChange={(value) => changeSelection({ ...selection, [facet.id]: value })}
+                  >
+                    {facet.options.map((o) => {
+                      const count = matched.filter((h) => facetValue(h, facet.id) === o.value).length;
+                      return (
+                        <Checkbox
+                          key={o.value}
+                          name={facet.id}
+                          value={o.value}
+                          label={
+                            <>
+                              {o.label} <span className="font-mono text-[11px] text-muted-foreground">{count}</span>
+                            </>
+                          }
+                        />
+                      );
+                    })}
+                  </CheckboxGroup>
+                </div>
+              ))}
+            </Stack>
+          </GridItem>
+          <GridItem span={{ base: 1, lg: 3 }}>
+            <p aria-live="polite" className="mb-4 text-[12.5px] text-muted-foreground">
+              <span className="font-mono text-foreground tabular-nums">{results.length}</span>{' '}
+              {results.length === 1 ? 'result' : 'results'}
+              {query.trim() && (
+                <>
+                  {' '}
+                  for “<span className="font-mono">{query.trim()}</span>”
+                </>
+              )}
+            </p>
+            {groups.length === 0 ? (
+              <NoResultsEmpty
+                titleAs="h2"
+                entity="results"
+                query={query.trim()}
+                filterCount={filterCount}
+                onClearFilters={() => changeSelection(EMPTY_SELECTION)}
+                onClearSearch={() => changeQuery('')}
+              />
+            ) : (
+              <div ref={resultsRef} onKeyDown={onResultsKey} className="flex flex-col gap-8">
+                {groups.map((group) => {
+                  const headingId = `${id}-group-${group.type}`;
+                  return (
+                    <section key={group.type} aria-labelledby={headingId}>
+                      <SectionHeader
+                        headingId={headingId}
+                        title={searchTypeLabels[group.type]}
+                        count={group.hits.length}
+                        description={null}
+                        actions={[]}
+                      />
+                      <ul aria-labelledby={headingId} className="mt-2 flex flex-col divide-y divide-border">
+                        {group.hits.map((hit) => (
+                          <li key={hit.id} className="py-3">
+                            <Link
+                              underline="hover"
+                              data-search-result
+                              href={hit.href}
+                              className="text-[14px] font-semibold"
+                            >
+                              {hit.title}
+                            </Link>
+                            <p className="mt-0.5 text-[13px] text-muted-foreground">{hit.snippet}</p>
+                            <p className="mt-1 font-mono text-[11px] text-muted-foreground">
+                              {hit.meta} · {hit.owner}
+                            </p>
+                          </li>
+                        ))}
+                      </ul>
+                    </section>
+                  );
+                })}
+              </div>
+            )}
+          </GridItem>
+        </Grid>
+      </Page>
+    </ConsoleShell>
+  );
+}

package/src/search-results/data.ts

@@ -0,0 +1,130 @@
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+export type SearchResultType = 'project' | 'deployment' | 'member' | 'document';
+
+export interface SearchHit {
+  id: string;
+  type: SearchResultType;
+  title: string;
+  snippet: string;
+  href: string;
+  owner: string;
+  /** Mono context line (region, id, email…). */
+  meta: string;
+}
+
+export interface SearchFacet {
+  id: 'type' | 'owner';
+  label: string;
+  options: Array<{ value: string; label: string }>;
+}
+
+export const searchTypeLabels: Record<SearchResultType, string> = {
+  project: 'Projects',
+  deployment: 'Deployments',
+  member: 'Members',
+  document: 'Documents',
+};
+
+export const searchTypeOrder: SearchResultType[] = ['project', 'deployment', 'member', 'document'];
+
+/** Neutral search index for the sample. */
+export const searchHits: SearchHit[] = [
+  {
+    id: 'p1',
+    type: 'project',
+    title: 'billing-api',
+    snippet: 'Invoices, payment methods and usage metering for the workspace.',
+    href: '/projects/billing-api',
+    owner: 'Dana Whitfield',
+    meta: 'eu-west-1 · Node 24',
+  },
+  {
+    id: 'p2',
+    type: 'project',
+    title: 'billing-web',
+    snippet: 'Customer-facing billing portal and plan management.',
+    href: '/projects/billing-web',
+    owner: 'Sam Patel',
+    meta: 'us-east-1 · Vite',
+  },
+  {
+    id: 'p3',
+    type: 'project',
+    title: 'orders-api',
+    snippet: 'Order intake and fulfilment; emits billing events.',
+    href: '/projects/orders-api',
+    owner: 'Lee Chen',
+    meta: 'eu-central-1 · Go',
+  },
+  {
+    id: 'd1',
+    type: 'deployment',
+    title: 'billing-api build 412',
+    snippet: 'Promoted to production · health checks passed in 38 s.',
+    href: '/deployments/dep_412',
+    owner: 'Dana Whitfield',
+    meta: 'dep_412 · production',
+  },
+  {
+    id: 'd2',
+    type: 'deployment',
+    title: 'billing-web #87',
+    snippet: 'Preview deployment for “New invoice layout”.',
+    href: '/deployments/dep_087',
+    owner: 'Sam Patel',
+    meta: 'dep_087 · preview',
+  },
+  {
+    id: 'd3',
+    type: 'deployment',
+    title: 'billing-api build 411',
+    snippet: 'Rolled back: error rate above 2% in us-east-1.',
+    href: '/deployments/dep_411',
+    owner: 'Lee Chen',
+    meta: 'dep_411 · production',
+  },
+  {
+    id: 'm1',
+    type: 'member',
+    title: 'Riley Morgan',
+    snippet: 'Billing admin · manages invoices and payment methods.',
+    href: '/members/riley',
+    owner: 'Dana Whitfield',
+    meta: 'riley@example.com',
+  },
+  {
+    id: 'doc1',
+    type: 'document',
+    title: 'Billing runbook',
+    snippet: 'What to do when a billing sync fails or invoices are delayed.',
+    href: '/docs/billing-runbook',
+    owner: 'Lee Chen',
+    meta: 'Updated 3 days ago',
+  },
+  {
+    id: 'doc2',
+    type: 'document',
+    title: 'Usage-based billing guide',
+    snippet: 'How metered usage turns into invoice line items.',
+    href: '/docs/usage-billing',
+    owner: 'Sam Patel',
+    meta: 'Updated last week',
+  },
+];
+
+export const searchFacets: SearchFacet[] = [
+  { id: 'type', label: 'Type', options: searchTypeOrder.map((t) => ({ value: t, label: searchTypeLabels[t] })) },
+  {
+    id: 'owner',
+    label: 'Owner',
+    options: ['Dana Whitfield', 'Sam Patel', 'Lee Chen'].map((name) => ({ value: name, label: name })),
+  },
+];
+
+export const searchDefaultQuery = 'billing';
+
+export const searchBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Acme Industries', href: '/overview' },
+  { label: 'Search' },
+];

package/src/search-results/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Search results',
+  family: 'Work',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Workspace search: query field, facets as Checkbox groups with counts, results grouped by type under SectionHeaders, arrow-key navigation through the results, and NoResultsEmpty.',
+  layout: 'SidebarLayout · Page',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'section-header', 'empty-states'],
+};

package/src/settings-api-keys/Page.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsApiKeysPage from './Page';
+
+describe('SettingsApiKeysPage', () => {
+  it('renders the key list', () => {
+    render(<SettingsApiKeysPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'API keys' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'API keys' })).toBeInTheDocument();
+    expect(screen.getByText('ci-deploy')).toBeInTheDocument();
+  }, 15000);
+
+  it('revokes a key after typing its name', async () => {
+    const onRevoke = vi.fn();
+    render(<SettingsApiKeysPage onRevoke={onRevoke} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Actions for ci-deploy' }));
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Revoke key' }));
+    const dialog = await screen.findByRole('alertdialog', { name: 'Revoke API key?' });
+    const confirm = within(dialog).getByRole('button', { name: 'Revoke key' });
+    expect(confirm).toBeDisabled();
+    await userEvent.type(within(dialog).getByRole('textbox'), 'ci-deploy');
+    await userEvent.click(confirm);
+    expect(onRevoke).toHaveBeenCalledWith(expect.objectContaining({ id: 'k1' }));
+    expect(within(screen.getByRole('table', { name: 'API keys' })).queryByText('ci-deploy')).not.toBeInTheDocument();
+  }, 15000);
+
+  it('opens the create dialog from the header', async () => {
+    render(<SettingsApiKeysPage />);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Create API key' })[0]!);
+    expect(await screen.findByRole('dialog', { name: 'Create API key' })).toBeInTheDocument();
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsApiKeysPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-api-keys/Page.tsx

@@ -0,0 +1,171 @@
+import {
+  ConfirmDestructive,
+  CreateApiKeyDialog,
+  DataTable,
+  generateDemoSecret,
+  type ApiKeyExpiry,
+  type ApiKeyScope,
+  type CreateApiKeyInput,
+  type DataTableColumn,
+} from '@gntik-ai/blocks';
+import { KeyRound, Plus, Trash2 } from '@gntik-ai/icons';
+import { Badge, EmptyState, Timestamp } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import { apiKeys as defaultKeys, expiries as defaultExpiries, scopes as defaultScopes, type ApiKey } from './data';
+
+export interface SettingsApiKeysProps extends SettingsFrameOptions {
+  keys: ApiKey[];
+  scopes: ApiKeyScope[];
+  expiries: ApiKeyExpiry[];
+  /** Creates a key and returns its secret (shown once). Defaults to a demo generator. */
+  onCreate: (input: CreateApiKeyInput) => string | Promise<string>;
+  /** Revokes a key after the typed confirmation. A rejection shows its message. */
+  onRevoke: (key: ApiKey) => void | Promise<void>;
+}
+
+const COLUMNS: DataTableColumn<ApiKey>[] = [
+  {
+    id: 'name',
+    header: 'Name',
+    accessor: (k) => k.name,
+    sortable: true,
+    cell: (k) => (
+      <div className="min-w-0">
+        <div className="truncate text-[13px] font-medium text-foreground">{k.name}</div>
+        <div className="font-mono text-[11.5px] text-muted-foreground">{k.prefix}…</div>
+      </div>
+    ),
+  },
+  {
+    id: 'scopes',
+    header: 'Scopes',
+    hideable: true,
+    cell: (k) => (
+      <div className="flex flex-wrap gap-1">
+        {k.scopes.map((s) => (
+          <Badge key={s} size="sm" className="font-mono">
+            {s}
+          </Badge>
+        ))}
+      </div>
+    ),
+  },
+  {
+    id: 'created',
+    header: 'Created',
+    accessor: (k) => k.createdAt,
+    sortable: true,
+    cell: (k) => <Timestamp value={k.createdAt} tooltip={false} />,
+  },
+  {
+    id: 'lastUsed',
+    header: 'Last used',
+    accessor: (k) => k.lastUsedAt ?? '',
+    sortable: true,
+    cell: (k) => (k.lastUsedAt ? <Timestamp value={k.lastUsedAt} tooltip={false} /> : 'Never'),
+  },
+  { id: 'createdBy', header: 'Created by', accessor: (k) => k.createdBy, defaultHidden: true },
+];
+
+/** API keys settings: DataTable of keys, CreateApiKeyDialog (header action), revoke via ConfirmDestructive. */
+export default function SettingsApiKeysPage({
+  keys = defaultKeys,
+  scopes = defaultScopes,
+  expiries = defaultExpiries,
+  onCreate = () => generateDemoSecret(),
+  onRevoke,
+  ...frame
+}: Partial<SettingsApiKeysProps>) {
+  const [created, setCreated] = useState<ApiKey[]>([]);
+  const [revokedIds, setRevokedIds] = useState<string[]>([]);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [revoking, setRevoking] = useState<ApiKey | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const rows = [...created, ...keys].filter((k) => !revokedIds.includes(k.id));
+
+  const create = async (input: CreateApiKeyInput) => {
+    const secret = await onCreate(input);
+    setCreated((list) => [
+      {
+        id: `new-${list.length}-${input.name}`,
+        name: input.name,
+        prefix: secret.slice(0, 12),
+        scopes: input.scopes,
+        createdAt: new Date().toISOString(),
+        lastUsedAt: null,
+        createdBy: 'You',
+      },
+      ...list,
+    ]);
+    return secret;
+  };
+
+  const revoke = async () => {
+    if (!revoking) return;
+    await onRevoke?.(revoking);
+    setRevokedIds((ids) => [...ids, revoking.id]);
+  };
+
+  return (
+    <SettingsFrame
+      page="api-keys"
+      width="wide"
+      description="Keys authenticate scripts and services against the API. Treat them like passwords."
+      actions={[{ label: 'Create API key', icon: Plus, variant: 'primary', onClick: () => setCreateOpen(true) }]}
+      {...frame}
+    >
+      <DataTable
+        rows={rows}
+        columns={COLUMNS}
+        caption="API keys"
+        showCaption
+        paginated={false}
+        getRowLabel={(k) => k.name}
+        rowActions={(k) => [
+          {
+            label: 'Revoke key',
+            icon: Trash2,
+            destructive: true,
+            onSelect: () => {
+              setRevoking(k);
+              setConfirmOpen(true);
+            },
+          },
+        ]}
+        emptyState={
+          <EmptyState
+            icon={KeyRound}
+            title="No API keys"
+            description="Create a key to call the API from scripts and services."
+          />
+        }
+      />
+      <CreateApiKeyDialog
+        trigger={null}
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        scopes={scopes}
+        expiries={expiries}
+        onCreate={create}
+      />
+      {revoking && (
+        <ConfirmDestructive
+          key={revoking.id}
+          triggerLabel={null}
+          open={confirmOpen}
+          onOpenChange={setConfirmOpen}
+          resourceName={revoking.name}
+          resourceType="API key"
+          title="Revoke API key?"
+          confirmLabel="Revoke key"
+          consequences={[
+            'Requests signed with this key start failing immediately',
+            'Scripts and services using it must get a new key',
+          ]}
+          onConfirm={revoke}
+        />
+      )}
+    </SettingsFrame>
+  );
+}

package/src/settings-api-keys/data.ts

@@ -0,0 +1,58 @@
+import { apiKeyExpiries, apiKeyScopes, type ApiKeyExpiry, type ApiKeyScope } from '@gntik-ai/blocks';
+
+const daysAgo = (d: number) => new Date(Date.now() - d * 86_400_000).toISOString();
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  /** Visible start of the secret, e.g. "sk_live_3f9a". */
+  prefix: string;
+  scopes: string[];
+  /** ISO date. */
+  createdAt: string;
+  /** ISO date; null when never used. */
+  lastUsedAt: string | null;
+  createdBy: string;
+}
+
+export const scopes: ApiKeyScope[] = apiKeyScopes;
+export const expiries: ApiKeyExpiry[] = apiKeyExpiries;
+
+export const apiKeys: ApiKey[] = [
+  {
+    id: 'k1',
+    name: 'ci-deploy',
+    prefix: 'sk_live_3f9a',
+    scopes: ['projects:read', 'projects:write'],
+    createdAt: daysAgo(120),
+    lastUsedAt: daysAgo(0.02),
+    createdBy: 'Avery Collins',
+  },
+  {
+    id: 'k2',
+    name: 'metrics-exporter',
+    prefix: 'sk_live_81c0',
+    scopes: ['projects:read', 'billing:read'],
+    createdAt: daysAgo(64),
+    lastUsedAt: daysAgo(1),
+    createdBy: 'Sam Rivera',
+  },
+  {
+    id: 'k3',
+    name: 'directory-sync',
+    prefix: 'sk_live_c27e',
+    scopes: ['members:read'],
+    createdAt: daysAgo(30),
+    lastUsedAt: daysAgo(9),
+    createdBy: 'Avery Collins',
+  },
+  {
+    id: 'k4',
+    name: 'local-testing',
+    prefix: 'sk_live_09bd',
+    scopes: ['projects:read'],
+    createdAt: daysAgo(4),
+    lastUsedAt: null,
+    createdBy: 'Jordan Lee',
+  },
+];

package/src/settings-api-keys/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'API keys settings',
+  family: 'Settings',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'API key list with scopes and last use, a create-key dialog that shows the secret once, and typed revoke confirmation.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'data-table', 'create-api-key-dialog', 'confirm-destructive'],
+};