@axdspub/axiom-ui-forms 0.1.3 → 0.1.4
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/.gitlab-ci.yml +0 -31
- package/README.md +172 -8
- package/library/index.js +1 -1
- package/library/index.js.map +1 -1
- package/library/umd.js +1 -1
- package/library/umd.js.map +1 -1
- package/package.json +3 -2
- package/src/Form/Components/FieldCreator.tsx +1 -1
- package/src/Form/SchemaToForm.tsx +3 -3
package/.gitlab-ci.yml
CHANGED
@@ -25,27 +25,6 @@ push_latest:
|
|
25
25
|
- docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:latest
|
26
26
|
- docker push registry.axiom/$CI_PROJECT_NAME:latest
|
27
27
|
|
28
|
-
push_branch:
|
29
|
-
stage: push
|
30
|
-
only:
|
31
|
-
- branches
|
32
|
-
except:
|
33
|
-
- main
|
34
|
-
script:
|
35
|
-
- docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:$CI_COMMIT_REF_NAME
|
36
|
-
- docker push registry.axiom/$CI_PROJECT_NAME:$CI_COMMIT_REF_NAME
|
37
|
-
|
38
|
-
|
39
|
-
push_tag:
|
40
|
-
stage: push
|
41
|
-
only:
|
42
|
-
- tags
|
43
|
-
script:
|
44
|
-
- docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
|
45
|
-
- docker push registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
|
46
|
-
- docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:prod
|
47
|
-
- docker push registry.axiom/$CI_PROJECT_NAME:prod
|
48
|
-
|
49
28
|
clean_latest:
|
50
29
|
stage: clean
|
51
30
|
only:
|
@@ -54,16 +33,6 @@ clean_latest:
|
|
54
33
|
- docker rmi --no-prune $CI_PROJECT_NAME:$CI_PIPELINE_ID
|
55
34
|
- docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:latest
|
56
35
|
|
57
|
-
clean_tag:
|
58
|
-
stage: clean
|
59
|
-
only:
|
60
|
-
- tags
|
61
|
-
script:
|
62
|
-
- docker rmi --no-prune $CI_PROJECT_NAME:$CI_PIPELINE_ID
|
63
|
-
- docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
|
64
|
-
- docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:prod
|
65
|
-
|
66
|
-
|
67
36
|
deploy_app:
|
68
37
|
stage: deploy
|
69
38
|
only:
|
package/README.md
CHANGED
@@ -1,27 +1,191 @@
|
|
1
1
|
React library that allows:
|
2
2
|
- Creation of forms using a json config file
|
3
|
-
- Creation of forms using a [json schema draft
|
4
|
-
- To do:
|
5
|
-
-
|
3
|
+
- Creation of forms using a [json schema draft 7](https://json-schema.org/draft-07/json-schema-release-notes), with selective overrides using json config
|
4
|
+
- To do:
|
5
|
+
- allow addition of new form types and UI components by consuming library
|
6
|
+
- allow schema version 4 and draft 6
|
7
|
+
- support schema `required`
|
8
|
+
- support version 7 `if`/`then`/`else`
|
9
|
+
- support version 7 `readOnly`
|
10
|
+
- support version 7 `writeOnly`
|
6
11
|
|
7
12
|
|
13
|
+
.
|
8
14
|
|
9
|
-
|
15
|
+
# [Examples](https://axiom-ui-forms.srv.axds.co/)
|
10
16
|
|
11
|
-
|
17
|
+
## Create a form using a config
|
18
|
+
|
19
|
+
Test form config [here](https://axiom-ui-forms.srv.axds.co/)
|
20
|
+
|
21
|
+
```json
|
22
|
+
{
|
23
|
+
"id": "example",
|
24
|
+
"label": "Example form",
|
25
|
+
"description": "This is just an example",
|
26
|
+
"fields": [
|
27
|
+
{
|
28
|
+
"id": "title",
|
29
|
+
"type": "text",
|
30
|
+
"label": "Title"
|
31
|
+
},
|
32
|
+
{
|
33
|
+
"id": "description",
|
34
|
+
"type": "long_text",
|
35
|
+
"label": "Description"
|
36
|
+
},
|
37
|
+
{
|
38
|
+
"id": "favorites",
|
39
|
+
"type": "text",
|
40
|
+
"label": "List your favorite things",
|
41
|
+
"multiple": true
|
42
|
+
},
|
43
|
+
{
|
44
|
+
"id": "agree",
|
45
|
+
"type": "boolean",
|
46
|
+
"label": "Do you agree?"
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"id": "signature",
|
50
|
+
"type": "text",
|
51
|
+
"label": "Sign your name then",
|
52
|
+
"conditions": { "dependsOn": "agree" }
|
53
|
+
}
|
54
|
+
]
|
55
|
+
}
|
56
|
+
```
|
57
|
+
|
58
|
+
|
59
|
+
```ts
|
60
|
+
import React, {type ReactElement} from 'react'
|
61
|
+
import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'
|
62
|
+
|
63
|
+
export default ExampleForm = ({formConfig}: {formConfig: IForm}): ReactElement => {
|
64
|
+
const formValueState = React.useState<IFormValues>({})
|
65
|
+
const [formValues] = formValueState
|
66
|
+
useEffect(()=>{
|
67
|
+
// respond to change in formValues
|
68
|
+
},[formValues])
|
69
|
+
|
70
|
+
return (
|
71
|
+
<FormCreator form={formConfig} formValueState={} >
|
72
|
+
)
|
73
|
+
}
|
74
|
+
|
75
|
+
```
|
76
|
+
|
77
|
+
|
78
|
+
# Create a form using a schema
|
79
|
+
|
80
|
+
Test schema to form [here](https://axiom-ui-forms.srv.axds.co/schema-to-form)
|
81
|
+
|
82
|
+
```json
|
83
|
+
{
|
84
|
+
"$id": "/test/schema",
|
85
|
+
"type": "object",
|
86
|
+
"properties": {
|
87
|
+
"label": {
|
88
|
+
"type": "string",
|
89
|
+
"maxLength": 100
|
90
|
+
},
|
91
|
+
"description": {
|
92
|
+
"type": "string"
|
93
|
+
},
|
94
|
+
"agree": {
|
95
|
+
"type": "boolean",
|
96
|
+
},
|
97
|
+
"signature": {
|
98
|
+
"type": "string"
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
12
102
|
|
13
103
|
```
|
14
|
-
import
|
15
104
|
|
105
|
+
Coming soon...
|
106
|
+
```json
|
107
|
+
{
|
108
|
+
"$id": "/test/schema",
|
109
|
+
"type": "object",
|
110
|
+
"required": [
|
111
|
+
"label",
|
112
|
+
"description",
|
113
|
+
"agree"
|
114
|
+
],
|
115
|
+
"properties": {
|
116
|
+
"label": {
|
117
|
+
"type": "string",
|
118
|
+
"maxLength": 100
|
119
|
+
},
|
120
|
+
"description": {
|
121
|
+
"type": "string"
|
122
|
+
},
|
123
|
+
"agree": {
|
124
|
+
"type": "boolean"
|
125
|
+
}
|
126
|
+
},
|
127
|
+
"dependentSchemas": {
|
128
|
+
"agree": {
|
129
|
+
"properties": {
|
130
|
+
"signature": {
|
131
|
+
"type": "string",
|
132
|
+
"maxLength": 100
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
}
|
16
138
|
```
|
17
139
|
|
18
140
|
|
19
141
|
|
20
|
-
|
142
|
+
```ts
|
143
|
+
import React, {type ReactElement} from 'react'
|
144
|
+
import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'
|
145
|
+
import { type JSONSchema7 } from 'json-schema'
|
146
|
+
|
147
|
+
export default ExampleForm = ({schema}:{schema: JSONSchema7 }): ReactElement => {
|
148
|
+
const formValueState = React.useState<IFormValues>({})
|
149
|
+
const [formValues] = formValueState
|
150
|
+
useEffect(()=>{
|
151
|
+
// respond to change in formValues
|
152
|
+
},[formValues])
|
153
|
+
const errors = validateSchema(schema)
|
154
|
+
const formConfig = errors === null
|
155
|
+
? schemaToFormObject(schema)
|
156
|
+
: null
|
157
|
+
|
158
|
+
return (
|
159
|
+
<>{
|
160
|
+
errors !== null
|
161
|
+
? <p>Schema errors: {{errors}}</p>
|
162
|
+
: <FormCreator form={formConfig} formValueState={} >
|
163
|
+
}</>
|
164
|
+
|
165
|
+
)
|
166
|
+
|
167
|
+
}
|
21
168
|
|
22
169
|
```
|
170
|
+
|
171
|
+
# Create a form using a schema, and modify it with a form config
|
172
|
+
|
173
|
+
Coming soon
|
174
|
+
|
175
|
+
|
176
|
+
|
177
|
+
# Testing build locally
|
178
|
+
|
179
|
+
```bash
|
23
180
|
npm i spa-http-server -g
|
24
181
|
npm run build
|
25
182
|
cd build
|
26
183
|
http-server --push-state -p 8091 -o
|
27
|
-
```
|
184
|
+
```
|
185
|
+
|
186
|
+
# Publish version to NPM
|
187
|
+
|
188
|
+
```bash
|
189
|
+
npm login --scope=@axdspub
|
190
|
+
npm publish --access public
|
191
|
+
```
|
package/library/index.js
CHANGED
@@ -16108,7 +16108,7 @@ var OneOfMultiple = function (_a) {
|
|
16108
16108
|
return (React__default.createElement("div", { className: 'flex flex-col gap-2' },
|
16109
16109
|
React__default.createElement(InputComponent, { formValueState: formValueState, form: form, field: __assign$1(__assign$1({}, field), { required: false, label: index > 0 ? null : field.label, id: "".concat(field.id, "-").concat(index) }), value: value, onChange: function (v) {
|
16110
16110
|
var newValues = __spreadArray$1([], values, true);
|
16111
|
-
newValues[index] =
|
16111
|
+
newValues[index] = v;
|
16112
16112
|
onChange(newValues);
|
16113
16113
|
} }),
|
16114
16114
|
React__default.createElement("div", { className: 'flex flex-row justify-between w-full p-2' },
|