@react-typed-forms/schemas 5.0.2 → 6.0.0

package/src/schemaInterface.ts

@@ -0,0 +1,31 @@
+import { FieldType, SchemaField, SchemaInterface } from "./types";
+
+export const defaultSchemaInterface: SchemaInterface = {
+  isEmptyValue: defaultIsEmpty,
+  textValue: defaultTextValue,
+};
+
+export function defaultIsEmpty(f: SchemaField, value: any): boolean {
+  if (f.collection)
+    return Array.isArray(value) ? value.length === 0 : value == null;
+  switch (f.type) {
+    case FieldType.String:
+      return !value;
+    default:
+      return value == null;
+  }
+}
+
+export function defaultTextValue(
+  f: SchemaField,
+  value: any,
+): string | undefined {
+  switch (f.type) {
+    case FieldType.DateTime:
+      return new Date(value).toLocaleDateString();
+    case FieldType.Date:
+      return new Date(value).toLocaleDateString();
+    default:
+      return value != null ? value.toString() : undefined;
+  }
+}

package/src/tailwind.tsx

@@ -12,8 +12,9 @@ export const defaultTailwindTheme: DefaultRendererOptions = {
     addActionClass: "my-2",
   },
   group: {
-    standardClassName: "space-y-4",
+    standardClassName: "flex flex-col gap-4",
     gridClassName: "gap-x-2 gap-y-4",
+    flexClassName: "gap-2",
   },
   action: {
     className: "bg-primary rounded-lg p-3 text-white",
@@ -22,4 +23,7 @@ export const defaultTailwindTheme: DefaultRendererOptions = {
     className: "flex flex-col",
     errorClass: "text-sm text-danger-500",
   },
+  data: {
+    displayOnlyClass: "flex flex-row items-center gap-2",
+  },
 };

package/src/types.ts

@@ -52,9 +52,19 @@ export type AnyControlDefinition =
   | ActionControlDefinition
   | DisplayControlDefinition;
 
