Merge pull request #19 from workfloworchestrator/1694-basic-fields

1694 basic fields: Integer field

Author: DutchBen

frontend/apps/example/src/fields/TextArea.tsx

@@ -1,15 +1,15 @@
-/**
- * Pydantic Forms
- *
- * Text component
- */
 import React from 'react';
 
 import type {
     PydanticFormFieldElement,
     PydanticFormFieldElementProps,
 } from 'pydantic-forms';
 
+/**
+ * Pydantic Forms
+ *
+ * Text component
+ */
 export const TextArea: PydanticFormFieldElement = ({
     value,
     onChange,

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -3,10 +3,21 @@
  *
  * We will search for the first field that returns a positive match
  */
-import { PydanticComponentMatcher } from '@/types';
+import { PydanticComponentMatcher, PydanticFormFieldType } from '@/types';
 
+import { IntegerField } from './fields/IntegerField';
+import { zodValidationPresets } from './zodValidations';
+
+// no matchers, it defaults to Text field in the mapToComponent function
 const defaultComponentMatchers: PydanticComponentMatcher[] = [
-    // no matchers, it defaults to Text field in the mapToComponent function
+    {
+        id: 'integerfield',
+        Element: IntegerField,
+        matcher(field) {
+            return field.type === PydanticFormFieldType.INTEGER;
+        },
+        validator: zodValidationPresets.integer,
+    },
 ];
 
 export default defaultComponentMatchers;

frontend/packages/pydantic-forms/src/components/fields/IntegerField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import type { PydanticFormFieldElementProps } from '@/types';
+
+export const IntegerField = ({
+    value,
+    onChange,
+    onBlur,
+    disabled,
+}: PydanticFormFieldElementProps) => {
+    return (
+        <input
+            onBlur={onBlur}
+            onChange={(t) => {
+                const value = parseInt(t.currentTarget.value);
+                onChange(value);
+            }}
+            disabled={disabled}
+            value={value}
+            type="number"
+            style={{
+                width: '400px',
+                height: '30px',
+                padding: '4px',
+                marginTop: '4px',
+            }}
+        />
+    );
+};

frontend/packages/pydantic-forms/src/components/fields/index.ts

@@ -1,3 +1,4 @@
 export * from './FieldWrap';
 export * from './FormRow';
 export * from './TextField';
+export * from './IntegerField';

frontend/packages/pydantic-forms/src/components/render/Fields.tsx

@@ -44,21 +44,21 @@ export function RenderFields({ fields }: RenderFieldsProps) {
         if (!element) {
             return <></>;
         }
-        const FormElement = wrapFieldElement(element, field, rhf);
+        const formElement = wrapFieldElement(element, field, rhf);
 
         if (formLayout === PydanticFormLayout.ONE_COL) {
             return (
                 <Row key={field.id}>
                     <Col md={field.columns} sm={12} e2e-id={field.id}>
-                        {FormElement}
+                        {formElement}
                     </Col>
                 </Row>
             );
         }
 
         return (
             <Col key={field.id} md={field.columns} sm={12} e2e-id={field.id}>
-                {FormElement}
+                {formElement}
             </Col>
         );
     });

frontend/packages/pydantic-forms/src/components/zodValidations.ts

@@ -55,6 +55,59 @@ export const zodValidationPresets: PydanticFormZodValidationPresets = {
             ) as unknown as z.ZodString;
         }
 
+        return validationRule;
+    },
+    integer: (field) => {
+        const {
+            minimum,
+            maximum,
+            exclusiveMaximum,
+            exclusiveMinimum,
+            multipleOf,
+        } = field?.validation ?? {};
+
+        let validationRule = z
+            .number({
+                required_error: 'Dit veld is verplicht',
+                invalid_type_error: 'Dit veld moet een integer zijn',
+            })
+            .int();
+
+        if (minimum) {
+            validationRule = validationRule.gte(
+                minimum,
+                `Dit veld heeft een minimum waarde van ${minimum}`,
+            );
+        }
+
+        if (exclusiveMinimum) {
+            validationRule = validationRule.gt(
+                exclusiveMinimum,
+                `Dit veld heeft een minimum waarde van meer dan ${exclusiveMinimum}`,
+            );
+        }
+
+        if (maximum) {
+            validationRule = validationRule.lte(
+                maximum,
+                `Dit veld heeft een maximum waarde van${maximum}`,
+            );
+        }
+
+        if (exclusiveMaximum) {
+            validationRule = validationRule.lt(
+                exclusiveMaximum,
+                `Dit veld heeft een maximum waarde van minder dan ${exclusiveMaximum}`,
+            );
+        }
+
+        if (multipleOf) {
+            validationRule = validationRule.multipleOf(
+                multipleOf,
+                `De waarde van dit veld moet een veelvoud zijn van ${multipleOf}`,
+            );
+        }
+
         return validationRule;
     },
 };

