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

.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 "@saleor/apps-shared/src/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 React, { useEffect } from "react";
-import React, { PropsWithChildren, 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";
-
+import { MacawThemeProvider } from "@saleor/apps-shared";
-const themeOverrides: Partial<Theme> = {
-  /**
-   * You can override MacawUI theme here
-   */
-};
 
 /**
  * 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: '100vh',
-    minHeight: `calc(100vh - 100px)`,
   },
 }));
 

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 "@saleor/apps-shared/src/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 React, { useEffect } from "react";
-import React, { PropsWithChildren, 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";
-
+import { MacawThemeProvider } from "@saleor/apps-shared";
-const themeOverrides: Partial<Theme> = {
-  /**
-   * You can override MacawUI theme here
-   */
-};
 
 /**
  * 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>
+      <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

@@ -24,7 +24,7 @@ You may face conflicts for apps you don't have anymore, but you can safely delet
 ## 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}>
+    <div
-      <Paper
+      className={clsx(styles.container, className, {
-        elevation={0}
-        className={clsx(styles.root, 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==}