Add storefront example

example/.env.example

@@ -0,0 +1 @@
+SALEOR_API_URL=

example/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://json.schemastore.org/eslintrc.json",
+	"plugins": ["@typescript-eslint"],
+	"parserOptions": {
+		"project": "tsconfig.json"
+	},
+	"root": true,
+	"extends": ["plugin:@typescript-eslint/recommended", "next/core-web-vitals", "prettier"],
+	"overrides": [
+		{
+			"files": ["src/app/**/{page,layout,loading,route}.ts?(x)"],
+			"rules": {
+				"import/no-default-export": "off"
+			}
+		}
+	],
+	"ignorePatterns": ["*.js", "*.jsx"]
+}

example/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# graphql
+generated/

example/.graphqlrc.ts

@@ -0,0 +1,27 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+import { loadEnvConfig } from "@next/env";
+
+loadEnvConfig(".");
+
+const config: CodegenConfig = {
+	overwrite: true,
+	schema: process.env.SALEOR_API_URL,
+	documents: "graphql/**/*.graphql",
+	generates: {
+		"generated/": {
+			preset: "client",
+			config: {
+				useTypeImports: true,
+				skipTypename: true,
+				enumsAsTypes: true,
+				defaultScalarType: "unknown",
+				documentMode: "string",
+			},
+			presetConfig: {
+				fragmentMasking: false,
+			},
+		},
+	},
+};
+
+export default config;

example/.npmrc

@@ -0,0 +1 @@
+save-exact=true

example/.prettierignore

@@ -0,0 +1,3 @@
+pnpm-lock.yaml
+.next/
+generated

example/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "pnpm generate && pnpm dev",
+  "env": {
+    "SALEOR_API_URL": "https://zaiste.saleor.cloud/graphql/"
+  }
+}

example/README.md

