@graphcommerce/demo-magento-graphcommerce 4.14.0-canary.7

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @graphcommerce/demo-magento-graphcommerce
+
+## 4.14.0-canary.7
+
+### Patch Changes
+
+- [#1738](https://github.com/graphcommerce-org/graphcommerce/pull/1738) [`bd3a30438`](https://github.com/graphcommerce-org/graphcommerce/commit/bd3a30438cf6b69cd37a191406c8190a20e572cc) - Created directive @env(if: String!) on FRAGMENT_DEFINITION to conditionally include a fragment ([@paales](https://github.com/paales))
+
+- [#1738](https://github.com/graphcommerce-org/graphcommerce/pull/1738) [`6171ad02c`](https://github.com/graphcommerce-org/graphcommerce/commit/6171ad02c19782b1e1f0eb00ea25ea6b764250b5) - Added topological sorting to plugins and added ifEnv export to plugins to conditionally load plugins ([@paales](https://github.com/paales))

package/README.md

@@ -0,0 +1,19 @@
+# demo-magento-graphcommerce
+
+There are specifc configurations for the backend used in the demo. Take a look
+at the graphql and plugins directory to see what is changed for the demo.
+
+To start with a complete copy of the demo as used on
+https://graphcommerce.vercel.app:
+
+1. Copy the [graphql](./graphql/) directory to your local project.
+2. Copy the [plugins](./plugins/) directory to your local project.
+3. Copy the [package.json](./package.json) `{ dependencies: { ... } }` to your
+   package.
+4. `yarn install`
+5. `yarn codegen`
+6. `yarn dev`
+
+## Demo usage
+
+DEMO_MAGENTO_GRAPHCOMMERCE="1"

package/graphql/demo/DemoProductPageItem.graphql

@@ -0,0 +1,6 @@
+fragment DemoProductPageItem on SimpleProduct
+@inject(into: ["ProductPageItem"])
+@env(if: "DEMO_MAGENTO_GRAPHCOMMERCE") {
+  size
+  print_pattern_swatch
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@graphcommerce/demo-magento-graphcommerce",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "4.14.0-canary.7",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "tsc -W"
+  },
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^4.1.11",
+    "@graphcommerce/prettier-config-pwa": "^4.0.7",
+    "@graphcommerce/typescript-config-pwa": "^4.0.5",
+    "@playwright/test": "^1.21.1"
+  },
+  "peerDependencies": {
+    "@mui/material": "5.5.3",
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@graphcommerce/magento-product": "4.14.0-canary.7",
+    "@graphcommerce/magento-product-configurable": "4.14.0-canary.7"
+  }
+}

package/plugins/demo/DemoProductListItem.tsx

@@ -0,0 +1,22 @@
+import type { ProductListItemProps } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { Typography } from '@mui/material'
+
+export const component = 'ProductListItem'
+export const exported = '@graphcommerce/magento-product'
+export const ifEnv = 'DEMO_MAGENTO_GRAPHCOMMERCE'
+
+function DemoProductListItem(props: PluginProps<ProductListItemProps>) {
+  const { Prev, ...rest } = props
+  return (
+    <Prev
+      {...rest}
+      subTitle={
+        <Typography component='span' variant='caption'>
+          BY GC
+        </Typography>
+      }
+    />
+  )
+}
+export const Plugin = DemoProductListItem

package/plugins/demo/DemoProductListItemConfigurable.tsx

@@ -0,0 +1,12 @@
+import type { ProdustListItemConfigurableProps } from '@graphcommerce/magento-product-configurable'
+import type { PluginProps } from '@graphcommerce/next-config'
+
+export const component = 'ProductListItemConfigurable'
+export const exported = '@graphcommerce/magento-product-configurable'
+export const ifEnv = 'DEMO_MAGENTO_GRAPHCOMMERCE'
+
+function DemoProductListItemConfigurable(props: PluginProps<ProdustListItemConfigurableProps>) {
+  const { Prev, ...rest } = props
+  return <Prev {...rest} swatchLocations={{ bottomRight: ['dominant_color'] }} />
+}
+export const Plugin = DemoProductListItemConfigurable

package/plugins/demo/DemoProductListItemsBase.tsx

@@ -0,0 +1,30 @@
+import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { Theme } from '@mui/material'
+
+export const component = 'ProductListItemsBase'
+export const exported = '@graphcommerce/magento-product'
+export const ifEnv = 'DEMO_MAGENTO_GRAPHCOMMERCE'
+
+export const sxLargeItem = (theme: Theme) => ({
+  [theme.breakpoints.up('xl')]: {
+    '& > :nth-of-type(7n + 3)': {
+      gridColumn: 'span 2',
+      gridRow: 'span 2',
+      display: 'grid',
+      gridAutoFlow: 'row',
+      gridTemplateColumns: '100%',
+      gridTemplateRows: '1fr auto',
+      '& > div:first-of-type': {
+        position: 'relative',
+        height: '100%',
+      },
+    },
+  },
+})
+
+function DemoProductListItemsBase(props: PluginProps<ProductItemsGridProps>) {
+  const { Prev, ...rest } = props
+  return <Prev {...rest} sx={sxLargeItem} />
+}
+export const Plugin = DemoProductListItemsBase

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "example", "dist", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}