Use macaw input bindings (#508)

apps/emails-and-messages/next.config.js

@@ -1,11 +1,14 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ["@saleor/apps-shared"],
+  transpilePackages: ["@saleor/apps-shared", "@saleor/react-hook-form-macaw"],
 };
 
 const isSentryEnvAvailable =
-  process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_PROJECT && process.env.SENTRY_ORG && process.env.SENTRY_AUTH_TOKEN;
+  process.env.SENTRY_AUTH_TOKEN &&
+  process.env.SENTRY_PROJECT &&
+  process.env.SENTRY_ORG &&
+  process.env.SENTRY_AUTH_TOKEN;
 
 const { withSentryConfig } = require("@sentry/nextjs");
 

apps/emails-and-messages/package.json

@@ -16,10 +16,11 @@
     "schemaVersion": "3.11.7"
   },
   "dependencies": {
-    "@hookform/resolvers": "^2.9.10",
+    "@hookform/resolvers": "^3.1.0",
     "@monaco-editor/react": "^4.4.6",
     "@saleor/app-sdk": "0.38.0",
     "@saleor/apps-shared": "workspace:*",
+    "@saleor/react-hook-form-macaw": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.83",
     "@sendgrid/client": "^7.7.0",
     "@sendgrid/mail": "^7.7.0",
@@ -45,7 +46,7 @@
     "pino-pretty": "^10.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.43.0",
+    "react-hook-form": "^7.43.9",
     "react-is": "^18.2.0",
     "react-query": "^3.39.3",
     "urql": "^3.0.3",

apps/emails-and-messages/src/components/react-hook-form-macaw/Combobox.tsx

@@ -1,36 +0,0 @@
-import { Combobox as $Combobox, type ComboboxProps as $ComboboxProps } from "@saleor/macaw-ui/next";
-import { Control, Controller, FieldPath, FieldValues } from "react-hook-form";
-
-export type ComboboxProps<T extends FieldValues = FieldValues> = Omit<$ComboboxProps, "name"> & {
-  name: FieldPath<T>;
-  control: Control<T>;
-};
-
-export function Combobox<TFieldValues extends FieldValues = FieldValues>({
-  type,
-  required,
-  name,
-  control,
-  options,
-  ...rest
-}: ComboboxProps<TFieldValues>): JSX.Element {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field: { value, ...field }, fieldState: { error } }) => (
-        <$Combobox
-          {...rest}
-          {...field}
-          options={options}
-          value={value || ""}
-          name={name}
-          required={required}
-          type={type}
-          error={!!error}
-          helperText={rest.helperText}
-        />
-      )}
-    />
-  );
-}

apps/emails-and-messages/src/components/react-hook-form-macaw/Input.tsx

@@ -1,36 +0,0 @@
-import { Input as $Input, type InputProps as $InputProps } from "@saleor/macaw-ui/next";
-import { Control, Controller, FieldPath, FieldValues } from "react-hook-form";
-
-export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
-  $InputProps,
-  "name"
-> & {
-  name: FieldPath<T>;
-  control: Control<T>;
-};
-
-export function Input<TFieldValues extends FieldValues = FieldValues>({
-  type,
-  required,
-  name,
-  control,
-  ...rest
-}: TextFieldElementProps<TFieldValues>): JSX.Element {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <$Input
-          {...rest}
-          {...field}
-          name={name}
-          required={required}
-          type={type}
-          error={!!error}
-          helperText={rest.helperText}
-        />
-      )}
-    />
-  );
-}

apps/emails-and-messages/src/components/react-hook-form-macaw/Multiselect.tsx

@@ -1,42 +0,0 @@
-import {
-  Multiselect as $Multiselect,
-  type MultiselectProps as $MultiselectProps,
-} from "@saleor/macaw-ui/next";
-import { Control, Controller, FieldPath, FieldValues, UseFormSetError } from "react-hook-form";
-
-export type MultiselectProps<T extends FieldValues = FieldValues> = Omit<
-  $MultiselectProps,
-  "name"
-> & {
-  name: FieldPath<T>;
-  control: Control<T>;
-};
-
-export function Multiselect<TFieldValues extends FieldValues = FieldValues>({
-  type,
-  required,
-  name,
-  control,
-  options,
-  ...rest
-}: MultiselectProps<TFieldValues>): JSX.Element {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field: { value, ...field }, fieldState: { error } }) => (
-        <$Multiselect
-          {...rest}
-          {...field}
-          options={options}
-          value={value || []}
-          name={name}
-          required={required}
-          type={type}
-          error={!!error}
-          helperText={rest.helperText}
-        />
-      )}
-    />
-  );
-}

apps/emails-and-messages/src/components/react-hook-form-macaw/README.md

@@ -1,3 +0,0 @@
-Bindings for Macaw, code based on https://github.com/jsun969/react-hook-form-antd/
-
-Components will be moved to the separate library inside apps monorepo.

apps/emails-and-messages/src/modules/channels/ui/universal-channels-section.tsx

@@ -1,12 +1,12 @@
 import { BoxWithBorder } from "../../../components/box-with-border";
 import { Box, Button, ProductsIcons, Switch, TableEditIcon, Text } from "@saleor/macaw-ui/next";
