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

.changeset/bright-ladybugs-guess.md

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

.changeset/lucky-islands-love.md

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

.changeset/stale-readers-smash.md

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

apps/cms-v2/package.json

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

apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx

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

apps/crm/package.json

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

apps/crm/src/modules/mailchimp/config-sections/webhook-configuration/webhook-configuration.tsx

@@ -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) => {
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
-    checked
+    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">

apps/crm/src/test/webhooks/customer-created-webhook.test.ts

@@ -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,25 +49,29 @@ 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(
-      authData: mockAuthData,
+      req as unknown as NextApiRequest,
-      payload: {
+      res as unknown as NextApiResponse,
-        user: {
+      {
-          id: "user-id",
+        authData: mockAuthData,
-          email: "someuser@gmail.com",
+        payload: {
-          firstName: "John",
+          user: {
-          lastName: "Doe",
+            id: "user-id",
-          privateMetadata: [
+            email: "someuser@gmail.com",
-            {
+            firstName: "John",
-              key: "mailchimp_tags",
+            lastName: "Doe",
-              value: JSON.stringify(["tag1"]),
+            privateMetadata: [
-            },
+              {
-          ],
+                key: "mailchimp_tags",
+                value: JSON.stringify(["tag1"]),
+              },
+            ],
+          },
         },
-      },
+        event: "CUSTOMER_CREATED",
-      event: "CUSTOMER_CREATED",
+        baseUrl: "localhost:3000",
-      baseUrl: "localhost:3000",
+      }
-    });
+    );
 
     return expect(mailchimp_marketing.lists.addListMember).toHaveBeenCalledWith("saleor", {
       email_address: "someuser@gmail.com",

apps/data-importer/package.json

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

apps/emails-and-messages/package.json

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

apps/emails-and-messages/src/components/basic-layout.tsx

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

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

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

apps/invoices/package.json

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

apps/klaviyo/package.json

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

apps/products-feed/package.json

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

apps/search/package.json

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

apps/slack/package.json

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

apps/taxes/package.json

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

apps/taxes/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx

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

apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx

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

apps/taxes/src/modules/taxjar/ui/taxjar-tax-code-matcher-table.tsx

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

apps/taxes/src/modules/ui/_select.tsx

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

packages/react-hook-form-macaw/.storybook/main.ts

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

packages/react-hook-form-macaw/package.json

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

packages/react-hook-form-macaw/src/components/Combobox.stories.tsx

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

packages/react-hook-form-macaw/src/components/Combobox.tsx

@@ -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 } }) => {
-        <$Combobox
+        return (
-          {...rest}
+          <$Combobox
-          {...field}
+            {...rest}
-          options={options}
+            {...field}
-          value={value || ""}
+            options={options}
-          name={name}
+            onChange={(option) => {
-          required={required}
+              onChange(option.value);
-          type={type}
+            }}
-          error={!!error}
+            value={options.find((o: Option) => o.value === value) || null}
-          helperText={rest.helperText}
+            name={name}
-        />
+            required={required}
-      )}
+            type={type}
+            error={!!error}
+            helperText={rest.helperText}
+          />
+        );
+      }}
     />
   );
 }

packages/react-hook-form-macaw/src/components/Multiselect.tsx

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

packages/react-hook-form-macaw/src/components/Select.stories.tsx

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

packages/react-hook-form-macaw/src/components/Select.tsx

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

packages/shared/package.json

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

packages/ui/package.json

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