Migrate to the newest MacawUI version (#1547)

saleor · Aug 30, 2024 · 6fed4b1 · 6fed4b1
1 parent 2bfc6d4
commit 6fed4b1
Show file tree

Hide file tree

Showing 81 changed files with 624 additions and 559 deletions.
diff --git a/.changeset/bright-apples-build.md b/.changeset/bright-apples-build.md
@@ -0,0 +1,14 @@
+---
+"@saleor/react-hook-form-macaw": patch
+"data-importer": patch
+"products-feed": patch
+"@saleor/apps-shared": patch
+"klaviyo": patch
+"app-avatax": patch
+"cms-v2": patch
+"search": patch
+"@saleor/apps-ui": patch
+"smtp": patch
+---
+
+Migrate to new newest MacawUI version. Functionally nothing has changed. UI may look a bit different but it will be on par with Dashboard UI.
diff --git a/apps/avatax/package.json b/apps/avatax/package.json
@@ -41,7 +41,7 @@
     "@saleor/apps-otel": "workspace:*",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
-    "@saleor/macaw-ui": "1.0.0-pre.7",
+    "@saleor/macaw-ui": "1.1.10",
     "@saleor/react-hook-form-macaw": "workspace:*",
     "@saleor/sentry-utils": "workspace:*",
     "@saleor/webhook-utils": "workspace:*",

diff --git a/apps/avatax/src/modules/avatax/ui/avatax-configuration-address-fragment.tsx b/apps/avatax/src/modules/avatax/ui/avatax-configuration-address-fragment.tsx
@@ -15,7 +15,7 @@ import { FormSection } from "./form-section";
 const FieldSuggestion = ({ suggestion }: { suggestion: string }) => {
   return (
     <Box alignItems={"center"} display={"flex"} justifyContent={"space-between"} marginTop={1}>
-      <Text paddingLeft={2} color="textNeutralSubdued" variant="caption">
+      <Text paddingLeft={2} color="default2" size={2}>
         {suggestion}
       </Text>
     </Box>

diff --git a/apps/avatax/src/modules/avatax/ui/avatax-instructions.tsx b/apps/avatax/src/modules/avatax/ui/avatax-instructions.tsx
@@ -27,7 +27,10 @@ export const AvataxInstructions = () => {
             </li>
           </Box>
           <Text as="p" marginBottom={8}>
-            You must verify the credentials by clicking the <Text variant="bodyStrong">Verify</Text>{" "}
+            You must verify the credentials by clicking the{" "}
+            <Text size={4} fontWeight="bold">
+              Verify
+            </Text>{" "}
             button.
           </Text>
           <Text as="p">
@@ -45,7 +48,10 @@ export const AvataxInstructions = () => {
             </li>
           </Box>
           <Text as="p" marginBottom={4}>
-            You must verify the address by clicking the <Text variant="bodyStrong">Verify</Text>{" "}
+            You must verify the address by clicking the{" "}
+            <Text size={4} fontWeight="bold">
+              Verify
+            </Text>{" "}
             button.
           </Text>
           <Text as="p" marginBottom={4}>

diff --git a/apps/avatax/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx b/apps/avatax/src/modules/avatax/ui/avatax-tax-code-matcher-table.tsx
@@ -12,7 +12,7 @@ export const AvataxTaxCodeMatcherTable = () => {
   if (isLoading) {
     return (
       <Box>
-        <Text color="textNeutralSubdued">Loading...</Text>
+        <Text color="default2">Loading...</Text>
       </Box>
     );
   }

diff --git a/apps/avatax/src/modules/avatax/ui/edit-avatax-configuration.tsx b/apps/avatax/src/modules/avatax/ui/edit-avatax-configuration.tsx
@@ -129,15 +129,15 @@ export const EditAvataxConfiguration = () => {
     // todo: replace with skeleton once its available in Macaw
     return (
       <Box>
-        <Text color="textNeutralSubdued">Loading...</Text>
+        <Text color="default2">Loading...</Text>
       </Box>
     );
   }
 
   if (isGetError) {
     return (
       <Box>
-        <Text color="textCriticalDefault">Error while fetching the provider data.</Text>
+        <Text color="critical1">Error while fetching the provider data.</Text>
       </Box>
     );
   }

diff --git a/apps/avatax/src/modules/avatax/ui/form-helper-text.tsx b/apps/avatax/src/modules/avatax/ui/form-helper-text.tsx
@@ -10,8 +10,8 @@ export const HelperText = ({
 }) => {
   return (
     <Text
-      color={disabled ? "textNeutralDisabled" : "textNeutralSubdued"}
-      fontWeight={"captionLarge"}
+      color={disabled ? "defaultDisabled" : "default2"}
+      fontWeight="regular"
       marginTop={2}
       as="p"
     >

diff --git a/apps/avatax/src/modules/avatax/ui/form-section.tsx b/apps/avatax/src/modules/avatax/ui/form-section.tsx
@@ -1,5 +1,5 @@
 import { Box, Text } from "@saleor/macaw-ui";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import styles from "./form-section.module.css";
 
@@ -21,13 +21,14 @@ export const FormSection = ({
       <Text
         marginBottom={4}
         as="h3"
-        variant="heading"
-        {...(disabled && { color: "textNeutralDisabled" })}
+        size={5}
+        fontWeight="bold"
+        {...(disabled && { color: "defaultDisabled" })}
       >
         {title}
       </Text>
       {subtitle && (
-        <Text as="p" marginBottom={4} {...(disabled && { color: "textNeutralDisabled" })}>
+        <Text as="p" marginBottom={4} {...(disabled && { color: "defaultDisabled" })}>
           {subtitle}
         </Text>
       )}

diff --git a/apps/avatax/src/modules/channel-configuration/ui/channel-list.tsx b/apps/avatax/src/modules/channel-configuration/ui/channel-list.tsx
@@ -21,7 +21,7 @@ const NoChannelConfigured = () => {
       height={"100%"}
       justifyContent={"center"}
     >
-      <Text variant="body">No channels configured yet</Text>
+      <Text>No channels configured yet</Text>
       <Button data-testid="configure-channel-button" onClick={redirectToTaxes}>
         Configure channels
       </Button>
@@ -33,7 +33,7 @@ const Skeleton = () => {
   // todo: replace with skeleton
   return (
     <Box height={"100%"} display={"flex"} alignItems={"center"} justifyContent={"center"}>
-      <Text color="textNeutralSubdued">Loading...</Text>
+      <Text color="default2">Loading...</Text>
     </Box>
   );
 };

diff --git a/apps/avatax/src/modules/channel-configuration/ui/channel-table.tsx b/apps/avatax/src/modules/channel-configuration/ui/channel-table.tsx
@@ -52,7 +52,7 @@ export const ChannelTable = () => {
 
   return (
     <Table.Container>
-      <Table.THead color={"textNeutralSubdued"}>
+      <Table.THead color={"default2"}>
         <Table.TR>
           <Table.TH>Channel slug</Table.TH>
           <Table.TH>Provider</Table.TH>

diff --git a/apps/avatax/src/modules/provider-connections/ui/providers-list.tsx b/apps/avatax/src/modules/provider-connections/ui/providers-list.tsx
@@ -17,7 +17,7 @@ const AddProvider = () => {
       height={"100%"}
       justifyContent={"center"}
     >
-      <Text variant="body">No providers configured yet</Text>
+      <Text>No providers configured yet</Text>
       <Button data-testid="no-providers-list-add-button" onClick={() => router.push("/providers")}>
         Add first provider
       </Button>
@@ -29,7 +29,7 @@ const Skeleton = () => {
   // todo: replace with skeleton
   return (
     <Box height={"100%"} display={"flex"} alignItems={"center"} justifyContent={"center"}>
-      <Text color="textNeutralSubdued">Loading...</Text>
+      <Text color="default2">Loading...</Text>
     </Box>
   );
 };

diff --git a/apps/avatax/src/modules/ui/app-card.tsx b/apps/avatax/src/modules/ui/app-card.tsx
@@ -5,7 +5,7 @@ export const AppCard = ({ children, ...p }: PropsWithBox<{}>) => {
     <Box
       borderRadius={4}
       borderWidth={1}
-      borderColor={"neutralPlain"}
+      borderColor={"default1"}
       borderStyle={"solid"}
       padding={8}
       {...p}

diff --git a/apps/avatax/src/modules/ui/app-dashboard-link.tsx b/apps/avatax/src/modules/ui/app-dashboard-link.tsx
@@ -20,12 +20,8 @@ export const AppDashboardLink = ({
   return (
     <Text
       transition={"ease"}
-      variant={"bodyStrong"}
       cursor={"pointer"}
-      color={{
-        default: "text3Decorative",
-        hover: "text1Decorative",
-      }}
+      color="info1"
       onClick={redirectToDashboardPath}
       {...rest}
     >

diff --git a/apps/avatax/src/modules/ui/app-section.tsx b/apps/avatax/src/modules/ui/app-section.tsx
@@ -6,9 +6,7 @@ const MAX_WIDTH = "480px";
 const Header = ({ children, ...props }: PropsWithBox<{ children: React.ReactNode }>) => {
   return (
     <Box __maxWidth={MAX_WIDTH} {...props}>
-      <Text as="p" variant="body">
-        {children}
-      </Text>
+      <Text as="p">{children}</Text>
     </Box>
   );
 };
@@ -24,12 +22,12 @@ const Description = ({
   return (
     <Box display="flex" flexDirection={"column"} gap={10} __maxWidth={MAX_WIDTH} {...props}>
       {title && (
-        <Text as="h3" variant="heading">
+        <Text as="h3" size={5} fontWeight="bold">
           {title}
         </Text>
       )}
       {description && (
-        <Box fontWeight={"bodyMedium"} fontSize={"bodyMedium"}>
+        <Box fontWeight="regular" fontSize={4}>
           {description}
         </Box>
       )}

diff --git a/apps/avatax/src/modules/ui/matcher-section.tsx b/apps/avatax/src/modules/ui/matcher-section.tsx
@@ -19,7 +19,7 @@ const MatcherTable = () => {
     <AppCard __minHeight={"320px"} height="100%" data-testid="matcher-table">
       {isLoading ? (
         <Box height="100%" display={"flex"} alignItems={"center"} justifyContent={"center"}>
-          <Text color="textNeutralSubdued">Loading...</Text>
+          <Text color="default2">Loading...</Text>
         </Box>
       ) : (
         <>
@@ -53,7 +53,7 @@ const MatcherTable = () => {
             </Table.Container>
           ) : (
             <Box height="100%" display={"flex"} alignItems={"center"} justifyContent={"center"}>
-              <Text color="textNeutralSubdued">You must configure a tax provider first</Text>
+              <Text color="default2">You must configure a tax provider first</Text>
             </Box>
           )}
         </>
@@ -71,7 +71,7 @@ const Intro = () => {
         <>
           Tax Code Matcher allows you to map Saleor tax classes to provider tax codes to extend
           products base tax rate.
-          <Text as="span" display="block" marginY={4}>
+          <Text as="span" display="block" marginY={4} size={4}>
             You need to have at least one provider configured to use this feature.
           </Text>
         </>

diff --git a/apps/avatax/src/modules/ui/provider-label.tsx b/apps/avatax/src/modules/ui/provider-label.tsx
@@ -25,7 +25,9 @@ export const ProviderLabel = ({ name }: { name: ProviderNameWithStripeTax }) =>
   return (
     <Box alignItems={"center"} display={"flex"} gap={3}>
       <Image src={icon} width={20} height={20} alt={`provider icon`} />
-      <Text variant="bodyStrong">{label}</Text>
+      <Text size={4} fontWeight="bold">
+        {label}
+      </Text>
     </Box>
   );
 };
diff --git a/apps/avatax/src/modules/ui/providers-table.tsx b/apps/avatax/src/modules/ui/providers-table.tsx
@@ -16,7 +16,7 @@ export const ProvidersTable = () => {
 
   return (
     <Table.Container>
-      <Table.THead color={"textNeutralSubdued"}>
+      <Table.THead color={"default2"}>
         <Table.TR>
           <Table.TH>Name</Table.TH>
           <Table.TH>Provider</Table.TH>

diff --git a/apps/avatax/src/modules/ui/table.tsx b/apps/avatax/src/modules/ui/table.tsx
@@ -29,10 +29,8 @@ export const Table = {
   ),
   THead: (props: BoxProps) => <Box {...props} as="thead" />,
   TR: (props: BoxProps) => <Box {...props} as="tr" />,
-  TH: (props: BoxProps) => (
-    <Box fontWeight={"captionSmall"} fontSize={"captionSmall"} {...props} as="th" />
-  ),
+  TH: (props: BoxProps) => <Box fontWeight="regular" fontSize={1} {...props} as="th" />,
   TBody: (props: BoxProps) => <Box {...props} as="tbody" />,
-  TD: (props: BoxProps) => <Box fontSize="bodyMedium" paddingTop={2} {...props} as="td" />,
+  TD: (props: BoxProps) => <Box fontSize={4} paddingTop={2} {...props} as="td" />,
   Skeleton: () => <TableSkeleton />,
 };
diff --git a/apps/avatax/src/pages/providers/avatax/index.tsx b/apps/avatax/src/pages/providers/avatax/index.tsx
@@ -8,9 +8,7 @@ import { AppPageLayout } from "../../../modules/ui/app-page-layout";
 const Header = () => {
   return (
     <Box>
-      <Text as="p" variant="body">
-        Create new AvaTax configuration
-      </Text>
+      <Text as="p">Create new AvaTax configuration</Text>
     </Box>
   );
 };

diff --git a/apps/avatax/src/pages/providers/index.tsx b/apps/avatax/src/pages/providers/index.tsx
@@ -48,19 +48,12 @@ const ProviderCard = ({
         <Box display={"flex"} justifyContent={"space-between"}>
           <ProviderLabel name={provider} />
           {isComingSoon && (
-            <Text
-              variant="body"
-              fontSize={"headingSmall"}
-              color={"textNeutralSubdued"}
-              textTransform={"uppercase"}
-            >
+            <Text size={9} color="default2" textTransform={"uppercase"}>
               Coming soon
             </Text>
           )}
         </Box>
-        <Text variant="body" __maxWidth={"480px"}>
-          {description}
-        </Text>
+        <Text __maxWidth={"480px"}>{description}</Text>
       </Box>
       <Box display={"flex"} justifyContent={"flex-end"} marginTop={12}>
         {!isComingSoon && (

diff --git a/apps/cms-v2/package.json b/apps/cms-v2/package.json
@@ -35,7 +35,7 @@
     "@saleor/apps-otel": "workspace:*",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
-    "@saleor/macaw-ui": "1.0.0-pre.7",
+    "@saleor/macaw-ui": "1.1.10",
     "@saleor/react-hook-form-macaw": "workspace:*",
     "@saleor/sentry-utils": "workspace:*",
     "@sentry/cli": "../../node_modules/@sentry/cli",

diff --git a/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx b/apps/cms-v2/src/modules/bulk-sync/bulk-sync-section.tsx
@@ -1,13 +1,13 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ButtonsBox, Layout, SkeletonLayout } from "@saleor/apps-ui";
 import { Box, Button, Text } from "@saleor/macaw-ui";
-import { trpcClient } from "../trpc/trpc-client";
-
-import { useForm } from "react-hook-form";
 import { Select } from "@saleor/react-hook-form-macaw";
 import { useRouter } from "next/router";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
+
 import { ProvidersResolver } from "../providers/providers-resolver";
-import { ButtonsBox, Layout, SkeletonLayout } from "@saleor/apps-ui";
+import { trpcClient } from "../trpc/trpc-client";
 
 const FormSchema = z.object({
   connectionId: z.string().min(7),
@@ -16,7 +16,9 @@ const FormSchema = z.object({
 const EmptyState = () => (
   <Layout.AppSectionCard>
     <Box display="flex" flexDirection={"column"} gap={4} justifyContent={"center"}>
-      <Text variant="heading">Bulk products synchronization</Text>
+      <Text size={5} fontWeight="bold">
+        Bulk products synchronization
+      </Text>
       <Text>Create a channel connection above to enable bulk synchronization.</Text>
     </Box>
   </Layout.AppSectionCard>
@@ -45,13 +47,13 @@ export const BulkSyncSection = () => {
 
   return (
     <Layout.AppSectionCard>
-      <Text as="h2" marginBottom={6} variant="heading">
+      <Text as="h2" marginBottom={6} size={5} fontWeight="bold">
         Bulk products synchronization
       </Text>
       <Text as="p">
         Choose a connection and start synchronization. Process is running in the browser.
       </Text>
-      <Text as="p" variant="bodyStrong">
+      <Text as="p" size={4} fontWeight="bold">
         Do not close the app until it is finished
       </Text>
       <Box