fix(form): validate feedback level support warning (#408)

apps/demo-fixed-layout/src/form-components/form-inputs/index.tsx

@@ -33,7 +33,7 @@ export function FormInputs() {
                     hasError={Object.keys(fieldState?.errors || {}).length > 0}
                     schema={property}
                   />
-                  <Feedback errors={fieldState?.errors} />
+                  <Feedback errors={fieldState?.errors} warnings={fieldState?.warnings} />
                 </FormItem>
               )}
             </Field>

apps/demo-fixed-layout/src/nodes/default-form-meta.tsx

@@ -3,7 +3,12 @@ import {
   provideJsonSchemaOutputs,
   syncVariableTitle,
 } from '@flowgram.ai/form-materials';
-import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';
+import {
+  FormRenderProps,
+  FormMeta,
+  ValidateTrigger,
+  FeedbackLevel,
+} from '@flowgram.ai/fixed-layout-editor';
 
 import { FlowNodeJSON } from '../typings';
 import { FormHeader, FormContent, FormInputs, FormOutputs } from '../form-components';
@@ -30,7 +35,10 @@ export const defaultFormMeta: FormMeta<FlowNodeJSON['data']> = {
         required.includes(valuePropetyKey) &&
         (value === '' || value === undefined || value?.content === '')
       ) {
-        return `${valuePropetyKey} is required`;
+        return {
+          message: `${valuePropetyKey} is required`,
+          level: FeedbackLevel.Error, // Error || Warning
+        };
       }
       return undefined;
     },

apps/demo-free-layout/src/form-components/form-inputs/index.tsx

@@ -33,7 +33,7 @@ export function FormInputs() {
                     hasError={Object.keys(fieldState?.errors || {}).length > 0}
                     schema={property}
                   />
-                  <Feedback errors={fieldState?.errors} />
+                  <Feedback errors={fieldState?.errors} warnings={fieldState?.warnings} />
                 </FormItem>
               )}
             </Field>

apps/demo-free-layout/src/nodes/default-form-meta.tsx

@@ -1,4 +1,9 @@
-import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/free-layout-editor';
+import {
+  FormRenderProps,
+  FormMeta,
+  ValidateTrigger,
+  FeedbackLevel,
+} from '@flowgram.ai/free-layout-editor';
 import {
   autoRenameRefEffect,
   provideJsonSchemaOutputs,
@@ -30,7 +35,10 @@ export const defaultFormMeta: FormMeta<FlowNodeJSON> = {
         required.includes(valuePropetyKey) &&
         (value === '' || value === undefined || value?.content === '')
       ) {
-        return `${valuePropetyKey} is required`;
+        return {
+          message: `${valuePropetyKey} is required`,
+          level: FeedbackLevel.Error, // Error || Warning
+        };
       }
       return undefined;
     },

packages/client/editor/src/index.ts

@@ -53,6 +53,7 @@ export {
   useFieldValidate,
   useWatch,
   ValidateTrigger,
+  FeedbackLevel,
 } from '@flowgram.ai/form';
 export * from '@flowgram.ai/node';
 export { FormModelV2 as FormModel };

packages/node-engine/form/src/core/field-model.ts

@@ -361,8 +361,8 @@ export class FieldModel<TValue extends FieldValue = FieldValue> implements Dispo
 
       const groupedFeedbacks = groupBy(feedbacks, 'level');
 
-      warnings = warnings.concat(groupedFeedbacks[FeedbackLevel.Warning] as FieldWarning[]);
-      errors = errors.concat(groupedFeedbacks[FeedbackLevel.Error] as FieldError[]);
+      warnings = warnings.concat((groupedFeedbacks[FeedbackLevel.Warning] as FieldWarning[]) || []);
+      errors = errors.concat((groupedFeedbacks[FeedbackLevel.Error] as FieldError[]) || []);
     }
 
     return { errors, warnings };

packages/node-engine/form/src/core/form-model.ts

@@ -15,7 +15,7 @@ import {
   OnFormValuesUpdatedPayload,
 } from '../types/form';
 import { FieldName, FieldValue } from '../types/field';
-import { Errors, FormValidateReturn, Warnings } from '../types';
+import { Errors, FeedbackLevel, FormValidateReturn, Warnings } from '../types';
 import { createFormModelState } from '../constants';
 import { getValidByErrors, mergeFeedbacks } from './utils';
 import { Store } from './store';
@@ -281,8 +281,14 @@ export class FormModel<TValues = any> implements Disposable {
           const feedback = toFeedback(result, path);
           const field = this.getField(path);
 
-          const errors = feedbackToFieldErrorsOrWarnings<Errors>(path, feedback);
-          const warnings = feedbackToFieldErrorsOrWarnings<Warnings>(path, feedback);
+          const errors = feedbackToFieldErrorsOrWarnings<Errors>(
+            path,
+            feedback?.level === FeedbackLevel.Error ? feedback : undefined
+          );
+          const warnings = feedbackToFieldErrorsOrWarnings<Warnings>(
+            path,
+            feedback?.level === FeedbackLevel.Warning ? feedback : undefined
+          );
 
           if (field) {
             field.state.errors = errors;

packages/node-engine/form/src/index.ts

@@ -19,7 +19,7 @@ export type {
   Warnings,
 } from './types';
 
-export { ValidateTrigger } from './types';
+export { ValidateTrigger, FeedbackLevel } from './types';
 export { createForm, type CreateFormOptions } from './core/create-form';
 export { Glob } from './utils';
 export * from './core';

packages/node-engine/form/src/types/validate.ts

@@ -24,7 +24,7 @@ export interface Feedback<FeedbackLevel> {
   /**
    * Feedback message
    */
-  message: string;
+  message: string | React.ReactNode;
 }
 
 export type FieldError = Feedback<FeedbackLevel.Error>;