create-githat-app 1.3.0 → 1.4.0

package/templates/fullstack/apps-web-nextjs/package.json.hbs

@@ -0,0 +1,34 @@
+{
+  "name": "@{{projectName}}/web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@githat/nextjs": "^0.2.6",
+    "@githat/ui": "^1.0.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+{{#if typescript}}
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.9.0",
+{{/if}}
+{{#if useTailwind}}
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0"
+{{else}}
+    "@types/node": "^22.0.0"
+{{/if}}
+  }
+}

package/templates/fullstack/apps-web-nextjs/postcss.config.mjs.hbs

@@ -0,0 +1,9 @@
+{{#if useTailwind}}
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;
+{{/if}}

package/templates/fullstack/apps-web-nextjs/tsconfig.json.hbs

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/fullstack/root/.gitignore.hbs

@@ -0,0 +1,42 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build
+dist/
+.next/
+out/
+build/
+
+# Turbo
+.turbo/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Testing
+coverage/
+.nyc_output/
+
+# TypeScript
+*.tsbuildinfo

package/templates/fullstack/root/githat.yaml.hbs

@@ -0,0 +1,17 @@
+version: 1
+name: {{projectName}}
+
+apps:
+  web:
+    type: {{framework}}
+    path: apps/web
+    domain: {{projectName}}.githat.io
+    env:
+      NEXT_PUBLIC_API_URL: $\{{apps.api.url}}
+
+  api:
+    type: {{backendFramework}}
+    path: apps/api
+    domain: api.{{projectName}}.githat.io
+    env:
+      GITHAT_PUBLISHABLE_KEY: $\{{secrets.GITHAT_PUBLISHABLE_KEY}}

package/templates/fullstack/root/package.json.hbs

@@ -0,0 +1,15 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "workspaces": ["apps/*", "packages/*"],
+  "scripts": {
+    "dev": "turbo dev",
+    "build": "turbo build",
+    "lint": "turbo lint",
+    "typecheck": "turbo typecheck"
+  },
+  "devDependencies": {
+    "turbo": "^2.3.0"
+  },
+  "packageManager": "{{packageManager}}@10.9.2"
+}

package/templates/fullstack/root/turbo.json.hbs

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
+    }
+  }
+}

package/templates/marketplace/CULTURE.md

