tee3apps-cms-sdk-react 0.0.7 → 0.0.8

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