create-cogitato 0.0.0-stage → 0.2.0

package/template/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "my-design",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "kit dev",
+    "build": "pnpm -r --filter \"./prototypes/**\" build",
+    "validate": "kit validate",
+    "kit": "kit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@cogitato/contract": "^0.2.0",
+    "@cogitato/kit-cli": "^0.2.0",
+    "@cogitato/kit-mcp": "^0.2.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "playwright": "^1.64.1",
+    "typescript": "^5.7.2"
+  }
+}

package/template/prototypes/checkout/.env.example

@@ -0,0 +1,2 @@
+# Environment variables this prototype needs. `kit doctor` checks that each one is set in .env.
+# The Acme Shop prototype needs none.

package/template/prototypes/checkout/design/flows.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "../node_modules/@cogitato/contract/schema/flows.schema.json",
+  "schemaVersion": 1,
+  "screens": [
+    {
+      "id": "cart",
+      "route": "/cart",
+      "title": "Cart",
+      "states": [
+        {
+          "id": "default",
+          "fixture": "default",
+          "title": "Two items"
+        },
+        {
+          "id": "empty",
+          "fixture": "empty",
+          "title": "Empty cart"
+        }
+      ]
+    },
+    {
+      "id": "checkout.shipping",
+      "route": "/checkout/shipping",
+      "title": "Shipping",
+      "states": [
+        {
+          "id": "default",
+          "fixture": "default",
+          "title": "Empty form"
+        },
+        {
+          "id": "invalid-address",
+          "fixture": "invalid-address",
+          "title": "Address not found"
+        }
+      ]
+    },
+    {
+      "id": "checkout.payment",
+      "route": "/checkout/payment",
+      "title": "Payment",
+      "states": [
+        {
+          "id": "default",
+          "fixture": "default",
+          "title": "Empty form"
+        },
+        {
+          "id": "processing",
+          "fixture": "processing",
+          "title": "Processing"
+        },
+        {
+          "id": "card-declined",
+          "fixture": "card-declined",
+          "title": "Card declined"
+        }
+      ]
+    },
+    {
+      "id": "checkout.confirmation",
+      "route": "/checkout/confirmation",
+      "title": "Order confirmed",
+      "states": [
+        {
+          "id": "default",
+          "fixture": "default",
+          "title": "Confirmed"
+        }
+      ]
+    }
+  ],
+  "flows": [
+    {
+      "id": "checkout",
+      "title": "Checkout",
+      "nodes": [
+        "cart.default",
+        "checkout.shipping.default",
+        "checkout.shipping.invalid-address",
+        "checkout.payment.default",
+        "checkout.payment.processing",
+        "checkout.payment.card-declined",
+        "checkout.confirmation.default"
+      ],
+      "edges": [
+        {
+          "from": "cart.default",
+          "to": "checkout.shipping.default",
+          "label": "Check out"
+        },
+        {
+          "from": "checkout.shipping.default",
+          "to": "checkout.shipping.invalid-address",
+          "label": "Continue, address not found"
+        },
+        {
+          "from": "checkout.shipping.default",
+          "to": "checkout.payment.default",
+          "label": "Continue"
+        },
+        {
+          "from": "checkout.payment.default",
+          "to": "checkout.payment.processing",
+          "label": "Pay now"
+        },
+        {
+          "from": "checkout.payment.processing",
+          "to": "checkout.payment.card-declined",
+          "label": "Declined"
+        },
+        {
+          "from": "checkout.payment.processing",
+          "to": "checkout.confirmation.default",
+          "label": "Approved"
+        }
+      ]
+    }
+  ]
+}

