@react-typed-forms/schemas 1.0.0-dev.22 → 1.0.0-dev.24

package/README.md

@@ -95,9 +95,78 @@ A `SchemaField` is a JSON object which describes the definition of a field insid
 
 Each `SchemaField` can also be marked as a `collection` which means that it will be mapped to a JSON array of the defined `FieldType`.
 
-TODO - buildSchema, FieldOptions, extending FieldType
+### Defining fields
+
+While you can define a `SchemaField` as plain JSON, e.g. 
+```json
+[
+  {
+    "type": "String",
+    "field": "firstName",
+    "displayName": "First Name"
+  },
+  {
+    "type": "String",
+    "field": "lastName",
+    "displayName": "Last Name",
+    "required": true
+  },
+  {
+    "type": "Int",
+    "field": "yearOfBirth",
+    "displayName": "Year of birth",
+    "defaultValue": 1980
+  }
+]
+```
+
+However if you have existing types which you would like to define `SchemaField`s for the library contains a function called `buildSchema` a type safe way of generating fields for a type:
+
+```tsx
+interface SimpleForm {
+  firstName: string;
+  lastName: string;
+  yearOfBirth: number;
+}
+
+const simpleSchema = buildSchema<SimpleForm>({
+  firstName: stringField("First Name"),
+  lastName: stringField("Last Name", { required: true }),
+  yearOfBirth: intField("Year of birth", { defaultValue: 1980 }),
+});
+```
+
+### Field options
+
+Often a field only has a set of allowed values, e.g. a enum. `SchemaField` allows this to be modeled by 
+providing an array of `FieldOption`: 
+
+<!-- AUTO-GENERATED-CONTENT:START (CODE:src=./src/types.ts&lines=37-41) -->
+<!-- The below code snippet is automatically added from ./src/types.ts -->
+```ts
+export interface FieldOption {
+  name: string;
+  value: any;
+}
+```
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+For example you could only allow certain last names:
+
+```ts
+stringField('Last Name', { 
+    required: true,
+    options:[ 
+        { name: "Smith", value: "smith" }, 
+        { name: "Jones", value: "jones" }
+    ]
+});
+```
+
+<img src="../../images/schemas-option.png">
 
 ### `ControlDefinition`
+
 A `ControlDefinition` is a JSON object which describes what should be rendered in a UI. Each `ControlDefinition` can be one of 4 distinct types:
 
 * `DataControlDefinition` - Points to a `SchemaField` in order to render a control for editing of data.

package/lib/controlBuilder.d.ts

