Update UI to match new dashboard style (#138)

* Extract macaw theme palette to shared package

* Use MacawThemeProvider from shared package

* Fix maca theme provider props

* Update invoices app ui

* Add noSSRwrapper to packages shared

* Use external theme provider in data importer

* Use external theme provider in slack

* Improve margin in TitleBar

* Update colors in Klaviyo

* revert search to use local theme provider

* revert slack to use local theme provider

* Rewrite TitleBar to css modules

* Add unique jss classes prefix for Klaviyo

* Update apps/search/src/pages/_app.tsx

Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>

* Update shy-gorillas-shop.md

---------

Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>

.changeset/shy-gorillas-shop.md

@@ -0,0 +1,9 @@
+---
+"@saleor/apps-shared": minor
+"@saleor/saleor-app-invoices": minor
+"@saleor/saleor-app-search": minor
+"@saleor/saleor-app-slack": minor
+"@saleor/saleor-app-klaviyo": minor
+---
+
+Add shared theme provider with color overrides and globals

.eslintignore

@@ -1,3 +1,3 @@
 node_modules
 **/generated
-pnpm-lock.yaml
+pnpm-lock.yaml

.gitignore

@@ -39,5 +39,4 @@ yarn-error.log*
 test-invoice.pdf
 coverage/
 apps/**/generated
-
 .eslintcache

README.md

@@ -49,16 +49,19 @@ In the `apps` folder, you will find the following applications:
 ### Setup
 
 Make sure you have installed `pnpm`:
+
 ```bash
 npm install -g pnpm
 ```
 
 Install all dependencies:
+
 ```bash
 pnpm install
 ```
 
 Start the apps` dev servers:
+
 ```bash
 pnpm dev
 ```
@@ -68,6 +71,7 @@ pnpm dev
 > You can find the required env vars for each app in `apps/NAME/.env.example` file.
 
 To start an individual app, run:
+
 ```bash
 pnpm dev --filter=saleor-app-X
 ```
@@ -75,10 +79,13 @@ pnpm dev --filter=saleor-app-X
 where X is the app's name (matching saleor/X).
 
 ### Build
+
 To build all apps, run:
+
 ```bash
 pnpm build
 ```
 
 ### Documentation
+
 - [Forking](/docs/forking.md)

apps/data-importer/src/pages/_app.tsx

@@ -1,21 +1,12 @@
-import "../styles/globals.css";
-
-import { Theme } from "@material-ui/core/styles";
+import "@saleor/apps-shared/src/globals.css";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
 import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
-import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
-import React, { PropsWithChildren, useEffect } from "react";
+import React, { useEffect } from "react";
 import { AppProps } from "next/app";
 
-import GraphQLProvider from "../providers/GraphQLProvider";
 import { ThemeSynchronizer } from "../lib/theme-synchronizer";
 import { NoSSRWrapper } from "../no-ssr-wrapper";
-
-const themeOverrides: Partial<Theme> = {
-  /**
-   * You can override MacawUI theme here
-   */
-};
+import { MacawThemeProvider } from "@saleor/apps-shared";
 
 /**
  * Ensure instance is a singleton.
@@ -23,13 +14,6 @@ const themeOverrides: Partial<Theme> = {
  */
 const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
 
-/**
- * That's a hack required by Macaw-UI incompatibility with React@18
- */
-const ThemeProvider = MacawUIThemeProvider as React.FC<
-  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean }>
->;
-
 function NextApp({ Component, pageProps }: AppProps) {
   /**
    * Configure JSS (used by MacawUI) for SSR. If Macaw is not used, can be removed.
@@ -44,11 +28,11 @@ function NextApp({ Component, pageProps }: AppProps) {
   return (
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
-        <ThemeProvider overrides={themeOverrides} ssr>
+        <MacawThemeProvider>
           <ThemeSynchronizer />
           <RoutePropagator />
           <Component {...pageProps} />
-        </ThemeProvider>
+        </MacawThemeProvider>
       </AppBridgeProvider>
     </NoSSRWrapper>
   );

apps/data-importer/src/pages/importer.tsx

@@ -11,8 +11,7 @@ type Tab = "customers";
 
 const useStyles = makeStyles((theme: SaleorTheme) => ({
   wrapper: {
-    border: `1px solid ${theme.palette.divider}`,
-    minHeight: `calc(100vh - 100px)`,
+    minHeight: '100vh',
   },
 }));
 

apps/invoices/src/modules/app-configuration/ui/channels-list.tsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => {
       height: "auto !important",
     },
     listItemActive: {
-      border: `2px solid ${theme.palette.primary.main}`,
+      border: `1px solid ${theme.palette.grey.A100}`,
     },
     cellSlug: {
       fontFamily: "monospace",

apps/invoices/src/pages/_app.tsx

@@ -1,22 +1,14 @@
-import "../styles/globals.css";
-
-import { Theme } from "@material-ui/core/styles";
+import "@saleor/apps-shared/src/globals.css";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
 import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
-import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
-import React, { PropsWithChildren, useEffect } from "react";
+import React, { useEffect } from "react";
 import { AppProps } from "next/app";
 
 import GraphQLProvider from "../providers/GraphQLProvider";
 import { ThemeSynchronizer } from "../lib/theme-synchronizer";
 import { NoSSRWrapper } from "../lib/no-ssr-wrapper";
 import { trpcClient } from "../modules/trpc/trpc-client";
-
-const themeOverrides: Partial<Theme> = {
-  /**
-   * You can override MacawUI theme here
-   */
-};
+import { MacawThemeProvider } from "@saleor/apps-shared";
 
 /**
  * Ensure instance is a singleton.
@@ -24,13 +16,6 @@ const themeOverrides: Partial<Theme> = {
  */
 export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
 
-/**
- * That's a hack required by Macaw-UI incompatibility with React@18
- */
-const ThemeProvider = MacawUIThemeProvider as React.FC<
-  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean }>
->;
-
 function NextApp({ Component, pageProps }: AppProps) {
   /**
    * Configure JSS (used by MacawUI) for SSR. If Macaw is not used, can be removed.
@@ -46,11 +31,11 @@ function NextApp({ Component, pageProps }: AppProps) {
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <GraphQLProvider>
-          <ThemeProvider overrides={themeOverrides} ssr={false}>
+          <MacawThemeProvider>
             <ThemeSynchronizer />
             <RoutePropagator />
             <Component {...pageProps} />
-          </ThemeProvider>
+          </MacawThemeProvider>
         </GraphQLProvider>
       </AppBridgeProvider>
     </NoSSRWrapper>

apps/klaviyo/pages/_app.tsx

@@ -1,12 +1,41 @@
-import "../styles/globals.css";
+import "@saleor/apps-shared/src/globals.css";
 
-import { Theme } from "@material-ui/core/styles";
+import { StylesProvider, Theme } from "@material-ui/core/styles";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
-import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
+import {
+  dark,
+  light,
+  SaleorThemeColors,
+  ThemeProvider as MacawUIThemeProvider,
+} from "@saleor/macaw-ui";
 import React, { PropsWithChildren, useEffect } from "react";
 
 import { ThemeSynchronizer } from "../hooks/theme-synchronizer";
 import { AppLayoutProps } from "../types";
+import { createGenerateClassName } from "@material-ui/core";
+
+type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>;
+
+/**
+ * Temporary override of colors, to match new dashboard palette.
+ * Long term this will be replaced with Macaw UI 2.x with up to date design tokens
+ */
+const palettes: PalettesOverride = {
+  light: {
+    ...light,
+    background: {
+      default: "#fff",
+      paper: "#fff",
+    },
+  },
+  dark: {
+    ...dark,
+    background: {
+      default: "hsla(211, 42%, 14%, 1)",
+      paper: "hsla(211, 42%, 14%, 1)",
+    },
+  },
+};
 
 const themeOverrides: Partial<Theme> = {
   overrides: {
@@ -24,6 +53,11 @@ const themeOverrides: Partial<Theme> = {
   },
 };
 
+const generateClassName = createGenerateClassName({
+  productionPrefix: "c",
+  disableGlobal: true,
+});
+
 /**
  * Ensure instance is a singleton, so React 18 dev mode doesn't render it twice
  */
@@ -31,7 +65,7 @@ const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : unde
 
 // That's a hack required by Macaw-UI incompatibility with React@18
 const ThemeProvider = MacawUIThemeProvider as React.FC<
-  PropsWithChildren<{ overrides: Partial<Theme>; ssr: boolean }>
+  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
 >;
 
 function SaleorApp({ Component, pageProps }: AppLayoutProps) {
@@ -46,10 +80,12 @@ function SaleorApp({ Component, pageProps }: AppLayoutProps) {
 
   return (
     <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
-      <ThemeProvider overrides={themeOverrides} ssr>
-        <ThemeSynchronizer />
-        {getLayout(<Component {...pageProps} />)}
-      </ThemeProvider>
+      <StylesProvider generateClassName={generateClassName}>
+        <ThemeProvider palettes={palettes} overrides={themeOverrides} ssr>
+          <ThemeSynchronizer />
+          {getLayout(<Component {...pageProps} />)}
+        </ThemeProvider>
+      </StylesProvider>
     </AppBridgeProvider>
   );
 }

apps/search/package.json

@@ -28,7 +28,7 @@
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "instantsearch.css": "^7.4.5",
-    "next": "13.1.2",
+    "next": "13.1.6",
     "next-urql": "4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/search/src/pages/_app.tsx

@@ -2,7 +2,12 @@ import "../styles/globals.css";
 
 import { Theme } from "@material-ui/core/styles";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
-import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
+import {
+  dark,
+  light,
+  SaleorThemeColors,
+  ThemeProvider as MacawUIThemeProvider,
+} from "@saleor/macaw-ui";
 import React, { PropsWithChildren, useEffect } from "react";
 import { AppProps } from "next/app";
 import GraphQLProvider from "../providers/GraphQLProvider";
@@ -30,12 +35,36 @@ const queryClient = new QueryClient({
     },
   },
 });
+type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>;
+
+/**
+ * Temporary override of colors, to match new dashboard palette.
+ * Long term this will be replaced with Macaw UI 2.x with up to date design tokens
+ */
+const palettes: PalettesOverride = {
+  light: {
+    ...light,
+    background: {
+      default: "#fff",
+      paper: "#fff",
+    },
+  },
+  dark: {
+    ...dark,
+    background: {
+      default: "hsla(211, 42%, 14%, 1)",
+      paper: "hsla(211, 42%, 14%, 1)",
+    },
+  },
+};
 
 /**
  * That's a hack required by Macaw-UI incompatibility with React@18
+ *
+ * TODO: use from packages/shared
  */
 const ThemeProvider = MacawUIThemeProvider as React.FC<
-  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean }>
+  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
 >;
 
 function NextApp({ Component, pageProps }: AppProps) {
@@ -53,7 +82,7 @@ function NextApp({ Component, pageProps }: AppProps) {
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <GraphQLProvider>
-          <ThemeProvider overrides={themeOverrides} ssr>
+          <ThemeProvider palettes={palettes} overrides={themeOverrides} ssr>
             <ThemeSynchronizer />
             <RoutePropagator />
             <QueryClientProvider client={queryClient}>

apps/slack/src/pages/_app.tsx

@@ -3,7 +3,7 @@ import "../styles/globals.css";
 import { Theme } from "@material-ui/core/styles";
 import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
 import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
-import { ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
+import { dark, light, SaleorThemeColors, ThemeProvider as MacawUIThemeProvider } from "@saleor/macaw-ui";
 import React, { PropsWithChildren, useEffect } from "react";
 
 import { AppLayoutProps } from "../../types";
@@ -33,11 +33,37 @@ const themeOverrides: Partial<Theme> = {
 const appBridgeInstance =
   typeof window !== "undefined" ? new AppBridge({ autoNotifyReady: false }) : undefined;
 
-// That's a hack required by Macaw-UI incompatibility with React@18
+type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>;
+
+/**
+ * Temporary override of colors, to match new dashboard palette.
+ * Long term this will be replaced with Macaw UI 2.x with up to date design tokens
+ */
+const palettes: PalettesOverride = {
+  light: {
+    ...light,
+    background: {
+      default: "#fff",
+      paper: "#fff",
+    },
+  },
+  dark: {
+    ...dark,
+    background: {
+      default: "hsla(211, 42%, 14%, 1)",
+      paper: "hsla(211, 42%, 14%, 1)",
+    },
+  },
+};
+
+/**
+ * That's a hack required by Macaw-UI incompatibility with React@18
+ */
 const ThemeProvider = MacawUIThemeProvider as React.FC<
-  PropsWithChildren<{ overrides: Partial<Theme>; ssr: boolean; defaultTheme?: "light" | "dark" }>
+  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
 >;
 
+
 function SaleorApp({ Component, pageProps }: AppLayoutProps) {
   const getLayout = Component.getLayout ?? ((page) => page);
 
@@ -51,7 +77,7 @@ function SaleorApp({ Component, pageProps }: AppLayoutProps) {
   return (
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
-        <ThemeProvider overrides={themeOverrides} ssr>
+        <ThemeProvider palettes={palettes} overrides={themeOverrides} ssr>
           <ThemeSynchronizer />
           <RoutePropagator />
           {getLayout(<Component {...pageProps} />)}

docs/forking.md

@@ -18,13 +18,13 @@ Additionally, you can run scripts per individual apps with `turbo run SCRIPT --f
 
 We recommend not removing anything else to avoid unnecessary conflicts.
 
-If you want to update the repository, you can still merge or rebase it with the original source code. 
+If you want to update the repository, you can still merge or rebase it with the original source code.
 You may face conflicts for apps you don't have anymore, but you can safely delete them again during conflict resolution.
 
 ## 2. Keep everything
 
 To avoid conflicts to a minimum, you can leave other apps and just ignore them. These tips can help you with a single app experience:
+
 - Mark other app folders as "excluded" in your IDE to avoid indexing these files.
 - Run your scripts with Turborepo filters, e.g. `turbo run SCRIPT --filter=saleor-app-NAME`.
 - Use `pnpm` to avoid duplicated packages. `pnpm` installs packages once and links them, which causes minimal performance overhead of node_modules.
-

packages/shared/index.ts

@@ -1,3 +1,5 @@
 export * from "./src/is-in-iframe";
 export * from "./src/title-bar/title-bar";
 export * from "./src/app-icon/app-icon";
+export * from "./src/macaw-theme-provider/macaw-theme-provider";
+export * from "./src/no-ssr-wrapper";

packages/shared/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/shared/package.json

@@ -13,7 +13,8 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@saleor/app-sdk": "0.26.1",
     "@saleor/macaw-ui": "^0.7.2",
-    "clsx": "^1.2.1"
+    "clsx": "^1.2.1",
+    "next": "^13.1.6"
   },
   "main": "index.ts"
 }

