Custom Fields and Adapters

import type { FluiKitRuntimeComponentProps } from "@vibeflui/core";

export function RoleSelectField({ value, options = [], onChange }: FluiKitRuntimeComponentProps) {
  return (
    <select value={String(value ?? "")} onChange={(event) => onChange?.(event.target.value)}>
      <option value="">Select role</option>
      {options.map((option) => {
        const item = option as { label?: string; value?: string | number | boolean };

        return (
          <option key={String(item.value)} value={String(item.value)}>
            {String(item.label ?? item.value ?? "")}
          </option>
        );
      })}
    </select>
  );
}

import { createRegistry } from "@vibeflui/core";
import { RoleSelectField } from "@/components/vibeflui/fields/RoleSelectField";

export const registry = createRegistry({
  fieldAdapters: {
    "users.roleSelect": RoleSelectField
  }
});

export const usersSchema = {
  resource: "users",
  form: {
    fields: [
      {
        name: "roleId",
        label: "Role",
        type: "select",
        adapter: "users.roleSelect",
        optionLoader: "users.roles"
      }
    ]
  },
  registry: {
    fieldAdapters: ["users.roleSelect"],
    optionLoaders: ["users.roles"]
  }
} as const;

type AvatarUploaderProps = {
  value?: unknown;
  onChange?: (value: File | undefined) => void;
};

export function AvatarUploader({ onChange }: AvatarUploaderProps) {
  return (
    <input
      type="file"
      accept="image/*"
      onChange={(event) => onChange?.(event.target.files?.[0])}
    />
  );
}

import { createRegistry } from "@vibeflui/core";
import { AvatarUploader } from "@/components/vibeflui/fields/AvatarUploader";

export const registry = createRegistry({
  components: {
    AvatarUploader
  }
});

{
  name: "avatar",
  type: "image",
  component: "AvatarUploader"
}