UndefinedComponent pour mettre un beau warning quand il manque un c…

…omposant de domaine
klee-contrib · Jan 24, 2025 · 4888319 · 4888319
1 parent 5ed86a9
commit 4888319
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 39 deletions.
diff --git a/packages/forms/src/domain.ts b/packages/forms/src/domain.ts
@@ -8,7 +8,8 @@ import {
     DomainFieldType,
     DomainFieldTypeMultiple,
     DomainFieldTypeSingle,
-    ReferenceList
+    ReferenceList,
+    UndefinedComponent
 } from "@focus4/stores";
 
 import {
@@ -106,17 +107,17 @@ export function domain(d: Partial<Domain> & {type: DomainFieldType}): Domain {
             AutocompleteComponent: AutocompleteChips,
             DisplayComponent: Display,
             LabelComponent: Label,
-            InputComponent: () => null,
+            InputComponent: UndefinedComponent,
             SelectComponent: SelectChips,
             ...d
         };
     } else {
         return {
-            AutocompleteComponent: () => null,
+            AutocompleteComponent: UndefinedComponent,
             DisplayComponent: Display,
             LabelComponent: Label,
-            InputComponent: () => null,
-            SelectComponent: () => null,
+            InputComponent: UndefinedComponent,
+            SelectComponent: UndefinedComponent,
             ...d
         };
     }

diff --git a/packages/forms/src/fields/field.tsx b/packages/forms/src/fields/field.tsx
@@ -10,7 +10,8 @@ import {
     FieldComponents,
     FieldEntry,
     FieldEntryType,
-    FormEntityField
+    FormEntityField,
+    UndefinedComponent
 } from "@focus4/stores";
 import {CSSProp, useTheme} from "@focus4/styling";
 