packages/shared/src/globals.css

@@ -0,0 +1,15 @@
+body {
+  font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #111;
+}
+
+code {
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+  display: inline-block;
+  margin-top: 10px;
+  padding: 0.75rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}

packages/shared/src/macaw-theme-provider/macaw-theme-provider.tsx

@@ -0,0 +1,47 @@
+import {
+  dark,
+  light,
+  SaleorThemeColors,
+  ThemeProvider as MacawUIThemeProvider,
+} from "@saleor/macaw-ui";
+import { PropsWithChildren } from "react";
+import { Theme } from "@material-ui/core/styles";
+
+type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>;
+
+/**
+ * Temporary override of colors, to match new dashboard palette.
+ * Long term this will be replaced with Macaw UI 2.x with up to date design tokens
+ */
+const palettes: PalettesOverride = {
+  light: {
+    ...light,
+    background: {
+      default: "#fff",
+      paper: "#fff",
+    },
+  },
+  dark: {
+    ...dark,
+    background: {
+      default: "hsla(211, 42%, 14%, 1)",
+      paper: "hsla(211, 42%, 14%, 1)",
+    },
+  },
+};
+
+/**
+ * That's a hack required by Macaw-UI incompatibility with React@18
+ */
+const ThemeProvider = MacawUIThemeProvider as React.FC<
+  PropsWithChildren<{ overrides?: Partial<Theme>; ssr: boolean; palettes: PalettesOverride }>
+>;
+
+type OuterProps = PropsWithChildren<{ themeOverrides?: Partial<Theme> }>;
+
+/**
+ * This is theme provider for old Macaw. Will be removed with Macaw/next
+ */
+export const MacawThemeProvider = (props: OuterProps) => {
+  return <ThemeProvider {...props} ssr palettes={palettes} />;
+};

