@arturton/react-form-constructor 0.1.5 → 0.2.0

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/dist/index.js CHANGED
@@ -53,10 +53,326 @@ __export(index_exports, {
53
53
  module.exports = __toCommonJS(index_exports);
54
54
 
55
55
  // src/JsonMethod/FormLayout.tsx
56
- var import_react_hook_form2 = require("react-hook-form");
56
+ var import_react_hook_form = require("react-hook-form");
57
+ var import_react_number_format = require("react-number-format");
58
+ var import_jsx_runtime = require("react/jsx-runtime");
59
+ function FieldRenderer({
60
+ field,
61
+ register,
62
+ control,
63
+ errors,
64
+ globalClasses
65
+ }) {
66
+ const fieldName = String(field.key);
67
+ const error = errors[fieldName];
68
+ const errorMessage = error?.message;
69
+ const hasError = !!error;
70
+ const labelFieldClassName = field.labelClass || globalClasses.label;
71
+ const inputFieldClassName = `${field.inputClass || globalClasses.input || ""} ${hasError ? field.classNameError || "" : ""}`.trim();
72
+ const errorFieldClassName = field.errorClass || globalClasses.error;
73
+ if (field.render) {
74
+ return field.render({
75
+ register,
76
+ control,
77
+ errors,
78
+ field
79
+ });
80
+ }
81
+ const renderField = () => {
82
+ switch (field.type) {
83
+ // Text inputs
84
+ case "text":
85
+ case "email":
86
+ case "password":
87
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
88
+ "input",
89
+ {
90
+ ...register(fieldName, {
91
+ required: field.required,
92
+ minLength: field.minLength,
93
+ maxLength: field.maxLength,
94
+ pattern: field.pattern,
95
+ validate: field.validate
96
+ }),
97
+ type: field.type,
98
+ placeholder: field.placeholder,
99
+ className: inputFieldClassName,
100
+ disabled: field.disabled
101
+ }
102
+ );
103
+ // Number input
104
+ case "number":
105
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
106
+ "input",
107
+ {
108
+ ...register(fieldName, {
109
+ required: field.required,
110
+ minLength: field.minLength,
111
+ maxLength: field.maxLength,
112
+ validate: field.validate
113
+ }),
114
+ type: "number",
115
+ min: field.min,
116
+ max: field.max,
117
+ step: field.step || 1,
118
+ placeholder: field.placeholder,
119
+ className: inputFieldClassName,
120
+ disabled: field.disabled
121
+ }
122
+ );
123
+ // Date input
124
+ case "date":
125
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
126
+ "input",
127
+ {
128
+ ...register(fieldName, {
129
+ required: field.required,
130
+ validate: field.validate
131
+ }),
132
+ type: "date",
133
+ className: inputFieldClassName,
134
+ disabled: field.disabled
135
+ }
136
+ );
137
+ // Textarea
138
+ case "textarea":
139
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
140
+ "textarea",
141
+ {
142
+ ...register(fieldName, {
143
+ required: field.required,
144
+ minLength: field.minLength,
145
+ maxLength: field.maxLength,
146
+ validate: field.validate
147
+ }),
148
+ placeholder: field.placeholder,
149
+ className: inputFieldClassName,
150
+ disabled: field.disabled,
151
+ rows: field.rows || 4
152
+ }
153
+ );
154
+ // Select
155
+ case "select":
156
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
157
+ "select",
158
+ {
159
+ ...register(fieldName, {
160
+ required: field.required,
161
+ validate: field.validate
162
+ }),
163
+ className: inputFieldClassName,
164
+ disabled: field.disabled,
165
+ multiple: field.multiple,
166
+ children: [
167
+ field.placeholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: field.placeholder }),
168
+ field.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
169
+ ]
170
+ }
171
+ );
172
+ // Masked input
173
+ case "mask":
174
+ return field.maska ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
175
+ import_react_hook_form.Controller,
176
+ {
177
+ name: fieldName,
178
+ control,
179
+ rules: {
180
+ required: field.maska.required || field.required,
181
+ minLength: field.minLength,
182
+ maxLength: field.maxLength,
183
+ validate: field.validate
184
+ },
185
+ render: ({ field: fieldProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
186
+ import_react_number_format.PatternFormat,
187
+ {
188
+ ...fieldProps,
189
+ format: field.maska.format,
190
+ mask: field.maska.mask,
191
+ placeholder: field.placeholder,
192
+ className: inputFieldClassName,
193
+ disabled: field.disabled
194
+ }
195
+ )
196
+ }
197
+ ) : null;
198
+ // File input
199
+ case "file":
200
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
201
+ "input",
202
+ {
203
+ ...register(fieldName, {
204
+ required: field.required,
205
+ validate: field.validate
206
+ }),
207
+ type: "file",
208
+ accept: field.accept,
209
+ className: inputFieldClassName,
210
+ disabled: field.disabled,
211
+ multiple: field.multiple
212
+ }
213
+ );
214
+ // Checkbox
215
+ case "checkbox":
216
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: field.containerClass, children: [
217
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
218
+ "input",
219
+ {
220
+ ...register(fieldName, {
221
+ required: field.required,
222
+ validate: field.validate
223
+ }),
224
+ type: "checkbox",
225
+ id: fieldName,
226
+ className: inputFieldClassName,
227
+ disabled: field.disabled,
228
+ defaultChecked: field.defaultChecked
229
+ }
230
+ ),
231
+ field.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: fieldName, className: labelFieldClassName, children: field.label })
232
+ ] });
233
+ // Radio buttons
234
+ case "radio":
235
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: field.containerClass, children: field.radioOptions?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: labelFieldClassName, children: [
236
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
237
+ "input",
238
+ {
239
+ ...register(fieldName, {
240
+ required: field.required,
241
+ validate: field.validate
242
+ }),
243
+ type: "radio",
244
+ value: option.value,
245
+ className: inputFieldClassName,
246
+ disabled: field.disabled,
247
+ defaultChecked: field.defaultChecked
248
+ }
249
+ ),
250
+ option.label
251
+ ] }, option.value)) });
252
+ // Range/Slider
253
+ case "range":
254
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: field.containerClass, children: [
255
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
256
+ "input",
257
+ {
258
+ ...register(fieldName, {
259
+ required: field.required,
260
+ validate: field.validate
261
+ }),
262
+ type: "range",
263
+ min: field.min || 0,
264
+ max: field.max || 100,
265
+ step: field.step || 1,
266
+ className: inputFieldClassName,
267
+ disabled: field.disabled
268
+ }
269
+ ),
270
+ field.showValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: errors[fieldName]?.message || "Value" })
271
+ ] });
272
+ default:
273
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
274
+ "input",
275
+ {
276
+ ...register(fieldName, {
277
+ required: field.required,
278
+ minLength: field.minLength,
279
+ maxLength: field.maxLength,
280
+ pattern: field.pattern,
281
+ validate: field.validate
282
+ }),
283
+ type: "text",
284
+ placeholder: field.placeholder,
285
+ className: inputFieldClassName,
286
+ disabled: field.disabled
287
+ }
288
+ );
289
+ }
290
+ };
291
+ return renderField();
292
+ }
293
+ function FormLayout({
294
+ formData,
295
+ funSubmit,
296
+ defaultValues,
297
+ onError,
298
+ formClass,
299
+ containerClass,
300
+ buttonClass,
301
+ buttonName = "Submit",
302
+ labelClass,
303
+ inputClass,
304
+ errorClass,
305
+ submitButtonProps,
306
+ disabledOnError = false
307
+ }) {
308
+ const {
309
+ register,
310
+ handleSubmit,
311
+ control,
312
+ formState: { errors }
313
+ } = (0, import_react_hook_form.useForm)({
314
+ mode: "onChange",
315
+ defaultValues
316
+ });
317
+ const onSubmit = (data) => {
318
+ funSubmit(data);
319
+ };
320
+ const onSubmitError = (formErrors) => {
321
+ onError?.(formErrors);
322
+ };
323
+ const globalClasses = {
324
+ label: labelClass,
325
+ input: inputClass,
326
+ error: errorClass
327
+ };
328
+ const hasErrors = Object.keys(errors).length > 0;
329
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
330
+ "form",
331
+ {
332
+ onSubmit: handleSubmit(onSubmit, onSubmitError),
333
+ className: formClass,
334
+ children: [
335
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: containerClass, children: formData.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: field.containerClass, children: [
336
+ field.type !== "checkbox" && field.label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
337
+ "label",
338
+ {
339
+ htmlFor: String(field.key),
340
+ className: field.labelClass || globalClasses.label,
341
+ children: [
342
+ field.label,
343
+ field.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-red-500", children: "*" })
344
+ ]
345
+ }
346
+ ),
347
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
348
+ FieldRenderer,
349
+ {
350
+ field,
351
+ register,
352
+ control,
353
+ errors,
354
+ globalClasses
355
+ }
356
+ ),
357
+ errors[String(field.key)] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: field.errorClass || globalClasses.error, children: errors[String(field.key)]?.message })
358
+ ] }, String(field.key))) }),
359
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
360
+ "button",
361
+ {
362
+ type: "submit",
363
+ className: buttonClass,
364
+ disabled: disabledOnError && hasErrors,
365
+ ...submitButtonProps,
366
+ children: buttonName
367
+ }
368
+ )
369
+ ]
370
+ }
371
+ );
372
+ }
57
373
 
