@admin-layout/tailwind-ui 12.2.4-alpha.98 → 12.2.5-alpha.10

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 (81) hide show
  1. package/lib/components/ErrorHandlers/ApplicationErrorHandler.d.ts.map +1 -1
  2. package/lib/components/ErrorHandlers/ApplicationErrorHandler.js +5 -1
  3. package/lib/components/ErrorHandlers/ApplicationErrorHandler.js.map +1 -1
  4. package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts +11 -0
  5. package/lib/components/ErrorHandlers/RemixErrorBoundary.d.ts.map +1 -1
  6. package/lib/components/ErrorHandlers/RemixErrorBoundary.js +134 -3
  7. package/lib/components/ErrorHandlers/RemixErrorBoundary.js.map +1 -1
  8. package/lib/components/ErrorHandlers/SPAErrorBoundary.d.ts.map +1 -1
  9. package/lib/components/ErrorHandlers/SPAErrorBoundary.js +5 -1
  10. package/lib/components/ErrorHandlers/SPAErrorBoundary.js.map +1 -1
  11. package/lib/components/ErrorHandlers/__tests__/RemixErrorBoundary.test.d.ts +2 -0
  12. package/lib/components/ErrorHandlers/__tests__/RemixErrorBoundary.test.d.ts.map +1 -0
  13. package/lib/components/InputToolBar/InputToolBar.d.ts.map +1 -1
  14. package/lib/components/InputToolBar/InputToolBar.js +73 -31
  15. package/lib/components/InputToolBar/InputToolBar.js.map +1 -1
  16. package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts +8 -0
  17. package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts.map +1 -0
  18. package/lib/components/InputToolBar/types.d.ts +2 -0
  19. package/lib/components/InputToolBar/types.d.ts.map +1 -1
  20. package/lib/components/PageContainer/PageContainer.d.ts +9 -0
  21. package/lib/components/PageContainer/PageContainer.d.ts.map +1 -1
  22. package/lib/components/PageContainer/PageContainer.js +24 -8
  23. package/lib/components/PageContainer/PageContainer.js.map +1 -1
  24. package/lib/components/PageContainer/__tests__/PageContainer.test.d.ts +7 -0
  25. package/lib/components/PageContainer/__tests__/PageContainer.test.d.ts.map +1 -0
  26. package/lib/components/RJSFPreview/PreviewAsyncDropdown.js +111 -0
  27. package/lib/components/RJSFPreview/PreviewAsyncDropdown.js.map +1 -0
  28. package/lib/components/RJSFPreview/PreviewCheckboxWidget.js +95 -0
  29. package/lib/components/RJSFPreview/PreviewCheckboxWidget.js.map +1 -0
  30. package/lib/components/RJSFPreview/PreviewCustomFieldTemplate.js +235 -0
  31. package/lib/components/RJSFPreview/PreviewCustomFieldTemplate.js.map +1 -0
  32. package/lib/components/RJSFPreview/PreviewDateWidget.js +178 -0
  33. package/lib/components/RJSFPreview/PreviewDateWidget.js.map +1 -0
  34. package/lib/components/RJSFPreview/PreviewDialog.js +21 -0
  35. package/lib/components/RJSFPreview/PreviewDialog.js.map +1 -0
  36. package/lib/components/RJSFPreview/PreviewDropdownWidget.js +66 -0
  37. package/lib/components/RJSFPreview/PreviewDropdownWidget.js.map +1 -0
  38. package/lib/components/RJSFPreview/PreviewFieldTemplate.js +69 -0
  39. package/lib/components/RJSFPreview/PreviewFieldTemplate.js.map +1 -0
  40. package/lib/components/RJSFPreview/PreviewFileUploadWidget.js +113 -0
  41. package/lib/components/RJSFPreview/PreviewFileUploadWidget.js.map +1 -0
  42. package/lib/components/RJSFPreview/PreviewFormRenderer.js +195 -0
  43. package/lib/components/RJSFPreview/PreviewFormRenderer.js.map +1 -0
  44. package/lib/components/RJSFPreview/PreviewImageUploadWidget.js +104 -0
  45. package/lib/components/RJSFPreview/PreviewImageUploadWidget.js.map +1 -0
  46. package/lib/components/RJSFPreview/PreviewInputWidget.js +70 -0
  47. package/lib/components/RJSFPreview/PreviewInputWidget.js.map +1 -0
  48. package/lib/components/RJSFPreview/PreviewObjectFieldTemplate.js +33 -0
  49. package/lib/components/RJSFPreview/PreviewObjectFieldTemplate.js.map +1 -0
  50. package/lib/components/RJSFPreview/PreviewRadioWidget.js +55 -0
  51. package/lib/components/RJSFPreview/PreviewRadioWidget.js.map +1 -0
  52. package/lib/components/RJSFPreview/PreviewStepper.js +40 -0
  53. package/lib/components/RJSFPreview/PreviewStepper.js.map +1 -0
  54. package/lib/components/RJSFPreview/PreviewSwitchWidget.js +75 -0
  55. package/lib/components/RJSFPreview/PreviewSwitchWidget.js.map +1 -0
  56. package/lib/components/RJSFPreview/PreviewTab.js +358 -0
  57. package/lib/components/RJSFPreview/PreviewTab.js.map +1 -0
  58. package/lib/components/RJSFPreview/PreviewTextareaWidget.js +45 -0
  59. package/lib/components/RJSFPreview/PreviewTextareaWidget.js.map +1 -0
  60. package/lib/components/RJSFPreview/generateSchemaWithInputs.js +134 -0
  61. package/lib/components/RJSFPreview/generateSchemaWithInputs.js.map +1 -0
  62. package/lib/components/RJSFPreview/index.d.ts +34 -0
  63. package/lib/components/RJSFPreview/index.d.ts.map +1 -1
  64. package/lib/components/RJSFPreview/index.js +1 -0
  65. package/lib/components/RJSFPreview/index.js.map +1 -0
  66. package/lib/components/ThemeProvider/ThemeProvider.js +1 -1
  67. package/lib/components/index.d.ts.map +1 -1
  68. package/lib/hooks/__tests__/useMediaQuery.test.d.ts +2 -0
  69. package/lib/hooks/__tests__/useMediaQuery.test.d.ts.map +1 -0
  70. package/lib/hooks/useMediaQuery.d.ts +9 -2
  71. package/lib/hooks/useMediaQuery.d.ts.map +1 -1
  72. package/lib/hooks/useMediaQuery.js +39 -31
  73. package/lib/hooks/useMediaQuery.js.map +1 -1
  74. package/lib/hooks/useWindowSize.d.ts +4 -0
  75. package/lib/hooks/useWindowSize.d.ts.map +1 -1
  76. package/lib/hooks/useWindowSize.js +13 -19
  77. package/lib/hooks/useWindowSize.js.map +1 -1
  78. package/lib/index.js +1 -1
  79. package/lib/shardui/chart.d.ts +1 -1
  80. package/lib/shardui/resizable.d.ts +1 -1
  81. package/package.json +20 -5
