@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/team/NotificationMatrix/NotificationMatrix.tsx

@@ -0,0 +1,144 @@
+import {
+  Checkbox,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from '@gntik-ai/ui';
+import { useState } from 'react';
+import {
+  notificationChannels,
+  notificationDefaults,
+  notificationEvents,
+  type NotificationChannel,
+  type NotificationEvent,
+  type NotificationMatrixValue,
+} from './fixtures';
+
+export type { NotificationChannel, NotificationEvent, NotificationMatrixValue } from './fixtures';
+
+export interface NotificationMatrixProps {
+  channels?: NotificationChannel[];
+  events?: NotificationEvent[];
+  /** Event id → enabled channel ids (controlled). */
+  value?: NotificationMatrixValue;
+  defaultValue?: NotificationMatrixValue;
+  onValueChange?: (value: NotificationMatrixValue) => void;
+  caption?: string;
+  className?: string;
+}
+
+/**
+ * Event × channel grid of checkboxes. Column headers toggle a channel for every event, the last
+ * column toggles every channel for one event; both show the mixed state. Locked cells stay on.
+ */
+export function NotificationMatrix({
+  channels = notificationChannels,
+  events = notificationEvents,
+  value: valueProp,
+  defaultValue = notificationDefaults,
+  onValueChange,
+  caption = 'Notification preferences',
+  className,
+}: NotificationMatrixProps) {
+  const [inner, setInner] = useState<NotificationMatrixValue>(defaultValue);
+  const value = valueProp ?? inner;
+  const isOn = (e: NotificationEvent, c: string) => !!e.locked?.includes(c) || !!value[e.id]?.includes(c);
+
+  const commit = (next: NotificationMatrixValue) => {
+    setInner(next);
+    onValueChange?.(next);
+  };
+
+  /** Sets the given (event, channel) cells, keeping locked ones on and the channel order stable. */
+  const setCells = (cells: Array<[NotificationEvent, string]>, on: boolean) => {
+    const next: NotificationMatrixValue = { ...value };
+    for (const [e, c] of cells) {
+      const current = new Set(next[e.id] ?? []);
+      if (on || e.locked?.includes(c)) current.add(c);
+      else current.delete(c);
+      next[e.id] = channels.map((ch) => ch.id).filter((id) => current.has(id));
+    }
+    commit(next);
+  };
+
+  const state = (cells: Array<[NotificationEvent, string]>) => {
+    const editable = cells.filter(([e, c]) => !e.locked?.includes(c));
+    const on = editable.filter(([e, c]) => isOn(e, c)).length;
+    return {
+      checked: editable.length > 0 && on === editable.length,
+      indeterminate: on > 0 && on < editable.length,
+      disabled: editable.length === 0,
+    };
+  };
+
+  return (
+    <Table className={cn('min-w-[520px]', className)}>
+      <TableCaption srOnly>{caption}</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Event</TableHead>
+          {channels.map((c) => {
+            const cells = events.map((e): [NotificationEvent, string] => [e, c.id]);
+            const s = state(cells);
+            return (
+              <TableHead key={c.id} align="center" className="w-24">
+                <div className="flex flex-col items-center gap-1.5">
+                  <span>{c.label}</span>
+                  <Checkbox
+                    aria-label={`All events by ${c.label}`}
+                    {...s}
+                    onCheckedChange={(on) => setCells(cells, on)}
+                  />
+                </div>
+              </TableHead>
+            );
+          })}
+          <TableHead align="center" className="w-20">
+            All
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {events.map((e) => {
+          const cells = channels.map((c): [NotificationEvent, string] => [e, c.id]);
+          const s = state(cells);
+          return (
+            <TableRow key={e.id}>
+              <TableCell>
+                <div className="text-[13px] font-medium text-foreground">{e.label}</div>
+                {e.description && (
+                  <div className="mt-0.5 text-[12px] leading-5 text-muted-foreground">{e.description}</div>
+                )}
+              </TableCell>
+              {channels.map((c) => {
+                const locked = !!e.locked?.includes(c.id);
+                return (
+                  <TableCell key={c.id} align="center">
+                    <Checkbox
+                      aria-label={`${e.label} by ${c.label}${locked ? ' (always on)' : ''}`}
+                      checked={isOn(e, c.id)}
+                      disabled={locked}
+                      onCheckedChange={(on) => setCells([[e, c.id]], on)}
+                    />
+                  </TableCell>
+                );
+              })}
+              <TableCell align="center">
+                <Checkbox
+                  aria-label={`All channels for ${e.label}`}
+                  {...s}
+                  onCheckedChange={(on) => setCells(cells, on)}
+                />
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/team/NotificationMatrix/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Notification matrix',
+  family: 'team',
+  status: 'stable',
+  description: 'Event × channel table of checkboxes with column and row toggles (mixed state) and always-on cells.',
+  uses: ['Table', 'Checkbox'],
+};

package/src/team/NotificationMatrix/fixtures.ts

@@ -0,0 +1,43 @@
+export interface NotificationChannel {
+  id: string;
+  label: string;
+}
+
+export interface NotificationEvent {
+  id: string;
+  label: string;
+  description?: string;
+  /** Channels that are always on for this event (shown checked and disabled). */
+  locked?: string[];
+}
+
+export type NotificationMatrixValue = Record<string, string[]>;
+
+export const notificationChannels: NotificationChannel[] = [
+  { id: 'email', label: 'Email' },
+  { id: 'in-app', label: 'In-app' },
+  { id: 'push', label: 'Push' },
+];
+
+export const notificationEvents: NotificationEvent[] = [
+  { id: 'deploy-failed', label: 'Deployment failed', description: 'A deployment you own fails or is rolled back.' },
+  { id: 'deploy-succeeded', label: 'Deployment succeeded', description: 'A deployment you started goes live.' },
+  { id: 'mentions', label: 'Mentions', description: 'Someone mentions you in a comment or review.' },
+  { id: 'member-joined', label: 'Member joined', description: 'Someone accepts an invitation to the workspace.' },
+  { id: 'usage', label: 'Usage threshold', description: 'Usage reaches 80% or 100% of a quota.' },
+  {
+    id: 'security',
+    label: 'Security alerts',
+    description: 'New sign-ins and changes to keys or roles.',
+    locked: ['email'],
+  },
+];
+
+export const notificationDefaults: NotificationMatrixValue = {
+  'deploy-failed': ['email', 'in-app', 'push'],
+  'deploy-succeeded': ['in-app'],
+  mentions: ['email', 'in-app'],
+  'member-joined': [],
+  usage: ['email'],
+  security: ['email', 'in-app'],
+};

package/src/team/PendingInvitations/PendingInvitations.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PendingInvitations } from './PendingInvitations';
+
+describe('PendingInvitations', () => {
+  it('renders the invitations', async () => {
+    const { container } = render(<PendingInvitations />);
+    expect(screen.getByRole('region', { name: /Pending invitations/ })).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expect(screen.getByText('Expired')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('resends and revokes', async () => {
+    const onResend = vi.fn();
+    const onRevoke = vi.fn();
+    const { container } = render(<PendingInvitations onResend={onResend} onRevoke={onRevoke} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Resend invitation to taylor@example.com' }));
+    expect(onResend).toHaveBeenCalledWith(expect.objectContaining({ id: 'i1' }));
+    expect(screen.getByRole('button', { name: 'Resend invitation to taylor@example.com' })).toHaveTextContent('Sent');
+    expect(screen.getByRole('status')).toHaveTextContent('Invitation resent to taylor@example.com.');
+    for (const email of ['taylor', 'casey', 'drew']) {
+      await userEvent.click(screen.getByRole('button', { name: `Revoke invitation to ${email}@example.com` }));
+    }
+    expect(onRevoke).toHaveBeenCalledTimes(3);
+    expect(screen.getByRole('heading', { name: 'No pending invitations' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+});

package/src/team/PendingInvitations/PendingInvitations.tsx

@@ -0,0 +1,132 @@
+import { Badge, Button, EmptyState, StatusTag, Timestamp, cn } from '@gntik-ai/ui';
+import { Check, Mail, RotateCw, X } from '@gntik-ai/icons';
+import { useId, useState, type ReactNode } from 'react';
+import { invitations as defaultInvitations, type Invitation } from './fixtures';
+
+export type { Invitation } from './fixtures';
+
+export interface PendingInvitationsProps {
+  invitations?: Invitation[];
+  /** Resends one invitation. A returned promise shows a loading state. */
+  onResend?: (invitation: Invitation) => void | Promise<void>;
+  onRevoke?: (invitation: Invitation) => void;
+  title?: ReactNode;
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** Pending invitations with who sent them, expiry, and resend / revoke actions. */
+export function PendingInvitations({
+  invitations = defaultInvitations,
+  onResend,
+  onRevoke,
+  title = 'Pending invitations',
+  headingLevel: Heading = 'h2',
+  className,
+}: PendingInvitationsProps) {
+  const id = useId();
+  const [revoked, setRevoked] = useState<string[]>([]);
+  const [sending, setSending] = useState<string | null>(null);
+  const [sent, setSent] = useState<string[]>([]);
+  const [announcement, setAnnouncement] = useState('');
+  const [now] = useState(() => Date.now());
+  const rows = invitations.filter((i) => !revoked.includes(i.id));
+
+  const resend = async (inv: Invitation) => {
+    setSending(inv.id);
+    try {
+      await onResend?.(inv);
+      setSent((s) => [...s, inv.id]);
+      setAnnouncement(`Invitation resent to ${inv.email}.`);
+    } catch {
+      setAnnouncement(`Could not resend the invitation to ${inv.email}.`);
+    }
+    setSending(null);
+  };
+
+  return (
+    <section
+      aria-labelledby={`${id}-title`}
+      className={cn('rounded-lg border border-border bg-card shadow-sm', className)}
+    >
+      <div className="flex items-center gap-2 border-b border-border px-5 py-3.5">
+        <Heading id={`${id}-title`} className="text-[14px] font-semibold tracking-tight text-foreground">
+          {title}
+        </Heading>
+        <Badge size="sm">{rows.length}</Badge>
+      </div>
+      {rows.length === 0 ? (
+        <EmptyState
+          size="sm"
+          icon={Mail}
+          title="No pending invitations"
+          description="Invitations you send appear here until they are accepted."
+          className="mx-auto"
+        />
+      ) : (
+        <ul className="divide-y divide-border">
+          {rows.map((inv) => {
+            const expired = inv.expiresAt != null && new Date(inv.expiresAt).getTime() < now;
+            const wasSent = sent.includes(inv.id);
+            return (
+              <li key={inv.id} className="flex flex-col gap-3 px-5 py-3.5 sm:flex-row sm:items-center sm:gap-4">
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <span className="grid size-9 shrink-0 place-items-center rounded-full bg-secondary text-muted-foreground">
+                    <Mail size={16} aria-hidden />
+                  </span>
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="truncate text-[13px] font-medium text-foreground">{inv.email}</span>
+                      <Badge size="sm">{inv.role}</Badge>
+                      {expired && !wasSent && (
+                        <StatusTag
+                          status="expired"
+                          label="Expired"
+                          statuses={{ expired: { label: 'Expired', tone: 'warning' } }}
+                          size="sm"
+                        />
+                      )}
+                    </div>
+                    <div className="mt-0.5 text-[12px] text-muted-foreground">
+                      {inv.invitedBy ? `Invited by ${inv.invitedBy} · ` : 'Invited '}
+                      <Timestamp value={inv.invitedAt} tooltip={false} />
+                    </div>
+                  </div>
+                </div>
+                <div className="flex shrink-0 items-center gap-1.5 ps-12 sm:ps-0">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    icon={wasSent ? Check : RotateCw}
+                    loading={sending === inv.id}
+                    disabled={wasSent}
+                    aria-label={`Resend invitation to ${inv.email}`}
+                    onClick={() => void resend(inv)}
+                  >
+                    {wasSent ? 'Sent' : 'Resend'}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    icon={X}
+                    aria-label={`Revoke invitation to ${inv.email}`}
+                    onClick={() => {
+                      setRevoked((r) => [...r, inv.id]);
+                      setAnnouncement(`Invitation to ${inv.email} revoked.`);
+                      onRevoke?.(inv);
+                    }}
+                  >
+                    Revoke
+                  </Button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <span role="status" className="sr-only">
+        {announcement}
+      </span>
+    </section>
+  );
+}

package/src/team/PendingInvitations/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Pending invitations',
+  family: 'team',
+  status: 'stable',
+  description: 'List of pending invitations with role, sender, age and expiry, and resend / revoke actions.',
+  uses: ['Badge', 'StatusTag', 'Timestamp', 'Button', 'EmptyState'],
+};

package/src/team/PendingInvitations/fixtures.ts

@@ -0,0 +1,39 @@
+const daysFromNow = (d: number) => new Date(Date.now() + d * 86_400_000).toISOString();
+
+export interface Invitation {
+  id: string;
+  email: string;
+  role: string;
+  invitedBy?: string;
+  /** ISO date the invitation was sent. */
+  invitedAt: string;
+  /** ISO date it expires. */
+  expiresAt?: string;
+}
+
+export const invitations: Invitation[] = [
+  {
+    id: 'i1',
+    email: 'taylor@example.com',
+    role: 'Member',
+    invitedBy: 'Avery Collins',
+    invitedAt: daysFromNow(-1),
+    expiresAt: daysFromNow(6),
+  },
+  {
+    id: 'i2',
+    email: 'casey@example.com',
+    role: 'Admin',
+    invitedBy: 'Sam Rivera',
+    invitedAt: daysFromNow(-4),
+    expiresAt: daysFromNow(3),
+  },
+  {
+    id: 'i3',
+    email: 'drew@example.com',
+    role: 'Viewer',
+    invitedBy: 'Avery Collins',
+    invitedAt: daysFromNow(-9),
+    expiresAt: daysFromNow(-2),
+  },
+];

package/src/team/ProfileHeader/ProfileHeader.test.tsx

@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ProfileHeader } from './ProfileHeader';
+
+describe('ProfileHeader', () => {
+  it('renders the profile', async () => {
+    const { container } = render(<ProfileHeader />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Avery Collins' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Avery Collins' })).toBeInTheDocument();
+    expect(screen.getByRole('list', { name: 'Details' })).toHaveTextContent('avery@example.com');
+    await expectNoAxeViolations(container);
+  });
+
+  it('edits and changes the avatar', async () => {
+    const onEdit = vi.fn();
+    const onAvatarChange = vi.fn();
+    const { container } = render(<ProfileHeader onEdit={onEdit} onAvatarChange={onAvatarChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit profile' }));
+    expect(onEdit).toHaveBeenCalledOnce();
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    const click = vi.spyOn(input, 'click');
+    await userEvent.click(screen.getByRole('button', { name: 'Change avatar' }));
+    expect(click).toHaveBeenCalled();
+    const file = new File(['x'], 'me.png', { type: 'image/png' });
+    fireEvent.change(input, { target: { files: [file] } });
+    expect(onAvatarChange).toHaveBeenCalledWith(file);
+  });
+});

package/src/team/ProfileHeader/ProfileHeader.tsx

@@ -0,0 +1,106 @@
+import { Avatar, Badge, Button, IconButton, cn } from '@gntik-ai/ui';
+import { Camera, Pencil } from '@gntik-ai/icons';
+import { useRef, useState, type ReactNode } from 'react';
+import { profile as defaultProfile, type Profile } from './fixtures';
+
+export type { Profile, ProfileMetaItem } from './fixtures';
+
+export interface ProfileHeaderProps {
+  profile?: Profile;
+  /** Called with the picked image; the avatar previews it right away. `null` hides the change action. */
+  onAvatarChange?: ((file: File) => void) | null;
+  /** Called by the Edit profile button. `null` hides it. */
+  onEdit?: (() => void) | null;
+  /** Extra actions next to Edit. */
+  actions?: ReactNode;
+  headingLevel?: 'h1' | 'h2';
+  className?: string;
+}
+
+/** Profile header: large avatar with a change action, name, role, headline, meta row and edit button. */
+export function ProfileHeader({
+  profile = defaultProfile,
+  onAvatarChange = () => {},
+  onEdit = () => {},
+  actions,
+  headingLevel: Heading = 'h1',
+  className,
+}: ProfileHeaderProps) {
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  const pick = (file: File) => {
+    onAvatarChange?.(file);
+    try {
+      const url = URL.createObjectURL(file);
+      if (preview) URL.revokeObjectURL(preview);
+      setPreview(url);
+    } catch {
+      // No object URLs (e.g. server or test environments): keep the current image.
+    }
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6', className)}>
+      <div className="relative w-fit shrink-0">
+        <Avatar size="xl" name={profile.name} src={preview ?? profile.avatarUrl} />
+        {onAvatarChange && (
+          <>
+            <IconButton
+              icon={Camera}
+              label="Change avatar"
+              size="sm"
+              variant="secondary"
+              className="absolute -end-1 -bottom-1 rounded-full"
+              onClick={() => fileRef.current?.click()}
+            />
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              hidden
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) pick(file);
+                e.target.value = '';
+              }}
+            />
+          </>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <Heading className="truncate text-[22px] font-semibold tracking-tight text-foreground">
+            {profile.name}
+          </Heading>
+          {profile.role && (
+            <Badge tone="primary" size="lg">
+              {profile.role}
+            </Badge>
+          )}
+        </div>
+        {profile.headline && <p className="mt-1 text-[13.5px] text-muted-foreground">{profile.headline}</p>}
+        {profile.meta && profile.meta.length > 0 && (
+          <ul aria-label="Details" className="mt-3 flex flex-wrap gap-x-5 gap-y-1.5">
+            {profile.meta.map(({ icon: MetaIcon, label }) => (
+              <li key={label} className="flex items-center gap-1.5 text-[12.5px] text-muted-foreground">
+                {MetaIcon && <MetaIcon size={14} aria-hidden />}
+                {label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {(onEdit || actions) && (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {actions}
+          {onEdit && (
+            <Button variant="secondary" icon={Pencil} onClick={onEdit}>
+              Edit profile
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/team/ProfileHeader/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Profile header',
+  family: 'team',
+  status: 'stable',
+  description:
+    'Profile header with a large avatar and change action, name, role badge, headline, meta row and edit button.',
+  uses: ['Avatar', 'Badge', 'IconButton', 'Button'],
+};

package/src/team/ProfileHeader/fixtures.ts

@@ -0,0 +1,28 @@
+import { Building2, CalendarDays, Mail, MapPin, type LucideIcon } from '@gntik-ai/icons';
+
+export interface ProfileMetaItem {
+  icon?: LucideIcon;
+  label: string;
+}
+
+export interface Profile {
+  name: string;
+  /** Role or title shown as a badge. */
+  role?: string;
+  /** One-line headline under the name. */
+  headline?: string;
+  avatarUrl?: string;
+  meta?: ProfileMetaItem[];
+}
+
+export const profile: Profile = {
+  name: 'Avery Collins',
+  role: 'Owner',
+  headline: 'Platform lead · keeps deployments boring',
+  meta: [
+    { icon: Mail, label: 'avery@example.com' },
+    { icon: Building2, label: 'Platform team' },
+    { icon: MapPin, label: 'Lisbon, Portugal' },
+    { icon: CalendarDays, label: 'Joined March 2024' },
+  ],
+};

package/src/team/SessionsDevices/SessionsDevices.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SessionsDevices } from './SessionsDevices';
+
+describe('SessionsDevices', () => {
+  it('renders the sessions with the current one marked', async () => {
+    const { container } = render(<SessionsDevices />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(4);
+    expect(screen.getByText('This device')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Revoke session on MacBook Pro' })).not.toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('revokes one session, then all others', async () => {
+    const onRevoke = vi.fn();
+    const onRevokeOthers = vi.fn();
+    render(<SessionsDevices onRevoke={onRevoke} onRevokeOthers={onRevokeOthers} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Revoke session on Pixel 8' }));
+    expect(onRevoke).toHaveBeenCalledWith(expect.objectContaining({ id: 's2' }));
+    expect(screen.getByRole('status')).toHaveTextContent('Signed out of Pixel 8.');
+    await userEvent.click(screen.getByRole('button', { name: 'Sign out other sessions' }));
+    expect(onRevokeOthers).toHaveBeenCalledWith([
+      expect.objectContaining({ id: 's3' }),
+      expect.objectContaining({ id: 's4' }),
+    ]);
+    expect(screen.getAllByRole('listitem')).toHaveLength(1);
+    expect(screen.getByRole('button', { name: 'Sign out other sessions' })).toBeDisabled();
+  });
+});