djkato/saleor-apps-redis_apl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use macaw input bindings (#508)

Browse source
This commit is contained in:
Krzysztof Wolski 2023-05-24 16:09:45 +02:00 committed by GitHub
parent 44741aa74e
commit cb4a9e8cad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 27 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/emails-and-messages/next.config.js
View file

@ -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");

5
apps/emails-and-messages/package.json
View file

@ -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",

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

@ -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}
/>
)}
/>
);
}

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

@ -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}
/>
)}
/>
);
}

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

@ -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}
/>
)}
/>
);
}

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

@ -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.

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

@ -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,

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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 {

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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 />

11
pnpm-lock.yaml
View file

@ -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