json-to-shadcn/dist/index.js

Config-driven UI renderer using ShadCN components

"use strict";var W=Object.create;var N=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var te=(e,r)=>{for(var t in r)N(e,t,{get:r[t],enumerable:!0})},P=(e,r,t,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of Z(r))!ee.call(e,i)&&i!==t&&N(e,i,{get:()=>r[i],enumerable:!(c=Y(r,i))||c.enumerable});return e};var R=(e,r,t)=>(t=e!=null?W(j(e)):{},P(r||!e||!e.__esModule?N(t,"default",{value:e,enumerable:!0}):t,e)),ae=e=>P(N({},"__esModule",{value:!0}),e);var me={};te(me,{JsonFormRenderer:()=>ie});module.exports=ae(me);var u=require("react-hook-form");var $=R(require("react"));var F=require("clsx"),J=require("tailwind-merge");function n(...e){return(0,J.twMerge)((0,F.clsx)(e))}var I=require("react/jsx-runtime"),L=$.forwardRef(({className:e,type:r,...t},c)=>(0,I.jsx)("input",{type:r,className:n("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:c,...t}));L.displayName="Input";var z=R(require("react")),_=require("@radix-ui/react-slot"),O=require("class-variance-authority");var X=require("react/jsx-runtime"),re=(0,O.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),T=z.forwardRef(({className:e,variant:r,size:t,asChild:c=!1,...i},v)=>(0,X.jsx)(c?_.Slot:"button",{className:n(re({variant:r,size:t,className:e})),ref:v,...i}));T.displayName="Button";var f=R(require("react"));var b=require("react/jsx-runtime"),H=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("rounded-xl border bg-card text-card-foreground shadow",e),...r}));H.displayName="Card";var oe=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("flex flex-col space-y-1.5 p-6",e),...r}));oe.displayName="CardHeader";var ne=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("font-semibold leading-none tracking-tight",e),...r}));ne.displayName="CardTitle";var se=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("text-sm text-muted-foreground",e),...r}));se.displayName="CardDescription";var w=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("p-6 pt-0",e),...r}));w.displayName="CardContent";var le=f.forwardRef(({className:e,...r},t)=>(0,b.jsx)("div",{ref:t,className:n("flex items-center p-6 pt-0",e),...r}));le.displayName="CardFooter";var q=R(require("react"));var G=require("react/jsx-runtime"),M=q.forwardRef(({className:e,...r},t)=>(0,G.jsx)("textarea",{className:n("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:t,...r}));M.displayName="Textarea";var a=require("react/jsx-runtime"),ie=({config:e,onSubmit:r})=>{let{control:t,handleSubmit:c}=(0,u.useForm)(),i=l=>{console.log("\u2705 Form Submitted:",l),r?.(l)},v=(l,o=0)=>{let k=l.props,E=k.options||[],{wrapperClassName:g,label:m,labelClassName:y,className:p,name:h,validation:x,type:D,placeholder:A,maxLength:S,minLength:V,text:K,variant:Q,content:U,title:B}=k;switch(l.type){case"input":case"date":return(0,a.jsx)(u.Controller,{name:h||`field-${o}`,control:t,defaultValue:"",rules:x,render:({field:s})=>(0,a.jsxs)("div",{className:g,children:[m&&(0,a.jsx)("label",{className:y,children:m}),(0,a.jsx)(L,{...s,type:D==="date"?"date":D||"text",placeholder:A,maxLength:S,minLength:V,className:p})]})},o);case"textarea":return(0,a.jsx)(u.Controller,{name:h||`field-${o}`,control:t,defaultValue:"",rules:x,render:({field:s})=>(0,a.jsxs)("div",{className:g,children:[m&&(0,a.jsx)("label",{className:y,children:m}),(0,a.jsx)(M,{...s,placeholder:A,maxLength:S,minLength:V,className:p})]})},o);case"select":return(0,a.jsx)(u.Controller,{name:h||`field-${o}`,control:t,defaultValue:"",rules:x,render:({field:s})=>(0,a.jsxs)("div",{className:g,children:[m&&(0,a.jsx)("label",{className:y,children:m}),(0,a.jsxs)("select",{...s,className:p,children:[(0,a.jsx)("option",{value:"",children:"Select an option"}),E?.map((d,C)=>(0,a.jsx)("option",{value:d.value,children:d.label},C))]})]})},o);case"checkbox":return(0,a.jsx)(u.Controller,{name:h||`field-${o}`,control:t,defaultValue:!1,rules:x,render:({field:s})=>(0,a.jsxs)("label",{className:`${g} flex items-center gap-2`,children:[(0,a.jsx)("input",{type:"checkbox",...s,className:p}),(0,a.jsx)("span",{className:y,children:m})]})},o);case"radio":return(0,a.jsx)(u.Controller,{name:h||`field-${o}`,control:t,defaultValue:"",rules:x,render:({field:s})=>(0,a.jsxs)("div",{className:g,children:[m&&(0,a.jsx)("label",{className:y,children:m}),(0,a.jsx)("div",{className:"flex gap-4",children:E?.map((d,C)=>(0,a.jsxs)("label",{className:"flex items-center gap-2",children:[(0,a.jsx)("input",{type:"radio",value:d.value,checked:s.value===d.value,onChange:()=>s.onChange(d.value),className:p}),d.label]},C))})]})},o);case"button":return(0,a.jsx)(T,{type:"submit",className:p,variant:Q||"default",children:K},o);case"text":return(0,a.jsx)("p",{className:p,children:U},o);case"card":return(0,a.jsx)(H,{className:p,children:(0,a.jsxs)(w,{className:"space-y-4",children:[B&&(0,a.jsx)("h2",{className:"text-lg font-semibold",children:B}),Array.isArray(l.props.content)&&l.props.content.map((s,d)=>v(s,d))]})},o);default:return null}};return(0,a.jsx)("form",{onSubmit:c(i),className:"space-y-6",children:Array.isArray(e)?e.map((l,o)=>v(l,o)):v(e)})};0&&(module.exports={JsonFormRenderer});