@graphcommerce/ecommerce-ui 7.1.0-canary.8 → 8.0.0-canary.100

package/CHANGELOG.md

@@ -1,5 +1,194 @@
 # @graphcommerce/ecommerce-ui
 
+## 8.0.0-canary.100
+
+## 8.0.0-canary.99
+
+## 8.0.0-canary.98
+
+## 8.0.0-canary.97
+
+## 8.0.0-canary.96
+
+## 8.0.0-canary.95
+
+## 8.0.0-canary.94
+
+## 8.0.0-canary.93
+
+## 8.0.0-canary.92
+
+## 8.0.0-canary.91
+
+## 8.0.0-canary.90
+
+## 8.0.0-canary.89
+
+## 8.0.0-canary.88
+
+## 8.0.0-canary.87
+
+## 8.0.0-canary.86
+
+## 8.0.0-canary.85
+
+## 8.0.0-canary.84
+
+## 8.0.0-canary.83
+
+## 8.0.0-canary.82
+
+## 8.0.0-canary.81
+
+## 8.0.0-canary.80
+
+## 8.0.0-canary.79
+
+## 8.0.0-canary.78
+
+## 8.0.0-canary.77
+
+### Patch Changes
+
+- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.0-canary.76
+
+## 8.0.0-canary.75
+
+## 8.0.0-canary.74
+
+## 8.0.0-canary.73
+
+## 8.0.0-canary.72
+
+## 8.0.0-canary.71
+
+## 8.0.0-canary.70
+
+## 8.0.0-canary.69
+
+## 7.1.0-canary.68
+
+## 7.1.0-canary.67
+
+## 7.1.0-canary.66
+
+## 7.1.0-canary.65
+
+## 7.1.0-canary.64
+
+## 7.1.0-canary.63
+
+## 7.1.0-canary.62
+
+## 7.1.0-canary.61
+
+## 7.1.0-canary.60
+
+## 7.1.0-canary.59
+
+## 7.1.0-canary.58
+
+## 7.1.0-canary.57
+
+## 7.1.0-canary.56
+
+## 7.1.0-canary.55
+
+## 7.1.0-canary.54
+
+## 7.1.0-canary.53
+
+## 7.1.0-canary.52
+
+## 7.1.0-canary.51
+
+## 7.1.0-canary.50
+
+## 7.1.0-canary.49
+
+## 7.1.0-canary.48
+
+## 7.1.0-canary.47
+
+### Minor Changes
+
+- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3eaf`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.46
+
+## 7.1.0-canary.45
+
+## 7.1.0-canary.38
+
+### Minor Changes
+
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e426`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the ActionCardLayout ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.37
+
+## 7.1.0-canary.36
+
+## 7.1.0-canary.35
+
+## 7.1.0-canary.34
+
+## 7.1.0-canary.33
+
+## 7.1.0-canary.32
+
+## 7.1.0-canary.31
+
+## 7.1.0-canary.30
+
+## 7.1.0-canary.29
+
+## 7.1.0-canary.28
+
+### Minor Changes
+
+- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a72`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.27
+
+## 7.1.0-canary.26
+
+## 7.1.0-canary.25
+
+## 7.1.0-canary.24
+
+## 7.1.0-canary.23
+
+## 7.1.0-canary.22
+
+## 7.1.0-canary.21
+
+## 7.1.0-canary.20
+
+## 7.1.0-canary.19
+
+## 7.1.0-canary.18
+
+## 7.1.0-canary.17
+
+## 7.1.0-canary.16
+
+## 7.1.0-canary.15
+
+## 7.1.0-canary.14
+
+## 7.1.0-canary.13
+
+## 7.1.0-canary.12
+
+## 7.1.0-canary.11
+
+## 7.1.0-canary.10
+
+## 7.1.0-canary.9
+
 ## 7.1.0-canary.8
 
 ## 7.0.2-canary.7
@@ -954,31 +1143,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { Trans, t } from "@lingui/macro";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    )
+    );
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
-  import { i18n } from '@lingui/core'
+  import { Trans } from "@lingui/react";
+  import { i18n } from "@lingui/core";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
       </div>
-    )
+    );
   }
   ```
 

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,6 +1,8 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import { Trans } from '@lingui/react'
 import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import { maskNetworkError } from './maskNetworkError'
 
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
@@ -46,7 +48,7 @@ export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
                   key='networkError'
                 >
                   <Alert severity='error' {...networkErrorAlertProps}>
