Use RHF bindings in Search app (#500)

* Use RHF Macaw bindings from shared package

* Update the nextjs config

.changeset/cyan-files-suffer.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-search": patch
+---
+
+Use input component from the shared package.

apps/search/next.config.js

@@ -23,7 +23,7 @@ const moduleExports = {
       },
     ],
   },
-  transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui"],
+  transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui", "@saleor/react-hook-form-macaw"],
   sentry: {
     /*
      * Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`

apps/search/package.json

@@ -20,6 +20,7 @@
     "@saleor/app-sdk": "0.38.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
+    "@saleor/react-hook-form-macaw": "workspace:*",
     "@saleor/macaw-ui": "^0.8.0-pre.84",
     "@sentry/nextjs": "^7.46.0",
     "@types/debug": "^4.1.7",

apps/search/src/components/AlgoliaConfigurationForm.tsx

@@ -1,9 +1,10 @@
 import { useAuthenticatedFetch } from "@saleor/app-sdk/app-bridge";
 
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { fetchConfiguration } from "../lib/configuration";
-import { Box, Button, Divider, Input, Text } from "@saleor/macaw-ui/next";
+import { Box, Button, Divider, Text } from "@saleor/macaw-ui/next";
+import { Input } from "@saleor/react-hook-form-macaw";
 import { useDashboardNotification } from "@saleor/apps-shared";
 import { AlgoliaSearchProvider } from "../lib/algolia/algoliaSearchProvider";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -93,61 +94,33 @@ export const AlgoliaConfigurationForm = () => {
       <form onSubmit={onFormSubmit}>
         <Box padding={8}>
           <Box marginBottom={8}>
-            <Controller
+            <Input
-              name="appId"
               control={control}
-              render={({ field, fieldState }) => {
+              name="appId"
-                return (
+              disabled={isFormDisabled}
-                  <Input
+              required
-                    disabled={isFormDisabled}
+              label="Application ID"
-                    required
+              helperText="Usually 10 characters, e.g. XYZAAABB00"
-                    label="Application ID"
-                    error={fieldState.invalid}
-                    helperText={
-                      fieldState.error?.message ?? "Usually 10 characters, e.g. XYZAAABB00"
-                    }
-                    {...field}
-                  />
-                );
-              }}
             />
           </Box>
           <Box marginBottom={8} key={"secret"} /* todo why is this "key" here? */>
-            <Controller
+            <Input
-              name="secretKey"
               control={control}
-              render={({ field, fieldState }) => (
+              name="secretKey"
-                <Input
+              disabled={isFormDisabled}
-                  helperText={
+              required
-                    fieldState.error?.message ?? "In Algolia dashboard it's a masked field"
+              label="Admin API Key"
-                  }
+              helperText="In Algolia dashboard it's a masked field"
-                  disabled={isFormDisabled}
-                  required
-                  label="Admin API Key"
-                  error={fieldState.invalid}
-                  {...field}
-                />
-              )}
             />
           </Box>
 
-          <Controller
+          <Input
-            name="indexNamePrefix"
             control={control}
-            render={({ field, fieldState }) => {
+            name="indexNamePrefix"
-              return (
+            disabled={isFormDisabled}
-                <Input
+            required
-                  disabled={isFormDisabled}
+            label="Index name prefix"
-                  error={fieldState.invalid}
+            helperText='Optional prefix, you can add "test" or "staging" to test the app'
-                  label="Index name prefix"
-                  helperText={
-                    fieldState.error?.message ??
-                    'Optional prefix, you can add "test" or "staging" to test the app'
-                  }
-                  {...field}
-                />
-              );
-            }}
           />
 
           {credentialsValidationError && (

pnpm-lock.yaml

@@ -1251,6 +1251,9 @@ importers:
       '@saleor/macaw-ui':
         specifier: ^0.8.0-pre.84
         version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
+      '@saleor/react-hook-form-macaw':
+        specifier: workspace:*
+        version: link:../../packages/react-hook-form-macaw
       '@sentry/nextjs':
         specifier: ^7.46.0
         version: 7.46.0(next@13.3.0)(react@18.2.0)