@farm.js/create-app 0.1.0-beta.4 → 0.1.0-beta.41

package/templates/auth/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import type { LayoutProps, Metadata } from "@farm.js/core";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Auth Starter",
+  description: "A production-shaped starter powered by FARMJS built-in authentication.",
+};
+
+export default function RootLayout({ children }: LayoutProps) {
+  return <>{children}</>;
+}

package/templates/auth/src/app/loading.tsx

@@ -0,0 +1,15 @@
+export default function Loading() {
+  return (
+    <main className="loading-shell" aria-label="Loading page" aria-live="polite">
+      <div className="loading-block">
+        <span className="loading-label">Loading account</span>
+        <div className="loading-line wide" />
+        <div className="loading-line" />
+        <div className="loading-grid">
+          <div />
+          <div />
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/auth/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+interface NotFoundProps {
+  pathname?: string;
+}
+
+export default function NotFound({ pathname }: NotFoundProps) {
+  return (
+    <main className="error-shell">
+      <section className="error-panel">
+        <span className="section-index">404 / NOT FOUND</span>
+        <h1>This route is outside the starter.</h1>
+        <p>
+          {pathname ? (
+            <>
+              Nothing is registered at <code>{pathname}</code>.
+            </>
+          ) : (
+            "The page you requested does not exist."
+          )}
+        </p>
+        <a className="button button-primary" href="/">
+          Return home
+        </a>
+      </section>
+    </main>
+  );
+}

package/templates/auth/src/app/page.tsx

@@ -0,0 +1,46 @@
+import { auth } from "@farm.js/auth/server";
+import { ResourceLinks } from "../components/resource-links";
+
+export default async function HomePage() {
+  const session = await auth.session();
+
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Auth starter</span>
+          </div>
+
+          <h1>
+            {session ? (
+              <>
+                Open your <code>/dashboard</code>.
+              </>
+            ) : (
+              <>
+                Start at <code>/sign-up</code>.
+              </>
+            )}
+          </h1>
+
+          <div className="command-list" aria-label="Development command">
+            <div className="command-row">
+              <span>01</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{
+              href: session ? "/dashboard" : "/sign-up",
+              label: session ? "Dashboard" : "Get started",
+            }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/auth/src/app/sign-in/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Sign in | FARMJS Auth Starter",
+  description: "Sign in with FARMJS Auth.",
+};
+
+export default function SignInPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-in" />
+    </AuthShell>
+  );
+}

package/templates/auth/src/app/sign-up/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "@farm.js/core";
+import { AuthForm } from "../../components/auth-form";
+import { AuthShell } from "../../components/auth-shell";
+
+export const metadata: Metadata = {
+  title: "Create account | FARMJS Auth Starter",
+  description: "Create an account with FARMJS Auth.",
+};
+
+export default function SignUpPage() {
+  return (
+    <AuthShell>
+      <AuthForm mode="sign-up" />
+    </AuthShell>
+  );
+}

package/templates/auth/src/components/auth-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { signIn, signUp } from "@farm.js/auth/client";
+
+interface AuthFormProps {
+  mode: "sign-in" | "sign-up";
+}
+
+export function AuthForm({ mode }: AuthFormProps) {
+  const isSignUp = mode === "sign-up";
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+    const email = String(formData.get("email") ?? "").trim();
+    const password = String(formData.get("password") ?? "");
+    const name = String(formData.get("name") ?? "").trim();
+
+    try {
+      const response = isSignUp
+        ? await signUp({
+            email,
+            name,
+            password,
+          })
+        : await signIn({
+            email,
+            password,
+          });
+
+      if (response.error) {
+        setError(response.error.message ?? "We could not complete that request.");
+        setPending(false);
+        return;
+      }
+
+      window.location.assign("/dashboard");
+    } catch {
+      setError("The authentication service could not be reached. Please try again.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="auth-form-panel">
+      <div className="auth-form-heading">
+        <span className="section-index">{isSignUp ? "01 / SIGN UP" : "01 / SIGN IN"}</span>
+        <h1>{isSignUp ? "Create account." : "Welcome back."}</h1>
+      </div>
+
+      <form className="auth-form" onSubmit={submit}>
+        {isSignUp ? (
+          <label className="field">
+            <span>
+              <small>01</small> Name
+            </span>
+            <input
+              autoComplete="name"
+              minLength={2}
+              name="name"
+              placeholder="Ada Lovelace"
+              required
+              type="text"
+            />
+          </label>
+        ) : null}
+
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "02" : "01"}</small> Email
+          </span>
+          <input
+            autoComplete="email"
+            name="email"
+            placeholder="you@example.com"
+            required
+            type="email"
+          />
+        </label>
+
+        <label className="field">
+          <span>
+            <small>{isSignUp ? "03" : "02"}</small> Password
+          </span>
+          <input
+            autoComplete={isSignUp ? "new-password" : "current-password"}
+            minLength={8}
+            name="password"
+            placeholder="At least 8 characters"
+            required
+            type="password"
+          />
+        </label>
+
+        {error ? (
+          <div className="form-error" role="alert">
+            <strong>Authentication failed</strong>
+            <span>{error}</span>
+          </div>
+        ) : null}
+
+        <button className="button button-primary auth-submit" disabled={pending} type="submit">
+          <span>{pending ? "Please wait…" : isSignUp ? "Create account" : "Sign in"}</span>
+          <span aria-hidden="true">{pending ? "···" : "→"}</span>
+        </button>
+      </form>
+
+      <p className="auth-switch">
+        {isSignUp ? "Have an account?" : "Need an account?"}{" "}
+        <a href={isSignUp ? "/sign-in" : "/sign-up"}>{isSignUp ? "Sign in →" : "Sign up →"}</a>
+      </p>
+    </div>
+  );
+}