+export interface SchemaInterface {
+  isEmptyValue(field: SchemaField, value: any): boolean;
+  textValue(
+    field: SchemaField,
+    value: any,
+    element?: boolean,
+  ): string | undefined;
+}
 export interface ControlDefinition {
   type: string;
   title?: string | null;
+  styleClass?: string | null;
+  layoutClass?: string | null;
   dynamic?: DynamicProperty[] | null;
   adornments?: ControlAdornment[] | null;
   children?: ControlDefinition[] | null;
@@ -77,6 +87,9 @@ export enum DynamicPropertyType {
   DefaultValue = "DefaultValue",
   Readonly = "Readonly",
   Disabled = "Disabled",
+  Display = "Display",
+  Style = "Style",
+  LayoutStyle = "LayoutStyle",
 }
 
 export interface EntityExpression {
@@ -85,7 +98,8 @@ export interface EntityExpression {
 
 export enum ExpressionType {
   Jsonata = "Jsonata",
-  FieldValue = "FieldValue",
+  Data = "Data",
+  DataMatch = "FieldValue",
   UserMatch = "UserMatch",
 }
 
@@ -94,8 +108,13 @@ export interface JsonataExpression extends EntityExpression {
   expression: string;
 }
 
-export interface FieldValueExpression extends EntityExpression {
-  type: ExpressionType.FieldValue;
+export interface DataExpression extends EntityExpression {
+  type: ExpressionType.Data;
+  field: string;
+}
+
+export interface DataMatchExpression extends EntityExpression {
+  type: ExpressionType.DataMatch;
   field: string;
   value: any;
 }
@@ -120,6 +139,13 @@ export enum ControlAdornmentType {
   Tooltip = "Tooltip",
   Accordion = "Accordion",
   HelpText = "HelpText",
+  Icon = "Icon",
+}
+
+export interface IconAdornment extends ControlAdornment {
+  type: ControlAdornmentType.Icon;
+  iconClass: string;
+  placement?: AdornmentPlacement | null;
 }
 
 export interface TooltipAdornment extends ControlAdornment {
@@ -136,7 +162,7 @@ export interface AccordionAdornment extends ControlAdornment {
 export interface HelpTextAdornment extends ControlAdornment {
   type: ControlAdornmentType.HelpText;
   helpText: string;
-  placement: AdornmentPlacement;
+  placement?: AdornmentPlacement | null;
 }
 
 export interface DataControlDefinition extends ControlDefinition {
@@ -166,6 +192,7 @@ export enum DataRenderType {
   DateTime = "DateTime",
   Checkbox = "Checkbox",
   Dropdown = "Dropdown",
+  DisplayOnly = "DisplayOnly",
 }
 
 export interface RadioButtonRenderOptions extends RenderOptions {
@@ -191,6 +218,11 @@ export interface IconListRenderOptions extends RenderOptions {
   iconMappings: IconMapping[];
 }
 
+export interface DisplayOnlyRenderOptions extends RenderOptions {
+  type: DataRenderType.DisplayOnly;
+  emptyText?: string | null;
+  sampleText?: string | null;
+}
 export interface IconMapping {
   value: string;
   materialIcon?: string | null;
@@ -236,6 +268,7 @@ export interface GroupRenderOptions {
 export enum GroupRenderType {
   Standard = "Standard",
   Grid = "Grid",
+  Flex = "Flex",
   GroupElement = "GroupElement",
 }
 
@@ -243,6 +276,12 @@ export interface StandardGroupRenderer extends GroupRenderOptions {
   type: GroupRenderType.Standard;
 }
 
+export interface FlexRenderer extends GroupRenderOptions {
+  type: GroupRenderType.Flex;
+  direction?: string | null;
+  gap?: string | null;
+}
+
 export interface GroupElementRenderer extends GroupRenderOptions {
   type: GroupRenderType.GroupElement;
   value: any;
@@ -265,13 +304,18 @@ export interface DisplayData {
 export enum DisplayDataType {
   Text = "Text",
   Html = "Html",
+  Icon = "Icon",
 }
-
 export interface TextDisplay extends DisplayData {
   type: DisplayDataType.Text;
   text: string;
 }
 
+export interface IconDisplay extends DisplayData {
+  type: DisplayDataType.Icon;
+  iconClass: string;
+}
+
 export interface HtmlDisplay extends DisplayData {
   type: DisplayDataType.Html;
   html: string;
@@ -361,3 +405,15 @@ export function isGridRenderer(
 ): options is GridRenderer {
   return options.type === GroupRenderType.Grid;
 }
+
+export function isFlexRenderer(
+  options: GroupRenderOptions,
+): options is FlexRenderer {
+  return options.type === GroupRenderType.Flex;
+}
+
+export function isDisplayOnlyRenderer(
+  options: RenderOptions,
+): options is DisplayOnlyRenderOptions {
+  return options.type === DataRenderType.DisplayOnly;
+}

package/src/util.ts

@@ -1,27 +1,29 @@
 import {
-  ActionControlDefinition,
   CompoundField,
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
   DataRenderType,
-  DisplayControlDefinition,
+  DisplayOnlyRenderOptions,
   FieldOption,
   FieldType,
   GridRenderer,
   GroupedControlsDefinition,
   GroupRenderType,
+  isDataControlDefinition,
+  isDisplayOnlyRenderer,
   SchemaField,
+  SchemaInterface,
   visitControlDefinition,
 } from "./types";
 import { MutableRefObject, useRef } from "react";
 import { Control } from "@react-typed-forms/core";
 
-export interface ControlGroupContext {
+export interface ControlDataContext {
   groupControl: Control<any>;
   fields: SchemaField[];
+  schemaInterface: SchemaInterface;
 }
-
 export function applyDefaultValues(
   v: { [k: string]: any } | undefined,
   fields: SchemaField[],
@@ -238,8 +240,18 @@ export function isControlReadonly(c: ControlDefinition): boolean {
   return isDataControl(c) && !!c.readonly;
 }
 
+export function getDisplayOnlyOptions(
+  d: ControlDefinition,
+): DisplayOnlyRenderOptions | undefined {
+  return isDataControlDefinition(d) &&
+    d.renderOptions &&
+    isDisplayOnlyRenderer(d.renderOptions)
+    ? d.renderOptions
+    : undefined;
+}
+
 export function getTypeField(
-  context: ControlGroupContext,
+  context: ControlDataContext,
 ): Control<string> | undefined {
   const typeSchemaField = context.fields.find((x) => x.isTypeField);
   return typeSchemaField
@@ -249,7 +261,7 @@ export function getTypeField(
 
 export function visitControlDataArray<A>(
   controls: ControlDefinition[] | undefined | null,
-  context: ControlGroupContext,
+  context: ControlDataContext,
   cb: (
     definition: DataControlDefinition,
     field: SchemaField,
@@ -267,7 +279,7 @@ export function visitControlDataArray<A>(
 
 export function visitControlData<A>(
   definition: ControlDefinition,
-  ctx: ControlGroupContext,
+  ctx: ControlDataContext,
   cb: (
     definition: DataControlDefinition,
     field: SchemaField,
@@ -309,7 +321,11 @@ export function visitControlData<A>(
         if (isCompoundField(fieldData)) {
           const cfResult = visitControlDataArray(
             children,
-            { fields: fieldData.children, groupControl: c },
+            {
+              fields: fieldData.children,
+              groupControl: c,
+              schemaInterface: ctx.schemaInterface,
+            },
             cb,
           );
           if (cfResult !== undefined) return cfResult;

package/src/validators.ts

@@ -14,7 +14,7 @@ import {
   useValueChangeEffect,
 } from "@react-typed-forms/core";
 import { useCallback } from "react";
-import { ControlGroupContext, useUpdatedRef } from "./util";
+import { ControlDataContext, useUpdatedRef } from "./util";
 import { useJsonataExpression } from "./hooks";
 
 export function useValidationHook(
@@ -22,7 +22,7 @@ export function useValidationHook(
 ): (
   control: Control<any>,
   hidden: boolean,
-  groupContext: ControlGroupContext,
+  groupContext: ControlDataContext,
 ) => void {
   const validatorTypes = isDataControlDefinition(definition)
     ? definition.validators?.map((x) => x.type) ?? []
@@ -65,7 +65,7 @@ export function useValidationHook(
 
 function useJsonataValidator(
   control: Control<any>,
-  context: ControlGroupContext,
+  context: ControlDataContext,
   expr: JsonataValidator,
   hidden: boolean,
   i: number,