@opennsw/jsonforms-renderers 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import { ComponentType } from 'react';
+import { ControlProps } from '@jsonforms/core';
+import { JsonSchema } from '@jsonforms/core';
+import { JSX } from 'react/jsx-runtime';
+import { LayoutProps } from '@jsonforms/core';
+import { OwnPropsOfControl } from '@jsonforms/core';
+import { RankedTester } from '@jsonforms/core';
+import { TesterContext } from '@jsonforms/core';
+import { UISchemaElement } from '@jsonforms/core';
+
+export declare const BooleanControl: ({ data, handleChange, path, label, required, errors, schema, enabled }: ControlProps) => JSX.Element;
+
+export declare const BooleanControlTester: RankedTester;
+
+export declare interface CategorizationLayoutProps extends LayoutProps {
+    data: any;
+}
+
+export declare const CategorizationLayoutRenderer: ({ uischema, schema, path, renderers, cells, enabled }: CategorizationLayoutProps) => JSX.Element | null;
+
+export declare const CategorizationLayoutTester: RankedTester;
+
+export declare const DateControl: ({ data, handleChange, path, label, required, errors, schema, enabled }: ControlProps) => JSX.Element;
+
+export declare const DateControlTester: RankedTester;
+
+export declare const FileControl: ComponentType<OwnPropsOfControl>;
+
+export declare const FileControlTester: (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => number;
+
+export declare const GroupLayoutRenderer: ({ uischema, schema, path, renderers, cells, enabled }: LayoutProps) => JSX.Element;
+
+export declare const GroupLayoutTester: RankedTester;
+
+export declare const HorizontalLayoutRenderer: ({ uischema, schema, path, renderers, cells, enabled }: LayoutProps) => JSX.Element;
+
+export declare const HorizontalLayoutTester: RankedTester;
+
+export declare const LabelRenderer: ({ uischema, visible }: any) => JSX.Element | null;
+
+export declare const LabelTester: RankedTester;
+
+export declare const NumberControl: ({ data, handleChange, path, label, required, errors, uischema, schema, enabled }: ControlProps) => JSX.Element;
+
+export declare const NumberControlTester: RankedTester;
+
+export declare const radixRenderers: ({
+    tester: RankedTester;
+    renderer: ComponentType<OwnPropsOfControl>;
+} | {
+    tester: RankedTester;
+    renderer: ({ uischema, schema, path, renderers, cells, enabled }: CategorizationLayoutProps) => JSX.Element | null;
+})[];
+
+export declare const SelectControl: ({ data, handleChange, path, label, required, errors, schema, uischema, enabled }: ControlProps) => JSX.Element;
+
+export declare const SelectControlTester: RankedTester;
+
+export declare const TextControl: ({ data, handleChange, path, label, required, errors, uischema, schema, enabled }: ControlProps) => JSX.Element;
+
+export declare const TextControlTester: RankedTester;
+
+export declare const VerticalLayoutRenderer: ({ uischema, schema, path, renderers, cells, enabled }: LayoutProps) => JSX.Element;
+
+export declare const VerticalLayoutTester: RankedTester;
+
+export { }

package/dist/jsonforms-renderers.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-300:oklch(80.8% .114 19.571);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-600:oklch(62.7% .194 149.214);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.relative{position:relative}.mt-1{margin-top:calc(var(--spacing)*1)}.block{display:block}.flex{display:flex}.hidden{display:none}.h-5{height:calc(var(--spacing)*5)}.h-8{height:calc(var(--spacing)*8)}.w-5{width:calc(var(--spacing)*5)}.w-8{width:calc(var(--spacing)*8)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-300{border-color:var(--color-gray-300)}.border-red-300{border-color:var(--color-red-300)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-red-50{background-color:var(--color-red-50)}.p-2{padding:calc(var(--spacing)*2)}.p-6{padding:calc(var(--spacing)*6)}.text-center{text-align:center}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-blue-600{color:var(--color-blue-600)}.text-gray-400{color:var(--color-gray-400)}.text-green-600{color:var(--color-green-600)}.text-red-500{color:var(--color-red-500)}.opacity-60{opacity:.6}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media(hover:hover){.hover\:border-blue-400:hover{border-color:var(--color-blue-400)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:underline:hover{text-decoration-line:underline}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/dist/renderers.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("@jsonforms/core"),C=require("@jsonforms/react"),r=require("@radix-ui/themes"),v=require("react"),F=require("@radix-ui/react-icons"),N=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,uischema:c,schema:l,enabled:x})=>{var m;const d=n.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{value:s||"",onChange:b=>u(t,b.target.value),disabled:!x,placeholder:(m=c.options)==null?void 0:m.placeholder,color:d?void 0:"red",id:t}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),l.description&&e.jsx(r.Text,{size:"1",color:"gray",children:l.description})]})})},R=a.rankWith(1,a.isStringControl),ne=C.withJsonFormsControlProps(N),S=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,uischema:c,schema:l,enabled:x})=>{var b;const d=n.length===0,m=h=>{if(h===""){u(t,void 0);return}const i=Number(h);isNaN(i)||u(t,i)};return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"number",value:s??"",onChange:h=>m(h.target.value),disabled:!x,placeholder:(b=c.options)==null?void 0:b.placeholder,color:d?void 0:"red",id:t}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),l.description&&e.jsx(r.Text,{size:"1",color:"gray",children:l.description})]})})},$=a.rankWith(2,a.or(a.isNumberControl,a.isIntegerControl)),se=C.withJsonFormsControlProps(S),B=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,enabled:l})=>{const x=n.length===0;return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Flex,{gap:"2",align:"center",children:[e.jsx(r.Checkbox,{checked:!!s,onCheckedChange:d=>u(t,d===!0),disabled:!l,id:t}),e.jsxs(r.Text,{as:"label",size:"2",htmlFor:t,children:[g," ",p&&"*"]})]}),!x&&e.jsx(r.Text,{color:"red",size:"1",className:"block mt-1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",className:"block mt-1",children:c.description})]})},I=a.rankWith(2,a.isBooleanControl),le=C.withJsonFormsControlProps(B),W=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,uischema:l,enabled:x})=>{var h;const d=n.length===0;let m=[];c.enum?m=c.enum.map(i=>({value:String(i),label:String(i)})):c.oneOf&&(m=c.oneOf.map(i=>({value:String(i.const),label:i.title||String(i.const)})));const b=s!==void 0?String(s):"";return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsxs(r.Select.Root,{value:b,onValueChange:i=>u(t,i),disabled:!x,children:[e.jsx(r.Select.Trigger,{placeholder:((h=l.options)==null?void 0:h.placeholder)||"Select an option",color:d?void 0:"red",id:t}),e.jsx(r.Select.Content,{children:m.map(i=>e.jsx(r.Select.Item,{value:i.value,children:i.label},i.value))})]}),!d&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},V=a.rankWith(2,a.or(a.isEnumControl,a.isOneOfControl)),ie=C.withJsonFormsControlProps(W),P=({data:s,handleChange:u,path:t,label:g,required:p,errors:n,schema:c,enabled:l})=>{const x=n.length===0;return e.jsx(r.Box,{mb:"4",children:e.jsxs(r.Flex,{direction:"column",gap:"1",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",htmlFor:t,children:[g," ",p&&e.jsx(r.Text,{color:"red",children:"*"})]}),e.jsx(r.TextField.Root,{type:"date",value:s||"",onChange:d=>u(t,d.target.value),disabled:!l,color:x?void 0:"red",id:t}),!x&&n!=="is a required property"&&e.jsx(r.Text,{color:"red",size:"1",children:n}),c.description&&e.jsx(r.Text,{size:"1",color:"gray",children:c.description})]})})},q=a.rankWith(2,a.isDateControl),ae=C.withJsonFormsControlProps(P),J=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const l=s.elements;return e.jsx(r.Flex,{direction:"column",gap:"4",children:l.map((x,d)=>e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${d}`))})},E=a.rankWith(1,a.uiTypeIs("VerticalLayout")),H=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const l=s.elements;return e.jsx(r.Flex,{direction:"row",gap:"4",children:l.map((x,d)=>e.jsx(r.Box,{style:{flex:1},children:e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n})},`${t}-${d}`))})},A=a.rankWith(1,a.uiTypeIs("HorizontalLayout")),M=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{const c=s,l=c.elements;return e.jsxs(r.Card,{mb:"4",children:[c.label&&e.jsx(r.Heading,{size:"4",mb:"4",children:c.label}),e.jsx(r.Flex,{direction:"column",gap:"4",children:l.map((x,d)=>e.jsx(C.JsonFormsDispatch,{uischema:x,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${d}`))})]})},O=a.rankWith(1,a.uiTypeIs("Group")),G=({uischema:s,schema:u,path:t,renderers:g,cells:p,enabled:n})=>{var b;const l=s.elements.filter(h=>h.type==="Category"),[x,d]=v.useState(((b=l[0])==null?void 0:b.label)||"");if(!l.length)return null;const m=l.find(h=>h.label===x)?x:l[0].label;return e.jsxs(r.Tabs.Root,{value:m,onValueChange:d,children:[e.jsx(r.Tabs.List,{children:l.map((h,i)=>e.jsx(r.Tabs.Trigger,{value:h.label,children:h.label},`${t}-${i}`))}),e.jsx(r.Box,{pt:"3",children:l.map((h,i)=>e.jsx(r.Tabs.Content,{value:h.label,children:e.jsx(r.Flex,{direction:"column",gap:"4",children:h.elements.map((z,y)=>e.jsx(C.JsonFormsDispatch,{uischema:z,schema:u,path:t,renderers:g,cells:p,enabled:n},`${t}-${i}-${y}`))})},`${t}-${i}`))})]})},U=a.rankWith(1,a.uiTypeIs("Categorization")),ce=({data:s,handleChange:u,path:t,label:g,required:p,uischema:n,enabled:c})=>{const[l,x]=v.useState(!1),[d,m]=v.useState(null),[b,h]=v.useState(null),i=v.useRef(null),z=(n==null?void 0:n.options)||{},y=z.maxSize||5*1024*1024,f=z.accept||"image/*,application/pdf",T=c!==!1,Z=()=>b||(s?"Uploaded File":null),D=o=>{if(o.size>y){const j=(y/1048576).toFixed(0);m(`File size exceeds ${j}MB limit.`);return}const oe=f.split(",").map(j=>j.trim()).some(j=>j.endsWith("/*")?o.type.startsWith(j.slice(0,-1)):j.startsWith(".")?o.name.toLowerCase().endsWith(j.toLowerCase()):o.type===j);if(f!=="*"&&!oe&&!f.includes("*/*")){m(`Invalid file type. Accepted types: ${f}`);return}const k=new FileReader;k.onload=()=>{const j=k.result;u(t,j),h(o.name),m(null)},k.onerror=()=>{m("Failed to read file")},k.readAsDataURL(o)},w=o=>{o.preventDefault(),o.stopPropagation(),!(!T||s)&&(o.type==="dragenter"||o.type==="dragover"?x(!0):o.type==="dragleave"&&x(!1))},_=o=>{o.preventDefault(),o.stopPropagation(),x(!1),!(!T||s)&&o.dataTransfer.files&&o.dataTransfer.files[0]&&D(o.dataTransfer.files[0])},ee=o=>{o.target.files&&o.target.files[0]&&D(o.target.files[0])},re=()=>{T&&(u(t,null),h(null),m(null),i.current&&(i.current.value=""))},te=o=>{var L;T&&(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),(L=i.current)==null||L.click())};return e.jsxs(r.Box,{mb:"4",children:[e.jsxs(r.Text,{as:"label",size:"2",weight:"bold",mb:"1",className:"block",children:[g," ",p&&"*"]}),s?e.jsx(r.Card,{size:"2",variant:"surface",className:"relative group",children:e.jsxs(r.Flex,{align:"center",gap:"3",children:[e.jsx(r.Box,{className:"bg-blue-100 p-2 rounded text-blue-600",children:e.jsx(F.FileTextIcon,{width:"20",height:"20"})}),e.jsxs(r.Box,{style:{flex:1,overflow:"hidden"},children:[e.jsx(r.Text,{size:"2",weight:"bold",className:"block truncate",children:Z()}),T?e.jsx(r.Text,{size:"1",color:"gray",children:"Ready to submit"}):e.jsx("a",{href:s,download:b||"document",className:"text-xs text-blue-600 hover:underline cursor-pointer",onClick:o=>o.stopPropagation(),children:"Download"})]}),e.jsxs(r.Flex,{align:"center",gap:"2",children:[e.jsx(F.CheckCircledIcon,{className:"text-green-600 w-5 h-5"}),T&&e.jsx(r.IconButton,{variant:"ghost",color:"gray",onClick:re,className:"hover:text-red-600 transition-colors",children:e.jsx(F.Cross2Icon,{})})]})]})}):e.jsxs("div",{className:`
+            border-2 border-dashed rounded-lg p-6 text-center transition-all duration-200 ease-in-out
+            ${l?"border-blue-500 bg-blue-50":"border-gray-300 hover:border-blue-400 hover:bg-gray-50"}
+            ${d?"border-red-300 bg-red-50":""}
+            ${T?"cursor-pointer":"opacity-60 cursor-not-allowed pointer-events-none"}
+          `,onDragEnter:w,onDragLeave:w,onDragOver:w,onDrop:_,onClick:()=>{var o;return T&&((o=i.current)==null?void 0:o.click())},onKeyDown:te,role:"button",tabIndex:T?0:-1,children:[e.jsx("input",{ref:i,type:"file",className:"hidden",accept:f,onChange:ee,disabled:!T}),e.jsx(r.Flex,{direction:"column",align:"center",gap:"2",children:d?e.jsxs(e.Fragment,{children:[e.jsx(F.ExclamationTriangleIcon,{className:"w-8 h-8 text-red-500"}),e.jsx(r.Text,{size:"2",color:"red",weight:"medium",children:d}),e.jsx(r.Text,{size:"1",color:"gray",children:"Click to try again"})]}):e.jsxs(e.Fragment,{children:[e.jsx(F.UploadIcon,{className:"w-8 h-8 text-gray-400"}),e.jsx(r.Text,{size:"2",weight:"medium",children:"Click to upload or drag and drop"}),e.jsxs(r.Text,{size:"1",color:"gray",children:["Max ",Math.round(y/(1024*1024)),"MB"]})]})})]})]})},K=C.withJsonFormsControlProps(ce),Q=a.rankWith(3,a.formatIs("data-url")),X=({uischema:s,visible:u})=>{const t=s;return u===!1?null:e.jsx(r.Box,{mb:"4",children:e.jsx(r.Heading,{size:"4",children:t.text})})},Y=a.rankWith(1,a.uiTypeIs("Label")),de=[{tester:R,renderer:ne},{tester:$,renderer:se},{tester:I,renderer:le},{tester:V,renderer:ie},{tester:q,renderer:ae},{tester:E,renderer:J},{tester:A,renderer:H},{tester:O,renderer:M},{tester:U,renderer:G},{tester:Q,renderer:K},{tester:Y,renderer:X}];exports.BooleanControl=B;exports.BooleanControlTester=I;exports.CategorizationLayoutRenderer=G;exports.CategorizationLayoutTester=U;exports.DateControl=P;exports.DateControlTester=q;exports.FileControl=K;exports.FileControlTester=Q;exports.GroupLayoutRenderer=M;exports.GroupLayoutTester=O;exports.HorizontalLayoutRenderer=H;exports.HorizontalLayoutTester=A;exports.LabelRenderer=X;exports.LabelTester=Y;exports.NumberControl=S;exports.NumberControlTester=$;exports.SelectControl=W;exports.SelectControlTester=V;exports.TextControl=N;exports.TextControlTester=R;exports.VerticalLayoutRenderer=J;exports.VerticalLayoutTester=E;exports.radixRenderers=de;

package/dist/renderers.es.js

@@ -0,0 +1,379 @@
+import { jsx as e, jsxs as h, Fragment as A } from "react/jsx-runtime";
+import { rankWith as z, isStringControl as U, or as W, isNumberControl as j, isIntegerControl as J, isBooleanControl as Q, isEnumControl as X, isOneOfControl as Y, isDateControl as Z, uiTypeIs as N, formatIs as _ } from "@jsonforms/core";
+import { withJsonFormsControlProps as T, JsonFormsDispatch as S } from "@jsonforms/react";
+import { Box as v, Flex as C, Text as c, TextField as B, Checkbox as ee, Select as k, Tabs as L, Card as M, Heading as O, IconButton as re } from "@radix-ui/themes";
+import { useState as R, useRef as te } from "react";
+import { FileTextIcon as oe, CheckCircledIcon as ne, Cross2Icon as le, ExclamationTriangleIcon as ie, UploadIcon as ce } from "@radix-ui/react-icons";
+const se = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, uischema: s, schema: l, enabled: u }) => {
+  var b;
+  const a = o.length === 0;
+  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      p,
+      " ",
+      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+    ] }),
+    /* @__PURE__ */ e(
+      B.Root,
+      {
+        value: n || "",
+        onChange: (f) => d(r, f.target.value),
+        disabled: !u,
+        placeholder: (b = s.options) == null ? void 0 : b.placeholder,
+        color: a ? void 0 : "red",
+        id: r
+      }
+    ),
+    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
+    l.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: l.description })
+  ] }) });
+}, ae = z(
+  1,
+  U
+), de = T(se), ue = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, uischema: s, schema: l, enabled: u }) => {
+  var f;
+  const a = o.length === 0, b = (g) => {
+    if (g === "") {
+      d(r, void 0);
+      return;
+    }
+    const i = Number(g);
+    isNaN(i) || d(r, i);
+  };
+  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      p,
+      " ",
+      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+    ] }),
+    /* @__PURE__ */ e(
+      B.Root,
+      {
+        type: "number",
+        value: n ?? "",
+        onChange: (g) => b(g.target.value),
+        disabled: !u,
+        placeholder: (f = s.options) == null ? void 0 : f.placeholder,
+        color: a ? void 0 : "red",
+        id: r
+      }
+    ),
+    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
+    l.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: l.description })
+  ] }) });
+}, he = z(
+  2,
+  W(j, J)
+), ge = T(ue), pe = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, enabled: l }) => {
+  const u = o.length === 0;
+  return /* @__PURE__ */ h(v, { mb: "4", children: [
+    /* @__PURE__ */ h(C, { gap: "2", align: "center", children: [
+      /* @__PURE__ */ e(
+        ee,
+        {
+          checked: !!n,
+          onCheckedChange: (a) => d(r, a === !0),
+          disabled: !l,
+          id: r
+        }
+      ),
+      /* @__PURE__ */ h(c, { as: "label", size: "2", htmlFor: r, children: [
+        p,
+        " ",
+        m && "*"
+      ] })
+    ] }),
+    !u && /* @__PURE__ */ e(c, { color: "red", size: "1", className: "block mt-1", children: o }),
+    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", className: "block mt-1", children: s.description })
+  ] });
+}, me = z(
+  2,
+  Q
+), be = T(pe), fe = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, uischema: l, enabled: u }) => {
+  var g;
+  const a = o.length === 0;
+  let b = [];
+  s.enum ? b = s.enum.map((i) => ({ value: String(i), label: String(i) })) : s.oneOf && (b = s.oneOf.map((i) => ({
+    value: String(i.const),
+    label: i.title || String(i.const)
+  })));
+  const f = n !== void 0 ? String(n) : "";
+  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      p,
+      " ",
+      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+    ] }),
+    /* @__PURE__ */ h(
+      k.Root,
+      {
+        value: f,
+        onValueChange: (i) => d(r, i),
+        disabled: !u,
+        children: [
+          /* @__PURE__ */ e(
+            k.Trigger,
+            {
+              placeholder: ((g = l.options) == null ? void 0 : g.placeholder) || "Select an option",
+              color: a ? void 0 : "red",
+              id: r
+            }
+          ),
+          /* @__PURE__ */ e(k.Content, { children: b.map((i) => /* @__PURE__ */ e(k.Item, { value: i.value, children: i.label }, i.value)) })
+        ]
+      }
+    ),
+    !a && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
+    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: s.description })
+  ] }) });
+}, Ce = z(
+  2,
+  W(X, Y)
+), ye = T(fe), ve = ({ data: n, handleChange: d, path: r, label: p, required: m, errors: o, schema: s, enabled: l }) => {
+  const u = o.length === 0;
+  return /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ h(C, { direction: "column", gap: "1", children: [
+    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", htmlFor: r, children: [
+      p,
+      " ",
+      m && /* @__PURE__ */ e(c, { color: "red", children: "*" })
+    ] }),
+    /* @__PURE__ */ e(
+      B.Root,
+      {
+        type: "date",
+        value: n || "",
+        onChange: (a) => d(r, a.target.value),
+        disabled: !l,
+        color: u ? void 0 : "red",
+        id: r
+      }
+    ),
+    !u && o !== "is a required property" && /* @__PURE__ */ e(c, { color: "red", size: "1", children: o }),
+    s.description && /* @__PURE__ */ e(c, { size: "1", color: "gray", children: s.description })
+  ] }) });
+}, ze = z(
+  2,
+  Z
+), xe = T(ve), Te = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+  const l = n.elements;
+  return /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(
+    S,
+    {
+      uischema: u,
+      schema: d,
+      path: r,
+      renderers: p,
+      cells: m,
+      enabled: o
+    },
+    `${r}-${a}`
+  )) });
+}, we = z(1, N("VerticalLayout")), Fe = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+  const l = n.elements;
+  return /* @__PURE__ */ e(C, { direction: "row", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(v, { style: { flex: 1 }, children: /* @__PURE__ */ e(
+    S,
+    {
+      uischema: u,
+      schema: d,
+      path: r,
+      renderers: p,
+      cells: m,
+      enabled: o
+    }
+  ) }, `${r}-${a}`)) });
+}, Ne = z(1, N("HorizontalLayout")), $e = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+  const s = n, l = s.elements;
+  return /* @__PURE__ */ h(M, { mb: "4", children: [
+    s.label && /* @__PURE__ */ e(O, { size: "4", mb: "4", children: s.label }),
+    /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: l.map((u, a) => /* @__PURE__ */ e(
+      S,
+      {
+        uischema: u,
+        schema: d,
+        path: r,
+        renderers: p,
+        cells: m,
+        enabled: o
+      },
+      `${r}-${a}`
+    )) })
+  ] });
+}, De = z(1, N("Group")), ke = ({ uischema: n, schema: d, path: r, renderers: p, cells: m, enabled: o }) => {
+  var f;
+  const l = n.elements.filter((g) => g.type === "Category"), [u, a] = R(((f = l[0]) == null ? void 0 : f.label) || "");
+  if (!l.length) return null;
+  const b = l.find((g) => g.label === u) ? u : l[0].label;
+  return /* @__PURE__ */ h(L.Root, { value: b, onValueChange: a, children: [
+    /* @__PURE__ */ e(L.List, { children: l.map((g, i) => /* @__PURE__ */ e(L.Trigger, { value: g.label, children: g.label }, `${r}-${i}`)) }),
+    /* @__PURE__ */ e(v, { pt: "3", children: l.map((g, i) => /* @__PURE__ */ e(L.Content, { value: g.label, children: /* @__PURE__ */ e(C, { direction: "column", gap: "4", children: g.elements.map(($, w) => /* @__PURE__ */ e(
+      S,
+      {
+        uischema: $,
+        schema: d,
+        path: r,
+        renderers: p,
+        cells: m,
+        enabled: o
+      },
+      `${r}-${i}-${w}`
+    )) }) }, `${r}-${i}`)) })
+  ] });
+}, Le = z(1, N("Categorization")), Re = ({ data: n, handleChange: d, path: r, label: p, required: m, uischema: o, enabled: s }) => {
+  const [l, u] = R(!1), [a, b] = R(null), [f, g] = R(null), i = te(null), $ = (o == null ? void 0 : o.options) || {}, w = $.maxSize || 5 * 1024 * 1024, F = $.accept || "image/*,application/pdf", x = s !== !1, P = () => f || (n ? "Uploaded File" : null), E = (t) => {
+    if (t.size > w) {
+      const y = (w / 1048576).toFixed(0);
+      b(`File size exceeds ${y}MB limit.`);
+      return;
+    }
+    const K = F.split(",").map((y) => y.trim()).some((y) => y.endsWith("/*") ? t.type.startsWith(y.slice(0, -1)) : y.startsWith(".") ? t.name.toLowerCase().endsWith(y.toLowerCase()) : t.type === y);
+    if (F !== "*" && !K && !F.includes("*/*")) {
+      b(`Invalid file type. Accepted types: ${F}`);
+      return;
+    }
+    const D = new FileReader();
+    D.onload = () => {
+      const y = D.result;
+      d(r, y), g(t.name), b(null);
+    }, D.onerror = () => {
+      b("Failed to read file");
+    }, D.readAsDataURL(t);
+  }, I = (t) => {
+    t.preventDefault(), t.stopPropagation(), !(!x || n) && (t.type === "dragenter" || t.type === "dragover" ? u(!0) : t.type === "dragleave" && u(!1));
+  }, q = (t) => {
+    t.preventDefault(), t.stopPropagation(), u(!1), !(!x || n) && t.dataTransfer.files && t.dataTransfer.files[0] && E(t.dataTransfer.files[0]);
+  }, H = (t) => {
+    t.target.files && t.target.files[0] && E(t.target.files[0]);
+  }, G = () => {
+    x && (d(r, null), g(null), b(null), i.current && (i.current.value = ""));
+  };
+  return /* @__PURE__ */ h(v, { mb: "4", children: [
+    /* @__PURE__ */ h(c, { as: "label", size: "2", weight: "bold", mb: "1", className: "block", children: [
+      p,
+      " ",
+      m && "*"
+    ] }),
+    n ? /* @__PURE__ */ e(M, { size: "2", variant: "surface", className: "relative group", children: /* @__PURE__ */ h(C, { align: "center", gap: "3", children: [
+      /* @__PURE__ */ e(v, { className: "bg-blue-100 p-2 rounded text-blue-600", children: /* @__PURE__ */ e(oe, { width: "20", height: "20" }) }),
+      /* @__PURE__ */ h(v, { style: { flex: 1, overflow: "hidden" }, children: [
+        /* @__PURE__ */ e(c, { size: "2", weight: "bold", className: "block truncate", children: P() }),
+        x ? /* @__PURE__ */ e(c, { size: "1", color: "gray", children: "Ready to submit" }) : /* @__PURE__ */ e(
+          "a",
+          {
+            href: n,
+            download: f || "document",
+            className: "text-xs text-blue-600 hover:underline cursor-pointer",
+            onClick: (t) => t.stopPropagation(),
+            children: "Download"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ h(C, { align: "center", gap: "2", children: [
+        /* @__PURE__ */ e(ne, { className: "text-green-600 w-5 h-5" }),
+        x && /* @__PURE__ */ e(
+          re,
+          {
+            variant: "ghost",
+            color: "gray",
+            onClick: G,
+            className: "hover:text-red-600 transition-colors",
+            children: /* @__PURE__ */ e(le, {})
+          }
+        )
+      ] })
+    ] }) }) : /* @__PURE__ */ h(
+      "div",
+      {
+        className: `
+            border-2 border-dashed rounded-lg p-6 text-center transition-all duration-200 ease-in-out
+            ${l ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-blue-400 hover:bg-gray-50"}
+            ${a ? "border-red-300 bg-red-50" : ""}
+            ${x ? "cursor-pointer" : "opacity-60 cursor-not-allowed pointer-events-none"}
+          `,
+        onDragEnter: I,
+        onDragLeave: I,
+        onDragOver: I,
+        onDrop: q,
+        onClick: () => {
+          var t;
+          return x && ((t = i.current) == null ? void 0 : t.click());
+        },
+        onKeyDown: (t) => {
+          var V;
+          x && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), (V = i.current) == null || V.click());
+        },
+        role: "button",
+        tabIndex: x ? 0 : -1,
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: i,
+              type: "file",
+              className: "hidden",
+              accept: F,
+              onChange: H,
+              disabled: !x
+            }
+          ),
+          /* @__PURE__ */ e(C, { direction: "column", align: "center", gap: "2", children: a ? /* @__PURE__ */ h(A, { children: [
+            /* @__PURE__ */ e(ie, { className: "w-8 h-8 text-red-500" }),
+            /* @__PURE__ */ e(c, { size: "2", color: "red", weight: "medium", children: a }),
+            /* @__PURE__ */ e(c, { size: "1", color: "gray", children: "Click to try again" })
+          ] }) : /* @__PURE__ */ h(A, { children: [
+            /* @__PURE__ */ e(ce, { className: "w-8 h-8 text-gray-400" }),
+            /* @__PURE__ */ e(c, { size: "2", weight: "medium", children: "Click to upload or drag and drop" }),
+            /* @__PURE__ */ h(c, { size: "1", color: "gray", children: [
+              "Max ",
+              Math.round(w / (1024 * 1024)),
+              "MB"
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}, Se = T(Re), Ie = z(
+  3,
+  // Rank
+  _("data-url")
+), Ve = ({ uischema: n, visible: d }) => {
+  const r = n;
+  return d === !1 ? null : /* @__PURE__ */ e(v, { mb: "4", children: /* @__PURE__ */ e(O, { size: "4", children: r.text }) });
+}, Be = z(1, N("Label")), He = [
+  { tester: ae, renderer: de },
+  { tester: he, renderer: ge },
+  { tester: me, renderer: be },
+  { tester: Ce, renderer: ye },
+  { tester: ze, renderer: xe },
+  { tester: we, renderer: Te },
+  { tester: Ne, renderer: Fe },
+  { tester: De, renderer: $e },
+  { tester: Le, renderer: ke },
+  { tester: Ie, renderer: Se },
+  { tester: Be, renderer: Ve }
+];
+export {
+  pe as BooleanControl,
+  me as BooleanControlTester,
+  ke as CategorizationLayoutRenderer,
+  Le as CategorizationLayoutTester,
+  ve as DateControl,
+  ze as DateControlTester,
+  Se as FileControl,
+  Ie as FileControlTester,
+  $e as GroupLayoutRenderer,
+  De as GroupLayoutTester,
+  Fe as HorizontalLayoutRenderer,
+  Ne as HorizontalLayoutTester,
+  Ve as LabelRenderer,
+  Be as LabelTester,
+  ue as NumberControl,
+  he as NumberControlTester,
+  fe as SelectControl,
+  Ce as SelectControlTester,
+  se as TextControl,
+  ae as TextControlTester,
+  Te as VerticalLayoutRenderer,
+  we as VerticalLayoutTester,
+  He as radixRenderers
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@opennsw/jsonforms-renderers",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/renderers.cjs.js",
+  "module": "dist/renderers.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/renderers.es.js",
+      "require": "./dist/renderers.cjs.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@jsonforms/core": "^3.2.1",
+    "@jsonforms/react": "^3.2.1",
+    "@radix-ui/themes": "^3.2.1",
+    "@radix-ui/react-icons": "^1.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.0",
+    "tailwindcss": "^4.0.9",
+    "@tailwindcss/vite": "^4.0.9"
+  },
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "type-check": "tsc -b --noEmit"
+  }
+}