create-skit 0.1.0

package/templates/dashboard/src/components/dashboard/shell.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
+
+import { SignOutButton } from "@/components/auth/sign-out-button";
+
+type DashboardShellProps = {
+  user: { name: string; email: string };
+  children: React.ReactNode;
+};
+
+const navItems = [
+  {
+    href: "/dashboard",
+    label: "Overview",
+    icon: (
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" width="18" height="18">
+        <rect x="2" y="2" width="7" height="7" rx="1.5" />
+        <rect x="11" y="2" width="7" height="7" rx="1.5" />
+        <rect x="2" y="11" width="7" height="7" rx="1.5" />
+        <rect x="11" y="11" width="7" height="7" rx="1.5" />
+      </svg>
+    ),
+  },
+  {
+    href: "/billing",
+    label: "Billing",
+    icon: (
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" width="18" height="18">
+        <rect x="2" y="5" width="16" height="11" rx="2" />
+        <path d="M2 9h16" />
+        <path d="M6 13h2" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    href: "/email",
+    label: "Email",
+    icon: (
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" width="18" height="18">
+        <rect x="2" y="4" width="16" height="12" rx="2" />
+        <path d="M2 7l8 5 8-5" />
+      </svg>
+    ),
+  },
+  {
+    href: "/settings",
+    label: "Settings",
+    icon: (
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" width="18" height="18">
+        <circle cx="10" cy="10" r="2.5" />
+        <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+];
+
+const SIDEBAR_COLLAPSED_KEY = "dashboard_sidebar_collapsed";
+
+export function DashboardShell({ user, children }: DashboardShellProps) {
+  const pathname = usePathname();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+    if (stored !== null) {
+      setIsCollapsed(stored === "true");
+    }
+  }, []);
+
+  function toggleSidebar() {
+    const next = !isCollapsed;
+    setIsCollapsed(next);
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next));
+  }
+
+  const initials = (user.name || user.email || "U")
+    .split(" ")
+    .map((w) => w[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="dashboard-layout">
+      <aside className={`sidebar${isCollapsed ? " collapsed" : ""}`}>
+        <div className="sidebar-header">
+          <div className="sidebar-logo">
+            <span className="sidebar-logo-icon">⬡</span>
+            <span className="sidebar-logo-text">
+              launch<span>frame</span>
+            </span>
+          </div>
+          <button
+            type="button"
+            className="sidebar-toggle"
+            onClick={toggleSidebar}
+            aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+            title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            <svg
+              viewBox="0 0 20 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              width="16"
+              height="16"
+              style={{
+                transform: isCollapsed ? "rotate(180deg)" : "none",
+                transition: "transform 0.25s ease",
+              }}
+            >
+              <path d="M13 15l-5-5 5-5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="sidebar-nav">
+          <div className="sidebar-section">
+            <span className="sidebar-section-label">Navigation</span>
+          </div>
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`sidebar-link${pathname === item.href ? " active" : ""}`}
+              title={isCollapsed ? item.label : undefined}
+            >
+              <span className="sidebar-link-icon">{item.icon}</span>
+              <span className="sidebar-link-label">{item.label}</span>
+            </Link>
+          ))}
+        </div>
+
+        <div className="sidebar-spacer" />
+
+        <div className="sidebar-footer">
+          <div className="sidebar-user">
+            <div className="sidebar-avatar">{initials}</div>
+            <div className="sidebar-user-info">
+              <div className="sidebar-user-name">{user.name || "User"}</div>
+              <div className="sidebar-user-email">{user.email}</div>
+            </div>
+          </div>
+          <div className="sidebar-signout">
+            <SignOutButton />
+          </div>
+        </div>
+      </aside>
+
+      <main className="dashboard-main">
+        {children}
+      </main>
+    </div>
+  );
+}

package/templates/dashboard/src/db/index.ts

@@ -0,0 +1,16 @@
+import "server-only";
+
+import { drizzle } from "__DRIZZLE_DRIVER_IMPORT__";
+__DATABASE_CLIENT_IMPORT__
+
+import { env } from "@/lib/env";
+
+__DATABASE_GLOBAL_BLOCK__
+
+const client = __DATABASE_CLIENT_EXPRESSION__;
+
+if (env.NODE_ENV !== "production") {
+__DATABASE_DEV_CACHE__
+}
+
+export const db = __DATABASE_DRIZZLE_EXPRESSION__;

