This commit is contained in:
Lukasz Ostrowski 2023-01-29 20:26:41 +01:00
parent de68dcca7b
commit eed9a3ecec
14 changed files with 26 additions and 128 deletions

View file

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

View file

@ -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

View file

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

View file

@ -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,
},

View file

@ -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",

View file

@ -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: {

View file

@ -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 },

View file

@ -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);

View file

@ -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>;

View file

@ -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> = {

View file

@ -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"

View file

@ -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;

View file

@ -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;

View file

@ -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({