@axdspub/axiom-ui-forms 0.1.2 → 0.1.4

package/.gitlab-ci.yml

@@ -25,27 +25,6 @@ push_latest:
     - docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:latest
     - docker push registry.axiom/$CI_PROJECT_NAME:latest
 
-push_branch:
-  stage: push
-  only:
-    - branches
-  except:
-    - main
-  script:
-    - docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:$CI_COMMIT_REF_NAME
-    - docker push registry.axiom/$CI_PROJECT_NAME:$CI_COMMIT_REF_NAME
-
-
-push_tag:
-  stage: push
-  only:
-    - tags
-  script:
-    - docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
-    - docker push registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
-    - docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:prod
-    - docker push registry.axiom/$CI_PROJECT_NAME:prod
-
 clean_latest:
   stage: clean
   only:
@@ -54,16 +33,6 @@ clean_latest:
     - docker rmi --no-prune $CI_PROJECT_NAME:$CI_PIPELINE_ID
     - docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:latest
 
-clean_tag:
-  stage: clean
-  only:
-    - tags
-  script:
-    - docker rmi --no-prune $CI_PROJECT_NAME:$CI_PIPELINE_ID
-    - docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:$CI_BUILD_TAG
-    - docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:prod
-
-
 deploy_app:
   stage: deploy
   only:

package/README.md

@@ -1,27 +1,191 @@
 React library that allows:
 - Creation of forms using a json config file
-- 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
-- To do: allow addition of new form types and UI components by consuming library
-- To do: allow schema version 4 and draft 7
+- 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
+- To do: 
+    - allow addition of new form types and UI components by consuming library
+    - allow schema version 4 and draft 6
+    - support schema `required`
+    - support version 7 `if`/`then`/`else`
+    - support version 7 `readOnly`
+    - support version 7 `writeOnly`
 
 
+.
 
-## Examples
+# [Examples](https://axiom-ui-forms.srv.axds.co/)
 
-# Create a form using a config
+## Create a form using a config
+
+Test form config [here](https://axiom-ui-forms.srv.axds.co/)
+
+```json
+{
+    "id": "example",
+    "label": "Example form",
+    "description": "This is just an example",
+    "fields": [
+        {
+            "id": "title",
+            "type": "text",
+            "label": "Title"
+        },
+        {
+            "id": "description",
+            "type": "long_text",
+            "label": "Description"
+        },
+         {
+            "id": "favorites",
+            "type": "text",
+            "label": "List your favorite things",
+           "multiple": true
+        },
+        {
+            "id": "agree",
+            "type": "boolean",
+            "label": "Do you agree?"
+        },
+        {
+            "id": "signature",
+            "type": "text",
+            "label": "Sign your name then",
+            "conditions": { "dependsOn": "agree" }
+        }
+    ]
+}
+```
+
+
+```ts
+import React, {type ReactElement} from 'react'
+import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'
+
+export default ExampleForm = ({formConfig}: {formConfig: IForm}): ReactElement => {
+    const formValueState = React.useState<IFormValues>({})
+    const [formValues] = formValueState
+    useEffect(()=>{
+        // respond to change in formValues
+    },[formValues])
+
+    return (
+        <FormCreator form={formConfig} formValueState={} >
+    )
+}
+
+```
+
+
+# Create a form using a schema
+
+Test schema to form [here](https://axiom-ui-forms.srv.axds.co/schema-to-form)
+
+```json
+{
+  "$id": "/test/schema",
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "maxLength": 100
+    },
+    "description": {
+      "type": "string"
+    },
+    "agree": {
+      "type": "boolean",
+    },
+    "signature": {
+        "type": "string"
+    }
+  }
+}
 
 ```
-import 
 
+Coming soon...
+```json
+{
+  "$id": "/test/schema",
+  "type": "object",
+  "required": [
+    "label",
+    "description",
+    "agree"
+  ],
+  "properties": {
+    "label": {
+      "type": "string",
+      "maxLength": 100
+    },
+    "description": {
+      "type": "string"
+    },
+    "agree": {
+      "type": "boolean"
+    }
+  },
+  "dependentSchemas": {
+    "agree": {
+      "properties": {
+        "signature": {
+          "type": "string",
+          "maxLength": 100
+        }
+      }
+    }
+  }
+}
 ```
 
 
 
-## Testing build locally
+```ts
+import React, {type ReactElement} from 'react'
+import { FormCreator, type IForm, type IFormValues } from '@axdspub/axiom-ui-forms'
+import { type JSONSchema7 } from 'json-schema'
+
+export default ExampleForm = ({schema}:{schema: JSONSchema7 }): ReactElement => {
+    const formValueState = React.useState<IFormValues>({})
+    const [formValues] = formValueState
+    useEffect(()=>{
+        // respond to change in formValues
+    },[formValues])
+    const errors = validateSchema(schema)
+    const formConfig = errors === null
+        ? schemaToFormObject(schema)
+        : null
+
+    return (
+        <>{
+            errors !== null
+                ? <p>Schema errors: {{errors}}</p>
+                : <FormCreator form={formConfig} formValueState={} >
+        }</>
+        
+    )
+
+}
 
 ```
+
+# Create a form using a schema, and modify it with a form config
+
+Coming soon
+
+
+
+# Testing build locally
+
+```bash
 npm i spa-http-server -g
 npm run build
 cd build
 http-server --push-state -p 8091 -o
-```
+```
+
+# Publish version to NPM
+
+```bash
+npm login --scope=@axdspub
+npm publish --access public
+```

package/library/axiom-ui-forms.d.ts

@@ -160,6 +160,14 @@ declare function getPathFromField(field: IFormField): string;
 declare const checkCondition: (field: IFormField, formValues: IFormValues) => boolean;
 declare function cleanUnusedDependenciesFromFormValues(form: IForm, formValues: IFormValues): IFormValues;
 
+declare const FormCreator: ({ form, formValueState, note, error, onChange }: {
+    form: IForm;
+    formValueState: [IFormValues, (v: IFormValues) => void];
+    note?: string;
+    error?: string;
+    onChange?: IValueChangeFn;
+}) => ReactElement;
+
 interface IFieldCreator {
     field: IFormField;
     form: IForm;
@@ -183,4 +191,4 @@ declare const LongStringInput: ({ field, onChange, value }: IFieldInputProps) =>
 
 declare const SingleSelectInput: ({ field, onChange, value }: IFieldInputProps) => ReactElement;
 
-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 };
+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 };