@@ -0,0 +1,7 @@
+import { DataControlDefinition, DisplayControlDefinition, DynamicProperty, EntityExpression, FieldValueExpression, JsonataExpression } from "./types";
+export declare function dataControl(field: string, title?: string | null, options?: Partial<DataControlDefinition>): DataControlDefinition;
+export declare function textDisplayControl(text: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
+export declare function htmlDisplayControl(html: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
+export declare function visibility(expr: EntityExpression): DynamicProperty;
+export declare function fieldEqExpr(field: string, value: any): FieldValueExpression;
+export declare function jsonataExpr(expression: string): JsonataExpression;

package/lib/controlRender.d.ts

@@ -3,7 +3,7 @@ import { Key, ReactElement, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 export interface SchemaHooks {
     useExpression(expr: EntityExpression, formState: FormEditState): Control<any | undefined>;
-    useValidators(formState: FormEditState, isVisible: boolean, control: Control<any>, required: boolean, validations?: SchemaValidator[] | null): void;
+    useValidators(formState: FormEditState, isVisible: boolean | undefined, control: Control<any>, required: boolean, validations?: SchemaValidator[] | null): void;
 }
 export interface FormEditHooks {
     useDataProperties(formState: FormEditState, definition: DataControlDefinition, field: SchemaField): DataRendererProps;
@@ -79,7 +79,7 @@ export interface FormRenderer {
     renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
 }
 export interface Visibility {
-    value: boolean;
+    value: boolean | undefined;
     canChange: boolean;
 }
 export interface LabelRendererProps {

package/lib/hooks.d.ts

@@ -8,4 +8,5 @@ export declare function getOptionsForScalarField(field: SchemaField): FieldOptio
 export declare function createDefaultSchemaHooks(): SchemaHooks;
 export declare const defaultFormEditHooks: FormEditHooks;
 export declare function createFormEditHooks(schemaHooks: SchemaHooks): FormEditHooks;
+export declare const emptyGroupDefinition: GroupedControlsDefinition;
 export declare function useControlDefinitionForSchema(sf: SchemaField[], definition?: GroupedControlsDefinition): GroupedControlsDefinition;

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./types";
 export * from "./schemaBuilder";
+export * from "./controlBuilder";
 export * from "./controlRender";
 export * from "./hooks";
 export * from "./util";

package/lib/index.js

@@ -9,64 +9,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var jsonata__default = /*#__PURE__*/_interopDefaultLegacy(jsonata);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 exports.FieldType = void 0;
 (function (FieldType) {
   FieldType["String"] = "String";
@@ -179,27 +121,66 @@ function visitControlDefinition(x, visitor, defaultValue) {
       return defaultValue(x);
   }
 }
-function dataControl(field, options) {
-  return _extends({
-    type: exports.ControlDefinitionType.Data,
-    field: field
-  }, options);
+function isGridRenderer(options) {
+  return options.type === exports.GroupRenderType.Grid;
 }
-function fieldValueExpr(field, value) {
-  return {
-    type: exports.ExpressionType.FieldValue,
-    field: field,
-    value: value
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
   };
+  return _extends.apply(this, arguments);
 }
-function visibility(expr) {
-  return {
-    type: exports.DynamicPropertyType.Visible,
-    expr: expr
-  };
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
 }
-function isGridRenderer(options) {
-  return options.type === exports.GroupRenderType.Grid;
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function buildSchema(def) {
@@ -276,6 +257,51 @@ function defaultCompoundField(field, displayName, collection) {
   };
 }
 
+function dataControl(field, title, options) {
+  return _extends({
+    type: exports.ControlDefinitionType.Data,
+    field: field,
+    title: title
+  }, options);
+}
+function textDisplayControl(text, options) {
+  return _extends({
+    type: exports.ControlDefinitionType.Display,
+    displayData: {
+      type: exports.DisplayDataType.Text,
+      text: text
+    }
+  }, options);
+}
+function htmlDisplayControl(html, options) {
+  return _extends({
+    type: exports.ControlDefinitionType.Display,
+    displayData: {
+      type: exports.DisplayDataType.Html,
+      html: html
+    }
+  }, options);
+}
+function visibility(expr) {
+  return {
+    type: exports.DynamicPropertyType.Visible,
+    expr: expr
+  };
+}
+function fieldEqExpr(field, value) {
+  return {
+    type: exports.ExpressionType.FieldValue,
+    field: field,
+    value: value
+  };
+}
+function jsonataExpr(expression) {
+  return {
+    type: exports.ExpressionType.Jsonata,
+    expression: expression
+  };
+}
+
 function applyDefaultValues(v, fields) {
   if (!v) return defaultValueForFields(fields);
   var applyValue = fields.filter(function (x) {
@@ -598,7 +624,7 @@ function useIsControlVisible(definition, formState, hooks) {
   if (visibleExpression && visibleExpression.expr) {
     var exprValue = hooks.useExpression(visibleExpression.expr, formState).value;
     return {
-      value: Boolean(exprValue),
+      value: exprValue,
       canChange: true
     };
   }
@@ -670,7 +696,7 @@ function createDefaultSchemaHooks() {
           } catch (e) {
             return Promise.reject(e);
           }
-        });
+        }, true);
         return control;
       case exports.ExpressionType.FieldValue:
         var fvExpr = expr;
@@ -684,7 +710,7 @@ function createDefaultSchemaHooks() {
   }
   function useValidators(formState, isVisible, control, required, validators) {
     if (required) core.useValidator(control, function (v) {
-      return isVisible && (v == null || v == "") ? "Please enter a value" : null;
+      return isVisible === true && (v == null || v === "") ? "Please enter a value" : null;
     }, "required");
     validators == null || validators.forEach(function (v, i) {
       switch (v.type) {
@@ -741,7 +767,7 @@ function createFormEditHooks(schemaHooks) {
       var defaultValue = useDefaultValue(definition, field, formState, schemaHooks);
       var scalarControl = formState.data.fields[field.field];
       React.useEffect(function () {
-        if (!isVisible) scalarControl.value = null;else if (scalarControl.current.value == null) {
+        if (isVisible === false) scalarControl.value = null;else if (scalarControl.current.value == null) {
           scalarControl.value = defaultValue;
         }
       }, [isVisible, defaultValue]);
@@ -777,7 +803,7 @@ function createFormEditHooks(schemaHooks) {
       var field = definition.compoundField ? findCompoundField(fs.fields, definition.compoundField) : undefined;
       var newFs = _extends({}, fs, {
         fields: field ? field.children : fs.fields,
-        invisible: !visible.value || fs.invisible
+        invisible: visible.value === false || fs.invisible
       });
       var data = field ? fs.data.fields[field.field] : fs.data;
       var groupProps = {
@@ -875,8 +901,8 @@ function useControlDefinitionForSchema(sf, definition) {
     definition = emptyGroupDefinition;
   }
   return React.useMemo(function () {
-    return definition.children.length ? definition : _extends({}, definition, {
-      children: addMissingControls(sf, [])
+    return _extends({}, definition, {
+      children: addMissingControls(sf, definition.children)
     });
   }, [sf, definition]);
 }
@@ -1554,16 +1580,18 @@ exports.defaultTailwindTheme = defaultTailwindTheme;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;
 exports.elementValueForField = elementValueForField;
+exports.emptyGroupDefinition = emptyGroupDefinition;
 exports.fieldDisplayName = fieldDisplayName;
+exports.fieldEqExpr = fieldEqExpr;
 exports.fieldForControl = fieldForControl;
 exports.fieldHasTag = fieldHasTag;
-exports.fieldValueExpr = fieldValueExpr;
 exports.findCompoundField = findCompoundField;
 exports.findField = findField;
 exports.findScalarField = findScalarField;
 exports.getDefaultScalarControlProperties = getDefaultScalarControlProperties;
 exports.getOptionsForScalarField = getOptionsForScalarField;
 exports.hasOptions = hasOptions;
+exports.htmlDisplayControl = htmlDisplayControl;
 exports.intField = intField;
 exports.isActionControlsDefinition = isActionControlsDefinition;
 exports.isCompoundField = isCompoundField;
@@ -1574,11 +1602,13 @@ exports.isGridRenderer = isGridRenderer;
 exports.isGroupControl = isGroupControl;
 exports.isGroupControlsDefinition = isGroupControlsDefinition;
 exports.isScalarField = isScalarField;
+exports.jsonataExpr = jsonataExpr;
 exports.makeCompoundField = makeCompoundField;
 exports.makeScalarField = makeScalarField;
 exports.renderControl = renderControl;
 exports.stringField = stringField;
 exports.stringOptionsField = stringOptionsField;
+exports.textDisplayControl = textDisplayControl;
 exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useDefaultValue = useDefaultValue;
 exports.useIsControlVisible = useIsControlVisible;