npm install @vibeflui/shadcn

schemas/
  users/
    shadcn-users.schema.ts
lib/
  vibeflui/
    examples/
      shadcn-user-actions.ts
    registry.tsx
app/
  users/
    page.tsx

export const shadcnUsersSchema = {
  resource: "users",
  adapter: "shadcn",
  theme: {
    preset: "shadcn"
  },
  identity: { key: "id", param: "id" },
  table: {
    columns: [
      { key: "name", label: "Name" },
      { key: "email", label: "Email", type: "email" },
      { key: "status", label: "Status", type: "custom", renderer: "StatusBadge" }
    ]
  },
  actions: {
    create: { enabled: false },
    edit: { enabled: true, label: "Edit", display: "icon", icon: "mdi:pencil-outline", handler: "users.update" },
    delete: { enabled: false }
  },
  form: {
    mode: "modal",
    fields: [
      { name: "name", label: "Name", required: true },
      { name: "email", label: "Email", type: "email", required: true },
      { name: "enabled", label: "Enabled", type: "switch", adapter: "Switch" }
    ]
  },
  registry: {
    renderers: ["StatusBadge"],
    fieldAdapters: ["Switch"],
    actionHandlers: ["users.update"]
  }
} as const;

import type { Dispatch, SetStateAction } from "react";
import type { FluiKitActionExecutionContext } from "@vibeflui/core";

export type ShadcnUserRow = { id: string; name: string; email: string; status: string; enabled: boolean };

export const initialShadcnUsers: ShadcnUserRow[] = [
  { id: "usr_1", name: "Ada Lovelace", email: "ada@example.test", status: "active", enabled: true },
  { id: "usr_2", name: "Grace Hopper", email: "grace@example.test", status: "pending", enabled: false }
];

export function createShadcnUserActions(setUsers: Dispatch<SetStateAction<ShadcnUserRow[]>>) {
  return {
    "users.update": async ({ row, values }: FluiKitActionExecutionContext) => {
      const id = String(row?.id ?? "");
      const nextUser: ShadcnUserRow = {
        id,
        name: String(values?.name ?? ""),
        email: String(values?.email ?? ""),
        status: String(row?.status ?? "active"),
        enabled: Boolean(values?.enabled)
      };

      setUsers((current) => current.map((user) => (user.id === id ? nextUser : user)));
      return { status: true, code: 200, message: "User updated" };
    }
  };
}

import type { Dispatch, SetStateAction } from "react";
import { createRegistry } from "@vibeflui/core";
import { createShadcnUserActions, type ShadcnUserRow } from "@/lib/vibeflui/examples/shadcn-user-actions";

export function createVibefluiRegistry(setUsers: Dispatch<SetStateAction<ShadcnUserRow[]>>) {
  return createRegistry({
    actionHandlers: createShadcnUserActions(setUsers)
  });
}

"use client";

import { useMemo, useState } from "react";
import { FluiKit, FluiKitProvider } from "@vibeflui/core";
import { shadcnPlugin } from "@vibeflui/shadcn";
import { createVibefluiRegistry } from "@/lib/vibeflui/registry";
import { initialShadcnUsers } from "@/lib/vibeflui/examples/shadcn-user-actions";
import { shadcnUsersSchema } from "@/schemas/users/shadcn-users.schema";

export default function UsersPage() {
  const [users, setUsers] = useState(initialShadcnUsers);
  const registry = useMemo(() => createVibefluiRegistry(setUsers), []);

  return (
    <FluiKitProvider plugins={[shadcnPlugin]} registry={registry}>
      <FluiKit schema={shadcnUsersSchema} data={users} />
    </FluiKitProvider>
  );
}