nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/data/components/admin/users-manager.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import React, { useEffect, useMemo, useState, type JSX } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Form } from "@/components/ui/form/form";
+import { FormField } from "@/components/ui/form/form-field";
+import { FormItem } from "@/components/ui/form/form-item";
+import { FormLabel } from "@/components/ui/form/form-label";
+import { FormMessage } from "@/components/ui/form/form-message";
+import { FormControl } from "@/components/ui/form/form-control";
+import { userSchema, type UserFormValues } from "@/lib/validation/forms";
+import { mapApiErrorsToForm } from "@/lib/forms/map-errors";
+
+export interface UsersManagerSlots {
+  container?: { className?: string };
+  formCard?: { className?: string };
+  listCard?: { className?: string };
+  leftHeading?: { className?: string };
+  rightHeading?: { className?: string };
+  form?: { className?: string };
+  submitRow?: { className?: string };
+  actionsRow?: { className?: string };
+  table?: { className?: string };
+}
+
+export interface UsersManagerProps extends UsersManagerSlots {
+  className?: string;
+}
+
+type User = {
+  id: string;
+  email: string;
+  name?: string | null;
+  createdAt?: string;
+};
+
+export function UsersManager({
+  className,
+  container = {
+    className:
+      "mx-auto grid w-full max-w-5xl gap-6 p-0 sm:gap-6 sm:p-6 md:grid-cols-5 md:gap-1 md:p-1 lg:gap-6 lg:p-6",
+  },
+  formCard = { className: "p-2 sm:p-6 md:col-span-2" },
+  listCard = { className: "p-2 sm:p-6 md:col-span-3" },
+  leftHeading = { className: "mb-4 text-lg font-semibold" },
+  rightHeading = { className: "mb-3 font-medium" },
+  form = { className: "space-y-4" },
+  submitRow = { className: "flex items-center gap-3" },
+  actionsRow = { className: "flex flex-col gap-2 lg:flex-row" },
+  table = { className: "" },
+}: UsersManagerProps): JSX.Element {
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [listLoading, setListLoading] = useState(true);
+
+  const defaultValues = useMemo<UserFormValues>(
+    () => ({ email: "", name: "" }),
+    [],
+  );
+
+  const formMethods = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+    defaultValues,
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    setError: setFieldError,
+    formState: { isSubmitting },
+  } = formMethods;
+
+  const [page, setPage] = useState<number>(1);
+  const [perPage, setPerPage] = useState<number>(8);
+  const [total, setTotal] = useState<number>(0);
+
+  const fetchUsers = async (opts?: { page?: number; perPage?: number }) => {
+    setListLoading(true);
+    try {
+      const p = opts?.page ?? page;
+      const pp = opts?.perPage ?? perPage;
+      const params = new URLSearchParams();
+      params.set("page", String(p));
+      params.set("perPage", String(pp));
+
+      const res = await fetch(`/api/users?${params.toString()}`, {
+        cache: "no-store",
+      });
+      const payload = await res.json().catch(() => null);
+
+      let data: unknown = payload ?? [];
+      if (payload && typeof payload === "object" && "success" in payload) {
+        data = (payload as any).data;
+      }
+
+      const items = Array.isArray(data)
+        ? data
+        : data && typeof data === "object" && "items" in (data as any)
+          ? (data as any).items
+          : [];
+
+      setUsers(items as User[]);
+
+      if (data && typeof data === "object") {
+        const d = data as any;
+        if (typeof d.total === "number") setTotal(d.total);
+        if (typeof d.page === "number") setPage(d.page);
+        if (typeof d.perPage === "number") setPerPage(d.perPage);
+      } else if (Array.isArray(data)) {
+        setTotal(items.length);
+      } else {
+        setTotal(0);
+      }
+
+      if (opts?.page) setPage(opts.page);
+      if (opts?.perPage) setPerPage(opts.perPage);
+    } finally {
+      setListLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, perPage]);
+
+  const createUser = async (values: UserFormValues) => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/users", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values),
+      });
+      const payload = await res.json().catch(() => null);
+      if (!res.ok || !payload?.success) {
+        const msg = payload
+          ? mapApiErrorsToForm(formMethods, payload)
+          : undefined;
+        toast.error(msg || payload?.message || "Create failed");
+        return;
+      }
+      reset(defaultValues);
+      setSelectedId(null);
+      await fetchUsers();
+      toast.success("User created");
+    } catch (_e) {
+      toast.error("Create failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateUser = async (values: UserFormValues) => {
+    if (!selectedId) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/users/${selectedId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: values.email, name: values.name }),
+      });
+      const payload = await res.json().catch(() => null);
+      if (!res.ok || !payload?.success) {
+        const msg = payload
+          ? mapApiErrorsToForm(formMethods, payload)
+          : undefined;
+        toast.error(msg || payload?.message || "Update failed");
+        return;
+      }
+      reset(defaultValues);
+      setSelectedId(null);
+      await fetchUsers();
+      toast.success("User updated");
+    } catch (_e) {
+      toast.error("Update failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onEdit = (u: User) => {
+    setSelectedId(u.id);
+    setValue("email", u.email);
+    setValue("name", u.name ?? "");
+  };
+
+  const confirmDelete = (id: string) => setPendingDeleteId(id);
+
+  const doDelete = async () => {
+    if (!pendingDeleteId) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/users/${pendingDeleteId}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error("Delete failed");
+      toast.success("User deleted");
+      await fetchUsers();
+    } catch (_e) {
+      toast.error("Delete failed");
+    } finally {
+      setLoading(false);
+      setPendingDeleteId(null);
+    }
+  };
+
+  const onCancel = () => {
+    reset(defaultValues);
+    setSelectedId(null);
+  };
+
+  return (
+    <main className={cn(container.className, className)}>
+      <Card className={cn(formCard.className)}>
+        <h2 className={cn(leftHeading.className)}>User Manager</h2>
+
+        <Form<UserFormValues> methods={formMethods}>
+          <form
+            onSubmit={handleSubmit(selectedId ? updateUser : createUser)}
+            className={cn(form.className)}
+          >
+            <FormField
+              control={control}
+              name="email"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="user@example.com"
+                      autoComplete="off"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      id="name"
+                      placeholder="Optional name"
+                      autoComplete="off"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className={cn(submitRow.className)}>
+              {!selectedId ? (
+                <Button type="submit" disabled={isSubmitting || loading}>
+                  Create User
+                </Button>
+              ) : (
+                <>
+                  <Button type="submit" disabled={isSubmitting || loading}>
+                    Update User
+                  </Button>
+                  <Button type="button" variant="ghost" onClick={onCancel}>
+                    Cancel
+                  </Button>
+                </>
+              )}
+            </div>
+          </form>
+        </Form>
+      </Card>
+
+      <Card className={cn(listCard.className)}>
+        <h3 className={cn(rightHeading.className)}>Users</h3>
+        <Table className={cn(table.className)}>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Email</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead className="w-[200px]">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {listLoading ? (
+              <>
+                {[0, 1, 2].map((i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <Skeleton className="h-4 w-48" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-32" />
+                    </TableCell>
+                    <TableCell>
+                      {/* actions cell empty during loading */}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </>
+            ) : (
+              <>
+                {users.map((u) => (
+                  <TableRow key={u.id}>
+                    <TableCell className="font-medium">{u.email}</TableCell>
+                    <TableCell>{u.name || ""}</TableCell>
+                    <TableCell>
+                      <div className={cn(actionsRow.className)}>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => onEdit(u)}
+                        >
+                          Edit
+                        </Button>
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <Button
+                              size="sm"
+                              variant="destructive"
+                              onClick={() => confirmDelete(u.id)}
+                            >
+                              Delete
+                            </Button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Delete user?</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                This action cannot be undone. The user will be
+                                removed permanently.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel
+                                onClick={() => setPendingDeleteId(null)}
+                              >
+                                Cancel
+                              </AlertDialogCancel>
+                              <AlertDialogAction onClick={doDelete}>
+                                Delete
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {users.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={3} className="text-muted-foreground">
+                      No users yet.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </>
+            )}
+          </TableBody>
+        </Table>
+
+        <div className="mt-3 flex items-center justify-between">
+          <div>
+            <Button
+              size="sm"
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page <= 1 || listLoading}
+            >
+              Prev
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => setPage((p) => p + 1)}
+              disabled={
+                listLoading ||
+                (total > 0 ? page * perPage >= total : users.length === 0)
+              }
+            >
+              Next
+            </Button>
+          </div>
+          <div className="text-muted-foreground text-sm">
+            Showing {Math.min((page - 1) * perPage + 1, total || 0)} -{" "}
+            {Math.min(page * perPage, total || 0)} of {total}
+          </div>
+        </div>
+      </Card>
+    </main>
+  );
+}
+
+export default UsersManager;

package/dist/kits/data/lib/prisma.ts

@@ -0,0 +1,15 @@
+import "server-only";
+
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: ["error", "warn"],
+  });
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

package/dist/kits/data/lib/server/result.ts

@@ -0,0 +1,90 @@
+import { NextResponse } from "next/server";
+import type { ZodError } from "zod";
+import type { Prisma } from "@prisma/client";
+import { zodErrorToFieldErrors, type FieldErrors } from "@/lib/api/errors";
+
+export type ApiResult<T = unknown> = {
+  success: boolean;
+  data?: T;
+  message?: string;
+  errors?: FieldErrors;
+  code?: string;
+};
+
+export function ok<T>(data?: T, message?: string): ApiResult<T> {
+  return { success: true, data, message };
+}
+
+export function fail(
+  message: string,
+  errors?: FieldErrors,
+  code?: string,
+): ApiResult<never> {
+  return { success: false, message, errors, code };
+}
+
+export function jsonOk<T>(
+  data?: T,
+  options?: { status?: number; message?: string },
+) {
+  const { status = 200, message } = options || {};
+  return NextResponse.json(ok(data, message), { status });
+}
+
+export function jsonFail(
+  message: string,
+  options?: { status?: number; errors?: FieldErrors; code?: string },
+) {
+  const { status = 400, errors, code } = options || {};
+  return NextResponse.json(fail(message, errors, code), { status });
+}
+
+export function fromZod(error: ZodError, message = "Invalid input") {
+  return fail(message, zodErrorToFieldErrors(error), "ZOD_VALIDATION_ERROR");
+}
+
+export function jsonFromZod(
+  error: ZodError,
+  options?: { message?: string; status?: number },
+) {
+  return jsonFail(options?.message ?? "Invalid input", {
+    status: options?.status ?? 400,
+    errors: zodErrorToFieldErrors(error),
+    code: "ZOD_VALIDATION_ERROR",
+  });
+}
+
+type PrismaKnownRequestErrorLike = { code: string; meta?: unknown };
+
+function isPrismaKnownRequestError(
+  e: unknown,
+): e is PrismaKnownRequestErrorLike {
+  return !!e && typeof e === "object" && "code" in e;
+}
+
+function extractUniqueField(
+  err: PrismaKnownRequestErrorLike,
+): string | undefined {
+  const target = (err.meta as any)?.target;
+  if (Array.isArray(target) && target.length) return String(target[0]);
+  if (typeof target === "string") return String(target.split("_")[0]);
+  return undefined;
+}
+
+export function jsonFromPrisma(
+  error: unknown,
+  options?: { defaultMessage?: string },
+) {
+  if (isPrismaKnownRequestError(error) && error.code === "P2002") {
+    const field = extractUniqueField(error) ?? "form";
+    return jsonFail("Conflict: duplicate value", {
+      status: 409,
+      errors: { [field]: "Already in use" },
+      code: "P2002",
+    });
+  }
+  return jsonFail(options?.defaultMessage ?? "Database error", {
+    status: 500,
+    code: "PRISMA_ERROR",
+  });
+}

package/dist/kits/data/package-deps.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@nextworks/blocks-core": "*",
+    "@prisma/client": "^6.16.1",
+    "zod": "^3.23.8",
+    "date-fns": "^4.1.0"
+  },
+  "devDependencies": {
+    "prisma": "^6.16.1"
+  }
+}