@@ -147,17 +148,17 @@ export function Field<F extends FieldEntry>(
                 name,
                 isRequired,
                 domain: {
-                    AutocompleteComponent,
+                    AutocompleteComponent = UndefinedComponent,
                     autocompleteProps: domainACP = {},
                     className = "",
-                    DisplayComponent,
+                    DisplayComponent = UndefinedComponent,
                     displayFormatter = defaultFormatter,
                     displayProps: domainDCP = {},
-                    LabelComponent,
+                    LabelComponent = UndefinedComponent,
                     labelProps: domainLCP = {},
-                    InputComponent,
+                    InputComponent = UndefinedComponent,
                     inputProps: domainICP = {},
-                    SelectComponent,
+                    SelectComponent = UndefinedComponent,
                     selectProps: domainSCP = {},
                     type
                 }
@@ -190,6 +191,36 @@ export function Field<F extends FieldEntry>(
             style["--field-value-width"] = valueWidth;
         }
 
+        useEffect(() => {
+            if (hasLabel && LabelComponent === UndefinedComponent) {
+                console.warn(`Le champ '${name}' essaie d'afficher un 'LabelComponent' qui n'a pas été défini.`);
+            }
+        }, [hasLabel, LabelComponent, name]);
+
+        useEffect(() => {
+            if (isEdit && inputType === "select" && SelectComponent === UndefinedComponent) {
+                console.warn(`Le champ '${name}' essaie d'afficher un 'SelectComponent' qui n'a pas été défini.`);
+            }
+        }, [inputType, isEdit, SelectComponent, name]);
+
+        useEffect(() => {
+            if (isEdit && inputType === "input" && InputComponent === UndefinedComponent) {
+                console.warn(`Le champ '${name}' essaie d'afficher un 'InputComponent' qui n'a pas été défini.`);
+            }
+        }, [inputType, isEdit, InputComponent, name]);
+
+        useEffect(() => {
+            if (isEdit && inputType === "autocomplete" && AutocompleteComponent === UndefinedComponent) {
+                console.warn(`Le champ '${name}' essaie d'afficher un 'AutocompleteComponent' qui n'a pas été défini.`);
+            }
+        }, [inputType, isEdit, AutocompleteComponent, name]);
+
+        useEffect(() => {
+            if (!isEdit && DisplayComponent === UndefinedComponent) {
+                console.warn(`Le champ '${name}' essaie d'afficher un 'DisplayComponent' qui n'a pas été défini.`);
+            }
+        }, [isEdit, DisplayComponent, name]);
+
         return (
             <div
                 className={classNames(

diff --git a/packages/stores/src/entity/field/builder.ts b/packages/stores/src/entity/field/builder.ts
@@ -21,6 +21,8 @@ import {
     WithThemeProps
 } from "../types";
 
+import {UndefinedComponent} from "./utils";
+
 type DomainInputProps<D> = D extends Domain<infer _0, infer ICProps> ? ICProps : never;
 type DomainSelectProps<D> = D extends Domain<infer _0, infer _1, infer SCProps> ? SCProps : never;
 type DomainAutocompleteProps<D> = D extends Domain<infer _0, infer _1, infer _2, infer ACProps> ? ACProps : never;
@@ -87,11 +89,11 @@ export class EntityFieldBuilder<F extends FieldEntry> {
                     type: "field",
                     domain: {
                         type: "string",
-                        AutocompleteComponent: () => null,
-                        DisplayComponent: () => null,
-                        LabelComponent: () => null,
-                        InputComponent: () => null,
-                        SelectComponent: () => null
+                        AutocompleteComponent: UndefinedComponent,
+                        DisplayComponent: UndefinedComponent,
+                        LabelComponent: UndefinedComponent,
+                        InputComponent: UndefinedComponent,
+                        SelectComponent: UndefinedComponent
                     } as Domain,
                     isRequired: false,
                     label: "",

diff --git a/packages/stores/src/entity/field/index.ts b/packages/stores/src/entity/field/index.ts
@@ -1,4 +1,4 @@
 export {EntityFieldBuilder} from "./builder";
-export {cloneField, fromField, makeField} from "./utils";
+export {cloneField, fromField, makeField, UndefinedComponent} from "./utils";
 
 export type {BuildingFormEntityField, Metadata} from "./builder";
diff --git a/packages/stores/src/entity/field/utils.ts b/packages/stores/src/entity/field/utils.ts
@@ -149,11 +149,11 @@ export function makeField(param1: any, param2: any = {}) {
             comment,
             domain = {
                 type: "string",
-                AutocompleteComponent: () => null,
-                DisplayComponent: () => null,
-                LabelComponent: () => null,
-                InputComponent: () => null,
-                SelectComponent: () => null
+                AutocompleteComponent: UndefinedComponent,
+                DisplayComponent: UndefinedComponent,
+                LabelComponent: UndefinedComponent,
+                InputComponent: UndefinedComponent,
+                SelectComponent: UndefinedComponent
             } as Domain,
             DisplayComponent = domain.DisplayComponent,
             displayFormatter = domain.displayFormatter,
@@ -185,6 +185,11 @@ export function makeField(param1: any, param2: any = {}) {
     }
 }
 
+/** Composant de domaine/champ non défini (vide). */
+export function UndefinedComponent() {
+    return null;
+}
+
 function withIsEdit(field: BuildingFormEntityField) {
     return extendObservable(field, {
         get isEdit() {

diff --git a/packages/stores/src/entity/index.ts b/packages/stores/src/entity/index.ts
@@ -1,6 +1,6 @@
-export {cloneField, fromField, makeField} from "./field";
-export {FormActionsBuilder, FormActions, FormListNodeBuilder, FormNodeBuilder} from "./form";
-export {LoadRegistration, NodeLoadBuilder, buildNode, makeEntityStore, toFlatValues} from "./store";
+export {cloneField, fromField, makeField, UndefinedComponent} from "./field";
+export {FormActions, FormActionsBuilder, FormListNodeBuilder, FormNodeBuilder} from "./form";
+export {buildNode, LoadRegistration, makeEntityStore, NodeLoadBuilder, toFlatValues} from "./store";
 export {stringFor} from "./string-for";
 export {
     isAnyFormNode,
@@ -23,34 +23,34 @@ export type {
     BaseInputProps,
     BaseLabelProps,
     BaseSelectProps,
+    Domain,
     DomainFieldType,
     DomainFieldTypeMultiple,
     DomainFieldTypeSingle,
     DomainType,
-    FieldComponents,
-    FieldEntryType,
-    FormListNode,
-    InputComponents,
-    SelectComponents,
-    Domain,
     EntityField,
     EntityToType,
+    FieldComponents,
     FieldEntry,
     FieldEntry2,
+    FieldEntryType,
     FormEntityField,
+    FormListNode,
     FormNode,
+    InputComponents,
     ListEntry,
     NodeToType,
     ObjectEntry,
     Patch,
     PatchAutocomplete,
     PatchDisplay,
+    PatchedFormListNode,
+    PatchedFormNode,
     PatchInput,
     PatchLabel,
     PatchSelect,
-    PatchedFormListNode,
-    PatchedFormNode,
     RecursiveListEntry,
+    SelectComponents,
     SingleDomainFieldType,
     SourceNodeType,
     StoreListNode,

diff --git a/packages/stores/src/focus4.stores.ts b/packages/stores/src/focus4.stores.ts
@@ -1,13 +1,11 @@
 export {CollectionStore} from "./collection";
 export {
+    buildNode,
+    cloneField,
     FormActions,
     FormActionsBuilder,
     FormListNodeBuilder,
     FormNodeBuilder,
-    LoadRegistration,
-    NodeLoadBuilder,
-    buildNode,
-    cloneField,
     fromField,
     isAnyFormNode,
     isAnyStoreNode,
@@ -17,10 +15,13 @@ export {
     isFormNode,
     isStoreListNode,
     isStoreNode,
+    LoadRegistration,
     makeEntityStore,
     makeField,
+    NodeLoadBuilder,
     stringFor,
     toFlatValues,
+    UndefinedComponent,
     validateField
 } from "./entity";
 export {emptyReferenceList, makeReferenceList, makeReferenceStore, referenceTrackingId} from "./reference";
@@ -57,11 +58,11 @@ export type {
     Patch,
     PatchAutocomplete,
     PatchDisplay,
+    PatchedFormListNode,
+    PatchedFormNode,
     PatchInput,
     PatchLabel,
     PatchSelect,
-    PatchedFormListNode,
-    PatchedFormNode,
     RecursiveListEntry,
     SelectComponents,
     SingleDomainFieldType,