nextworks 0.0.1 → 0.1.0-alpha.1

package/dist/kits/forms/app/api/wizard/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest } from "next/server";
+import {
+  jsonOk,
+  jsonFromZod,
+  jsonFromPrisma,
+  jsonFail,
+} from "@/lib/server/result";
+import { wizardServerSchema } from "@/lib/validation/wizard";
+import { prisma } from "@/lib/prisma";
+import type { Prisma } from "@prisma/client";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+
+export const runtime = "nodejs";
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const parsed = wizardServerSchema.parse(body);
+    // coerce to typed server input
+    const parsedTyped: import("@/lib/validation/wizard").WizardServerValues =
+      parsed;
+    // require session to attach author
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id)
+      return jsonFail("Not authenticated", { status: 401 });
+    const userId = session.user.id;
+    // map visibility to published flag
+    const published = parsed.visibility === "public";
+    // create Post record (persist full set of fields)
+    const data: Prisma.PostCreateInput = {
+      title: parsed.title,
+      slug: parsed.slug || undefined,
+      content: parsed.content || undefined,
+      excerpt: parsed.excerpt || undefined,
+      tags: parsed.tags || undefined,
+      published,
+      author: { connect: { id: userId } },
+    };
+    const created = await prisma.post.create({ data });
+    // return a cleaned, typed result object (maps published -> visibility)
+    const result: import("@/lib/validation/wizard").WizardServerValues & {
+      id: string;
+      createdAt: Date;
+    } = {
+      title: created.title,
+      slug: created.slug ?? "",
+      content: created.content ?? "",
+      excerpt: created.excerpt ?? "",
+      visibility: created.published ? "public" : "private",
+      tags: created.tags ?? "",
+      id: created.id,
+      createdAt: created.createdAt,
+    };
+    return jsonOk(result, { status: 201, message: "Created" });
+  } catch (e: unknown) {
+    // zod errors
+    // prisma errors
+    try {
+      // detect zod error
+      // @ts-ignore
+      if (e?.issues) return jsonFromZod(e);
+    } catch {}
+    try {
+      return jsonFromPrisma(e);
+    } catch {
+      console.error(e);
+      return jsonOk(null, { message: "Unknown error" });
+    }
+  }
+}