package/templates/auth/src/components/auth-shell.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { ResourceLinks } from "./resource-links";
+
+interface AuthShellProps {
+  children: ReactNode;
+}
+
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <main className="auth-shell">
+      <a className="auth-home-link" href="/" aria-label="Back to starter home">
+        <span>00</span>
+        <span>FARMJS / Auth starter</span>
+      </a>
+
+      <section className="auth-form-side">{children}</section>
+
+      <ResourceLinks className="auth-resource-links" />
+    </main>
+  );
+}

package/templates/auth/src/components/resource-links.tsx

@@ -0,0 +1,78 @@
+interface ResourceLinkAction {
+  href: string;
+  label: string;
+}
+
+interface ResourceLinksProps {
+  className: string;
+  primary?: ResourceLinkAction;
+}
+
+function DocsIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6M8 13h8M8 17h6" />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.52-1.34-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.47.11-3.05 0 0 .96-.31 3.16 1.18A10.95 10.95 0 0 1 12 6.1c.98 0 1.95.13 2.87.39 2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.4-2.71 5.38-5.29 5.67.42.36.79 1.07.79 2.16v3.27c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z" />
+    </svg>
+  );
+}
+
+function ResourceSeparator() {
+  return (
+    <span className="resource-separator" aria-hidden="true">
+      /
+    </span>
+  );
+}
+
+export function ResourceLinks({ className, primary }: ResourceLinksProps) {
+  return (
+    <nav className={className} aria-label="Starter resources">
+      {primary ? (
+        <span className="resource-link-item">
+          <a className="resource-link-primary" href={primary.href}>
+            {primary.label}
+          </a>
+        </span>
+      ) : null}
+      <span className="resource-link-item">
+        {primary ? <ResourceSeparator /> : null}
+        <a href="https://farm.js.dev">
+          <DocsIcon />
+          <span>Docs</span>
+        </a>
+      </span>
+      <span className="resource-link-item">
+        <ResourceSeparator />
+        <a href="https://github.com/farming-labs/farm.js">
+          <GitHubIcon />
+          <span>GitHub</span>
+        </a>
+      </span>
+    </nav>
+  );
+}

