@percepta/create 3.0.0

package/templates/webapp/src/components/Header.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@percepta/design";
+import { LogOut } from "lucide-react";
+import React, { useCallback } from "react";
+import { authClient } from "../lib/auth-client";
+
+export default function Header() {
+  const { data: session } = authClient.useSession();
+  const user = session?.user;
+
+  const handleSignOut = useCallback(() => {
+    void authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          window.location.href = "/auth/signin";
+        },
+      },
+    });
+  }, []);
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-end border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild={true}>
+          <button
+            className="-mx-2 flex items-center gap-3 rounded-lg px-2 py-1 transition-colors hover:bg-muted"
+            aria-label="Open account menu"
+          >
+            <div className="hidden text-right sm:block">
+              <p className="text-sm font-medium text-foreground">
+                {user.name || "User"}
+              </p>
+              <p className="text-xs text-muted-foreground">{user.email}</p>
+            </div>
+            <div className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-primary/10 text-sm font-semibold text-primary">
+              {(user.name || user.email || "U").slice(0, 1).toUpperCase()}
+            </div>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" sideOffset={8}>
+          <DropdownMenuLabel>
+            <div>
+              <p className="text-sm font-medium">{user.name || "User"}</p>
+              <p className="text-xs font-normal text-muted-foreground">
+                {user.email}
+              </p>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={handleSignOut}>
+            <LogOut />
+            Sign Out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  );
+}

package/templates/webapp/src/components/Providers.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Toaster } from "@percepta/design";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import { TRPCProvider, trpcClient } from "../lib/trpc";
+import { AppFaroProvider } from "./FaroProvider";
+
+export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const queryClient = getQueryClient();
+
+  return (
+    <AppFaroProvider>
+      <QueryClientProvider client={queryClient}>
+        <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+          {children}
+          <Toaster />
+        </TRPCProvider>
+      </QueryClientProvider>
+    </AppFaroProvider>
+  );
+};
+
+let browserQueryClient: QueryClient | undefined;
+function getQueryClient(): QueryClient {
+  if (typeof window === "undefined") {
+    // Always make a new server query client.
+    return makeQueryClient();
+  }
+
+  if (browserQueryClient == null) {
+    browserQueryClient = makeQueryClient();
+  }
+  return browserQueryClient;
+}
+
+function makeQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60_000,
+      },
+    },
+  });
+}

package/templates/webapp/src/components/form/FormItem.tsx

@@ -0,0 +1,82 @@
+import { Label } from "@percepta/design";
+import { Slot } from "@radix-ui/react-slot";
+import { compact } from "lodash-es";
+import React, { useId } from "react";
+import { type ControllerFieldState } from "react-hook-form";
+import { cn } from "../../utils/cn";
+
+interface FormItemProps extends React.ComponentProps<"div"> {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  message?: React.ReactNode;
+  fieldState: ControllerFieldState;
+}
+
+export const FormItem: React.FC<FormItemProps> = ({
+  className,
+  label,
+  description,
+  message,
+  fieldState: { error },
+  children,
+  ...props
+}) => {
+  const labelId = useId();
+  const descriptionId = useId();
+  const messageId = useId();
+
+  function maybeRenderMessage() {
+    const body = error?.message ?? message;
+    if (body == null) {
+      return null;
+    }
+
+    return (
+      <p
+        id={messageId}
+        className="text-destructive-foreground text-sm"
+        data-slot="form-message"
+      >
+        {body}
+      </p>
+    );
+  }
+
+  return (
+    <div
+      data-slot="form-item"
+      className={cn("grid gap-2", className)}
+      {...props}
+    >
+      <Label
+        className="data-[error=true]:text-destructive-foreground"
+        htmlFor={labelId}
+        data-slot="form-label"
+        data-error={error != null}
+      >
+        {label}
+      </Label>
+      <Slot
+        id={labelId}
+        data-slot="form-control"
+        aria-describedby={compact([
+          descriptionId,
+          error != null && messageId,
+        ]).join(" ")}
+        aria-invalid={error != null}
+      >
+        {children}
+      </Slot>
+      {description != null && (
+        <p
+          id={descriptionId}
+          className="text-muted-foreground text-sm"
+          data-slot="form-description"
+        >
+          {description}
+        </p>
+      )}
+      {maybeRenderMessage()}
+    </div>
+  );
+};

package/templates/webapp/src/config/clientEnvConfig.ts

@@ -0,0 +1,11 @@
+"use client";
+
+export function getClientEnvConfig() {
+  return {
+    FARO_COLLECTOR_URL: process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL,
+    FARO_APP_NAME: process.env.NEXT_PUBLIC_FARO_APP_NAME ?? "__APP_NAME__",
+    FARO_APP_VERSION: process.env.NEXT_PUBLIC_FARO_APP_VERSION ?? "0.0.0",
+    FARO_APP_ENVIRONMENT:
+      process.env.NEXT_PUBLIC_FARO_APP_ENVIRONMENT ?? process.env.NODE_ENV,
+  };
+}

package/templates/webapp/src/config/getEnvConfig.ts