@@ -0,0 +1,66 @@
1
+ import {jsxs,jsx}from'react/jsx-runtime';const PreviewDropdownWidget = ({
2
+ id,
3
+ value,
4
+ required,
5
+ disabled,
6
+ readonly,
7
+ onChange,
8
+ placeholder,
9
+ schema,
10
+ options,
11
+ rawErrors
12
+ }) => {
13
+ const handleChange = event => {
14
+ const selectedValue = event.target.value;
15
+ onChange(selectedValue);
16
+ };
17
+ let enumOptions = [];
18
+ if (Array.isArray(options?.enumOptions)) {
19
+ enumOptions = options.enumOptions;
20
+ } else if (schema?.enum && schema?.enumNames) {
21
+ enumOptions = schema.enum.map((value, index) => ({
22
+ value,
23
+ label: schema.enumNames[index] || value
24
+ }));
25
+ } else if (schema?.enumLabels && Array.isArray(schema.enumLabels)) {
26
+ enumOptions = schema.enumLabels.map(option => ({
27
+ value: option.key,
28
+ label: option.value
29
+ }));
30
+ } else if (Array.isArray(schema?.enum)) {
31
+ enumOptions = schema.enum.map(v => ({
32
+ value: v,
33
+ label: v
34
+ }));
35
+ }
36
+ return jsxs("div", {
37
+ className: "space-y-3",
38
+ children: [jsxs("div", {
39
+ className: "block text-base font-semibold text-gray-800 mb-1",
40
+ children: [schema?.title, required && jsx("span", {
41
+ className: "text-red-500 ml-1",
42
+ children: "*"
43
+ })]
44
+ }), jsxs("select", {
45
+ id: id,
46
+ value: value || '',
47
+ onChange: handleChange,
48
+ disabled: disabled || readonly,
49
+ className: `w-full px-3 pb-2 rounded-md focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed text-sm ${rawErrors && rawErrors.length > 0 ? 'border-2 border-red-500 focus:border-red-500 focus:ring-red-500' : 'border border-gray-300 focus:border-blue-500 focus:ring-blue-500'}`,
50
+ children: [jsx("option", {
51
+ value: "",
52
+ children: placeholder || 'Select an option...'
53
+ }), Array.isArray(enumOptions) && enumOptions.map((option, index) => {
54
+ const optionValue = option.value !== undefined ? option.value : option;
55
+ const optionLabel = option.label !== undefined ? option.label : option;
56
+ return jsx("option", {
57
+ value: String(optionValue),
58
+ children: String(optionLabel)
59
+ }, index);
60
+ })]
61
+ }), rawErrors && rawErrors.length > 0 && jsx("p", {
62
+ className: "mt-1 text-sm text-red-500",
63
+ children: rawErrors[0]
64
+ })]
65
+ });
66
+ };export{PreviewDropdownWidget};//# sourceMappingURL=PreviewDropdownWidget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewDropdownWidget.js","sources":["../../../src/components/RJSFPreview/PreviewDropdownWidget.tsx"],"sourcesContent":[null],"names":[],"mappings":"yCACS,MAAA;AAET,EAAA,EAAA;OACI;AACH,EAAA,QAAA;AAED,EAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,69 @@
1
+ import {jsxs,jsx}from'react/jsx-runtime';const PreviewFieldTemplate = ({
2
+ id,
3
+ classNames,
4
+ style,
5
+ label,
6
+ help,
7
+ required,
8
+ description,
9
+ errors,
10
+ children,
11
+ schema,
12
+ uiSchema
13
+ }) => {
14
+ const isGroup = schema.type === 'object' && schema.properties;
15
+ const isStepField = schema.type === 'object' && schema.properties && (id === 'root' || id === 'root_step1' || id.includes('step'));
16
+ if (isStepField) {
17
+ return jsxs("div", {
18
+ className: "mb-4",
19
+ children: [children, jsx("hr", {
20
+ className: "border-gray-300 mt-6"
21
+ }), errors && Array.isArray(errors) && errors.length > 0 && jsx("div", {
22
+ className: "text-sm text-red-600 mt-2",
23
+ children: errors.map((error, index) => jsx("div", {
24
+ children: error
25
+ }, index))
26
+ }), help && jsx("p", {
27
+ className: "text-sm text-gray-500 mt-2",
28
+ children: help
29
+ })]
30
+ });
31
+ }
32
+ if (isGroup) {
33
+ return jsxs("div", {
34
+ className: "mb-8",
35
+ children: [jsx("div", {
36
+ className: "mb-4 border-t border-gray-300"
37
+ }), jsx("div", {
38
+ className: "space-y-4",
39
+ children: children
40
+ }), jsx("div", {
41
+ className: "mt-4 border-t border-gray-300"
42
+ })]
43
+ });
44
+ }
45
+ return jsxs("div", {
46
+ className: "mb-4",
47
+ children: [label && jsxs("label", {
48
+ className: "block text-base font-semibold text-gray-800 mb-3",
49
+ children: [label, required && jsx("span", {
50
+ className: "text-red-500 ml-1",
51
+ children: "*"
52
+ })]
53
+ }), description && jsx("p", {
54
+ className: "text-sm text-gray-600 mb-3",
55
+ children: description
56
+ }), jsx("div", {
57
+ className: "space-y-2",
58
+ children: children
59
+ }), errors && Array.isArray(errors) && errors.length > 0 && jsx("div", {
60
+ className: "text-sm text-red-600 mt-2",
61
+ children: errors.map((error, index) => jsx("div", {
62
+ children: error
63
+ }, index))
64
+ }), help && jsx("p", {
65
+ className: "text-sm text-gray-500 mt-2",
66
+ children: help
67
+ })]
68
+ });
69
+ };export{PreviewFieldTemplate};//# sourceMappingURL=PreviewFieldTemplate.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewFieldTemplate.js","sources":["../../../src/components/RJSFPreview/PreviewFieldTemplate.tsx"],"sourcesContent":[null],"names":[],"mappings":"yCACS,MAAA,oBAAoB;AAE7B,EAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,113 @@
1
+ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useCallback}from'react';import {useDropzone}from'react-dropzone';import {BsUpload}from'@react-icons/all-files/bs/BsUpload.js';import {BsFileEarmark}from'@react-icons/all-files/bs/BsFileEarmark.js';const PreviewFileUploadWidget = ({
2
+ id,
3
+ value,
4
+ required,
5
+ disabled,
6
+ readonly,
7
+ onChange,
8
+ onBlur,
9
+ onFocus,
10
+ autofocus,
11
+ options,
12
+ schema,
13
+ type,
14
+ label,
15
+ placeholder,
16
+ rawErrors
17
+ }) => {
18
+ const [fileName, setFileName] = useState(() => {
19
+ if (value && typeof value === 'string' && value.startsWith('data:')) {
20
+ return 'Uploaded file';
21
+ }
22
+ return '';
23
+ });
24
+ const [fileDataUrl, setFileDataUrl] = useState(value || '');
25
+ const acceptValue = typeof options?.accept === 'string' && options.accept !== '*' ? {
26
+ [options.accept]: []
27
+ } : undefined;
28
+ const handleDrop = useCallback(acceptedFiles => {
29
+ const file = acceptedFiles[0];
30
+ if (file) {
31
+ setFileName(file.name);
32
+ const reader = new FileReader();
33
+ reader.onload = e => {
34
+ const dataUrl = e.target?.result;
35
+ setFileDataUrl(dataUrl);
36
+ onChange(dataUrl);
37
+ };
38
+ reader.readAsDataURL(file);
39
+ }
40
+ }, [onChange]);
41
+ const handleRemoveFile = () => {
42
+ setFileName('');
43
+ setFileDataUrl('');
44
+ onChange('');
45
+ };
46
+ const {
47
+ getRootProps,
48
+ getInputProps,
49
+ isDragActive,
50
+ isFocused
51
+ } = useDropzone({
52
+ onDrop: handleDrop,
53
+ accept: acceptValue,
54
+ multiple: false,
55
+ disabled: disabled || readonly,
56
+ autoFocus: Boolean(autofocus)
57
+ });
58
+ return jsx("div", {
59
+ className: "bg-white rounded-lg",
60
+ children: jsxs("div", {
61
+ className: "space-y-3",
62
+ children: [label && jsxs("label", {
63
+ htmlFor: id,
64
+ className: "block text-base font-semibold text-gray-800 mb-3",
65
+ children: [label, required && jsx("span", {
66
+ className: "text-red-500 ml-1",
67
+ children: "*"
68
+ })]
69
+ }), !fileName && jsxs("div", {
70
+ ...getRootProps({
71
+ className: `flex items-center justify-start border-2 border-dashed rounded-md px-4 py-6 cursor-pointer transition-colors text-xs ${isDragActive ? 'border-blue-500 bg-blue-50' : rawErrors && rawErrors.length > 0 ? 'border-red-500 bg-red-50 hover:bg-red-100' : 'border-gray-300 bg-gray-100 hover:bg-gray-200'} ${disabled || readonly ? 'opacity-50 cursor-not-allowed' : ''}`,
72
+ tabIndex: 0,
73
+ onBlur: () => onBlur(id, value),
74
+ onFocus: () => onFocus(id, value)
75
+ }),
76
+ children: [jsx("input", {
77
+ ...getInputProps(),
78
+ id: id
79
+ }), jsx(BsUpload, {
80
+ className: "w-4 h-4 mr-2 text-gray-500"
81
+ }), jsx("span", {
82
+ children: isDragActive ? 'Drop the file here...' : placeholder || 'Drag & drop or click to upload file...'
83
+ })]
84
+ }), fileName && jsx("div", {
85
+ className: "space-y-2",
86
+ children: jsxs("div", {
87
+ className: "flex items-center space-x-3 p-2 bg-gray-50 rounded-lg border border-gray-200 max-w-xs",
88
+ children: [jsx(BsFileEarmark, {
89
+ className: "w-5 h-5 text-gray-500"
90
+ }), jsxs("div", {
91
+ className: "flex-1 min-w-0",
92
+ children: [jsx("div", {
93
+ className: "text-sm font-medium text-gray-900 truncate",
94
+ children: fileName
95
+ }), jsx("div", {
96
+ className: "text-xs text-gray-500",
97
+ children: "File uploaded successfully"
98
+ })]
99
+ }), jsx("button", {
100
+ type: "button",
101
+ onClick: handleRemoveFile,
102
+ disabled: disabled || readonly,
103
+ className: "text-red-500 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 rounded flex-shrink-0",
104
+ children: "\u00D7"
105
+ })]
106
+ })
107
+ }), rawErrors && rawErrors.length > 0 && jsx("p", {
108
+ className: "mt-1 text-sm text-red-500",
109
+ children: rawErrors[0]
110
+ })]
111
+ })
112
+ });
113
+ };export{PreviewFileUploadWidget};//# sourceMappingURL=PreviewFileUploadWidget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewFileUploadWidget.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,195 @@
1
+ import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import Form from'@rjsf/core';import {PreviewCustomFieldTemplate}from'./PreviewCustomFieldTemplate.js';import {PreviewInputWidget}from'./PreviewInputWidget.js';import {PreviewFileUploadWidget}from'./PreviewFileUploadWidget.js';import {PreviewImageUploadWidget}from'./PreviewImageUploadWidget.js';import {PreviewCheckboxWidget}from'./PreviewCheckboxWidget.js';import {PreviewDateWidget}from'./PreviewDateWidget.js';import {PreviewTextareaWidget}from'./PreviewTextareaWidget.js';import {PreviewDropdownWidget}from'./PreviewDropdownWidget.js';import {PreviewRadioWidget}from'./PreviewRadioWidget.js';import {PreviewSwitchWidget}from'./PreviewSwitchWidget.js';import {PreviewObjectFieldTemplate}from'./PreviewObjectFieldTemplate.js';import PreviewAsyncDropdown from'./PreviewAsyncDropdown.js';const PreviewFormRenderer = ({
2
+ schema,
3
+ uiSchema,
4
+ stepName,
5
+ onNext,
6
+ onPrevious,
7
+ initialData = {},
8
+ isLoading = false,
9
+ isLastStep = false,
10
+ customValidateFunction,
11
+ validator
12
+ }) => {
13
+ const convertTransformedDataForForm = (formData, schema) => {
14
+ if (!formData || !schema?.properties) return formData;
15
+ const converted = {};
16
+ for (const [key, value] of Object.entries(formData)) {
17
+ const fieldSchema = schema.properties[key];
18
+ if (typeof value === 'object' && value !== null && 'label' in value && 'value' in value) {
19
+ converted[key] = value.value;
20
+ } else if (typeof value === 'object' && value !== null && 'label' in value && 'key' in value) {
21
+ converted[key] = value.key;
22
+ } else if (fieldSchema?.type === 'object' && fieldSchema?.properties) {
23
+ converted[key] = convertTransformedDataForForm(value, fieldSchema);
24
+ } else {
25
+ converted[key] = value;
26
+ }
27
+ }
28
+ return converted;
29
+ };
30
+ const processedInitialData = convertTransformedDataForForm(initialData, schema);
31
+ const [formData, setFormData] = useState(processedInitialData);
32
+ const handleSubmit = data => {
33
+ if (onNext && data.formData) {
34
+ const transformedFormData = transformDropdownAnswers(data.formData, schema);
35
+ onNext(transformedFormData);
36
+ }
37
+ };
38
+ const handleChange = data => {
39
+ if (data.formData) {
40
+ const convertedFormData = convertFormDataTypes(data.formData, schema);
41
+ setFormData(convertedFormData);
42
+ console.log('Current filled form data:', convertedFormData);
43
+ }
44
+ };
45
+ const convertFormDataTypes = (formData, schema) => {
46
+ if (!formData || !schema?.properties) return formData;
47
+ const converted = {};
48
+ for (const [key, value] of Object.entries(formData)) {
49
+ const fieldSchema = schema.properties[key];
50
+ if (fieldSchema?.type === 'boolean') {
51
+ if (typeof value === 'string') {
52
+ converted[key] = value.toLowerCase() === 'true' || value === '1';
53
+ } else if (typeof value === 'number') {
54
+ converted[key] = value === 1;
55
+ } else if (value === null || value === undefined) {
56
+ converted[key] = false;
57
+ } else {
58
+ converted[key] = Boolean(value);
59
+ }
60
+ } else if (fieldSchema?.type === 'object' && fieldSchema?.properties) {
61
+ converted[key] = convertFormDataTypes(value, fieldSchema);
62
+ } else {
63
+ converted[key] = value;
64
+ }
65
+ }
66
+ return converted;
67
+ };
68
+ const transformDropdownAnswers = (formData, schema) => {
69
+ if (!formData || !schema?.properties) return formData;
70
+ const transformed = {};
71
+ for (const [key, value] of Object.entries(formData)) {
72
+ const fieldSchema = schema.properties[key];
73
+ if (fieldSchema?.enum && fieldSchema?.enumNames && Array.isArray(fieldSchema.enum) && value !== null && value !== undefined && value !== '') {
74
+ const idx = fieldSchema.enum.indexOf(value);
75
+ if (idx !== -1 && fieldSchema.enumNames[idx]) {
76
+ const originalLabel = fieldSchema.enumNames[idx];
77
+ const uppercaseLabel = originalLabel.toUpperCase();
78
+ transformed[key] = {
79
+ label: uppercaseLabel,
80
+ value: value
81
+ };
82
+ } else {
83
+ transformed[key] = value;
84
+ }
85
+ } else if (fieldSchema?.oneOf && Array.isArray(fieldSchema.oneOf) && value !== null && value !== undefined && value !== '') {
86
+ const option = fieldSchema.oneOf.find(opt => opt.const === value);
87
+ if (option) {
88
+ transformed[key] = {
89
+ label: option.title,
90
+ key: option.const
91
+ };
92
+ } else {
93
+ transformed[key] = value;
94
+ }
95
+ } else if (fieldSchema?.type === 'object' && fieldSchema?.properties) {
96
+ transformed[key] = transformDropdownAnswers(value, fieldSchema);
97
+ } else {
98
+ transformed[key] = value;
99
+ }
100
+ }
101
+ return transformed;
102
+ };
103
+ const handlePrevious = () => {
104
+ onPrevious?.();
105
+ };
106
+ const createDebugWidget = (widgetName, OriginalWidget) => {
107
+ return props => {
108
+ console.log(`🎯 ${widgetName} called with props:`, {
109
+ id: props.id,
110
+ schema: props.schema,
111
+ uiSchema: props.uiSchema,
112
+ options: props.options,
113
+ value: props.value,
114
+ widgetName
115
+ });
116
+ return jsx(OriginalWidget, {
117
+ ...props
118
+ });
119
+ };
120
+ };
121
+ const customWidgetsWithPreview = {
122
+ TextWidget: PreviewInputWidget,
123
+ EmailWidget: PreviewInputWidget,
124
+ PasswordWidget: PreviewInputWidget,
125
+ URLWidget: PreviewInputWidget,
126
+ DateWidget: PreviewDateWidget,
127
+ DateTimeWidget: PreviewDateWidget,
128
+ TimeWidget: PreviewInputWidget,
129
+ SelectWidget: createDebugWidget('SelectWidget', PreviewDropdownWidget),
130
+ asyncSelect: createDebugWidget('AsyncSelectWidget', PreviewAsyncDropdown),
131
+ RadioWidget: createDebugWidget('RadioWidget', PreviewRadioWidget),
132
+ NumberWidget: PreviewInputWidget,
133
+ CheckboxWidget: PreviewCheckboxWidget,
134
+ CheckboxesWidget: createDebugWidget('CheckboxesWidget', PreviewCheckboxWidget),
135
+ SwitchWidget: createDebugWidget('SwitchWidget', PreviewSwitchWidget),
136
+ FileWidget: PreviewFileUploadWidget,
137
+ TextareaWidget: PreviewTextareaWidget,
138
+ textarea: PreviewTextareaWidget,
139
+ ImageWidget: PreviewImageUploadWidget,
140
+ FileUploadWidget: PreviewFileUploadWidget,
141
+ 'image-upload': PreviewImageUploadWidget,
142
+ 'file-upload': PreviewFileUploadWidget,
143
+ switch: PreviewSwitchWidget
144
+ };
145
+ schema?.title || 'Form';
146
+ const schemaWithoutTitle = schema ? {
147
+ ...schema,
148
+ title: undefined,
149
+ description: undefined
150
+ } : schema;
151
+ return jsx("div", {
152
+ className: "bg-white rounded-lg p-8",
153
+ children: jsx(Form, {
154
+ customValidate: customValidateFunction,
155
+ liveValidate: true,
156
+ validator: validator,
157
+ schema: schemaWithoutTitle,
158
+ uiSchema: uiSchema,
159
+ formData: formData,
160
+ onChange: handleChange,
161
+ onSubmit: handleSubmit,
162
+ className: "space-y-6",
163
+ widgets: customWidgetsWithPreview,
164
+ templates: {
165
+ FieldTemplate: PreviewCustomFieldTemplate,
166
+ ObjectFieldTemplate: PreviewObjectFieldTemplate,
167
+ ErrorListTemplate: () => null
168
+ },
169
+ formContext: {
170
+ labelCol: {
171
+ span: 24
172
+ },
173
+ wrapperCol: {
174
+ span: 24
175
+ },
176
+ isPreviewMode: true
177
+ },
178
+ children: jsxs("div", {
179
+ className: "flex justify-between pt-8",
180
+ children: [jsx("button", {
181
+ type: "button",
182
+ onClick: handlePrevious,
183
+ disabled: !onPrevious,
184
+ className: `px-6 py-2 rounded-md font-medium transition-colors ${onPrevious ? 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50' : 'bg-gray-50 text-gray-400 cursor-not-allowed'}`,
185
+ children: "Back"
186
+ }), jsx("button", {
187
+ type: "submit",
188
+ disabled: isLoading,
189
+ className: `px-6 py-2 rounded-md font-medium transition-colors ${isLoading ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'}`,
190
+ children: isLoading ? 'Loading...' : isLastStep ? 'Submit' : 'Next'
191
+ })]
192
+ })
193
+ })
194
+ });
195
+ };export{PreviewFormRenderer};//# sourceMappingURL=PreviewFormRenderer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewFormRenderer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,104 @@
1
+ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useCallback}from'react';import {useDropzone}from'react-dropzone';import {BsUpload}from'@react-icons/all-files/bs/BsUpload.js';const PreviewImageUploadWidget = ({
2
+ id,
3
+ value,
4
+ required,
5
+ disabled,
6
+ readonly,
7
+ onChange,
8
+ onBlur,
9
+ onFocus,
10
+ autofocus,
11
+ options,
12
+ schema,
13
+ type,
14
+ label,
15
+ placeholder,
16
+ rawErrors
17
+ }) => {
18
+ const [previewUrl, setPreviewUrl] = useState(value || '');
19
+ const [fileName, setFileName] = useState('');
20
+ const handleDrop = useCallback(acceptedFiles => {
21
+ const file = acceptedFiles[0];
22
+ if (file) {
23
+ setFileName(file.name);
24
+ const reader = new FileReader();
25
+ reader.onload = e => {
26
+ const dataUrl = e.target?.result;
27
+ setPreviewUrl(dataUrl);
28
+ onChange(dataUrl);
29
+ };
30
+ reader.readAsDataURL(file);
31
+ }
32
+ }, [onChange]);
33
+ const handleRemoveImage = () => {
34
+ setPreviewUrl('');
35
+ setFileName('');
36
+ onChange('');
37
+ };
38
+ const {
39
+ getRootProps,
40
+ getInputProps,
41
+ isDragActive
42
+ } = useDropzone({
43
+ onDrop: handleDrop,
44
+ accept: {
45
+ 'image/*': []
46
+ },
47
+ multiple: false,
48
+ disabled: disabled || readonly,
49
+ autoFocus: Boolean(autofocus)
50
+ });
51
+ return jsx("div", {
52
+ className: "bg-white rounded-lg ",
53
+ children: jsxs("div", {
54
+ className: "space-y-3",
55
+ children: [label && jsxs("label", {
56
+ htmlFor: id,
57
+ className: "block text-base font-semibold text-gray-800 mb-3",
58
+ children: [label, required && jsx("span", {
59
+ className: "text-red-500 ml-1",
60
+ children: "*"
61
+ })]
62
+ }), !previewUrl && jsxs("div", {
63
+ ...getRootProps({
64
+ className: `flex items-center justify-start border-2 border-dashed rounded-md px-4 py-6 cursor-pointer transition-colors text-xs ${isDragActive ? 'border-blue-500 bg-blue-50' : rawErrors && rawErrors.length > 0 ? 'border-red-500 bg-red-50 hover:bg-red-100' : 'border-gray-300 bg-gray-100 hover:bg-gray-200'} ${disabled || readonly ? 'opacity-50 cursor-not-allowed' : ''}`,
65
+ tabIndex: 0,
66
+ onBlur: () => onBlur(id, value),
67
+ onFocus: () => onFocus(id, value)
68
+ }),
69
+ children: [jsx("input", {
70
+ ...getInputProps(),
71
+ id: id
72
+ }), jsx(BsUpload, {
73
+ className: "w-4 h-4 mr-2 text-gray-500"
74
+ }), jsx("span", {
75
+ children: isDragActive ? 'Drop the image here...' : placeholder || 'Drag & drop or click to upload image...'
76
+ })]
77
+ }), previewUrl && jsxs("div", {
78
+ className: "space-y-2",
79
+ children: [jsxs("div", {
80
+ className: "relative inline-block",
81
+ children: [jsx("img", {
82
+ src: previewUrl,
83
+ alt: fileName || 'Uploaded image',
84
+ className: "max-w-48 max-h-32 rounded-lg border border-gray-200"
85
+ }), jsx("button", {
86
+ type: "button",
87
+ onClick: handleRemoveImage,
88
+ disabled: disabled || readonly,
89
+ className: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors text-sm",
90
+ children: "\u00D7"
91
+ })]
92
+ }), jsx("div", {
93
+ className: "text-sm text-gray-600",
94
+ children: fileName && jsxs("span", {
95
+ children: ["File: ", fileName]
96
+ })
97
+ })]
98
+ }), rawErrors && rawErrors.length > 0 && jsx("p", {
99
+ className: "mt-1 text-sm text-red-500",
100
+ children: rawErrors[0]
101
+ })]
102
+ })
103
+ });
104
+ };export{PreviewImageUploadWidget};//# sourceMappingURL=PreviewImageUploadWidget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewImageUploadWidget.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,70 @@
1
+ import {jsx,jsxs}from'react/jsx-runtime';const PreviewInputWidget = ({
2
+ id,
3
+ value,
4
+ required,
5
+ disabled,
6
+ readonly,
7
+ onChange,
8
+ onBlur,
9
+ onFocus,
10
+ autofocus,
11
+ options,
12
+ schema,
13
+ type,
14
+ label,
15
+ placeholder,
16
+ rawErrors
17
+ }) => {
18
+ const handleChange = event => {
19
+ const newValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
20
+ onChange(newValue);
21
+ };
22
+ const handleBlur = event => {
23
+ onBlur(id, event.target.value);
24
+ };
25
+ const handleFocus = event => {
26
+ onFocus(id, event.target.value);
27
+ };
28
+ if (type === 'checkbox') {
29
+ return jsx("input", {
30
+ id: id,
31
+ type: "checkbox",
32
+ checked: value || false,
33
+ required: required,
34
+ disabled: disabled || readonly,
35
+ autoFocus: autofocus,
36
+ onChange: handleChange,
37
+ onBlur: handleBlur,
38
+ onFocus: handleFocus,
39
+ className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
40
+ });
41
+ }
42
+ return jsx("div", {
43
+ children: jsxs("div", {
44
+ className: "space-y-2",
45
+ children: [label && jsxs("label", {
46
+ htmlFor: id,
47
+ className: "block text-sm font-semibold text-gray-800 mb-1",
48
+ children: [label, required && jsx("span", {
49
+ className: "text-red-500 ml-1",
50
+ children: "*"
51
+ })]
52
+ }), jsx("input", {
53
+ id: id,
54
+ type: type || 'text',
55
+ value: value || '',
56
+ required: required,
57
+ disabled: disabled || readonly,
58
+ autoFocus: autofocus,
59
+ placeholder: placeholder,
60
+ onChange: handleChange,
61
+ onBlur: handleBlur,
62
+ onFocus: handleFocus,
63
+ className: `w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 text-base placeholder-gray-400 ${rawErrors && rawErrors.length > 0 ? 'border-2 border-red-500 focus:border-red-500 focus:ring-red-100' : 'border border-gray-300 focus:border-blue-300 focus:ring-blue-100'}`
64
+ }), rawErrors && rawErrors.length > 0 && jsx("p", {
65
+ className: "mt-1 text-sm text-red-500",
66
+ children: rawErrors[0]
67
+ })]
68
+ })
69
+ });
70
+ };export{PreviewInputWidget};//# sourceMappingURL=PreviewInputWidget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewInputWidget.js","sources":["../../../src/components/RJSFPreview/PreviewInputWidget.tsx"],"sourcesContent":[null],"names":[],"mappings":"yCACS,MAAA;AAET,EAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,33 @@
1
+ import {jsxs,jsx}from'react/jsx-runtime';const PreviewObjectFieldTemplate = ({
2
+ title,
3
+ description,
4
+ properties,
5
+ required,
6
+ schema,
7
+ uiSchema,
8
+ idSchema
9
+ }) => {
10
+ const isRoot = idSchema.$id === 'root' || !title;
11
+ const isConfigurationStep = idSchema.$id === 'root_configurationStep' || title === 'Configuration';
12
+ return jsxs("div", {
13
+ children: [!isRoot && !isConfigurationStep && title && jsxs("div", {
14
+ className: "mb-6",
15
+ children: [jsxs("h3", {
16
+ className: "text-base font-bold text-gray-800 mb-2",
17
+ children: [title, required && jsx("span", {
18
+ className: "text-red-500 ml-1",
19
+ children: "*"
20
+ })]
21
+ }), description && jsx("p", {
22
+ className: "text-sm text-gray-600 mt-1",
23
+ children: description
24
+ })]
25
+ }), jsx("div", {
26
+ className: "space-y-3 pl-4 [&_label]:text-sm [&_label]:mb-2 [&_.text-base]:text-sm [&_.mb-4]:mb-2 [&_.mb-3]:mb-2",
27
+ children: properties.map((element, index) => jsx("div", {
28
+ className: "property-wrapper",
29
+ children: element.content
30
+ }, index))
31
+ })]
32
+ });
33
+ };export{PreviewObjectFieldTemplate};//# sourceMappingURL=PreviewObjectFieldTemplate.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PreviewObjectFieldTemplate.js","sources":["../../../src/components/RJSFPreview/PreviewObjectFieldTemplate.tsx"],"sourcesContent":[null],"names":[],"mappings":"yCACS,MAAA,0BAA0B;AAEnC,EAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}