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";

export function DynamicForm({ schema, uiSchema }: DynamicFormProps) {
  const [data, setData] = useState({});
  const [errors, setErrors] = useState<{ message?: string }[]>([]);

  return (
    <>
      <JsonForms
        schema={schema}
        uischema={uiSchema}
        data={data}
        renderers={shadcnRenderers}
        cells={shadcnCells}
        onChange={({ data, errors }) => {
          setData(data);
          setErrors(errors ?? []);
        }}
      />
      <button disabled={errors.length > 0} onClick={handleSubmit}>
        Submit
      </button>
    </>
  );
}

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 [errors, setErrors] = useState<{ message?: string }[]>([]);
  const { data: form, loading: formLoading } = formsClient.useForm({
    path: { slug: "contact" },
  });
  const { mutate: submit, data: responseId, loading: submitting } = formsClient.useSubmitForm();

  if (formLoading || !form) return <div>Loading...</div>;
  if (responseId) return <div>Thank you for your submission!</div>;

  const handleSubmit = async () => {
    await submit({
      path: { slug: "contact" },
      body: { data: formData },
    });
  };

  return (
    <>
      <JsonForms
        schema={form.dataSchema}
        uischema={form.uiSchema}
        data={formData}
        renderers={shadcnRenderers}
        cells={shadcnCells}
        onChange={({ data, errors }) => {
          setFormData(data ?? {});
          setErrors(errors ?? []);
        }}
      />
      <button type="submit" disabled={submitting || errors.length > 0} onClick={handleSubmit}>
        {submitting ? "Submitting..." : "Submit"}
      </button>
    </>
  );
}