@react-typed-forms/schemas 1.0.0-dev.16 → 1.0.0-dev.18

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,6 +11,7 @@ export interface SchemaField {
   isTypeField?: boolean | null;
   searchable?: boolean | null;
   options?: FieldOption[] | null;
+  validators?: SchemaValidator[] | null;
   /**
    * @deprecated Use options directly
    */
@@ -114,9 +113,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 +137,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 +150,7 @@ export interface DataControlDefinition extends ControlDefinition {
   renderOptions?: RenderOptions | null;
   defaultValue?: any;
   readonly?: boolean | null;
+  validators?: SchemaValidator[] | null;
 }
 
 export interface RenderOptions {
@@ -153,6 +167,8 @@ export enum DataRenderType {
   Synchronised = "Synchronised",
   IconSelector = "IconSelector",
   DateTime = "DateTime",
+  Checkbox = "Checkbox",
+  Dropdown = "Dropdown",
 }
 
 export interface RadioButtonRenderOptions extends RenderOptions {
@@ -270,26 +286,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 +345,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 +363,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 +378,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,4 @@
-import { SchemaField } from "./types";
+import { FieldOption, SchemaField } from "./types";
 
 export function fieldHasTag(field: SchemaField, tag: string) {
   return Boolean(field.tags?.includes(tag));
@@ -7,3 +7,7 @@ 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;
+}

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: () => {} };
-    },
-  };
-}