package/template/prototypes/checkout/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Acme Shop prototype</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/prototypes/checkout/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "checkout",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "kit export-flows && vite",
+    "build": "kit validate && kit export-flows && tsc --noEmit && vite build && kit snapshots",
+    "typecheck": "tsc --noEmit",
+    "kit": "kit"
+  },
+  "dependencies": {
+    "@cogitato/runtime": "^0.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@cogitato/contract": "^0.2.0",
+    "@cogitato/kit-cli": "^0.2.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "playwright": "^1.64.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/template/prototypes/checkout/src/components/Page.module.css

@@ -0,0 +1,5 @@
+.page {
+  max-width: 480px;
+  margin: 0 auto;
+  padding: var(--kit-space-8) var(--kit-space-4);
+}

package/template/prototypes/checkout/src/components/Page.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { Stack } from "@/kit/Stack";
+import { Text } from "@/kit/Text";
+import styles from "./Page.module.css";
+
+const STEPS = ["Cart", "Shipping", "Payment"] as const;
+
+/** Page frame shared by the checkout screens. `step` highlights the progress row. */
+export function Page({ title, step, children }: { title: string; step?: (typeof STEPS)[number]; children: ReactNode }) {
+  return (
+    <main className={styles.page}>
+      <Stack gap="6">
+        {step && (
+          // Stand-in for the Stepper component until it exists (gap_stepper).
+          <Stack direction="row" gap="3" aria-label="Checkout progress">
+            {STEPS.map((s) => (
+              <Text key={s} as="span" variant="label" tone={s === step ? "default" : "muted"}>
+                {s}
+              </Text>
+            ))}
+          </Stack>
+        )}
+        <Text as="h1" variant="heading">
+          {title}
+        </Text>
+        {children}
+      </Stack>
+    </main>
+  );
+}

package/template/prototypes/checkout/src/flows.ts

@@ -0,0 +1,18 @@
+import { defineFlows } from "@cogitato/runtime";
+
+// How screens connect. Each step is "{screen id}.{state}". `kit export-flows` turns this into
+// design/flows.json for the canvas; steps appear in the order they're first mentioned.
+export default defineFlows([
+  {
+    id: "checkout",
+    title: "Checkout",
+    edges: [
+      { from: "cart.default", to: "checkout.shipping.default", label: "Check out" },
+      { from: "checkout.shipping.default", to: "checkout.shipping.invalid-address", label: "Continue, address not found" },
+      { from: "checkout.shipping.default", to: "checkout.payment.default", label: "Continue" },
+      { from: "checkout.payment.default", to: "checkout.payment.processing", label: "Pay now" },
+      { from: "checkout.payment.processing", to: "checkout.payment.card-declined", label: "Declined" },
+      { from: "checkout.payment.processing", to: "checkout.confirmation.default", label: "Approved" },
+    ],
+  },
+]);

package/template/prototypes/checkout/src/main.tsx

@@ -0,0 +1,11 @@
+import "virtual:kit/tokens.css";
+import "./styles/global.css";
+import kit from "virtual:kit/kit";
+import { mountPrototype, type ScreenDefinition } from "@cogitato/runtime";
+
+// Every src/screens/**/screen.tsx registers one screen with defineScreen.
+const screens = Object.values(
+  import.meta.glob<ScreenDefinition>("./screens/**/screen.tsx", { eager: true, import: "default" }),
+);
+
+mountPrototype(document.getElementById("root"), { screens, kit });

package/template/prototypes/checkout/src/mocks/cart.ts

@@ -0,0 +1,43 @@
+// Mock data for the checkout flow. Prototypes have no backend; fixtures pick from these.
+
+export interface CartItem {
+  id: string;
+  name: string;
+  variant: string;
+  quantity: number;
+  price: number;
+}
+
+export interface Cart {
+  items: CartItem[];
+  shipping: number;
+}
+
+export const sampleCart: Cart = {
+  items: [
+    { id: "tote", name: "Canvas tote", variant: "Natural", quantity: 1, price: 24 },
+    { id: "mug", name: "Ceramic mug", variant: "Speckled white", quantity: 2, price: 18 },
+  ],
+  shipping: 5,
+};
+
+export const emptyCart: Cart = { items: [], shipping: 0 };
+
+export const subtotal = (cart: Cart) => cart.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
+
+export const money = (amount: number) =>
+  new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount);
+
+export interface Address {
+  name: string;
+  street: string;
+  city: string;
+  postcode: string;
+}
+
+export const sampleAddress: Address = {
+  name: "Sam Rivera",
+  street: "12 Harbour Lane",
+  city: "Portland",
+  postcode: "97201",
+};

package/template/prototypes/checkout/src/screens/cart/screen.tsx

