@hypersonic-js/admin 0.2.0

package/dist/types.d.ts

@@ -0,0 +1,159 @@
+export type AdminFieldKind = 'scalar' | 'relation' | 'enum';
+export interface AdminFieldMeta {
+    name: string;
+    /** Raw Prisma scalar type: 'String' | 'Int' | 'Boolean' | 'DateTime' | … */
+    prismaType: string;
+    kind: AdminFieldKind;
+    isRequired: boolean;
+    isId: boolean;
+    isUnique: boolean;
+    hasDefault: boolean;
+    isReadOnly: boolean;
+    /**
+     * True when this scalar field is a FK column backing a Prisma relation
+     * (e.g. `userId` for a `user User @relation(…)` field).
+     * Prisma marks FK scalars isReadOnly in its DMMF, but admins still need to
+     * set them when creating/editing records. The router renders them as a
+     * <select> dropdown populated from the related model.
+     */
+    isForeignKey: boolean;
+    /**
+     * For FK scalar fields, the name of the related Prisma model
+     * (e.g. `'User'` for `userId`). Used by the admin router to fetch
+     * <select> options when rendering the create/edit form.
+     */
+    relatedModelName?: string;
+    /**
+     * For FK scalar fields, the URL slug of the related model as registered in
+     * the admin router (e.g. `'user'` for `userId`, `'userprofile'` for a
+     * `UserProfile` model). Used by ModelForm to construct the correct
+     * `/related-options/:slug` URL for load-more pagination. Always equals the
+     * related model's `urlSlug` — never a client-side derivation.
+     */
+    relatedModelSlug?: string;
+    isList: boolean;
+    relationTo?: string;
+    enumValues?: string[];
+}
+export interface AdminModelMeta {
+    name: string;
+    urlSlug: string;
+    displayName: string;
+    idField: string;
+    idType: 'string' | 'number';
+    displayField: string;
+    fields: AdminFieldMeta[];
+    listFields: AdminFieldMeta[];
+    formFields: AdminFieldMeta[];
+}
+export interface AdminPaginationMeta {
+    page: number;
+    perPage: number;
+    total: number;
+    totalPages: number;
+}
+export interface PaginationParams {
+    page: number;
+    perPage: number;
+    skip: number;
+    take: number;
+}
+/**
+ * Minimal auth interface satisfied by any Better Auth instance.
+ *
+ * The three optional admin methods (`createUser`, `adminUpdateUser`,
+ * `removeUser`) are present when the Better Auth admin plugin is enabled.
+ * When they exist, the admin router routes User model mutations through Better
+ * Auth instead of calling Prisma directly — ensuring password hashing,
+ * session cleanup, and other auth lifecycle hooks are respected.
+ */
+export interface AdminAuthLike {
+    api: {
+        getSession(opts: {
+            headers: unknown;
+        }): Promise<{
+            user: {
+                role: string;
+            };
+        } | null>;
+        /** Creates a user via the Better Auth admin plugin. */
+        createUser?: (opts: {
+            body: {
+                email: string;
+                name: string;
+                password: string;
+                role?: string;
+                data?: Record<string, unknown>;
+            };
+        }) => Promise<{
+            user: unknown;
+        }>;
+        /**
+         * Updates a user via the Better Auth admin plugin.
+         * Requires the calling admin's session headers for permission checks.
+         */
+        adminUpdateUser?: (opts: {
+            body: {
+                userId: string;
+                data: Record<string, unknown>;
+            };
+            headers: unknown;
+        }) => Promise<unknown>;
+        /**
+         * Deletes a user via the Better Auth admin plugin.
+         * Also revokes all active sessions for that user.
+         * Requires the calling admin's session headers for permission checks.
+         */
+        removeUser?: (opts: {
+            body: {
+                userId: string;
+            };
+            headers: unknown;
+        }) => Promise<unknown>;
+    };
+}
+export interface PrismaClientLike {
+    $disconnect(): Promise<void>;
+}
+/**
+ * Minimal structured-logging interface satisfied by any Pino Logger instance.
+ * Keeping this as a local interface decouples the admin package from a direct
+ * pino dependency while still enabling rich structured log output when the
+ * host application passes `app.logger` from @hypersonic-js/core.
+ */
+export interface LoggerLike {
+    error(obj: unknown, msg?: string): void;
+    warn(obj: unknown, msg?: string): void;
+    info(obj: unknown, msg?: string): void;
+}
+export interface AdminOptions {
+    /** Pre-generated admin model metadata — pass the content of prisma/admin-meta.json. */
+    meta: AdminModelMeta[];
+    /** Better Auth instance. When the admin plugin is enabled, user CRUD is routed through it. */
+    auth: AdminAuthLike;
+    /** Route prefix for all admin routes. Defaults to '/admin'. */
+    prefix?: string;
+    /** When true, shows the default hidden Better Auth tables. Defaults to false. */
+    showAuthModels?: boolean;
+    /** Additional model names to hide from the admin nav. */
+    hiddenModels?: string[];
+    /** Optional structured logger — pass `app.logger` from createApp(). */
+    logger?: LoggerLike;
+    /**
+     * Name of the Better Auth user model in your Prisma schema.
+     * When `auth.api.createUser` is present, all create / update / delete
+     * operations on this model are routed through the Better Auth admin API
+     * instead of calling Prisma directly.
+     * Defaults to `'User'`.
+     */
+    betterAuthUserModel?: string;
+}
+export interface ScaffoldOptions {
+    targetDir?: string;
+    force?: boolean;
+}
+export interface ScaffoldResult {
+    written: string[];
+    skipped: string[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,3 @@
+// ── Admin field / model metadata ─────────────────────────────────────────────
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,gFAAgF"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hypersonic-js/admin",
+  "version": "0.2.0",
+  "description": "Auto-generated admin dashboard for Hypersonic.js — full CRUD from your Prisma schema",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hypersonic-js/hypersonic-js"
+  },
+  "author": "Joaquim Dalton-Pereira",
+  "license": "MIT",
+  "homepage": "https://hypersonic-js.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^24.0.0"
+  },
+  "peerDependencies": {
+    "@prisma/client": "7.8.0",
+    "better-auth": "1.6.12"
+  },
+  "peerDependenciesMeta": {
+    "@prisma/client": {
+      "optional": false
+    },
+    "better-auth": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/express": "5.0.6",
+    "@types/node": "25.9.3",
+    "@types/supertest": "7.2.0",
+    "@vitest/coverage-v8": "4.1.8",
+    "express": "5.2.1",
+    "supertest": "7.2.2",
+    "typescript": "6.0.3",
+    "vitest": "4.1.8"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/copy-templates.mjs",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist coverage"
+  }
+}

