@react-typed-forms/schemas 1.0.0-dev.17 → 1.0.0-dev.19

package/src/tailwind.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { DefaultRendererOptions } from "./renderers";
+
+export const defaultTailwindTheme: DefaultRendererOptions = {
+  label: {
+    className: "flex flex-col",
+    groupLabelClass: "font-bold",
+    requiredElement: <span className="text-red-500"> *</span>,
+  },
+  array: {
+    removableClass: "grid grid-cols-[1fr_auto] items-center gap-x-2",
+    childClass: "grow",
+  },
+  group: {
+    standardClassName: "space-y-4",
+    gridClassName: "gap-x-2 gap-y-4",
+  },
+  action: {
+    className: "bg-primary rounded-lg p-3 text-white",
+  },
+};

package/src/types.ts

@@ -1,5 +1,3 @@
-import { DataControlProperties } from "./controlRender";
-
 export interface SchemaField {
   type: string;
   field: string;
@@ -13,10 +11,7 @@ export interface SchemaField {
   isTypeField?: boolean | null;
   searchable?: boolean | null;
   options?: FieldOption[] | null;
-  /**
-   * @deprecated Use options directly
-   */
-  restrictions?: SchemaRestrictions | undefined | null;
+  validators?: SchemaValidator[] | null;
 }
 
 export enum FieldType {
@@ -39,10 +34,6 @@ export interface EntityRefField extends SchemaField {
   parentField: string;
 }
 
-export interface SchemaRestrictions {
-  options?: FieldOption[] | null;
-}
-
 export interface FieldOption {
   name: string;
   value: any;
@@ -114,9 +105,17 @@ export interface ControlAdornment {
   type: string;
 }
 
+export enum AdornmentPlacement {
+  ControlStart = "ControlStart",
+  ControlEnd = "ControlEnd",
+  LabelStart = "LabelStart",
+  LabelEnd = "LabelEnd",
+}
+
 export enum ControlAdornmentType {
   Tooltip = "Tooltip",
   Accordion = "Accordion",
+  HelpText = "HelpText",
 }
 
 export interface TooltipAdornment extends ControlAdornment {
@@ -130,6 +129,12 @@ export interface AccordionAdornment extends ControlAdornment {
   defaultExpanded: boolean;
 }
 
+export interface HelpTextAdornment extends ControlAdornment {
+  type: ControlAdornmentType.HelpText;
+  helpText: string;
+  placement: AdornmentPlacement;
+}
+
 export interface DataControlDefinition extends ControlDefinition {
   type: ControlDefinitionType.Data;
   field: string;
@@ -137,6 +142,7 @@ export interface DataControlDefinition extends ControlDefinition {
   renderOptions?: RenderOptions | null;
   defaultValue?: any;
   readonly?: boolean | null;
+  validators?: SchemaValidator[] | null;
 }
 
 export interface RenderOptions {
@@ -153,6 +159,8 @@ export enum DataRenderType {
   Synchronised = "Synchronised",
   IconSelector = "IconSelector",
   DateTime = "DateTime",
+  Checkbox = "Checkbox",
+  Dropdown = "Dropdown",
 }
 
 export interface RadioButtonRenderOptions extends RenderOptions {
@@ -270,26 +278,51 @@ export interface ActionControlDefinition extends ControlDefinition {
   actionId: string;
 }
 
+export enum ValidatorType {
+  Jsonata = "Jsonata",
+  Date = "Date",
+}
+export interface SchemaValidator {
+  type: string;
+}
+
+export interface JsonataValidator extends SchemaValidator {
+  type: ValidatorType.Jsonata;
+  expression: string;
+}
+
+export enum DateComparison {
+  NotBefore = "NotBefore",
+  NotAfter = "NotAfter",
+}
+
+export interface DateValidator extends SchemaValidator {
+  type: ValidatorType.Date;
+  comparison: DateComparison;
+  fixedDate?: string | null;
+  daysFromCurrent?: number | null;
+}
+
 export function isDataControlDefinition(
-  x: ControlDefinition
+  x: ControlDefinition,
 ): x is DataControlDefinition {
   return x.type === ControlDefinitionType.Data;
 }
 
 export function isGroupControlsDefinition(
-  x: ControlDefinition
+  x: ControlDefinition,
 ): x is GroupedControlsDefinition {
   return x.type === ControlDefinitionType.Group;
 }
 
 export function isDisplayControlsDefinition(
-  x: ControlDefinition
+  x: ControlDefinition,
 ): x is DisplayControlDefinition {
   return x.type === ControlDefinitionType.Display;
 }
 
 export function isActionControlsDefinition(
-  x: ControlDefinition
+  x: ControlDefinition,
 ): x is ActionControlDefinition {
   return x.type === ControlDefinitionType.Action;
 }
@@ -304,7 +337,7 @@ export interface ControlVisitor<A> {
 export function visitControlDefinition<A>(
   x: ControlDefinition,
   visitor: ControlVisitor<A>,
-  defaultValue: (c: ControlDefinition) => A
+  defaultValue: (c: ControlDefinition) => A,
 ): A {
   switch (x.type) {
     case ControlDefinitionType.Action:
@@ -322,14 +355,14 @@ export function visitControlDefinition<A>(
 
 export function dataControl(
   field: string,
-  options?: Partial<DataControlDefinition>
+  options?: Partial<DataControlDefinition>,
 ): DataControlDefinition {
   return { type: ControlDefinitionType.Data, field, ...options };
 }
 
 export function fieldValueExpr(
   field: string,
-  value: any
+  value: any,
 ): FieldValueExpression {
   return { type: ExpressionType.FieldValue, field, value };
 }
@@ -337,3 +370,9 @@ export function fieldValueExpr(
 export function visibility(expr: EntityExpression): DynamicProperty {
   return { type: DynamicPropertyType.Visible, expr };
 }
+
+export function isGridRenderer(
+  options: GroupRenderOptions,
+): options is GridRenderer {
+  return options.type === GroupRenderType.Grid;
+}

package/src/util.ts

@@ -1,4 +1,119 @@
-import { SchemaField } from "./types";
+import {
+  CompoundField,
+  ControlDefinition,
+  ControlDefinitionType,
+  DataControlDefinition,
+  DataRenderType,
+  FieldOption,
+  FieldType,
+  GridRenderer,
+  GroupedControlsDefinition,
+  GroupRenderType,
+  SchemaField,
+} from "./types";
+
+export function applyDefaultValues(
+  v: { [k: string]: any } | undefined,
+  fields: SchemaField[],
+): any {
+  if (!v) return defaultValueForFields(fields);
+  const applyValue = fields.filter(
+    (x) => isCompoundField(x) || !(x.field in v),
+  );
+  if (!applyValue.length) return v;
+  const out = { ...v };
+  applyValue.forEach((x) => {
+    out[x.field] =
+      x.field in v
+        ? applyDefaultForField(v[x.field], x, fields)
+        : defaultValueForField(x);
+  });
+  return out;
+}
+
+export function applyDefaultForField(
+  v: any,
+  field: SchemaField,
+  parent: SchemaField[],
+  notElement?: boolean,
+): any {
+  if (field.collection && !notElement) {
+    return ((v as any[]) ?? []).map((x) =>
+      applyDefaultForField(x, field, parent, true),
+    );
+  }
+  if (isCompoundField(field)) {
+    if (!v && !field.required) return v;
+    return applyDefaultValues(v, field.treeChildren ? parent : field.children);
+  }
+  return defaultValueForField(field);
+}
+
+export function defaultValueForFields(fields: SchemaField[]): any {
+  return Object.fromEntries(
+    fields.map((x) => [x.field, defaultValueForField(x)]),
+  );
+}
+
+export function defaultValueForField(sf: SchemaField): any {
+  if (isCompoundField(sf)) {
+    return sf.required
+      ? sf.collection
+        ? []
+        : defaultValueForFields(sf.children)
+      : undefined;
+  }
+  if (sf.collection) return [];
+  return sf.defaultValue;
+}
+
+export function elementValueForField(sf: SchemaField): any {
+  if (isCompoundField(sf)) {
+    return defaultValueForFields(sf.children);
+  }
+  return sf.defaultValue;
+}
+
+export function findScalarField(
+  fields: SchemaField[],
+  field: string,
+): SchemaField | undefined {
+  return findField(fields, field);
+}
+
+export function findCompoundField(
+  fields: SchemaField[],
+  field: string,
+): CompoundField | undefined {
+  return findField(fields, field) as CompoundField | undefined;
+}
+
+export function findField(
+  fields: SchemaField[],
+  field: string,
+): SchemaField | undefined {
+  return fields.find((x) => x.field === field);
+}
+
+export function isScalarField(sf: SchemaField): sf is SchemaField {
+  return !isCompoundField(sf);
+}
+
+export function isCompoundField(sf: SchemaField): sf is CompoundField {
+  return sf.type === FieldType.Compound;
+}
+
+export function isDataControl(
+  c: ControlDefinition,
+): c is DataControlDefinition {
+  return c.type === ControlDefinitionType.Data;
+}
+
+export function isGroupControl(
+  c: ControlDefinition,
+): c is GroupedControlsDefinition {
+  return c.type === ControlDefinitionType.Group;
+}
 
 export function fieldHasTag(field: SchemaField, tag: string) {
   return Boolean(field.tags?.includes(tag));
@@ -7,3 +122,91 @@ export function fieldHasTag(field: SchemaField, tag: string) {
 export function fieldDisplayName(field: SchemaField) {
   return field.displayName ?? field.field;
 }
+
+export function hasOptions(o: { options: FieldOption[] | undefined | null }) {
+  return (o.options?.length ?? 0) > 0;
+}
+
+export function defaultControlForField(
+  sf: SchemaField,
+): DataControlDefinition | GroupedControlsDefinition {
+  if (isCompoundField(sf)) {
+    return {
+      type: ControlDefinitionType.Group,
+      title: sf.displayName,
+      compoundField: sf.field,
+      groupOptions: {
+        type: GroupRenderType.Grid,
+        hideTitle: false,
+      } as GridRenderer,
+      children: sf.children.map(defaultControlForField),
+    } satisfies GroupedControlsDefinition;
+  } else if (isScalarField(sf)) {
+    const htmlEditor = sf.tags?.includes("_HtmlEditor");
+    return {
+      type: ControlDefinitionType.Data,
+      title: sf.displayName,
+      field: sf.field,
+      required: sf.required,
+      renderOptions: {
+        type: htmlEditor ? DataRenderType.HtmlEditor : DataRenderType.Standard,
+      },
+    } satisfies DataControlDefinition;
+  }
+  throw "Unknown schema field";
+}
+function findReferencedControl(
+  field: string,
+  control: ControlDefinition,
+): ControlDefinition | undefined {
+  if (isDataControl(control) && field === control.field) return control;
+  if (isGroupControl(control)) {
+    if (control.compoundField)
+      return field === control.compoundField ? control : undefined;
+    return findReferencedControlInArray(field, control.children);
+  }
+  return undefined;
+}
+
+function findReferencedControlInArray(
+  field: string,
+  controls: ControlDefinition[],
+): ControlDefinition | undefined {
+  for (const c of controls) {
+    const ref = findReferencedControl(field, c);
+    if (ref) return ref;
+  }
+  return undefined;
+}
+
+export function addMissingControls(
+  fields: SchemaField[],
+  controls: ControlDefinition[],
+): ControlDefinition[] {
+  const changes: {
+    field: SchemaField;
+    existing: ControlDefinition | undefined;
+  }[] = fields.flatMap((x) => {
+    if (fieldHasTag(x, "_NoControl")) return [];
+    const existing = findReferencedControlInArray(x.field, controls);
+    if (!existing || isCompoundField(x)) return { field: x, existing };
+    return [];
+  });
+  const changedCompounds = controls.map((x) => {
+    const ex = changes.find((c) => c.existing === x);
+    if (!ex) return x;
+    const cf = x as GroupedControlsDefinition;
+    return {
+      ...cf,
+      children: addMissingControls(
+        (ex.field as CompoundField).children,
+        cf.children,
+      ),
+    };
+  });
+  return changedCompounds.concat(
+    changes
+      .filter((x) => !x.existing)
+      .map((x) => defaultControlForField(x.field)),
+  );
+}

package/src/hooks.ts

@@ -1,173 +0,0 @@
-import {
-  ActionControlDefinition,
-  ControlDefinition,
-  DataControlDefinition,
-  DynamicPropertyType,
-  EntityExpression,
-  ExpressionType,
-  FieldOption,
-  FieldValueExpression,
-  SchemaField,
-} from "./types";
-import {
-  ActionControlProperties,
-  controlForField,
-  DataControlProperties,
-  ExpressionHook,
-  fieldForControl,
-  findField,
-  FormEditHooks,
-  FormEditState,
-  isGroupControl,
-  isScalarField,
-} from "./controlRender";
-import { useEffect, useMemo } from "react";
-import { Control, newControl } from "@react-typed-forms/core";
-
-export function useDefaultValue(
-  definition: DataControlDefinition,
-  field: SchemaField,
-  formState: FormEditState,
-  useExpression: ExpressionHook
-) {
-  const valueExpression = definition.dynamic?.find(
-    (x) => x.type === DynamicPropertyType.DefaultValue
-  );
-  if (valueExpression) {
-    return useExpression(valueExpression.expr, formState);
-  }
-  return field.defaultValue;
-}
-
-export function useIsControlVisible(
-  definition: ControlDefinition,
-  formState: FormEditState,
-  useExpression: ExpressionHook
-) {
-  const visibleExpression = definition.dynamic?.find(
-    (x) => x.type === DynamicPropertyType.Visible
-  );
-  if (visibleExpression && visibleExpression.expr) {
-    return Boolean(useExpression(visibleExpression.expr, formState));
-  }
-  const schemaFields = formState.fields;
-
-  const { typeControl, compoundField } = useMemo(() => {
-    const typeField = schemaFields.find(
-      (x) => isScalarField(x) && x.isTypeField
-    ) as SchemaField | undefined;
-
-    const typeControl = ((typeField &&
-      formState.data.fields?.[typeField.field]) ??
-      newControl(undefined)) as Control<string | undefined>;
-    const compoundField =
-      isGroupControl(definition) && definition.compoundField
-        ? formState.data.fields[definition.compoundField]
-        : undefined;
-    return { typeControl, compoundField };
-  }, [schemaFields, formState.data]);
-
-  const fieldName = fieldForControl(definition);
-  const onlyForTypes = (
-    fieldName ? findField(schemaFields, fieldName) : undefined
-  )?.onlyForTypes;
-
-  return (
-    (!compoundField || compoundField.value != null) &&
-    (!onlyForTypes ||
-      onlyForTypes.length === 0 ||
-      Boolean(typeControl.value && onlyForTypes.includes(typeControl.value)))
-  );
-}
-export function getDefaultScalarControlProperties(
-  definition: DataControlDefinition,
-  field: SchemaField,
-  visible: boolean,
-  defaultValue: any,
-  control: Control<any>,
-  readonly?: boolean
-): DataControlProperties {
-  return {
-    defaultValue,
-    options: getOptionsForScalarField(field),
-    required: definition.required ?? false,
-    visible,
-    readonly: readonly ?? definition.readonly ?? false,
-    control,
-  };
-}
-
-export function getOptionsForScalarField(
-  field: SchemaField
-): FieldOption[] | undefined | null {
-  const opts = field.options ?? field.restrictions?.options;
-  if (opts?.length ?? 0 > 0) {
-    return opts;
-  }
-  return undefined;
-}
-
-export const defaultExpressionHook: ExpressionHook = (
-  expr: EntityExpression,
-  formState: FormEditState
-) => {
-  switch (expr.type) {
-    case ExpressionType.FieldValue:
-      const fvExpr = expr as FieldValueExpression;
-      return controlForField(fvExpr.field, formState).value === fvExpr.value;
-    default:
-      return undefined;
-  }
-};
-
-export function createFormEditHooks(
-  useExpression: ExpressionHook
-): FormEditHooks {
-  return {
-    useExpression,
-    useDataProperties(
-      formState: FormEditState,
-      definition: DataControlDefinition,
-      field: SchemaField
-    ): DataControlProperties {
-      const visible = useIsControlVisible(definition, formState, useExpression);
-      const defaultValue = useDefaultValue(
-        definition,
-        field,
-        formState,
-        useExpression
-      );
-      const scalarControl = formState.data.fields[field.field];
-
-      useEffect(() => {
-        if (!visible) scalarControl.value = null;
-        else if (scalarControl.current.value == null) {
-          scalarControl.value = defaultValue;
-        }
-      }, [visible, defaultValue]);
-      return getDefaultScalarControlProperties(
-        definition,
-        field,
-        visible,
-        defaultValue,
-        scalarControl,
-        formState.readonly
-      );
-    },
-    useDisplayProperties: (fs, definition) => {
-      const visible = useIsControlVisible(definition, fs, useExpression);
-      return { visible };
-    },
-    useGroupProperties: (fs, definition, hooks) => {
-      const visible = useIsControlVisible(definition, fs, useExpression);
-      return { visible, hooks };
-    },
-    useActionProperties(
-      formState: FormEditState,
-      definition: ActionControlDefinition
-    ): ActionControlProperties {
-      const visible = useIsControlVisible(definition, formState, useExpression);
-      return { visible, onClick: () => {} };
-    },
-  };
-}