package/dist/kits/data/scripts/seed-demo.mjs

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
+
+async function main() {
+  const adminEmail = process.env.SEED_ADMIN_EMAIL || "admin@example.com";
+  const adminPassword = process.env.SEED_ADMIN_PASSWORD || "password123";
+
+  // Upsert admin user
+  const user = await prisma.user.upsert({
+    where: { email: adminEmail },
+    update: {},
+    create: {
+      email: adminEmail,
+      name: "Admin",
+      role: "admin",
+    },
+  });
+
+  // Create a sample post (upsert by slug, since slug is unique)
+  await prisma.post.upsert({
+    where: { slug: "hello-from-nextworks-demo" },
+    update: {},
+    create: {
+      title: "Hello from Nextworks Demo",
+      slug: "hello-from-nextworks-demo",
+      content: "This is a demo post created by the seed script.",
+      author: { connect: { email: adminEmail } },
+      published: true,
+    },
+  });
+
+  console.log("Seed complete");
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(() => process.exit());

package/dist/kits/forms/README.md

@@ -0,0 +1,49 @@
+Forms kit (cli/kits/forms)
+
+This folder contains the files that the `nextworks` CLI copies into a target Next.js project when you run:
+
+```bash
+npx nextworks add forms
+```
+
+What the kit includes
+
+- Form primitives built on React Hook Form + Zod: components/ui/form/\*
+- Select / Checkbox / Switch primitives wired for form usage
+- Shared validation schemas: lib/validation/forms.ts and lib/validation/wizard.ts
+- Form error mapping helper: lib/forms/map-errors.ts
+- Example pages:
+  - Basic form: app/examples/forms/basic/page.tsx
+  - Server action form: app/examples/forms/server-action/page.tsx and form-client.tsx
+  - Wizard example: app/examples/forms/wizard/page.tsx and wizard-client.tsx
+- Wizard API route: app/api/wizard/route.ts
+
+Notes
+
+- The forms primitives are UI-only and do not require Prisma or NextAuth.
+- The wizard example assumes a basic app/api/wizard/route.ts endpoint; adjust it as needed for your project.
+- Keep this kit folder in sync with cli_manifests/forms_manifest.json.
+
+Post-install steps (recommended)
+
+1. Install dependencies (the CLI will merge `package-deps.json` into your `package.json`):
+
+   ```bash
+   npm install
+   ```
+
+2. Ensure you have React Hook Form and Zod installed (if not already present). The CLI will attempt to add these via `package-deps.json`.
+
+3. Start your dev server and explore the examples:
+
+   ```bash
+   npm run dev
+   ```
+
+   - /examples/forms/basic
+   - /examples/forms/server-action
+   - /examples/forms/wizard
+
+CLI behavior (for maintainers)
+
+- In the Nextworks repo, the CLI copies the files listed in `cli/cli_manifests/forms_manifest.json`. Keep that manifest and this kit folder in sync when editing the repo.