@graphcommerce/demo-magento-graphcommerce 9.0.4-canary.8 → 9.0.4

package/CHANGELOG.md

@@ -1,26 +1,18 @@
 # @graphcommerce/demo-magento-graphcommerce
 
-## 9.0.4-canary.8
+## 9.0.4
 
-## 9.0.4-canary.7
+## 9.0.3
 
-## 9.0.4-canary.6
+## 9.0.3-canary.0
 
-## 9.0.4-canary.5
+## 9.0.2
 
-## 9.0.4-canary.4
+## 9.0.2-canary.0
 
-## 9.0.4-canary.3
+## 9.0.1
 
-## 9.0.4-canary.2
-
-## 9.0.4-canary.1
-
-### Patch Changes
-
-- [#2470](https://github.com/graphcommerce-org/graphcommerce/pull/2470) [`f5565b4`](https://github.com/graphcommerce-org/graphcommerce/commit/f5565b47d02c057d888fad94c1430d4e783c5e05) - Moved all test routes files to the demo package so they are out of the example directory. ([@paales](https://github.com/paales))
-
-## 9.0.4-canary.0
+## 9.0.1-canary.1
 
 ## 9.0.0
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/demo-magento-graphcommerce",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.8",
+  "version": "9.0.4",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,14 +15,14 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.8",
-    "@graphcommerce/framer-scroller": "^9.0.4-canary.8",
-    "@graphcommerce/magento-product": "^9.0.4-canary.8",
-    "@graphcommerce/magento-product-configurable": "^9.0.4-canary.8",
-    "@graphcommerce/magento-recently-viewed-products": "^9.0.4-canary.8",
-    "@graphcommerce/next-ui": "^9.0.4-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.8",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4",
+    "@graphcommerce/framer-scroller": "^9.0.4",
+    "@graphcommerce/magento-product": "^9.0.4",
+    "@graphcommerce/magento-product-configurable": "^9.0.4",
+    "@graphcommerce/magento-recently-viewed-products": "^9.0.4",
+    "@graphcommerce/next-ui": "^9.0.4",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",

package/plugins/demo/DemoRecentlyViewedProducts.tsx

@@ -1,16 +1,16 @@
 import type { ProductListItemType } from '@graphcommerce/magento-product'
 import { AddProductsToCartForm } from '@graphcommerce/magento-product'
 import {
+  type RecentlyViewedProductsProps,
   useRecentlyViewedProducts,
   useRecentlyViewedSkus,
-  type RecentlyViewedProductsProps,
 } from '@graphcommerce/magento-recently-viewed-products'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import {
-  filterNonNullableKeys,
   RenderType,
-  responsiveVal,
   SidebarSlider,
+  filterNonNullableKeys,
+  responsiveVal,
 } from '@graphcommerce/next-ui'
 import { Box, Typography } from '@mui/material'
 import { useInView } from 'framer-motion'

package/copy/pages/test/[[...url]].tsx

@@ -1,84 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { cacheFirst } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { GetStaticProps } from '@graphcommerce/next-ui'
-import { LayoutTitle } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import { Container, Divider, Link } from '@mui/material'
-import type { GetStaticPaths } from 'next'
-import type { LayoutNavigationProps } from '../../components'
-import { LayoutDocument, LayoutNavigation } from '../../components'
-import { graphqlSharedClient, graphqlSsrClient } from '../../lib/graphql/graphqlSsrClient'
-import { LayoutDemo } from './minimal-page-shell/[[...url]]'
-
-type Props = { url: string }
-type RouteProps = { url: string[] }
-type GetPageStaticPaths = GetStaticPaths<RouteProps>
-type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props, RouteProps>
-
-function TestOverview() {
-  return (
-    <Container>
-      <LayoutDemo baseUrl='/test' />
-      <Divider />
-      <LayoutTitle
-        sx={(theme) => ({
-          '&.gutterBottom': {
-            marginBottom: theme.spacings.sm,
-          },
-        })}
-      >
-        Links to components
-      </LayoutTitle>
-      <Container maxWidth='md' sx={{ display: 'grid', gridColumns: '1' }}>
-        <Link href='/test/buttons'>Buttons</Link>
-        <Link href='/test/icons'>Icons</Link>
-        <Link href='/test/slider'>Slider</Link>
-        <Link href='/test/typography'>Typography</Link>
-        <Link href='/test/number-inputs'>Number-inputs</Link>
-      </Container>
-    </Container>
-  )
-}
-
-TestOverview.pageOptions = {
-  Layout: LayoutNavigation,
-} as PageOptions
-
-export default TestOverview
-
-// eslint-disable-next-line @typescript-eslint/require-await
-export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
-  if (process.env.NODE_ENV === 'development') return { paths: [], fallback: 'blocking' }
-
-  const urls = ['index', 'other']
-
-  const paths = locales
-    .map((locale) => urls.map((url) => ({ params: { url: [url] }, locale })))
-    .flat(1)
-
-  return { paths, fallback: 'blocking' }
-}
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const { params } = context
-  const url = (params?.url ?? ['index']).join('/') ?? ''
-
-  const client = graphqlSharedClient(context)
-  const staticClient = graphqlSsrClient(context)
-
-  const conf = client.query({ query: StoreConfigDocument })
-  const layout = staticClient.query({
-    query: LayoutDocument,
-    fetchPolicy: cacheFirst(staticClient),
-  })
-
-  return {
-    props: {
-      url,
-      up: url !== 'index' ? { href: '/', title: i18n._(/* i18n */ 'Home') } : null,
-      ...(await layout).data,
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/buttons.tsx

@@ -1,142 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { ButtonProps, GetStaticProps } from '@graphcommerce/next-ui'
-import {
-  Button,
-  iconBox,
-  iconChevronRight,
-  IconSvg,
-  LayoutHeader,
-  LayoutTitle,
-  responsiveVal,
-} from '@graphcommerce/next-ui'
-import { Box, Container, Divider, styled, Typography } from '@mui/material'
-import React, { useState } from 'react'
-import type { LayoutMinimalProps } from '../../components'
-import { LayoutMinimal } from '../../components'
-import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
-
-const variants = ['text', 'outlined', 'contained', 'pill', 'inline'] as const
-const sizes = ['small', 'medium', 'large'] as const
-const colors = ['inherit', 'primary', 'secondary'] as const
-
-const propVariants: Record<string, ButtonProps> = {
-  Default: {},
-  'With start icon': {
-    startIcon: <IconSvg key='icon' src={iconBox} size='inherit' />,
-    loadingPosition: 'start',
-  },
-  'With end icon': {
-    endIcon: <IconSvg key='icon' src={iconChevronRight} size='inherit' />,
-    loadingPosition: 'end',
-  },
-}
-
-const Grid = styled('div')(({ theme }) => ({
-  marginTop: `${5 * 8}px`,
-  marginBottom: `${5 * 8}px`,
-  display: 'grid',
-  gridAutoFlow: 'columns',
-  [theme.breakpoints.up('md')]: {
-    gridTemplateColumns: 'repeat(3, minmax(180px, 1fr))',
-  },
-  gap: responsiveVal(20, 40),
-}))
-
-function ButtonWithDemoState(props: ButtonProps) {
-  const [loading, setLoading] = useState(false)
-
-  return (
-    <Button
-      {...props}
-      loading={loading}
-      // disabled={loading}
-      onClick={() => {
-        setLoading(true)
-        setTimeout(() => setLoading(false), 2000)
-      }}
-    />
-  )
-}
-
-export default function ButtonsPage() {
-  return (
-    <>
-      <LayoutHeader />
-      <Container>
-        <LayoutTitle variant='h1'>Buttons</LayoutTitle>
-
-        {Object.entries(propVariants).map(([propVariant, props]) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={propVariant}>
-            <Typography variant='h2' sx={{ mt: 8 }}>
-              {propVariant}
-            </Typography>
-            {variants.map((variant) => (
-              <React.Fragment key={variant}>
-                {/* <Typography variant='h3'>Variant: {variant}</Typography> */}
-                <Grid>
-                  {colors.map((color) => (
-                    <Typography
-                      key={color}
-                      variant='h6'
-                      sx={{ display: 'inline-flex', alignItems: 'center', columnGap: 1 }}
-                    >
-                      Button {variant} {color}
-                      <Box
-                        sx={{
-                          backgroundColor: `${color}.main`,
-                          width: '1em',
-                          height: '1em',
-                          display: 'inline-block',
-                        }}
-                      />
-                    </Typography>
-                  ))}
-
-                  {sizes.map((size) => (
-                    <React.Fragment key={size}>
-                      {colors.map((color) => (
-                        <div key={color}>
-                          <ButtonWithDemoState
-                            variant={variant}
-                            color={color}
-                            size={size}
-                            {...props}
-                            onClick={() => {}}
-                          >
-                            Button
-                          </ButtonWithDemoState>
-                        </div>
-                      ))}
-                    </React.Fragment>
-                  ))}
-                </Grid>
-                <Divider />
-              </React.Fragment>
-            ))}
-          </React.Fragment>
-        ))}
-      </Container>
-    </>
-  )
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-  layoutProps: {},
-}
-ButtonsPage.pageOptions = pageOptions
-
-type GetPageStaticProps = GetStaticProps<LayoutMinimalProps>
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const conf = client.query({ query: StoreConfigDocument })
-
-  return {
-    props: {
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/form-elements.tsx

@@ -1,164 +0,0 @@
-import {
-  ActionCardListForm,
-  CheckboxButtonGroup,
-  NumberFieldElement,
-  RadioButtonGroup,
-  SelectElement,
-  TextFieldElement,
-} from '@graphcommerce/ecommerce-ui'
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { GetStaticProps } from '@graphcommerce/next-ui'
-import {
-  ActionCard,
-  Button,
-  Form,
-  FormActions,
-  FormRow,
-  LayoutHeader,
-  LayoutTitle,
-} from '@graphcommerce/next-ui'
-import { FormAutoSubmit, FormPersist, useForm } from '@graphcommerce/react-hook-form'
-import { Container, List, ListItem, TextField, Typography } from '@mui/material'
-import type { LayoutMinimalProps } from '../../components'
-import { LayoutMinimal } from '../../components'
-import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
-
-type FormValues = {
-  checkboxButtonGroup: string[]
-  selectElement: string
-  textFieldElement: string
-  numberFieldElement: number
-  actionCardList: string
-}
-
-export default function IconsPage() {
-  const form = useForm<FormValues>()
-  const { control, handleSubmit } = form
-
-  const submit = handleSubmit((data) => {
-    console.log(data)
-  })
-
-  return (
-    <>
-      <LayoutHeader />
-
-      <LayoutTitle variant='h1'>Form Elements</LayoutTitle>
-
-      <Container maxWidth='md'>
-        <Form onSubmit={submit} contained background='default'>
-          <FormRow>
-            <CheckboxButtonGroup
-              control={control}
-              label='Checkbox Button Group'
-              name='checkboxButtonGroup'
-              options={[
-                { id: 'one', label: 'One' },
-                { id: 'two', label: 'Two' },
-              ]}
-            />
-          </FormRow>
-
-          <FormRow>
-            <SelectElement
-              control={control}
-              name='selectElement'
-              label='Select Element'
-              options={[
-                { id: 'one', label: 'One' },
-                { id: 'two', label: 'Two' },
-              ]}
-            />
-
-            <SelectElement
-              control={control}
-              name='selectElement'
-              SelectProps={{ native: true }}
-              label='Select Element Native'
-              options={[
-                { id: 'one', label: 'One' },
-                { id: 'two', label: 'Two' },
-              ]}
-            />
-          </FormRow>
-
-          <FormRow>
-            <RadioButtonGroup
-              control={control}
-              name='selectElement'
-              label='Radio Button Group'
-              options={[
-                { id: 'one', label: 'Radio One' },
-                { id: 'two', label: 'Radio Two' },
-              ]}
-            />
-          </FormRow>
-
-          <FormRow>
-            <TextFieldElement control={control} name='textFieldElement' label='TextFieldElement' />
-            <NumberFieldElement
-              defaultValue={0}
-              control={control}
-              name='numberFieldElement'
-              label='Number'
-              variant='standard'
-              inputProps={{ min: 1 }}
-              InputProps={{ disableUnderline: true }}
-            />
-          </FormRow>
-
-          <Typography variant='h6'>Action Card List</Typography>
-
-          <FormRow>
-            <ActionCardListForm
-              control={control}
-              name='actionCardList'
-              layout='grid'
-              items={[
-                { value: 'one', title: 'One' },
-                { value: 'two', title: 'Two' },
-              ]}
-              render={ActionCard}
-            />
-          </FormRow>
-
-          <FormActions>
-            <Button type='submit' variant='pill' color='primary' size='large'>
-              Submit
-            </Button>
-          </FormActions>
-
-          <List>
-            <ListItem>Form is persisted with FormPersist</ListItem>
-            <ListItem>
-              Form is automatically submitted with FormAutoSubmit when the Number field changes
-            </ListItem>
-          </List>
-
-          <FormAutoSubmit control={control} submit={submit} name={['numberFieldElement']} />
-          <FormPersist<FormValues> form={form} name='form-elements' />
-        </Form>
-      </Container>
-    </>
-  )
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-  layoutProps: {},
-}
-IconsPage.pageOptions = pageOptions
-
-type GetPageStaticProps = GetStaticProps<LayoutMinimalProps>
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const conf = client.query({ query: StoreConfigDocument })
-
-  return {
-    props: {
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/icons.tsx

@@ -1,120 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { GetStaticProps, IconSvgProps } from '@graphcommerce/next-ui'
-import {
-  iconPhone,
-  IconSvg,
-  LayoutHeader,
-  LayoutTitle,
-  svgIconStrokeWidth,
-} from '@graphcommerce/next-ui'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Box, Container, Slider, Typography } from '@mui/material'
-import React, { useEffect, useRef, useState } from 'react'
-import type { LayoutMinimalProps } from '../../components'
-import { LayoutMinimal } from '../../components'
-import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
-
-const propVariants: Record<string, IconSvgProps> = {
-  Default: {
-    src: iconPhone,
-  },
-}
-
-export default function IconsPage() {
-  const [size, setSize] = useState<number>(24)
-  const [strokeComputed, setStrokeWidth] = useState<string>()
-  const [fontSize, setFontSize] = useState<string>()
-  const ref = useRef<SVGSVGElement>(null)
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    setStrokeWidth(getComputedStyle(ref.current).strokeWidth)
-    setFontSize(ref.current.style.fontSize)
-  }, [size])
-
-  return (
-    <>
-      <LayoutHeader />
-      <Container>
-        <LayoutTitle variant='h1'>Icons</LayoutTitle>
-
-        <Slider
-          min={5}
-          max={150}
-          // step={12}
-          defaultValue={24}
-          onChange={(_, newValue) => setSize(newValue as number)}
-          aria-label='Default'
-          valueLabelDisplay='auto'
-        />
-
-        <Box>
-          <code style={{ display: 'block' }}>font-size: {fontSize}</code>
-          <code style={{ display: 'block' }}>
-            stroke-width: {svgIconStrokeWidth(28, 148, 1.4, 0.8)}
-          </code>
-          <code style={{ display: 'block' }}>computed: {strokeComputed}</code>
-        </Box>
-
-        {Object.entries(propVariants).map(([propVariant, props]) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={propVariant}>
-            <IconSvg {...props} style={{ fontSize: size }} ref={ref} />
-
-            <Typography variant='h1' sx={{ mt: 8 }}>
-              {propVariant} <IconSvg {...props} />
-            </Typography>
-            <Typography variant='h2' sx={{ mt: 8 }}>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-            <Typography variant='h3' sx={{ mt: 8 }}>
-              {propVariant} <IconSvg {...props} />
-            </Typography>
-            <Typography variant='h4' sx={{ mt: 8 }}>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-            <Typography variant='h5' sx={{ mt: 8 }}>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-            <Typography variant='h6' sx={{ mt: 8 }}>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-            <Typography variant='subtitle1' sx={{ mt: 8 }}>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-            <Typography variant='body1'>
-              {propVariant}
-              <IconSvg {...props} />
-            </Typography>
-          </React.Fragment>
-        ))}
-      </Container>
-    </>
-  )
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-  layoutProps: {},
-}
-IconsPage.pageOptions = pageOptions
-
-type GetPageStaticProps = GetStaticProps<LayoutMinimalProps>
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const conf = client.query({ query: StoreConfigDocument })
-
-  return {
-    props: {
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/minimal-page-shell/[[...url]].tsx

@@ -1,257 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { usePageContext } from '@graphcommerce/framer-next-pages'
-import {
-  iconPerson,
-  LayoutHeader,
-  LayoutTitle,
-  LinkOrButton,
-  NextLink,
-  Stepper,
-} from '@graphcommerce/next-ui'
-import { Container, Divider, List, ListItemButton } from '@mui/material'
-import { m } from 'framer-motion'
-import { useRouter } from 'next/router'
-import React, { useState } from 'react'
-import type { LayoutMinimalProps } from '../../../components'
-import { LayoutMinimal } from '../../../components'
-
-type LayoutDemoProps = {
-  baseUrl: string
-}
-
-export function LayoutDemo(props: LayoutDemoProps) {
-  const { baseUrl } = props
-
-  const queryParams = useRouter().asPath.split('/')
-  const urlParts = queryParams.pop()?.split('-') ?? []
-
-  const title = urlParts.map((s = '') => `${s.charAt(0).toUpperCase() + s.slice(1)}`).join(' ')
-  const [scroll, setScroll] = useState<boolean>(false)
-  const { backSteps } = usePageContext()
-
-  const withPrimary = urlParts.includes('primary')
-  const withStepper = urlParts.includes('stepper')
-  const step = Number(urlParts[urlParts.length - 1])
-  const withIcon = urlParts.includes('icon')
-  const withTitle = urlParts.includes('title')
-
-  const isLeftSidebarDrawer = urlParts.includes('left') || queryParams.includes('left')
-  const isSidebarDrawer =
-    isLeftSidebarDrawer || urlParts.includes('right') || queryParams.includes('right')
-  const isSheet = queryParams.includes('sheet')
-  const isMinimal = urlParts.includes('minimal') || queryParams.includes('minimal-page-shell')
-  const isMinimalPageShellSubheader =
-    urlParts.includes('subheader') || queryParams.includes('minimal-page-shell-subheader')
-  const isFullPage = !isSheet && !isMinimal && !isMinimalPageShellSubheader
-
-  let primaryAction: React.ReactNode
-
-  if (withPrimary)
-    primaryAction = (
-      <LinkOrButton
-        href={`${baseUrl}/with-primary-navigated`}
-        color='secondary'
-        button={{ variant: 'pill' }}
-      >
-        Navigate
-      </LinkOrButton>
-    )
-
-  if (withStepper && step < 3) {
-    primaryAction = (
-      <LinkOrButton
-        href={`${baseUrl}/with-stepper-${step + 1}`}
-        color='secondary'
-        button={{ variant: 'pill' }}
-      >
-        Navigate
-      </LinkOrButton>
-    )
-  }
-
-  let titleComponent = (
-    <LayoutTitle size='small' component='span'>
-      {title}
-    </LayoutTitle>
-  )
-
-  if (withIcon)
-    titleComponent = (
-      <LayoutTitle icon={iconPerson} size='small' component='span'>
-        {title}
-      </LayoutTitle>
-    )
-
-  return (
-    <>
-      <LayoutTitle>Layout demo</LayoutTitle>
-      <LayoutHeader
-        primary={primaryAction}
-        divider={
-          withStepper ? (
-            <Container maxWidth={false}>
-              <Stepper steps={3} currentStep={step} />
-            </Container>
-          ) : undefined
-        }
-        floatingMd={isFullPage}
-        noAlign={isSheet}
-        switchPoint={0}
-      >
-        {isMinimal || isSheet || withIcon || withTitle ? titleComponent : undefined}
-      </LayoutHeader>
-
-      <Container maxWidth='md' style={{ paddingTop: '50px' }}>
-        {/* <LayoutTitle icon={withIcon ? iconPerson : undefined}>{title}</LayoutTitle> */}
-
-        {/* {isSheet && !primaryAction && (
-        <Typography variant='body1' gutterBottom>
-          When opening a sheet a close icon is shown at the top right.
-        </Typography>
-      )}
-
-      {primaryAction && backSteps === 0 && (
-        <Typography variant='body1' gutterBottom>
-          When a primary action is present, the close button moves to the left.
-        </Typography>
-      )}
-
-      {backSteps > 0 && (
-        <Typography variant='body1' gutterBottom>
-          When navigated inside the overlay, a backbutton is shown on in the top left.
-        </Typography>
-      )}
-
-      {primaryAction && backSteps > 0 && (
-        <Typography variant='body1' gutterBottom>
-          With a primary action and back button, there is no room for the close button. The close
-          button gets ommited
-        </Typography>
-      )} */}
-
-        <Divider />
-
-        <List>
-          {primaryAction || backSteps === 0 ? (
-            <ListItemButton
-              href={`${baseUrl}/navigated`}
-              component={NextLink}
-              style={{ paddingLeft: 0, paddingRight: 0 }}
-            >
-              Navigate
-            </ListItemButton>
-          ) : null}
-
-          <ListItemButton
-            href={`${baseUrl}/with-primary`}
-            component={NextLink}
-            disabled={!!primaryAction}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            With primary action
-          </ListItemButton>
-
-          <ListItemButton
-            href={`${baseUrl}/with-stepper-1`}
-            component={NextLink}
-            disabled={withStepper}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            With stepper
-          </ListItemButton>
-
-          <ListItemButton
-            href={`${baseUrl}/with-icon`}
-            component={NextLink}
-            disabled={withIcon}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            With icon
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test/sheet?sizeMd=full&sizeSm=full&justifyMd=stretch&justifySm=stretch&variantMd=bottom&variantSm=bottom'
-            component={NextLink}
-            disabled={isSheet && !isSidebarDrawer}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Bottom sheet
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test/sheet?sizeMd=full&sizeSm=full&justifyMd=start&justifySm=start&variantMd=left&variantSm=left'
-            component={NextLink}
-            disabled={isLeftSidebarDrawer}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Left side sheet
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test/sheet?sizeMd=full&sizeSm=full&justifyMd=start&justifySm=start&variantMd=right&variantSm=right'
-            component={NextLink}
-            disabled={isSidebarDrawer && !isLeftSidebarDrawer}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Right side sheet
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test/minimal-page-shell'
-            component={NextLink}
-            disabled={isMinimal}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Minimal Page Shell
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test'
-            component={NextLink}
-            disabled={isFullPage}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Full Page Shell
-          </ListItemButton>
-
-          <ListItemButton
-            href='/test/with-title'
-            component={NextLink}
-            disabled={withTitle}
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            Full Page Shell + Title
-          </ListItemButton>
-
-          <ListItemButton
-            onClick={() => setScroll(!scroll)}
-            color='secondary'
-            style={{ paddingLeft: 0, paddingRight: 0 }}
-          >
-            {scroll ? 'Make unscrollable' : 'Make scrollable'}
-          </ListItemButton>
-        </List>
-
-        <div>
-          <m.div
-            animate={{ height: scroll ? 2000 : 1 }}
-            initial={false}
-            transition={{ type: 'tween' }}
-            style={{ width: '20px', background: '#dedede' }}
-          />
-        </div>
-      </Container>
-    </>
-  )
-}
-
-function MinimalPageShellDemo() {
-  return <LayoutDemo baseUrl='/test/minimal-page-shell' />
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-}
-MinimalPageShellDemo.pageOptions = pageOptions
-
-export default MinimalPageShellDemo

package/copy/pages/test/number-inputs.tsx

@@ -1,106 +0,0 @@
-import { NumberFieldElement, useForm } from '@graphcommerce/ecommerce-ui'
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { GetStaticProps, TextInputNumberProps } from '@graphcommerce/next-ui'
-import { LayoutHeader, LayoutTitle, responsiveVal, TextInputNumber } from '@graphcommerce/next-ui'
-import { Box, Container, Divider, styled, Typography } from '@mui/material'
-import React from 'react'
-import type { LayoutMinimalProps } from '../../components'
-import { LayoutMinimal } from '../../components'
-import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
-
-const variants = ['outlined', 'standard'] as const
-const sizes = ['small', 'medium'] as const
-const colors = [undefined, 'primary', 'secondary', 'error'] as const
-
-const Grid = styled('div')(() => ({
-  marginTop: `${5 * 8}px`,
-  marginBottom: `${5 * 8}px`,
-  display: 'grid',
-  gridTemplateColumns: 'repeat(4, minmax(180px, 1fr))',
-  gap: responsiveVal(20, 40),
-}))
-
-export default function NumberInputsPage(props: TextInputNumberProps) {
-  const { control } = useForm()
-  return (
-    <>
-      <LayoutHeader />
-      <Container>
-        <LayoutTitle variant='h1'>NumberFieldElement inputs</LayoutTitle>
-        {variants.map((variant) => (
-          <React.Fragment key={variant}>
-            <Grid>
-              {colors.map((color) => (
-                <Box>
-                  <Box
-                    sx={{
-                      backgroundColor: `${color}.main`,
-                      width: '1em',
-                      height: '1em',
-                      display: 'inline-block',
-                    }}
-                  />
-                  <p />
-                  <Typography
-                    key={color}
-                    variant='h6'
-                    sx={{
-                      alignItems: 'center',
-                      columnGap: 1,
-                    }}
-                  >
-                    Input {variant} {color}
-                  </Typography>
-                </Box>
-              ))}
-
-              {sizes.map((size) => (
-                <React.Fragment key={size}>
-                  {colors.map((color) => (
-                    <div key={color}>
-                      <NumberFieldElement
-                        variant={variant}
-                        size={size}
-                        color={color}
-                        {...props}
-                        inputProps={{ min: 1 }}
-                        defaultValue={1}
-                        control={control}
-                        InputProps={{ disableUnderline: true }}
-                        name='test'
-                        sx={{
-                          marginBottom: '10px',
-                        }}
-                      />
-                    </div>
-                  ))}
-                </React.Fragment>
-              ))}
-            </Grid>
-            <Divider />
-          </React.Fragment>
-        ))}
-      </Container>
-    </>
-  )
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-  layoutProps: {},
-}
-NumberInputsPage.pageOptions = pageOptions
-
-type GetPageStaticProps = GetStaticProps<LayoutMinimalProps>
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const conf = client.query({ query: StoreConfigDocument })
-
-  return {
-    props: {
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/sheet.tsx

@@ -1,128 +0,0 @@
-import { FormAutoSubmit, useForm } from '@graphcommerce/ecommerce-ui'
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { LayoutOverlayHeader, LayoutTitle, responsiveVal } from '@graphcommerce/next-ui'
-import type { LayoutOverlayState } from '@graphcommerce/next-ui/LayoutOverlay/test/LayoutOverlayDemo'
-import {
-  LayoutOverlayDemo,
-  useLayoutState,
-} from '@graphcommerce/next-ui/LayoutOverlay/test/LayoutOverlayDemo'
-import { capitalize, Container, Hidden, ListItemButton, Typography } from '@mui/material'
-import { m } from 'framer-motion'
-import { useState } from 'react'
-
-type Size = 'Sm' | 'Md'
-
-const sizes: Size[] = ['Sm', 'Md']
-
-function SheetDemo() {
-  const [layout, setLayout] = useLayoutState()
-
-  const form = useForm<LayoutOverlayState>({ defaultValues: layout, mode: 'onChange' })
-  const { register } = form
-  const [scroll, setScroll] = useState<boolean>(false)
-
-  const { variantMd, variantSm, justifyMd, justifySm, sizeMd, sizeSm } = layout
-
-  const submit = form.handleSubmit(setLayout)
-
-  return (
-    <>
-      <FormAutoSubmit control={form.control} submit={submit} wait={0} />
-      <LayoutOverlayHeader>
-        <LayoutTitle size='small'>
-          <Hidden mdDown>
-            Overlay Md {variantMd} {justifyMd} {sizeMd}
-          </Hidden>
-          <Hidden smUp>
-            Overlay Sm {variantSm} {justifySm} {sizeSm}
-          </Hidden>
-        </LayoutTitle>
-      </LayoutOverlayHeader>
-
-      <LayoutTitle>
-        <Hidden mdDown>
-          Overlay Md {variantMd} {justifyMd} {sizeMd}
-        </Hidden>
-        <Hidden smUp>
-          Overlay Sm {variantSm} {justifySm} {sizeSm}
-        </Hidden>
-      </LayoutTitle>
-      <Container maxWidth={false} sx={{ minWidth: responsiveVal(250, 500) }}>
-        <form style={{ paddingTop: '100px' }} onSubmit={submit}>
-          {sizes.map((size) => (
-            <div key={size}>
-              <Typography variant='subtitle1'>{size}</Typography>
-
-              <input type='text' value='should be selectable' readOnly />
-
-              <div>
-                Variant:
-                {(['left', 'bottom', 'right'] as const).map((value) => {
-                  const name: `variant${Size}` = `variant${size}`
-                  const id = `${name}-${value}`
-                  return (
-                    <label key={id} htmlFor={id}>
-                      <input {...register(name)} id={id} type='radio' value={value} />
-                      {capitalize(value)}
-                    </label>
-                  )
-                })}
-              </div>
-
-              <div>
-                Size:
-                {(['floating', 'minimal', 'full'] as const).map((value) => {
-                  const name: `size${Size}` = `size${size}`
-                  const id = `${name}-${value}`
-                  return (
-                    <label key={id} htmlFor={id}>
-                      <input {...register(name)} id={id} type='radio' value={value} />
-                      {capitalize(value)}
-                    </label>
-                  )
-                })}
-              </div>
-
-              <div>
-                Justify:
-                {(['start', 'end', 'center', 'stretch'] as const).map((value) => {
-                  const name: `justify${Size}` = `justify${size}`
-                  const id = `${name}-${value}`
-                  return (
-                    <label key={id} htmlFor={id}>
-                      <input {...register(name)} id={id} type='radio' value={value} />
-                      {capitalize(value)}
-                    </label>
-                  )
-                })}
-              </div>
-            </div>
-          ))}
-        </form>
-
-        <ListItemButton
-          onClick={() => setScroll(!scroll)}
-          color='secondary'
-          style={{ paddingLeft: 0, paddingRight: 0 }}
-        >
-          {scroll ? 'Make unscrollable' : 'Make scrollable'}
-        </ListItemButton>
-        <div>
-          <m.div
-            animate={{ height: scroll ? 2000 : 1 }}
-            initial={false}
-            transition={{ type: 'tween' }}
-            style={{ width: '20px', background: '#dedede' }}
-          />
-        </div>
-      </Container>
-    </>
-  )
-}
-
-const pageOptions: PageOptions = {
-  overlayGroup: 'test',
-  Layout: LayoutOverlayDemo,
-}
-SheetDemo.pageOptions = pageOptions
-export default SheetDemo

package/copy/pages/test/slider.tsx

@@ -1,108 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import type { ProductListQuery } from '@graphcommerce/magento-product'
-import { ProductListDocument } from '@graphcommerce/magento-product'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import type { GetStaticProps } from '@graphcommerce/next-ui'
-import { LayoutHeader, LayoutTitle, SidebarGallery } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import type { LayoutNavigationProps } from '../../components'
-import { LayoutNavigation } from '../../components'
-import { graphqlSharedClient, graphqlSsrClient } from '../../lib/graphql/graphqlSsrClient'
-
-type Props = ProductListQuery
-type GetPageStaticProps = GetStaticProps<LayoutNavigationProps, Props>
-
-function TestSlider({ products }: Props) {
-  if (!products?.items?.length) return null
-  return (
-    <>
-      <LayoutHeader>
-        <LayoutTitle size='small' component='span'>
-          Product title
-        </LayoutTitle>
-      </LayoutHeader>
-
-      <SidebarGallery
-        sidebar={
-          <>
-            <LayoutTitle variant='h2' gutterTop={false}>
-              Product Title
-            </LayoutTitle>
-            <ul>
-              <li>Some product details</li>
-              <li>Or other information</li>
-              <li>Can be displayed here</li>
-            </ul>
-          </>
-        }
-        images={
-          products?.items?.map((item) => ({
-            src: item?.small_image?.url ?? '',
-            width: 1532,
-            height: 1678,
-          })) ?? []
-        }
-      />
-
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-
-      {/* <Container>
-      <m.div layout>
-        <Typography variant='h2' style={{ textAlign: 'center' }}>
-          Multi item slider
-        </Typography>
-      </m.div>
-      <Multi />
-
-      <m.div layout>
-        <Typography variant='h2' style={{ textAlign: 'center' }}>
-          Single item Slider
-        </Typography>
-      </m.div>
-      <Single />
-    </Container> */}
-    </>
-  )
-}
-
-TestSlider.pageOptions = {
-  Layout: LayoutNavigation,
-} as PageOptions
-export default TestSlider
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const staticClient = graphqlSsrClient(context)
-
-  const conf = client.query({ query: StoreConfigDocument })
-
-  // todo(paales): Remove when https://github.com/Urigo/graphql-mesh/issues/1257 is resolved
-  const productList = staticClient.query({
-    query: ProductListDocument,
-    variables: { onlyItems: true, pageSize: 8, filters: { category_uid: { eq: 'MTAy' } } },
-  })
-
-  return {
-    props: {
-      ...(await productList).data,
-      up: { href: '/', title: i18n._(/* i18n */ 'Home') },
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/typography.tsx

@@ -1,136 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { cacheFirst } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { LayoutHeader, LayoutTitle } from '@graphcommerce/next-ui'
-import type { GetStaticProps } from '@graphcommerce/next-ui/Page/types'
-import { i18n } from '@lingui/core'
-import { Container, Typography } from '@mui/material'
-import { useEffect, useRef, useState } from 'react'
-import type { LayoutMinimalProps } from '../../components'
-import { LayoutDocument, LayoutMinimal } from '../../components'
-import { graphqlSharedClient, graphqlSsrClient } from '../../lib/graphql/graphqlSsrClient'
-
-type Props = Record<string, unknown>
-type GetPageStaticProps = GetStaticProps<LayoutMinimalProps, Props>
-
-function useRenderedSize() {
-  const [size, setSize] = useState<string>()
-  const ref = useRef<HTMLElement>(null)
-
-  useEffect(() => {
-    if (!ref.current?.parentElement) return () => {}
-    const ro = new ResizeObserver(([entry]) => {
-      setSize(getComputedStyle(entry.target).fontSize)
-    })
-    ro.observe(ref.current.parentElement)
-    return () => ro.disconnect()
-  }, [])
-
-  return <span ref={ref}>{size}</span>
-}
-
-function TypographyOverview() {
-  return (
-    <>
-      <LayoutHeader>
-        <LayoutTitle size='small'>Typography</LayoutTitle>
-      </LayoutHeader>
-
-      <LayoutTitle>Typography</LayoutTitle>
-
-      <Container>
-        <Typography variant='h1' display='block' gutterBottom>
-          Headline 1 {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='h2' display='block' gutterBottom>
-          Headline 2 {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='h3' display='block' gutterBottom>
-          Headline 3 {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='h4' display='block' paragraph gutterBottom>
-          Headline 4 — Maecenas efficitur velit a metus.
-          {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='h5' display='block' gutterBottom>
-          Headline 5 — Morbi posuere nunc diam {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='h6' display='block' gutterBottom>
-          Headline 6 — Ut luctus mi ante {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='subtitle1' display='block' paragraph gutterBottom>
-          Subtitle 1 — In dictum velit quis lorem dignissim volutpat. {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='body1' display='block' paragraph gutterBottom>
-          Body1 — Maecenas efficitur velit a metus feugiat egestas. Donec sit amet maximus sapien,
-          in malesuada mi. Duis eget finibus urna, vitae suscipit felis. Duis aliquet tortor a
-          turpis euismod gravida. Nunc eu hendrerit leo. Integer dapibus dapibus augue, sit amet
-          semper lacus. Sed sed enim et quam tincidunt sollicitudin. Curabitur eget dignissim lorem.
-          Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer maximus ex at
-          placerat egestas. Vivamus vehicula nisl urna, nec congue nisl ultricies nec.{' '}
-          {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='subtitle2' display='block' gutterBottom>
-          Subtitle 2 — Nunc eu hendrerit leo {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='body2' display='block' paragraph gutterBottom>
-          Body2 — Suspendisse nec consectetur massa. Proin mollis ante lorem, a lacinia orci
-          pellentesque ut. Donec porta fringilla commodo. In hac habitasse platea dictumst. Donec
-          quis elementum mauris. Cras rutrum lectus et magna convallis, vitae dignissim elit
-          euismod. Aliquam leo felis, viverra eget auctor sed, dictum vitae metus. Nullam tincidunt
-          ultricies convallis. Donec pretium, dolor sed dapibus gravida, magna metus posuere sem,
-          nec tincidunt erat eros vel erat. Ut eu quam sit amet magna condimentum aliquet. Nulla
-          facilisis est nec quam mollis porta. Nullam mattis pulvinar purus eu gravida. Nullam
-          interdum malesuada sodales. Maecenas aliquam pulvinar libero non consectetur.{' '}
-          {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='button' display='block' gutterBottom>
-          Button: Sed laoreet {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='caption' display='block' gutterBottom>
-          Caption: vitae enim quis cursus. {useRenderedSize()}
-        </Typography>
-
-        <Typography variant='overline' display='block' gutterBottom>
-          Overline: Nunc scelerisque at massa nec imperdiet {useRenderedSize()}
-        </Typography>
-      </Container>
-    </>
-  )
-}
-
-TypographyOverview.pageOptions = {
-  Layout: LayoutMinimal,
-} as PageOptions
-
-export default TypographyOverview
-
-export const getStaticProps: GetPageStaticProps = async (context) => {
-  const client = graphqlSharedClient(context)
-  const staticClient = graphqlSsrClient(context)
-
-  const conf = client.query({ query: StoreConfigDocument })
-  const layout = staticClient.query({
-    query: LayoutDocument,
-    fetchPolicy: cacheFirst(staticClient),
-  })
-
-  return {
-    props: {
-      ...(await layout).data,
-      up: { href: '/', title: i18n._(/* i18n */ 'Home') },
-      apolloState: await conf.then(() => client.cache.extract()),
-    },
-  }
-}

package/copy/pages/test/usebacklink/[[...url]].tsx

@@ -1,32 +0,0 @@
-import type { PageOptions } from '@graphcommerce/framer-next-pages'
-import { useHistoryLink } from '@graphcommerce/framer-next-pages'
-import { Link } from '@mui/material'
-import type { LayoutMinimalProps } from '../../../components'
-import { LayoutMinimal } from '../../../components'
-
-function BackLinkDemo() {
-  const { href, onClick } = useHistoryLink({ href: '/test/usebacklink/cart' })
-  const { href: hrefb, onClick: onClickB } = useHistoryLink({ href: '/test/usebacklink/shipping' })
-
-  return (
-    <>
-      <div>
-        <Link href={href} onClick={onClick} color='primary' underline='hover'>
-          Cart
-        </Link>
-      </div>
-      <div>
-        <Link href={hrefb} color='primary' onClick={onClickB} underline='hover'>
-          Shipping
-        </Link>
-      </div>
-    </>
-  )
-}
-
-const pageOptions: PageOptions<LayoutMinimalProps> = {
-  Layout: LayoutMinimal,
-}
-BackLinkDemo.pageOptions = pageOptions
-
-export default BackLinkDemo