lint

apps/slack/.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": ["next", "prettier"]
+  "extends": ["saleor"]
 }

apps/slack/.github/workflows/main.yml

@@ -1,18 +0,0 @@
-name: QA
-on: [pull_request]
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: pnpm/action-setup@v2.2.1
-        with:
-          version: 6.19.1
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "18"
-          cache: "pnpm"
-      - name: Install dependencies
-        run: pnpm install
-      - name: Check linters
-        run: pnpm lint

apps/slack/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx pretty-quick --staged

apps/slack/next.config.js

@@ -8,7 +8,12 @@ const { withSentryConfig } = require("@sentry/nextjs");
 const isSentryPropertiesInEnvironment =
   process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_PROJECT && process.env.SENTRY_ORG;
 
+/**
+ *
+ * @type import("next").NextConfig
+ */
 const moduleExports = {
+  transpilePackages: ["@saleor/shared"],
   eslint: {
     ignoreDuringBuilds: true,
   },

apps/slack/package.json

@@ -23,16 +23,16 @@
     "@sentry/nextjs": "^7.30.0",
     "@urql/exchange-auth": "^1.0.0",
     "clsx": "^1.2.1",
-    "eslint-config-next": "13.1.4",
     "graphql": "^16.5.0",
     "graphql-tag": "^2.12.6",
     "jose": "^4.11.2",
-    "next": "13.1.0",
+    "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "urql": "^3.0.3",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "@saleor/shared": "workspace:*"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "2.7.0",
@@ -46,19 +46,10 @@
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.7",
     "clean-publish": "^4.0.1",
     "eslint": "^8.23.1",
-    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-saleor": "workspace:*",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
     "husky": "^8.0.1",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",

apps/slack/src/components/MainBar/MainBar.tsx

@@ -1,8 +1,7 @@
-import { makeStyles } from "@saleor/macaw-ui";
-import { ReactNode } from "react";
 import { Paper, PaperProps } from "@material-ui/core";
-
+import { makeStyles } from "@saleor/macaw-ui";
 import clsx from "clsx";
+import { ReactNode } from "react";
 
 const useStyles = makeStyles((theme) => ({
   root: {

apps/slack/src/components/SlackAppMainBar/SlackAppMainBar.tsx

@@ -1,8 +1,9 @@
 import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
+import { actions,useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { Button, makeStyles } from "@saleor/macaw-ui";
-import { MainBar } from "../MainBar/MainBar";
+
-import { useAppBridge, actions } from "@saleor/app-sdk/app-bridge";
 import { AppIcon } from "../AppIcon/AppIcon";
+import { MainBar } from "../MainBar/MainBar";
 
 const useStyles = makeStyles({
   buttonsGrid: { display: "flex", gap: 10 },

apps/slack/src/hooks/theme-synchronizer.tsx

@@ -1,38 +0,0 @@
-import { useAppBridge } from "@saleor/app-sdk/app-bridge";
-import { useTheme } from "@saleor/macaw-ui";
-import { memo, useEffect } from "react";
-
-/**
- * Macaw-ui stores its theme mode in memory and local storage. To synchronize App with Dashboard,
- * Macaw must be informed about this change from AppBridge.
- *
- * If you are not using Macaw, you can remove this.
- */
-function _ThemeSynchronizer() {
-  const { appBridgeState, appBridge } = useAppBridge();
-  const { setTheme, themeType } = useTheme();
-
-  // todo - replace this hook to appBridge.subscribe and react only only on initial theme event
-  // useEffect(() =>{
-  //   appBridge?.subscribe('theme',console.log)
-  // },[appBridge])
-
-  useEffect(() => {
-    if (!setTheme || !appBridgeState?.theme) {
-      return;
-    }
-
-    if (themeType !== appBridgeState?.theme) {
-      setTheme(appBridgeState.theme);
-      /**
-       * Hack to fix macaw, which is going into infinite loop on light mode (probably de-sync local storage with react state)
-       * TODO Fix me when Macaw 2.0 is shipped
-       */
-      window.localStorage.setItem("macaw-ui-theme", appBridgeState.theme);
-    }
-  }, [appBridgeState?.theme, setTheme, themeType]);
-
-  return null;
-}
-
-export const ThemeSynchronizer = memo(_ThemeSynchronizer);

apps/slack/src/lib/no-ssr-wrapper.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from "react";
 import dynamic from "next/dynamic";
+import React, { PropsWithChildren } from "react";
 
 const Wrapper = (props: PropsWithChildren<{}>) => <React.Fragment>{props.children}</React.Fragment>;
 

apps/slack/src/pages/_app.tsx

@@ -4,10 +4,10 @@ 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 { ThemeSynchronizer } from "@saleor/shared";
 import React, { PropsWithChildren, useEffect } from "react";
 
 import { AppLayoutProps } from "../../types";
-import { ThemeSynchronizer } from "../hooks/theme-synchronizer";
 import { NoSSRWrapper } from "../lib/no-ssr-wrapper";
 
 const themeOverrides: Partial<Theme> = {

apps/slack/src/pages/_document.tsx

@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html>
       <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="crossorigin" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
       <Head />
       <link
         href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap"

apps/slack/src/pages/_error.js

@@ -1,39 +0,0 @@
-/**
- * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
- *
- * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
- * penultimate line in `CustomErrorComponent`.
- *
- * This page is loaded by Nextjs:
- *  - on the server, when data-fetching methods throw or reject
- *  - on the client, when `getInitialProps` throws or rejects
- *  - on the client, when a React lifecycle method throws or rejects, and it's
- *    caught by the built-in Nextjs error boundary
- *
- * See:
- *  - https://nextjs.org/docs/basic-features/data-fetching/overview
- *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
- *  - https://reactjs.org/docs/error-boundaries.html
- */
-
-import * as Sentry from "@sentry/nextjs";
-import NextErrorComponent from "next/error";
-
-const CustomErrorComponent = (props) => {
-  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
-  // compensate for https://github.com/vercel/next.js/issues/8592
-  // Sentry.captureUnderscoreErrorException(props);
-
-  return <NextErrorComponent statusCode={props.statusCode} />;
-};
-
-CustomErrorComponent.getInitialProps = async (contextData) => {
-  // In case this is running in a serverless function, await this in order to give Sentry
-  // time to send the error before the lambda exits
-  await Sentry.captureUnderscoreErrorException(contextData);
-
-  // This will contain the status code of the response
-  return NextErrorComponent.getInitialProps(contextData);
-};
-
-export default CustomErrorComponent;

apps/slack/src/pages/configuration.tsx

@@ -7,6 +7,7 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
+import { Link } from "@material-ui/core";
 import Skeleton from "@material-ui/lab/Skeleton";
 import { AplReadyResult, VercelAPL } from "@saleor/app-sdk/APL";
 import { useAppBridge, withAuthorization } from "@saleor/app-sdk/app-bridge";
@@ -16,13 +17,12 @@ import { GetServerSideProps } from "next";
 import { ChangeEvent, ReactElement, SyntheticEvent, useEffect, useState } from "react";
 
 import AccessWarning from "../components/AccessWarning/AccessWarning";
+import { AppColumnsLayout } from "../components/AppColumnsLayout/AppColumnsLayout";
 import { ConfigurationError } from "../components/ConfigurationError/ConfigurationError";
+import { SlackAppMainBar } from "../components/SlackAppMainBar/SlackAppMainBar";
 import useAppApi from "../hooks/useAppApi";
 import { saleorApp } from "../lib/saleor-app";
 import useDashboardNotifier from "../utils/useDashboardNotifier";
-import { Link } from "@material-ui/core";
-import { SlackAppMainBar } from "../components/SlackAppMainBar/SlackAppMainBar";
-import { AppColumnsLayout } from "../components/AppColumnsLayout/AppColumnsLayout";
 
 interface ConfigurationField {
   key: string;

apps/slack/src/pages/index.tsx

@@ -1,13 +1,14 @@
-import { NextPage } from "next";
+import { InputAdornment, LinearProgress, TextField, Typography } from "@material-ui/core";
 import { useAppBridge } from "@saleor/app-sdk/app-bridge";
+import { Button, makeStyles, useTheme } from "@saleor/macaw-ui";
+import { NextPage } from "next";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import React, { FormEventHandler, useEffect } from "react";
 import { useIsMounted } from "usehooks-ts";
-import Image from "next/image";
+
 import SaleorLogoImage from "../assets/saleor-logo.svg";
 import SaleorLogoImageDark from "../assets/saleor-logo-dark.svg";
-import { InputAdornment, LinearProgress, TextField, Typography } from "@material-ui/core";
-import { Button, makeStyles, useTheme } from "@saleor/macaw-ui";
 import { isInIframe } from "../lib/is-in-iframe";
 
 const useStyles = makeStyles({