@gntik-ai/templates 0.0.0-stage → 0.5.0

package/src/verify-email/Page.tsx

@@ -0,0 +1,118 @@
+import { AuthHeader } from '@gntik-ai/blocks';
+import { Alert, AuthLayout, Button, Link, Stack } from '@gntik-ai/ui';
+import { useEffect, useState, type ReactNode } from 'react';
+import { verifyEmailSample } from './data';
+
+export interface VerifyEmailPageProps {
+  /** Address the verification link was sent to. */
+  email: string;
+  /** Sends the link again; the button then waits `resendCooldown` seconds. A rejection shows in the alert. */
+  onResend: () => void | Promise<void>;
+  /** "Use a different email" (back to sign-up). */
+  onChangeEmail: () => void;
+  resendCooldown: number;
+  /** Seconds left before the first resend. Defaults to `resendCooldown` (a link was just sent). */
+  initialCooldown: number;
+  signInHref: string;
+  supportHref: string;
+  logo: ReactNode;
+}
+
+const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+
+/** Card check-your-inbox step with a resend countdown. */
+export default function VerifyEmailPage({
+  email = verifyEmailSample.email,
+  onResend,
+  onChangeEmail,
+  resendCooldown = verifyEmailSample.resendCooldown,
+  initialCooldown,
+  signInHref = verifyEmailSample.signInHref,
+  supportHref = verifyEmailSample.supportHref,
+  logo,
+}: Partial<VerifyEmailPageProps>) {
+  // One timestamp for both, so the first render reads exactly the full cooldown.
+  const [startedAt] = useState(() => Date.now());
+  const [now, setNow] = useState(startedAt);
+  const [resendAt, setResendAt] = useState(startedAt + (initialCooldown ?? resendCooldown) * 1000);
+  const [sending, setSending] = useState(false);
+  const [resent, setResent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const remaining = Math.max(0, Math.ceil((resendAt - now) / 1000));
+
+  useEffect(() => {
+    if (remaining <= 0) return;
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [remaining]);
+
+  const resend = async () => {
+    setError(null);
+    setSending(true);
+    try {
+      await onResend?.();
+      const t = Date.now();
+      setNow(t);
+      setResendAt(t + resendCooldown * 1000);
+      setResent(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'The email could not be sent. Try again.');
+    }
+    setSending(false);
+  };
+
+  return (
+    <AuthLayout
+      fullScreen
+      variant="card"
+      logo={logo}
+      skipLinkLabel="Skip to verification"
+      footer={
+        <>
+          Already verified? <Link href={signInHref}>Sign in</Link>
+        </>
+      }
+    >
+      <AuthHeader
+        eyebrow="Verify your email"
+        title="Check your inbox"
+        description={
+          <>
+            We sent a verification link to <span className="font-medium text-foreground">{email}</span>. Open it on this
+            device to finish setting up your account. The link expires in 24 hours.
+          </>
+        }
+      />
+      <Stack gap={4}>
+        {error && <Alert tone="destructive" description={error} />}
+        <Stack gap={2}>
+          <Button
+            variant="secondary"
+            size="lg"
+            className="w-full"
+            loading={sending}
+            disabled={remaining > 0}
+            onClick={() => void resend()}
+          >
+            {remaining > 0 ? `Resend email in ${clock(remaining)}` : 'Resend email'}
+          </Button>
+          <Button variant="ghost" size="lg" className="w-full" onClick={onChangeEmail}>
+            Use a different email
+          </Button>
+        </Stack>
+        <Alert
+          role="note"
+          tone="info"
+          description={
+            <>
+              Can't find it? Check your spam folder, or <Link href={supportHref}>contact support</Link>.
+            </>
+          }
+        />
+      </Stack>
+      <span role="status" className="sr-only">
+        {resent ? `A new verification email was sent to ${email}.` : ''}
+      </span>
+    </AuthLayout>
+  );
+}

package/src/verify-email/data.ts

@@ -0,0 +1,7 @@
+/** Sample address and timing for the email verification step. */
+export const verifyEmailSample = {
+  email: 'dana@example.com',
+  resendCooldown: 60,
+  signInHref: '#sign-in',
+  supportHref: '#support',
+};

package/src/verify-email/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Verify email',
+  family: 'Auth',
+  priority: 'P2',
+  status: 'beta',
+  description:
+    'Centred card check-your-inbox step after sign-up: the address the link went to, resend with a countdown, change email and a support link.',
+  layout: 'AuthLayout',
+  blocks: [],
+};

package/src/workflow-builder/Page.test.tsx

@@ -0,0 +1,97 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import { useState } from 'react';
+import type { ConsoleEntry } from '@gntik-ai/blocks';
+import FlowBuilderPage from './Page';
+
+// React Flow in jsdom reads the zoom from DOMMatrixReadOnly and node sizes from offset*.
+beforeAll(() => {
+  if (!('DOMMatrixReadOnly' in window)) {
+    (window as unknown as { DOMMatrixReadOnly: unknown }).DOMMatrixReadOnly = class {
+      m22 = 1;
+    };
+  }
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetHeight: { configurable: true, get: () => 90 },
+    offsetWidth: { configurable: true, get: () => 208 },
+  });
+});
+
+describe('FlowBuilderPage', () => {
+  it('renders the editor chrome and the flow builder', { timeout: 15000 }, async () => {
+    render(<FlowBuilderPage />);
+    expect(screen.getByRole('main', { name: 'Order sync editor' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Order sync' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'Order sync canvas' })).toBeInTheDocument();
+    expect(screen.getByRole('log', { name: 'Run console' })).toBeInTheDocument();
+    await expectNoAxeViolations();
+  });
+
+  it('runs the flow and saves', { timeout: 15000 }, async () => {
+    const onRun = vi.fn();
+    const onSave = vi.fn(() => Promise.resolve());
+    render(<FlowBuilderPage onRun={onRun} onSave={onSave} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Run' }));
+    expect(onRun).toHaveBeenCalledOnce();
+    expect(within(screen.getByRole('log', { name: 'Run console' })).getByText(/Run #1 started/)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledOnce();
+    expect(await screen.findByText('All changes saved')).toBeInTheDocument();
+  });
+
+  it('passes a controlled console through to the builder', { timeout: 15000 }, async () => {
+    function Host() {
+      const [entries, setEntries] = useState<ConsoleEntry[]>([
+        { id: 'h', time: '09:00:00', level: 'info', message: 'Connected to runner' },
+      ]);
+      return (
+        <FlowBuilderPage
+          consoleEntries={entries}
+          onConsoleChange={setEntries}
+          onRun={() => Promise.resolve([{ id: 'r', time: '09:00:01', level: 'success', message: 'Remote run ok' }])}
+        />
+      );
+    }
+    render(<Host />);
+    const log = screen.getByRole('log', { name: 'Run console' });
+    expect(log).toHaveTextContent('Connected to runner');
+    await userEvent.click(screen.getByRole('button', { name: 'Run' }));
+    expect(await within(log).findByText('Remote run ok')).toBeInTheDocument();
+    expect(log).toHaveTextContent('Connected to runner');
+  });
+});
+
+it('passes run mode, status, validation and selection through and hides save and publish', async () => {
+  const selected = vi.fn();
+  render(
+    <FlowBuilderPage
+      mode="run"
+      nodeStatus={{ webhook: 'running' }}
+      onNodeSelect={selected}
+      validationIssues={[{ code: 'test', nodeId: 'webhook', message: 'Input needs review' }]}
+      codePanel={{
+        files: [],
+        problems: [
+          {
+            id: 'semantic',
+            file: 'flow.yaml',
+            line: 1,
+            severity: 'error',
+            message: 'Invalid document',
+          },
+        ],
+      }}
+    />,
+  );
+  expect(screen.queryByRole('button', { name: 'Save' })).toBeNull();
+  expect(screen.queryByRole('button', { name: 'Publish' })).toBeNull();
+  const node = screen.getByRole('group', { name: 'Webhook' });
+  expect(within(node).getByText('Running')).toBeInTheDocument();
+  expect(within(node).getByText('Input needs review')).toBeInTheDocument();
+  // Test node selection at the click seam; jsdom cannot supply d3's native Window for a pan gesture.
+  fireEvent.click(node);
+  expect(selected).toHaveBeenCalledWith('webhook');
+  expect(screen.getByRole('region', { name: 'Code panel' })).toHaveTextContent('Invalid document');
+  await expectNoAxeViolations();
+});

package/src/workflow-builder/Page.tsx

@@ -0,0 +1,163 @@
+import {
+  CodePanel,
+  type CodePanelProps,
+  FlowBuilder,
+  type ConsoleEntry,
+  type FlowBuilderProps,
+  type FlowEdge,
+  type FlowNode,
+  type FlowNodeKind,
+  type PaletteItem,
+} from '@gntik-ai/blocks';
+import { Save, Upload } from '@gntik-ai/icons';
+import { Breadcrumbs, Button, CanvasLayout, StatusTag, type BreadcrumbItem } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { flowBuilderBreadcrumbs, flowBuilderContent } from './data';
+
+export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extends Pick<
+  FlowBuilderProps<Kind>,
+  | 'nodeTypes'
+  | 'onConnectEdge'
+  | 'onConnect'
+  | 'isValidConnection'
+  | 'onConnectionRejected'
+  | 'validationIssues'
+  | 'mode'
+  | 'nodeStatus'
+  | 'onNodeSelect'
+> {
+  /** Optional companion code panel; run mode forces readOnly. */
+  codePanel?: CodePanelProps;
+  title: string;
+  /** StatusTag key next to the title (draft, active…). */
+  status: string;
+  /** Initial graph and palette; omitted values use the FlowBuilder block samples. */
+  nodes: FlowNode<Kind | FlowNodeKind>[];
+  edges: FlowEdge[];
+  palette: PaletteItem[];
+  /** Return console entries (or a promise of them) to log the real run; nothing logs a simulated run. */
+  onRun: NonNullable<FlowBuilderProps<Kind>['onRun']>;
+  /** Run console output (controlled); report changes with `onConsoleChange`. */
+  consoleEntries: ConsoleEntry[];
+  /** Initial run console output (uncontrolled). */
+  defaultConsoleEntries: ConsoleEntry[];
+  onConsoleChange: (entries: ConsoleEntry[]) => void;
+  onConsoleClear: () => void;
+  onSave: () => void | Promise<void>;
+  onPublish: () => void;
+  breadcrumbs: BreadcrumbItem[];
+  /** Builder height in px on wide screens. */
+  height: number;
+  fullScreen: boolean;
+}
+
+/**
+ * Flow builder page: CanvasLayout + the FlowBuilder block. The app imports
+ * '@gntik-ai/flow/styles.css' once for the React Flow canvas.
+ */
+export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
+  props: Partial<FlowBuilderPageProps<Kind>>,
+) {
+  const {
+    title = flowBuilderContent.title,
+    status = flowBuilderContent.status,
+    nodes,
+    edges,
+    palette,
+    onRun,
+    consoleEntries,
+    defaultConsoleEntries,
+    onConsoleChange,
+    onConsoleClear,
+    onSave,
+    onPublish,
+    nodeTypes,
+    onConnectEdge,
+    onConnect,
+    isValidConnection,
+    onConnectionRejected,
+    validationIssues,
+    mode,
+    nodeStatus,
+    onNodeSelect,
+    codePanel,
+    breadcrumbs = flowBuilderBreadcrumbs,
+    height = 640,
+    fullScreen = true,
+  } = props;
+  const [saving, setSaving] = useState(false);
+  const [savedNote, setSavedNote] = useState(flowBuilderContent.lastSaved);
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      await onSave?.();
+      setSavedNote('All changes saved');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <CanvasLayout
+      fullScreen={fullScreen}
+      mainLabel={`${title} editor`}
+      smallScreenNotice={null}
+      header={
+        <>
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <Breadcrumbs items={breadcrumbs} className="hidden min-w-0 md:flex" />
+            <h1 className="truncate text-[14px] font-semibold text-foreground">{title}</h1>
+            <StatusTag status={status} />
+            {mode !== 'run' && (
+              <p aria-live="polite" className="hidden text-[12px] text-muted-foreground sm:block">
+                {savedNote}
+              </p>
+            )}
+          </div>
+          {mode !== 'run' && (
+            <div className="flex shrink-0 items-center gap-2">
+              <Button size="sm" variant="secondary" icon={Save} loading={saving} onClick={() => void save()}>
+                Save
+              </Button>
+              <Button size="sm" icon={Upload} onClick={onPublish}>
+                Publish
+              </Button>
+            </div>
+          )}
+        </>
+      }
+    >
+      <div className="h-full overflow-auto p-3 sm:p-4">
+        <FlowBuilder
+          title={title}
+          nodes={nodes}
+          edges={edges}
+          palette={palette}
+          onRun={onRun}
+          consoleEntries={consoleEntries}
+          defaultConsoleEntries={defaultConsoleEntries}
+          onConsoleChange={onConsoleChange}
+          onConsoleClear={onConsoleClear}
+          height={height}
+          nodeTypes={nodeTypes}
+          onConnectEdge={onConnectEdge}
+          onConnect={onConnect}
+          isValidConnection={isValidConnection}
+          onConnectionRejected={onConnectionRejected}
+          validationIssues={validationIssues}
+          mode={mode}
+          nodeStatus={nodeStatus}
+          onNodeSelect={onNodeSelect}
+        />
+        {codePanel && (
+          <CodePanel
+            {...codePanel}
+            headingLevel={codePanel.headingLevel ?? 2}
+            readOnly={mode === 'run' ? true : codePanel.readOnly}
+          />
+        )}
+      </div>
+    </CanvasLayout>
+  );
+}

package/src/workflow-builder/data.ts

@@ -0,0 +1,13 @@
+import type { BreadcrumbItem } from '@gntik-ai/ui';
+
+/** Neutral fixtures for the flow builder page; the graph itself uses the FlowBuilder block fixtures. */
+export const flowBuilderContent = {
+  title: 'Order sync',
+  status: 'draft',
+  lastSaved: 'Saved 2 min ago',
+};
+
+export const flowBuilderBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Automations', href: '/automations' },
+  { label: 'order-sync', mono: true },
+];

package/src/workflow-builder/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Flow builder',
+  family: 'Builders',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode="run", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import \'@gntik-ai/flow/styles.css\' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode="run" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode="run" nodeStatus={{step:"running"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.',
+  layout: 'CanvasLayout',
+  blocks: ['flow-builder', 'code-panel'],
+};

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.