@kbgarcia8/react-dynamic-form 1.0.0 → 1.0.1

package/dist/react-dynamic-form.cjs.js

@@ -168,4 +168,4 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:u=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:L,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),"//* For editable data e.g. address entry, education entry",x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),"//*For editable data e.g. address entry, education entry",a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:u,cancelText:D,handleCancel:L,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},ue={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},R={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),fe=({children:n})=>{const[o,l]=v.useState(R),s=()=>{l(r=>r===R?K:R)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=fe;exports.breakpoints=ue;exports.darkTheme=K;exports.lightTheme=R;exports.useTheme=ge;
+`,xe=({fieldsets:n=null,legendText:o,isExpandable:l=!1,id:s,formInputs:r,labelAndInputContainerClass:h,labelClass:d,inputClass:i,handleEditableInputEntryChange:b,handleAddingInputEntry:g,hasSubmit:y=!1,hasCancel:u=!1,hasDelete:p=!1,hasEdit:C=!1,submitText:j,handleSubmitForm:w,handleSubmit:T,cancelText:D,handleCancel:L,deleteText:B,handleDelete:S,editText:q,handleEdit:k,className:F,children:A})=>e.jsxs(me,{id:`${s}-form`,className:F,onSubmit:w,children:[n?n.map((a,$)=>e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset-${$}`,className:"form-fieldset",children:[a.legend&&e.jsx(M,{children:a.legend}),a.inputs.length!==0?a.inputs.map((x,N)=>e.jsxs(v.Fragment,{children:[x.type==="textarea"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),(x.type==="radio"||x.type==="checkbox")&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.type!=="textarea"&&x.type!=="radio"&&x.type!=="checkbox"&&e.jsx(E,{...x,id:x.id??`${a.legend}-input`,labelClass:d,inputClass:i,idx:N}),x.editable&&x.editing&&e.jsx(I,{legend:`${a.legend} ${N+1}`,idx:N,editableInformation:x?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:x?.onClickSave,onClickCancelEdit:x?.onClickCancel,onClickDeleteEntry:x?.onClickDelete})]},`form-${s}-${N}`)):a.expandable?e.jsx(G,{children:`No entry yet on ${a.legend}. Click "+" button to add entry.`}):""]}),a.expandable&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${a.legend}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]},`${a.legend}-${$}`)):e.jsxs(H,{children:[e.jsxs(U,{id:`${s}-form-fieldset`,className:"form-fieldset",children:[o&&e.jsx(M,{children:o}),r.length!==0?r.map((a,$)=>e.jsxs(v.Fragment,{children:[a.type==="textarea"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),(a.type==="radio"||a.type==="checkbox")&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.type!=="textarea"&&a.type!=="radio"&&a.type!=="checkbox"&&e.jsx(E,{...a,id:a.id??`${o}-input`,labelClass:d,inputClass:i,idx:$}),a.editable&&a.editing&&e.jsx(I,{legend:`${o} ${$+1}`,idx:$,editableInformation:a?.editableInformation,onChangeOfEditableOption:b,onClickSaveEdit:a?.onClickSave,onClickCancelEdit:a?.onClickEdit,onClickDeleteEntry:a?.onClickDelete})]},`form-${s}-${$}`)):l?e.jsx(G,{children:`No entry yet on ${o}. Please click "+" button to add`}):""]}),l&&e.jsx(J,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${o}-inputs`,buttonType:"button",text:"+",onClick:g,className:"add-input-entry"})})]}),e.jsx(de,{id:s,hasSubmit:y,submitText:j,handleSubmit:T,hasEdit:C,editText:q,handleEdit:k,hasCancel:u,cancelText:D,handleCancel:L,hasDelete:p,deleteText:B,handleDelete:S}),e.jsx(be,{className:"children-container",children:A})]}),he=n=>{const o=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return o.test(n)||l.test(n)||CSS.supports("color",n)},m=n=>{if(!he(n))throw new Error(`Invalid color: ${n}`);return n},ue={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},R={name:"light",colors:{text:m("#333446"),bg:m("#EEEEEE"),blue:m("#7F8CAA"),blue2:m("#80A6FF"),teal:m("#5b8280ff"),teal2:m("#AEEAE7"),gray:m("#AEAEAE"),information:m("#202234"),success:m("#123524"),warning:m("#F2C265"),error:m("#990000")}},K={name:"dark",colors:{bg:m("#333446"),text:m("#EEEEEE"),blue:m("#80A6FF"),blue2:m("#7F8CAA"),teal:m("#AEEAE7"),teal2:m("#5b8280ff"),gray:m("#D0D0DD"),information:m("#C9E6F0"),success:m("#9EDF9C"),warning:m("#FCFFC1"),error:m("#FAD4D4")}},O=v.createContext(void 0),fe=({children:n})=>{const[o,l]=v.useState(R),s=()=>{l(r=>r===R?K:R)};return e.jsx(O.Provider,{value:{currentTheme:o,toggleTheme:s},children:e.jsx(c.ThemeProvider,{theme:o,children:n})})},ge=()=>v.useContext(O);exports.DynamicForm=xe;exports.ThemeContext=O;exports.ThemeContextProvider=fe;exports.breakpoints=ue;exports.darkTheme=K;exports.lightTheme=R;exports.useTheme=ge;

package/dist/react-dynamic-form.es.js

@@ -179,7 +179,7 @@ const t = {
 `, j = V((n, o) => {
   const { type: i, id: l, onChange: r, isRequired: f, dataAttributes: d, disabled: s, className: b } = n;
   if (i === "textarea") {
-    const { rows: C = 5, cols: N = 30, value: T, ...S } = n;
+    const { rows: C = 5, cols: F = 30, value: T, ...S } = n;
     return /* @__PURE__ */ e(
       de,
       {
@@ -187,7 +187,7 @@ const t = {
         onChange: r,
         value: T,
         rows: C,
-        cols: N,
+        cols: F,
         ...d,
         className: b,
         ref: o,
@@ -197,7 +197,7 @@ const t = {
     );
   }
   if (i === "radio" || i === "checkbox") {
-    const { checked: C, ...N } = n;
+    const { checked: C, ...F } = n;
     return /* @__PURE__ */ e(
       q,
       {
@@ -212,7 +212,7 @@ const t = {
       }
     );
   }
-  const $ = n, { value: p, pattern: g, placeholderText: k, ...F } = $;
+  const $ = n, { value: p, pattern: g, placeholderText: k, ...N } = $;
   return /* @__PURE__ */ e(
     q,
     {
@@ -244,9 +244,9 @@ const t = {
     isRequired: p,
     dataAttributes: g,
     inputClass: k,
-    ref: F,
+    ref: N,
     disabled: C,
-    isEditable: N,
+    isEditable: F,
     editIcon: T,
     onClickEdit: S,
     deleteIcon: L,
@@ -271,7 +271,7 @@ const t = {
           cols: E,
           ...g,
           className: k,
-          ref: F,
+          ref: N,
           disabled: C
         }
       );
@@ -290,7 +290,7 @@ const t = {
           isRequired: p,
           ...g,
           className: k,
-          ref: F,
+          ref: N,
           disabled: C,
           pattern: D
         }
@@ -302,7 +302,7 @@ const t = {
         /* @__PURE__ */ e(
           j,
           {
-            ref: F,
+            ref: N,
             type: "checkbox",
             name: l,
             id: l,
@@ -318,7 +318,7 @@ const t = {
       ] });
     })(),
     "// * Radio inputs usually have labels next to them",
-    N && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
+    F && /* @__PURE__ */ u(le, { className: "input-edit-buttons", children: [
       /* @__PURE__ */ e(x, { id: `editable-${l}-edit-btn`, svg: T, buttonType: "button", onClick: S, className: `edit-radio-${z}`, dataAttributes: g }),
       /* @__PURE__ */ e(x, { id: `editable-${l}-delete-btn`, svg: L, buttonType: "button", onClick: R, className: `delete-radio-${z}`, dataAttributes: g })
     ] }),
@@ -439,7 +439,7 @@ const t = {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`, Fe = ({
+`, Ne = ({
   fieldsets: n = null,
   //* if a form has differrent fieldsets
   legendText: o,
@@ -458,9 +458,9 @@ const t = {
   hasSubmit: p = !1,
   hasCancel: g = !1,
   hasDelete: k = !1,
-  hasEdit: F = !1,
+  hasEdit: N = !1,
   submitText: C,
-  handleSubmitForm: N,
+  handleSubmitForm: F,
   handleSubmit: T,
   cancelText: S,
   handleCancel: L,
@@ -471,7 +471,7 @@ const t = {
   className: E,
   children: D
   //* if there are nodes to be inserted after submit/edit/cancel buttons usually in login or signup forms
-}) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: N, children: [
+}) => /* @__PURE__ */ u(xe, { id: `${l}-form`, className: E, onSubmit: F, children: [
   n ? n.map((a, y) => /* @__PURE__ */ u(H, { children: [
     /* @__PURE__ */ u(U, { id: `${l}-form-fieldset-${y}`, className: "form-fieldset", children: [
       a.legend && /* @__PURE__ */ e(M, { children: a.legend }),
@@ -506,7 +506,6 @@ const t = {
             idx: v
           }
         ),
-        "//* For editable data e.g. address entry, education entry",
         h.editable && h.editing && /* @__PURE__ */ e(
           I,
           {
@@ -556,7 +555,6 @@ const t = {
             idx: y
           }
         ),
-        "//*For editable data e.g. address entry, education entry",
         a.editable && a.editing && /* @__PURE__ */ e(
           I,
           {
@@ -580,7 +578,7 @@ const t = {
       hasSubmit: p,
       submitText: C,
       handleSubmit: T,
-      hasEdit: F,
+      hasEdit: N,
       editText: B,
       handleEdit: w,
       hasCancel: g,
@@ -598,7 +596,7 @@ const t = {
 }, m = (n) => {
   if (!ye(n)) throw new Error(`Invalid color: ${n}`);
   return n;
-}, Ne = {
+}, Fe = {
   mobile: "320px",
   //Small iPhone SE & Medium: iPhone 12-15
   tablet: "768px",
@@ -644,10 +642,10 @@ const t = {
   return /* @__PURE__ */ e(K.Provider, { value: { currentTheme: o, toggleTheme: l }, children: /* @__PURE__ */ e(_, { theme: o, children: n }) });
 }, ve = () => Z(K);
 export {
-  Fe as DynamicForm,
+  Ne as DynamicForm,
   K as ThemeContext,
   Ee as ThemeContextProvider,
-  Ne as breakpoints,
+  Fe as breakpoints,
   pe as darkTheme,
   O as lightTheme,
   ve as useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbgarcia8/react-dynamic-form",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A form that can be nested with editable, expandable and flexible input-forms",
   "keywords": [
     "form",