tee3apps-cms-sdk-react 0.0.8 → 0.0.9
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 +258 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -67,6 +67,59 @@ function App() {
|
|
|
67
67
|
export default App;
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
+
## 📝 Using PageForm Component
|
|
71
|
+
|
|
72
|
+
The `PageForm` component allows you to render dynamic forms based on JSON data. It includes built-in validation, form state management, and toast notifications.
|
|
73
|
+
|
|
74
|
+
### Basic PageForm Usage
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import React, { useState, useEffect } from 'react';
|
|
78
|
+
import { PageForm } from 'tee3apps-cms-sdk-react';
|
|
79
|
+
|
|
80
|
+
function FormPage() {
|
|
81
|
+
const [formData, setFormData] = useState(null);
|
|
82
|
+
const [loading, setLoading] = useState(true);
|
|
83
|
+
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
const fetchFormData = async () => {
|
|
86
|
+
try {
|
|
87
|
+
const response = await fetch('/api/form-data');
|
|
88
|
+
const data = await response.json();
|
|
89
|
+
const formElements = data?.data?.formElements;
|
|
90
|
+
|
|
91
|
+
setFormData(formElements);
|
|
92
|
+
} catch (error) {
|
|
93
|
+
console.error('Error fetching form data:', error);
|
|
94
|
+
} finally {
|
|
95
|
+
setLoading(false);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
fetchFormData();
|
|
100
|
+
}, []);
|
|
101
|
+
|
|
102
|
+
const handleFormSubmit = (formValues) => {
|
|
103
|
+
console.log('Form submitted with values:', formValues);
|
|
104
|
+
// Handle form submission (e.g., send to API)
|
|
105
|
+
// Form values are automatically transformed to use field names instead of codes
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
if (loading) return <div>Loading...</div>;
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<div className="form-page">
|
|
112
|
+
<PageForm
|
|
113
|
+
jsonData={formData}
|
|
114
|
+
onSubmit={handleFormSubmit}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export default FormPage;
|
|
121
|
+
```
|
|
122
|
+
|
|
70
123
|
## 📊 Data Structure
|
|
71
124
|
|
|
72
125
|
The package expects your `pageElements` data to follow this structure:
|
|
@@ -239,7 +292,211 @@ The package expects your `pageElements` data to follow this structure:
|
|
|
239
292
|
]
|
|
240
293
|
```
|
|
241
294
|
|
|
295
|
+
## 📋 PageForm Component Data Structure
|
|
242
296
|
|
|
297
|
+
The `PageForm` component expects the same structure as `Page`, but with form-specific components. Here's an example with form fields:
|
|
298
|
+
|
|
299
|
+
```json
|
|
300
|
+
[
|
|
301
|
+
{
|
|
302
|
+
"name": "Row",
|
|
303
|
+
"props": {
|
|
304
|
+
"minHeight": "auto",
|
|
305
|
+
"bgColor": "#ffffff",
|
|
306
|
+
"bgImage": "",
|
|
307
|
+
"align": "initial",
|
|
308
|
+
"justify": "flex-start",
|
|
309
|
+
"nowrap": false,
|
|
310
|
+
"bgsize": "cover",
|
|
311
|
+
"mode": {
|
|
312
|
+
"web": {
|
|
313
|
+
"isScroll": false,
|
|
314
|
+
"isVisible": true,
|
|
315
|
+
"top": "0px",
|
|
316
|
+
"bottom": "0px",
|
|
317
|
+
"flexView": true
|
|
318
|
+
},
|
|
319
|
+
"mobileweb": {
|
|
320
|
+
"isScroll": false,
|
|
321
|
+
"isVisible": true,
|
|
322
|
+
"top": "0px",
|
|
323
|
+
"bottom": "0px",
|
|
324
|
+
"flexView": true
|
|
325
|
+
},
|
|
326
|
+
"mobileapp": {
|
|
327
|
+
"isScroll": false,
|
|
328
|
+
"isVisible": true,
|
|
329
|
+
"top": "0px",
|
|
330
|
+
"bottom": "0px",
|
|
331
|
+
"flexView": true
|
|
332
|
+
},
|
|
333
|
+
"tablet": {
|
|
334
|
+
"isScroll": false,
|
|
335
|
+
"isVisible": true,
|
|
336
|
+
"top": "0px",
|
|
337
|
+
"bottom": "0px",
|
|
338
|
+
"flexView": true
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
},
|
|
342
|
+
"columns": [
|
|
343
|
+
{
|
|
344
|
+
"name": "Box",
|
|
345
|
+
"props": {
|
|
346
|
+
"bgColor": "#ffffff",
|
|
347
|
+
"align": "initial",
|
|
348
|
+
"justify": "flex-start",
|
|
349
|
+
"mode": {
|
|
350
|
+
"web": {
|
|
351
|
+
"colspan": 12,
|
|
352
|
+
"isVisible": true,
|
|
353
|
+
"height": "auto"
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
"components": [
|
|
358
|
+
{
|
|
359
|
+
"name": "InputField",
|
|
360
|
+
"props": {
|
|
361
|
+
"code": "email",
|
|
362
|
+
"name": {
|
|
363
|
+
"all": "Email Address"
|
|
364
|
+
},
|
|
365
|
+
"required": true,
|
|
366
|
+
"type": "email",
|
|
367
|
+
"placeholder": {
|
|
368
|
+
"all": "Enter your email"
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
"type": []
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"name": "NumberField",
|
|
375
|
+
"props": {
|
|
376
|
+
"code": "age",
|
|
377
|
+
"name": {
|
|
378
|
+
"all": "Age"
|
|
379
|
+
},
|
|
380
|
+
"required": false,
|
|
381
|
+
"min": 18,
|
|
382
|
+
"max": 100
|
|
383
|
+
},
|
|
384
|
+
"type": []
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "SelectField",
|
|
388
|
+
"props": {
|
|
389
|
+
"code": "country",
|
|
390
|
+
"name": {
|
|
391
|
+
"all": "Country"
|
|
392
|
+
},
|
|
393
|
+
"required": true,
|
|
394
|
+
"multiSelect": false,
|
|
395
|
+
"lov": [
|
|
396
|
+
{
|
|
397
|
+
"id": "1",
|
|
398
|
+
"code": "us",
|
|
399
|
+
"name": "United States"
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"id": "2",
|
|
403
|
+
"code": "uk",
|
|
404
|
+
"name": "United Kingdom"
|
|
405
|
+
}
|
|
406
|
+
]
|
|
407
|
+
},
|
|
408
|
+
"type": []
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "DateField",
|
|
412
|
+
"props": {
|
|
413
|
+
"code": "birthdate",
|
|
414
|
+
"name": {
|
|
415
|
+
"all": "Date of Birth"
|
|
416
|
+
},
|
|
417
|
+
"required": true,
|
|
418
|
+
"format": "YYYY-MM-DD"
|
|
419
|
+
},
|
|
420
|
+
"type": []
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "RadioField",
|
|
424
|
+
"props": {
|
|
425
|
+
"code": "gender",
|
|
426
|
+
"name": {
|
|
427
|
+
"all": "Gender"
|
|
428
|
+
},
|
|
429
|
+
"required": true,
|
|
430
|
+
"lov": [
|
|
431
|
+
{
|
|
432
|
+
"id": "1",
|
|
433
|
+
"code": "male",
|
|
434
|
+
"name": "Male"
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"id": "2",
|
|
438
|
+
"code": "female",
|
|
439
|
+
"name": "Female"
|
|
440
|
+
}
|
|
441
|
+
]
|
|
442
|
+
},
|
|
443
|
+
"type": []
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"name": "BooleanField",
|
|
447
|
+
"props": {
|
|
448
|
+
"code": "terms",
|
|
449
|
+
"name": {
|
|
450
|
+
"all": "I agree to the terms and conditions"
|
|
451
|
+
},
|
|
452
|
+
"required": true,
|
|
453
|
+
"onText": "Yes",
|
|
454
|
+
"offText": "No"
|
|
455
|
+
},
|
|
456
|
+
"type": []
|
|
457
|
+
}
|
|
458
|
+
]
|
|
459
|
+
}
|
|
460
|
+
]
|
|
461
|
+
}
|
|
462
|
+
]
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
### Supported Form Field Types
|
|
466
|
+
|
|
467
|
+
- **InputField**: Text input fields (text, email, password, etc.)
|
|
468
|
+
- **NumberField**: Numeric input with min/max validation
|
|
469
|
+
- **DateField**: Date picker with format support
|
|
470
|
+
- **SelectField**: Dropdown select with single or multi-select
|
|
471
|
+
- **RadioField**: Radio button group
|
|
472
|
+
- **BooleanField**: Checkbox or toggle switch
|
|
473
|
+
|
|
474
|
+
### Form Features
|
|
475
|
+
|
|
476
|
+
- **Automatic Validation**: Required fields are validated automatically
|
|
477
|
+
- **Toast Notifications**: Custom toast notifications for validation errors
|
|
478
|
+
- **Field Name Mapping**: Form values are automatically transformed from codes to field names
|
|
479
|
+
- **Responsive Design**: Forms adapt to different device modes (web, mobileweb, mobileapp, tablet)
|
|
480
|
+
- **Error Highlighting**: Invalid fields are visually highlighted
|
|
481
|
+
|
|
482
|
+
### Form Submission
|
|
483
|
+
|
|
484
|
+
The `onSubmit` callback receives form data with field names as keys:
|
|
485
|
+
|
|
486
|
+
```jsx
|
|
487
|
+
const handleFormSubmit = (formValues) => {
|
|
488
|
+
// formValues will have field names as keys
|
|
489
|
+
// Example: { "Email Address": "user@example.com", "Country": "us" }
|
|
490
|
+
console.log(formValues);
|
|
491
|
+
|
|
492
|
+
// Submit to your API
|
|
493
|
+
fetch('/api/submit-form', {
|
|
494
|
+
method: 'POST',
|
|
495
|
+
headers: { 'Content-Type': 'application/json' },
|
|
496
|
+
body: JSON.stringify(formValues)
|
|
497
|
+
});
|
|
498
|
+
};
|
|
499
|
+
```
|
|
243
500
|
|
|
244
501
|
## 📄 License
|
|
245
502
|
|
|
@@ -251,5 +508,4 @@ If you encounter any issues or have questions, please create an issue on GitHub
|
|
|
251
508
|
|
|
252
509
|
---
|
|
253
510
|
|
|
254
|
-
Built for developers who need dynamic page rendering capabilities.
|
|
255
|
-
=======
|
|
511
|
+
Built for developers who need dynamic page rendering capabilities.
|