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
saleor · Jul 24, 2023 · aa6fec1 · aa6fec1
1 parent 2fab86b
commit aa6fec1
Show file tree

Hide file tree

Showing 33 changed files with 516 additions and 420 deletions.
diff --git a/.changeset/bright-ladybugs-guess.md b/.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
diff --git a/.changeset/lucky-islands-love.md b/.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
diff --git a/.changeset/stale-readers-smash.md b/.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
diff --git a/apps/cms-v2/package.json b/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",

diff --git a/apps/cms-v2/src/modules/channel-provider-connection/add-connection-form.tsx b/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) => ({
-            value: c.slug,
-            label: c.name,
-          }))}
+          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) => ({
-            value: p.id,
-            label: p.configName,
-          }))}
+          options={
+            providers?.map((p) => ({
+              value: p.id,
+              label: p.configName,
+            })) ?? []
+          }
         />
       </Box>
       {errors.root?.serverError && (

diff --git a/apps/crm/package.json b/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",

diff --git a/...crm/src/modules/mailchimp/config-sections/webhook-configuration/webhook-configuration.tsx b/...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) => {
-    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">

diff --git a/apps/crm/src/test/webhooks/customer-created-webhook.test.ts b/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, {
-      authData: mockAuthData,
-      payload: {
-        user: {
-          id: "user-id",
-          email: "someuser@gmail.com",
-          firstName: "John",
-          lastName: "Doe",
-          privateMetadata: [
-            {
-              key: "mailchimp_tags",
-              value: JSON.stringify(["tag1"]),
-            },
-          ],
+    await customerCreatedHandler(
+      req as unknown as NextApiRequest,
+      res as unknown as NextApiResponse,
+      {
+        authData: mockAuthData,
+        payload: {
+          user: {
+            id: "user-id",
+            email: "someuser@gmail.com",
+            firstName: "John",
+            lastName: "Doe",
+            privateMetadata: [
+              {
+                key: "mailchimp_tags",
+                value: JSON.stringify(["tag1"]),
+              },
+            ],
+          },
         },
-      },
-      event: "CUSTOMER_CREATED",
-      baseUrl: "localhost:3000",
-    });
+        event: "CUSTOMER_CREATED",
+        baseUrl: "localhost:3000",
+      }
+    );
 
     return expect(mailchimp_marketing.lists.addListMember).toHaveBeenCalledWith("saleor", {
       email_address: "someuser@gmail.com",

diff --git a/apps/data-importer/package.json b/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",

diff --git a/apps/emails-and-messages/package.json b/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",

diff --git a/apps/emails-and-messages/src/components/basic-layout.tsx b/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>
       )}

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

diff --git a/apps/invoices/package.json b/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",

diff --git a/apps/klaviyo/package.json b/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",

diff --git a/apps/products-feed/package.json b/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",

diff --git a/apps/search/package.json b/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",

diff --git a/apps/slack/package.json b/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",

diff --git a/apps/taxes/package.json b/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",

diff --git a/apps/taxes/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx b/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={[

diff --git a/apps/taxes/src/modules/channel-configuration/ui/channel-table.tsx b/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" },

diff --git a/apps/taxes/src/modules/taxjar/ui/taxjar-tax-code-matcher-table.tsx b/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={[

diff --git a/apps/taxes/src/modules/ui/_select.tsx b/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)}
     />
   );
 };
diff --git a/packages/react-hook-form-macaw/.storybook/main.ts b/packages/react-hook-form-macaw/.storybook/main.ts
@@ -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,
   },

diff --git a/packages/react-hook-form-macaw/package.json b/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",

diff --git a/packages/react-hook-form-macaw/public/.gitkeep b/packages/react-hook-form-macaw/public/.gitkeep
diff --git a/packages/react-hook-form-macaw/src/components/Combobox.stories.tsx b/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,
+  },
+};