Ant Design

npm install @vibeflui/antd antd

schemas/
  users/
    antd-user-form.schema.ts
lib/
  vibeflui/
    registry.tsx
app/
  users/
    new/
      page.tsx

export const antdUserFormSchema = {
  resource: "users",
  identity: { key: "id", param: "id" },
  table: { enabled: false },
  form: {
    mode: "page",
    fields: [
      { name: "name", label: "Name", type: "text", adapter: "antd", required: true },
      { name: "email", label: "Email", type: "email", adapter: "antd", required: true },
      { name: "bio", label: "Bio", type: "textarea", adapter: "antd" },
      {
        name: "role",
        label: "Role",
        type: "select",
        adapter: "antd",
        required: true,
        options: [
          { label: "Admin", value: "admin" },
          { label: "Editor", value: "editor" },
          { label: "Viewer", value: "viewer" }
        ]
      },
      {
        name: "plan",
        label: "Plan",
        type: "radio-group",
        adapter: "antd",
        options: [
          { label: "Free", value: "free" },
          { label: "Pro", value: "pro" }
        ]
      },
      { name: "notifyByEmail", label: "Notify by email", type: "switch", adapter: "antd" }
    ]
  },
  actions: {
    create: { enabled: true, label: "Save user", handler: "users.create" }
  },
  registry: {
    fieldAdapters: ["antd"],
    actionHandlers: ["users.create"]
  },
  feedback: {
    mode: "inline"
  }
} as const;

import { createRegistry } from "@vibeflui/core";

export const vibefluiRegistry = createRegistry({
  actionHandlers: {
    "users.create": async ({ values }) => ({
      status: true,
      code: 200,
      message: `${String(values?.name ?? "User")} saved with the Ant Design field adapter`,
      data: values
    })
  }
});

"use client";

import { useState } from "react";
import {
  FluiKitFeedback,
  FluiKitForm,
  FluiKitProvider,
  executeOperation,
  normalizeSchema,
  type FluiKitFeedbackMessage
} from "@vibeflui/core";
import { antdPlugin } from "@vibeflui/antd";
import { antdUserFormSchema } from "@/schemas/users/antd-user-form.schema";
import { vibefluiRegistry } from "@/lib/vibeflui/registry";

const schema = normalizeSchema(antdUserFormSchema);

export default function NewUserPage() {
  const [feedback, setFeedback] = useState<FluiKitFeedbackMessage | null>(null);

  const handleCreateUser = async (values: Record<string, unknown>) => {
    const result = await executeOperation({
      schema,
      operation: "create",
      values,
      registry: vibefluiRegistry
    });

    setFeedback({
      status: "success",
      title: "Saved",
      message: String((result.data as { message?: unknown } | undefined)?.message ?? "User saved")
    });
  };

  return (
    <FluiKitProvider plugins={[antdPlugin]} registry={vibefluiRegistry}>
      <FluiKitFeedback schema={schema} mode="inline" feedback={feedback} onClose={() => setFeedback(null)} />
      <FluiKitForm schema={schema} mode="create" onSubmit={handleCreateUser} />
    </FluiKitProvider>
  );
}