Moved all test routes files to the demo package so they are out of th…

…e example directory.

.changeset/heavy-guests-mix.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/demo-magento-graphcommerce': patch
+---
+
+Moved all test routes files to the demo package so they are out of the example directory.

examples/magento-graphcms/.gitignore

@@ -33,4 +33,14 @@ yarn-error.log*
 
 # managed by: graphcommerce
 pages/.well-known/assetlinks.json.tsx
+pages/test/\[\[...url\]\].tsx
+pages/test/buttons.tsx
+pages/test/form-elements.tsx
+pages/test/icons.tsx
+pages/test/minimal-page-shell/\[\[...url\]\].tsx
+pages/test/number-inputs.tsx
+pages/test/sheet.tsx
+pages/test/slider.tsx
+pages/test/typography.tsx
+pages/test/usebacklink/\[\[...url\]\].tsx
 # end managed by: graphcommerce

examples/magento-graphcms/pages/test/[[...url]].tsx → packages/demo-magento-graphcommerce/copy/pages/test/[[...url]].tsx

@@ -1,12 +1,14 @@
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { cacheFirst } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { GetStaticProps, LayoutTitle } from '@graphcommerce/next-ui'
+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 { GetStaticPaths } from 'next'
-import { LayoutDocument, LayoutNavigation, LayoutNavigationProps } from '../../components'
-import { graphqlSsrClient, graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
+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 }

examples/magento-graphcms/pages/test/buttons.tsx → packages/demo-magento-graphcommerce/copy/pages/test/buttons.tsx

@@ -1,19 +1,19 @@
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import type { ButtonProps, GetStaticProps } from '@graphcommerce/next-ui'
 import {
-  LayoutTitle,
-  responsiveVal,
-  IconSvg,
-  iconChevronRight,
-  iconBox,
-  GetStaticProps,
   Button,
-  ButtonProps,
+  iconBox,
+  iconChevronRight,
+  IconSvg,
   LayoutHeader,
+  LayoutTitle,
+  responsiveVal,
 } from '@graphcommerce/next-ui'
-import { Box, Container, Typography, Divider, styled } from '@mui/material'
+import { Box, Container, Divider, styled, Typography } from '@mui/material'
 import React, { useState } from 'react'
-import { LayoutMinimal, LayoutMinimalProps } from '../../components'
+import type { LayoutMinimalProps } from '../../components'
+import { LayoutMinimal } from '../../components'
 import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
 
 const variants = ['text', 'outlined', 'contained', 'pill', 'inline'] as const

packages/demo-magento-graphcommerce/copy/pages/test/form-elements.tsx

@@ -0,0 +1,164 @@
+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()),
+    },
+  }
+}

examples/magento-graphcms/pages/test/icons.tsx → packages/demo-magento-graphcommerce/copy/pages/test/icons.tsx

@@ -1,18 +1,18 @@
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import type { GetStaticProps, IconSvgProps } from '@graphcommerce/next-ui'
 import {
-  LayoutTitle,
-  IconSvg,
-  GetStaticProps,
-  IconSvgProps,
-  svgIconStrokeWidth,
   iconPhone,
+  IconSvg,
   LayoutHeader,
+  LayoutTitle,
+  svgIconStrokeWidth,
 } from '@graphcommerce/next-ui'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Container, Typography, Slider, Box } from '@mui/material'
+import { Box, Container, Slider, Typography } from '@mui/material'
 import React, { useEffect, useRef, useState } from 'react'
-import { LayoutMinimal, LayoutMinimalProps } from '../../components'
+import type { LayoutMinimalProps } from '../../components'
+import { LayoutMinimal } from '../../components'
 import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
 
 const propVariants: Record<string, IconSvgProps> = {

examples/magento-graphcms/pages/test/minimal-page-shell/[[...url]].tsx → packages/demo-magento-graphcommerce/copy/pages/test/minimal-page-shell/[[...url]].tsx

@@ -1,17 +1,19 @@
-import { PageOptions, usePageContext } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
+import { usePageContext } from '@graphcommerce/framer-next-pages'
 import {
-  LayoutHeader,
   iconPerson,
-  Stepper,
+  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 { LayoutMinimal, LayoutMinimalProps } from '../../../components'
+import type { LayoutMinimalProps } from '../../../components'
+import { LayoutMinimal } from '../../../components'
 
 type LayoutDemoProps = {
   baseUrl: string

examples/magento-graphcms/pages/test/number-inputs.tsx → packages/demo-magento-graphcommerce/copy/pages/test/number-inputs.tsx

@@ -1,17 +1,12 @@
 import { NumberFieldElement, useForm } from '@graphcommerce/ecommerce-ui'
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+import type { PageOptions } from '@graphcommerce/framer-next-pages'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import {
-  LayoutTitle,
-  responsiveVal,
-  GetStaticProps,
-  TextInputNumber,
-  TextInputNumberProps,
-  LayoutHeader,
-} from '@graphcommerce/next-ui'
-import { Box, Container, Typography, Divider, styled } from '@mui/material'
+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 { LayoutMinimal, LayoutMinimalProps } from '../../components'
+import type { LayoutMinimalProps } from '../../components'
+import { LayoutMinimal } from '../../components'
 import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
 
 const variants = ['outlined', 'standard'] as const
@@ -31,63 +26,6 @@ export default function NumberInputsPage(props: TextInputNumberProps) {
   return (
     <>
       <LayoutHeader />
-      <Container>
-        <LayoutTitle variant='h1'>TextInputNumber inputs</LayoutTitle>
-
-        {variants.map((variant) => (
-          <React.Fragment key={variant}>
-            {/* <Typography variant='h3'>Variant: {variant}</Typography> */}
-            <Grid sx={{ overflow: { xs: 'scroll', md: 'auto' } }}>
-              {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}>
-                      <TextInputNumber
-                        // label='Quantity'
-                        color={color}
-                        defaultValue={0}
-                        variant={variant}
-                        size={size}
-                        {...props}
-                        InputProps={{ disableUnderline: true }}
-                        sx={{
-                          marginBottom: '10px',
-                        }}
-                      />
-                    </div>
-                  ))}
-                </React.Fragment>
-              ))}
-            </Grid>
-            <Divider />
-          </React.Fragment>
-        ))}
-      </Container>
       <Container>
         <LayoutTitle variant='h1'>NumberFieldElement inputs</LayoutTitle>
         {variants.map((variant) => (

examples/magento-graphcms/pages/test/sheet.tsx → packages/demo-magento-graphcommerce/copy/pages/test/sheet.tsx

@@ -1,9 +1,9 @@
 import { FormAutoSubmit, useForm } from '@graphcommerce/ecommerce-ui'
-import { PageOptions } from '@graphcommerce/framer-next-pages'
+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,
-  LayoutOverlayState,
   useLayoutState,
 } from '@graphcommerce/next-ui/LayoutOverlay/test/LayoutOverlayDemo'
 import { capitalize, Container, Hidden, ListItemButton, Typography } from '@mui/material'