@@ -0,0 +1,74 @@
+# Marketplace template — culture notes
+
+This template ships with Latin American framing by default: bilingual
+microcopy (Spanish primary, English gloss), a category seed list
+suited to a Caribbean *colmado*, warm-amber + produce-green palette.
+That's because the first real consumer is **Colmado**, a Dominican-
+flavored bodega marketplace. Anglo developers will get bilingual
+copy out of the box — most US neighborhoods that *need* a
+marketplace template are multilingual anyway.
+
+If you're targeting a different region, change these in order:
+
+1. `src/lib/categories.ts` — category seed data
+2. `app/page.tsx` — hero strings
+3. `src/components/AuthChoice.tsx` — checkout copy
+4. `app/globals.css` — `--brand-primary` / `--brand-secondary`
+
+Everything else is region-agnostic.
+
+## What "colmado" means
+
+A *colmado* in Latin America (Caribbean especially — Dominican
+Republic, Puerto Rico) is a corner store, but more than a corner
+store: it's the social anchor of a city block. Music plays. Domino
+tables out front. The shopkeeper (*colmadero*) knows your kids by
+name and gives you *fiao* — store credit on a handshake — when
+you're between paychecks. Recargas (phone top-ups) are universal.
+Single eggs, single cigarettes, loose rice by the pound — sold by
+the *menudeo*, not in pre-packed quantities.
+
+Cuban *bodegas* and Mexican *misceláneas* / *tienditas* fill the
+same social slot but with different vocab and different drink
+brands.
+
+## Microcopy that matters
+
+These strings are baked into the template. Don't translate them
+literally if you reskin — find local equivalents.
+
+| Spanish | English gloss | Where it appears |
+|---|---|---|
+| **Pídelo y te lo llevamos** | Order it, we'll bring it to you | Cart CTA |
+| **Tu colmadero** | Your shopkeeper (NOT "vendor") | Vendor profile label |
+| **Tu funda** | Your bag (Dominican; replaces "Cart") | Top nav cart icon label |
+| **Recargas** | Phone top-ups (universally understood, keep Spanish) | Category tile |
+| **Cerquita de ti** | Right near you (warmer than "near you") | Homepage hero |
+| **Lo de siempre** | The usual (for re-order) | Saved-cart shortcut |
+| **Está fresquecito** | Nice and fresh (for produce) | Freshness tag |
+| **Abierto ahorita** | Open right now (colloquial) | Open/closed badge |
+| **Un momentico…** | One moment… | Loading state |
+| **Llegó tu pedido, ¡buen provecho!** | Your order is here, enjoy! | Delivery confirmation |
+
+## Patterns to avoid (Latin American context)
+
+- "Carrito de compras" — too Anglo-translated. Use **"Tu funda."**
+- "Vendedor" — clinical. Use **"Tu colmadero"** or **"Doña/Don [Nombre]."**
+- *Usted* everywhere — formal, distancing. Use *tú* unless the audience is older.
+- Cartoon sombreros / maracas / "spicy" tropes — condescending.
+- Demanding a credit card up front — kills the *fiao* spirit. Cash
+  on delivery and tab-based payment must be first-class options.
+- Sterile English category names like "Beverages." Use **"Bebidas /
+  Cervezas frías"** with the freshness signal preserved.
+- Treating *menudeo* (single egg, single cigarette) as broken data.
+  These are real SKUs.
+
+## Why the bilingual default helps US adoption too
+
+The template's first audience is Latin American, but the second is
+the **US Latino diaspora and the Anglo neighborhoods buying from
+local bodegas**. NYC bodegas, Texas tienditas, halal corner stores
+in every borough — same DNA, same UX needs. Shipping bilingual by
+default means the diaspora developer doesn't fight the template,
+and Anglo developers building locally get an honest representation
+of who their users are.

package/templates/marketplace/app/(auth)/sign-in/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignInForm } from '@githat/nextjs';
+
+export default function SignInPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignInForm signUpUrl="/sign-up" {{#if includeForgotPassword}}forgotPasswordUrl="/forgot-password"{{/if}} />
+    </main>
+  );
+}

package/templates/marketplace/app/(auth)/sign-up/page.tsx.hbs

