Added magento-open-source example

examples/magento-open-source/.gitignore

@@ -0,0 +1,32 @@
+# dependencies
+node_modules
+
+# next.js
+.next/
+out/
+.vercel
+next-env.d.ts
+._tmp*
+.swc
+
+# misc
+.DS_Store
+.env*
+!.env.example
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# application
+**/public/workbox-*.js*
+**/public/sw.js*
+**/public/sitemap*.xml
+**/public/robots.txt
+
+*.gql.ts
+
+# application
+.mesh
+*.tsbuildinfo

examples/magento-open-source/.graphqlrc.yml

@@ -0,0 +1,17 @@
+projects:
+  Project:
+    schema:
+      - .mesh/schema.graphql
+      - node_modules/@graphcommerce/graphql/apollo-client.graphql
+      - node_modules/@graphcommerce/graphql-codegen-near-operation-file/src/directive/env.graphqls
+      - node_modules/@graphcommerce/graphql-codegen-near-operation-file/src/directive/injectable.graphqls
+    documents:
+      - ./components/**/*.graphql
+      - ./graphql/**/*.graphql
+      - node_modules/@graphcommerce/**/*.graphql
+    extensions:
+      languageService:
+        useSchemaFileDefinitions: true
+      endpoints:
+        default:
+          url: http://localhost:3000/api/graphql/

examples/magento-open-source/.meshrc.yml

@@ -0,0 +1,21 @@
+sources:
+  - name: m2
+    handler:
+      graphql:
+        endpoint: '{graphCommerce.magentoEndpoint}'
+        useGETForQueries: true
+        batch: false
+        operationHeaders:
+          Store: '{context.headers.store}'
+          Authorization: '{context.headers.authorization}'
+          X-ReCaptcha: "{context.headers['x-recaptcha']}"
+          Preview-Version: "{context.headers['preview-version']}"
+          Content-Currency: "{context.headers['content-currency']}"
+          X-Magento-Cache-Id: "{context.headers['x-magento-cache-id']}"
+          X-Forwarded-For: "{context.headers['x-forwarded-for']}"
+serve:
+  playground: true
+plugins:
+  - '@graphcommerce/graphql-mesh/plugin/forward-headers':
+      forwardHeaders:
+        - X-Magento-Cache-Id