package/templates/dashboard/src/db/schema/auth.ts

@@ -0,0 +1,4 @@
+// This file is intentionally minimal.
+// Run `pnpm auth:generate` to replace it with Better Auth's generated Drizzle schema.
+
+export {};

package/templates/dashboard/src/db/schema/index.ts

@@ -0,0 +1,2 @@
+export * from "./auth";
+export * from "./projects";

package/templates/dashboard/src/db/schema/projects.ts

@@ -0,0 +1,17 @@
+import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const projects = pgTable("projects", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  slug: text("slug").notNull().unique(),
+  createdAt: timestamp("created_at", {
+    withTimezone: true
+  })
+    .defaultNow()
+    .notNull(),
+  updatedAt: timestamp("updated_at", {
+    withTimezone: true
+  })
+    .defaultNow()
+    .notNull()
+});

package/templates/dashboard/src/db/seeds/index.ts

@@ -0,0 +1,28 @@
+import { db } from "@/db";
+import { projects } from "@/db/schema";
+
+const shouldSeedDemoData = ["yes"].includes("__SEED_DEMO_DATA__");
+
+async function main() {
+  if (!shouldSeedDemoData) {
+    console.log("Demo seed data disabled.");
+    return;
+  }
+
+  await db
+    .insert(projects)
+    .values({
+      id: "project-demo",
+      name: "Demo Project",
+      slug: "demo-project"
+    })
+    .onConflictDoNothing();
+
+  console.log("Database seed complete.");
+}
+
+main().catch((error) => {
+  console.error("Database seed failed.");
+  console.error(error);
+  process.exit(1);
+});

package/templates/dashboard/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+"use client";
+
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient();

package/templates/dashboard/src/lib/auth-session.ts

@@ -0,0 +1,11 @@
+import "server-only";
+
+import { headers } from "next/headers";
+
+import { auth } from "./auth";
+
+export async function getSession() {
+  return auth.api.getSession({
+    headers: await headers()
+  });
+}

package/templates/dashboard/src/lib/auth.ts

@@ -0,0 +1,41 @@
+import "server-only";
+
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+
+import { db } from "../db";
+import { env } from "./env";
+import * as schema from "../db/schema";
+
+export const auth = betterAuth({
+  appName: "__PROJECT_NAME__",
+  baseURL: env.BETTER_AUTH_URL,
+  secret: env.BETTER_AUTH_SECRET,
+  trustedOrigins: [env.NEXT_PUBLIC_APP_URL],
+  database: drizzleAdapter(db, {
+    provider: "pg",
+    schema
+  }),
+  emailAndPassword: {
+    enabled: true,
+    autoSignIn: true
+  },
+  socialProviders: {
+    ...(env.GITHUB_CLIENT_ID && env.GITHUB_CLIENT_SECRET
+      ? {
+          github: {
+            clientId: env.GITHUB_CLIENT_ID,
+            clientSecret: env.GITHUB_CLIENT_SECRET
+          }
+        }
+      : {}),
+    ...(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET
+      ? {
+          google: {
+            clientId: env.GOOGLE_CLIENT_ID,
+            clientSecret: env.GOOGLE_CLIENT_SECRET
+          }
+        }
+      : {})
+  }
+});

package/templates/dashboard/src/lib/billing/index.ts

@@ -0,0 +1,37 @@
+import "server-only";
+
+import { env } from "@/lib/env";
+
+__BILLING_PROVIDER_IMPORTS__
+
+import type { BillingProvider, BillingProviderName } from "./types";
+
+export function getBillingProviderName(input?: string): BillingProviderName {
+  if (input === "stripe" || input === "polar") {
+    return input;
+  }
+
+  if (env.BILLING_PROVIDER === "stripe" || env.BILLING_PROVIDER === "polar") {
+    return env.BILLING_PROVIDER;
+  }
+
+  if (env.BILLING_PROVIDER === "both") {
+    return "stripe";
+  }
+
+  throw new Error("Billing is disabled for this project.");
+}
+
+export function getBillingProvider(input?: string): BillingProvider {
+  const provider = getBillingProviderName(input);
+  const billingProviderFactories: Partial<Record<BillingProviderName, () => BillingProvider>> = {
+__BILLING_PROVIDER_FACTORIES__
+  };
+  const factory = billingProviderFactories[provider];
+
+  if (!factory) {
+    throw new Error(`Billing provider is not installed: ${provider}.`);
+  }
+
+  return factory();
+}

