@axdspub/axiom-ui-forms 0.1.2 → 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/axiom-ui-forms.d.ts +9 -1
- package/library/index.js +306 -254
- package/library/index.js.map +1 -1
- package/library/umd.js +600 -547
- package/library/umd.js.map +1 -1
- package/package.json +3 -2
- package/rollup.config.mjs +10 -0
- package/src/Form/Components/FieldCreator.tsx +1 -1
- package/src/Form/SchemaToForm.tsx +3 -3
- package/src/Form/index.ts +1 -0
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
|
+
```
|
@@ -160,6 +160,14 @@ declare function getPathFromField(field: IFormField): string;
|
|
160
160
|
declare const checkCondition: (field: IFormField, formValues: IFormValues) => boolean;
|
161
161
|
declare function cleanUnusedDependenciesFromFormValues(form: IForm, formValues: IFormValues): IFormValues;
|
162
162
|
|
163
|
+
declare const FormCreator: ({ form, formValueState, note, error, onChange }: {
|
164
|
+
form: IForm;
|
165
|
+
formValueState: [IFormValues, (v: IFormValues) => void];
|
166
|
+
note?: string;
|
167
|
+
error?: string;
|
168
|
+
onChange?: IValueChangeFn;
|
169
|
+
}) => ReactElement;
|
170
|
+
|
163
171
|
interface IFieldCreator {
|
164
172
|
field: IFormField;
|
165
173
|
form: IForm;
|
@@ -183,4 +191,4 @@ declare const LongStringInput: ({ field, onChange, value }: IFieldInputProps) =>
|
|
183
191
|
|
184
192
|
declare const SingleSelectInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
185
193
|
|
186
|
-
export { BooleanInput, FieldCreator, type IBooleanField, type ICheckboxField, type ICompositeValueType, type IFieldInputProps, type IForm, type IFormField, type IFormFieldProps, type IFormFieldSection, type IFormFieldType, type IFormInputComponent, type IFormValues, type IFormWithPages, type IObjectField, type IPage, type IRadioField, type ISelectField, type IValueChangeFn, type IValueType, JSONStringInput, LongStringInput as LongTextInput, NumberInput, SingleSelectInput as SelectInput, StringInput as TextInput, addFieldPath, checkCondition, cleanUnusedDependenciesFromFormValues, copyAndAddPathToFields, getChildFields, getFieldValue, getFields, getPathFromField, getUniqueFormFields };
|
194
|
+
export { BooleanInput, FieldCreator, FormCreator, type IBooleanField, type ICheckboxField, type ICompositeValueType, type IFieldInputProps, type IForm, type IFormField, type IFormFieldProps, type IFormFieldSection, type IFormFieldType, type IFormInputComponent, type IFormValues, type IFormWithPages, type IObjectField, type IPage, type IRadioField, type ISelectField, type IValueChangeFn, type IValueType, JSONStringInput, LongStringInput as LongTextInput, NumberInput, SingleSelectInput as SelectInput, StringInput as TextInput, addFieldPath, checkCondition, cleanUnusedDependenciesFromFormValues, copyAndAddPathToFields, getChildFields, getFieldValue, getFields, getPathFromField, getUniqueFormFields };
|