@@ -0,0 +1,9 @@
+import { SignUpForm } from '@githat/nextjs';
+
+export default function SignUpPage() {
+  return (
+    <main {{#if useTailwind}}className="flex items-center justify-center min-h-screen bg-[#09090b]"{{else}}style=\{{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b' }}{{/if}}>
+      <SignUpForm signInUrl="/sign-in" />
+    </main>
+  );
+}

package/templates/marketplace/app/(shop)/[slug]/p/[productId]/page.tsx.hbs

@@ -0,0 +1,99 @@
+/**
+ * Product detail — `/<slug>/p/<productId>`.
+ *
+ * Server component. Fetch by (slug, productId), render. The starter
+ * ships sample content so the route works even before a backend
+ * exists. Cart writes go through `/api/cart/add` (you build that
+ * route handler against your data layer).
+ */
+
+import Link from 'next/link';
+
+interface PageProps {
+  params: Promise<{ slug: string; productId: string }>;
+}
+
+export default async function ProductPage({ params }: PageProps) {
+  const { slug, productId } = await params;
+
+  // TODO: replace with a real fetch
+  const product = {
+    id: productId,
+    name: 'Plátanos verdes (libra)',
+    price: 0.5,
+    description:
+      'Plátanos verdes recién llegados, perfectos para mangú. Vendido por libra.',
+    fresh: true,
+    storeName: 'Colmado de ejemplo',
+    storeOwner: 'Don Tito',
+    storeSlug: slug,
+  };
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <Link href={`/${product.storeSlug}`} style=\{{
+          fontSize: '0.875rem',
+          color: 'var(--fg-muted)',
+          marginBottom: 'var(--space-4)',
+          display: 'inline-block',
+        }}>
+          ← {product.storeName}
+        </Link>
+
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
+          {product.name}
+        </h1>
+
+        {product.fresh && (
+          <p style=\{{
+            display: 'inline-block',
+            padding: 'var(--space-1) var(--space-3)',
+            borderRadius: 'var(--radius-full, 9999px)',
+            background: 'var(--success)',
+            color: 'var(--bg)',
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            marginBottom: 'var(--space-3)',
+          }}>
+            Está fresquecito
+          </p>
+        )}
+
+        <p style=\{{ fontSize: '1.5rem', fontWeight: 600, marginBottom: 'var(--space-4)' }}>
+          ${product.price.toFixed(2)}
+        </p>
+
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)', lineHeight: 1.6 }}>
+          {product.description}
+        </p>
+
+        <p style=\{{ fontSize: '0.875rem', color: 'var(--fg-subtle)', marginBottom: 'var(--space-6)' }}>
+          De tu colmadero: <strong>{product.storeOwner}</strong>
+        </p>
+
+        {/*
+          Cart-add is a real fetch in production — you wire it to
+          /api/cart/add against your data layer + the anon-session
+          cookie from src/lib/anon-session.ts.
+        */}
+        <form action="/api/cart/add" method="POST">
+          <input type="hidden" name="productId" value={product.id} />
+          <input type="hidden" name="slug" value={product.storeSlug} />
+          <button type="submit" style=\{{
+            padding: 'var(--space-3) var(--space-6)',
+            borderRadius: 'var(--radius-md, 0.5rem)',
+            border: 'none',
+            background: 'var(--primary)',
+            color: 'var(--bg)',
+            fontWeight: 600,
+            fontSize: '1rem',
+            cursor: 'pointer',
+          }}>
+            Echar a la funda — Add to bag
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/marketplace/app/(shop)/[slug]/page.tsx.hbs

@@ -0,0 +1,90 @@
+/**
+ * A single colmadero's storefront — `/<slug>`.
+ *
+ * Server component. Take the slug, fetch the colmado's profile +
+ * products from your data layer, render. The starter ships static
+ * sample content so the route renders even without a backend.
+ *
+ * Real implementations:
+ *  - Read by slug from your `colmados` table (Postgres, DynamoDB,
+ *    whatever)
+ *  - 404 via `notFound()` from 'next/navigation' if the slug is
+ *    unknown
+ *  - Pre-render the popular ones via `generateStaticParams()`
+ */
+
+import Link from 'next/link';
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function ShopPage({ params }: PageProps) {
+  const { slug } = await params;
+
+  // TODO: replace with a real fetch
+  const colmado = {
+    name: 'Colmado de ejemplo',
+    slug,
+    owner: 'Don Tito',
+    address: 'Calle Duarte #42',
+    open: true,
+    products: [
+      { id: '1', name: 'Plátanos verdes (libra)', price: 0.5, fresh: true },
+      { id: '2', name: 'Café Santo Domingo (1lb)', price: 6.99, fresh: false },
+      { id: '3', name: 'Salami Induveca', price: 4.5, fresh: false },
+      { id: '4', name: 'Recarga Claro $5', price: 5.0, fresh: false },
+    ],
+  };
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '48rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <header style=\{{ marginBottom: 'var(--space-8)' }}>
+          <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2.25rem', marginBottom: 'var(--space-2)' }}>
+            {colmado.name}
+          </h1>
+          <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-2)' }}>
+            Tu colmadero: <strong>{colmado.owner}</strong>
+          </p>
+          <p style=\{{ color: 'var(--fg-subtle)', fontSize: '0.875rem', display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
+            <span>{colmado.address}</span>
+            <span>·</span>
+            <span style=\{{ color: colmado.open ? 'var(--success)' : 'var(--danger)' }}>
+              {colmado.open ? 'Abierto ahorita' : 'Cerrado'}
+            </span>
+          </p>
+        </header>
+
+        <section>
+          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Productos</h2>
+          <ul style=\{{ listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 'var(--space-3)' }}>
+            {colmado.products.map((p) => (
+              <li key={p.id}>
+                <Link href={`/${slug}/p/${p.id}`} style=\{{
+                  display: 'block',
+                  padding: 'var(--space-4)',
+                  borderRadius: 'var(--radius-md, 0.5rem)',
+                  border: '1px solid var(--border)',
+                  background: 'var(--surface)',
+                  color: 'inherit',
+                  textDecoration: 'none',
+                }}>
+                  <div style=\{{ fontWeight: 600, marginBottom: 'var(--space-1)' }}>{p.name}</div>
+                  {p.fresh && (
+                    <div style=\{{ fontSize: '0.75rem', color: 'var(--success)', marginBottom: 'var(--space-1)' }}>
+                      Está fresquecito
+                    </div>
+                  )}
+                  <div style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>
+                    ${p.price.toFixed(2)}
+                  </div>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+    </div>
+  );
+}

package/templates/marketplace/app/admin/page.tsx.hbs

@@ -0,0 +1,95 @@
+'use client';
+
+import { useAuth } from '@githat/nextjs';
+
+/**
+ * Seller dashboard — `/admin`.
+ *
+ * Auth-gated: a logged-in colmadero lands here to manage products,
+ * orders, hours, and bank payouts. This is a placeholder shell —
+ * wire the data fetches in your own backend.
+ *
+ * The four sections below mirror what a real bodega owner asks first:
+ *   1. ¿Quién me debe? (today's pending orders)
+ *   2. ¿Qué se está vendiendo? (this week's revenue)
+ *   3. ¿Qué tengo en stock? (inventory)
+ *   4. ¿Cuándo me pagan? (next payout date)
+ */
+export default function AdminPage() {
+  const { isSignedIn, user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (!isSignedIn) {
+    return <SignInPrompt />;
+  }
+
+  return (
+    <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
+      <div style=\{{ maxWidth: '64rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
+        <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
+          Hola, {user?.name || 'colmadero'}.
+        </h1>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-8)' }}>
+          Esto es lo que está pasando hoy en tu colmado.
+        </p>
+
+        <div style=\{{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: 'var(--space-4)',
+        }}>
+          <Stat label="Pedidos pendientes" value="—" hint="Today's open orders" />
+          <Stat label="Ventas esta semana" value="$—" hint="This week's revenue" />
+          <Stat label="Productos activos" value="—" hint="In stock right now" />
+          <Stat label="Próximo pago" value="—" hint="Next bank payout" />
+        </div>
+
+        <p style=\{{ marginTop: 'var(--space-12)', fontSize: '0.875rem', color: 'var(--fg-subtle)' }}>
+          This dashboard is a starter shell — wire each tile to your
+          real data layer (Postgres, DynamoDB, Sebastn webhooks).
+          See <code>src/lib/anon-session.ts</code> for the cart-side
+          model.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value, hint }: { label: string; value: string; hint: string }) {
+  return (
+    <div style=\{{
+      padding: 'var(--space-5)',
+      borderRadius: 'var(--radius-md, 0.5rem)',
+      border: '1px solid var(--border)',
+      background: 'var(--surface)',
+    }}>
+      <div style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)', marginBottom: 'var(--space-1)' }}>{label}</div>
+      <div style=\{{ fontSize: '2rem', fontWeight: 600, marginBottom: 'var(--space-1)' }}>{value}</div>
+      <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-subtle)' }}>{hint}</div>
+    </div>
+  );
+}
+
+function Loading() {
+  return (
+    <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)' }}>
+      Un momentico…
+    </div>
+  );
+}
+
+function SignInPrompt() {
+  return (
+    <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center' }}>
+      <div style=\{{ textAlign: 'center', maxWidth: '24rem' }}>
+        <h2 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-3)' }}>Inicia sesión</h2>
+        <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
+          Sign in to see your colmado's dashboard.
+        </p>
+        <a href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</a>
+      </div>
+    </div>
+  );
+}