@getstrata/starter 0.1.4 → 0.1.9

package/dist/templates/overlays/spa-react/frontend/src/app.css

@@ -0,0 +1,98 @@
+:root {
+  color: #0f172a;
+  background: #f8fafc;
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: #2563eb;
+}
+
+.app-shell {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.site-header nav {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.stack-form {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 24rem;
+}
+
+.stack-form label {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.stack-form input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.5rem;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  background: #2563eb;
+  color: #fff;
+}
+
+button.secondary {
+  background: #64748b;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.hint {
+  color: #64748b;
+}

package/dist/templates/overlays/spa-react/frontend/src/auth/AuthContext.tsx

@@ -0,0 +1,103 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { apiFetch } from "../api/client";
+import { clearToken, readToken, writeToken } from "./tokenStorage";
+
+interface AuthUser {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+}
+
+interface AuthContextValue {
+  token: string | null;
+  user: AuthUser | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<string | null>(() => readToken());
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(Boolean(readToken()));
+
+  const loadProfile = useCallback(async (activeToken: string) => {
+    const profile = await apiFetch<AuthUser>("/auth/me", { token: activeToken });
+    setUser(profile);
+  }, []);
+
+  useEffect(() => {
+    if (!token) {
+      setUser(null);
+      setLoading(false);
+      return;
+    }
+
+    loadProfile(token)
+      .catch(() => {
+        clearToken();
+        setToken(null);
+        setUser(null);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [loadProfile, token]);
+
+  const login = useCallback(
+    async (email: string, password: string) => {
+      const body = await apiFetch<{ token: string }>("/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ email, password }),
+      });
+
+      writeToken(body.token);
+      setToken(body.token);
+      await loadProfile(body.token);
+    },
+    [loadProfile],
+  );
+
+  const logout = useCallback(() => {
+    clearToken();
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      token,
+      user,
+      loading,
+      login,
+      logout,
+    }),
+    [loading, login, logout, token, user],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+
+  return context;
+}
+
+export type { AuthUser };
+export { AuthProvider, useAuth };

package/dist/templates/overlays/spa-react/frontend/src/auth/tokenStorage.ts

@@ -0,0 +1,15 @@
+const TOKEN_KEY = "strata_api_token";
+
+function readToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+function writeToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+export { clearToken, readToken, TOKEN_KEY, writeToken };

package/dist/templates/overlays/spa-react/frontend/src/main.tsx

@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import { AuthProvider } from "./auth/AuthContext";
+import "./app.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root not found");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <BrowserRouter basename="/app">
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </StrictMode>,
+);

package/dist/templates/overlays/spa-react/frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,67 @@
+import { type FormEvent, useState } from "react";
+import { Navigate, useNavigate } from "react-router-dom";
+import { ApiError } from "../api/client";
+import { useAuth } from "../auth/AuthContext";
+
+export default function LoginPage() {
+  const { login, token } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("admin@example.test");
+  const [password, setPassword] = useState("password");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  if (token) {
+    return <Navigate to="/organizations" replace />;
+  }
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      await login(email, password);
+      navigate("/organizations");
+    } catch (cause) {
+      setError(cause instanceof ApiError ? cause.message : "Login failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <section className="card">
+      <h1>Sign in</h1>
+      <p className="hint">Use seeded credentials or your own API user.</p>
+
+      {error ? <p className="error">{error}</p> : null}
+
+      <form className="stack-form" onSubmit={onSubmit}>
+        <label>
+          Email
+          <input
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+          />
+        </label>
+
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+          />
+        </label>
+
+        <button type="submit" disabled={submitting}>
+          {submitting ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+    </section>
+  );
+}

package/dist/templates/overlays/spa-react/frontend/src/pages/NotFoundPage.tsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom";
+
+export default function NotFoundPage() {
+  return (
+    <section className="card">
+      <h1>Not found</h1>
+      <p>
+        Return to <Link to="/organizations">organizations</Link>.
+      </p>
+    </section>
+  );
+}

package/dist/templates/overlays/spa-react/frontend/src/pages/OrganizationsPage.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { apiFetch } from "../api/client";
+import { useAuth } from "../auth/AuthContext";
+
+interface Organization {
+  id: number;
+  name: string;
+  slug: string;
+}
+
+interface PaginatedOrganizations {
+  data: Organization[];
+  meta: {
+    total: number;
+  };
+}
+
+export default function OrganizationsPage() {
+  const { token } = useAuth();
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    apiFetch<PaginatedOrganizations>("/organizations", { token })
+      .then((body) => setOrganizations(body.data))
+      .catch((cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : "Failed to load organizations");
+      });
+  }, [token]);
+
+  return (
+    <section>
+      <h1>Organizations</h1>
+      <p className="hint">{organizations.length} loaded from the JSON API.</p>
+
+      {error ? <p className="error">{error}</p> : null}
+
+      <div className="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Slug</th>
+            </tr>
+          </thead>
+          <tbody>
+            {organizations.map((organization) => (
+              <tr key={organization.id}>
+                <td>{organization.name}</td>
+                <td>
+                  <code>{organization.slug}</code>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        Continue to <Link to="/projects">projects</Link> or <Link to="/tasks">tasks</Link>.
+      </p>
+    </section>
+  );
+}

package/dist/templates/overlays/spa-react/frontend/src/pages/ProjectsPage.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { apiFetch } from "../api/client";
+import { useAuth } from "../auth/AuthContext";
+
+interface Project {
+  id: number;
+  name: string;
+  status: string;
+  organization_id: number;
+}
+
+interface PaginatedProjects {
+  data: Project[];
+}
+
+export default function ProjectsPage() {
+  const { token } = useAuth();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    apiFetch<PaginatedProjects>("/projects?include=organization", { token })
+      .then((body) => setProjects(body.data))
+      .catch((cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : "Failed to load projects");
+      });
+  }, [token]);
+
+  return (
+    <section>
+      <h1>Projects</h1>
+      {error ? <p className="error">{error}</p> : null}
+
+      <div className="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Status</th>
+              <th>Organization</th>
+            </tr>
+          </thead>
+          <tbody>
+            {projects.map((project) => (
+              <tr key={project.id}>
+                <td>{project.name}</td>
+                <td>{project.status}</td>
+                <td>{project.organization_id}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        Back to <Link to="/organizations">organizations</Link>.
+      </p>
+    </section>
+  );
+}

package/dist/templates/overlays/spa-react/frontend/src/pages/TasksPage.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { apiFetch } from "../api/client";
+import { useAuth } from "../auth/AuthContext";
+
+interface Task {
+  id: number;
+  title: string;
+  status: string;
+  project_id: number;
+}
+
+interface PaginatedTasks {
+  data: Task[];
+}
+
+export default function TasksPage() {
+  const { token } = useAuth();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    apiFetch<PaginatedTasks>("/tasks", { token })
+      .then((body) => setTasks(body.data))
+      .catch((cause: unknown) => {
+        setError(cause instanceof Error ? cause.message : "Failed to load tasks");
+      });
+  }, [token]);
+
+  return (
+    <section>
+      <h1>Tasks</h1>
+      {error ? <p className="error">{error}</p> : null}
+
+      <div className="card">
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              <th>Status</th>
+              <th>Project</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tasks.map((task) => (
+              <tr key={task.id}>
+                <td>{task.title}</td>
+                <td>{task.status}</td>
+                <td>{task.project_id}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p>
+        Back to <Link to="/organizations">organizations</Link>.
+      </p>
+    </section>
+  );
+}

package/dist/templates/{templates → overlays/spa-react/frontend}/tsconfig.json

@@ -1,14 +1,17 @@
 {
   "compilerOptions": {
     "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
     "skipLibCheck": true,
-    "noEmit": true,
+    "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "types": ["bun"],
-    "lib": ["ES2022", "DOM"]
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "types": ["bun"]
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src", "build.ts", "dev-server.ts", "bun-env.d.ts"]
 }

package/dist/templates/package.json

@@ -11,9 +11,9 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@getstrata/bootstrap": "^0.2.53",
+    "@getstrata/bootstrap": "^0.4.2",
     "@getstrata/cli": "^0.2.0",
-    "@getstrata/core": "^0.5.62"
+    "@getstrata/core": "^0.7.4"
   },
   "devDependencies": {
     "@types/bun": "^1.4.0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getstrata/starter",
-  "version": "0.1.4",
-  "description": "Scaffold a new Strata app — bun create strata",
+  "version": "0.1.9",
+  "description": "Interactive create-strata wizard. Choose each layer; one database engine.",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "bun build cli.ts --outdir dist --target bun && cp -r templates dist/templates",
+    "build": "bun build cli.ts --outdir dist --target bun && rm -rf dist/templates && mkdir -p dist/templates/overlays && cp -r templates/. dist/templates && cp -r ../../templates/scaffold/. dist/templates/overlays",
     "prepublishOnly": "bun run build"
   },
   "publishConfig": {

package/dist/templates/templates/.env.example

@@ -1,19 +0,0 @@
-DATABASE_URL=postgresql://postgres:postgres@localhost:5432/{{PROJECT_NAME}}
-PORT=3000
-APP_URL=http://localhost:3000
-APP_ENV=local
-APP_NAME={{PROJECT_NAME}}
-FRONTEND_MODE=api
-TENANCY_DRIVER=none
-
-# Required in production when FRONTEND_MODE=server-htmx
-# SESSION_SECRET=
-
-# Set only behind a trusted reverse proxy
-# TRUST_FORWARDED_FOR=true
-
-# Required in production to expose GET /metrics
-# METRICS_TOKEN=
-
-# Production should set FEATURE_PUBLIC_READS=false
-# FEATURE_PUBLIC_READS=false

package/dist/templates/templates/docker-compose.yml

@@ -1,14 +0,0 @@
-services:
-  postgres:
-    image: postgres:16-alpine
-    environment:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: {{PROJECT_NAME}}
-    ports:
-      - "5432:5432"
-    volumes:
-      - pgdata:/var/lib/postgresql/data
-
-volumes:
-  pgdata:

package/dist/templates/templates/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "strata dev",
-    "start": "strata start",
-    "db:migrate": "strata migrate",
-    "db:fresh": "strata migrate:fresh",
-    "check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@getstrata/bootstrap": "^0.2.53",
-    "@getstrata/cli": "^0.2.0",
-    "@getstrata/core": "^0.5.62"
-  },
-  "devDependencies": {
-    "@types/bun": "^1.4.0",
-    "typescript": "^5.9.2"
-  }
-}

package/dist/templates/templates/public/assets/site.css

@@ -1,29 +0,0 @@
-:root {
-  color-scheme: light dark;
-  font-family: system-ui, sans-serif;
-  line-height: 1.5;
-}
-
-body {
-  margin: 0;
-  padding: 0 1.5rem 2rem;
-  max-width: 48rem;
-}
-
-.site-header {
-  padding: 1rem 0;
-}
-
-.brand {
-  font-weight: 700;
-  text-decoration: none;
-  color: inherit;
-}
-
-.section h1 {
-  margin-top: 0;
-}
-
-code {
-  font-size: 0.9em;
-}

package/dist/templates/templates/src/bootstrap/config.ts

@@ -1,18 +0,0 @@
-export interface AppConfig {
-  port: number;
-  appUrl: string;
-  databaseUrl: string;
-}
-
-export function loadConfig(): AppConfig {
-  const databaseUrl = process.env.DATABASE_URL;
-  if (!databaseUrl) {
-    throw new Error("DATABASE_URL is required");
-  }
-
-  return {
-    port: Number(process.env.PORT ?? 3000),
-    appUrl: process.env.APP_URL ?? "http://localhost:3000",
-    databaseUrl,
-  };
-}