package/templates/Dashboard.tsx

@@ -0,0 +1,40 @@
+import { Link } from '@inertiajs/react'
+
+interface ModelCard {
+  name: string
+  urlSlug: string
+  recordCount: number
+}
+
+interface Props {
+  models: ModelCard[]
+  prefix: string
+}
+
+export default function AdminDashboard({ models, prefix }: Props) {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-5xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">Admin Dashboard</h1>
+
+        {models.length === 0 && (
+          <p className="text-gray-500">No models are visible. Check your mountAdmin configuration.</p>
+        )}
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {models.map((model) => (
+            <Link
+              key={model.urlSlug}
+              href={`${prefix}/${model.urlSlug}`}
+              className="block bg-white rounded-lg border border-gray-200 p-6 hover:border-blue-500 transition-colors"
+            >
+              <h2 className="text-lg font-semibold text-gray-800">{model.name}</h2>
+              <p className="text-3xl font-bold text-blue-600 mt-2">{model.recordCount}</p>
+              <p className="text-sm text-gray-500 mt-1">records</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/ModelForm.tsx

@@ -0,0 +1,288 @@
+import { useState, useRef } from 'react'
+import { useForm, Link } from '@inertiajs/react'
+
+type FieldKind = 'scalar' | 'relation' | 'enum'
+
+interface FieldMeta {
+  name: string
+  prismaType: string
+  kind: FieldKind
+  isRequired: boolean
+  isForeignKey: boolean
+  relatedModelName?: string
+  relatedModelSlug?: string
+  enumValues?: string[]
+}
+
+interface ModelMeta {
+  name: string
+  urlSlug: string
+  displayName: string
+  idField: string
+  formFields: FieldMeta[]
+}
+
+interface FkOption {
+  id: string
+  label: string
+}
+
+type RelatedOptionsMap = Record<string, { options: FkOption[]; hasMore: boolean }>
+
+interface FieldOptionsState {
+  options: FkOption[]
+  hasMore: boolean
+  page: number
+  loading: boolean
+}
+
+interface Props {
+  model: ModelMeta
+  record: Record<string, unknown> | null
+  models: Array<{ name: string; urlSlug: string }>
+  errors: Record<string, string>
+  prefix: string
+  relatedOptions: RelatedOptionsMap
+}
+
+function toLocalDateTimeString(date: Date): string {
+  const pad = (n: number): string => String(n).padStart(2, '0')
+  return (
+    `${date.getFullYear()}-` +
+    `${pad(date.getMonth() + 1)}-` +
+    `${pad(date.getDate())}T` +
+    `${pad(date.getHours())}:` +
+    `${pad(date.getMinutes())}:` +
+    `${pad(date.getSeconds())}`
+  )
+}
+
+function buildInitialData(
+  formFields: FieldMeta[],
+  record: Record<string, unknown> | null,
+  relatedOptions: RelatedOptionsMap = {},
+): Record<string, string> {
+  return Object.fromEntries(
+    formFields.map((f) => {
+      const value = record?.[f.name]
+      if (value instanceof Date) return [f.name, toLocalDateTimeString(value)]
+      if (value !== null && value !== undefined) return [f.name, String(value)]
+
+      // New record — use type-aware defaults only for REQUIRED fields so that
+      // optional columns are left unset rather than silently written with a
+      // synthetic value the user never chose.
+      if (f.prismaType === 'Boolean' && f.isRequired) return [f.name, 'false']
+      if (f.kind === 'enum' && f.isRequired && f.enumValues !== undefined && f.enumValues.length > 0) {
+        return [f.name, f.enumValues[0]!]
+      }
+
+      // For required FK fields on create forms, default to the first available
+      // option so the controlled <select> value matches what the browser renders
+      // as visually selected. Without this the select appears to have a valid
+      // selection but the underlying form value is '', which coerceData converts
+      // to undefined for required fields, causing a Prisma validation error.
+      if (f.isForeignKey && f.isRequired) {
+        const firstOption = relatedOptions[f.name]?.options[0]
+        if (firstOption !== undefined) {
+          return [f.name, String(firstOption.id)]
+        }
+      }
+
+      return [f.name, '']
+    }),
+  )
+}
+
+export default function AdminModelForm({ model, record, errors, prefix, relatedOptions }: Props) {
+  const isEdit = record !== null
+  const { data, setData, post, patch, processing } = useForm(
+    buildInitialData(model.formFields, record, relatedOptions),
+  )
+
+  const [fkOptions, setFkOptions] = useState<Record<string, FieldOptionsState>>(() =>
+    Object.fromEntries(
+      Object.entries(relatedOptions).map(([key, val]) => [
+        key,
+        { options: val.options, hasMore: val.hasMore, page: 1, loading: false },
+      ]),
+    ),
+  )
+
+  // Ref-based guard prevents duplicate in-flight requests for the same field.
+  // A ref is used (not state) so the guard is updated synchronously — two rapid
+  // clicks both read the ref before any setState is committed, ensuring only
+  // the first click proceeds.
+  const inflight = useRef(new Set<string>())
+
+  async function loadMore(fieldName: string, relatedModelSlug: string): Promise<void> {
+    if (inflight.current.has(fieldName)) return
+
+    const current = fkOptions[fieldName]
+    if (current === undefined) return
+
+    inflight.current.add(fieldName)
+    setFkOptions((prev) => ({
+      ...prev,
+      [fieldName]: { ...prev[fieldName]!, loading: true },
+    }))
+
+    try {
+      const nextPage = current.page + 1
+      const res = await fetch(`${prefix}/related-options/${relatedModelSlug}?page=${nextPage}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const payload = (await res.json()) as { options: FkOption[]; hasMore: boolean }
+      setFkOptions((prev) => ({
+        ...prev,
+        [fieldName]: {
+          options: [...prev[fieldName]!.options, ...payload.options],
+          hasMore: payload.hasMore,
+          page: nextPage,
+          loading: false,
+        },
+      }))
+    } catch {
+      setFkOptions((prev) => ({
+        ...prev,
+        [fieldName]: { ...prev[fieldName]!, loading: false },
+      }))
+    } finally {
+      inflight.current.delete(fieldName)
+    }
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (isEdit) {
+      patch(`${prefix}/${model.urlSlug}/${String(record![model.idField])}`)
+    } else {
+      post(`${prefix}/${model.urlSlug}`)
+    }
+  }
+
+  function renderInput(field: FieldMeta) {
+    const value = data[field.name] ?? ''
+    const error = errors[field.name]
+    const baseClass = 'w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+    const errorClass = error ? ' border-red-500' : ' border-gray-300'
+
+    if (field.isForeignKey) {
+      const state = fkOptions[field.name] ?? { options: [], hasMore: false, page: 1, loading: false }
+      return (
+        <div>
+          <select
+            value={value}
+            onChange={(e) => setData(field.name, e.target.value)}
+            className={baseClass + errorClass}
+          >
+            {!field.isRequired && <option value="">— select —</option>}
+            {state.options.map((opt) => (
+              <option key={String(opt.id)} value={String(opt.id)}>{opt.label}</option>
+            ))}
+          </select>
+          {state.hasMore && (
+            <button
+              type="button"
+              onClick={() => void loadMore(field.name, field.relatedModelSlug!)}
+              disabled={state.loading}
+              className="mt-1 text-xs text-blue-600 hover:underline disabled:opacity-50"
+            >
+              {state.loading ? 'Loading…' : 'Load more'}
+            </button>
+          )}
+        </div>
+      )
+    }
+
+    if (field.kind === 'enum' && field.enumValues) {
+      return (
+        <select
+          value={value}
+          onChange={(e) => setData(field.name, e.target.value)}
+          className={baseClass + errorClass}
+        >
+          {!field.isRequired && <option value="">— select —</option>}
+          {field.enumValues.map((v) => (
+            <option key={v} value={v}>{v}</option>
+          ))}
+        </select>
+      )
+    }
+
+    if (field.prismaType === 'Boolean') {
+      return (
+        <input
+          type="checkbox"
+          checked={value === 'true'}
+          onChange={(e) => setData(field.name, String(e.target.checked))}
+          className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+        />
+      )
+    }
+
+    const inputType =
+      field.prismaType === 'Int' || field.prismaType === 'Float'
+        ? 'number'
+        : field.prismaType === 'DateTime'
+          ? 'datetime-local'
+          : 'text'
+
+    return (
+      <input
+        type={inputType}
+        value={value}
+        onChange={(e) => setData(field.name, e.target.value)}
+        required={field.isRequired}
+        className={baseClass + errorClass}
+      />
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-4 mb-6">
+          <Link
+            href={`${prefix}/${model.urlSlug}`}
+            className="text-blue-600 hover:underline text-sm"
+          >
+            ← {model.displayName}
+          </Link>
+          <h1 className="text-2xl font-bold text-gray-900">
+            {isEdit ? `Edit ${model.name}` : `New ${model.name}`}
+          </h1>
+        </div>
+
+        <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-6 space-y-5">
+          {model.formFields.map((field) => (
+            <div key={field.name}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {field.name}
+                {field.isRequired && <span className="text-red-500 ml-1">*</span>}
+              </label>
+              {renderInput(field)}
+              {errors[field.name] && (
+                <p className="mt-1 text-xs text-red-600">{errors[field.name]}</p>
+              )}
+            </div>
+          ))}
+
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              type="submit"
+              disabled={processing}
+              className="bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {processing ? 'Saving…' : isEdit ? 'Update' : 'Create'}
+            </button>
+            <Link
+              href={`${prefix}/${model.urlSlug}`}
+              className="text-gray-600 hover:underline text-sm"
+            >
+              Cancel
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}