@@ -0,0 +1,67 @@
+import { defineScreen, useFixture, useGoToState } from "@cogitato/runtime";
+import { Page } from "@/components/Page";
+import { Button } from "@/kit/Button";
+import { Card } from "@/kit/Card";
+import { Stack } from "@/kit/Stack";
+import { Text } from "@/kit/Text";
+import { emptyCart, money, sampleCart, subtotal, type Cart } from "@/mocks/cart";
+
+function CartScreen() {
+  const { cart } = useFixture<{ cart: Cart }>();
+  const goTo = useGoToState();
+
+  if (cart.items.length === 0) {
+    return (
+      <Page title="Your cart" step="Cart">
+        <Card padding="lg">
+          <Stack gap="3" align="start">
+            <Text>Your cart is empty.</Text>
+            <Button variant="secondary" data-kit-id="cart.keep-shopping">
+              Keep shopping
+            </Button>
+          </Stack>
+        </Card>
+      </Page>
+    );
+  }
+
+  return (
+    <Page title="Your cart" step="Cart">
+      <Card>
+        <Stack gap="4">
+          {cart.items.map((item) => (
+            <Stack key={item.id} direction="row" gap="4">
+              <Stack gap="1" style={{ flex: 1 }}>
+                <Text variant="label">{item.name}</Text>
+                <Text tone="muted">
+                  {item.variant} · Qty {item.quantity}
+                </Text>
+              </Stack>
+              <Text>{money(item.price * item.quantity)}</Text>
+            </Stack>
+          ))}
+        </Stack>
+      </Card>
+      <Stack direction="row" gap="4">
+        <Text variant="label" style={{ flex: 1 }}>
+          Subtotal
+        </Text>
+        <Text variant="label">{money(subtotal(cart))}</Text>
+      </Stack>
+      <Button fullWidth size="lg" data-kit-id="cart.checkout" onPress={() => goTo("checkout.shipping.default")}>
+        Check out
+      </Button>
+    </Page>
+  );
+}
+
+export default defineScreen({
+  id: "cart",
+  route: "/cart",
+  title: "Cart",
+  fixtures: {
+    default: { title: "Two items", data: { cart: sampleCart } },
+    empty: { title: "Empty cart", data: { cart: emptyCart } },
+  },
+  component: CartScreen,
+});

package/template/prototypes/checkout/src/screens/checkout/confirmation/screen.tsx

@@ -0,0 +1,34 @@
+import { defineScreen, useFixture, useGoToState } from "@cogitato/runtime";
+import { Page } from "@/components/Page";
+import { Button } from "@/kit/Button";
+import { Card } from "@/kit/Card";
+import { Stack } from "@/kit/Stack";
+import { Text } from "@/kit/Text";
+
+function ConfirmationScreen() {
+  const { orderNumber, email } = useFixture<{ orderNumber: string; email: string }>();
+  const goTo = useGoToState();
+  return (
+    <Page title="Order confirmed">
+      <Card padding="lg" elevation="raised">
+        <Stack gap="2">
+          <Text variant="label">Order {orderNumber}</Text>
+          <Text tone="muted">We've sent a receipt to {email}. Your order ships in 1–2 business days.</Text>
+        </Stack>
+      </Card>
+      <Button variant="secondary" data-kit-id="checkout.confirmation.done" onPress={() => goTo("cart.empty")}>
+        Back to the shop
+      </Button>
+    </Page>
+  );
+}
+
+export default defineScreen({
+  id: "checkout.confirmation",
+  route: "/checkout/confirmation",
+  title: "Order confirmed",
+  fixtures: {
+    default: { title: "Confirmed", data: { orderNumber: "#10482", email: "sam@example.com" } },
+  },
+  component: ConfirmationScreen,
+});

package/template/prototypes/checkout/src/screens/checkout/payment/screen.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from "react";
+import { defineScreen, useFixture, useFrameMode, useGoToState } from "@cogitato/runtime";
+import { Page } from "@/components/Page";
+import { Banner } from "@/kit/Banner";
+import { Button } from "@/kit/Button";
+import { Card } from "@/kit/Card";
+import { Input } from "@/kit/Input";
+import { Stack } from "@/kit/Stack";
+import { Text } from "@/kit/Text";
+import { money, sampleCart, subtotal } from "@/mocks/cart";
+
+interface PaymentData {
+  processing?: boolean;
+  declined?: boolean;
+}
+
+const total = subtotal(sampleCart) + sampleCart.shipping;
+
+function PaymentScreen() {
+  const { processing = false, declined = false } = useFixture<PaymentData>();
+  const goTo = useGoToState();
+  const frame = useFrameMode();
+
+  // The mock payment always succeeds after a moment. Canvas frames hold still.
+  useEffect(() => {
+    if (!processing || frame) return;
+    const timer = setTimeout(() => goTo("checkout.confirmation.default"), 1500);
+    return () => clearTimeout(timer);
+  }, [processing, frame, goTo]);
+
+  return (
+    <Page title="Payment" step="Payment">
+      {declined && (
+        <Banner tone="danger" title="Your card was declined" data-kit-id="checkout.payment.error-banner">
+          Try another card, or check the details with your bank.
+        </Banner>
+      )}
+      <Card>
+        <Stack gap="4">
+          <Input label="Card number" placeholder="1234 5678 9012 3456" disabled={processing} data-kit-id="checkout.payment.card-number" />
+          <Stack direction="row" gap="3">
+            <Input label="Expiry" placeholder="MM / YY" disabled={processing} data-kit-id="checkout.payment.expiry" />
+            <Input label="Security code" placeholder="123" disabled={processing} data-kit-id="checkout.payment.cvc" />
+          </Stack>
+          <Input label="Name on card" disabled={processing} data-kit-id="checkout.payment.cardholder" />
+        </Stack>
+      </Card>
+      <Stack direction="row" gap="4">
+        <Text variant="label" style={{ flex: 1 }}>
+          Total
+        </Text>
+        <Text variant="label">{money(total)}</Text>
+      </Stack>
+      <Button
+        fullWidth
+        size="lg"
+        loading={processing}
+        data-kit-id="checkout.payment.submit"
+        onPress={() => goTo("checkout.payment.processing")}
+      >
+        {processing ? "Processing" : `Pay ${money(total)}`}
+      </Button>
+    </Page>
+  );
+}
+
+export default defineScreen<PaymentData>({
+  id: "checkout.payment",
+  route: "/checkout/payment",
+  title: "Payment",
+  fixtures: {
+    default: { title: "Empty form", data: {} },
+    processing: { title: "Processing", data: { processing: true } },
+    "card-declined": { title: "Card declined", data: { declined: true } },
+  },
+  component: PaymentScreen,
+});

