create-cogitato 0.0.0-stage → 0.1.0

package/template/src/kit/Card.module.css

@@ -0,0 +1,22 @@
+.card {
+  background: var(--kit-color-surface-default);
+  border: 1px solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-lg);
+}
+
+.sm {
+  padding: var(--kit-space-3);
+}
+
+.md {
+  padding: var(--kit-space-4);
+}
+
+.lg {
+  padding: var(--kit-space-6);
+}
+
+.raised {
+  border-color: transparent;
+  box-shadow: var(--kit-shadow-card);
+}

package/template/src/kit/Card.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./Card.module.css";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: "sm" | "md" | "lg";
+  elevation?: "flat" | "raised";
+  children: ReactNode;
+}
+
+export function Card({ padding = "md", elevation = "flat", children, className, ...rest }: CardProps) {
+  return (
+    <div {...rest} className={[styles.card, styles[padding], styles[elevation], className].filter(Boolean).join(" ")}>
+      {children}
+    </div>
+  );
+}
+
+export default Card;

package/template/src/kit/Input.module.css

@@ -0,0 +1,43 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+}
+
+.label {
+  font: var(--kit-typography-label);
+  color: var(--kit-color-text-default);
+}
+
+.input {
+  font: var(--kit-typography-body);
+  padding: var(--kit-space-2) var(--kit-space-3);
+  border: 1px solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-md);
+  background: var(--kit-color-surface-default);
+  color: var(--kit-color-text-default);
+}
+
+.input:focus {
+  outline: 2px solid var(--kit-color-border-focus);
+  outline-offset: -1px;
+}
+
+.input:disabled {
+  background: var(--kit-color-neutral-100);
+  color: var(--kit-color-text-muted);
+}
+
+.invalid {
+  border-color: var(--kit-color-feedback-danger);
+}
+
+.hint {
+  font-size: var(--kit-font-size-sm);
+  color: var(--kit-color-text-muted);
+}
+
+.error {
+  font-size: var(--kit-font-size-sm);
+  color: var(--kit-color-text-danger);
+}

package/template/src/kit/Input.tsx

@@ -0,0 +1,52 @@
+import { useId, type InputHTMLAttributes } from "react";
+import styles from "./Input.module.css";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> {
+  label: string;
+  type?: "text" | "email" | "password" | "number" | "tel";
+  /** Starting value. The field stays editable, so prototypes can be typed into. */
+  value?: string;
+  placeholder?: string;
+  /** Help text shown under the field. */
+  hint?: string;
+  /** Error text. Setting it shows the error state. */
+  error?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export function Input({ label, type = "text", value, hint, error, disabled = false, onChange, className, ...rest }: InputProps) {
+  const id = useId();
+  const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : undefined;
+  return (
+    <div className={[styles.field, className].filter(Boolean).join(" ")}>
+      <label htmlFor={id} className={styles.label}>
+        {label}
+      </label>
+      <input
+        {...rest}
+        id={id}
+        type={type}
+        defaultValue={value}
+        disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={describedBy}
+        className={[styles.input, error && styles.invalid].filter(Boolean).join(" ")}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+      {error ? (
+        <span id={`${id}-error`} className={styles.error}>
+          {error}
+        </span>
+      ) : (
+        hint && (
+          <span id={`${id}-hint`} className={styles.hint}>
+            {hint}
+          </span>
+        )
+      )}
+    </div>
+  );
+}
+
+export default Input;

package/template/src/kit/Stack.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+  direction?: "row" | "column";
+  /** Step on the space scale. */
+  gap?: "0" | "1" | "2" | "3" | "4" | "6" | "8";
+  align?: "start" | "center" | "end" | "stretch";
+  children: ReactNode;
+}
+
+const ALIGN = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" } as const;
+
+export function Stack({ direction = "column", gap = "4", align = "stretch", children, style, ...rest }: StackProps) {
+  return (
+    <div
+      {...rest}
+      style={{
+        display: "flex",
+        flexDirection: direction,
+        alignItems: ALIGN[align],
+        gap: `var(--kit-space-${gap})`,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Stack;

package/template/src/kit/Text.module.css

@@ -0,0 +1,32 @@
+.text {
+  margin: 0;
+}
+
+.body {
+  font: var(--kit-typography-body);
+}
+
+.label {
+  font: var(--kit-typography-label);
+}
+
+.heading {
+  font: var(--kit-typography-heading);
+  letter-spacing: var(--kit-typography-heading-letter-spacing);
+}
+
+.default {
+  color: var(--kit-color-text-default);
+}
+
+.muted {
+  color: var(--kit-color-text-muted);
+}
+
+.danger {
+  color: var(--kit-color-text-danger);
+}
+
+.inverse {
+  color: var(--kit-color-text-inverse);
+}

package/template/src/kit/Text.tsx

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import styles from "./Text.module.css";
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  variant?: "body" | "label" | "heading";
+  tone?: "default" | "muted" | "danger" | "inverse";
+  as?: "p" | "span" | "h1" | "h2" | "h3" | "label";
+  children: ReactNode;
+}
+
+export function Text({ variant = "body", tone = "default", as: Tag = "p", children, className, ...rest }: TextProps) {
+  return (
+    <Tag {...rest} className={[styles.text, styles[variant], styles[tone], className].filter(Boolean).join(" ")}>
+      {children}
+    </Tag>
+  );
+}
+
+export default Text;

package/template/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/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/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/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/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/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/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/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": { "@/*": ["./src/*"] }
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/template/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()],
+});