@axdspub/axiom-ui-forms 0.1.1 → 0.1.2
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/README.md +14 -1
- package/library/axiom-ui-forms.d.ts +186 -0
- package/library/index.js +16164 -0
- package/library/index.js.map +1 -0
- package/library/umd.js +16200 -0
- package/library/umd.js.map +1 -0
- package/package.json +1 -1
- package/.dockerignore +0 -4
- package/.storybook/main.ts +0 -43
- package/.storybook/preview.ts +0 -16
- package/.vscode/extensions.json +0 -5
- package/.vscode/settings.json +0 -10
- package/Dockerfile +0 -34
- package/docker/nginx/conf.d/default.conf +0 -46
- package/public/exampleForm.json +0 -77
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -43
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +0 -25
- package/public/robots.txt +0 -3
package/README.md
CHANGED
@@ -1,9 +1,22 @@
|
|
1
|
-
|
1
|
+
React library that allows:
|
2
2
|
- Creation of forms using a json config file
|
3
3
|
- Creation of forms using a [json schema draft 6](https://json-schema.org/draft-06/json-schema-release-notes), with selective overrides using json config
|
4
4
|
- To do: allow addition of new form types and UI components by consuming library
|
5
5
|
- To do: allow schema version 4 and draft 7
|
6
6
|
|
7
|
+
|
8
|
+
|
9
|
+
## Examples
|
10
|
+
|
11
|
+
# Create a form using a config
|
12
|
+
|
13
|
+
```
|
14
|
+
import
|
15
|
+
|
16
|
+
```
|
17
|
+
|
18
|
+
|
19
|
+
|
7
20
|
## Testing build locally
|
8
21
|
|
9
22
|
```
|
@@ -0,0 +1,186 @@
|
|
1
|
+
import { GeoJSON } from 'geojson';
|
2
|
+
import { ReactElement } from 'react';
|
3
|
+
|
4
|
+
interface IValueTypes {
|
5
|
+
text: string;
|
6
|
+
number: number;
|
7
|
+
date: string;
|
8
|
+
datetime: string;
|
9
|
+
time: string;
|
10
|
+
boolean: boolean;
|
11
|
+
geojson: GeoJSON;
|
12
|
+
json: JSON;
|
13
|
+
composite: ICompositeValueType;
|
14
|
+
}
|
15
|
+
type ValueOf<T> = T[keyof T];
|
16
|
+
interface ICompositeValueType {
|
17
|
+
[key: string]: IValueType | IValueType[] | undefined;
|
18
|
+
}
|
19
|
+
type IValueType = undefined | null | ValueOf<IValueTypes>;
|
20
|
+
type IFormField = ITextField | ILongTextField | IJSONField | ISelectField | IRadioField | ICheckboxField | IDateField | ITimeField | IDateTimeField | IBooleanField | IObjectField | IGeoJSONField | IFormFieldSection;
|
21
|
+
type IFormFieldType = 'section' | 'text' | 'long_text' | 'number' | 'json' | 'select' | 'radio' | 'checkbox' | 'date' | 'time' | 'datetime' | 'boolean' | 'object' | 'geojson';
|
22
|
+
interface IFieldConditions {
|
23
|
+
dependsOn: string | string[];
|
24
|
+
value: string | number | boolean;
|
25
|
+
}
|
26
|
+
interface IFormFieldRoot {
|
27
|
+
id: string;
|
28
|
+
type: IFormFieldType;
|
29
|
+
required?: boolean;
|
30
|
+
label?: string | null | undefined;
|
31
|
+
multiple?: boolean;
|
32
|
+
path?: string[];
|
33
|
+
fullPath?: string[];
|
34
|
+
level?: number;
|
35
|
+
value?: IValueType;
|
36
|
+
conditions?: IFieldConditions;
|
37
|
+
}
|
38
|
+
interface IStringValueInput extends IFormFieldRoot {
|
39
|
+
value?: 'text' | 'number';
|
40
|
+
placeholder?: string;
|
41
|
+
}
|
42
|
+
interface ITextField extends IStringValueInput {
|
43
|
+
type: 'text' | 'number';
|
44
|
+
}
|
45
|
+
interface ILongTextField extends IStringValueInput {
|
46
|
+
type: 'long_text';
|
47
|
+
}
|
48
|
+
interface IJSONField extends IFormFieldRoot {
|
49
|
+
type: 'json';
|
50
|
+
}
|
51
|
+
interface ISelectOption {
|
52
|
+
label: string;
|
53
|
+
value: string;
|
54
|
+
}
|
55
|
+
interface ISelectableInput extends IFormFieldRoot {
|
56
|
+
options?: ISelectOption[];
|
57
|
+
options_source?: {
|
58
|
+
type: 'url';
|
59
|
+
url: string;
|
60
|
+
method?: 'GET' | 'POST';
|
61
|
+
headers?: Record<string, string>;
|
62
|
+
body?: Record<string, string>;
|
63
|
+
value_key: string;
|
64
|
+
label_key: string;
|
65
|
+
};
|
66
|
+
}
|
67
|
+
interface ISingleSelectableInput extends ISelectableInput {
|
68
|
+
value?: 'text' | 'number';
|
69
|
+
}
|
70
|
+
interface IMultiSelectableInput extends ISelectableInput {
|
71
|
+
values?: Array<'text' | 'number'>;
|
72
|
+
}
|
73
|
+
interface ISelectField extends ISingleSelectableInput {
|
74
|
+
type: 'select';
|
75
|
+
}
|
76
|
+
interface IRadioField extends ISingleSelectableInput {
|
77
|
+
type: 'radio';
|
78
|
+
layout?: 'horizontal' | 'vertical';
|
79
|
+
}
|
80
|
+
interface ICheckboxField extends IMultiSelectableInput {
|
81
|
+
type: 'checkbox';
|
82
|
+
}
|
83
|
+
interface IBooleanField extends IFormFieldRoot {
|
84
|
+
type: 'boolean';
|
85
|
+
value?: 'boolean';
|
86
|
+
}
|
87
|
+
interface IDateField extends IFormFieldRoot {
|
88
|
+
type: 'date';
|
89
|
+
value?: 'date';
|
90
|
+
}
|
91
|
+
interface ITimeField extends IFormFieldRoot {
|
92
|
+
type: 'time';
|
93
|
+
value?: 'time';
|
94
|
+
}
|
95
|
+
interface IDateTimeField extends IFormFieldRoot {
|
96
|
+
type: 'datetime';
|
97
|
+
value?: 'datetime';
|
98
|
+
}
|
99
|
+
interface IContainerField extends IFormFieldRoot {
|
100
|
+
skip_path?: boolean;
|
101
|
+
fields: IFormField[];
|
102
|
+
layout?: 'horizontal' | 'vertical' | 'grid2' | 'grid3' | 'grid4';
|
103
|
+
}
|
104
|
+
interface IObjectField extends IContainerField {
|
105
|
+
type: 'object';
|
106
|
+
}
|
107
|
+
interface IFormFieldSection extends IContainerField {
|
108
|
+
type: 'section';
|
109
|
+
description?: string;
|
110
|
+
multiple: false;
|
111
|
+
value: undefined;
|
112
|
+
values: undefined;
|
113
|
+
}
|
114
|
+
interface IGeoJSONField extends IFormFieldRoot {
|
115
|
+
type: 'geojson';
|
116
|
+
value?: 'geojson';
|
117
|
+
exclude_types?: string[];
|
118
|
+
include_types?: string[];
|
119
|
+
}
|
120
|
+
interface IPage {
|
121
|
+
id: string;
|
122
|
+
label: string;
|
123
|
+
description?: string;
|
124
|
+
sections: IFormFieldSection[];
|
125
|
+
}
|
126
|
+
interface IForm {
|
127
|
+
id: string;
|
128
|
+
label: string;
|
129
|
+
description?: string;
|
130
|
+
fields: IFormField[];
|
131
|
+
}
|
132
|
+
interface IFormWithPages {
|
133
|
+
id: string;
|
134
|
+
label: string;
|
135
|
+
description?: string;
|
136
|
+
pages: IPage[];
|
137
|
+
}
|
138
|
+
interface IFormFieldProps {
|
139
|
+
field: IFormField;
|
140
|
+
onChange?: IValueChangeFn;
|
141
|
+
}
|
142
|
+
type IFormValues = Record<string, IValueType | IValueType[]>;
|
143
|
+
type IFormInputComponent = React.FC<IFormFieldProps>;
|
144
|
+
type IValueChangeFn = (v: IValueType | IValueType[] | undefined) => void;
|
145
|
+
interface IFieldInputProps {
|
146
|
+
form: IForm;
|
147
|
+
field: IFormField;
|
148
|
+
onChange: IValueChangeFn;
|
149
|
+
formValueState: [IFormValues, (v: IFormValues) => void];
|
150
|
+
value?: IValueType;
|
151
|
+
}
|
152
|
+
|
153
|
+
declare const getChildFields: (field: IFormField) => IFormField[];
|
154
|
+
declare const addFieldPath: (field: IFormField, parentPath?: string[]) => IFormField;
|
155
|
+
declare const getUniqueFormFields: (form: IForm) => IFormField[];
|
156
|
+
declare const getFields: (fields: IFormField[]) => IFormField[];
|
157
|
+
declare function copyAndAddPathToFields<T extends IForm | IFormFieldSection | IObjectField>(formOrContainer: T): T;
|
158
|
+
declare function getFieldValue(field: IFormField, formValues: IFormValues): IValueType | IValueType[] | undefined;
|
159
|
+
declare function getPathFromField(field: IFormField): string;
|
160
|
+
declare const checkCondition: (field: IFormField, formValues: IFormValues) => boolean;
|
161
|
+
declare function cleanUnusedDependenciesFromFormValues(form: IForm, formValues: IFormValues): IFormValues;
|
162
|
+
|
163
|
+
interface IFieldCreator {
|
164
|
+
field: IFormField;
|
165
|
+
form: IForm;
|
166
|
+
onChange?: IValueChangeFn;
|
167
|
+
className?: string;
|
168
|
+
defaultClassName?: string;
|
169
|
+
value?: IValueType | IValueType[];
|
170
|
+
formValueState: [IFormValues, (v: IFormValues) => void];
|
171
|
+
}
|
172
|
+
declare const FieldCreator: ({ field, form, value, onChange, className, defaultClassName, formValueState }: IFieldCreator) => ReactElement | null;
|
173
|
+
|
174
|
+
declare const BooleanInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
175
|
+
|
176
|
+
declare const JSONStringInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
177
|
+
|
178
|
+
declare const NumberInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
179
|
+
|
180
|
+
declare const StringInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
181
|
+
|
182
|
+
declare const LongStringInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
183
|
+
|
184
|
+
declare const SingleSelectInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
|
185
|
+
|
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 };
|