@graphcommerce/magento-product 3.0.1

package/components/index.ts

@@ -0,0 +1,45 @@
+export * from './JsonLdProduct'
+export * from './ProductAddToCart/ProductAddToCart.gql'
+
+export * from './ProductList/ProductList.gql'
+
+export { default as ProductListItem } from './ProductListItem'
+export * from './ProductListItem'
+
+export { default as ProductListItems } from './ProductListItems'
+export * from './ProductListItems/filteredProductList'
+export * from './ProductListItems/filterTypes'
+export { default as ProductListItemsBase } from './ProductListItems/ProductListItemsBase'
+export * from './ProductListItems/ProductListItemsBase'
+export * from './ProductListItems/getFilterTypes'
+export * from './ProductListItems/renderer'
+export * from './ProductListItems/ProductListItems.gql'
+export { default as ProductListParamsProvider } from './ProductListItems/ProductListParamsProvider'
+export * from './ProductListLink/ProductListLink'
+export { default as ProductListLink } from './ProductListLink/ProductListLink'
+
+export * from './ProductListCount'
+export { default as ProductListCount } from './ProductListCount'
+export { default as ProductSidebarDelivery } from './ProductSidebarDelivery'
+export * from './ProductListFilters'
+export { default as ProductListFilters } from './ProductListFilters'
+export * from './ProductListFiltersContainer'
+export { default as ProductListFiltersContainer } from './ProductListFiltersContainer'
+
+export * from './ProductRelated/RelatedProducts.gql'
+
+export * from './ProductListPagination'
+export { default as ProductListPagination } from './ProductListPagination'
+export * from './ProductListSort'
+export { default as ProductListSort } from './ProductListSort'
+export * from './ProductPageDescription'
+export { default as ProductPageDescription } from './ProductPageDescription'
+export * from './ProductSpecs'
+export { default as ProductSpecs } from './ProductSpecs'
+export { default as productPageCategory } from './ProductPageCategory'
+export { default as ProductPageGallery } from './ProductPageGallery'
+export { default as ProductPageMeta } from './ProductPageMeta'
+export { getProductStaticPaths } from './ProductStaticPaths/getProductStaticPaths'
+export { default as ProductWeight } from './ProductWeight'
+
+export * from './ProductUpsells/UpsellProducts.gql'

package/context/productListParamsContext.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+import { ProductListParams } from '../components/ProductListItems/filterTypes'
+
+export const productListParamsContext = React.createContext<{
+  params: ProductListParams
+  setParams: React.Dispatch<React.SetStateAction<ProductListParams>>
+}>({ params: { filters: {}, sort: {}, url: '' }, setParams: () => {} })

package/hooks/ProductLink.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type ProductLink_BundleProduct_Fragment = { __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLink_ConfigurableProduct_Fragment = { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLink_DownloadableProduct_Fragment = { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLink_GroupedProduct_Fragment = { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLink_SimpleProduct_Fragment = { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLink_VirtualProduct_Fragment = { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string> };
+
+export type ProductLinkFragment = ProductLink_BundleProduct_Fragment | ProductLink_ConfigurableProduct_Fragment | ProductLink_DownloadableProduct_Fragment | ProductLink_GroupedProduct_Fragment | ProductLink_SimpleProduct_Fragment | ProductLink_VirtualProduct_Fragment;

package/hooks/ProductLink.graphql

@@ -0,0 +1,5 @@
+fragment ProductLink on ProductInterface {
+  __typename
+  uid
+  url_key
+}

package/hooks/useProductLink.ts

@@ -0,0 +1,20 @@
+import { ProductLinkFragment } from './ProductLink.gql'
+
+type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
+
+export function productLink(link: ProductLinkProps) {
+  const { __typename, url_key } = link
+  const productRoute = __typename
+    .split(/(?=[A-Z])/)
+    .map((s) => s.toLowerCase())
+    .reverse()
+
+  // For Simple and Virtual products we're not navigating to a type specific page
+  if (__typename === 'SimpleProduct') productRoute.splice(1, 1)
+
+  return `/${productRoute.join('/')}/${url_key}`
+}
+
+export function useProductLink(props: ProductLinkProps) {
+  return productLink(props)
+}

package/hooks/useProductListLink.ts

@@ -0,0 +1,38 @@
+import {
+  isFilterTypeEqual,
+  isFilterTypeMatch,
+  isFilterTypeRange,
+  ProductListParams,
+} from '../components/ProductListItems/filterTypes'
+
+export function createProductListLink(props: ProductListParams): string {
+  const { url, sort, currentPage, filters } = props
+
+  // base url path generation
+  let href = ``
+
+  if (currentPage && currentPage > 1) href += `/page/${currentPage}`
+
+  // todo(paales): How should the URL look like with multiple sorts?
+  // Something like: /sort/position,price/dir/asc,asc
+  const [sortBy] = Object.keys(sort)
+  if (sort && sortBy) href += `/sort/${sortBy}`
+  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') href += `/dir/desc`
+
+  // Apply filters
+  if (filters)
+    Object.entries(filters).forEach(([param, value]) => {
+      if (value && isFilterTypeEqual(value) && value.in?.length)
+        href += `/${param}/${value.in?.join(',')}`
+      if (value && isFilterTypeMatch(value)) href += `/${param}/${value.match}`
+      if (value && isFilterTypeRange(value))
+        href += `/${param}/${value.from ?? '*'}-${value.to ?? '*'}`
+    })
+
+  href = `/${url}${href && `/q${href}`}`
+  return href
+}
+
+export function useProductListLink(props: ProductListParams): string {
+  return createProductListLink({ ...props, url: `${props.url}` })
+}

package/hooks/useProductListLinkPush.ts

@@ -0,0 +1,22 @@
+import Router from 'next/router'
+import { ProductListParams } from '../components/ProductListItems/filterTypes'
+import { createProductListLink } from './useProductListLink'
+import { useProductListParamsContext } from './useProductListParamsContext'
+
+type UseProductLinkPushProps = {
+  shallow?: boolean
+  locale?: string | false
+  scroll?: boolean
+}
+
+export function useProductListLinkPush(props?: UseProductLinkPushProps) {
+  const { setParams } = useProductListParamsContext()
+
+  return (params: ProductListParams) => {
+    setParams(params)
+
+    const path = createProductListLink(params)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    Router.push(path, path, props)
+  }
+}

package/hooks/useProductListParamsContext.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { productListParamsContext } from '../context/productListParamsContext'
+
+export const useProductListParamsContext = () => useContext(productListParamsContext)

package/index.ts

@@ -0,0 +1,9 @@
+export * from './components'
+
+export * from './Api/ProductListItem.gql'
+export * from './Api/ProductPageItem.gql'
+
+export * from './hooks/useProductLink'
+export * from './hooks/useProductListLinkPush'
+export * from './hooks/useProductListParamsContext'
+export * from './hooks/ProductLink.gql'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@graphcommerce/magento-product",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/framer-scroller": "^0.2.1",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "clsx": "^1.1.1",
+    "framer-motion": "^4.1.17",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "schema-dts": "^1.0.0",
+    "type-fest": "^2.1.0"
+  }
+}

package/tsconfig.json

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