@contractspec/bundle.marketing 1.12.0 → 1.14.0

package/dist/node/components/templates/TemplatesPage.js

@@ -0,0 +1,172 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/templates/TemplatesPage.tsx
+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 { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function matchesQuery(t, query) {
+  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);
+}
+function TemplatesMarketingPage() {
+  const [query, setQuery] = useState("");
+  const templates = useMemo(() => listTemplates(), []);
+  const filtered = useMemo(() => templates.filter((t) => matchesQuery(t, query)), [templates, query]);
+  return /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV(MarketingSection, {
+        tone: "default",
+        children: /* @__PURE__ */ jsxDEV(VStack, {
+          as: "header",
+          gap: "lg",
+          align: "center",
+          children: [
+            /* @__PURE__ */ jsxDEV(VStack, {
+              gap: "sm",
+              align: "center",
+              children: [
+                /* @__PURE__ */ jsxDEV(ButtonLink, {
+                  href: "/docs",
+                  variant: "ghost",
+                  children: "Docs"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV(ButtonLink, {
+                  href: "/sandbox",
+                  variant: "ghost",
+                  children: "Open Sandbox"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV(VStack, {
+              gap: "sm",
+              align: "center",
+              children: /* @__PURE__ */ jsxDEV(ButtonLink, {
+                href: "/templates",
+                variant: "default",
+                children: "Templates"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(MarketingSection, {
+        tone: "muted",
+        children: /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "lg",
+          children: [
+            /* @__PURE__ */ jsxDEV(VStack, {
+              gap: "sm",
+              children: /* @__PURE__ */ jsxDEV(ButtonLink, {
+                href: "/templates",
+                variant: "ghost",
+                children: "Browse all examples"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(HStack, {
+              gap: "md",
+              align: "center",
+              justify: "between",
+              wrap: "wrap",
+              children: /* @__PURE__ */ jsxDEV(Input, {
+                "aria-label": "Search templates and examples",
+                placeholder: "Search templates and examples…",
+                value: query,
+                onChange: (e) => setQuery(e.target.value)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(MarketingSection, {
+        tone: "default",
+        children: /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "lg",
+          children: /* @__PURE__ */ jsxDEV(HStack, {
+            gap: "md",
+            wrap: "wrap",
+            children: filtered.map((t) => /* @__PURE__ */ jsxDEV(MarketingCard, {
+              className: "w-full md:w-[calc(50%-0.75rem)] lg:w-[calc(33.333%-1rem)]",
+              children: [
+                /* @__PURE__ */ jsxDEV(MarketingCardHeader, {
+                  children: [
+                    /* @__PURE__ */ jsxDEV(MarketingCardTitle, {
+                      children: [
+                        t.icon,
+                        " ",
+                        t.name
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV(MarketingCardDescription, {
+                      children: t.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV(MarketingCardContent, {
+                  children: /* @__PURE__ */ jsxDEV(VStack, {
+                    gap: "md",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(HStack, {
+                        gap: "sm",
+                        wrap: "wrap",
+                        children: t.tags.slice(0, 6).map((tag) => /* @__PURE__ */ jsxDEV(ButtonLink, {
+                          href: `/templates?tag=${encodeURIComponent(tag)}`,
+                          variant: "ghost",
+                          children: tag
+                        }, `${t.id}-${tag}`, false, undefined, this))
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(HStack, {
+                        gap: "sm",
+                        justify: "between",
+                        wrap: "wrap",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(ButtonLinkToSandbox, {
+                            templateId: t.id
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV(Button, {
+                            variant: "outline",
+                            onClick: () => {
+                              return;
+                            },
+                            disabled: true,
+                            children: "Install to Studio (soon)"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, t.id, true, undefined, this))
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ButtonLinkToSandbox({ templateId }) {
+  return /* @__PURE__ */ jsxDEV(ButtonLink, {
+    href: `/sandbox?template=${encodeURIComponent(templateId)}`,
+    variant: "default",
+    children: "Preview"
+  }, undefined, false, undefined, this);
+}
+export {
+  TemplatesMarketingPage
+};

package/dist/node/components/templates/TemplatesPreviewModal.js

@@ -0,0 +1,119 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/templates/TemplatesPreviewModal.tsx
+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 { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var TemplateShell = dynamic(() => import("@contractspec/lib.example-shared-ui").then((mod) => mod.TemplateShell), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var TodosTaskList = dynamic(() => import("@contractspec/bundle.library/components/templates/todos/TaskList").then((mod) => mod.TaskList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var MessagingWorkspace = dynamic(() => import("@contractspec/bundle.library/components/templates/messaging/MessagingWorkspace").then((mod) => mod.MessagingWorkspace), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var RecipesExperience = dynamic(() => import("@contractspec/bundle.library/components/templates/recipes/RecipeList").then((mod) => mod.RecipeList), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var SaasDashboard = dynamic(() => import("@contractspec/example.saas-boilerplate").then((mod) => mod.SaasDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var CrmDashboard = dynamic(() => import("@contractspec/example.crm-pipeline").then((mod) => mod.CrmDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AgentDashboard = dynamic(() => import("@contractspec/example.agent-console/ui").then((mod) => mod.AgentDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var WorkflowDashboard = dynamic(() => import("@contractspec/example.workflow-system/ui").then((mod) => mod.WorkflowDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var MarketplaceDashboard = dynamic(() => import("@contractspec/example.marketplace/ui").then((mod) => mod.MarketplaceDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var IntegrationDashboard = dynamic(() => import("@contractspec/example.integration-hub/ui").then((mod) => mod.IntegrationDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var AnalyticsDashboard = dynamic(() => import("@contractspec/example.analytics-dashboard").then((mod) => mod.AnalyticsDashboard), { ssr: false, loading: () => /* @__PURE__ */ jsxDEV(LoadingSpinner, {}, undefined, false, undefined, this) });
+var TemplatePreviewModal = ({
+  templateId,
+  onClose
+}) => {
+  const previewComponent = useMemo(() => {
+    switch (templateId) {
+      case "todos-app":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Starter tasks",
+          description: "Track work items with filters, priorities, and per-tenant data isolation.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(TodosTaskList, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "messaging-app":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Messaging workspace",
+          description: "Realtime-ready messaging surface with optimistic delivery.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(MessagingWorkspace, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "recipe-app-i18n":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Ceremony recipes",
+          description: "Switch locales and preview how rituals translate across teams.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(RecipesExperience, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "saas-boilerplate":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "SaaS Boilerplate",
+          description: "Multi-tenant organizations, projects, settings, and billing usage tracking.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(SaasDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "crm-pipeline":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "CRM Pipeline",
+          description: "Sales CRM with contacts, companies, deals, and pipeline stages.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(CrmDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "agent-console":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "AI Agent Console",
+          description: "AI agent orchestration with tools, agents, runs, and execution logs.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(AgentDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "workflow-system":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Workflow System",
+          description: "Multi-step workflows with role-based approvals.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(WorkflowDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "marketplace":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Marketplace",
+          description: "Two-sided marketplace with stores, products, and orders.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(MarketplaceDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "integration-hub":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Integration Hub",
+          description: "Third-party integrations with sync and field mapping.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(IntegrationDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case "analytics-dashboard":
+        return /* @__PURE__ */ jsxDEV(TemplateShell, {
+          title: "Analytics Dashboard",
+          description: "Custom dashboards with widgets and queries.",
+          showSaveAction: false,
+          children: /* @__PURE__ */ jsxDEV(AnalyticsDashboard, {}, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      case null:
+        return null;
+      default:
+        return null;
+    }
+  }, [templateId]);
+  return /* @__PURE__ */ jsxDEV(Dialog, {
+    open: !!previewComponent,
+    onOpenChange: onClose,
+    children: /* @__PURE__ */ jsxDEV(DialogContent, {
+      className: "mb-8 flex h-[calc(100vh-2rem)] min-w-[calc(100vw-2rem)] flex-col justify-between gap-0 p-0",
+      children: /* @__PURE__ */ jsxDEV(ScrollArea, {
+        className: "flex flex-col justify-between overflow-hidden",
+        children: previewComponent
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+export {
+  TemplatePreviewModal
+};