package/dist/kits/forms/app/examples/forms/basic/page.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/components/ui/button";
+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 { FormControl } from "@/components/ui/form/form-control";
+import { FormMessage } from "@/components/ui/form/form-message";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(1, "Name is required"),
+  role: z.string().min(1, "Role is required"),
+  agree: z.boolean(),
+  notifications: z.boolean(),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+export default function BasicFormExample() {
+  const methods = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: "", role: "user", agree: false, notifications: true },
+  });
+  const { handleSubmit, control } = methods;
+
+  const onSubmit = (data: FormValues) => {
+    // For the example we just log. In a real app you'd submit to your API.
+    console.log("Form submit:", data);
+    alert(JSON.stringify(data, null, 2));
+  };
+
+  return (
+    <div className="mx-auto max-w-xl p-6">
+      <h1 className="mb-4 text-2xl font-bold">
+        Forms: Select / Checkbox / Switch example
+      </h1>
+      <Form methods={methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={control}
+            name="name"
+            render={({ field: f }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input {...f} placeholder="Your name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="role"
+            render={({ field: f }) => (
+              <FormItem>
+                <FormLabel>Role</FormLabel>
+                <FormControl>
+                  <Select {...f}>
+                    <option value="">Select role</option>
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="agree"
+            render={({ field: f }) => (
+              <FormItem>
+                <FormLabel>Agree to terms</FormLabel>
+                <FormControl>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={!!f.value}
+                      onChange={(e) => f.onChange(e.target.checked)}
+                    />
+                    <span className="text-sm text-muted-foreground">
+                      I agree
+                    </span>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="notifications"
+            render={({ field: f }) => (
+              <FormItem>
+                <FormLabel>Notifications</FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={!!f.value}
+                    onChange={(e) => f.onChange(e.target.checked)}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/dist/kits/forms/app/examples/forms/server-action/form-client.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+export default function ServerActionForm({
+  action,
+}: {
+  action: (formData: FormData) => Promise<void>;
+}) {
+  return (
+    <form action={action} className="space-y-4">
+      <div>
+        <label className="mb-1 block text-sm font-medium">Title</label>
+        <Input name="title" placeholder="Post title" />
+      </div>
+      <div>
+        <label className="mb-1 block text-sm font-medium">Content</label>
+        <textarea
+          name="content"
+          className="h-28 w-full rounded-md border px-3 py-2 text-sm"
+        />
+      </div>
+      <Button type="submit">Create (server action)</Button>
+    </form>
+  );
+}

package/dist/kits/forms/app/examples/forms/server-action/page.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import ServerActionForm from "./form-client";
+import { prisma } from "@/lib/prisma";
+import { z } from "zod";
+import { redirect } from "next/navigation";
+
+const schema = z.object({
+  title: z.string().min(1, "Title is required"),
+  content: z.string().optional(),
+});
+
+export default async function Page({ searchParams }: any) {
+  async function createPost(formData: FormData) {
+    "use server";
+    const title = formData.get("title")?.toString() ?? "";
+    const content = formData.get("content")?.toString() ?? "";
+
+    const parsed = schema.safeParse({ title, content });
+    if (!parsed.success) {
+      // For simplicity in this example, throw an error which will surface in the server logs / dev overlay.
+      // In a real app, you'd return structured errors or use progressive enhancement with client-side validation.
+      throw new Error("Validation failed: " + parsed.error.message);
+    }
+
+    // NOTE: The Post model requires authorId. For this example we upsert a demo author so the FK is satisfied.
+    // In real apps you should resolve the current user via NextAuth session.
+    const fallbackAuthorId = "__demo_author__";
+
+    await prisma.user.upsert({
+      where: { id: fallbackAuthorId },
+      update: {},
+      create: {
+        id: fallbackAuthorId,
+        email: "demo@example.com",
+        name: "Demo User",
+        // No password for demo account
+      },
+    });
+
+    await prisma.post.create({
+      data: {
+        title: parsed.data.title,
+        content: parsed.data.content ?? null,
+        authorId: fallbackAuthorId,
+      },
+    });
+
+    redirect("/examples/forms/server-action?created=1");
+  }
+
+  const params = await searchParams;
+  const created = (params && (params as any).created) || false;
+
+  return (
+    <div className="mx-auto max-w-xl p-6">
+      <h1 className="mb-4 text-2xl font-bold">Server Action Example</h1>
+      <p className="mb-4 text-sm text-muted-foreground">
+        This demo shows a simple server action that validates with zod and
+        creates a Post via prisma (uses a demo fallback authorId).
+      </p>
+      {/* Pass the server action down to the client form */}
+      {/* @ts-ignore server action passed to client */}
+      <ServerActionForm action={createPost} />
+      {created && (
+        <p className="mt-4 text-sm text-green-600">
+          Post created successfully.
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/kits/forms/app/examples/forms/wizard/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import WizardClient from "@/components/examples/wizard-client";
+
+export default function WizardPage() {
+  return (
+    <div className="mx-auto max-w-3xl p-6">
+      <h1 className="mb-4 text-2xl font-bold">3-step Wizard (Forms)</h1>
+      <p className="mb-4 text-sm text-muted-foreground">
+        A minimal example showing per-step validation, state persistence, and
+        final submit to an API route that returns ApiResult field errors.
+      </p>
+      <WizardClient />
+    </div>
+  );
+}

package/dist/kits/forms/app/examples/forms/wizard/wizard-client.tsx

@@ -0,0 +1,2 @@
+// removed — component moved to components/examples/wizard-client.tsx
+// This file intentionally left blank to avoid duplicate exports.

package/dist/kits/forms/components/examples/wizard-client.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import React from "react";
+import { useForm, type Resolver } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { wizardClientSchema } from "@/lib/validation/wizard";
+import type { WizardClientValues } from "@/lib/validation/wizard";
+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 { FormControl } from "@/components/ui/form/form-control";
+import { FormMessage } from "@/components/ui/form/form-message";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { mapApiErrorsToForm } from "@/lib/forms/map-errors";
+import { toast } from "sonner";
+
+export default function WizardClient() {
+  const [step, setStep] = React.useState(0);
+  const methods = useForm<WizardClientValues>({
+    resolver: zodResolver(
+      wizardClientSchema,
+    ) as unknown as Resolver<WizardClientValues>,
+    defaultValues: {
+      title: "",
+      slug: "",
+      content: "",
+      excerpt: "",
+      visibility: "public",
+      tags: "",
+    },
+    mode: "onTouched",
+  });
+
+  const { control, handleSubmit, trigger, reset } = methods;
+
+  const canNext = async () => {
+    // Validate only current step fields
+    if (step === 0) {
+      const ok = await trigger(["title", "slug"]);
+      return ok;
+    }
+    if (step === 1) {
+      const ok = await trigger(["content", "excerpt"]);
+      return ok;
+    }
+    if (step === 2) {
+      const ok = await trigger(["visibility", "tags"]);
+      return ok;
+    }
+    return true;
+  };
+
+  const next = async () => {
+    const ok = await canNext();
+    if (!ok) return;
+    setStep((s) => Math.min(s + 1, 2));
+  };
+
+  const back = () => setStep((s) => Math.max(s - 1, 0));
+
+  const onSubmit = async (values: WizardClientValues) => {
+    try {
+      const res = await fetch("/api/wizard", {
+        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(methods, payload) : undefined;
+        toast.error(msg || payload?.message || "Submit failed");
+        return;
+      }
+      toast.success("Wizard submit succeeded");
+      reset();
+      setStep(0);
+    } catch (e) {
+      console.error(e);
+      toast.error("Submit failed");
+    }
+  };
+
+  return (
+    <div className="bg-card rounded-md p-6">
+      <Form methods={methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="flex items-center gap-3">
+            <div
+              className={`rounded px-3 py-1 ${step === 0 ? "bg-primary text-white" : "bg-muted-foreground text-muted-foreground text-sm"}`}
+            >
+              Step 1
+            </div>
+            <div
+              className={`rounded px-3 py-1 ${step === 1 ? "bg-primary text-white" : "bg-muted-foreground text-muted-foreground text-sm"}`}
+            >
+              Step 2
+            </div>
+            <div
+              className={`rounded px-3 py-1 ${step === 2 ? "bg-primary text-white" : "bg-muted-foreground text-muted-foreground text-sm"}`}
+            >
+              Step 3
+            </div>
+          </div>
+
+          {step === 0 && (
+            <>
+              <FormField
+                control={control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Slug (optional)</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+
+          {step === 1 && (
+            <>
+              <FormField
+                control={control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Content</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} rows={6} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={control}
+                name="excerpt"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Excerpt (optional)</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} rows={2} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <FormField
+                control={control}
+                name="visibility"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Visibility</FormLabel>
+                    <FormControl>
+                      <select
+                        {...field}
+                        className="form-select w-full rounded border p-2"
+                      >
+                        <option value="public">Public</option>
+                        <option value="private">Private</option>
+                      </select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={control}
+                name="tags"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tags (comma separated)</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+
+          <div className="flex items-center gap-3">
+            {step > 0 ? (
+              <Button type="button" variant="ghost" onClick={back}>
+                Back
+              </Button>
+            ) : null}
+
+            {step < 2 ? (
+              <Button type="button" onClick={next}>
+                Next
+              </Button>
+            ) : (
+              <Button type="button" onClick={handleSubmit(onSubmit)}>
+                Submit
+              </Button>
+            )}
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/dist/kits/forms/components/hooks/useCheckUnique.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+
+type UseCheckUniqueResult = {
+  loading: boolean;
+  unique: boolean | null; // null = unknown / not checked
+  error: string | null;
+};
+
+export default function useCheckUnique(
+  field: string,
+  value: string | undefined | null,
+  delay = 500,
+): UseCheckUniqueResult {
+  const [loading, setLoading] = useState(false);
+  const [unique, setUnique] = useState<boolean | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const timer = useRef<number | undefined>(undefined);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    // Clear previous timer / request
+    if (timer.current) window.clearTimeout(timer.current);
+    if (controllerRef.current) controllerRef.current.abort();
+
+    // Reset state for empty values
+    if (!value) {
+      setLoading(false);
+      setUnique(null);
+      setError(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    timer.current = window.setTimeout(() => {
+      const controller = new AbortController();
+      controllerRef.current = controller;
+
+      (async () => {
+        try {
+          const res = await fetch("/api/users/check-unique", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ field, value }),
+            signal: controller.signal,
+          });
+          const payload = await res.json().catch(() => null);
+          if (!res.ok || !payload) {
+            setError("Failed to validate");
+            setUnique(null);
+          } else if (payload?.success) {
+            // Expecting { success: true, data: { unique: boolean } }
+            setUnique(Boolean(payload.data?.unique));
+          } else {
+            setError(payload?.message || "Validation failed");
+            setUnique(null);
+          }
+        } catch (e: unknown) {
+          if ((e as any)?.name === "AbortError") return;
+          setError("Validation failed");
+          setUnique(null);
+        } finally {
+          setLoading(false);
+          controllerRef.current = null;
+        }
+      })();
+    }, delay);
+
+    return () => {
+      if (timer.current) window.clearTimeout(timer.current);
+      if (controllerRef.current) controllerRef.current.abort();
+    };
+  }, [field, value, delay]);
+
+  return { loading, unique, error };
+}