@@ -0,0 +1,62 @@
+import { createEnvConfig } from "@percepta/utils";
+import { z } from "zod";
+
+/**
+ * Application-specific environment configuration.
+ * Extends the base config from @percepta/utils which includes NODE_ENV and LOG_LEVEL.
+ */
+export const { getEnvConfig, schema: ENV_CONFIG_SCHEMA } = createEnvConfig(
+  z.object({
+    // Application:
+    APP_BASE_URL: z.string().optional(),
+
+    // Database:
+    DATABASE_HOST: z.string().default("localhost"),
+    DATABASE_PORT: z.coerce.number().int().default(5434),
+    DATABASE_USERNAME: z.string().default("postgres"),
+    DATABASE_PASSWORD: z.string().default("postgres"),
+    DATABASE_NAME: z.string().default("__DB_NAME__"),
+    DATABASE_USE_SSL: z
+      .string()
+      .transform((value: string): boolean => value === "true")
+      .default(false),
+
+    // AWS:
+    AWS_REGION: z.string().default("us-east-1"),
+
+    // Authentication (Better Auth):
+    BETTER_AUTH_SECRET: z.string().optional(),
+    BETTER_AUTH_URL: z.string().default("http://localhost:3000"),
+
+    // Inngest:
+    INNGEST_BASE_URL: z.string().optional(),
+    INNGEST_APP_URL: z.string().optional(),
+    INNGEST_SIGNING_KEY: z.string().optional(),
+    INNGEST_EVENT_KEY: z.string().optional(),
+    SKIP_INNGEST_SYNC: z
+      .string()
+      .transform((value: string): boolean => value === "true" || value === "1")
+      .default(false),
+
+    // Langfuse:
+    LANGFUSE_BASE_URL: z.string().optional(),
+    LANGFUSE_PUBLIC_KEY: z.string().optional(),
+    LANGFUSE_SECRET_KEY: z.string().optional(),
+
+    // Security:
+    ENCRYPTION_SECRET_KEY: z.string().optional(),
+    TRIGGER_ENDPOINT_API_KEY: z.string().optional(),
+
+    // LLM/AI providers:
+    OPENAI_API_KEY: z.string().optional(),
+
+    // Readonly database (scripts):
+    READONLY_SECRET_NAME: z.string().optional(),
+
+    // Application specific variables:
+
+    // APP_SPECIFIC_VARIABLE: z.string().optional(),
+  }),
+);
+
+export type EnvConfig = ReturnType<typeof getEnvConfig>;

package/templates/webapp/src/config/isDev.ts

@@ -0,0 +1,7 @@
+/* eslint-disable n/no-process-env */
+
+/**
+ * Build-time development check. `NODE_ENV` is inlined by the bundler,
+ * so this constant is safe to import in both server and client code.
+ */
+export const IS_DEV = process.env.NODE_ENV === "development";

package/templates/webapp/src/drizzle/db.ts

@@ -0,0 +1,28 @@
+import { type NodePgDatabase, drizzle } from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+import { getEnvConfig } from "../config/getEnvConfig";
+import * as schema from "./schema";
+
+export const { client, db } = createDb();
+
+function createDb(): { client: Pool; db: NodePgDatabase<typeof schema> } {
+  const {
+    DATABASE_HOST: host,
+    DATABASE_PORT: port,
+    DATABASE_USERNAME: user,
+    DATABASE_PASSWORD: password,
+    DATABASE_NAME: database,
+    DATABASE_USE_SSL: useSSL,
+  } = getEnvConfig();
+
+  const _client = new Pool({
+    host,
+    port,
+    user,
+    password,
+    database,
+    ssl: useSSL,
+  });
+
+  return { client: _client, db: drizzle(_client, { schema }) };
+}

package/templates/webapp/src/drizzle/migrations/0000_eager_grandmaster.sql

@@ -0,0 +1,57 @@
+CREATE TABLE "account" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" uuid NOT NULL,
+	"account_id" text NOT NULL,
+	"provider_id" text NOT NULL,
+	"access_token" text,
+	"refresh_token" text,
+	"expires_at" integer,
+	"access_token_expires_at" timestamp,
+	"refresh_token_expires_at" timestamp,
+	"scope" text,
+	"id_token" text,
+	"password" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "session" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" uuid NOT NULL,
+	"token" text NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"ip_address" text,
+	"user_agent" text,
+	"impersonated_by" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	CONSTRAINT "session_token_unique" UNIQUE("token")
+);
+--> statement-breakpoint
+CREATE TABLE "users" (
+	"id" uuid PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"email" text NOT NULL,
+	"email_verified" boolean DEFAULT false NOT NULL,
+	"image" text,
+	"role" text DEFAULT 'user' NOT NULL,
+	"banned" boolean DEFAULT false,
+	"ban_reason" text,
+	"ban_expires" timestamp,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "users_email_unique" UNIQUE("email")
+);
+--> statement-breakpoint
+CREATE TABLE "verification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"identifier" text NOT NULL,
+	"value" text NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"created_at" timestamp,
+	"updated_at" timestamp
+);
+--> statement-breakpoint
+ALTER TABLE "account" ADD CONSTRAINT "account_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "session" ADD CONSTRAINT "session_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE UNIQUE INDEX "lower_email_index" ON "users" USING btree (lower("email"));