File Organization

app/
  users/
    page.tsx
schemas/
  user.form.schema.ts
  user.table.schema.ts
  user.actions.schema.ts
  user.schema.ts
lib/
  vibeflui/
    registry.ts

export const userSchema = {
  version: "1.0.0",
  resource: "users",
  endpoint: "/api/users",
  table: {
    columns: ["name", "email", "status"]
  },
  form: {
    mode: "modal",
    fields: [
      { name: "name", label: "Name", type: "text", required: true },
      { name: "email", label: "Email", type: "email", required: true },
      { name: "status", label: "Status", type: "select", optionLoader: "users.statusOptions" }
    ]
  },
  actions: {
    create: { enabled: true, label: "Create user", handler: "users.create" }
  }
} as const;

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

export const registry = createRegistry({
  optionLoaders: {
    "users.statusOptions": async () => [
      { label: "Active", value: "active" },
      { label: "Suspended", value: "suspended" }
    ]
  },
  actionHandlers: {
    "users.create": async ({ values }) => {
      const name = String(values?.name ?? "User");

      return {
        status: true,
        code: 200,
        message: `${name} created`
      };
    }
  }
});

"use client";

import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { registry } from "@/lib/vibeflui/registry";
import { userSchema } from "@/schemas/user.schema";

export default function UsersPage() {
  return (
    <FluiKitProvider registry={registry}>
      <FluiKit schema={userSchema} />
    </FluiKitProvider>
  );
}