@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-825bfc-m2n7fwvk → 1.0.25-poc-for-using-dynamic-ui-from-app-sdk-4a73f4-m2ok3vom

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 (6) hide show
  1. package/package.json +7 -3
  2. package/resources/ui-dynamic-form.umd.js +514 -1
  3. package/ui/components/UIDynamicForm.tsx +195 -0
  4. package/ui/components/UIDynamicForm.vue +27 -0
  5. package/ui/components/UIDynamicForm.jsx +0 -5
  6. package/ui/components/Wrapper.vue +0 -29
package/ui/components/UIDynamicForm.tsx ADDED
@@ -0,0 +1,195 @@
1
+ import { DynamicUi } from '@5minds/processcube_app_sdk/client';
2
+ import '@5minds/processcube_app_sdk/client/components/DynamicUi/DynamicUi.css';
3
+ import React from 'react';
4
+
5
+ export default function UIDynamicForm() {
6
+ const usertask = {
7
+ actualOwnerId: null,
8
+ finishedByUserId: null,
9
+ userTaskConfig: {
10
+ formFields: [
11
+ {
12
+ id: 'checkbox',
13
+ label: 'Checkbox',
14
+ type: 'checkbox',
15
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
16
+ },
17
+ {
18
+ id: 'colorpicker',
19
+ label: 'Colorpicker',
20
+ type: 'color',
21
+ defaultValue: '#e32626',
22
+ customForm: '{"hint":"hint"}',
23
+ },
24
+ {
25
+ id: 'date',
26
+ label: 'Date',
27
+ type: 'date',
28
+ defaultValue: '2024-10-18',
29
+ customForm: '{"hint":"hint"}',
30
+ },
31
+ {
32
+ id: 'datetime',
33
+ label: 'Datetime',
34
+ type: 'datetime-local',
35
+ defaultValue: '2024-10-19T12:41',
36
+ customForm: '{"hint":"hint"}',
37
+ },
38
+ { id: 'email', label: 'Email', type: 'email', customForm: '{"hint":"hint"}' },
39
+ { id: 'header', type: 'header', defaultValue: 'Header' },
40
+ { id: 'hidden', type: 'hidden', defaultValue: 'hidden' },
41
+ { id: 'number', label: 'Number', type: 'number', customForm: '{"step":1.5,"hint":"hint"}' },
42
+ {
43
+ id: 'month',
44
+ label: 'Month',
45
+ type: 'month',
46
+ defaultValue: '2024-07',
47
+ customForm: '{"hint":"hint"}',
48
+ },
49
+ { id: 'paragraph', type: 'paragraph', defaultValue: 'A lot of words...' },
50
+ { id: 'password', label: 'Pasword', type: 'password', customForm: '{"hint":"hint"}' },
51
+ {
52
+ id: 'radio',
53
+ label: 'Radio',
54
+ type: 'radio',
55
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
56
+ },
57
+ {
58
+ id: 'range',
59
+ label: 'Range',
60
+ type: 'range',
61
+ defaultValue: '30',
62
+ customForm: '{"step":0.4,"min":3,"hint":"hint"}',
63
+ },
64
+ {
65
+ id: 'select',
66
+ label: 'Select',
67
+ type: 'select',
68
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
69
+ },
70
+ { id: 'tel', label: 'Tel.', type: 'tel', customForm: '{"hint":"hint"}' },
71
+ { id: 'text', label: 'Text', type: 'string', customForm: '{"hint":"hint"}' },
72
+ {
73
+ id: 'textarea',
74
+ label: 'Textarea',
75
+ type: 'textarea',
76
+ defaultValue: 'more words...',
77
+ customForm: '{"rows":14,"hint":"hint"}',
78
+ },
79
+ { id: 'time', label: 'Time', type: 'time', defaultValue: '11:54', customForm: '{"hint":"hint"}' },
80
+ { id: 'url', label: 'URL', type: 'url', customForm: '{"hint":"hint"}' },
81
+ {
82
+ id: 'week',
83
+ label: 'Week',
84
+ type: 'week',
85
+ defaultValue: '2024-W37',
86
+ customForm: '{"hint":"hint"}',
87
+ },
88
+ ],
89
+ },
90
+ userTaskConfigModel: {
91
+ formFields: [
92
+ {
93
+ id: 'checkbox',
94
+ label: 'Checkbox',
95
+ type: 'checkbox',
96
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
97
+ },
98
+ {
99
+ id: 'colorpicker',
100
+ label: 'Colorpicker',
101
+ type: 'color',
102
+ defaultValue: '#e32626',
103
+ customForm: '{"hint":"hint"}',
104
+ },
105
+ {
106
+ id: 'date',
107
+ label: 'Date',
108
+ type: 'date',
109
+ defaultValue: '2024-10-18',
110
+ customForm: '{"hint":"hint"}',
111
+ },
112
+ {
113
+ id: 'datetime',
114
+ label: 'Datetime',
115
+ type: 'datetime-local',
116
+ defaultValue: '2024-10-19T12:41',
117
+ customForm: '{"hint":"hint"}',
118
+ },
119
+ { id: 'email', label: 'Email', type: 'email', customForm: '{"hint":"hint"}' },
120
+ { id: 'header', type: 'header', defaultValue: 'Header' },
121
+ { id: 'hidden', type: 'hidden', defaultValue: 'hidden' },
122
+ { id: 'number', label: 'Number', type: 'number', customForm: '{"step":1.5,"hint":"hint"}' },
123
+ {
124
+ id: 'month',
125
+ label: 'Month',
126
+ type: 'month',
127
+ defaultValue: '2024-07',
128
+ customForm: '{"hint":"hint"}',
129
+ },
130
+ { id: 'paragraph', type: 'paragraph', defaultValue: 'A lot of words...' },
131
+ { id: 'password', label: 'Pasword', type: 'password', customForm: '{"hint":"hint"}' },
132
+ {
133
+ id: 'radio',
134
+ label: 'Radio',
135
+ type: 'radio',
136
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
137
+ },
138
+ {
139
+ id: 'range',
140
+ label: 'Range',
141
+ type: 'range',
142
+ defaultValue: '30',
143
+ customForm: '{"step":0.4,"min":3,"hint":"hint"}',
144
+ },
145
+ {
146
+ id: 'select',
147
+ label: 'Select',
148
+ type: 'select',
149
+ customForm: '{"entries":[{"key":"key","value":"value"}],"hint":"hint"}',
150
+ },
151
+ { id: 'tel', label: 'Tel.', type: 'tel', customForm: '{"hint":"hint"}' },
152
+ { id: 'text', label: 'Text', type: 'string', customForm: '{"hint":"hint"}' },
153
+ {
154
+ id: 'textarea',
155
+ label: 'Textarea',
156
+ type: 'textarea',
157
+ defaultValue: 'more words...',
158
+ customForm: '{"rows":14,"hint":"hint"}',
159
+ },
160
+ { id: 'time', label: 'Time', type: 'time', defaultValue: '11:54', customForm: '{"hint":"hint"}' },
161
+ { id: 'url', label: 'URL', type: 'url', customForm: '{"hint":"hint"}' },
162
+ {
163
+ id: 'week',
164
+ label: 'Week',
165
+ type: 'week',
166
+ defaultValue: '2024-W37',
167
+ customForm: '{"hint":"hint"}',
168
+ },
169
+ ],
170
+ },
171
+ assignedUserIds: null,
172
+ multiInstanceMetadataId: '1f5a946e-5349-46f7-8914-0e25096b5f20',
173
+ multiInstanceStartToken: {},
174
+ multiInstanceEndToken: {},
175
+ flowNodeInstanceId: '129bb9ec-7660-4dbc-a11e-ca174a701ebc',
176
+ flowNodeId: 'user_task',
177
+ flowNodeName: 'User Task',
178
+ flowNodeLane: '',
179
+ flowNodeType: 'bpmn:UserTask',
180
+ eventType: null,
181
+ state: 'suspended',
182
+ previousFlowNodeInstanceId: '0076eaee-4f97-4f6d-b4ad-a066877b6aa4',
183
+ parentProcessInstanceId: null,
184
+ processDefinitionId: 'User-Task-Sample_Definition',
185
+ processModelId: 'User-Task-Sample_Process',
186
+ processInstanceId: '23d53ef8-f28c-4b47-9a70-d8b37d293a27',
187
+ correlationId: '8a0bc873-568d-49dc-b304-41efb5b92ec2',
188
+ ownerId: 'dummy_token',
189
+ startToken: {},
190
+ endToken: {},
191
+ startedAt: '2024-10-23T09:40:22.755Z',
192
+ };
193
+ return <DynamicUi task={usertask as any} onSubmit={() => console.log("amk") as any} />;
194
+ }
195
+
package/ui/components/UIDynamicForm.vue ADDED
@@ -0,0 +1,27 @@
1
+ <template>
2
+ <div ref="reactRoot"></div>
3
+ </template>
4
+
5
+ <script>
6
+ import { defineComponent, onMounted, ref } from 'vue';
7
+ import React from 'react';
8
+ import { createRoot } from 'react-dom/client';
9
+ import UIDynamicForm from './UIDynamicForm.tsx';
10
+
11
+ export default defineComponent({
12
+ name: 'UIDynamicForm',
13
+ setup() {
14
+ const reactRoot = ref(null);
15
+ onMounted(() => {
16
+ const root = createRoot(reactRoot.value);
17
+ root.render(React.createElement(UIDynamicForm));
18
+ });
19
+ return {
20
+ reactRoot,
21
+ };
22
+ },
23
+ });
24
+ </script>
25
+
26
+ <style>
27
+ </style>
package/ui/components/UIDynamicForm.jsx DELETED
@@ -1,5 +0,0 @@
1
- import React from "react"
2
-
3
- export default function UIDynamicForm() {
4
- return <h1 className="reactclass">amk qn2 yeah yeah</h1>
5
- }
package/ui/components/Wrapper.vue DELETED
@@ -1,29 +0,0 @@
1
- <template>
2
- <div ref="reactRoot"></div>
3
- </template>
4
-
5
- <script>
6
- import { defineComponent, onMounted, ref } from 'vue';
7
- import React from 'react';
8
- import { createRoot } from 'react-dom/client';
9
- import UIDynamicForm from './UIDynamicForm.jsx';
10
-
11
- export default defineComponent({
12
- name: 'UIDynamicForm',
13
- setup() {
14
- const reactRoot = ref(null);
15
-
16
- onMounted(() => {
17
- const root = createRoot(reactRoot.value);
18
- root.render(React.createElement(UIDynamicForm));
19
- });
20
-
21
- return {
22
- reactRoot,
23
- };
24
- },
25
- });
26
- </script>
27
-
28
- <style>
29
- </style>