@gntik-ai/templates 0.0.0-stage → 0.6.0

package/src/code-editor/data.ts

@@ -0,0 +1,130 @@
+import type { CodeFile, CodeProblem } from '@gntik-ai/blocks';
+import { FileCode, FileJson, FileText, Folder, FolderOpen } from '@gntik-ai/icons';
+import type { BreadcrumbItem, TreeNode } from '@gntik-ai/ui';
+
+export const editorProject = {
+  title: 'projects-api',
+  status: 'draft',
+  branch: 'feature/pagination',
+};
+
+export const editorBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Services', href: '/services' },
+  { label: 'projects-api', mono: true },
+];
+
+const handlerBefore = `import { db } from './db';
+
+export async function handler(req: Request) {
+  const projects = await db.projects.list();
+  return Response.json(projects);
+}
+`;
+
+const handlerAfter = `import { db } from './db';
+import { parseQuery } from './query';
+
+export async function handler(req: Request) {
+  const { page, pageSize } = parseQuery(req.url);
+  const projects = await db.projects.list({ page, pageSize });
+  return Response.json({ items: projects, page });
+}
+`;
+
+export const editorFiles: CodeFile[] = [
+  { path: 'src/handler.ts', language: 'typescript', content: handlerAfter, original: handlerBefore },
+  {
+    path: 'src/query.ts',
+    language: 'typescript',
+    content: `export function parseQuery(url: string) {
+  const params = new URL(url).searchParams;
+  return { page: Number(params.get('page') ?? 1), pageSize: Number(params.get('pageSize') ?? 20) };
+}
+`,
+  },
+  {
+    path: 'src/db.ts',
+    language: 'typescript',
+    content: `export const db = { projects: { list: async (_opts?: unknown) => [] as unknown[] } };\n`,
+  },
+  {
+    path: 'config/deploy.yaml',
+    language: 'yaml',
+    content: `name: projects-api
+region: eu-west
+replicas: 2
+`,
+  },
+  { path: 'config/settings.json', language: 'json', content: `{\n  "timeoutMs": 30000,\n  "retries": 3\n}\n` },
+  {
+    path: 'README.md',
+    language: 'markdown',
+    content: `# projects-api\n\nLists the projects of a workspace, paginated.\n`,
+  },
+];
+
+export const editorProblems: CodeProblem[] = [
+  {
+    id: 'p1',
+    severity: 'error',
+    message: "Property 'page' does not exist on the list options type.",
+    file: 'src/handler.ts',
+    line: 6,
+    column: 45,
+    source: 'tsc',
+  },
+  {
+    id: 'p2',
+    severity: 'warning',
+    message: 'pageSize is not clamped; very large pages are possible.',
+    file: 'src/query.ts',
+    line: 3,
+    column: 42,
+    source: 'lint',
+  },
+  {
+    id: 'p3',
+    severity: 'info',
+    message: 'replicas: 2 is below the recommended minimum of 3 for production.',
+    file: 'config/deploy.yaml',
+    line: 3,
+    column: 1,
+    source: 'schema',
+  },
+];
+
+export const editorDefaultOpen = ['src/handler.ts', 'src/query.ts'];
+
+const iconFor = (path: string) => (path.endsWith('.json') ? FileJson : path.endsWith('.md') ? FileText : FileCode);
+
+/** Folder tree of the file paths: folders first, then files, each alphabetical. Folder ids end in "/". */
+export function filesToTree(paths: readonly string[]): TreeNode[] {
+  type Dir = { dirs: Map<string, Dir>; files: string[] };
+  const root: Dir = { dirs: new Map(), files: [] };
+  for (const path of paths) {
+    const parts = path.split('/');
+    let dir = root;
+    for (const part of parts.slice(0, -1)) {
+      let next = dir.dirs.get(part);
+      if (!next) {
+        next = { dirs: new Map(), files: [] };
+        dir.dirs.set(part, next);
+      }
+      dir = next;
+    }
+    dir.files.push(path);
+  }
+  const build = (dir: Dir, prefix: string): TreeNode[] => [
+    ...[...dir.dirs.entries()]
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([name, sub]) => ({
+        id: `${prefix}${name}/`,
+        label: name,
+        icon: Folder,
+        openIcon: FolderOpen,
+        children: build(sub, `${prefix}${name}/`),
+      })),
+    ...[...dir.files].sort().map((path) => ({ id: path, label: path.split('/').pop() ?? path, icon: iconFor(path) })),
+  ];
+  return build(root, '');
+}

package/src/code-editor/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Code editor',
+  family: 'Builders',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Full-screen code editor: CanvasLayout top bar (breadcrumb, title, status, branch, Save), a file TreeList with a context menu (open, copy path, close tab, delete) in the palette, and the CodePanel block (file tabs, Monaco editor or diff, problems list) as the canvas.',
+  layout: 'CanvasLayout',
+  blocks: ['code-panel'],
+};

package/src/contact/Page.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../test/a11y';
+import ContactPage from './Page';
+import { offices } from './data';
+
+describe('ContactPage', () => {
+  it('renders the form and office cards', { timeout: 15000 }, async () => {
+    render(<ContactPage />);
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1, name: 'Talk to us' })).toBeInTheDocument();
+    expect(screen.getByRole('form', { name: 'Contact form' })).toBeInTheDocument();
+    const officesRegion = screen.getByRole('region', { name: 'Offices' });
+    expect(within(officesRegion).getAllByRole('heading', { level: 3 })).toHaveLength(offices.length);
+    await expectNoAxeViolations();
+  });
+
+  it('validates, then sends and shows the success state', { timeout: 15000 }, async () => {
+    const onSubmit = vi.fn();
+    render(<ContactPage onSubmit={onSubmit} defaultValues={{ topic: 'sales' }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(screen.getAllByText('Enter your name.').length).toBeGreaterThan(0);
+    await userEvent.type(screen.getByRole('textbox', { name: /^Name/ }), 'Ada Example');
+    await userEvent.type(screen.getByRole('textbox', { name: /Work email/ }), 'ada@example.com');
+    await userEvent.type(screen.getByRole('textbox', { name: /Message/ }), 'We would like a demo for 40 seats.');
+    await userEvent.click(screen.getByRole('button', { name: 'Send message' }));
+    expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({ name: 'Ada Example', topic: 'sales' }));
+    expect(await screen.findByRole('heading', { name: 'Message sent' })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveFocus();
+    await expectNoAxeViolations();
+  });
+});

package/src/contact/Page.tsx

@@ -0,0 +1,272 @@
+import { ValidationSummary, type ValidationIssue } from '@gntik-ai/blocks';
+import { CircleCheck, Clock, Mail, MapPin, Phone, Send } from '@gntik-ai/icons';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldError,
+  FieldLabel,
+  Grid,
+  Heading,
+  Input,
+  Link,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Stack,
+  Text,
+  Textarea,
+  type MegaMenuItem,
+} from '@gntik-ai/ui';
+import { useId, useState, type ReactNode } from 'react';
+import {
+  contactTopics,
+  emptyContact,
+  offices,
+  publicCopyright,
+  publicFooterLinks,
+  publicMenu,
+  validateContact,
+  type ContactTopic,
+  type ContactValues,
+  type Office,
+} from './data';
+import { PublicFrame } from './PublicFrame';
+
+export interface ContactProps {
+  brand: ReactNode;
+  menu: MegaMenuItem[];
+  currentHref: string;
+  title: string;
+  description: string;
+  topics: Array<{ value: ContactTopic; label: string }>;
+  offices: Office[];
+  defaultValues: Partial<ContactValues>;
+  /** Called with valid values; the page shows the success state once it resolves. */
+  onSubmit: (values: ContactValues) => void | Promise<void>;
+  footerLinks: Array<{ label: string; href: string }>;
+  copyright: ReactNode;
+}
+
+const LABELS: Record<keyof ContactValues, string> = {
+  name: 'Name',
+  email: 'Work email',
+  company: 'Company',
+  topic: 'Topic',
+  message: 'Message',
+};
+
+/** Public contact page: StackedLayout + MegaMenu, a validated form with a success state, and office cards. */
+export default function ContactPage(props: Partial<ContactProps>) {
+  const {
+    brand,
+    menu = publicMenu,
+    currentHref = '/contact',
+    title = 'Talk to us',
+    description = 'Questions about plans, billing or a technical issue? We answer within one business day.',
+    topics = contactTopics,
+    offices: officeList = offices,
+    defaultValues,
+    onSubmit,
+    footerLinks = publicFooterLinks,
+    copyright = publicCopyright,
+  } = props;
+  const [values, setValues] = useState<ContactValues>({ ...emptyContact, ...defaultValues });
+  const [submitCount, setSubmitCount] = useState(0);
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const ids = useId();
+  const fieldId = (k: keyof ContactValues) => `${ids}-${k}`;
+
+  const errors = submitCount > 0 ? validateContact(values) : {};
+  const issues: ValidationIssue[] = (Object.keys(errors) as Array<keyof ContactValues>).map((k) => ({
+    fieldId: fieldId(k),
+    label: LABELS[k],
+    message: errors[k] ?? '',
+  }));
+  const set = <K extends keyof ContactValues>(key: K, value: ContactValues[K]) =>
+    setValues((v) => ({ ...v, [key]: value }));
+
+  const submit = async () => {
+    setSubmitCount((n) => n + 1);
+    if (Object.keys(validateContact(values)).length > 0) return;
+    setSending(true);
+    try {
+      await onSubmit?.(values);
+      setSent(true);
+    } finally {
+      setSending(false);
+    }
+  };
+  const reset = () => {
+    setValues({ ...emptyContact, ...defaultValues });
+    setSubmitCount(0);
+    setSent(false);
+  };
+
+  return (
+    <PublicFrame brand={brand} menu={menu} currentHref={currentHref} footerLinks={footerLinks} copyright={copyright}>
+      <Stack gap={10}>
+        <Stack gap={3} className="max-w-2xl">
+          <Heading level={1} size="xl">
+            {title}
+          </Heading>
+          <Text tone="muted">{description}</Text>
+        </Stack>
+        <Grid cols={{ base: 1, lg: 5 }} gap={8} align="start">
+          <Card className="lg:col-span-3">
+            <CardBody className="p-6">
+              {sent ? (
+                <div
+                  ref={(el) => el?.focus()}
+                  tabIndex={-1}
+                  role="status"
+                  className="flex flex-col items-start gap-3 py-6 outline-none"
+                >
+                  <CircleCheck size={28} aria-hidden className="text-success-text" />
+                  <Heading level={2} size="sm">
+                    Message sent
+                  </Heading>
+                  <Text tone="muted">
+                    Thanks, {values.name.trim()}. We’ll reply to {values.email.trim()} within one business day.
+                  </Text>
+                  <Button variant="secondary" onClick={reset}>
+                    Send another message
+                  </Button>
+                </div>
+              ) : (
+                <form
+                  noValidate
+                  aria-label="Contact form"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    void submit();
+                  }}
+                >
+                  <Stack gap={5}>
+                    <ValidationSummary errors={issues} submitCount={submitCount} />
+                    <Grid cols={{ base: 1, sm: 2 }} gap={4}>
+                      <Field invalid={errors.name != null}>
+                        <FieldLabel required>{LABELS.name}</FieldLabel>
+                        <Input
+                          id={fieldId('name')}
+                          autoComplete="name"
+                          required
+                          value={values.name}
+                          onValueChange={(v) => set('name', v)}
+                        />
+                        <FieldError match={errors.name != null}>{errors.name}</FieldError>
+                      </Field>
+                      <Field invalid={errors.email != null}>
+                        <FieldLabel required>{LABELS.email}</FieldLabel>
+                        <Input
+                          id={fieldId('email')}
+                          type="email"
+                          autoComplete="email"
+                          required
+                          value={values.email}
+                          onValueChange={(v) => set('email', v)}
+                        />
+                        <FieldError match={errors.email != null}>{errors.email}</FieldError>
+                      </Field>
+                      <Field>
+                        <FieldLabel>{LABELS.company}</FieldLabel>
+                        <Input
+                          id={fieldId('company')}
+                          autoComplete="organization"
+                          value={values.company}
+                          onValueChange={(v) => set('company', v)}
+                        />
+                      </Field>
+                      <Field invalid={errors.topic != null}>
+                        <FieldLabel required>{LABELS.topic}</FieldLabel>
+                        <Select
+                          value={values.topic || null}
+                          onValueChange={(v) => set('topic', v ?? '')}
+                          items={topics.map(({ value, label }) => ({ value, label }))}
+                        >
+                          <SelectTrigger id={fieldId('topic')} className="w-full" placeholder="Choose a topic" />
+                          <SelectContent>
+                            {topics.map((t) => (
+                              <SelectItem key={t.value} value={t.value}>
+                                {t.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FieldError match={errors.topic != null}>{errors.topic}</FieldError>
+                      </Field>
+                    </Grid>
+                    <Field invalid={errors.message != null}>
+                      <FieldLabel required>{LABELS.message}</FieldLabel>
+                      <Textarea
+                        id={fieldId('message')}
+                        rows={5}
+                        required
+                        value={values.message}
+                        onValueChange={(v) => set('message', v)}
+                      />
+                      <FieldError match={errors.message != null}>{errors.message}</FieldError>
+                    </Field>
+                    <Text variant="caption" tone="muted">
+                      By sending this form you agree to our <Link href="/privacy">privacy policy</Link>.
+                    </Text>
+                    <div>
+                      <Button type="submit" icon={Send} loading={sending}>
+                        Send message
+                      </Button>
+                    </div>
+                  </Stack>
+                </form>
+              )}
+            </CardBody>
+          </Card>
+          <section aria-labelledby={`${ids}-offices`} className="lg:col-span-2">
+            <Heading id={`${ids}-offices`} level={2} size="xs" className="mb-3">
+              Offices
+            </Heading>
+            <Stack gap={3}>
+              {officeList.map((o) => (
+                <Card key={o.id} variant="outline">
+                  <CardHeader>
+                    <CardTitle as="h3">{o.city}</CardTitle>
+                  </CardHeader>
+                  <CardBody className="pt-0">
+                    <ul className="flex flex-col gap-1.5">
+                      <li className="flex gap-2">
+                        <MapPin size={14} aria-hidden className="mt-1 shrink-0" />
+                        <address className="not-italic">
+                          {o.address.map((line) => (
+                            <span key={line} className="block">
+                              {line}
+                            </span>
+                          ))}
+                        </address>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <Mail size={14} aria-hidden className="shrink-0" />
+                        <Link href={`mailto:${o.email}`}>{o.email}</Link>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <Phone size={14} aria-hidden className="shrink-0" />
+                        <Link href={`tel:${o.phone.replace(/\s/g, '')}`}>{o.phone}</Link>
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <Clock size={14} aria-hidden className="shrink-0" />
+                        {o.hours}
+                      </li>
+                    </ul>
+                  </CardBody>
+                </Card>
+              ))}
+            </Stack>
+          </section>
+        </Grid>
+      </Stack>
+    </PublicFrame>
+  );
+}

package/src/contact/PublicFrame.tsx

@@ -0,0 +1,84 @@
+import {
+  Button,
+  Link,
+  Logo,
+  MegaMenu,
+  MobileNav,
+  StackedLayout,
+  ThemeSwitcher,
+  megaMenuNavItems,
+  type MegaMenuItem,
+} from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+
+export interface PublicFrameProps {
+  brand?: ReactNode;
+  menu: MegaMenuItem[];
+  currentHref?: string;
+  signInHref?: string;
+  getStartedHref?: string;
+  footerLinks: Array<{ label: string; href: string }>;
+  copyright: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Public-site chrome: StackedLayout with the MegaMenu as the sub-nav row on large screens and
+ * a MobileNav (fed by megaMenuNavItems) below lg.
+ */
+export function PublicFrame({
+  brand = <Logo size={26} wordmark />,
+  menu,
+  currentHref,
+  signInHref = '/sign-in',
+  getStartedHref = '/sign-up',
+  footerLinks,
+  copyright,
+  children,
+}: PublicFrameProps) {
+  return (
+    <StackedLayout
+      fullScreen
+      width="wide"
+      brand={brand}
+      actions={
+        <>
+          <ThemeSwitcher size="sm" className="hidden md:inline-flex" />
+          <Button variant="ghost" size="sm" render={<a href={signInHref} />} nativeButton={false}>
+            Sign in
+          </Button>
+          <Button size="sm" render={<a href={getStartedHref} />} nativeButton={false}>
+            Get started
+          </Button>
+          <MobileNav
+            className="lg:hidden"
+            groups={[{ items: megaMenuNavItems(menu) }]}
+            currentHref={currentHref}
+            title="Menu"
+            label="Primary"
+            side="right"
+          />
+        </>
+      }
+      subnav={<MegaMenu items={menu} currentHref={currentHref} label="Primary" className="hidden lg:block" />}
+      footer={
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <span>{copyright}</span>
+          <nav aria-label="Footer">
+            <ul className="flex flex-wrap gap-x-4 gap-y-1">
+              {footerLinks.map((l) => (
+                <li key={l.href}>
+                  <Link href={l.href} tone="muted" underline="hover">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      }
+    >
+      {children}
+    </StackedLayout>
+  );
+}

package/src/contact/data.ts

@@ -0,0 +1,129 @@
+import { BarChart3, BookOpen, FileText, FolderKanban, LifeBuoy, Rocket, Shield } from '@gntik-ai/icons';
+import type { MegaMenuItem } from '@gntik-ai/ui';
+
+/** Public navigation: product panels plus plain links. */
+export const publicMenu: MegaMenuItem[] = [
+  {
+    label: 'Product',
+    sections: [
+      {
+        title: 'Build',
+        links: [
+          {
+            label: 'Projects',
+            href: '/product/projects',
+            icon: FolderKanban,
+            description: 'Every project, its environments and owners.',
+          },
+          {
+            label: 'Deployments',
+            href: '/product/deployments',
+            icon: Rocket,
+            description: 'Previews, rollbacks and deploy gates.',
+          },
+        ],
+      },
+      {
+        title: 'Operate',
+        links: [
+          {
+            label: 'Analytics',
+            href: '/product/analytics',
+            icon: BarChart3,
+            description: 'Usage, latency and error budgets.',
+          },
+          { label: 'Security', href: '/product/security', icon: Shield, description: 'SSO, roles and audit logs.' },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Resources',
+    sections: [
+      {
+        links: [
+          { label: 'Documentation', href: '/docs', icon: BookOpen, description: 'Guides and API reference.' },
+          { label: 'Changelog', href: '/changelog', icon: FileText, description: 'What shipped this month.' },
+          { label: 'Support', href: '/contact', icon: LifeBuoy, description: 'Talk to a person.' },
+        ],
+      },
+    ],
+  },
+  { label: 'Pricing', href: '/pricing' },
+  { label: 'Contact', href: '/contact' },
+];
+
+export const publicFooterLinks = [
+  { label: 'Status', href: '/status' },
+  { label: 'Privacy', href: '/privacy' },
+  { label: 'Terms', href: '/terms' },
+];
+
+export const publicCopyright = '© Example, Inc.';
+
+export type ContactTopic = 'sales' | 'support' | 'billing' | 'partnerships';
+
+export const contactTopics: Array<{ value: ContactTopic; label: string }> = [
+  { value: 'sales', label: 'Sales and plans' },
+  { value: 'support', label: 'Technical support' },
+  { value: 'billing', label: 'Billing' },
+  { value: 'partnerships', label: 'Partnerships' },
+];
+
+export interface ContactValues {
+  name: string;
+  email: string;
+  company: string;
+  topic: ContactTopic | '';
+  message: string;
+}
+
+export const emptyContact: ContactValues = { name: '', email: '', company: '', topic: '', message: '' };
+
+export interface Office {
+  id: string;
+  city: string;
+  /** Address lines. */
+  address: string[];
+  email: string;
+  phone: string;
+  hours: string;
+}
+
+export const offices: Office[] = [
+  {
+    id: 'lisbon',
+    city: 'Lisbon',
+    address: ['Rua do Exemplo 120', '1200-000 Lisbon, Portugal'],
+    email: 'lisbon@example.com',
+    phone: '+351 210 000 000',
+    hours: 'Mon–Fri, 9:00–18:00 WET',
+  },
+  {
+    id: 'toronto',
+    city: 'Toronto',
+    address: ['200 Example Street, Suite 400', 'Toronto, ON M5V 0A0, Canada'],
+    email: 'toronto@example.com',
+    phone: '+1 416 000 0000',
+    hours: 'Mon–Fri, 9:00–17:00 ET',
+  },
+  {
+    id: 'singapore',
+    city: 'Singapore',
+    address: ['10 Example Road, #08-01', 'Singapore 018000'],
+    email: 'singapore@example.com',
+    phone: '+65 6000 0000',
+    hours: 'Mon–Fri, 9:00–18:00 SGT',
+  },
+];
+
+export type ContactErrors = Partial<Record<keyof ContactValues, string>>;
+
+export function validateContact(v: ContactValues): ContactErrors {
+  const errors: ContactErrors = {};
+  if (!v.name.trim()) errors.name = 'Enter your name.';
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email.trim())) errors.email = 'Enter a valid email address.';
+  if (!v.topic) errors.topic = 'Choose a topic.';
+  if (v.message.trim().length < 10) errors.message = 'Tell us a little more (at least 10 characters).';
+  return errors;
+}

package/src/contact/template.meta.ts

@@ -0,0 +1,12 @@
+import type { TemplateMeta } from '../meta';
+
+export const meta: TemplateMeta = {
+  name: 'Contact',
+  family: 'Overview',
+  priority: 'P3',
+  status: 'experimental',
+  description:
+    'Public contact page: StackedLayout with a MegaMenu (MobileNav below lg), a validated contact form (Field, Input, Select, Textarea, ValidationSummary) with a focused success state, and office cards with address, email, phone and hours.',
+  layout: 'StackedLayout',
+  blocks: ['validation-summary'],
+};