package/templates/dashboard/src/lib/billing/providers/polar.ts

@@ -0,0 +1,80 @@
+import "server-only";
+
+import { env } from "@/lib/env";
+
+import type {
+  BillingProvider,
+  CheckoutSessionInput,
+  PortalSessionInput,
+  WebhookInput
+} from "../types";
+
+function getPolarApiBaseUrl() {
+  return env.POLAR_SERVER === "production"
+    ? "https://api.polar.sh/v1"
+    : "https://sandbox-api.polar.sh/v1";
+}
+
+async function polarFetch<T>(pathname: string, body: Record<string, unknown>) {
+  if (!env.POLAR_ACCESS_TOKEN) {
+    throw new Error("POLAR_ACCESS_TOKEN is required for Polar billing.");
+  }
+
+  const response = await fetch(`${getPolarApiBaseUrl()}${pathname}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${env.POLAR_ACCESS_TOKEN}`,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(`Polar request failed: ${message}`);
+  }
+
+  return (await response.json()) as T;
+}
+
+export class PolarBillingProvider implements BillingProvider {
+  async createCheckoutSession(input: CheckoutSessionInput) {
+    if (!env.POLAR_PRODUCT_ID) {
+      throw new Error("POLAR_PRODUCT_ID is required for Polar checkout.");
+    }
+
+    const checkout = await polarFetch<{ url?: string }>("/checkouts", {
+      products: [env.POLAR_PRODUCT_ID],
+      external_customer_id: input.userId,
+      customer_email: input.customerEmail,
+      success_url: input.successUrl,
+      metadata: {
+        userId: input.userId
+      }
+    });
+
+    if (!checkout.url) {
+      throw new Error("Polar did not return a checkout URL.");
+    }
+
+    return { url: checkout.url };
+  }
+
+  async createCustomerPortalSession(input: PortalSessionInput) {
+    const session = await polarFetch<{ customer_portal_url?: string }>("/customer-sessions/", {
+      external_customer_id: input.userId
+    });
+
+    if (!session.customer_portal_url) {
+      throw new Error("Polar did not return a customer portal URL.");
+    }
+
+    return { url: session.customer_portal_url };
+  }
+
+  async handleWebhook(_input: WebhookInput) {
+    throw new Error(
+      "Polar webhook verification is intentionally left for follow-up implementation after confirming your webhook signing strategy."
+    );
+  }
+}

package/templates/dashboard/src/lib/billing/providers/stripe.ts

@@ -0,0 +1,77 @@
+import "server-only";
+
+import Stripe from "stripe";
+
+import { env } from "@/lib/env";
+
+import type {
+  BillingProvider,
+  CheckoutSessionInput,
+  PortalSessionInput,
+  WebhookInput
+} from "../types";
+
+let stripeClient: Stripe | null = null;
+
+function getStripe() {
+  if (!env.STRIPE_SECRET_KEY) {
+    throw new Error("STRIPE_SECRET_KEY is required for Stripe billing.");
+  }
+
+  stripeClient ??= new Stripe(env.STRIPE_SECRET_KEY);
+  return stripeClient;
+}
+
+export class StripeBillingProvider implements BillingProvider {
+  async createCheckoutSession(input: CheckoutSessionInput) {
+    if (!env.STRIPE_PRICE_ID) {
+      throw new Error("STRIPE_PRICE_ID is required for Stripe checkout.");
+    }
+
+    const stripe = getStripe();
+    const session = await stripe.checkout.sessions.create({
+      mode: "subscription",
+      line_items: [
+        {
+          price: env.STRIPE_PRICE_ID,
+          quantity: 1
+        }
+      ],
+      customer_email: input.customerEmail,
+      success_url: input.successUrl,
+      cancel_url: input.cancelUrl,
+      allow_promotion_codes: true,
+      metadata: {
+        userId: input.userId
+      }
+    });
+
+    if (!session.url) {
+      throw new Error("Stripe did not return a checkout URL.");
+    }
+
+    return { url: session.url };
+  }
+
+  async createCustomerPortalSession(
+    _input: PortalSessionInput
+  ): Promise<{ url: string }> {
+    throw new Error(
+      "Stripe portal requires a persisted Stripe customer ID. Add customer mapping before enabling portal access."
+    );
+  }
+
+  async handleWebhook(input: WebhookInput) {
+    if (!env.STRIPE_WEBHOOK_SECRET) {
+      throw new Error("STRIPE_WEBHOOK_SECRET is required for Stripe webhooks.");
+    }
+
+    const signature = input.headers.get("stripe-signature");
+    if (!signature) {
+      throw new Error("Missing Stripe signature header.");
+    }
+
+    const stripe = getStripe();
+    stripe.webhooks.constructEvent(input.rawBody, signature, env.STRIPE_WEBHOOK_SECRET);
+  }
+}