frontend/packages/pydantic-forms/src/core/helper.ts

@@ -168,26 +168,41 @@ export const getFieldLabelById = (
 /**
  * Field to validation object
  *
- * @param field A field from the 'properties' key of the JSON Schema
+ * @param fieldProperties A field from the 'properties' key of the JSON Schema
  * @returns returns a validation object
  */
 export const getFieldValidation = (
-    field: PydanticFormApiResponsePropertyResolved,
+    fieldProperties: PydanticFormApiResponsePropertyResolved,
 ) => {
     const validation: PydanticFormFieldValidation = {};
-
-    const optionDef = getFieldAllOfAnyOfEntry(field);
-
-    const isNullable = optionDef?.filter((option) => option.type === 'null');
+    const propertyDef = getFieldAllOfAnyOfEntry(fieldProperties);
+    const isNullable = propertyDef?.filter((option) => option.type === 'null');
 
     if (isNullable) {
         validation.isNullable = true;
     }
 
-    for (const option of [field, ...(optionDef ?? [])]) {
-        if (option.maxLength) validation.maxLength = option.maxLength;
-        if (option.minLength) validation.minLength = option.minLength;
-        if (option.pattern) validation.pattern = option.pattern;
+    for (const properties of [fieldProperties, ...(propertyDef ?? [])]) {
+        if (fieldProperties.type === PydanticFormFieldType.STRING) {
+            if (properties.maxLength)
+                validation.maxLength = properties.maxLength;
+            if (properties.minLength)
+                validation.minLength = properties.minLength;
+            if (properties.pattern) validation.pattern = properties.pattern;
+        }
+        if (
+            fieldProperties.type === PydanticFormFieldType.NUMBER ||
+            fieldProperties.type === PydanticFormFieldType.INTEGER
+        ) {
+            if (properties.minimum) validation.minimum = properties.minimum;
+            if (properties.maximum) validation.maximum = properties.maximum;
+            if (properties.exclusiveMinimum)
+                validation.exclusiveMinimum = properties.exclusiveMinimum;
+            if (properties.exclusiveMaximum)
+                validation.exclusiveMaximum = properties.exclusiveMaximum;
+            if (properties.multipleOf)
+                validation.multipleOf = properties.multipleOf;
+        }
     }
 
     return validation;

frontend/packages/pydantic-forms/src/core/hooks/useRefParser.tsx

@@ -15,7 +15,7 @@ import { PydanticFormApiRefResolved } from '@/types';
 export function useRefParser(
     id: string,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    source: any = {},
+    source: object = {},
     swrConfig?: SWRConfiguration,
 ) {
     return useSWR<PydanticFormApiRefResolved | undefined>(

frontend/packages/pydantic-forms/src/core/mapFieldToComponent.ts

@@ -43,27 +43,27 @@ export const mapFieldToComponent = (
 ): PydanticFormField => {
     const matcher = getComponentMatcher(componentMatcher);
 
-    const schemaField = schema.properties[fieldId];
-    const options = getFieldOptions(schemaField);
+    const fieldProperties = schema.properties[fieldId];
+    const options = getFieldOptions(fieldProperties);
 
-    const fieldOptionsEntry = getFieldAllOfAnyOfEntry(schemaField);
+    const fieldOptionsEntry = getFieldAllOfAnyOfEntry(fieldProperties);
 
     const field: PydanticFormField = {
         id: fieldId,
-        title: formLabels[fieldId]?.toString() ?? schemaField.title,
+        title: formLabels[fieldId]?.toString() ?? fieldProperties.title,
         description: formLabels[fieldId + '_info']?.toString() ?? '',
-        format: schemaField.format ?? fieldOptionsEntry?.[0]?.format,
+        format: fieldProperties.format ?? fieldOptionsEntry?.[0]?.format,
         type:
-            schemaField.type ??
+            fieldProperties.type ??
             fieldOptionsEntry?.[0]?.type ??
             fieldOptionsEntry?.[0]?.items?.type,
         options: options.options,
         isEnumField: options.isOptionsField,
-        default: schemaField.default,
-        validation: getFieldValidation(schemaField),
+        default: fieldProperties.default,
+        validation: getFieldValidation(fieldProperties),
         required: !!schema.required?.includes(fieldId),
-        attributes: getFieldAttributes(schemaField),
-        schemaField: schemaField,
+        attributes: getFieldAttributes(fieldProperties),
+        schemaField: fieldProperties,
         columns: 6,
         ...fieldDetailProvider?.[fieldId],
     };

frontend/packages/pydantic-forms/src/types.ts

@@ -115,22 +115,27 @@ export interface PydanticFormFieldSection {
 }
 
 export enum PydanticFormFieldType {
+    // Primitive types https://json-schema.org/understanding-json-schema/reference/type
+    STRING = 'string',
+    INTEGER = 'integer',
+    NUMBER = 'number',
+    ENUM = 'enum',
+    CONST = 'const',
+    BOOLEAN = 'boolean',
+    ARRAY = 'array',
+    OBJECT = 'object',
+    NULL = 'null',
+
+    // Complex types
     OPTGROUP = 'optGroup',
     SKIP = 'skip',
     LONG = 'long',
     HIDDEN = 'hidden',
     LABEL = 'label',
     SUMMARY = 'summary',
     ACCEPT = 'accept',
-    NULL = 'null',
-
     DATE = 'date',
     DATETIME = 'date-time',
-    OBJECT = 'object',
-    STRING = 'string',
-    ARRAY = 'array',
-    BOOLEAN = 'boolean',
-    NUMBER = 'number',
     TIMESTAMP = 'timestamp',
     LIST = 'list',
     DEFINED_LIST = 'defined-list',
@@ -167,7 +172,8 @@ export interface PydanticFormFieldOption {
     label: string;
 }
 
-export interface PydanticFormApiResponsePropertyResolved {
+export interface PydanticFormApiResponsePropertyResolved
+    extends PydanticFormFieldValidation {
     type: PydanticFormFieldType;
 
     anyOf?: PydanticFormFieldAnyOfResolved[];
@@ -189,21 +195,22 @@ export interface PydanticFormApiResponsePropertyResolved {
         sensitive: boolean;
         password: boolean;
     };
-
-    // validation props
-    maxLength?: number;
-    minLength?: number;
-    pattern?: string;
 }
 
 export interface PydanticFormFieldValidation {
     maxLength?: number;
     minLength?: number;
     pattern?: string;
     isNullable?: boolean;
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+    multipleOf?: number;
 }
 
-export interface PydanticFormFieldAttributes {
+export interface PydanticFormFieldAttributes
+    extends PydanticFormFieldValidation {
     disabled?: boolean;
     sensitive?: boolean;
     password?: boolean;
@@ -212,29 +219,24 @@ export interface PydanticFormFieldAttributes {
     };
 }
 
-export interface PydanticFormFieldAnyOfResolved {
+export interface PydanticFormFieldAnyOfResolved
+    extends PydanticFormFieldValidation {
     items?: PydanticFormFieldAnyOfResolvedItems;
     enum?: string[];
     options?: {
         [id: string]: string;
     };
     format?: 'date' | 'date-time';
     type: PydanticFormListFieldType;
-    maxLength?: number;
-    minLength?: number;
-    pattern?: string;
 }
-
-export interface PydanticFormFieldAnyOfResolvedItems {
+export interface PydanticFormFieldAnyOfResolvedItems
+    extends PydanticFormFieldValidation {
     enum: string[];
     options?: {
         [id: string]: string;
     };
     title: string;
     type: PydanticFormListFieldType;
-    maxLength?: number;
-    minLength?: number;
-    pattern?: string;
 }
 
 export type PydanticFormListFieldType =