shadcn/ui Renderer

npx shadcn@latest add button \
    calendar \
    card \
    checkbox \
    field \
    input \
    label \
    popover \
    radio-group \
    select \
    slider \
    switch \
    tabs \
    textarea

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@/components": path.resolve(__dirname, "./src/components"),
      "@/lib": path.resolve(__dirname, "./src/lib"),
    },
  },
  ssr: {
    noExternal: ["@fragno-dev/jsonforms-shadcn-renderers"],
  },
});

@source "../node_modules/@fragno-dev/jsonforms-shadcn-renderers";

import { useState } from "react";
import { JsonForms } from "@jsonforms/react";
import { shadcnRenderers, shadcnCells } from "@fragno-dev/jsonforms-shadcn-renderers";

interface DynamicFormProps {
  schema: Record<string, unknown>;
  uiSchema: Record<string, unknown>;
  onSubmit: (data: Record<string, unknown>) => void;
}

export function DynamicForm({ schema, uiSchema, onSubmit }: DynamicFormProps) {
  const [data, setData] = useState({});

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(data);
      }}
    >
      <JsonForms
        schema={schema}
        uischema={uiSchema}
        data={data}
        renderers={shadcnRenderers}
        cells={shadcnCells}
        onChange={({ data }) => setData(data)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

import { useState } from "react";
import { JsonForms } from "@jsonforms/react";
import { shadcnRenderers, shadcnCells } from "@fragno-dev/jsonforms-shadcn-renderers";
import { formsClient } from "@/lib/forms-client";

export function ContactForm() {
  const [formData, setFormData] = useState({});
  const { data: form, loading: formLoading } = formsClient.useForm({
    pathParams: { slug: "contact" },
  });
  const { mutate: submit, loading: submitting } = formsClient.useSubmitForm();

  if (formLoading || !form) return <div>Loading...</div>;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await submit({
      pathParams: { slug: "contact" },
      body: { data: formData },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <JsonForms
        schema={form.dataSchema}
        uischema={form.uiSchema}
        data={formData}
        renderers={shadcnRenderers}
        cells={shadcnCells}
        onChange={({ data }) => setFormData(data ?? {})}
      />
      <button type="submit" disabled={submitting}>
        {submitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
}