From cb4a9e8cad15ebd92dcd967cfcd86e18e08b63fd Mon Sep 17 00:00:00 2001 From: Krzysztof Wolski Date: Wed, 24 May 2023 16:09:45 +0200 Subject: [PATCH] Use macaw input bindings (#508) --- apps/emails-and-messages/next.config.js | 7 +++- apps/emails-and-messages/package.json | 5 ++- .../react-hook-form-macaw/Combobox.tsx | 36 ---------------- .../react-hook-form-macaw/Input.tsx | 36 ---------------- .../react-hook-form-macaw/Multiselect.tsx | 42 ------------------- .../react-hook-form-macaw/README.md | 3 -- .../ui/universal-channels-section.tsx | 2 +- .../sendgrid/ui/api-connection-section.tsx | 2 +- .../ui/sendgrid-basic-information-section.tsx | 5 +-- .../sendgrid/ui/sendgrid-events-section.tsx | 2 +- .../sendgrid/ui/sendgrid-sender-section.tsx | 2 +- .../src/modules/smtp/ui/event-form.tsx | 2 +- .../ui/smtp-basic-information-section.tsx | 2 +- .../src/modules/smtp/ui/smtp-section.tsx | 2 +- .../modules/smtp/ui/smtp-sender-section.tsx | 2 +- .../src/pages/configuration/smtp/new.tsx | 4 +- pnpm-lock.yaml | 11 +++-- 17 files changed, 27 insertions(+), 138 deletions(-) delete mode 100644 apps/emails-and-messages/src/components/react-hook-form-macaw/Combobox.tsx delete mode 100644 apps/emails-and-messages/src/components/react-hook-form-macaw/Input.tsx delete mode 100644 apps/emails-and-messages/src/components/react-hook-form-macaw/Multiselect.tsx delete mode 100644 apps/emails-and-messages/src/components/react-hook-form-macaw/README.md diff --git a/apps/emails-and-messages/next.config.js b/apps/emails-and-messages/next.config.js index d756789..e8f7c12 100644 --- a/apps/emails-and-messages/next.config.js +++ b/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"); diff --git a/apps/emails-and-messages/package.json b/apps/emails-and-messages/package.json index c7b5d27..5680a9a 100644 --- a/apps/emails-and-messages/package.json +++ b/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", diff --git a/apps/emails-and-messages/src/components/react-hook-form-macaw/Combobox.tsx b/apps/emails-and-messages/src/components/react-hook-form-macaw/Combobox.tsx deleted file mode 100644 index eeaee63..0000000 --- a/apps/emails-and-messages/src/components/react-hook-form-macaw/Combobox.tsx +++ /dev/null @@ -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 = Omit<$ComboboxProps, "name"> & { - name: FieldPath; - control: Control; -}; - -export function Combobox({ - type, - required, - name, - control, - options, - ...rest -}: ComboboxProps): JSX.Element { - return ( - ( - <$Combobox - {...rest} - {...field} - options={options} - value={value || ""} - name={name} - required={required} - type={type} - error={!!error} - helperText={rest.helperText} - /> - )} - /> - ); -} diff --git a/apps/emails-and-messages/src/components/react-hook-form-macaw/Input.tsx b/apps/emails-and-messages/src/components/react-hook-form-macaw/Input.tsx deleted file mode 100644 index 6e829db..0000000 --- a/apps/emails-and-messages/src/components/react-hook-form-macaw/Input.tsx +++ /dev/null @@ -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 = Omit< - $InputProps, - "name" -> & { - name: FieldPath; - control: Control; -}; - -export function Input({ - type, - required, - name, - control, - ...rest -}: TextFieldElementProps): JSX.Element { - return ( - ( - <$Input - {...rest} - {...field} - name={name} - required={required} - type={type} - error={!!error} - helperText={rest.helperText} - /> - )} - /> - ); -} diff --git a/apps/emails-and-messages/src/components/react-hook-form-macaw/Multiselect.tsx b/apps/emails-and-messages/src/components/react-hook-form-macaw/Multiselect.tsx deleted file mode 100644 index d14a14d..0000000 --- a/apps/emails-and-messages/src/components/react-hook-form-macaw/Multiselect.tsx +++ /dev/null @@ -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 = Omit< - $MultiselectProps, - "name" -> & { - name: FieldPath; - control: Control; -}; - -export function Multiselect({ - type, - required, - name, - control, - options, - ...rest -}: MultiselectProps): JSX.Element { - return ( - ( - <$Multiselect - {...rest} - {...field} - options={options} - value={value || []} - name={name} - required={required} - type={type} - error={!!error} - helperText={rest.helperText} - /> - )} - /> - ); -} diff --git a/apps/emails-and-messages/src/components/react-hook-form-macaw/README.md b/apps/emails-and-messages/src/components/react-hook-form-macaw/README.md deleted file mode 100644 index f4f6036..0000000 --- a/apps/emails-and-messages/src/components/react-hook-form-macaw/README.md +++ /dev/null @@ -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. diff --git a/apps/emails-and-messages/src/modules/channels/ui/universal-channels-section.tsx b/apps/emails-and-messages/src/modules/channels/ui/universal-channels-section.tsx index 80b4a3d..0f17524 100644 --- a/apps/emails-and-messages/src/modules/channels/ui/universal-channels-section.tsx +++ b/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, diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx index 44bd657..aa062fb 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx index 9fb00b1..bcd18ae 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-basic-information-section.tsx +++ b/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 { Controller, useForm } from "react-hook-form"; +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 SendgridBasicInformationSectionProps { configuration: SendgridConfiguration; diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx index 3989983..673d5c2 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx index af54897..b0b2fa0 100644 --- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-sender-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/modules/smtp/ui/event-form.tsx b/apps/emails-and-messages/src/modules/smtp/ui/event-form.tsx index 2140707..86f2794 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/event-form.tsx +++ b/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 { diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx index 83eacaa..dc43a6c 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-basic-information-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx index eb800c9..1605cbc 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx index 6a7e9e9..b7a9a08 100644 --- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-sender-section.tsx +++ b/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; diff --git a/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx b/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx index cc440d8..1ccaa76 100644 --- a/apps/emails-and-messages/src/pages/configuration/smtp/new.tsx +++ b/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 = () => { > diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac4e91b..37ecbe9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -467,8 +467,8 @@ importers: apps/emails-and-messages: dependencies: '@hookform/resolvers': - specifier: ^2.9.10 - version: 2.9.11(react-hook-form@7.43.1) + specifier: ^3.1.0 + 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 - version: 7.43.1(react@18.2.0) + specifier: ^7.43.9 + version: 7.43.9(react@18.2.0) react-is: specifier: ^18.2.0 version: 18.2.0