package/template/prototypes/checkout/src/screens/checkout/shipping/screen.tsx

@@ -0,0 +1,60 @@
+import { defineScreen, useFixture, useGoToState } from "@cogitato/runtime";
+import { Page } from "@/components/Page";
+import { Banner } from "@/kit/Banner";
+import { Button } from "@/kit/Button";
+import { Input } from "@/kit/Input";
+import { Stack } from "@/kit/Stack";
+import { sampleAddress, type Address } from "@/mocks/cart";
+
+interface ShippingData {
+  address: Partial<Address>;
+  addressError?: string;
+}
+
+function ShippingScreen() {
+  const { address, addressError } = useFixture<ShippingData>();
+  const goTo = useGoToState();
+
+  return (
+    <Page title="Where should we send it?" step="Shipping">
+      {addressError && (
+        <Banner tone="danger" title="We couldn't find that address" data-kit-id="checkout.shipping.address-banner">
+          Check the street and postcode, then try again.
+        </Banner>
+      )}
+      <Stack gap="4">
+        <Input label="Full name" value={address.name} data-kit-id="checkout.shipping.name" />
+        <Input label="Street address" value={address.street} error={addressError} data-kit-id="checkout.shipping.street" />
+        <Stack direction="row" gap="3">
+          <Input label="City" value={address.city} data-kit-id="checkout.shipping.city" style={{ flex: 1 }} />
+          <Input label="Postcode" value={address.postcode} data-kit-id="checkout.shipping.postcode" />
+        </Stack>
+      </Stack>
+      <Stack gap="2">
+        <Button fullWidth size="lg" data-kit-id="checkout.shipping.continue" onPress={() => goTo("checkout.payment.default")}>
+          Continue to payment
+        </Button>
+        <Button variant="ghost" data-kit-id="checkout.shipping.back" onPress={() => goTo("cart.default")}>
+          Back to cart
+        </Button>
+      </Stack>
+    </Page>
+  );
+}
+
+export default defineScreen<ShippingData>({
+  id: "checkout.shipping",
+  route: "/checkout/shipping",
+  title: "Shipping",
+  fixtures: {
+    default: { title: "Empty form", data: { address: {} } },
+    "invalid-address": {
+      title: "Address not found",
+      data: {
+        address: { ...sampleAddress, street: "12 Harbor Ln" },
+        addressError: "We couldn't match this street to the postcode.",
+      },
+    },
+  },
+  component: ShippingScreen,
+});

package/template/prototypes/checkout/src/styles/global.css

@@ -0,0 +1,12 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font: var(--kit-typography-body);
+  color: var(--kit-color-text-default);
+  background: var(--kit-color-surface-subtle);
+}

package/template/prototypes/checkout/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["vite/client", "@cogitato/runtime/client"],
+    "paths": { "@/kit/*": ["../../kit/*"], "@/*": ["./src/*"] }
+  },
+  "include": ["src", "../../kit", "vite.config.ts"]
+}

package/template/prototypes/checkout/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { kit } from "@cogitato/runtime/vite";
+
+export default defineConfig({
+  plugins: [react(), kit()],
+});