package/templates/dashboard/src/lib/billing/types.ts

@@ -0,0 +1,25 @@
+export type BillingProviderName = "stripe" | "polar";
+
+export type CheckoutSessionInput = {
+  customerEmail: string;
+  successUrl: string;
+  cancelUrl: string;
+  userId: string;
+};
+
+export type PortalSessionInput = {
+  customerEmail: string;
+  returnUrl: string;
+  userId: string;
+};
+
+export type WebhookInput = {
+  headers: Headers;
+  rawBody: string;
+};
+
+export interface BillingProvider {
+  createCheckoutSession(input: CheckoutSessionInput): Promise<{ url: string }>;
+  createCustomerPortalSession(input: PortalSessionInput): Promise<{ url: string }>;
+  handleWebhook(input: WebhookInput): Promise<void>;
+}

package/templates/dashboard/src/lib/email/index.ts

@@ -0,0 +1,19 @@
+import "server-only";
+
+__EMAIL_PROVIDER_IMPORTS__
+
+__EMAIL_ENV_IMPORT__
+
+import type { EmailTemplateResult } from "./templates";
+
+__EMAIL_PROVIDER_SETUP__
+
+__EMAIL_FROM_ADDRESS_HELPER__
+
+export async function sendEmail(__EMAIL_SEND_SIGNATURE__: {
+  to: string | string[];
+  template: EmailTemplateResult;
+}) {
+  void __EMAIL_SEND_SIGNATURE__;
+__EMAIL_SEND_IMPLEMENTATION__
+}

package/templates/dashboard/src/lib/email/templates.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+
+import { createBillingUpdatePlaceholderTemplate } from "@/lib/email/templates";
+
+describe("createBillingUpdatePlaceholderTemplate", () => {
+  it("mentions the billing provider", () => {
+    const template = createBillingUpdatePlaceholderTemplate({
+      appName: "Skit",
+      provider: "stripe"
+    });
+
+    expect(template.subject).toContain("billing");
+    expect(template.text).toContain("stripe");
+  });
+});

package/templates/dashboard/src/lib/email/templates.ts

@@ -0,0 +1,40 @@
+export type EmailTemplateResult = {
+  subject: string;
+  text: string;
+  html: string;
+};
+
+export function createWelcomeEmailTemplate(input: {
+  appName: string;
+  recipientName?: string | null;
+}): EmailTemplateResult {
+  const greeting = input.recipientName ? `Hi ${input.recipientName},` : "Hi there,";
+
+  return {
+    subject: `Welcome to ${input.appName}`,
+    text: `${greeting}\n\nYour starter app is ready. Auth, billing, and the core project structure are already in place.\n\nNext step: sign in and continue building.\n`,
+    html: `<p>${greeting}</p><p>Your starter app is ready. Auth, billing, and the core project structure are already in place.</p><p>Next step: sign in and continue building.</p>`
+  };
+}
+
+export function createPasswordResetPlaceholderTemplate(input: {
+  appName: string;
+  resetUrl: string;
+}): EmailTemplateResult {
+  return {
+    subject: `Reset your ${input.appName} password`,
+    text: `Use this link to reset your password: ${input.resetUrl}`,
+    html: `<p>Use this link to reset your password:</p><p><a href="${input.resetUrl}">${input.resetUrl}</a></p>`
+  };
+}
+
+export function createBillingUpdatePlaceholderTemplate(input: {
+  appName: string;
+  provider: string;
+}): EmailTemplateResult {
+  return {
+    subject: `${input.appName} billing update`,
+    text: `A billing event was received from ${input.provider}. Replace this placeholder with your real billing notification workflow.`,
+    html: `<p>A billing event was received from <strong>${input.provider}</strong>.</p><p>Replace this placeholder with your real billing notification workflow.</p>`
+  };
+}