58
374
  // src/InputForm/layouts/mainLayout.tsx
59
- var import_jsx_runtime = require("react/jsx-runtime");
375
+ var import_jsx_runtime2 = require("react/jsx-runtime");
60
376
  function MainLayout({
61
377
  children,
62
378
  label,
@@ -66,22 +382,22 @@ function MainLayout({
66
382
  labelClass,
67
383
  errorClass
68
384
  }) {
69
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
70
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: labelClass, children: [
385
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
386
+ label && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: labelClass, children: [
71
387
  label,
72
388
  " ",
73
- required ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "*" }) : null
389
+ required ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "*" }) : null
74
390
  ] }),
75
391
  children,
76
- error?.[name] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: errorClass, children: error?.[name]?.message })
392
+ error?.[name] && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: errorClass, children: error?.[name]?.message })
77
393
  ] });
78
394
  }
79
395
  var mainLayout_default = MainLayout;
80
396
 
81
397
  // src/InputForm/components/MaskedField.tsx
82
- var import_react_hook_form = require("react-hook-form");
83
- var import_react_number_format = require("react-number-format");
84
- var import_jsx_runtime2 = require("react/jsx-runtime");
398
+ var import_react_hook_form2 = require("react-hook-form");
399
+ var import_react_number_format2 = require("react-number-format");
400
+ var import_jsx_runtime3 = require("react/jsx-runtime");
85
401
  function MaskedField({
86
402
  placeholder,
87
403
  name,
@@ -89,14 +405,14 @@ function MaskedField({
89
405
  maska,
90
406
  inputClass
91
407
  }) {
92
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
93
- import_react_hook_form.Controller,
408
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
409
+ import_react_hook_form2.Controller,
94
410
  {
95
411
  name: name || "",
96
412
  control,
97
413
  rules: { required: maska.required },
98
- render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
99
- import_react_number_format.PatternFormat,
414
+ render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
415
+ import_react_number_format2.PatternFormat,
100
416
  {
101
417
  ...field,
102
418
  format: maska.format,
@@ -111,7 +427,7 @@ function MaskedField({
111
427
  var MaskedField_default = MaskedField;
112
428
 
113
429
  // src/InputForm/components/InputField.tsx
114
- var import_jsx_runtime3 = require("react/jsx-runtime");
430
+ var import_jsx_runtime4 = require("react/jsx-runtime");
115
431
  function InputField({
116
432
  register,
117
433
  type,
@@ -119,7 +435,7 @@ function InputField({
119
435
  inputClass,
120
436
  name
121
437
  }) {
122
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
438
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
123
439
  "input",
124
440
  {
125
441
  id: name,
@@ -133,7 +449,7 @@ function InputField({
133
449
  var InputField_default = InputField;
134
450
 
135
451
  // src/InputForm/InputForm.tsx
136
- var import_jsx_runtime4 = require("react/jsx-runtime");
452
+ var import_jsx_runtime5 = require("react/jsx-runtime");
137
453
  function InputForm({
138
454
  register,
139
455
  type,
@@ -150,7 +466,7 @@ function InputForm({
150
466
  }) {
151
467
  const renderChildren = () => {
152
468
  if (maska) {
153
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
469
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
154
470
  MaskedField_default,
155
471
  {
156
472
  name,
@@ -161,7 +477,7 @@ function InputForm({
161
477
  }
162
478
  );
163
479
  } else {
164
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
480
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
165
481
  InputField_default,
166
482
  {
167
483
  name,
@@ -173,7 +489,7 @@ function InputForm({
173
489
  );
174
490
  }
175
491
  };
176
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
492
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
177
493
  mainLayout_default,
178
494
  {
179
495
  label,
@@ -188,53 +504,6 @@ function InputForm({
188
504
  }
189
505
  var InputForm_default = InputForm;
190
506
 
191
- // src/JsonMethod/FormLayout.tsx
192
- var import_jsx_runtime5 = require("react/jsx-runtime");
193
- function FormLayout({
194
- formData,
195
- funSubmit,
196
- formClass,
197
- buttonClass,
198
- buttonName
199
- }) {
200
- const {
201
- control,
202
- register,
203
- handleSubmit,
204
- formState: { errors }
205
- } = (0, import_react_hook_form2.useForm)();
206
- const onSubmit = (data) => {
207
- funSubmit(data);
208
- };
209
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit(onSubmit), className: formClass, children: [
210
- formData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
211
- InputForm_default,
212
- {
213
- type: item.type,
214
- placeholder: item.placeholder,
215
- error: errors,
216
- name: String(item.key),
217
- label: item.label,
218
- control,
219
- maska: item.maska,
220
- register: register(item.key, {
221
- required: item.required,
222
- minLength: item.minLength,
223
- maxLength: item.maxLength,
224
- pattern: item.pattern,
225
- validate: item.validate
226
- }),
227
- required: item.required,
228
- inputClass: item.inputClass,
229
- errorClass: item.errorClass,
230
- labelClass: item.labelClass
231
- },
232
- String(item.key)
233
- )),
234
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: buttonClass, children: buttonName || "Submit" })
235
- ] });
236
- }
237
-
238
507
  // src/ProviderMethod/layouts/FormProvider.tsx
239
508
  var import_react_hook_form3 = require("react-hook-form");
240
509
 
@@ -484,7 +753,7 @@ var FormTextarea_default = FormTextarea;
484
753
 
485
754
  // src/ProviderMethod/components/FormMaskedInput.tsx
486
755
  var import_react_hook_form4 = require("react-hook-form");
487
- var import_react_number_format2 = require("react-number-format");
756
+ var import_react_number_format3 = require("react-number-format");
488
757
  var import_jsx_runtime11 = require("react/jsx-runtime");
489
758
  function FormMaskedInput({
490
759
  placeholder,
@@ -510,7 +779,7 @@ function FormMaskedInput({
510
779
  validate
511
780
  },
512
781
  render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
513
- import_react_number_format2.PatternFormat,
782
+ import_react_number_format3.PatternFormat,
514
783
  {
515
784
  ...field,
516
785
  format: maska.format,