@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/team/SessionsDevices/SessionsDevices.tsx

@@ -0,0 +1,126 @@
+import { Badge, Button, Timestamp, cn } from '@gntik-ai/ui';
+import { LogOut, Monitor, Smartphone, Tablet, type LucideIcon } from '@gntik-ai/icons';
+import { useId, useState, type ReactNode } from 'react';
+import { deviceSessions, type DeviceKind, type DeviceSession } from './fixtures';
+
+export type { DeviceKind, DeviceSession } from './fixtures';
+
+const KIND_ICON: Record<DeviceKind, LucideIcon> = { desktop: Monitor, mobile: Smartphone, tablet: Tablet };
+
+export interface SessionsDevicesProps {
+  sessions?: DeviceSession[];
+  onRevoke?: (session: DeviceSession) => void;
+  /** Signs out every session except the current one. */
+  onRevokeOthers?: (sessions: DeviceSession[]) => void;
+  title?: ReactNode;
+  description?: ReactNode;
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** Signed-in sessions and devices: client, location, last seen, the current one marked, and revoke. */
+export function SessionsDevices({
+  sessions = deviceSessions,
+  onRevoke,
+  onRevokeOthers,
+  title = 'Sessions and devices',
+  description = "Places where you're signed in. Revoke anything you don't recognise.",
+  headingLevel: Heading = 'h2',
+  className,
+}: SessionsDevicesProps) {
+  const id = useId();
+  const [revoked, setRevoked] = useState<string[]>([]);
+  const [announcement, setAnnouncement] = useState('');
+  const rows = sessions.filter((s) => !revoked.includes(s.id));
+  const others = rows.filter((s) => !s.current);
+
+  const revoke = (list: DeviceSession[]) => {
+    setRevoked((r) => [...r, ...list.map((s) => s.id)]);
+    setAnnouncement(list.length === 1 ? `Signed out of ${list[0]?.device}.` : `Signed out of ${list.length} sessions.`);
+  };
+
+  return (
+    <section
+      aria-labelledby={`${id}-title`}
+      className={cn('rounded-lg border border-border bg-card shadow-sm', className)}
+    >
+      <div className="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <Heading id={`${id}-title`} className="text-[14px] font-semibold tracking-tight text-foreground">
+            {title}
+          </Heading>
+          {description != null && <p className="mt-0.5 text-[12.5px] text-muted-foreground">{description}</p>}
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon={LogOut}
+          disabled={others.length === 0}
+          className="self-start"
+          onClick={() => {
+            revoke(others);
+            onRevokeOthers?.(others);
+          }}
+        >
+          Sign out other sessions
+        </Button>
+      </div>
+      <ul className="divide-y divide-border">
+        {rows.map((s) => {
+          const KindIcon = KIND_ICON[s.kind];
+          return (
+            <li key={s.id} className="flex items-center gap-3 px-5 py-3.5">
+              <span
+                className={cn(
+                  'grid size-9 shrink-0 place-items-center rounded-md',
+                  s.current ? 'bg-primary/14 text-primary-chip-text' : 'bg-secondary text-muted-foreground',
+                )}
+              >
+                <KindIcon size={17} aria-hidden />
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="text-[13px] font-medium text-foreground">{s.device}</span>
+                  {s.current && (
+                    <Badge size="sm" tone="success" dot>
+                      This device
+                    </Badge>
+                  )}
+                </div>
+                <div className="mt-0.5 truncate text-[12px] text-muted-foreground">
+                  {s.client} · {s.location}
+                  {s.ip && <span className="hidden font-mono sm:inline"> · {s.ip}</span>}
+                </div>
+                <div className="text-[12px] text-muted-foreground">
+                  {s.current ? (
+                    'Active now'
+                  ) : (
+                    <>
+                      Last seen <Timestamp value={s.lastSeen} tooltip={false} />
+                    </>
+                  )}
+                </div>
+              </div>
+              {!s.current && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  aria-label={`Revoke session on ${s.device}`}
+                  onClick={() => {
+                    revoke([s]);
+                    onRevoke?.(s);
+                  }}
+                >
+                  Revoke
+                </Button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+      <span role="status" className="sr-only">
+        {announcement}
+      </span>
+    </section>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Sessions and devices',
+  family: 'team',
+  status: 'stable',
+  description:
+    'Signed-in sessions with device, client, location, last seen and a current-device badge; revoke one or all others.',
+  uses: ['Badge', 'Timestamp', 'Button'],
+};

package/src/team/SessionsDevices/fixtures.ts

@@ -0,0 +1,58 @@
+const ago = (minutes: number) => new Date(Date.now() - minutes * 60_000).toISOString();
+
+export type DeviceKind = 'desktop' | 'mobile' | 'tablet';
+
+export interface DeviceSession {
+  id: string;
+  /** Device name, e.g. "MacBook Pro". */
+  device: string;
+  /** Browser or client, e.g. "Chrome 128 on macOS". */
+  client: string;
+  kind: DeviceKind;
+  location: string;
+  ip?: string;
+  /** ISO date of the last request. */
+  lastSeen: string;
+  /** The session making this request. */
+  current?: boolean;
+}
+
+export const deviceSessions: DeviceSession[] = [
+  {
+    id: 's1',
+    device: 'MacBook Pro',
+    client: 'Chrome 128 on macOS',
+    kind: 'desktop',
+    location: 'Lisbon, Portugal',
+    ip: '192.0.2.14',
+    lastSeen: ago(0),
+    current: true,
+  },
+  {
+    id: 's2',
+    device: 'Pixel 8',
+    client: 'Mobile app 4.2',
+    kind: 'mobile',
+    location: 'Lisbon, Portugal',
+    ip: '198.51.100.7',
+    lastSeen: ago(42),
+  },
+  {
+    id: 's3',
+    device: 'iPad Air',
+    client: 'Safari 17 on iPadOS',
+    kind: 'tablet',
+    location: 'Madrid, Spain',
+    ip: '203.0.113.88',
+    lastSeen: ago(60 * 30),
+  },
+  {
+    id: 's4',
+    device: 'Workstation',
+    client: 'Firefox 130 on Linux',
+    kind: 'desktop',
+    location: 'Berlin, Germany',
+    ip: '203.0.113.5',
+    lastSeen: ago(60 * 24 * 12),
+  },
+];

package/src/team/index.ts

@@ -0,0 +1,15 @@
+export * from './MembersTable/MembersTable';
+export { meta as membersTableMeta } from './MembersTable/block.meta';
+export * from './NotificationMatrix/NotificationMatrix';
+export { meta as notificationMatrixMeta } from './NotificationMatrix/block.meta';
+export * from './PendingInvitations/PendingInvitations';
+export { meta as pendingInvitationsMeta } from './PendingInvitations/block.meta';
+export * from './ProfileHeader/ProfileHeader';
+export { meta as profileHeaderMeta } from './ProfileHeader/block.meta';
+export * from './SessionsDevices/SessionsDevices';
+export { meta as sessionsDevicesMeta } from './SessionsDevices/block.meta';
+export { members as sampleMembers } from './MembersTable/fixtures';
+export { invitations as sampleInvitations } from './PendingInvitations/fixtures';
+export { deviceSessions as sampleDeviceSessions } from './SessionsDevices/fixtures';
+export { notificationChannels, notificationEvents, notificationDefaults } from './NotificationMatrix/fixtures';
+export { profile as sampleProfile } from './ProfileHeader/fixtures';

package/src/test/a11y.ts

@@ -0,0 +1,18 @@
+import axe from 'axe-core';
+
+/**
+ * Runs axe on a container and returns the violations. Colour contrast is checked in the
+ * browser suite (jsdom has no layout or computed colours), so it is disabled here.
+ */
+export async function axeViolations(container: Element = document.body) {
+  const result = await axe.run(container, {
+    rules: { 'color-contrast': { enabled: false }, region: { enabled: false } },
+  });
+  return result.violations.map((v) => `${v.id}: ${v.help} (${v.nodes.map((n) => n.target.join(' ')).join(', ')})`);
+}
+
+/** Asserts that a container has no axe violations. */
+export async function expectNoAxeViolations(container: Element = document.body) {
+  const violations = await axeViolations(container);
+  if (violations.length) throw new Error('axe violations:\n' + violations.join('\n'));
+}

package/src/test/heading-levels.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import { AssistantCardGrid } from '../ai/AssistantCardGrid/AssistantCardGrid';
+import { EvaluationScorecard } from '../ai/EvaluationScorecard/EvaluationScorecard';
+import { ModelKeysList } from '../ai/ModelKeysList/ModelKeysList';
+import { PromptEditor } from '../ai/PromptEditor/PromptEditor';
+import { TokenCostCard } from '../ai/TokenCostCard/TokenCostCard';
+import { TraceWaterfall } from '../ai/TraceWaterfall/TraceWaterfall';
+import { CostBreakdown } from '../billing/CostBreakdown/CostBreakdown';
+import { PaymentMethodCard } from '../billing/PaymentMethodCard/PaymentMethodCard';
+import { PlanCard } from '../billing/PlanCard/PlanCard';
+import { PlanDefinitionCard } from '../billing/PlanDefinitionCard/PlanDefinitionCard';
+import { QuotaMeters } from '../billing/QuotaMeters/QuotaMeters';
+import { SpendVsBudget } from '../billing/SpendVsBudget/SpendVsBudget';
+import { LogViewer } from '../builders/LogViewer/LogViewer';
+import { ActivityFeed } from '../data-display/ActivityFeed/ActivityFeed';
+import { ChartCard } from '../data-display/ChartCard/ChartCard';
+import { DescriptionListCard } from '../data-display/DescriptionListCard/DescriptionListCard';
+import { ResourceCardGrid } from '../data-display/ResourceCardGrid/ResourceCardGrid';
+import { StatCard } from '../data-display/StatCard/StatCard';
+import { AgendaList } from '../scheduling/AgendaList/AgendaList';
+
+/** Levels of every heading rendered, in document order. */
+const levels = () => screen.queryAllByRole('heading').map((h) => Number(h.tagName.slice(1)));
+
+const cases: Array<[string, (as: 'h2' | 'h4') => ReactElement]> = [
+  ['ChartCard', (as) => <ChartCard titleAs={as} />],
+  ['DescriptionListCard', (as) => <DescriptionListCard titleAs={as} />],
+  ['StatCard', (as) => <StatCard titleAs={as} />],
+  ['ResourceCardGrid', (as) => <ResourceCardGrid titleAs={as} />],
+  ['PlanCard', (as) => <PlanCard titleAs={as} />],
+  ['PlanCard summary', (as) => <PlanCard variant="summary" plan={{ name: 'Fixture Plan' }} titleAs={as} />],
+  ['PlanDefinitionCard', (as) => <PlanDefinitionCard titleAs={as} />],
+  ['QuotaMeters', (as) => <QuotaMeters titleAs={as} />],
+  ['CostBreakdown', (as) => <CostBreakdown titleAs={as} />],
+  ['SpendVsBudget', (as) => <SpendVsBudget titleAs={as} />],
+  ['PaymentMethodCard', (as) => <PaymentMethodCard titleAs={as} />],
+  ['TokenCostCard', (as) => <TokenCostCard titleAs={as} />],
+  ['ModelKeysList', (as) => <ModelKeysList titleAs={as} />],
+  ['EvaluationScorecard', (as) => <EvaluationScorecard titleAs={as} />],
+  ['LogViewer', (as) => <LogViewer titleAs={as} />],
+  ['TraceWaterfall', (as) => <TraceWaterfall titleAs={as} />],
+  ['PromptEditor', (as) => <PromptEditor titleAs={as} />],
+  ['AgendaList', (as) => <AgendaList titleAs={as} />],
+  ['ActivityFeed', (as) => <ActivityFeed groupHeadingAs={as} />],
+];
+
+describe('heading levels (titleAs)', () => {
+  it.each(cases)('%s renders its title at the requested level', (_name, make) => {
+    const { unmount } = render(make('h2'));
+    const atTwo = levels();
+    expect(atTwo[0]).toBe(2);
+    expect(Math.max(...atTwo)).toBeLessThanOrEqual(3); // inner headings follow the title
+    unmount();
+    render(make('h4'));
+    expect(levels()[0]).toBe(4);
+  });
+
+  it('AssistantCardGrid shifts its card names with the section title', () => {
+    render(<AssistantCardGrid titleAs="h3" />);
+    expect(levels()[0]).toBe(3);
+    expect(new Set(levels().slice(1))).toEqual(new Set([4]));
+  });
+
+  it('keeps h3 as the default', () => {
+    render(<ChartCard />);
+    expect(levels()[0]).toBe(3);
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.className = '';
+  try {
+    localStorage.clear();
+  } catch {}
+});
+
+// jsdom gaps that Base UI touches (positioning, animations, media queries).
+if (!window.matchMedia) {
+  window.matchMedia = (query: string) =>
+    ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }) as MediaQueryList;
+}
+if (!('ResizeObserver' in window)) {
+  (window as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}
+if (!Element.prototype.getAnimations) {
+  Element.prototype.getAnimations = () => [];
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.