package/templates/dashboard/src/lib/env.ts

@@ -0,0 +1,88 @@
+import "server-only";
+
+import { z } from "zod";
+
+const envSchema = z.object({
+  NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
+  NEXT_PUBLIC_APP_URL: z.string().url(),
+  BETTER_AUTH_URL: z.string().url(),
+  DATABASE_URL: z.string().min(1),
+  BETTER_AUTH_SECRET: z.string().min(1),
+  GITHUB_CLIENT_ID: z.string().min(1).optional(),
+  GITHUB_CLIENT_SECRET: z.string().min(1).optional(),
+  GOOGLE_CLIENT_ID: z.string().min(1).optional(),
+  GOOGLE_CLIENT_SECRET: z.string().min(1).optional(),
+  BILLING_PROVIDER: z.enum(["stripe", "polar", "both", "none"]).default("stripe"),
+  EMAIL_PROVIDER: z.enum(["resend", "none"]).default("resend"),
+  RESEND_API_KEY: z.string().min(1).optional(),
+  EMAIL_FROM: z.string().min(1).optional(),
+  STRIPE_PRICE_ID: z.string().min(1).optional(),
+  STRIPE_SECRET_KEY: z.string().min(1).optional(),
+  STRIPE_WEBHOOK_SECRET: z.string().min(1).optional(),
+  POLAR_ACCESS_TOKEN: z.string().min(1).optional(),
+  POLAR_ORGANIZATION_ID: z.string().min(1).optional(),
+  POLAR_PRODUCT_ID: z.string().min(1).optional(),
+  POLAR_SERVER: z.enum(["production", "sandbox"]).default("sandbox"),
+  POLAR_WEBHOOK_SECRET: z.string().min(1).optional()
+});
+
+type Env = z.infer<typeof envSchema>;
+
+let cachedEnv: Env | null = null;
+const isBuildRuntime =
+  process.env.npm_lifecycle_event === "build" ||
+  process.env.NEXT_PHASE === "phase-production-build";
+
+function readRequiredValue(name: string, fallback: string) {
+  const value = process.env[name];
+
+  if (value) {
+    return value;
+  }
+
+  if (isBuildRuntime) {
+    return fallback;
+  }
+
+  return value;
+}
+
+function parseEnv(): Env {
+  return envSchema.parse({
+    NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_APP_URL: readRequiredValue("NEXT_PUBLIC_APP_URL", "http://localhost:3000"),
+    BETTER_AUTH_URL: readRequiredValue("BETTER_AUTH_URL", "http://localhost:3000"),
+    DATABASE_URL: readRequiredValue(
+      "DATABASE_URL",
+      "postgresql://postgres:postgres@localhost:5432/skit"
+    ),
+    BETTER_AUTH_SECRET: readRequiredValue("BETTER_AUTH_SECRET", "build-placeholder-secret"),
+    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
+    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
+    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
+    BILLING_PROVIDER: process.env.BILLING_PROVIDER,
+    EMAIL_PROVIDER: process.env.EMAIL_PROVIDER,
+    RESEND_API_KEY: process.env.RESEND_API_KEY,
+    EMAIL_FROM: process.env.EMAIL_FROM,
+    STRIPE_PRICE_ID: process.env.STRIPE_PRICE_ID,
+    STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
+    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+    POLAR_ACCESS_TOKEN: process.env.POLAR_ACCESS_TOKEN,
+    POLAR_ORGANIZATION_ID: process.env.POLAR_ORGANIZATION_ID,
+    POLAR_PRODUCT_ID: process.env.POLAR_PRODUCT_ID,
+    POLAR_SERVER: process.env.POLAR_SERVER,
+    POLAR_WEBHOOK_SECRET: process.env.POLAR_WEBHOOK_SECRET
+  });
+}
+
+export function getEnv(): Env {
+  cachedEnv ??= parseEnv();
+  return cachedEnv;
+}
+
+export const env = new Proxy({} as Env, {
+  get(_target, property) {
+    return getEnv()[property as keyof Env];
+  }
+});