-                    Network Error: {error.networkError.message}
+                    {maskNetworkError(error.networkError)}
                   </Alert>
                 </Box>
               </Box>

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -3,6 +3,7 @@ import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
   error: ApolloError
@@ -19,14 +20,14 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = error?.graphQLErrors?.length ?? +(error?.networkError ? 1 : 0)
+  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors[0].message ?? error?.networkError?.message}
+        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,5 +1,6 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { ErrorSnackbar, ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
   error?: ApolloError
@@ -14,7 +15,7 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
         {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {error.networkError && <>Network Error: {error.networkError.message}</>}
+        {maskNetworkError(error.networkError)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -0,0 +1,26 @@
+import { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import { Trans } from '@lingui/react'
+
+function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
+  return 'name' in (error as ServerError)
+}
+
+function isServerParseError(
+  error: Error | ServerParseError | ServerError | null,
+): error is ServerParseError {
+  return 'bodyText' in (error as ServerParseError)
+}
+
+export function maskNetworkError(networkError: Error | ServerParseError | ServerError | null) {
+  if (!networkError) return null
+
+  if (isServerParseError(networkError) || isServerError(networkError)) {
+    return <Trans id='Something went wrong on the server, please try again later.' />
+  }
+
+  if (globalThis.navigator && !globalThis.navigator?.onLine) {
+    return <Trans id='It appears you are offline, please try again later.' />
+  }
+
+  return <Trans id='Something went wrong' />
+}

package/components/FormComponents/NumberFieldElement.tsx

@@ -7,15 +7,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import {
-  IconButton,
-  IconButtonProps,
-  SxProps,
-  Theme,
-  TextField,
-  TextFieldProps,
-  Fab,
-} from '@mui/material'
+import { IconButtonProps, SxProps, Theme, TextField, TextFieldProps, Fab } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -88,6 +80,9 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
                 width: responsiveVal(90, 120),
               },
               {
+                '& input[type=number]': {
+                  MozAppearance: 'textfield',
+                },
                 '& .MuiOutlinedInput-root': {
                   px: '2px',
                   display: 'grid',
@@ -151,8 +146,8 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
               ),
             }}
             inputProps={{
-              ...inputProps,
               'aria-label': i18n._(/* i18n */ 'Number'),
+              ...inputProps,
               className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
               sx: {
                 typography: 'body1',

package/components/WaitForQueries/WaitForQueries.tsx

@@ -3,18 +3,21 @@ import React, { startTransition, useEffect, useState } from 'react'
 
 export type WaitForQueriesProps = {
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
 }
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
 export const WaitForQueries = (props: WaitForQueriesProps) => {
-  const { waitFor, fallback, children } = props
+  const { waitFor, fallback, children, noSsr = false } = props
 
   // Make sure the first render is always the same as the server.
   // Make sure we we use startTransition to make sure we don't get into trouble with Suspense.
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => startTransition(() => setMounted(true)), [])
+  const [mounted, setMounted] = useState(!noSsr)
+  useEffect(() => {
+    if (noSsr) startTransition(() => setMounted(true))
+  }, [noSsr])
 
   // We are done when all queries either have data or an error.
   const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every((res) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.8",
+  "version": "8.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,23 +11,19 @@
       "project": "./tsconfig.json"
     }
   },
-  "dependencies": {
-    "@graphcommerce/graphql": "7.1.0-canary.8",
-    "@graphcommerce/next-ui": "7.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "7.1.0-canary.8"
-  },
-  "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.8"
-  },
   "peerDependencies": {
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.100",
+    "@graphcommerce/graphql": "^8.0.0-canary.100",
+    "@graphcommerce/next-ui": "^8.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.100",
+    "@graphcommerce/react-hook-form": "^8.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.100",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
+    "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
-    "next": "^13.2.0",
+    "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }