@contractspec/bundle.marketing 1.12.0

package/src/components/templates/TemplatesPage.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonLink,
+  Input,
+  MarketingCard,
+  MarketingCardContent,
+  MarketingCardDescription,
+  MarketingCardHeader,
+  MarketingCardTitle,
+  MarketingSection,
+} from '@contractspec/lib.design-system';
+import { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';
+import { listTemplates } from '@contractspec/module.examples';
+import type { TemplateDefinition } from '@contractspec/lib.example-shared-ui';
+
+function matchesQuery(t: TemplateDefinition, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const hay =
+    `${t.id} ${t.name} ${t.description} ${t.tags.join(' ')}`.toLowerCase();
+  return hay.includes(q);
+}
+
+export function TemplatesMarketingPage() {
+  const [query, setQuery] = useState('');
+
+  const templates = useMemo(() => listTemplates(), []);
+  const filtered = useMemo(
+    () => templates.filter((t) => matchesQuery(t, query)),
+    [templates, query]
+  );
+
+  return (
+    <>
+      <MarketingSection tone="default">
+        <VStack as="header" gap="lg" align="center">
+          <VStack gap="sm" align="center">
+            <ButtonLink href="/docs" variant="ghost">
+              Docs
+            </ButtonLink>
+            <ButtonLink href="/sandbox" variant="ghost">
+              Open Sandbox
+            </ButtonLink>
+          </VStack>
+          <VStack gap="sm" align="center">
+            <ButtonLink href="/templates" variant="default">
+              Templates
+            </ButtonLink>
+          </VStack>
+        </VStack>
+      </MarketingSection>
+
+      <MarketingSection tone="muted">
+        <VStack gap="lg">
+          <VStack gap="sm">
+            <ButtonLink href="/templates" variant="ghost">
+              Browse all examples
+            </ButtonLink>
+          </VStack>
+          <HStack gap="md" align="center" justify="between" wrap="wrap">
+            <Input
+              aria-label="Search templates and examples"
+              placeholder="Search templates and examples…"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </HStack>
+        </VStack>
+      </MarketingSection>
+
+      <MarketingSection tone="default">
+        <VStack gap="lg">
+          <HStack gap="md" wrap="wrap">
+            {filtered.map((t) => (
+              <MarketingCard
+                key={t.id}
+                className="w-full md:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]"
+              >
+                <MarketingCardHeader>
+                  <MarketingCardTitle>
+                    {t.icon} {t.name}
+                  </MarketingCardTitle>
+                  <MarketingCardDescription>
+                    {t.description}
+                  </MarketingCardDescription>
+                </MarketingCardHeader>
+                <MarketingCardContent>
+                  <VStack gap="md">
+                    <HStack gap="sm" wrap="wrap">
+                      {t.tags.slice(0, 6).map((tag: string) => (
+                        <ButtonLink
+                          key={`${t.id}-${tag}`}
+                          href={`/templates?tag=${encodeURIComponent(tag)}`}
+                          variant="ghost"
+                        >
+                          {tag}
+                        </ButtonLink>
+                      ))}
+                    </HStack>
+                    <HStack gap="sm" justify="between" wrap="wrap">
+                      <ButtonLinkToSandbox templateId={t.id} />
+                      <Button variant="outline" onClick={() => void 0} disabled>
+                        Install to Studio (soon)
+                      </Button>
+                    </HStack>
+                  </VStack>
+                </MarketingCardContent>
+              </MarketingCard>
+            ))}
+          </HStack>
+        </VStack>
+      </MarketingSection>
+    </>
+  );
+}
+
+function ButtonLinkToSandbox({ templateId }: { templateId: string }) {
+  return (
+    <ButtonLink
+      href={`/sandbox?template=${encodeURIComponent(templateId)}`}
+      variant="default"
+    >
+      Preview
+    </ButtonLink>
+  );
+}

package/src/components/templates/TemplatesPreviewModal.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import dynamic from 'next/dynamic';
+import { Dialog, DialogContent } from '@contractspec/lib.ui-kit-web/ui/dialog';
+import { ScrollArea } from '@contractspec/lib.ui-kit-web/ui/scroll-area';
+import { LoadingSpinner } from '@contractspec/lib.ui-kit-web/ui/atoms/LoadingSpinner';
+import type { TemplateId } from '@contractspec/lib.example-shared-ui';
+
+// Dynamically import template components with ssr: false
+const TemplateShell = dynamic(
+  () =>
+    import('@contractspec/lib.example-shared-ui').then(
+      (mod) => mod.TemplateShell
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const TodosTaskList = dynamic(
+  () =>
+    import('@contractspec/bundle.library/components/templates/todos/TaskList').then(
+      (mod) => mod.TaskList
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const MessagingWorkspace = dynamic(
+  () =>
+    import('@contractspec/bundle.library/components/templates/messaging/MessagingWorkspace').then(
+      (mod) => mod.MessagingWorkspace
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const RecipesExperience = dynamic(
+  () =>
+    import('@contractspec/bundle.library/components/templates/recipes/RecipeList').then(
+      (mod) => mod.RecipeList
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const SaasDashboard = dynamic(
+  () =>
+    import('@contractspec/example.saas-boilerplate').then(
+      (mod) => mod.SaasDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const CrmDashboard = dynamic(
+  () =>
+    import('@contractspec/example.crm-pipeline').then(
+      (mod) => mod.CrmDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AgentDashboard = dynamic(
+  () =>
+    import('@contractspec/example.agent-console/ui').then(
+      (mod) => mod.AgentDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const WorkflowDashboard = dynamic(
+  () =>
+    import('@contractspec/example.workflow-system/ui').then(
+      (mod) => mod.WorkflowDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const MarketplaceDashboard = dynamic(
+  () =>
+    import('@contractspec/example.marketplace/ui').then(
+      (mod) => mod.MarketplaceDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const IntegrationDashboard = dynamic(
+  () =>
+    import('@contractspec/example.integration-hub/ui').then(
+      (mod) => mod.IntegrationDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AnalyticsDashboard = dynamic(
+  () =>
+    import('@contractspec/example.analytics-dashboard').then(
+      (mod) => mod.AnalyticsDashboard
+    ),
+  { ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+interface TemplatePreviewModalProps {
+  templateId: TemplateId | null;
+  onClose: () => void;
+}
+//
+//   return (
+//     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4 py-10">
+//       <div className="bg-background relative h-full max-h-[90vh] w-full max-w-5xl overflow-y-auto rounded-3xl p-6 shadow-2xl">
+//         <button
+//           type="button"
+//           className="btn-ghost absolute top-4 right-4 text-sm"
+//           onClick={onClose}
+//         >
+//           Close
+//         </button>
+//         {previewComponent}
+//       </div>
+//     </div>
+//   );
+// };
+
+export const TemplatePreviewModal = ({
+  templateId,
+  onClose,
+}: TemplatePreviewModalProps) => {
+  const previewComponent = useMemo(() => {
+    switch (templateId) {
+      case 'todos-app':
+        return (
+          <TemplateShell
+            title="Starter tasks"
+            description="Track work items with filters, priorities, and per-tenant data isolation."
+            showSaveAction={false}
+          >
+            <TodosTaskList />
+          </TemplateShell>
+        );
+      case 'messaging-app':
+        return (
+          <TemplateShell
+            title="Messaging workspace"
+            description="Realtime-ready messaging surface with optimistic delivery."
+            showSaveAction={false}
+          >
+            <MessagingWorkspace />
+          </TemplateShell>
+        );
+      case 'recipe-app-i18n':
+        return (
+          <TemplateShell
+            title="Ceremony recipes"
+            description="Switch locales and preview how rituals translate across teams."
+            showSaveAction={false}
+          >
+            <RecipesExperience />
+          </TemplateShell>
+        );
+      case 'saas-boilerplate':
+        return (
+          <TemplateShell
+            title="SaaS Boilerplate"
+            description="Multi-tenant organizations, projects, settings, and billing usage tracking."
+            showSaveAction={false}
+          >
+            <SaasDashboard />
+          </TemplateShell>
+        );
+      case 'crm-pipeline':
+        return (
+          <TemplateShell
+            title="CRM Pipeline"
+            description="Sales CRM with contacts, companies, deals, and pipeline stages."
+            showSaveAction={false}
+          >
+            <CrmDashboard />
+          </TemplateShell>
+        );
+      case 'agent-console':
+        return (
+          <TemplateShell
+            title="AI Agent Console"
+            description="AI agent orchestration with tools, agents, runs, and execution logs."
+            showSaveAction={false}
+          >
+            <AgentDashboard />
+          </TemplateShell>
+        );
+      case 'workflow-system':
+        return (
+          <TemplateShell
+            title="Workflow System"
+            description="Multi-step workflows with role-based approvals."
+            showSaveAction={false}
+          >
+            <WorkflowDashboard />
+          </TemplateShell>
+        );
+      case 'marketplace':
+        return (
+          <TemplateShell
+            title="Marketplace"
+            description="Two-sided marketplace with stores, products, and orders."
+            showSaveAction={false}
+          >
+            <MarketplaceDashboard />
+          </TemplateShell>
+        );
+      case 'integration-hub':
+        return (
+          <TemplateShell
+            title="Integration Hub"
+            description="Third-party integrations with sync and field mapping."
+            showSaveAction={false}
+          >
+            <IntegrationDashboard />
+          </TemplateShell>
+        );
+      case 'analytics-dashboard':
+        return (
+          <TemplateShell
+            title="Analytics Dashboard"
+            description="Custom dashboards with widgets and queries."
+            showSaveAction={false}
+          >
+            <AnalyticsDashboard />
+          </TemplateShell>
+        );
+      case null:
+        return null;
+      default:
+        return null;
+    }
+  }, [templateId]);
+
+  return (
+    <Dialog open={!!previewComponent} onOpenChange={onClose}>
+      {/*<DialogTrigger asChild>*/}
+      {/*  <Button variant="outline">Fullscreen Dialog</Button>*/}
+      {/*</DialogTrigger>*/}
+      <DialogContent className="mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0">
+        <ScrollArea className="flex flex-col justify-between overflow-hidden">
+          {/*<DialogHeader className="contents space-y-0 text-left">*/}
+          {/*  <DialogTitle className="px-6 pt-6">Product Information</DialogTitle>*/}
+          {/*  <DialogDescription asChild>*/}
+          {/*  </DialogDescription>*/}
+          {/*</DialogHeader>*/}
+          {previewComponent}
+        </ScrollArea>
+        {/*<DialogFooter className="px-6 pb-6 sm:justify-end">*/}
+        {/*  <DialogClose asChild>*/}
+        {/*    <Button variant="outline">*/}
+        {/*      <ChevronLeftIcon />*/}
+        {/*      Back*/}
+        {/*    </Button>*/}
+        {/*  </DialogClose>*/}
+        {/*  <Button type="button">Read More</Button>*/}
+        {/*</DialogFooter>*/}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/templates/index.ts

@@ -0,0 +1,3 @@
+export * from './TemplatesClientPage';
+export * from './TemplatesPage';
+export * from './TemplatesPreviewModal';

package/src/index.ts

@@ -0,0 +1,15 @@
+export * from './components/marketing';
+export * from './components/templates';
+// Email utilities
+export { submitContactForm } from './libs/email/contact';
+export { subscribeToNewsletter } from './libs/email/newsletter';
+export type {
+  SubmitContactFormResult,
+  SubmitNewsletterResult,
+  SubmitWaitlistApplicationResult,
+  SubmitWaitlistResult,
+} from './libs/email/types';
+export { joinWaitlist } from './libs/email/waitlist';
+export { submitWaitlistApplication } from './libs/email/waitlist-application';
+
+export * from './registry';

package/src/libs/email/client.test.ts

@@ -0,0 +1,107 @@
+'use server';
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- Pragmatic use of non-null assertion for tests */
+import { beforeEach, describe, expect, it } from 'bun:test';
+import { __internal, getEmailConfig, sendEmail } from './client';
+
+const ENV_KEYS = [
+  'SCALEWAY_ACCESS_KEY',
+  'SCALEWAY_SECRET_KEY',
+  'SCALEWAY_PROJECT_ID',
+  'SCALEWAY_ACCESS_KEY_QUEUE',
+  'SCALEWAY_SECRET_KEY_QUEUE',
+  'SCALEWAY_REGION',
+  'SCALEWAY_EMAIL_FROM_EMAIL',
+  'SCALEWAY_EMAIL_FROM_NAME',
+  'SCALEWAY_EMAIL_TEAM_EMAIL',
+  'SCALEWAY_EMAIL_TEAM_NAME',
+];
+
+const clearEnv = () => {
+  ENV_KEYS.forEach((key) => {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete -- Pragmatic use for environment cleanup in tests
+    delete process.env[key];
+  });
+};
+
+const setEnv = (values: Partial<Record<string, string>>) => {
+  Object.entries(values).forEach(([key, value]) => {
+    process.env[key] = value;
+  });
+};
+
+describe('email client config', () => {
+  beforeEach(() => {
+    __internal.resetCaches();
+    clearEnv();
+  });
+
+  it('returns a failure result when credentials are missing', () => {
+    const result = getEmailConfig();
+    expect(result.ok).toBeFalse();
+    expect(result.config).toBeUndefined();
+  });
+
+  it('prefers Scaleway env variables for config and region mapping', () => {
+    setEnv({
+      SCALEWAY_ACCESS_KEY: 'access',
+      SCALEWAY_SECRET_KEY: 'secret',
+      SCALEWAY_PROJECT_ID: 'project-123',
+      SCALEWAY_EMAIL_FROM_EMAIL: 'from@example.com',
+      SCALEWAY_EMAIL_FROM_NAME: 'From Name',
+      SCALEWAY_EMAIL_TEAM_EMAIL: 'team@example.com',
+      SCALEWAY_EMAIL_TEAM_NAME: 'Team Name',
+    });
+
+    const result = getEmailConfig();
+    expect(result.ok).toBeTrue();
+    expect(result.config?.accessKey).toBe('access');
+    expect(result.config?.secretKey).toBe('secret');
+    expect(result.config?.projectId).toBe('project-123');
+    expect(result.config?.region).toBe('fr-par');
+    expect(result.config?.from.email).toBe('from@example.com');
+    expect(result.config?.from.name).toBe('From Name');
+    expect(result.config?.teamInbox.email).toBe('team@example.com');
+    expect(result.config?.teamInbox.name).toBe('Team Name');
+  });
+
+  it('uses provided API factory to send email with reply-to header', async () => {
+    setEnv({
+      SCALEWAY_ACCESS_KEY: 'access',
+      SCALEWAY_SECRET_KEY: 'secret',
+      SCALEWAY_PROJECT_ID: 'project-123',
+    });
+
+    let captured: unknown = null;
+
+    __internal.setClient({
+      async createEmail(request: unknown) {
+        captured = request;
+        return { emails: [] };
+      },
+    });
+
+    const config = getEmailConfig().config!;
+
+    const response = await sendEmail(config, {
+      to: [{ email: 'user@example.com' }],
+      subject: 'Subject',
+      text: 'Plain text',
+      html: '<p>html</p>',
+      replyTo: 'reply@example.com',
+      context: 'test',
+    });
+
+    expect(response.success).toBeTrue();
+    const createEmailRequest = captured as Record<string, unknown>;
+    expect(createEmailRequest.region).toBe(config.region);
+    expect(createEmailRequest.projectId).toBe(config.projectId);
+    expect(createEmailRequest.from).toStrictEqual(config.from);
+    expect(createEmailRequest.to).toStrictEqual([
+      { email: 'user@example.com' },
+    ]);
+    expect(createEmailRequest.additionalHeaders).toStrictEqual([
+      { key: 'Reply-To', value: 'reply@example.com' },
+    ]);
+  });
+});

package/src/libs/email/client.ts

@@ -0,0 +1,146 @@
+import { createClient, Temv1alpha1 } from '@scaleway/sdk';
+import type { Region } from '@scaleway/sdk-client';
+import { Logger } from '@contractspec/lib.logger';
+import type {
+  EmailAddress,
+  EmailConfigResult,
+  EmailSendOutcome,
+  EmailServiceConfig,
+  SendEmailRequest,
+} from './types';
+
+const DEFAULT_FROM: EmailAddress = {
+  email: 'noreply@transactional.contractspec.io',
+  name: 'ContractSpec',
+};
+
+const DEFAULT_TEAM_INBOX: EmailAddress = {
+  email: 'contact@contractspec.io',
+  name: 'ContractSpec Team',
+};
+
+const DEFAULT_REGION: Region = 'fr-par';
+
+type EmailApi = Pick<Temv1alpha1.API, 'createEmail'>;
+
+let cachedConfig: EmailServiceConfig | null = null;
+let cachedClient: EmailApi | null = null;
+let apiFactory: (client: ReturnType<typeof createClient>) => EmailApi = (
+  client
+) => new Temv1alpha1.API(client);
+
+const mapRegion = (value?: string | null): Region => {
+  const normalized = value?.trim().toLowerCase();
+  if (normalized === 'par' || normalized === 'fr-par') return 'fr-par';
+  if (normalized === 'ams' || normalized === 'nl-ams') return 'nl-ams';
+  if (normalized === 'waw' || normalized === 'pl-waw') return 'pl-waw';
+  return DEFAULT_REGION;
+};
+
+export const getEmailConfig = (): EmailConfigResult => {
+  if (cachedConfig) {
+    return { ok: true, config: cachedConfig };
+  }
+
+  const accessKey =
+    process.env.SCALEWAY_ACCESS_KEY || process.env.SCALEWAY_ACCESS_KEY_QUEUE;
+  const secretKey =
+    process.env.SCALEWAY_SECRET_KEY || process.env.SCALEWAY_SECRET_KEY_QUEUE;
+  const projectId = process.env.SCALEWAY_PROJECT_ID;
+
+  if (!accessKey || !secretKey || !projectId) {
+    return {
+      ok: false,
+      errorMessage:
+        'Email service is not configured. Please contact us directly at contact@contractspec.io.',
+    };
+  }
+
+  const region = mapRegion(process.env.SCALEWAY_REGION);
+
+  cachedConfig = {
+    accessKey,
+    secretKey,
+    projectId,
+    region,
+    defaultZone: `${region}-1`,
+    from: {
+      email: process.env.SCALEWAY_EMAIL_FROM_EMAIL ?? DEFAULT_FROM.email,
+      name: process.env.SCALEWAY_EMAIL_FROM_NAME ?? DEFAULT_FROM.name,
+    },
+    teamInbox: {
+      email: process.env.SCALEWAY_EMAIL_TEAM_EMAIL ?? DEFAULT_TEAM_INBOX.email,
+      name: process.env.SCALEWAY_EMAIL_TEAM_NAME ?? DEFAULT_TEAM_INBOX.name,
+    },
+  };
+
+  return { ok: true, config: cachedConfig };
+};
+
+const getTemClient = (config: EmailServiceConfig): EmailApi => {
+  if (cachedClient) {
+    return cachedClient;
+  }
+
+  const client = createClient({
+    accessKey: config.accessKey,
+    secretKey: config.secretKey,
+    defaultProjectId: config.projectId,
+    defaultRegion: config.region,
+    defaultZone: config.defaultZone,
+  });
+
+  cachedClient = apiFactory(client);
+  return cachedClient;
+};
+
+export const sendEmail = async (
+  config: EmailServiceConfig,
+  request: SendEmailRequest
+): Promise<EmailSendOutcome> => {
+  try {
+    const client = getTemClient(config);
+
+    await client.createEmail({
+      region: config.region,
+      projectId: config.projectId,
+      from: config.from,
+      to: request.to,
+      subject: request.subject,
+      text: request.text,
+      html: request.html || request.text,
+      additionalHeaders: request.replyTo
+        ? [{ key: 'Reply-To', value: request.replyTo }]
+        : undefined,
+    });
+
+    return { success: true };
+  } catch (error) {
+    new Logger().error('scaleway_tem_email_send_failed', {
+      context: request.context ?? 'email',
+      error: error instanceof Error ? error.message : error,
+    });
+    return {
+      success: false,
+      error,
+      errorMessage: 'Failed to send email via Scaleway.',
+    };
+  }
+};
+
+export const __internal = {
+  resetCaches() {
+    cachedClient = null;
+    cachedConfig = null;
+    apiFactory = (client: ReturnType<typeof createClient>) =>
+      new Temv1alpha1.API(client);
+  },
+  setApiFactory(
+    factory: (client: ReturnType<typeof createClient>) => EmailApi
+  ) {
+    apiFactory = factory;
+  },
+  setClient(client: EmailApi) {
+    cachedClient = client;
+  },
+};