Merge pull request #124 from workfloworchestrator/rename-component-matcher

Rename componentMatcher to componentMatcherExtender

Author: Georgi2704

frontend/.changeset/tasty-berries-grin.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Rename componentMatcher to componentMatcherExtender

frontend/apps/example/src/app/page.tsx

@@ -98,7 +98,7 @@ export default function Home() {
                     apiProvider: pydanticFormApiProvider,
                     labelProvider: pydanticLabelProvider,
                     customDataProvider: pydanticCustomDataProvider,
-                    componentMatcher: componentMatcher,
+                    componentMatcherExtender: componentMatcher,
                     customTranslations: customTranslations,
                     locale: locale,
                 }}

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

@@ -45,7 +45,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
 
     const component = fieldToComponentMatcher(
         arrayItem,
-        config?.componentMatcher,
+        config?.componentMatcherExtender,
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {

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

@@ -12,7 +12,7 @@ export const ObjectField = ({
     const { config } = usePydanticFormContext();
     const components = getPydanticFormComponents(
         pydanticFormField.properties || {},
-        config?.componentMatcher,
+        config?.componentMatcherExtender,
     );
 
     return (

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

@@ -37,7 +37,7 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     const pydanticFormComponents: PydanticFormComponents =
         getPydanticFormComponents(
             pydanticFormSchema?.properties || {},
-            config?.componentMatcher,
+            config?.componentMatcherExtender,
         );
 
     const t = useTranslations('renderForm');

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -82,7 +82,7 @@ function PydanticFormContextProvider({
         customValidationRules,
         allowUntouchedSubmit,
         skipSuccessNotice,
-        componentMatcher,
+        componentMatcherExtender,
         cancelButton,
     } = config;
 
@@ -168,7 +168,7 @@ function PydanticFormContextProvider({
         pydanticFormSchema,
         rhfRef.current,
         customValidationRules,
-        componentMatcher,
+        componentMatcherExtender,
     );
 
     const initialData = getFormValuesFromFieldOrLabels(
@@ -177,7 +177,7 @@ function PydanticFormContextProvider({
             ...formLabels?.data,
             ...customData,
         },
-        componentMatcher,
+        componentMatcherExtender,
     );
 
     // initialize the react-hook-form

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

@@ -258,7 +258,7 @@ export const isNullableField = (field: PydanticFormField) =>
 export const getFormValuesFromFieldOrLabels = (
     pydanticFormSchema?: PydanticFormSchema,
     labelData?: Record<string, string>,
-    componentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
     if (!pydanticFormSchema) {
         return {};
@@ -270,7 +270,7 @@ export const getFormValuesFromFieldOrLabels = (
 
     const pydanticFormComponents = getPydanticFormComponents(
         pydanticFormSchema.properties,
-        componentMatcher,
+        componentMatcherExtender,
     );
 
     pydanticFormComponents.forEach((component) => {
@@ -346,10 +346,10 @@ export const rhfTriggerValidationsOnChange =
     };
 
 export const getMatcher = (
-    customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
-    const componentMatchers = customComponentMatcher
-        ? customComponentMatcher(defaultComponentMatchers)
+    const componentMatchers = componentMatcherExtender
+        ? componentMatcherExtender(defaultComponentMatchers)
         : defaultComponentMatchers;
 
     return (field: PydanticFormField): PydanticComponentMatcher | undefined => {
@@ -362,10 +362,10 @@ export const getMatcher = (
 export const getClientSideValidationRule = (
     field: PydanticFormField | undefined,
     rhf?: ReturnType<typeof useForm>,
-    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
     if (!field) return z.unknown();
-    const matcher = getMatcher(customComponentMatcher);
+    const matcher = getMatcher(componentMatcherExtender);
 
     const componentMatch = matcher(field);
 
@@ -389,9 +389,9 @@ const defaultComponent: ElementMatch = {
 
 export const fieldToComponentMatcher = (
     pydanticFormField: PydanticFormField,
-    customComponentMatcher: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
-    const matcher = getMatcher(customComponentMatcher);
+    const matcher = getMatcher(componentMatcherExtender);
     const matchedComponent = matcher(pydanticFormField);
 
     const ElementMatch: ElementMatch = matchedComponent
@@ -405,11 +405,14 @@ export const fieldToComponentMatcher = (
 };
 export const getPydanticFormComponents = (
     properties: Properties,
-    componentMatcher: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender: PydanticFormsContextConfig['componentMatcherExtender'],
 ): PydanticFormComponents => {
     const components: PydanticFormComponents = Object.values(properties).map(
         (pydanticFormField) => {
-            return fieldToComponentMatcher(pydanticFormField, componentMatcher);
+            return fieldToComponentMatcher(
+                pydanticFormField,
+                componentMatcherExtender,
+            );
         },
     );
 

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

@@ -29,7 +29,7 @@ const getZodRule = (
     pydanticFormField: PydanticFormField,
     rhf: ReturnType<typeof useForm>,
     customValidationRule?: CustomValidationRule,
-    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ): ZodTypeAny => {
     const customRule = customValidationRule?.(pydanticFormField, rhf);
 
@@ -42,7 +42,7 @@ const getZodRule = (
             pydanticFormField.properties || {},
             rhf,
             customValidationRule,
-            customComponentMatcher,
+            componentMatcherExtender,
         );
         return objectValidationObject;
     }
@@ -53,7 +53,7 @@ const getZodRule = (
                   arrayItem,
                   rhf,
                   customValidationRule,
-                  customComponentMatcher,
+                  componentMatcherExtender,
               )
             : z.unknown();
         const arrayRule = z
@@ -81,7 +81,7 @@ const getZodRule = (
     return getClientSideValidationRule(
         pydanticFormField,
         rhf,
-        customComponentMatcher,
+        componentMatcherExtender,
     );
 };
 
@@ -95,11 +95,11 @@ const getZodValidationObject = (
     properties: Properties,
     rhf: ReturnType<typeof useForm>,
     customValidationRule?: CustomValidationRule,
-    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
     const pydanticFormComponents = getPydanticFormComponents(
         properties,
-        customComponentMatcher,
+        componentMatcherExtender,
     );
     if (!pydanticFormComponents) return z.unknown();
 
@@ -116,7 +116,7 @@ const getZodValidationObject = (
             pydanticFormField,
             rhf,
             customValidationRule,
-            customComponentMatcher,
+            componentMatcherExtender,
         );
 
         validationObject[id] = zodRules;
@@ -129,7 +129,7 @@ export const useGetZodValidator = (
     pydanticFormSchema?: PydanticFormSchema,
     rhf?: ReturnType<typeof useForm>,
     customValidationRule?: CustomValidationRule,
-    customComponentMatcher?: PydanticFormsContextConfig['componentMatcher'],
+    componentMatcherExtender?: PydanticFormsContextConfig['componentMatcherExtender'],
 ) => {
     return useMemo(() => {
         if (!pydanticFormSchema || !rhf) {
@@ -140,9 +140,14 @@ export const useGetZodValidator = (
             pydanticFormSchema.properties,
             rhf,
             customValidationRule,
-            customComponentMatcher,
+            componentMatcherExtender,
         );
 
         return validationObject;
-    }, [customComponentMatcher, customValidationRule, pydanticFormSchema, rhf]);
+    }, [
+        componentMatcherExtender,
+        customValidationRule,
+        pydanticFormSchema,
+        rhf,
+    ]);
 };

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

@@ -259,7 +259,7 @@ export interface PydanticFormZodValidationPresets {
     [type: string]: PydanticFormZodValidationFn;
 }
 
-export type ComponentMatcher = (
+export type ComponentMatcherExtender = (
     currentMatchers: PydanticComponentMatcher[],
 ) => PydanticComponentMatcher[];
 
@@ -290,7 +290,7 @@ export interface PydanticFormsContextConfig {
 
     resetButtonAlternative?: React.ReactNode;
 
-    componentMatcher?: ComponentMatcher;
+    componentMatcherExtender?: ComponentMatcherExtender;
 
     formRenderer?: FormRenderComponent;
     footerRenderer?: React.JSXElementConstructor<object>;