code organization

.env.example

@@ -0,0 +1 @@
+GRAPHQL_URL=

.eslintrc.json

@@ -1,83 +1,90 @@
 {
-	"$schema": "https://json.schemastore.org/eslintrc.json",
-	"plugins": ["@typescript-eslint", "import"],
-	"parserOptions": {
-		"project": "tsconfig.json"
-	},
-	"extends": [
-		"plugin:@typescript-eslint/recommended",
-		"plugin:@typescript-eslint/recommended-requiring-type-checking",
-		"plugin:import/recommended",
-		"plugin:import/typescript",
-		"prettier",
-		"next/core-web-vitals"
-	],
-	"rules": {
-		// sort imports
-		// "import/order": "error",
+  "$schema": "https://json.schemastore.org/eslintrc.json",
+  "plugins": ["@typescript-eslint", "import"],
+  "parserOptions": {
+    "project": "tsconfig.json"
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+    "next/core-web-vitals"
+  ],
+  "rules": {
+    // sort imports
+    // "import/order": "error",
 
-		// no let exports
-		"import/no-mutable-exports": "error",
+    // no let exports
+    "import/no-mutable-exports": "error",
 
-		"import/no-cycle": "error",
-		"import/no-default-export": "error",
+    "import/no-cycle": "error",
+    "import/no-default-export": "error",
 
-		// allow {} even though it's unsafe but comes handy
-		"@typescript-eslint/ban-types": [
-			"error",
-			{
-				"types": {
-					"{}": false
-				}
-			}
-		],
+    // allow {} even though it's unsafe but comes handy
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "types": {
+          "{}": false
+        }
+      }
+    ],
 
-		"@typescript-eslint/consistent-type-imports": [
-			"error",
-			{
-				"prefer": "type-imports",
-				"fixStyle": "inline-type-imports",
-				"disallowTypeAnnotations": false
-			}
-		],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports",
+        "disallowTypeAnnotations": false
+      }
+    ],
 
-		"import/no-duplicates": ["error", { "prefer-inline": true }],
+    "import/no-duplicates": ["error", { "prefer-inline": true }],
 
-		// false negatives
-		"import/namespace": ["off"],
+    // false negatives
+    "import/namespace": ["off"],
 
-		// we allow empty interfaces
-		"no-empty-pattern": "off",
-		"@typescript-eslint/no-empty-interface": "off",
+    // we allow empty interfaces
+    "no-empty-pattern": "off",
+    "@typescript-eslint/no-empty-interface": "off",
 
-		// we allow empty functions
-		"@typescript-eslint/no-empty-function": "off",
+    // we allow empty functions
+    "@typescript-eslint/no-empty-function": "off",
 
-		// we sometimes use async functions that don't await anything
-		"@typescript-eslint/require-await": "off",
+    // we sometimes use async functions that don't await anything
+    "@typescript-eslint/require-await": "off",
 
-		// make sure to `await` inside try…catch
-		"@typescript-eslint/return-await": ["error", "in-try-catch"],
+    // make sure to `await` inside try…catch
+    "@typescript-eslint/return-await": ["error", "in-try-catch"],
 
-		// allow unused vars prefixed with `_`
-		"@typescript-eslint/no-unused-vars": [
-			"error",
-			{ "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
-		],
+    // allow unused vars prefixed with `_`
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
 
-		// numbers and booleans are fine in template strings
-		"@typescript-eslint/restrict-template-expressions": [
-			"error",
-			{ "allowNumber": true, "allowBoolean": true }
-		]
-	},
-	"overrides": [
-		{
-			"files": ["app/**/*.ts?(x)", "*.ts"],
-			"rules": {
-				"import/no-default-export": "off"
-			}
-		}
-	],
-	"ignorePatterns": ["*.js", "*.jsx"]
-}
+    // numbers and booleans are fine in template strings
+    "@typescript-eslint/restrict-template-expressions": [
+      "error",
+      { "allowNumber": true, "allowBoolean": true }
+    ],
+
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["app/**/*.ts?(x)", "*.ts"],
+      "rules": {
+        "import/no-default-export": "off"
+      }
+    }
+  ],
+  "ignorePatterns": ["*.js", "*.jsx"]
+}

.github/workflows/main.yml

@@ -1,6 +1,10 @@
 name: Build, TypeScripts, tests
 on: [pull_request]
 
+concurrency:
+  group: tests-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build_and_test:
     runs-on: ubuntu-latest

.gitignore

@@ -17,7 +17,6 @@ gql/
 
 # production
 /build
->>>>>>> e5095900 (a new beginning)
 
 # misc
 .DS_Store

.graphqlrc.ts

@@ -1,9 +1,11 @@
-
+import { loadEnvConfig } from "@next/env";
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
+loadEnvConfig(process.cwd());
+
 const config: CodegenConfig = {
   overwrite: true,
-  schema: "https://zaiste.saleor.cloud/graphql/",
+  schema: process.env.GRAPHQL_URL,
   documents: "graphql/**/*.graphql",
   generates: {
     "gql/": {

.lintstagedrc.js

@@ -0,0 +1,13 @@
+// https://nextjs.org/docs/basic-features/eslint#lint-staged
+
+import path from "path";
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
+
+export default {
+  "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": [buildEslintCommand],
+  "*.*": "prettier --write --ignore-unknown",
+};

app/cart/page.tsx

@@ -82,7 +82,6 @@ export default async function Page() {
           <div className="mt-10 grid grid-cols-3">
             <div></div>
 
-            {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
             <button formAction={performCheckout}
               className="w-full border border-transparent rounded bg-slate-600 px-6 py-3 font-medium text-gray-50 hover:bg-slate-500"
             >

app/products/[id]/page.tsx

@@ -102,7 +102,6 @@ export default async function Page(props: { params: { id: string }, searchParams
 
   return (
     <section className="mx-auto max-w-7xl p-8 grid">
-      {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
       <form className="grid grid-cols-2 gap-4" action={addItem}>
         {firstImage && (
           <Image alt={'image'} src={firstImage?.url} />
@@ -113,7 +112,7 @@ export default async function Page(props: { params: { id: string }, searchParams
               {product?.name}
             </h1>
 
-          <VariantSelector variants={variants} />
+            <VariantSelector variants={variants} />
             <div className="mt-4 space-y-6">
               <div dangerouslySetInnerHTML={{ __html: description }}></div>
             </div>

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint --dir src --fix",
     "codegen": "graphql-codegen --config .graphqlrc.ts"
   },
   "dependencies": {
@@ -31,14 +31,15 @@
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "stripe": "^13.6.0",
+    "stripe": "^13.7.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@next/env": "^13.5.2",
     "@parcel/watcher": "^2.3.0",
     "@tailwindcss/typography": "^0.5.10",
     "@typescript-eslint/eslint-plugin": "^6.7.2",