Update macaw to 0.3.0

babel.config.js

@@ -6,7 +6,12 @@ module.exports = api => {
   const ignore =
     isTest || isStorybook
       ? []
-      : ["**/*.test.ts", "**/*.test.tsx", "src/storybook"];
+      : [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "src/storybook",
+          "node_modules/core-js"
+        ];
 
   const presets = [
     [

package.json

@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.2.6",
+    "@saleor/macaw-ui": "^0.3.0-a.4",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "apollo": "^2.32.5",
@@ -106,6 +106,7 @@
     "@types/enzyme": "^3.10.8",
     "@types/fuzzaldrin": "^2.1.2",
     "@types/jest": "^24.0.24",
+    "@types/jscodeshift": "^0.11.3",
     "@types/lodash-es": "^4.17.3",
     "@types/node-fetch": "^2.5.7",
     "@types/pollyjs__adapter-node-http": "^2.0.1",
@@ -156,6 +157,7 @@
     "jest": "^24.8.0",
     "jest-file": "^1.0.0",
     "jest-localstorage-mock": "^2.4.3",
+    "jscodeshift": "^0.13.0",
     "lint-staged": "^10.5.1",
     "mock-apollo-client": "^0.4.0",
     "node-fetch": "^2.6.1",

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -1,12 +1,12 @@
-import { Button, Card, CardContent, Typography } from "@material-ui/core";
+import { Card, CardContent, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
 import ExternalLink from "@saleor/components/ExternalLink";
 import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import ReactMarkdown from "react-markdown";
@@ -51,9 +51,9 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
         }
       >
         <Button
+          component="a"
           href={data?.homepageUrl}
-          color="primary"
-          variant="contained"
+          variant="primary"
           data-tc="open-app"
           target="_blank"
         >
@@ -75,7 +75,6 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
               />
             </ExternalLink>
             <Button
-              color="primary"
               className={classes.headerLinkContainer}
               onClick={navigateToAppSettings}
             >
@@ -87,8 +86,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
               />
             </Button>
             <Button
-              variant="text"
-              color="primary"
+              variant="tertiary"
               className={classes.headerLinkContainer}
               disableFocusRipple
               onClick={data.isActive ? onAppDeactivateOpen : onAppActivateOpen}

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx

@@ -1,10 +1,10 @@
-import { Button, Typography } from "@material-ui/core";
+import { Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, Button } from "@saleor/macaw-ui";
 import { useTheme } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
@@ -69,26 +69,22 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
           </div>
         </div>
         <div className={classes.appSettingsHeader}>
-          <Button
-            onClick={navigateToDashboard}
-            variant="contained"
-            color="primary"
-          >
+          <Button onClick={navigateToDashboard} variant="primary">
             <FormattedMessage defaultMessage="Dashboard" description="button" />
           </Button>
           <Button
+            component="a"
             href={data?.homepageUrl}
-            variant="contained"
-            color="primary"
+            variant="primary"
             data-tc="open-app"
             target="_blank"
           >
             <FormattedMessage defaultMessage="My App" description="button" />
           </Button>
           <Button
+            component="a"
             href={data?.supportUrl}
-            variant="contained"
-            color="primary"
+            variant="primary"
             data-tc="open-support"
             target="_blank"
           >

src/apps/components/AppInstallErrorPage/AppInstallErrorPage.tsx

@@ -1,6 +1,7 @@
 import errorImg from "@assets/images/app-install-error.svg";
-import { Button, Grid, Typography } from "@material-ui/core";
+import { Grid, Typography } from "@material-ui/core";
 import Container from "@saleor/components/Container";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -34,12 +35,7 @@ export const AppInstallErrorPage: React.FC<AppInstallErrorPageProps> = ({
               description="content"
             />
           </Typography>
-          <Button
-            className={classes.button}
-            color="primary"
-            variant="contained"
-            onClick={onBack}
-          >
+          <Button className={classes.button} variant="primary" onClick={onBack}>
             <FormattedMessage
               defaultMessage="Back to homepage"
               description="button"

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -1,12 +1,13 @@
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import plusIcon from "@assets/images/plus-icon.svg";
-import { Button, Card, CardContent, Grid, Typography } from "@material-ui/core";
+import { Card, CardContent, Grid, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
 import Hr from "@saleor/components/Hr";
 import Skeleton from "@saleor/components/Skeleton";
 import { buttonMessages } from "@saleor/intl";
+import { Button } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -127,18 +128,14 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
       <CardSpacer />
       <Grid container justify="space-between">
         <Grid xs={6} item>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={navigateToAppsList}
-          >
-            <Typography color="primary">
+          <Button variant="secondary" onClick={navigateToAppsList}>
+            <Typography>
               <FormattedMessage {...buttonMessages.cancel} />
             </Typography>
           </Button>
         </Grid>
         <Grid xs={6} item className={classes.alignRight}>
-          <Button variant="contained" color="primary" onClick={onSubmit}>
+          <Button variant="primary" onClick={onSubmit}>
             <Typography className={classes.installText}>
               <FormattedMessage
                 defaultMessage="Install App"

src/apps/components/AppsInProgress/AppsInProgress.tsx

@@ -1,7 +1,5 @@
 import {
-  Button,
   CircularProgress as Progress,
-  IconButton,
   TableBody,
   TableCell,
   TableRow,
@@ -11,6 +9,7 @@ import {
 import DeleteIcon from "@material-ui/icons/Delete";
 import ErrorIcon from "@material-ui/icons/Error";
 import CardTitle from "@saleor/components/CardTitle";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import classNames from "classnames";
 import React from "react";
@@ -94,13 +93,14 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
                     <ErrorIcon />
                   </Tooltip>
                 </Typography>
-                <Button color="primary" onClick={() => onAppInstallRetry(id)}>
+                <Button onClick={() => onAppInstallRetry(id)}>
                   <FormattedMessage
                     defaultMessage="Retry"
                     description="retry installation"
                   />
                 </Button>
                 <IconButton
+                  variant="secondary"
                   color="primary"
                   onClick={stopPropagation(() => onRemove(id))}
                 >

src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx

@@ -1,14 +1,8 @@
-import {
-  Button,
-  Card,
-  CardContent,
-  IconButton,
-  Paper,
-  Typography
-} from "@material-ui/core";
+import { Card, CardContent, Paper, Typography } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 import Link from "@saleor/components/Link";
 import useClipboard from "@saleor/hooks/useClipboard";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -48,7 +42,7 @@ const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
             </Typography>
           </div>
           <div className={classes.closeContainer}>
-            <IconButton onClick={onTokenClose}>
+            <IconButton variant="secondary" onClick={onTokenClose}>
               <CloseIcon />
             </IconButton>
           </div>
@@ -58,11 +52,7 @@ const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
             <FormattedMessage defaultMessage="Generated Token" />
           </Typography>
           <Typography>{token}</Typography>
-          <Button
-            className={classes.copy}
-            color="primary"
-            onClick={() => copy(token)}
-          >
+          <Button className={classes.copy} onClick={() => copy(token)}>
             {copied ? (
               <FormattedMessage defaultMessage="Copied" description="button" />
             ) : (

src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@material-ui/core";
 import AccountPermissions from "@saleor/components/AccountPermissions";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -11,7 +10,7 @@ import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInf
 import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
+import { Backlink, Button } from "@saleor/macaw-ui";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAppErrorMessage from "@saleor/utils/errors/app";
@@ -103,8 +102,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
           </Backlink>
           <PageHeader title={app?.name}>
             <Button
-              variant="text"
-              color="primary"
+              variant="tertiary"
               className={classes.activateButton}
               disableFocusRipple
               onClick={data.isActive ? onAppDeactivateOpen : onAppActivateOpen}

src/apps/components/CustomAppTokens/CustomAppTokens.tsx

@@ -1,7 +1,5 @@
 import {
-  Button,
   Card,
-  IconButton,
   TableBody,
   TableCell,
   TableHead,
@@ -11,6 +9,7 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -39,7 +38,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
           description: "header"
         })}
         toolbar={
-          <Button color="primary" onClick={onCreate} data-test-id="createToken">
+          <Button onClick={onCreate} data-test-id="createToken">
             <FormattedMessage
               defaultMessage="Create Token"
               description="button"
@@ -80,6 +79,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
                 </TableCell>
                 <TableCell className={classes.colActions}>
                   <IconButton
+                    variant="secondary"
                     color="primary"
                     onClick={() => onDelete(token.id)}
                   >

src/apps/components/CustomApps/CustomApps.tsx

@@ -1,14 +1,13 @@
 import {
-  Button,
   CardHeader,
-  IconButton,
   TableBody,
   TableCell,
   TableRow,
   Typography
 } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import { commonMessages } from "@saleor/intl";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -43,7 +42,6 @@ const CustomApps: React.FC<CustomAppsProps> = ({
             action={
               !!navigateToCustomAppCreate && (
                 <Button
-                  color="primary"
                   onClick={navigateToCustomAppCreate}
                   data-test-id="createApp"
                 >
@@ -90,6 +88,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
                 </TableCell>
                 <TableCell className={classes.colAction}>
                   <IconButton
+                    variant="secondary"
                     color="primary"
                     onClick={stopPropagation(() => onRemove(app.node.id))}
                   >

src/apps/components/InstalledApps/InstalledApps.tsx

@@ -1,6 +1,4 @@
 import {
-  Button,
-  IconButton,
   TableBody,
   TableCell,
   TableFooter,
@@ -10,6 +8,7 @@ import {
 import DeleteIcon from "@material-ui/icons/Delete";
 import CardTitle from "@saleor/components/CardTitle";
 import TablePagination from "@saleor/components/TablePagination";
+import { Button, IconButton } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { ListProps } from "@saleor/types";
 import React from "react";
@@ -92,16 +91,14 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                     )}
                   </TableCell>
                   <TableCell className={classes.colAction}>
-                    <Button
-                      color="primary"
-                      onClick={stopPropagation(onRowClick(app.node.id))}
-                    >
+                    <Button onClick={stopPropagation(onRowClick(app.node.id))}>
                       <FormattedMessage
                         defaultMessage="About"
                         description="about app"
                       />
                     </Button>
                     <IconButton
+                      variant="secondary"
                       color="primary"
                       onClick={stopPropagation(() => onRemove(app.node.id))}
                     >

src/apps/components/Marketplace/Marketplace.tsx

@@ -1,5 +1,6 @@
-import { Button, Card, CardContent, Typography } from "@material-ui/core";
+import { Card, CardContent, Typography } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -31,7 +32,7 @@ const Marketplace: React.FC<MarketplaceProps> = ({ link }) => {
                   description="marketplace content"
                 />
               </Typography>
-              <Button color="primary" onClick={link}>
+              <Button onClick={link}>
                 <FormattedMessage
                   defaultMessage="Visit Marketplace"
                   description="marketplace button"