@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/forms/InviteMembersDialog/InviteMembersDialog.tsx

@@ -0,0 +1,183 @@
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Textarea,
+  TokenInput,
+} from '@gntik-ai/ui';
+import { UserPlus } from '@gntik-ai/icons';
+import { useState, type ReactElement } from 'react';
+import { EMAIL_RE, memberRoles, type RoleOption } from './fixtures';
+
+export type { RoleOption } from './fixtures';
+
+export interface InvitePayload {
+  emails: string[];
+  role: string;
+  message: string;
+}
+
+export interface InviteMembersDialogProps {
+  roles?: RoleOption[];
+  defaultRole?: string;
+  /** Sends the invitations. A returned promise shows a loading state; a rejection shows its message. */
+  onInvite?: (payload: InvitePayload) => void | Promise<void>;
+  /** Maximum number of addresses per batch. */
+  maxInvites?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Trigger element (rendered through Dialog.Trigger). Pass `null` when controlling `open` yourself. */
+  trigger?: ReactElement | null;
+  title?: string;
+  description?: string;
+}
+
+const emailError = (t: string) => (EMAIL_RE.test(t) ? null : `${t} is not a valid email address`);
+
+/** Invite dialog: email chips with validation, a role and an optional message; submit with loading. */
+export function InviteMembersDialog({
+  roles = memberRoles,
+  defaultRole = 'member',
+  onInvite,
+  maxInvites = 20,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = <Button icon={UserPlus} />,
+  title = 'Invite members',
+  description = 'Invitations expire after 7 days. Separate addresses with commas or Enter.',
+}: InviteMembersDialogProps) {
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const [emails, setEmails] = useState<string[]>([]);
+  const [role, setRole] = useState(defaultRole);
+  const [message, setMessage] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const open = openProp ?? innerOpen;
+
+  const invalidCount = emails.filter((e) => emailError(e)).length;
+  const emailsProblem =
+    emails.length === 0
+      ? 'Add at least one email address.'
+      : invalidCount > 0
+        ? `Fix ${invalidCount} invalid ${invalidCount === 1 ? 'address' : 'addresses'}.`
+        : null;
+  const showEmailError = submitted && emailsProblem != null;
+
+  const setOpen = (next: boolean) => {
+    if (loading && !next) return;
+    if (!next) {
+      setEmails([]);
+      setRole(defaultRole);
+      setMessage('');
+      setSubmitted(false);
+      setError(null);
+    }
+    setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const submit = async () => {
+    setSubmitted(true);
+    setError(null);
+    if (emailsProblem) return;
+    setLoading(true);
+    try {
+      await onInvite?.({ emails, role, message: message.trim() });
+      setLoading(false);
+      setOpen(false);
+    } catch (e) {
+      setLoading(false);
+      setError(e instanceof Error ? e.message : 'The invitations could not be sent.');
+    }
+  };
+
+  const roleLabel = roles.find((r) => r.value === role)?.description;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger render={trigger}>{title}</DialogTrigger>}
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <form
+          noValidate
+          onSubmit={(e) => {
+            e.preventDefault();
+            void submit();
+          }}
+        >
+          <DialogBody className="grid gap-5">
+            <Field invalid={showEmailError}>
+              <FieldLabel required>Email addresses</FieldLabel>
+              <TokenInput
+                value={emails}
+                onValueChange={setEmails}
+                validate={emailError}
+                maxItems={maxInvites}
+                placeholder="name@company.com"
+                listLabel="Invited addresses"
+                invalid={showEmailError}
+              />
+              <FieldError match={showEmailError}>{emailsProblem}</FieldError>
+            </Field>
+            <Field>
+              <FieldLabel>Role</FieldLabel>
+              <Select
+                value={role}
+                onValueChange={(v) => v != null && setRole(v)}
+                items={roles.map(({ value, label }) => ({ value, label }))}
+              >
+                <SelectTrigger className="w-full" />
+                <SelectContent>
+                  {roles.map((r) => (
+                    <SelectItem key={r.value} value={r.value}>
+                      {r.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {roleLabel && <FieldDescription>{roleLabel}</FieldDescription>}
+            </Field>
+            <Field>
+              <FieldLabel>Message (optional)</FieldLabel>
+              <Textarea
+                rows={3}
+                value={message}
+                onValueChange={setMessage}
+                placeholder="Join us on the billing-dashboard project."
+              />
+            </Field>
+            {error && <Alert tone="destructive" title="Invitations not sent" description={error} />}
+          </DialogBody>
+          <DialogFooter>
+            <DialogClose render={<Button variant="ghost" disabled={loading} />}>Cancel</DialogClose>
+            <Button type="submit" loading={loading}>
+              {emails.length > 1 ? `Send ${emails.length} invitations` : 'Send invitation'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/forms/InviteMembersDialog/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Invite members dialog',
+  family: 'forms',
+  status: 'stable',
+  description:
+    'Dialog to invite people by email (validated chips) with a role and an optional message; submits with a loading state.',
+  uses: ['Dialog', 'TokenInput', 'Select', 'Textarea', 'Field', 'Button', 'Alert'],
+};

package/src/forms/InviteMembersDialog/fixtures.ts

@@ -0,0 +1,14 @@
+export interface RoleOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export const memberRoles: RoleOption[] = [
+  { value: 'owner', label: 'Owner', description: 'Full access, including billing and deletion.' },
+  { value: 'admin', label: 'Admin', description: 'Manage members, projects and settings.' },
+  { value: 'member', label: 'Member', description: 'Create and deploy projects.' },
+  { value: 'viewer', label: 'Viewer', description: 'Read-only access.' },
+];
+
+export const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

package/src/forms/SettingsRow/SettingsRow.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@gntik-ai/ui';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SettingsRow } from './SettingsRow';
+
+describe('SettingsRow', () => {
+  it('renders a labelled, described switch', async () => {
+    const { container } = render(<SettingsRow />);
+    const sw = screen.getByRole('switch', { name: 'Deployment notifications' });
+    expect(sw).toHaveAccessibleDescription(/deployment fails/);
+    expect(sw).toBeChecked();
+    await expectNoAxeViolations(container);
+  });
+
+  it('toggles and reports the new state', async () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <SettingsRow label="Weekly digest" description={null} defaultChecked={false} onCheckedChange={onCheckedChange} />,
+    );
+    await userEvent.click(screen.getByRole('switch', { name: 'Weekly digest' }));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('wires a custom control through the ids', async () => {
+    const { container } = render(
+      <SettingsRow
+        label="Default region"
+        description="New projects are created here."
+        control={({ labelId }) => (
+          <Select
+            defaultValue="eu"
+            items={[
+              { value: 'eu', label: 'Europe' },
+              { value: 'us', label: 'United States' },
+            ]}
+          >
+            <SelectTrigger aria-labelledby={labelId} />
+            <SelectContent>
+              <SelectItem value="eu">Europe</SelectItem>
+              <SelectItem value="us">United States</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      />,
+    );
+    expect(screen.getByRole('combobox', { name: /Default region/ })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+});

package/src/forms/SettingsRow/SettingsRow.tsx

@@ -0,0 +1,74 @@
+import { Switch, cn } from '@gntik-ai/ui';
+import { useId, type ReactNode } from 'react';
+
+export interface SettingsRowControlIds {
+  /** Id of the label element: pass it as `aria-labelledby` to the control. */
+  labelId: string;
+  /** Id of the description element (when there is one): pass it as `aria-describedby`. */
+  descriptionId: string | undefined;
+}
+
+export interface SettingsRowProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  /**
+   * Custom control. A function receives the label/description ids to wire the control's
+   * accessible name. Without it, a Switch driven by `checked` / `defaultChecked` is rendered.
+   */
+  control?: ReactNode | ((ids: SettingsRowControlIds) => ReactNode);
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Extra content under the description (status, link). */
+  children?: ReactNode;
+  className?: string;
+}
+
+/** One setting: label and description on the left, its control (a Switch by default) on the right. */
+export function SettingsRow({
+  label = 'Deployment notifications',
+  description = 'Email the project owners when a deployment fails or is rolled back.',
+  control,
+  checked,
+  defaultChecked = true,
+  onCheckedChange,
+  disabled,
+  children,
+  className,
+}: SettingsRowProps) {
+  const id = useId();
+  const labelId = `${id}-label`;
+  const descriptionId = description != null ? `${id}-desc` : undefined;
+  const content =
+    typeof control === 'function' ? (
+      control({ labelId, descriptionId })
+    ) : control !== undefined ? (
+      control
+    ) : (
+      <Switch
+        aria-labelledby={labelId}
+        aria-describedby={descriptionId}
+        checked={checked}
+        defaultChecked={checked === undefined ? defaultChecked : undefined}
+        onCheckedChange={(next) => onCheckedChange?.(next)}
+        disabled={disabled}
+      />
+    );
+  return (
+    <div className={cn('flex items-start justify-between gap-6 py-4', disabled && 'opacity-70', className)}>
+      <div className="min-w-0">
+        <div id={labelId} className="text-[13.5px] font-medium text-foreground">
+          {label}
+        </div>
+        {description != null && (
+          <p id={descriptionId} className="mt-0.5 max-w-xl text-[12.5px] leading-5 text-pretty text-muted-foreground">
+            {description}
+          </p>
+        )}
+        {children}
+      </div>
+      <div className="shrink-0 pt-0.5">{content}</div>
+    </div>
+  );
+}

package/src/forms/SettingsRow/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Settings row',
+  family: 'forms',
+  status: 'stable',
+  description: 'A setting with its label and description on the left and a control (Switch by default) on the right.',
+  uses: ['Switch'],
+};

package/src/forms/ValidationSummary/ValidationSummary.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, Field, FieldLabel, Input } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ValidationSummary, type ValidationIssue } from './ValidationSummary';
+
+function Demo() {
+  const [name, setName] = useState('');
+  const [count, setCount] = useState(0);
+  const errors: ValidationIssue[] =
+    count > 0 && !name ? [{ fieldId: 'project-name', label: 'Project name', message: 'Enter a project name.' }] : [];
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        setCount((c) => c + 1);
+      }}
+    >
+      <ValidationSummary errors={errors} submitCount={count} />
+      <Field>
+        <FieldLabel>Project name</FieldLabel>
+        <Input id="project-name" value={name} onValueChange={setName} />
+      </Field>
+      <Button type="submit">Create</Button>
+    </form>
+  );
+}
+
+describe('ValidationSummary', () => {
+  it('renders the default issues', async () => {
+    const { container } = render(<ValidationSummary />);
+    expect(screen.getByRole('region', { name: 'There are 3 problems with this form' })).toBeInTheDocument();
+    expect(screen.getAllByRole('link')).toHaveLength(3);
+    await expectNoAxeViolations(container);
+  });
+
+  it('takes focus on submit and links to the field', async () => {
+    render(<Demo />);
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Create' }));
+    expect(screen.getByRole('region', { name: 'There is 1 problem with this form' })).toHaveFocus();
+    await userEvent.click(screen.getByRole('link', { name: /Enter a project name/ }));
+    expect(screen.getByLabelText('Project name')).toHaveFocus();
+  });
+});

package/src/forms/ValidationSummary/ValidationSummary.tsx

@@ -0,0 +1,75 @@
+import { Alert, Link, cn } from '@gntik-ai/ui';
+import { useEffect, useRef, type ReactNode } from 'react';
+import { validationIssues, type ValidationIssue } from './fixtures';
+
+export type { ValidationIssue } from './fixtures';
+
+export interface ValidationSummaryProps {
+  errors?: ValidationIssue[];
+  /** Increment on every submit attempt: the summary takes focus when there are errors. */
+  submitCount?: number;
+  /** Title; defaults to "There are N problems with this form". */
+  title?: ReactNode;
+  className?: string;
+}
+
+const focusField = (fieldId: string) => {
+  const el = document.getElementById(fieldId);
+  if (!el) return;
+  el.focus();
+  el.scrollIntoView?.({ block: 'center' });
+};
+
+/**
+ * Error summary for long forms: lists every problem with a link that moves focus to the field.
+ * After a failed submit it takes focus, so screen readers announce it.
+ */
+export function ValidationSummary({
+  errors = validationIssues,
+  submitCount = 0,
+  title,
+  className,
+}: ValidationSummaryProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const hasErrors = errors.length > 0;
+
+  useEffect(() => {
+    if (submitCount > 0 && hasErrors) ref.current?.focus();
+  }, [submitCount, hasErrors]);
+
+  if (!hasErrors) return null;
+  const heading =
+    title ?? `There ${errors.length === 1 ? 'is 1 problem' : `are ${errors.length} problems`} with this form`;
+  return (
+    <Alert
+      ref={ref}
+      tabIndex={-1}
+      role="region"
+      tone="destructive"
+      title={heading}
+      className={cn(
+        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',
+        className,
+      )}
+    >
+      <ul className="mt-1 list-disc space-y-1 ps-4">
+        {errors.map((e) => (
+          <li key={e.fieldId}>
+            <Link
+              href={`#${e.fieldId}`}
+              tone="inherit"
+              underline="always"
+              onClick={(ev) => {
+                ev.preventDefault();
+                focusField(e.fieldId);
+              }}
+            >
+              {e.label ? `${e.label}: ` : ''}
+              {e.message}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Alert>
+  );
+}

package/src/forms/ValidationSummary/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Validation summary',
+  family: 'forms',
+  status: 'stable',
+  description: 'Error summary that lists every problem with a link to its field and takes focus after a failed submit.',
+  uses: ['Alert', 'Link'],
+};

package/src/forms/ValidationSummary/fixtures.ts

@@ -0,0 +1,13 @@
+export interface ValidationIssue {
+  /** Id of the control to focus (the link target). */
+  fieldId: string;
+  /** Field name shown before the message. */
+  label?: string;
+  message: string;
+}
+
+export const validationIssues: ValidationIssue[] = [
+  { fieldId: 'project-name', label: 'Project name', message: 'Enter a project name.' },
+  { fieldId: 'billing-email', label: 'Billing email', message: 'Enter a valid email address, like name@company.com.' },
+  { fieldId: 'region', label: 'Region', message: 'Choose a region.' },
+];

package/src/forms/index.ts

@@ -0,0 +1,27 @@
+export * from './DangerZone/DangerZone';
+export { meta as dangerZoneMeta } from './DangerZone/block.meta';
+export * from './CreateApiKeyDialog/CreateApiKeyDialog';
+export { meta as createApiKeyDialogMeta } from './CreateApiKeyDialog/block.meta';
+export * from './CredentialDisclosureDialog/CredentialDisclosureDialog';
+export { meta as credentialDisclosureDialogMeta } from './CredentialDisclosureDialog/block.meta';
+export * from './DateRangeFilter/DateRangeFilter';
+export { meta as dateRangeFilterMeta } from './DateRangeFilter/block.meta';
+export * from './FileUploadPanel/FileUploadPanel';
+export { meta as fileUploadPanelMeta } from './FileUploadPanel/block.meta';
+export * from './FormSection/FormSection';
+export { meta as formSectionMeta } from './FormSection/block.meta';
+export * from './InviteMembersDialog/InviteMembersDialog';
+export { meta as inviteMembersDialogMeta } from './InviteMembersDialog/block.meta';
+export * from './SettingsRow/SettingsRow';
+export { meta as settingsRowMeta } from './SettingsRow/block.meta';
+export * from './ValidationSummary/ValidationSummary';
+export * from './DialogWizard/DialogWizard';
+export { meta as dialogWizardMeta } from './DialogWizard/block.meta';
+export { dialogWizardCopy, dialogWizardSteps } from './DialogWizard/fixtures';
+export { meta as validationSummaryMeta } from './ValidationSummary/block.meta';
+export { ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps } from './DangerZone/ConfirmDestructiveDialog';
+export { dangerZoneActions } from './DangerZone/fixtures';
+export { memberRoles } from './InviteMembersDialog/fixtures';
+export { apiKeyScopes, apiKeyExpiries, generateDemoSecret } from './CreateApiKeyDialog/fixtures';
+export { uploadItems, simulateUpload } from './FileUploadPanel/fixtures';
+export { validationIssues } from './ValidationSummary/fixtures';

package/src/index.ts

@@ -0,0 +1,14 @@
+export type { BlockMeta } from './meta';
+export * from './ai';
+export * from './auth';
+export * from './billing';
+export * from './builders';
+export * from './data-display';
+export * from './feedback';
+export * from './forms';
+export * from './marketing';
+export * from './page-chrome';
+export * from './scheduling';
+export * from './shell';
+export * from './tables';
+export * from './team';

package/src/marketing/ComparisonTable/ComparisonTable.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ComparisonTable } from './ComparisonTable';
+import RunnerOptions from './examples/options';
+import { sampleComparisonPlans, sampleComparisonSections } from './fixtures';
+
+const sectionGroups = () => screen.getAllByRole('rowgroup').filter((g) => g.hasAttribute('data-section'));
+
+describe('ComparisonTable', () => {
+  it('renders plans as columns and features grouped by section', async () => {
+    const { container } = render(<ComparisonTable />);
+    expect(screen.getByRole('region', { name: 'Find the plan that fits' })).toBeInTheDocument();
+    const table = screen.getByRole('table', { name: 'Find the plan that fits' });
+    const headers = within(table).getAllByRole('columnheader');
+    expect(headers).toHaveLength(sampleComparisonPlans.length + 1);
+    expect(headers[2]).toHaveTextContent('TeamRecommended$49');
+    expect(sectionGroups()).toHaveLength(sampleComparisonSections.length);
+    const usage = sectionGroups()[0]!;
+    const head = within(usage).getAllByRole('rowheader')[0]!;
+    expect(head).toHaveAttribute('scope', 'rowgroup');
+    expect(head).toHaveAttribute('colspan', String(sampleComparisonPlans.length + 1));
+    expect(head).toHaveTextContent('Usage');
+    expect(within(usage).getByRole('rowheader', { name: /Log retention/ })).toHaveAttribute('scope', 'row');
+    await expectNoAxeViolations(container);
+  });
+
+  it('renders booleans with text alternatives, numbers formatted and notes', () => {
+    render(<ComparisonTable />);
+    const row = (name: RegExp) => screen.getByRole('rowheader', { name }).closest('tr')!;
+    const previews = within(row(/Preview deployments/)).getAllByRole('cell');
+    expect(previews.map((c) => c.textContent)).toEqual(['Not included', 'Included', 'Included']);
+    const requests = within(row(/Requests per month/)).getAllByRole('cell');
+    expect(requests.map((c) => c.textContent)).toEqual(['50,000', '500,000', 'CustomVolume pricing']);
+    expect(within(row(/Uptime SLA/)).getAllByRole('cell')[0]).toHaveTextContent('Not included');
+    expect(within(row(/Single sign-on/)).getAllByRole('cell')[1]).toHaveTextContent('IncludedAdd-on');
+  });
+
+  it('marks the recommended column with text, not colour alone', () => {
+    const { container } = render(<ComparisonTable highlightedPlanId="enterprise" highlightLabel="Best value" />);
+    const enterprise = screen.getByRole('columnheader', { name: /Enterprise/ });
+    expect(within(enterprise).getByText('Best value')).toBeInTheDocument();
+    expect(enterprise).toHaveClass('border-t-primary');
+    const tinted = container.querySelectorAll('td[data-highlighted]');
+    expect(tinted).toHaveLength(sampleComparisonSections.reduce((n, s) => n + s.features.length, 0));
+    expect(screen.queryByText('Recommended')).toBeNull();
+  });
+
+  it('pins the feature column and keeps CTAs keyboard reachable', async () => {
+    const user = userEvent.setup();
+    render(<ComparisonTable />);
+    expect(screen.getByRole('rowheader', { name: /Projects/ })).toHaveClass('sticky', 'start-0');
+    expect(screen.getByRole('table')).toHaveClass('min-w-[40rem]');
+    await user.tab();
+    expect(screen.getByRole('link', { name: 'Start for free' })).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole('link', { name: 'Start free trial' })).toHaveFocus();
+  });
+
+  it('works without a title, CTAs or prices (options example)', async () => {
+    const { container } = render(<RunnerOptions />);
+    expect(screen.queryByRole('region')).toBeNull();
+    expect(screen.getByRole('table', { name: 'Runner options' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Capability' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /Dedicated runner/ })).toHaveTextContent('Best for teams');
+    expect(screen.queryByRole('link')).toBeNull();
+    await expectNoAxeViolations(container);
+  });
+});