@@ -0,0 +1,79 @@
+![Next.js App Router + Saleor](https://user-images.githubusercontent.com/44495184/210545042-0537d49f-6ab8-4e52-af75-225370789c2b.png)
+
+<img width="1383" alt="Saleor Example: Next.js 13 App Router Starter" src="https://github.com/saleor/example-nextjs-app-router-starter/assets/200613/2de5b286-a05c-4eee-9591-b4b01c3c7ee7">
+
+<div align="center">
+  <h1>Next.js (App Router) Starter</h1>
+</div>
+
+<div align="center">
+  <p>A minimalistic boilerplate to start developing Next.js applications with <a href="https://github.com/saleor/saleor">Saleor</a>.</p>
+</div>
+
+<div align="center">
+  <a href="https://stackblitz.com/github/saleor/example-nextjs-app-router-starter">
+    <img
+      alt="Open in StackBlitz"
+      src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"
+      target="_blank"
+    />
+  </a>
+</div>
+
+<br/>
+
+<div align="center">
+  <a href="https://saleor.io/">🏠 Website</a>
+  <span> • </span>
+  <a href="https://docs.saleor.io/docs/3.x/">📚 Docs</a>
+  <span> • </span>
+  <a href="https://saleor.io/blog/">📰 Blog</a>
+  <span> • </span>
+  <a href="https://twitter.com/getsaleor">🐦 Twitter</a>
+  <span> • </span>
+  <a href="https://discord.gg/H52JTZAtSH">💬 Discord</a>
+</div>
+
+## Motivation
+
+🤏 **Bare bones**: Useful for prototyping or building your stack from scratch.
+
+💪 **Typesafe**: Get productive with code generation and types.
+
+## Stack:
+
+- [Next.js App Router](https://nextjs.org/) with static data fetching
+- [GraphQL Code Generator](https://the-guild.dev/graphql/codegen)
+- [TypeScript](https://www.typescriptlang.org/)
+- [pnpm](https://pnpm.io/)
+
+## Quickstart
+
+1. Create a new repository from this template ("Use this template")
+2. Create `.env` file based on `.env.example`:
+
+```bash
+cp .env.example .env
+```
+
+3. Replace the `SALEOR_API_URL` environment variable with the address of your Saleor instance.
+
+4. Install the dependencies:
+
+```bash
+pnpm i
+```
+
+5. Generate the types based on GraphQL schema:
+
+```bash
+pnpm generate
+```
+
+6. Start the development server:
+
+```bash
+pnpm dev
+```
+
+7. Enjoy! 🎉

example/graphql/CheckoutComplete.graphql

@@ -0,0 +1,17 @@
+mutation CheckoutComplete($checkoutId: ID!) {
+	checkoutComplete(id: $checkoutId) {
+		order {
+			id
+			errors {
+				field
+				message
+				code
+			}
+		}
+		errors {
+			field
+			message
+			code
+		}
+	}
+}

example/graphql/CreateCheckout.graphql

@@ -0,0 +1,44 @@
+mutation CreateCheckout($variantId: ID!) {
+	checkoutCreate(
+		input: {
+			channel: "default-channel"
+			lines: [{ quantity: 1, variantId: $variantId }]
+			languageCode: EN_US
+			email: "[email protected]"
+			billingAddress: {
+				firstName: "John"
+				lastName: "Doe"
+				streetAddress1: "813 Howard Street"
+				city: "Oswego"
+				countryArea: "NY"
+				postalCode: "13126"
+				country: US
+			}
+			shippingAddress: {
+				firstName: "John"
+				lastName: "Doe"
+				streetAddress1: "813 Howard Street"
+				city: "Oswego"
+				countryArea: "NY"
+				postalCode: "13126"
+				country: US
+			}
+		}
+	) {
+		checkout {
+			id
+			availablePaymentGateways {
+				id
+				name
+			}
+			shippingMethods {
+				id
+				name
+				price {
+					currency
+					amount
+				}
+			}
+		}
+	}
+}

example/graphql/CurrentUser.graphql

@@ -0,0 +1,17 @@
+query CurrentUser {
+	me {
+		id
+		lastLogin
+		dateJoined
+		email
+		firstName
+		lastName
+		avatar {
+			url
+			alt
+		}
+		orders {
+			totalCount
+		}
+	}
+}

example/graphql/GetCheckoutById.graphql

@@ -0,0 +1,17 @@
+query GetCheckoutById($id: ID!) {
+	checkout(id: $id) {
+		id
+		lines {
+			id
+			variant {
+				product {
+					name
+				}
+			}
+		}
+		availablePaymentGateways {
+			id
+			name
+		}
+	}
+}

example/graphql/GetOrderById.graphql

@@ -0,0 +1,36 @@
+query GetOrderById($orderId: ID!) {
+	order(id: $orderId) {
+		id
+		number
+		statusDisplay
+		lines {
+			id
+			productName
+			quantity
+			quantityFulfilled
+			thumbnail(size: 256) {
+				url
+			}
+			unitPrice {
+				gross {
+					amount
+					currency
+				}
+			}
+		}
+		total {
+			tax {
+				amount
+				currency
+			}
+			gross {
+				amount
+				currency
+			}
+		}
+		totalCharged {
+			amount
+			currency
+		}
+	}
+}

example/graphql/GetTransactionById.graphql

@@ -0,0 +1,13 @@
+query GetTransactionById($transactionId: ID!) {
+	transaction(id: $transactionId) {
+		id
+		events {
+			id
+			type
+			amount {
+				amount
+				currency
+			}
+		}
+	}
+}

example/graphql/PaymentGatewayInitialize.graphql

@@ -0,0 +1,18 @@
+mutation PaymentGatewayInitialize($checkoutId: ID!, $data: JSON, $appId: String!) {
+	paymentGatewayInitialize(paymentGateways: [{ id: $appId, data: $data }], id: $checkoutId) {
+		gatewayConfigs {
+			id
+			data
+			errors {
+				field
+				message
+				code
+			}
+		}
+		errors {
+			field
+			message
+			code
+		}
+	}
+}

example/graphql/ProductList.graphql

@@ -0,0 +1,34 @@
+query ProductList {
+	products(
+		first: 1
+		channel: "default-channel"
+		where: { isAvailable: true, giftCard: false }
+		sortBy: { field: PRICE, direction: DESC }
+	) {
+		edges {
+			node {
+				id
+				name
+				thumbnail(size: 2048) {
+					url
+					alt
+				}
+				category {
+					name
+				}
+				defaultVariant {
+					id
+					name
+					pricing {
+						price {
+							gross {
+								amount
+								currency
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}