examples/magento-open-source/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": "never" },
+  "editor.snippetSuggestions": "none",
+  "emmet.showExpandedAbbreviation": "never",
+  "editor.wordBasedSuggestions": "off",
+  "javascript.suggest.names": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/.next": true,
+    ".yarn": true,
+    "yarn.lock": true
+  },
+  "files.readonlyInclude": {
+    "**/*.interceptor.tsx": true,
+    "**/*.interceptor.ts": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

examples/magento-open-source/.yarnrc.yml

@@ -0,0 +1,3 @@
+enableImmutableInstalls: false
+
+nodeLinker: node-modules

examples/magento-open-source/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

examples/magento-open-source/README.md

@@ -0,0 +1,103 @@
+<p align="center">
+    <a href="https://www.graphcommerce.org/"><img src="https://graphcommerce.vercel.app/favicon.svg" alt="GraphCommerce Logo"/></a>
+</p>
+<p align="center">
+  <a aria-label="License" href="https://www.npmjs.com/package/@graphcommerce/magento">
+    <img alt="" src="https://img.shields.io/npm/v/@graphcommerce/magento?style=for-the-badge">
+  </a>
+  <a aria-label="License" href="https://github.com/graphcommerce-org/graphcommerce/blob/main/LICENSE.md">
+    <img alt="" src="https://img.shields.io/badge/License-ELv2-green?style=for-the-badge">
+  </a>
+  <a aria-label="Vercel logo" href="https://vercel.com?utm_source=graphcommerce&utm_campaign=oss">
+    <img src="https://img.shields.io/badge/POWERED%20BY%20Vercel-000000.svg?style=for-the-badge&logo=Vercel&labelColor=000">
+  </a>  
+</p>
+
+<div align="center">
+
+📚 [Docs](https://graphcommerce.org/docs) | 🗣
+[Slack](https://join.slack.com/t/graphcommerce/shared_invite/zt-11rmgq1ad-F~0daNtKcSvtcC4eQRzjeQ)
+| 📝
+[Release notes](https://github.com/graphcommerce-org/graphcommerce/releases)
+
+</div>
+
+GraphCommerce is a framework for building headless ecommerce storefronts in
+React and Next.js. It provides a best-in-class example, including components and
+utilities, to deliver a high-performance, high-quality ecommerce Progressive Web
+App (PWA).
+
+Explore the [GraphCommerce demo](https://graphcommerce.vercel.app/) or start
+building your custom GraphCommerce ecommerce frontend.
+
+https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4
+
+The GraphCommerce homepage, showcasing content from Magento through a variety of
+included UX components.
+
+---
+
+# Getting started with GraphCommerce
+
+In this guide, you will set up a GraphCommerce app locally, allowing you to
+start building.
+
+### Requirements
+
+- Install and use node 16/18: `nvm install 16` or `nvm use 16`
+- Install yarn: `corepack enable`
+
+## Step 1: Create a GraphCommerce app
+
+```bash
+git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
+# Clone repository
+```
+
+```bash
+mkdir my-project
+# Create project folder
+```
+
+```bash
+cp -R graphcommerce/examples/magento/. my-project && rm -rf graphcommerce && cd my-project
+# Copy example, delete repo, navigate to project folder
+```
+
+## Step 2: Configure API keys
+
+(Optional,
+[continue reading](https://www.graphcommerce.org/docs/getting-started/create))
+
+## Step 3: Start the app
+
+```bash
+yarn
+# Install the dependencies
+```
+
+```bash
+yarn codegen
+# Converts all .graphql files to typescript files
+```
+
+```bash
+yarn dev
+# Run the app
+```
+
+---
+
+🎉 Explore your GraphCommerce app running at http://localhost:3000
+
+(Explore the GraphQL Playground running at http://localhost:3000/api/graphql)
+
+> No success? Consult the
+> [troubleshooting guide](../../docs/framework/troubleshooting.md)
+
+## Next steps
+
+- The [Quick start](../../docs/getting-started/readme.md) guide covers about 80%
+  of the concepts you'll use, so it's a great place to start.
+- [Start customizing](../../docs/getting-started/start-building.md) to go from
+  "Hello World" to a fully built GraphCommerce custom storefront.

examples/magento-open-source/codegen.yml

@@ -0,0 +1,42 @@
+generates:
+  # Generate a types file
+  node_modules/@graphcommerce/graphql/generated/types.ts:
+    schema:
+      - .mesh/schema.graphql
+    plugins:
+      - typescript-apollo-client-helpers
+      - add
+    config:
+      enumsAsTypes: true
+      content: '/* eslint-disable */'
+  # Generate a fragments.json
+  node_modules/@graphcommerce/graphql/generated/fragments.json:
+    schema:
+      - .mesh/schema.graphql
+    plugins:
+      - fragment-matcher
+  # Generate .gql.ts files for each GraphQL file
+  .:
+    schema:
+      - .mesh/schema.graphql
+    documents:
+      - 'components/**/*.graphql'
+      - 'graphql/**/*.graphql'
+    plugins:
+      - '@graphcommerce/graphql-codegen-relay-optimizer-plugin'
+      - typed-document-node
+      - typescript-operations
+      - add
+    preset: '@graphcommerce/graphql-codegen-near-operation-file'
+    presetConfig:
+      extension: .gql.ts
+      baseTypesPath: ~@graphcommerce/graphql-mesh/.mesh
+      injectables: true
+    config:
+      skipTypename: true
+      namingConvention: 'keep'
+      dedupeOperationSuffix: true
+      arrayInputCoercion: false
+      content: /* eslint-disable */
+watchConfig:
+  usePolling: false

examples/magento-open-source/components/Layout/Footer.tsx

@@ -0,0 +1,65 @@
+import { Image } from '@graphcommerce/image'
+import { useCheckoutGuestEnabled } from '@graphcommerce/magento-cart'
+import { StoreSwitcherButton } from '@graphcommerce/magento-store'
+import { Footer as FooterBase } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { Button, IconButton, Link } from '@mui/material'
+
+export function Footer(props: FooterProps) {
+  const { footer } = props
+  const cartEnabled = useCheckoutGuestEnabled()
+
+  return (
+    <FooterBase
+      socialLinks={footer?.socialLinks?.map((link) => (
+        <IconButton key={link.title} href={link.url} color='inherit' size='medium' edge='start'>
+          {link.asset ? (
+            <Image
+              layout='fill'
+              src={link.asset.url}
+              width={24}
+              height={24}
+              unoptimized
+              alt={link.title}
+              sx={(theme) => ({
+                filter: theme.palette.mode === 'dark' ? 'invert(100%)' : 'invert(0%)',
+              })}
+            />
+          ) : (
+            link.title
+          )}
+        </IconButton>
+      ))}
+      storeSwitcher={<StoreSwitcherButton />}
+      customerService={
+        <Button href='#' variant='pill'>
+          <Trans>Customer Service</Trans>
+        </Button>
+      }
+      copyright={
+        <>
+          <span>{footer?.copyright}</span>
+
+          {footer?.legalLinks?.map((link) => (
+            <Link key={link.title} href={link.url} color='textPrimary' underline='always'>
+              {link.title}
+            </Link>
+          ))}
+          {import.meta.graphCommerce.magentoVersion >= 247 && cartEnabled && (
+            <Link href='/guest/orderstatus' color='textPrimary' underline='always'>
+              <Trans>Order status</Trans>
+            </Link>
+          )}
+          {import.meta.graphCommerce.magentoVersion >= 247 && (
+            <Link href='/service/contact-us' color='textPrimary' underline='always'>
+              <Trans>Contact</Trans>
+            </Link>
+          )}
+          <Link href='/service/newsletter' color='textPrimary' underline='always'>
+            <Trans>Newletter</Trans>
+          </Link>
+        </>
+      }
+    />
+  )
+}

examples/magento-open-source/components/Layout/Layout.graphql

@@ -0,0 +1,6 @@
+query Layout {
+  menu: categories {
+    __typename
+  }
+  ...MenuQueryFragment
+}

examples/magento-open-source/components/Layout/LayoutMinimal.tsx

@@ -0,0 +1,22 @@
+import { LayoutDefault, LayoutDefaultProps } from '@graphcommerce/next-ui'
+import { Footer } from './Footer'
+import { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type LayoutMinimalProps = LayoutQuery &
+  Omit<LayoutDefaultProps, 'header' | 'footer' | 'cartFab' | 'noSticky'>
+
+export function LayoutMinimal(props: LayoutMinimalProps) {
+  const { footer, menu, children, ...uiProps } = props
+
+  return (
+    <LayoutDefault
+      {...uiProps}
+      header={<Logo />}
+      footer={<Footer footer={footer} />}
+      sx={{ background: (theme) => theme.palette.background.paper }}
+    >
+      {children}
+    </LayoutDefault>
+  )
+}