react-form-dto 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -11
- package/dist/react-form-dto.es.js +1 -1
- package/dist/react-form-dto.umd.js +1 -1
- package/dist/stories/FormBuilder.stories.d.ts +25 -0
- package/dist/types/dto.d.ts +2 -6
- package/package.json +21 -12
package/README.md
CHANGED
|
@@ -22,7 +22,14 @@ This library lets you define forms declaratively using JSON DTOs (`FormDTO`, `Se
|
|
|
22
22
|
|
|
23
23
|
Comprehensive documentation is available here
|
|
24
24
|
|
|
25
|
-
👉 [Documentation](https://shakir-afridi.github.io/react-form-dto/)
|
|
25
|
+
👉 [Documentation](https://shakir-afridi.github.io/react-form-dto/docs)
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 📘 Storybook
|
|
30
|
+
|
|
31
|
+
Explore it interactively on Storybook:
|
|
32
|
+
👉 [Live Demo](https://shakir-afridi.github.io/react-form-dto/storybook)
|
|
26
33
|
|
|
27
34
|
---
|
|
28
35
|
|
|
@@ -86,13 +93,13 @@ The form in the image above is generated from this DTO.
|
|
|
86
93
|
const profileForm: FormDTO = {
|
|
87
94
|
title: "User Profile",
|
|
88
95
|
description: "Fill out your personal information",
|
|
89
|
-
layout: {
|
|
96
|
+
layout: { cols: 12, gap: "1rem" }, // global form layout
|
|
90
97
|
sections: [
|
|
91
98
|
{
|
|
92
99
|
id: "personal",
|
|
93
100
|
heading: "Personal Information",
|
|
94
101
|
description: "Basic details about you",
|
|
95
|
-
layout: {
|
|
102
|
+
layout: { cols: 12, gap: "1rem" }, // section layout
|
|
96
103
|
fields: [
|
|
97
104
|
{
|
|
98
105
|
id: "title",
|
|
@@ -100,31 +107,31 @@ const profileForm: FormDTO = {
|
|
|
100
107
|
label: "Title",
|
|
101
108
|
placeholder: "Select your title",
|
|
102
109
|
options: ["Mr", "Ms", "Dr", "Prof"],
|
|
103
|
-
layout: {
|
|
110
|
+
layout: { cols: 4 },
|
|
104
111
|
},
|
|
105
112
|
{
|
|
106
113
|
id: "firstName",
|
|
107
114
|
type: "text",
|
|
108
115
|
label: "First Name",
|
|
109
|
-
layout: {
|
|
116
|
+
layout: { cols: 4 },
|
|
110
117
|
},
|
|
111
118
|
{
|
|
112
119
|
id: "lastName",
|
|
113
120
|
type: "text",
|
|
114
121
|
label: "Last Name",
|
|
115
|
-
layout: {
|
|
122
|
+
layout: { cols: 4 },
|
|
116
123
|
},
|
|
117
124
|
{
|
|
118
125
|
id: "age",
|
|
119
126
|
type: "number",
|
|
120
127
|
label: "Age",
|
|
121
|
-
layout: {
|
|
128
|
+
layout: { cols: 6 },
|
|
122
129
|
},
|
|
123
130
|
{
|
|
124
131
|
id: "dob",
|
|
125
132
|
type: "date",
|
|
126
133
|
label: "Date of Birth",
|
|
127
|
-
layout: {
|
|
134
|
+
layout: { cols: 6 },
|
|
128
135
|
},
|
|
129
136
|
{
|
|
130
137
|
id: "skills",
|
|
@@ -138,7 +145,7 @@ const profileForm: FormDTO = {
|
|
|
138
145
|
"GraphQL",
|
|
139
146
|
"Docker",
|
|
140
147
|
],
|
|
141
|
-
layout: {
|
|
148
|
+
layout: { cols: 12 },
|
|
142
149
|
validations: {
|
|
143
150
|
required: "Select at least one skill",
|
|
144
151
|
validate: (val: string[]) =>
|
|
@@ -152,7 +159,7 @@ const profileForm: FormDTO = {
|
|
|
152
159
|
{
|
|
153
160
|
id: "contact",
|
|
154
161
|
heading: "Contact Information",
|
|
155
|
-
layout: {
|
|
162
|
+
layout: { cols: 12 },
|
|
156
163
|
fields: [
|
|
157
164
|
{
|
|
158
165
|
id: "email",
|
|
@@ -170,7 +177,7 @@ const profileForm: FormDTO = {
|
|
|
170
177
|
label: "Country",
|
|
171
178
|
placeholder: "Select a country",
|
|
172
179
|
options: ["Pakistan", "India", "USA", "UK", "Germany"],
|
|
173
|
-
layout: {
|
|
180
|
+
layout: { cols: 6 },
|
|
174
181
|
},
|
|
175
182
|
],
|
|
176
183
|
},
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,p,b,g,b),te[b+p]=!0)}if(b=null,c!==void 0&&(o(c),b=""+c),m(u)&&(o(u.key),b=""+u.key),"key"in u){c={};for(var $ in u)$!=="key"&&(c[$]=u[$])}else c=u;return b&&h(c,typeof t=="function"?t.displayName||t.name||"Unknown":t),R(t,b,c,n(),k,P)}function _(t){v(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===w&&(t._payload.status==="fulfilled"?v(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function v(t){return typeof t=="object"&&t!==null&&t.$$typeof===H}var S=f,H=Symbol.for("react.transitional.element"),ie=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),ce=Symbol.for("react.strict_mode"),de=Symbol.for("react.profiler"),me=Symbol.for("react.consumer"),pe=Symbol.for("react.context"),be=Symbol.for("react.forward_ref"),he=Symbol.for("react.suspense"),fe=Symbol.for("react.suspense_list"),xe=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),ve=Symbol.for("react.activity"),ge=Symbol.for("react.client.reference"),O=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,Ee=Array.isArray,C=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(t){return t()}};var Z,Q={},K=S.react_stack_bottom_frame.bind(S,s)(),ee=C(a(s)),te={};T.Fragment=F,T.jsx=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!1,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)},T.jsxs=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!0,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)}})()),T}var N;function ae(){return N||(N=1,process.env.NODE_ENV==="production"?j.exports=re():j.exports=ne()),j.exports}var l=ae();function D({field:e,value:r,onChange:o,error:a}){return l.jsxs(i.FormControl,{fullWidth:!0,children:[l.jsx(i.InputLabel,{id:`${e.id}-label`,children:e.label}),l.jsx(i.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:n=>o(n.target.value),label:e.label,error:!!a,children:e.options?.map(n=>l.jsx(i.MenuItem,{value:n,children:n},n))}),a&&l.jsx(i.Typography,{variant:"caption",color:"error",children:a})]})}function q({field:e,value:r,onChange:o,error:a}){return console.log("error",a),l.jsx(i.TextField,{fullWidth:!0,label:e.label,placeholder:e.placeholder,value:r||"",name:e.id,onChange:n=>o(n.target.value),required:e.required,disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function z({field:e,value:r,onChange:o,error:a}){return l.jsxs(l.Fragment,{children:[l.jsx(i.FormControlLabel,{name:e.id,control:l.jsx(i.Checkbox,{checked:!!r,onChange:n=>o(n.target.checked),disabled:e.disabled}),label:e.label}),a&&l.jsx(i.FormHelperText,{children:a})]})}const Y=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{fullWidth:!0,options:e.options||[],value:r||null,onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,required:e.required,disabled:e.disabled,error:!!a,helperText:a})}),W=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{multiple:!0,fullWidth:!0,options:e.options||[],value:r||[],onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,required:e.required,disabled:e.disabled,error:!!a,helperText:a})}),M=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:e.label,placeholder:e.placeholder,value:r||"",onChange:n=>o(n.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),V=({field:e,value:r,onChange:o,error:a})=>l.jsxs(i.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(i.FormLabel,{component:"legend",children:[e.label,e.validations?.required?" *":""]}),l.jsx(i.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:n=>o(n.target.value),children:(e.options||[]).map(n=>l.jsx(i.FormControlLabel,{value:n,control:l.jsx(i.Radio,{}),label:n,disabled:e.disabled},n))}),a&&l.jsx(i.FormHelperText,{children:a})]}),oe=({field:e,value:r,onChange:o,error:a})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(q,{field:e,value:r,onChange:o,error:a});case"select":return l.jsx(D,{field:e,value:r,onChange:o,error:a});case"autocomplete":return l.jsx(Y,{field:e,value:r,onChange:o,error:a});case"multi-autocomplete":return l.jsx(W,{field:e,value:r,onChange:o,error:a});case"checkbox":return l.jsx(z,{field:e,value:r,onChange:o,error:a});case"textarea":return l.jsx(M,{field:e,value:r,onChange:o,error:a});case"radio":return l.jsx(V,{field:e,value:r,onChange:o,error:a});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},B=({field:e,value:r,onChange:o,error:a,renderers:n={}})=>{const s=n[e.type]||oe;return l.jsx(s,{field:e,value:r,onChange:o,error:a})};function se(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const U=({section:e,values:r,onChange:o,renderers:a,validateField:n})=>l.jsxs(i.Box,{mb:2,children:[e.heading&&l.jsx(i.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:e.heading}),e.description&&l.jsx(i.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:e.description}),l.jsx(i.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(i.Grid,{size:se(s.layout?.
|
|
6
|
+
<%s key={someKey} {...props} />`,p,b,g,b),te[b+p]=!0)}if(b=null,c!==void 0&&(o(c),b=""+c),m(u)&&(o(u.key),b=""+u.key),"key"in u){c={};for(var $ in u)$!=="key"&&(c[$]=u[$])}else c=u;return b&&h(c,typeof t=="function"?t.displayName||t.name||"Unknown":t),R(t,b,c,n(),k,P)}function _(t){v(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===w&&(t._payload.status==="fulfilled"?v(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function v(t){return typeof t=="object"&&t!==null&&t.$$typeof===H}var S=f,H=Symbol.for("react.transitional.element"),ie=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),ce=Symbol.for("react.strict_mode"),de=Symbol.for("react.profiler"),me=Symbol.for("react.consumer"),pe=Symbol.for("react.context"),be=Symbol.for("react.forward_ref"),he=Symbol.for("react.suspense"),fe=Symbol.for("react.suspense_list"),xe=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),ve=Symbol.for("react.activity"),ge=Symbol.for("react.client.reference"),O=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,Ee=Array.isArray,C=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(t){return t()}};var Z,Q={},K=S.react_stack_bottom_frame.bind(S,s)(),ee=C(a(s)),te={};T.Fragment=F,T.jsx=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!1,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)},T.jsxs=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!0,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)}})()),T}var N;function ae(){return N||(N=1,process.env.NODE_ENV==="production"?j.exports=re():j.exports=ne()),j.exports}var l=ae();function D({field:e,value:r,onChange:o,error:a}){return l.jsxs(i.FormControl,{fullWidth:!0,children:[l.jsx(i.InputLabel,{id:`${e.id}-label`,children:e.label}),l.jsx(i.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:n=>o(n.target.value),label:e.label,error:!!a,children:e.options?.map(n=>l.jsx(i.MenuItem,{value:n,children:n},n))}),a&&l.jsx(i.Typography,{variant:"caption",color:"error",children:a})]})}function q({field:e,value:r,onChange:o,error:a}){return console.log("error",a),l.jsx(i.TextField,{fullWidth:!0,label:e.label,placeholder:e.placeholder,value:r||"",name:e.id,onChange:n=>o(n.target.value),required:e.required,disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function z({field:e,value:r,onChange:o,error:a}){return l.jsxs(l.Fragment,{children:[l.jsx(i.FormControlLabel,{name:e.id,control:l.jsx(i.Checkbox,{checked:!!r,onChange:n=>o(n.target.checked),disabled:e.disabled}),label:e.label}),a&&l.jsx(i.FormHelperText,{children:a})]})}const Y=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{fullWidth:!0,options:e.options||[],value:r||null,onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,required:e.required,disabled:e.disabled,error:!!a,helperText:a})}),W=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{multiple:!0,fullWidth:!0,options:e.options||[],value:r||[],onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,required:e.required,disabled:e.disabled,error:!!a,helperText:a})}),M=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:e.label,placeholder:e.placeholder,value:r||"",onChange:n=>o(n.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),V=({field:e,value:r,onChange:o,error:a})=>l.jsxs(i.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(i.FormLabel,{component:"legend",children:[e.label,e.validations?.required?" *":""]}),l.jsx(i.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:n=>o(n.target.value),children:(e.options||[]).map(n=>l.jsx(i.FormControlLabel,{value:n,control:l.jsx(i.Radio,{}),label:n,disabled:e.disabled},n))}),a&&l.jsx(i.FormHelperText,{children:a})]}),oe=({field:e,value:r,onChange:o,error:a})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(q,{field:e,value:r,onChange:o,error:a});case"select":return l.jsx(D,{field:e,value:r,onChange:o,error:a});case"autocomplete":return l.jsx(Y,{field:e,value:r,onChange:o,error:a});case"multi-autocomplete":return l.jsx(W,{field:e,value:r,onChange:o,error:a});case"checkbox":return l.jsx(z,{field:e,value:r,onChange:o,error:a});case"textarea":return l.jsx(M,{field:e,value:r,onChange:o,error:a});case"radio":return l.jsx(V,{field:e,value:r,onChange:o,error:a});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},B=({field:e,value:r,onChange:o,error:a,renderers:n={}})=>{const s=n[e.type]||oe;return l.jsx(s,{field:e,value:r,onChange:o,error:a})};function se(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const U=({section:e,values:r,onChange:o,renderers:a,validateField:n})=>l.jsxs(i.Box,{mb:2,children:[e.heading&&l.jsx(i.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:e.heading}),e.description&&l.jsx(i.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:e.description}),l.jsx(i.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(i.Grid,{size:se(s.layout?.cols),children:l.jsx(B,{field:s,value:r[s.id],onChange:m=>o(s.id,m),renderers:a,error:n(s.id)?.join(",")})},s.id))})]}),le={required:(e,r)=>e.required&&(r==null||r==="")?`${e.label} is required`:null,min:(e,r)=>e.type==="number"&&e.min!==void 0&&r<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,r)=>e.type==="number"&&e.max!==void 0&&r>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,r)=>typeof r=="string"&&e.minLength!==void 0&&r.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,r)=>typeof r=="string"&&e.maxLength!==void 0&&r.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,r)=>e.pattern&&typeof r=="string"&&!e.pattern.test(r)?`${e.label} is invalid`:null,options:(e,r)=>e.type==="select"&&e.options&&!e.options.includes(r)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,r)=>{if(e.type==="date"&&r){const o=new Date(r);if(e.minDate&&o<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&o>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,r)=>{if(e.customValidator&&typeof e.customValidator=="function"){const o=e.customValidator(r);if(typeof o=="string")return o}return null}},G=(e,r)=>{const o={};return e.sections.forEach(a=>{a.fields.forEach(n=>{const s=A(e,r,n.id);s.length>0&&(o[n.id]=s)})}),o},A=(e,r,o)=>{const a=e.sections.flatMap(h=>h.fields).find(h=>h.id===o);if(!a)return[];const n=a.validations||{},s=r[o],m=[];if(n.required&&(s==null||s==="")&&m.push(typeof n.required=="string"?n.required:`${a.label} is required`),n.min!==void 0&&typeof s=="number"&&s<n.min&&m.push(`${a.label} must be at least ${n.min}`),n.max!==void 0&&typeof s=="number"&&s>n.max&&m.push(`${a.label} must be at most ${n.max}`),n.minLength!==void 0&&typeof s=="string"&&s.length<n.minLength&&m.push(`${a.label} must be at least ${n.minLength} characters`),n.maxLength!==void 0&&typeof s=="string"&&s.length>n.maxLength&&m.push(`${a.label} must be at most ${n.maxLength} characters`),n.pattern&&typeof s=="string"&&!n.pattern.test(s)&&m.push(`${a.label} is invalid`),n.validate){const h=n.validate(s);h&&m.push(h)}return m};function J(e){const[r,o]=f.useState({}),[a,n]=f.useState({});return{values:r,handleChange:(x,_)=>{o(v=>({...v,[x]:_})),n(v=>({...v,[x]:null}))},validateAll:()=>G(e,r),getValues:()=>r,getErrors:()=>a,validateField:x=>A(e,r,x)}}const ue=f.forwardRef(({dto:e,renderers:r},o)=>{const{values:a,handleChange:n,getValues:s,getErrors:m,validateAll:h,validateField:y}=J(e);return f.useImperativeHandle(o,()=>({getValues:s,getErrors:m,validateAll:h,validateField:y})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(i.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:e.title}),e.description&&l.jsx(i.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:e.description}),e.sections.map(R=>l.jsx(U,{section:R,values:a,onChange:n,renderers:r,validateField:y},R.id))]})});d.AutoCompleteField=Y,d.CheckBoxInput=z,d.Field=B,d.FormBuilder=ue,d.MultiAutoCompleteField=W,d.RadioInput=V,d.Section=U,d.SelectInput=D,d.TextAreaInput=M,d.TextInput=q,d.useFormBuilder=J,d.validateAll=G,d.validateField=A,d.validationRules=le,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FormBuilderHandle } from '../components/FormBuilder';
|
|
3
|
+
import { FormDTO } from '../types';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.ForwardRefExoticComponent<{
|
|
7
|
+
dto: FormDTO;
|
|
8
|
+
renderers?: Record<string, React.ComponentType<any>>;
|
|
9
|
+
} & React.RefAttributes<FormBuilderHandle>>;
|
|
10
|
+
argTypes: {
|
|
11
|
+
dto: {
|
|
12
|
+
control: string;
|
|
13
|
+
description: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
export default _default;
|
|
18
|
+
export declare const EditableDTO: {
|
|
19
|
+
(args: {
|
|
20
|
+
dto: FormDTO;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
args: {
|
|
23
|
+
dto: FormDTO;
|
|
24
|
+
};
|
|
25
|
+
};
|
package/dist/types/dto.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type LayoutDTO = {
|
|
2
|
-
|
|
2
|
+
cols?: number;
|
|
3
3
|
gap?: string;
|
|
4
4
|
direction?: "row" | "column";
|
|
5
5
|
align?: "start" | "center" | "end" | "stretch";
|
|
@@ -12,14 +12,10 @@ export type FieldDTO = {
|
|
|
12
12
|
label: string;
|
|
13
13
|
placeholder?: string;
|
|
14
14
|
options?: string[];
|
|
15
|
-
required?: boolean;
|
|
16
15
|
rows?: number;
|
|
17
16
|
disabled?: boolean;
|
|
18
17
|
defaultValue?: any;
|
|
19
|
-
layout?:
|
|
20
|
-
col?: number;
|
|
21
|
-
direction?: "row" | "column";
|
|
22
|
-
};
|
|
18
|
+
layout?: LayoutDTO;
|
|
23
19
|
validations?: Validations;
|
|
24
20
|
};
|
|
25
21
|
export type SectionDTO = {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-form-dto",
|
|
3
3
|
"description": "A React library for building forms using DTOs with MUI and TypeScript.",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"main": "dist/react-form-dto.umd.js",
|
|
6
6
|
"module": "dist/react-form-dto.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -15,24 +15,26 @@
|
|
|
15
15
|
"preview": "vite preview",
|
|
16
16
|
"docs:dev": "vitepress dev docs",
|
|
17
17
|
"docs:build": "vitepress build docs",
|
|
18
|
-
"docs:preview": "vitepress preview docs"
|
|
18
|
+
"docs:preview": "vitepress preview docs",
|
|
19
|
+
"storybook": "storybook dev -p 6006",
|
|
20
|
+
"build-storybook": "storybook build"
|
|
19
21
|
},
|
|
20
22
|
"peerDependencies": {
|
|
23
|
+
"@mui/material": ">=7",
|
|
21
24
|
"react": ">=17",
|
|
22
|
-
"react-dom": ">=17"
|
|
23
|
-
"@mui/material": ">=7"
|
|
25
|
+
"react-dom": ">=17"
|
|
24
26
|
},
|
|
25
27
|
"devDependencies": {
|
|
28
|
+
"@types/node": "^24.10.1",
|
|
29
|
+
"@types/react": "^19.2.7",
|
|
30
|
+
"@types/react-dom": "^19.2.3",
|
|
26
31
|
"@vitejs/plugin-react": "^5.1.1",
|
|
27
|
-
"vite": "^7.2.4",
|
|
28
|
-
"vite-plugin-dts": "^4.5.4",
|
|
29
|
-
"typescript": "~5.9.3",
|
|
30
|
-
"vitepress": "^1.6.4",
|
|
31
32
|
"eslint": "^9.39.1",
|
|
33
|
+
"typescript": "~5.9.3",
|
|
32
34
|
"typescript-eslint": "^8.46.4",
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
35
|
+
"vite": "^7.2.4",
|
|
36
|
+
"vite-plugin-dts": "^4.5.4",
|
|
37
|
+
"vitepress": "^1.6.4"
|
|
36
38
|
},
|
|
37
39
|
"repository": {
|
|
38
40
|
"type": "git",
|
|
@@ -48,5 +50,12 @@
|
|
|
48
50
|
"library"
|
|
49
51
|
],
|
|
50
52
|
"author": "Shakir Ullah",
|
|
51
|
-
"license": "MIT"
|
|
53
|
+
"license": "MIT",
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"@emotion/react": "^11.14.0",
|
|
56
|
+
"@emotion/styled": "^11.14.1",
|
|
57
|
+
"@storybook/react": "^10.1.4",
|
|
58
|
+
"@storybook/react-vite": "^10.1.4",
|
|
59
|
+
"storybook": "^10.1.4"
|
|
60
|
+
}
|
|
52
61
|
}
|