diff --git a/apps/slack/.eslintrc b/apps/slack/.eslintrc index c5d43a6..0784400 100644 --- a/apps/slack/.eslintrc +++ b/apps/slack/.eslintrc @@ -1,3 +1,3 @@ { - "extends": ["next", "prettier"] + "extends": ["saleor"] } diff --git a/apps/slack/.github/workflows/main.yml b/apps/slack/.github/workflows/main.yml deleted file mode 100644 index c8f2294..0000000 --- a/apps/slack/.github/workflows/main.yml +++ /dev/null @@ -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 diff --git a/apps/slack/.husky/pre-commit b/apps/slack/.husky/pre-commit deleted file mode 100755 index 0da96d6..0000000 --- a/apps/slack/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -npx pretty-quick --staged diff --git a/apps/slack/next.config.js b/apps/slack/next.config.js index ea925fb..93032e9 100644 --- a/apps/slack/next.config.js +++ b/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, }, diff --git a/apps/slack/package.json b/apps/slack/package.json index 3bd1565..792279e 100644 --- a/apps/slack/package.json +++ b/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-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", + "eslint-config-saleor": "workspace:*", "husky": "^8.0.1", "postcss": "^8.4.14", "prettier": "^2.7.1", diff --git a/apps/slack/src/components/MainBar/MainBar.tsx b/apps/slack/src/components/MainBar/MainBar.tsx index 8495217..5b5e1c6 100644 --- a/apps/slack/src/components/MainBar/MainBar.tsx +++ b/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: { diff --git a/apps/slack/src/components/SlackAppMainBar/SlackAppMainBar.tsx b/apps/slack/src/components/SlackAppMainBar/SlackAppMainBar.tsx index bd75da3..e2674e7 100644 --- a/apps/slack/src/components/SlackAppMainBar/SlackAppMainBar.tsx +++ b/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 }, diff --git a/apps/slack/src/hooks/theme-synchronizer.tsx b/apps/slack/src/hooks/theme-synchronizer.tsx deleted file mode 100644 index b07b09d..0000000 --- a/apps/slack/src/hooks/theme-synchronizer.tsx +++ /dev/null @@ -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); diff --git a/apps/slack/src/lib/no-ssr-wrapper.tsx b/apps/slack/src/lib/no-ssr-wrapper.tsx index 4917e33..28d82fc 100644 --- a/apps/slack/src/lib/no-ssr-wrapper.tsx +++ b/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<{}>) => {props.children}; diff --git a/apps/slack/src/pages/_app.tsx b/apps/slack/src/pages/_app.tsx index bb9d01c..cf533fe 100644 --- a/apps/slack/src/pages/_app.tsx +++ b/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 = { diff --git a/apps/slack/src/pages/_document.tsx b/apps/slack/src/pages/_document.tsx index 51a520b..b97a227 100644 --- a/apps/slack/src/pages/_document.tsx +++ b/apps/slack/src/pages/_document.tsx @@ -4,7 +4,7 @@ export default function Document() { return ( - + { - // 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 ; -}; - -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; diff --git a/apps/slack/src/pages/configuration.tsx b/apps/slack/src/pages/configuration.tsx index 8483029..78681ad 100644 --- a/apps/slack/src/pages/configuration.tsx +++ b/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; diff --git a/apps/slack/src/pages/index.tsx b/apps/slack/src/pages/index.tsx index 1d5fa62..4051556 100644 --- a/apps/slack/src/pages/index.tsx +++ b/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({