+import { Multiselect } from "@saleor/react-hook-form-macaw";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { trpcClient } from "../../trpc/trpc-client";
 import { Controller, useForm } from "react-hook-form";
 import { BoxFooter } from "../../../components/box-footer";
 import { SectionWithDescription } from "../../../components/section-with-description";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Multiselect } from "../../../components/react-hook-form-macaw/Multiselect";
 import { AssignedChannelsMessage } from "./assigned-channels-message";
 import {
   ChannelConfiguration,

apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx

@@ -11,9 +11,9 @@ import {
 import { useForm } from "react-hook-form";
 import { BoxFooter } from "../../../components/box-footer";
 import { SectionWithDescription } from "../../../components/section-with-description";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 interface ApiConnectionSectionProps {
   configuration: SendgridConfiguration;

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx

@@ -8,13 +8,12 @@ import {
   SendgridUpdateBasicInformation,
   sendgridUpdateBasicInformationSchema,
 } from "../configuration/sendgrid-config-input-schema";
-import { z } from "zod";
+import { useForm } from "react-hook-form";
-import { Controller, useForm } from "react-hook-form";
 import { BoxFooter } from "../../../components/box-footer";
 import { SectionWithDescription } from "../../../components/section-with-description";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 interface SendgridBasicInformationSectionProps {
   configuration: SendgridConfiguration;

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx

@@ -17,8 +17,8 @@ import { SectionWithDescription } from "../../../components/section-with-descrip
 import { useQuery } from "@tanstack/react-query";
 import { fetchTemplates } from "../sendgrid-api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Combobox } from "../../../components/react-hook-form-macaw/Combobox";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Combobox } from "@saleor/react-hook-form-macaw";
 
 interface EventBoxProps {
   configuration: SendgridConfiguration;

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx

@@ -14,8 +14,8 @@ import { SectionWithDescription } from "../../../components/section-with-descrip
 import { fetchSenders } from "../sendgrid-api";
 import { useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Combobox } from "../../../components/react-hook-form-macaw/Combobox";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Combobox } from "@saleor/react-hook-form-macaw";
 
 interface SendgridSenderSectionProps {
   configuration: SendgridConfiguration;

apps/emails-and-messages/src/modules/smtp/ui/event-form.tsx

@@ -1,7 +1,6 @@
 import { Box, Button, Text } from "@saleor/macaw-ui/next";
 import { SmtpConfiguration } from "../configuration/smtp-config-schema";
 import { MessageEventTypes } from "../../event-handlers/message-event-types";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { useDashboardNotification } from "@saleor/apps-shared";
 import { trpcClient } from "../../trpc/trpc-client";
 import { Controller, useForm } from "react-hook-form";
@@ -17,6 +16,7 @@ import { examplePayloads } from "../../event-handlers/default-payloads";
 import { MjmlPreview } from "./mjml-preview";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 const PREVIEW_DEBOUNCE_DELAY = 500;
 
 interface EventFormProps {

apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx

@@ -12,9 +12,9 @@ import {
   SmtpUpdateBasicInformation,
   smtpUpdateBasicInformationSchema,
 } from "../configuration/smtp-config-input-schema";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 interface SmtpBasicInformationSectionProps {
   configuration: SmtpConfiguration;

apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx

@@ -8,9 +8,9 @@ import { useForm } from "react-hook-form";
 import { BoxFooter } from "../../../components/box-footer";
 import { SectionWithDescription } from "../../../components/section-with-description";
 import { SmtpUpdateSmtp, smtpUpdateSmtpSchema } from "../configuration/smtp-config-input-schema";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 interface SmtpSectionProps {
   configuration: SmtpConfiguration;

apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx

@@ -11,9 +11,9 @@ import {
   SmtpUpdateSender,
   smtpUpdateSenderSchema,
 } from "../configuration/smtp-config-input-schema";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 interface SmtpSenderSectionProps {
   configuration: SmtpConfiguration;

apps/emails-and-messages/src/pages/configuration/smtp/new.tsx

@@ -13,11 +13,11 @@ import {
 } from "../../../modules/smtp/configuration/smtp-config-input-schema";
 import { BasicLayout } from "../../../components/basic-layout";
 import { useRouter } from "next/router";
-import { Input } from "../../../components/react-hook-form-macaw/Input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { appUrls } from "../../../modules/app-configuration/urls";
 import { smtpUrls } from "../../../modules/smtp/urls";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
+import { Input } from "@saleor/react-hook-form-macaw";
 
 const NewSmtpConfigurationPage: NextPage = () => {
   const router = useRouter();
@@ -74,9 +74,9 @@ const NewSmtpConfigurationPage: NextPage = () => {
           >
             <Box padding={defaultPadding} display="flex" flexDirection="column" gap={10}>
               <Input
+                control={control}
                 name="name"
                 label="Configuration name"
-                control={control}
                 helperText="Name of the configuration, for example 'Production' or 'Test'"
               />
               <Divider />

pnpm-lock.yaml

@@ -467,8 +467,8 @@ importers:
   apps/emails-and-messages:
     dependencies:
       '@hookform/resolvers':
-        specifier: ^2.9.10
+        specifier: ^3.1.0
-        version: 2.9.11(react-hook-form@7.43.1)
+        version: 3.1.0(react-hook-form@7.43.9)
       '@monaco-editor/react':
         specifier: ^4.4.6
         version: 4.4.6(monaco-editor@0.38.0)(react-dom@18.2.0)(react@18.2.0)
@@ -481,6 +481,9 @@ importers:
       '@saleor/macaw-ui':
         specifier: 0.8.0-pre.83
         version: 0.8.0-pre.83(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0)
+      '@saleor/react-hook-form-macaw':
+        specifier: workspace:*
+        version: link:../../packages/react-hook-form-macaw
       '@sendgrid/client':
         specifier: ^7.7.0
         version: 7.7.0
@@ -554,8 +557,8 @@ importers:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
-        specifier: ^7.43.0
+        specifier: ^7.43.9
-        version: 7.43.1(react@18.2.0)
+        version: 7.43.9(react@18.2.0)
       react-is:
         specifier: ^18.2.0
         version: 18.2.0