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:
parent
2fab86b465
commit
aa6fec183d
33 changed files with 524 additions and 428 deletions
5
.changeset/bright-ladybugs-guess.md
Normal file
5
.changeset/bright-ladybugs-guess.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"saleor-app-emails-and-messages": patch
|
||||
---
|
||||
|
||||
Fixed badly aligned Toggles. Now icon and label are centered
|
17
.changeset/lucky-islands-love.md
Normal file
17
.changeset/lucky-islands-love.md
Normal 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
|
5
.changeset/stale-readers-smash.md
Normal file
5
.changeset/stale-readers-smash.md
Normal file
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"@saleor/react-hook-form-macaw": patch
|
||||
---
|
||||
|
||||
Updated Macaw UI bindings to reflect breaking changes in Select APIs
|
|
@ -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",
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -80,7 +80,7 @@ const SelectTaxCode = ({ taxClassId }: { taxClassId: string }) => {
|
|||
|
||||
return (
|
||||
<Select
|
||||
value={value ?? ""}
|
||||
value={value ?? null}
|
||||
disabled={isLoading}
|
||||
onChange={(value) => changeValue(String(value))}
|
||||
options={[
|
||||
|
|
|
@ -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" },
|
||||
|
|
|
@ -81,7 +81,7 @@ const SelectTaxCode = ({ taxClassId }: { taxClassId: string }) => {
|
|||
|
||||
return (
|
||||
<Select
|
||||
value={value ?? ""}
|
||||
value={value ?? null}
|
||||
disabled={isLoading}
|
||||
onChange={(value) => changeValue(String(value))}
|
||||
options={[
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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",
|
||||
|
|
0
packages/react-hook-form-macaw/public/.gitkeep
Normal file
0
packages/react-hook-form-macaw/public/.gitkeep
Normal file
|
@ -68,3 +68,10 @@ export const WithHelpText: Story = {
|
|||
helperText: "Helper text",
|
||||
},
|
||||
};
|
||||
|
||||
export const NoValue: Story = {
|
||||
...ComboboxTemplate,
|
||||
args: {
|
||||
value: null,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -68,3 +68,10 @@ export const WithHelpText: Story = {
|
|||
helperText: "Helper text",
|
||||
},
|
||||
};
|
||||
|
||||
export const NoValue: Story = {
|
||||
...SelectTemplate,
|
||||
args: {
|
||||
value: null,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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:*",
|
||||
|
|
692
pnpm-lock.yaml
692
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue