@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/settings-members/Page.test.tsx

@@ -0,0 +1,32 @@
+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 SettingsMembersPage from './Page';
+
+describe('SettingsMembersPage', () => {
+  it('renders members, invitations and the role matrix', () => {
+    render(<SettingsMembersPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Members' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Workspace members' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Pending invitations' })).toBeInTheDocument();
+    const matrix = screen.getByRole('table', { name: 'Permissions by role' });
+    expect(within(matrix).getByRole('rowheader', { name: 'Delete the workspace' })).toBeInTheDocument();
+  }, 15000);
+
+  it('opens the invite dialog from the header and sends invitations', async () => {
+    const onInvite = vi.fn();
+    render(<SettingsMembersPage onInvite={onInvite} />);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Invite members' })[0]!);
+    const dialog = await screen.findByRole('dialog', { name: 'Invite members' });
+    await userEvent.type(within(dialog).getByLabelText(/Email addresses/), 'new.person@example.com,');
+    await userEvent.click(within(dialog).getByRole('button', { name: 'Send invitation' }));
+    expect(onInvite).toHaveBeenCalledWith(expect.objectContaining({ emails: ['new.person@example.com'] }));
+    expect(await screen.findByText('new.person@example.com')).toBeInTheDocument();
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsMembersPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-members/Page.tsx

@@ -0,0 +1,140 @@
+import {
+  InviteMembersDialog,
+  MembersTable,
+  PendingInvitations,
+  type Invitation,
+  type InvitePayload,
+  type Member,
+  type RoleOption,
+} from '@gntik-ai/blocks';
+import { Check, Minus, UserPlus } from '@gntik-ai/icons';
+import { Section, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import {
+  invitations as defaultInvitations,
+  members as defaultMembers,
+  rolePermissions as defaultPermissions,
+  roles as defaultRoles,
+  type RolePermission,
+} from './data';
+
+export interface SettingsMembersProps extends SettingsFrameOptions {
+  members: Member[];
+  invitations: Invitation[];
+  roles: RoleOption[];
+  /** Rows of the role matrix. */
+  permissions: RolePermission[];
+  /** Id of the signed-in member. */
+  currentUserId: string;
+  /** Sends invitations. A rejection keeps the dialog open with its message. */
+  onInvite: (payload: InvitePayload) => void | Promise<void>;
+  onRoleChange: (memberId: string, role: string) => void;
+  onRemove: (member: Member) => void;
+  onResendInvitation: (invitation: Invitation) => void | Promise<void>;
+  onRevokeInvitation: (invitation: Invitation) => void;
+}
+
+/** Members settings: MembersTable, PendingInvitations, InviteMembersDialog (header action), role matrix. */
+export default function SettingsMembersPage({
+  members = defaultMembers,
+  invitations = defaultInvitations,
+  roles = defaultRoles,
+  permissions = defaultPermissions,
+  currentUserId = 'u1',
+  onInvite,
+  onRoleChange,
+  onRemove,
+  onResendInvitation,
+  onRevokeInvitation,
+  ...frame
+}: Partial<SettingsMembersProps>) {
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [sent, setSent] = useState<Invitation[]>([]);
+  const roleLabel = (value: string) => roles.find((r) => r.value === value)?.label ?? value;
+
+  const invite = async (payload: InvitePayload) => {
+    await onInvite?.(payload);
+    const now = new Date().toISOString();
+    setSent((list) => [
+      ...payload.emails.map((email, i) => ({
+        id: `new-${list.length + i}-${email}`,
+        email,
+        role: roleLabel(payload.role),
+        invitedBy: 'You',
+        invitedAt: now,
+      })),
+      ...list,
+    ]);
+  };
+
+  return (
+    <SettingsFrame
+      page="members"
+      width="wide"
+      description="Invite people to the workspace and manage what they can do."
+      actions={[{ label: 'Invite members', icon: UserPlus, variant: 'primary', onClick: () => setInviteOpen(true) }]}
+      {...frame}
+    >
+      <Section title="Members" description={`${members.length} people have access to this workspace.`}>
+        <MembersTable
+          members={members}
+          roles={roles}
+          currentUserId={currentUserId}
+          onRoleChange={onRoleChange}
+          onRemove={onRemove}
+        />
+      </Section>
+      <PendingInvitations
+        invitations={[...sent, ...invitations]}
+        onResend={onResendInvitation}
+        onRevoke={onRevokeInvitation}
+      />
+      <Section title="Roles" description="What each role can do. Owners can change any member's role.">
+        <Table className="min-w-[560px]">
+          <TableCaption srOnly>Permissions by role</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Permission</TableHead>
+              {roles.map((r) => (
+                <TableHead key={r.value} align="center">
+                  {r.label}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {permissions.map((p) => (
+              <TableRow key={p.id}>
+                <TableHead scope="row" className="font-normal text-foreground">
+                  {p.label}
+                </TableHead>
+                {roles.map((r) => {
+                  const allowed = p.roles.includes(r.value);
+                  const Glyph = allowed ? Check : Minus;
+                  return (
+                    <TableCell key={r.value} align="center">
+                      <Glyph
+                        size={15}
+                        aria-hidden
+                        className={allowed ? 'mx-auto text-primary-text' : 'mx-auto text-muted-foreground'}
+                      />
+                      <span className="sr-only">{allowed ? 'Allowed' : 'Not allowed'}</span>
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Section>
+      <InviteMembersDialog
+        trigger={null}
+        open={inviteOpen}
+        onOpenChange={setInviteOpen}
+        roles={roles}
+        onInvite={invite}
+      />
+    </SettingsFrame>
+  );
+}

package/src/settings-members/data.ts

@@ -0,0 +1,28 @@
+import {
+  memberRoles,
+  sampleInvitations,
+  sampleMembers,
+  type Invitation,
+  type Member,
+  type RoleOption,
+} from '@gntik-ai/blocks';
+
+export const members: Member[] = sampleMembers;
+export const invitations: Invitation[] = sampleInvitations;
+export const roles: RoleOption[] = memberRoles;
+
+export interface RolePermission {
+  id: string;
+  label: string;
+  /** Role values that have this permission. */
+  roles: string[];
+}
+
+export const rolePermissions: RolePermission[] = [
+  { id: 'view', label: 'View projects and deployments', roles: ['owner', 'admin', 'member', 'viewer'] },
+  { id: 'deploy', label: 'Create and deploy projects', roles: ['owner', 'admin', 'member'] },
+  { id: 'secrets', label: 'Manage environment secrets', roles: ['owner', 'admin'] },
+  { id: 'members', label: 'Invite and remove members', roles: ['owner', 'admin'] },
+  { id: 'billing', label: 'Manage billing and plans', roles: ['owner'] },
+  { id: 'delete', label: 'Delete the workspace', roles: ['owner'] },
+];

package/src/settings-members/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Members settings',
+  family: 'Settings',
+  priority: 'P1',
+  status: 'beta',
+  description:
+    'Workspace members with inline roles, pending invitations, an invite dialog and a role permission matrix.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'members-table', 'pending-invitations', 'invite-members-dialog'],
+};

package/src/settings-notifications/Page.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsNotificationsPage from './Page';
+
+describe('SettingsNotificationsPage', () => {
+  it('renders the matrix', () => {
+    render(<SettingsNotificationsPage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Notifications' })).toBeInTheDocument();
+    expect(screen.getByRole('table', { name: 'Notification preferences' })).toBeInTheDocument();
+  }, 15000);
+
+  it('saves a changed preference and can discard', async () => {
+    const onSave = vi.fn();
+    render(<SettingsNotificationsPage onSave={onSave} />);
+    const cell = screen.getByRole('checkbox', { name: 'Member joined by Push' });
+    await userEvent.click(cell);
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeEnabled();
+    await userEvent.click(screen.getByRole('button', { name: 'Discard' }));
+    expect(screen.getByRole('button', { name: 'Save changes' })).toBeDisabled();
+    await userEvent.click(cell);
+    await userEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ 'member-joined': ['push'] }));
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsNotificationsPage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-notifications/Page.tsx

@@ -0,0 +1,71 @@
+import {
+  NotificationMatrix,
+  StickyActionBar,
+  type NotificationChannel,
+  type NotificationEvent,
+  type NotificationMatrixValue,
+} from '@gntik-ai/blocks';
+import { Section } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { SettingsFrame, type SettingsFrameOptions } from '../settings-profile/SettingsFrame';
+import { channels as defaultChannels, events as defaultEvents, preferences as defaultPreferences } from './data';
+
+export interface SettingsNotificationsProps extends SettingsFrameOptions {
+  channels: NotificationChannel[];
+  events: NotificationEvent[];
+  /** Saved preferences: event id → enabled channel ids. */
+  value: NotificationMatrixValue;
+  /** Persists the matrix. A returned promise shows the saving state. */
+  onSave: (value: NotificationMatrixValue) => void | Promise<void>;
+}
+
+const key = (v: NotificationMatrixValue) =>
+  JSON.stringify(
+    Object.keys(v)
+      .sort()
+      .map((k) => [k, [...(v[k] ?? [])].sort()]),
+  );
+
+/** Notification settings: NotificationMatrix with a StickyActionBar. */
+export default function SettingsNotificationsPage({
+  channels = defaultChannels,
+  events = defaultEvents,
+  value: saved = defaultPreferences,
+  onSave,
+  ...frame
+}: Partial<SettingsNotificationsProps>) {
+  const [base, setBase] = useState(saved);
+  const [draft, setDraft] = useState(saved);
+  const [saving, setSaving] = useState(false);
+  const dirty = key(draft) !== key(base);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await onSave?.(draft);
+      setBase(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <SettingsFrame
+      page="notifications"
+      width="wide"
+      description="Choose how you hear about what happens in your workspace."
+      {...frame}
+    >
+      <Section title="Notification preferences" description="Security alerts always reach your email.">
+        <NotificationMatrix channels={channels} events={events} value={draft} onValueChange={setDraft} />
+      </Section>
+      <StickyActionBar
+        dirty={dirty}
+        saving={saving}
+        onSave={() => void save()}
+        onCancel={() => setDraft(base)}
+        aria-label="Notification changes"
+      />
+    </SettingsFrame>
+  );
+}

package/src/settings-notifications/data.ts

@@ -0,0 +1,12 @@
+import {
+  notificationChannels,
+  notificationDefaults,
+  notificationEvents,
+  type NotificationChannel,
+  type NotificationEvent,
+  type NotificationMatrixValue,
+} from '@gntik-ai/blocks';
+
+export const channels: NotificationChannel[] = notificationChannels;
+export const events: NotificationEvent[] = notificationEvents;
+export const preferences: NotificationMatrixValue = notificationDefaults;

package/src/settings-notifications/template.meta.ts

@@ -0,0 +1,11 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Notification settings',
+  family: 'Settings',
+  priority: 'P2',
+  status: 'beta',
+  description: 'Event × channel notification matrix with bulk row and column toggles and a sticky save bar.',
+  layout: 'SettingsLayout',
+  blocks: ['app-sidebar', 'app-topbar', 'page-header', 'notification-matrix', 'sticky-action-bar'],
+};

package/src/settings-profile/Baseline.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import SettingsProfilePage from './Page';
+import { profileDOM } from './__tests__/dom';
+
+it('preserves fixture (a): the default editable profile DOM', async () => {
+  const { container } = render(<SettingsProfilePage />);
+  await expect(profileDOM(container)).toMatchFileSnapshot('./fixtures/editable.snap');
+});

package/src/settings-profile/Editable.test.tsx

@@ -0,0 +1,21 @@
+import { readFileSync } from 'node:fs';
+import { render, screen, within } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import SettingsProfilePage from './Page';
+import { profileDOM } from './__tests__/dom';
+
+it('fixture (b): explicit editable mode equals the unchanged fixture (a)', () => {
+  const { container } = render(<SettingsProfilePage mode="editable" />);
+  expect(profileDOM(container)).toEqual(readFileSync('src/settings-profile/fixtures/editable.snap', 'utf8'));
+  expect(screen.getByRole('button', { name: 'Discard' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: 'Save changes' })).toBeInTheDocument();
+});
+
+it('switches modes without breaking hook order', () => {
+  const { container, rerender } = render(<SettingsProfilePage mode="editable" />);
+  expect(screen.getByRole('textbox', { name: 'Full name' })).toBeInTheDocument();
+  rerender(<SettingsProfilePage mode="read-only" />);
+  expect(within(container.querySelector<HTMLElement>('#settings-content')!).queryAllByRole('textbox')).toHaveLength(0);
+  rerender(<SettingsProfilePage mode="editable" />);
+  expect(screen.getByRole('textbox', { name: 'Full name' })).toBeInTheDocument();
+});

package/src/settings-profile/Page.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoAxeViolations } from '../test/a11y';
+import SettingsProfilePage from './Page';
+
+describe('SettingsProfilePage', () => {
+  it('renders the settings frame with the profile page selected', () => {
+    render(<SettingsProfilePage />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Profile' })).toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Settings' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Profile/ })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('heading', { name: 'Personal details' })).toBeInTheDocument();
+  }, 15000);
+
+  it('enables Save after an edit and saves the draft', async () => {
+    const onSave = vi.fn();
+    render(<SettingsProfilePage onSave={onSave} />);
+    const save = screen.getByRole('button', { name: 'Save changes' });
+    expect(save).toBeDisabled();
+    const name = screen.getByLabelText('Full name');
+    await userEvent.clear(name);
+    await userEvent.type(name, 'Avery Q. Collins');
+    expect(save).toBeEnabled();
+    await userEvent.click(save);
+    expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Avery Q. Collins' }));
+    expect(await screen.findByText('All changes saved')).toBeInTheDocument();
+  }, 15000);
+
+  it('reports section navigation', async () => {
+    const onNavigate = vi.fn();
+    render(<SettingsProfilePage onNavigate={onNavigate} />);
+    await userEvent.click(screen.getByRole('button', { name: /^Billing/ }));
+    expect(onNavigate).toHaveBeenCalledWith('billing');
+  }, 15000);
+
+  it('has no axe violations', async () => {
+    const { container } = render(<SettingsProfilePage />);
+    await expectNoAxeViolations(container);
+  }, 15000);
+});

package/src/settings-profile/Page.tsx

@@ -0,0 +1,133 @@
+import { FormSection, ProfileHeader, StickyActionBar, type Profile } from '@gntik-ai/blocks';
+import { Field, FieldDescription, FieldLabel, Input, SimpleSelect, Stack } from '@gntik-ai/ui';
+import { useState } from 'react';
+import {
+  locales as defaultLocales,
+  profile as defaultProfile,
+  profileValues,
+  timeZones as defaultTimeZones,
+  type ProfileFormValues,
+  type SelectOption,
+} from './data';
+import { SettingsFrame, type SettingsFrameOptions } from './SettingsFrame';
+import { ReadOnlyProfile, type ReadOnlyProfileOptions } from './ReadOnlyProfile';
+
+export interface SettingsProfileProps extends SettingsFrameOptions, ReadOnlyProfileOptions {
+  /** Defaults to 'editable'; 'read-only' shows details without form controls or save actions. */
+  mode?: 'editable' | 'read-only';
+  profile: Profile;
+  /** Saved form values. */
+  values: ProfileFormValues;
+  locales: SelectOption[];
+  timeZones: SelectOption[];
+  /** Persists the form. A returned promise shows the saving state. */
+  onSave: (values: ProfileFormValues) => void | Promise<void>;
+  onAvatarChange: (file: File) => void;
+}
+
+/** Profile settings: ProfileHeader, personal and regional FormSections, StickyActionBar. */
+export default function SettingsProfilePage({
+  mode = 'editable',
+  identity,
+  context,
+  contextFallback,
+  roles,
+  emptyRolesMessage,
+  ...props
+}: Partial<SettingsProfileProps>) {
+  if (mode === 'read-only') {
+    return (
+      <ReadOnlyProfile
+        {...props}
+        identity={identity}
+        context={context}
+        contextFallback={contextFallback}
+        roles={roles}
+        emptyRolesMessage={emptyRolesMessage}
+      />
+    );
+  }
+  return <EditableProfile {...props} />;
+}
+
+function EditableProfile({
+  profile = defaultProfile,
+  values: saved = profileValues,
+  locales = defaultLocales,
+  timeZones = defaultTimeZones,
+  onSave,
+  onAvatarChange,
+  ...frame
+}: Partial<SettingsProfileProps>) {
+  const [base, setBase] = useState(saved);
+  const [draft, setDraft] = useState(saved);
+  const [saving, setSaving] = useState(false);
+  const dirty = (Object.keys(draft) as Array<keyof ProfileFormValues>).some((k) => draft[k] !== base[k]);
+  const set = (key: keyof ProfileFormValues) => (value: string | null) =>
+    setDraft((d) => ({ ...d, [key]: value ?? '' }));
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await onSave?.(draft);
+      setBase(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <SettingsFrame page="profile" description="How other members see you across the workspace." {...frame}>
+      <ProfileHeader
+        profile={{ ...profile, name: base.name }}
+        headingLevel="h2"
+        onEdit={null}
+        onAvatarChange={onAvatarChange}
+      />
+      <Stack gap={8}>
+        <FormSection
+          title="Personal details"
+          description="Your name and email are visible to everyone in the workspace."
+          divided
+        >
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <Field>
+              <FieldLabel>Full name</FieldLabel>
+              <Input value={draft.name} onValueChange={set('name')} autoComplete="name" />
+            </Field>
+            <Field>
+              <FieldLabel>Email</FieldLabel>
+              <Input type="email" value={draft.email} onValueChange={set('email')} autoComplete="email" />
+              <FieldDescription>We send a confirmation link when it changes.</FieldDescription>
+            </Field>
+          </div>
+        </FormSection>
+        <FormSection title="Language and region" description="Used for dates, numbers and email digests." divided>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <SimpleSelect
+              label="Locale"
+              items={locales}
+              value={draft.locale}
+              onValueChange={set('locale')}
+              className="w-full"
+            />
+            <SimpleSelect
+              label="Time zone"
+              items={timeZones}
+              value={draft.timeZone}
+              onValueChange={set('timeZone')}
+              className="w-full"
+            />
+          </div>
+        </FormSection>
+      </Stack>
+      <StickyActionBar
+        dirty={dirty}
+        saving={saving}
+        onSave={() => void save()}
+        onCancel={() => setDraft(base)}
+        aria-label="Profile changes"
+      />
+    </SettingsFrame>
+  );
+}