Update Macaw and bindings to pre-106 (#791)

* Bump macaw UI

* Adjust rhf-macaw binding to use new macaw API

* Adjust CRM to use new macaw api

* adjust apps to work with new macaw

* Update combo box

* fix combobox value
This commit is contained in:
Lukasz Ostrowski 2023-07-24 16:45:45 +02:00 committed by GitHub
parent 2fab86b465
commit aa6fec183d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 524 additions and 428 deletions

View file

@ -0,0 +1,5 @@
---
"saleor-app-emails-and-messages": patch
---
Fixed badly aligned Toggles. Now icon and label are centered

View file

@ -0,0 +1,17 @@
---
"@saleor/react-hook-form-macaw": patch
"saleor-app-emails-and-messages": patch
"saleor-app-data-importer": patch
"saleor-app-products-feed": patch
"@saleor/apps-shared": patch
"saleor-app-invoices": patch
"saleor-app-klaviyo": patch
"saleor-app-cms-v2": patch
"saleor-app-search": patch
"@saleor/apps-ui": patch
"saleor-app-slack": patch
"saleor-app-taxes": patch
"saleor-app-crm": patch
---
Updated Macaw UI to pre-106

View file

@ -0,0 +1,5 @@
---
"@saleor/react-hook-form-macaw": patch
---
Updated Macaw UI bindings to reflect breaking changes in Select APIs

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "^4.29.19",

View file

@ -57,10 +57,12 @@ export const AddConnectionForm = (props: {
control={control}
name="channelSlug"
label="Channel"
options={channels?.map((c) => ({
options={
channels?.map((c) => ({
value: c.slug,
label: c.name,
}))}
})) ?? []
}
/>
<ArrowRightIcon />
<Select
@ -69,10 +71,12 @@ export const AddConnectionForm = (props: {
control={control}
name="providerId"
label="Provider"
options={providers?.map((p) => ({
options={
providers?.map((p) => ({
value: p.id,
label: p.configName,
}))}
})) ?? []
}
/>
</Box>
{errors.root?.serverError && (

View file

@ -15,7 +15,7 @@
"@mailchimp/mailchimp_marketing": "^3.0.80",
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "4.29.19",
"@trpc/client": "10.34.0",

View file

@ -1,6 +1,6 @@
import { Box, Button, Checkbox, Text } from "@saleor/macaw-ui/next";
import { trpcClient } from "../../../trpc/trpc-client";
import { ComponentProps, useEffect, useState } from "react";
import { ChangeEvent, ComponentProps, useEffect, useState } from "react";
import { Section } from "../../../ui/section/section";
import { useDashboardNotification } from "@saleor/apps-shared";
import { MailchimpListPicker } from "../../mailchimp-list-picker/mailchimp-list-picker";
@ -69,8 +69,8 @@ export const WebhookConfiguration = (props: ComponentProps<typeof Box>) => {
return null;
}
const handleCheckboxChange = (checked: boolean) => {
checked
const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
e.target.checked
? setLocalState({
selected: true,
listId: listsData[0].id,
@ -106,7 +106,7 @@ export const WebhookConfiguration = (props: ComponentProps<typeof Box>) => {
Each time customer is created, it will be added to selected audience list in Mailchimp
</Text>
<Box display="flex" gap={1.5} flexDirection="column">
<Checkbox onCheckedChange={handleCheckboxChange} checked={localState.selected}>
<Checkbox onChange={handleCheckboxChange} checked={localState.selected}>
<Text marginRight="auto">Enable customers sync</Text>
</Checkbox>
<Box display="flex" alignItems="center">

View file

@ -9,6 +9,7 @@ import {
IMailchimpConfigSettingsManagerV1,
MailchimpConfigType,
} from "../../modules/mailchimp/mailchimp-config-settings-manager";
import { NextApiRequest, NextApiResponse } from "next";
/**
* Mock settings manager. Consider mocking graphQL api instead
@ -48,7 +49,10 @@ describe("CUSTOMER_CREATED webhook", () => {
it("Call Mailchimp client to add customer with properly mapped data and tags", async () => {
const { req, res } = createMocks({});
await customerCreatedHandler(req, res, {
await customerCreatedHandler(
req as unknown as NextApiRequest,
res as unknown as NextApiResponse,
{
authData: mockAuthData,
payload: {
user: {
@ -66,7 +70,8 @@ describe("CUSTOMER_CREATED webhook", () => {
},
event: "CUSTOMER_CREATED",
baseUrl: "localhost:3000",
});
}
);
return expect(mailchimp_marketing.lists.addListMember).toHaveBeenCalledWith("saleor", {
email_address: "someuser@gmail.com",

View file

@ -17,7 +17,7 @@
"@material-ui/lab": "4.0.0-alpha.61",
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "^0.7.2",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@sentry/nextjs": "7.55.2",
"@urql/exchange-auth": "^2.1.4",
"@vitejs/plugin-react": "4.0.0",

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sendgrid/client": "^7.7.0",
"@sendgrid/mail": "^7.7.0",

View file

@ -13,7 +13,9 @@ export const BasicLayout = ({ children, breadcrumbs, isLoading = false }: BasicL
{breadcrumbs?.length && (
<Breadcrumbs>
{breadcrumbs.map((breadcrumb) => (
<Breadcrumbs.Item href={breadcrumb.href}>{breadcrumb.name}</Breadcrumbs.Item>
<Breadcrumbs.Item key={breadcrumb.name} href={breadcrumb.href}>
{breadcrumb.name}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
)}

View file

@ -84,12 +84,16 @@ export const UniversalChannelsSection = ({
onValueChange={onChange}
>
<Switch.Item id="1" value="restrict">
<Box display="flex" alignItems="center" gap={1}>
<TableEditIcon size="medium" />
<Text>Include</Text>
</Box>
</Switch.Item>
<Switch.Item id="2" value="exclude">
<Box display="flex" alignItems="center" gap={1}>
<ProductsIcons size="medium" />
<Text>Exclude</Text>
</Box>
</Switch.Item>
</Switch>
)}

View file

@ -15,7 +15,7 @@
"@hookform/resolvers": "^3.1.0",
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "4.29.19",
"@trpc/client": "10.34.0",

View file

@ -16,7 +16,7 @@
"@material-ui/lab": "4.0.0-alpha.61",
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@sentry/nextjs": "7.55.2",
"@urql/exchange-auth": "^2.1.4",
"clsx": "^1.2.1",

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "4.29.19",

View file

@ -16,7 +16,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "4.29.19",

View file

@ -17,7 +17,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "7.55.2",
"@urql/exchange-auth": "^2.1.4",

View file

@ -16,7 +16,7 @@
"@saleor/app-sdk": "0.41.1",
"@saleor/apps-shared": "workspace:*",
"@saleor/apps-ui": "workspace:*",
"@saleor/macaw-ui": "^0.8.0-pre.84",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@saleor/react-hook-form-macaw": "workspace:*",
"@sentry/nextjs": "7.55.2",
"@tanstack/react-query": "4.29.19",

View file

@ -80,7 +80,7 @@ const SelectTaxCode = ({ taxClassId }: { taxClassId: string }) => {
return (
<Select
value={value ?? ""}
value={value ?? null}
disabled={isLoading}
onChange={(value) => changeValue(String(value))}
options={[

View file

@ -1,9 +1,9 @@
import { Select } from "@saleor/macaw-ui/next";
import React from "react";
import { trpcClient } from "../../trpc/trpc-client";
import { Table } from "../../ui/table";
import { ChannelConfig } from "../channel-config";
import { useDashboardNotification } from "@saleor/apps-shared";
import { Select } from "../../ui/_select";
const SelectProvider = (channelConfig: ChannelConfig) => {
const {
@ -33,7 +33,7 @@ const SelectProvider = (channelConfig: ChannelConfig) => {
return (
<Select
value={value ?? ""}
value={value ?? null}
onChange={(value) => changeValue(String(value))}
options={[
{ value: "", label: "Not assigned" },

View file

@ -81,7 +81,7 @@ const SelectTaxCode = ({ taxClassId }: { taxClassId: string }) => {
return (
<Select
value={value ?? ""}
value={value ?? null}
disabled={isLoading}
onChange={(value) => changeValue(String(value))}
options={[

View file

@ -1,17 +1,24 @@
import { Select as _Select } from "@saleor/macaw-ui/next";
type SelectProps = React.ComponentProps<typeof _Select>;
type SelectProps = Omit<React.ComponentProps<typeof _Select>, "value" | "onChange"> & {
value: string | null;
onChange: (value: string) => void;
};
/**
* The macaw-ui Select doesn't truncate the label text, so we need to override it.
* @see: https://github.com/saleor/macaw-ui/issues/477
*
* TODO: Migrate to react-hook-form-macaw bindings package
*/
export const Select = (props: SelectProps) => {
export const Select = ({ value, ...props }: SelectProps) => {
return (
<_Select
{...props}
__whiteSpace={"preline"}
__overflow={"hidden"}
__textOverflow={"ellipsis"}
value={props.options.find((option) => option.value === value) ?? null}
onChange={(value) => props.onChange(value.value)}
/>
);
};

View file

@ -11,13 +11,14 @@ export default {
name: "@storybook/react-vite",
options: {},
},
staticDirs: [
{
from: "../public",
to: "/assets",
},
"./public",
],
// This causes a build error TODO:
// staticDirs: [
// {
// from: "../public",
// to: "/assets",
// },
// "./public",
// ],
features: {
storyStoreV7: true,
},

View file

@ -12,7 +12,7 @@
},
"devDependencies": {
"@babel/core": "^7.21.8",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@storybook/addon-actions": "^7.0.12",
"@storybook/addon-essentials": "^7.0.12",
"@storybook/addon-interactions": "^7.0.12",

View file

@ -68,3 +68,10 @@ export const WithHelpText: Story = {
helperText: "Helper text",
},
};
export const NoValue: Story = {
...ComboboxTemplate,
args: {
value: null,
},
};

View file

@ -1,9 +1,14 @@
import { Combobox as $Combobox, type ComboboxProps as $ComboboxProps } from "@saleor/macaw-ui/next";
import {
Combobox as $Combobox,
type ComboboxProps as $ComboboxProps,
Option,
} from "@saleor/macaw-ui/next";
import { Control, Controller, FieldPath, FieldValues } from "react-hook-form";
export type ComboboxProps<T extends FieldValues = FieldValues> = Omit<$ComboboxProps, "name"> & {
export type ComboboxProps<T extends FieldValues = FieldValues> = Omit<$ComboboxProps<T>, "name"> & {
name: FieldPath<T>;
control: Control<T>;
options: Option[];
};
export function Combobox<TFieldValues extends FieldValues = FieldValues>({
@ -18,19 +23,24 @@ export function Combobox<TFieldValues extends FieldValues = FieldValues>({
<Controller
name={name}
control={control}
render={({ field: { value, ...field }, fieldState: { error } }) => (
render={({ field: { value, onChange, ...field }, fieldState: { error } }) => {
return (
<$Combobox
{...rest}
{...field}
options={options}
value={value || ""}
onChange={(option) => {
onChange(option.value);
}}
value={options.find((o: Option) => o.value === value) || null}
name={name}
required={required}
type={type}
error={!!error}
helperText={rest.helperText}
/>
)}
);
}}
/>
);
}

View file

@ -1,15 +1,17 @@
import {
Multiselect as $Multiselect,
Option,
type MultiselectProps as $MultiselectProps,
} from "@saleor/macaw-ui/next";
import { Control, Controller, FieldPath, FieldValues } from "react-hook-form";
export type MultiselectProps<T extends FieldValues = FieldValues> = Omit<
$MultiselectProps,
$MultiselectProps<T>,
"name"
> & {
name: FieldPath<T>;
control: Control<T>;
options: Option[];
};
export function Multiselect<TFieldValues extends FieldValues = FieldValues>({
@ -24,12 +26,22 @@ export function Multiselect<TFieldValues extends FieldValues = FieldValues>({
<Controller
name={name}
control={control}
render={({ field: { value, ...field }, fieldState: { error } }) => (
render={({ field: { value, onChange, ...field }, fieldState: { error } }) => (
<$Multiselect
{...rest}
{...field}
options={options}
value={value || []}
value={
options.filter((o) => {
// TODO: Cant resolve array properly so casting needed
const v = (Array.isArray(value) ? value : [value]) as string[];
return v.includes(o.value);
}) || []
}
onChange={(values) => {
onChange(values.map((v) => v.value));
}}
name={name}
required={required}
type={type}

View file

@ -68,3 +68,10 @@ export const WithHelpText: Story = {
helperText: "Helper text",
},
};
export const NoValue: Story = {
...SelectTemplate,
args: {
value: null,
},
};

View file

@ -1,9 +1,16 @@
import { Select as $Select, type SelectProps as $SelectProps } from "@saleor/macaw-ui/next";
import { Select as $Select, type SelectProps as $SelectProps, Option } from "@saleor/macaw-ui/next";
import { Control, Controller, FieldPath, FieldValues } from "react-hook-form";
export type SelectProps<T extends FieldValues = FieldValues> = Omit<$SelectProps, "name"> & {
export type SelectProps<T extends FieldValues = FieldValues> = Omit<
$SelectProps<Option>,
"name"
> & {
name: FieldPath<T>;
control: Control<T>;
/**
* Re-declare because inner Macaw type pointed to *any*
*/
options: Option[];
};
export function Select<TFieldValues extends FieldValues = FieldValues>({
@ -18,12 +25,13 @@ export function Select<TFieldValues extends FieldValues = FieldValues>({
<Controller
name={name}
control={control}
render={({ field: { value, ...field }, fieldState: { error } }) => (
render={({ field: { value, onChange, ...field }, fieldState: { error } }) => (
<$Select
{...rest}
{...field}
options={options}
value={value || ""} // todo update macaw and fallback to null instead ""
value={options.find((o) => o.value === value) ?? null}
onChange={(value) => onChange(value.value)}
name={name}
required={required}
type={type}

View file

@ -18,7 +18,7 @@
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "4.0.0-alpha.61",
"@saleor/app-sdk": "0.41.1",
"@saleor/macaw-ui": "^0.7.2",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@types/react": "18.2.5",
"@types/react-dom": "18.2.5",
"@types/semver": "^7.5.0",

View file

@ -10,7 +10,7 @@
},
"devDependencies": {
"@saleor/app-sdk": "0.41.1",
"@saleor/macaw-ui": "0.8.0-pre.95",
"@saleor/macaw-ui": "0.8.0-pre.106",
"@types/react": "18.2.5",
"@types/react-dom": "18.2.5",
"eslint-config-saleor": "workspace:*",

File diff suppressed because it is too large Load diff