package/templates/auth/src/components/sign-out-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { signOut as endSession } from "@farm.js/auth/client";
+
+export function SignOutButton() {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function signOut() {
+    setPending(true);
+    setError(null);
+
+    try {
+      const response = await endSession();
+      if (response.error) {
+        setError(response.error.message ?? "Could not sign out.");
+        setPending(false);
+        return;
+      }
+      window.location.assign("/");
+    } catch {
+      setError("Could not reach the authentication service.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="sign-out-control">
+      <button
+        className="button button-secondary"
+        disabled={pending}
+        onClick={signOut}
+        type="button"
+      >
+        {pending ? "Signing out…" : "Sign out"}
+      </button>
+      {error ? (
+        <span className="inline-error" role="alert">
+          {error}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/templates/auth/src/components/site-header.tsx

@@ -0,0 +1,46 @@
+interface HeaderUser {
+  email: string;
+  name: string;
+}
+
+interface SiteHeaderProps {
+  user: HeaderUser | null;
+}
+
+export function SiteHeader({ user }: SiteHeaderProps) {
+  return (
+    <header className="site-header">
+      <a className="brand" href="/" aria-label="FARMJS Auth Starter home">
+        <span className="brand-mark" aria-hidden="true">
+          F
+        </span>
+        <span>
+          <strong>FARMJS</strong>
+          <small>Auth Starter</small>
+        </span>
+      </a>
+
+      <nav className="header-nav" aria-label="Primary navigation">
+        <a href="https://farm.js.dev">Docs</a>
+        {user ? (
+          <a className="header-account" href="/dashboard">
+            <span className="avatar" aria-hidden="true">
+              {(user.name || user.email).slice(0, 1).toUpperCase()}
+            </span>
+            <span className="account-copy">
+              <small>Signed in</small>
+              <strong>{user.name || user.email}</strong>
+            </span>
+          </a>
+        ) : (
+          <>
+            <a href="/sign-in">Sign in</a>
+            <a className="button button-small button-primary" href="/sign-up">
+              Get started
+            </a>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+}

package/templates/auth/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "farm.config.ts"]
+}

package/templates/basic/farm.config.ts

@@ -1,6 +1,9 @@
 import { defineConfig } from "@farm.js/core";
 
 export default defineConfig({
+  theme: {
+    default: "dark",
+  },
   deploy: {
     target: "vercel",
   },

package/templates/basic/gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules/
+
+# Farm and deployment output
+.farm/
+.output/
+.vercel/
+dist/
+
+# Local environment files
+.env
+.env.local
+.env.*.local
+
+# Local databases
+*.sqlite
+*.sqlite-*
+*.db
+*.db-*
+
+# Logs and TypeScript cache
+*.log
+*.tsbuildinfo

package/templates/basic/package.json

@@ -10,12 +10,14 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@farm.js/core": "0.1.0-beta.4",
+    "@farm.js/core": "0.1.0-beta.41",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@farm.js/cli": "0.1.0-beta.4",
+    "@farm.js/cli": "0.1.0-beta.41",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",

package/templates/basic/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+packages:
+  - "."
+
+allowBuilds:
+  "@prisma/client": true
+  esbuild: true
+  sharp: true
+  vue-demi: true

package/templates/basic/public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none" role="img" aria-labelledby="title desc">
+  <title id="title">Farming Labs</title>
+  <desc id="desc">The three-tone Farming Labs mark on a dark square.</desc>
+  <rect width="512" height="512" fill="#0A0A0A"/>
+  <svg x="135.25" y="142" width="241.5" height="228" viewBox="125 68 161 152">
+    <path d="M157 68H133C128.582 68 125 71.5817 125 76V100C125 104.418 128.582 108 133 108H157C161.418 108 165 104.418 165 100V76C165 71.5817 161.418 68 157 68Z" fill="#F5F5F4"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M182.383 68H280.617C282.045 68 283.414 68.8429 284.423 70.3431C285.433 71.8434 286 73.8783 286 76V100C286 102.122 285.433 104.157 284.423 105.657C283.414 107.157 282.045 108 280.617 108H182.383C180.955 108 179.586 107.157 178.577 105.657C177.567 104.157 177 102.122 177 100V76C177 73.8783 177.567 71.8434 178.577 70.3431C179.586 68.8429 180.955 68 182.383 68ZM271.852 81C270.747 81 269.852 81.8954 269.852 83V93C269.852 94.1046 270.747 95 271.852 95H277.272C278.376 95 279.272 94.1046 279.272 93V83C279.272 81.8954 278.376 81 277.272 81H271.852Z" fill="#F5F5F4"/>
+    <path d="M157 124H133C128.582 124 125 127.582 125 132V156C125 160.418 128.582 164 133 164H157C161.418 164 165 160.418 165 156V132C165 127.582 161.418 124 157 124Z" fill="#A3A3A3"/>
+    <path d="M280.334 124H182.666C179.537 124 177 127.582 177 132V156C177 160.418 179.537 164 182.666 164H280.334C283.463 164 286 160.418 286 156V132C286 127.582 283.463 124 280.334 124Z" fill="#A3A3A3"/>
+    <path d="M157 180H133C128.582 180 125 183.582 125 188V212C125 216.418 128.582 220 133 220H157C161.418 220 165 216.418 165 212V188C165 183.582 161.418 180 157 180Z" fill="#595959"/>
+    <path d="M230.189 180H182.811C179.602 180 177 183.582 177 188V212C177 216.418 179.602 220 182.811 220H230.189C233.398 220 236 216.418 236 212V188C236 183.582 233.398 180 230.189 180Z" fill="#595959"/>
+  </svg>
+</svg>