packages/shared/src/no-ssr-wrapper.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren, Fragment } from "react";
+import dynamic from "next/dynamic";
+
+const Wrapper = (props: PropsWithChildren<{}>) => <Fragment>{props.children}</Fragment>;
+
+export const NoSSRWrapper = dynamic(() => Promise.resolve(Wrapper), {
+  ssr: false,
+});

packages/shared/src/title-bar/title-bar.module.css

@@ -0,0 +1,52 @@
+.container {
+  --title-bar-height: 96px; /* TODO use design token */
+
+  position: relative;
+  height: var(--title-bar-height);
+}
+
+.root {
+  z-index: 300;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--title-bar-height);
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* Override MUI. Remove with the new Macaw */
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-radius: 0;
+}
+
+.leftColumn {
+  margin-right: auto;
+}
+
+.rightColumn {
+}
+
+.iconColumn {
+  margin-right: 24px;
+}
+
+.appName {
+  font-size: 24px;
+  margin: 0;
+}
+
+.appAuthor {
+  font-size: 12px;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.4); /* TODO use design token */
+  font-weight: 500;
+  margin: 0;
+}
+
+.bottomMargin {
+  margin-bottom: 32px;
+}

packages/shared/src/title-bar/title-bar.tsx

@@ -1,48 +1,10 @@
 import { Paper, PaperProps } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import styles from "./title-bar.module.css";
 import clsx from "clsx";
 import { ReactNode } from "react";
 
 const height = 96;
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    position: "relative",
-    height: height,
-  },
-  root: {
-    zIndex: 300,
-    position: "fixed",
-    left: 0,
-    right: 0,
-    top: 0,
-    height: height,
-    padding: "0 32px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderBottom: `1px solid ${theme.palette.grey.A100} `,
-  },
-  leftColumn: {
-    marginRight: "auto",
-  },
-  rightColumn: {},
-  iconColumn: {
-    marginRight: 24,
-  },
-  appName: { fontSize: 24, margin: 0 },
-  appAuthor: {
-    fontSize: 12,
-    textTransform: "uppercase",
-    color: theme.palette.text.secondary,
-    fontWeight: 500,
-    margin: 0,
-  },
-  bottomMargin: {
-    marginBottom: 32,
-  },
-}));
-
 type Props = {
   name: string;
   author: string;
@@ -59,16 +21,13 @@ export function TitleBar({
   icon,
   bottomMargin,
 }: Props) {
-  const styles = useStyles();
-
   return (
-    <div className={styles.container}>
-      <Paper
-        elevation={0}
-        className={clsx(styles.root, className, {
-          [styles.bottomMargin]: bottomMargin,
-        })}
-      >
+    <div
+      className={clsx(styles.container, className, {
+        [styles.bottomMargin]: bottomMargin,
+      })}
+    >
+      <Paper variant="outlined" square elevation={0} className={styles.root}>
         {icon && <div className={styles.iconColumn}>{icon}</div>}
         <div className={styles.leftColumn}>
           <h1 className={styles.appName}>{name}</h1>

packages/shared/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

pnpm-lock.yaml

@@ -424,7 +424,7 @@ importers:
       graphql: ^16.6.0
       graphql-tag: ^2.12.6
       instantsearch.css: ^7.4.5
-      next: 13.1.2
+      next: 13.1.6
       next-urql: 4.0.0
       prettier: ^2.7.1
       react: 18.2.0
@@ -439,10 +439,10 @@ importers:
       '@material-ui/core': 4.12.4_5ndqzdd6t4rivxsukjv3i3ak2q
       '@material-ui/icons': 4.11.3_x54wk6dsnsxe7g7vvfmytp77te
       '@material-ui/lab': 4.0.0-alpha.61_x54wk6dsnsxe7g7vvfmytp77te
-      '@saleor/app-sdk': 0.29.0_7jnwqgtpcnwg4nzft4b6xlzlfi
+      '@saleor/app-sdk': 0.29.0_3vryta7zmbcsw4rrqf4axjqggm
       '@saleor/apps-shared': link:../../packages/shared
       '@saleor/macaw-ui': 0.7.2_2dwar4pp5qoelfawvjffoi6dne
-      '@sentry/nextjs': 7.36.0_next@13.1.2+react@18.2.0
+      '@sentry/nextjs': 7.36.0_next@13.1.6+react@18.2.0
       '@types/debug': 4.1.7
       '@urql/exchange-auth': 1.0.0_graphql@16.6.0
       algoliasearch: 4.14.2
@@ -451,7 +451,7 @@ importers:
       graphql: 16.6.0
       graphql-tag: 2.12.6_graphql@16.6.0
       instantsearch.css: 7.4.5
-      next: 13.1.2_biqbaboplfbrettd7655fr4n2y
+      next: 13.1.6_biqbaboplfbrettd7655fr4n2y
       next-urql: 4.0.0_react@18.2.0+urql@3.0.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -585,18 +585,20 @@ importers:
       '@types/react-dom': ^18.0.10
       clsx: ^1.2.1
       eslint-config-saleor: workspace:*
+      next: ^13.1.6
       react: ^18.2.0
       react-dom: ^18.2.0
     devDependencies:
       '@material-ui/core': 4.12.4_5ndqzdd6t4rivxsukjv3i3ak2q
       '@material-ui/icons': 4.11.3_x54wk6dsnsxe7g7vvfmytp77te
       '@material-ui/lab': 4.0.0-alpha.61_x54wk6dsnsxe7g7vvfmytp77te
-      '@saleor/app-sdk': 0.26.1_biqbaboplfbrettd7655fr4n2y
+      '@saleor/app-sdk': 0.26.1_3vryta7zmbcsw4rrqf4axjqggm
       '@saleor/macaw-ui': 0.7.2_pmlnlm755hlzzzocw2qhf3a34e
       '@types/react': 18.0.27
       '@types/react-dom': 18.0.10
       clsx: 1.2.1
       eslint-config-saleor: link:../eslint-config-saleor
+      next: 13.1.6_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
 
@@ -3400,7 +3402,6 @@ packages:
 
   /@next/env/13.1.6:
     resolution: {integrity: sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg==}
-    dev: false
 
   /@next/eslint-plugin-next/13.0.2:
     resolution: {integrity: sha512-W+fIIIaFU7Kct7Okx91C7XDRGolv/w2RUenX2yZFeeNVcuVzDIKUcNmckrYbYcwrNQUSXmtwrs3g8xwast0YtA==}
@@ -3444,7 +3445,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-android-arm64/13.1.0:
@@ -3471,7 +3471,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-arm64/13.1.0:
@@ -3498,7 +3497,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-darwin-x64/13.1.0:
@@ -3525,7 +3523,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-freebsd-x64/13.1.0:
@@ -3552,7 +3549,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm-gnueabihf/13.1.0:
@@ -3579,7 +3575,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-gnu/13.1.0:
@@ -3606,7 +3601,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-arm64-musl/13.1.0:
@@ -3633,7 +3627,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-gnu/13.1.0:
@@ -3660,7 +3653,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-linux-x64-musl/13.1.0:
@@ -3687,7 +3679,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-arm64-msvc/13.1.0:
@@ -3714,7 +3705,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-ia32-msvc/13.1.0:
@@ -3741,7 +3731,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@next/swc-win32-x64-msvc/13.1.0:
@@ -3768,7 +3757,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@nodelib/fs.scandir/2.1.5:
@@ -3875,7 +3863,7 @@ packages:
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
 
-  /@saleor/app-sdk/0.26.1_biqbaboplfbrettd7655fr4n2y:
+  /@saleor/app-sdk/0.26.1_3vryta7zmbcsw4rrqf4axjqggm:
     resolution: {integrity: sha512-gkNQusr8XrfLR7EcB5OKt2MV7og7g1TmdeGBTsdJwkRK18lhYz4fpTGqzoQ+3UrNq98TNuoM3dznr7oPi1QFUA==}
     peerDependencies:
       next: '>=12'
@@ -3886,6 +3874,7 @@ packages:
       fast-glob: 3.2.12
       graphql: 16.6.0
       jose: 4.11.4
+      next: 13.1.6_biqbaboplfbrettd7655fr4n2y
       raw-body: 2.5.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -4136,36 +4125,6 @@ packages:
       - supports-color
     dev: false
 
-  /@sentry/nextjs/7.36.0_next@13.1.2+react@18.2.0:
-    resolution: {integrity: sha512-7IUwBjCjo3rWuvEG16D1wKb0D+aMyCU920VGCAQVZaqTZAgrgAKfpTa1Sk0fmDxYglW1EBI9QM+WEnOa9RleLw==}
-    engines: {node: '>=8'}
-    peerDependencies:
-      next: ^10.0.8 || ^11.0 || ^12.0 || ^13.0
-      react: 16.x || 17.x || 18.x
-      webpack: '>= 4.0.0'
-    peerDependenciesMeta:
-      webpack:
-        optional: true
-    dependencies:
-      '@rollup/plugin-commonjs': 24.0.0_rollup@2.78.0
-      '@sentry/core': 7.36.0
-      '@sentry/integrations': 7.36.0
-      '@sentry/node': 7.36.0
-      '@sentry/react': 7.36.0_react@18.2.0
-      '@sentry/tracing': 7.36.0
-      '@sentry/types': 7.36.0
-      '@sentry/utils': 7.36.0
-      '@sentry/webpack-plugin': 1.20.0
-      chalk: 3.0.0
-      next: 13.1.2_biqbaboplfbrettd7655fr4n2y
-      react: 18.2.0
-      rollup: 2.78.0
-      tslib: 1.14.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: false
-
   /@sentry/nextjs/7.36.0_next@13.1.6+react@18.2.0:
     resolution: {integrity: sha512-7IUwBjCjo3rWuvEG16D1wKb0D+aMyCU920VGCAQVZaqTZAgrgAKfpTa1Sk0fmDxYglW1EBI9QM+WEnOa9RleLw==}
     engines: {node: '>=8'}
@@ -4390,7 +4349,6 @@ packages:
     resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
       tslib: 2.5.0
-    dev: false
 
   /@szmarczak/http-timer/1.1.2:
     resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
@@ -6099,7 +6057,6 @@ packages:
 
   /client-only/0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
 
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -10081,7 +10038,6 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
-    dev: false
 
   /no-case/3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -10667,7 +10623,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /postcss/8.4.21:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
@@ -11990,7 +11945,6 @@ packages:
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
-    dev: false
 
   /stylis/4.1.3:
     resolution: {integrity: sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==}