@graphcommerce/ecommerce-ui 10.0.0-canary.68 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,129 @@
 # @graphcommerce/ecommerce-ui
 
+## 10.0.0
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [`026114e`](https://github.com/graphcommerce-org/graphcommerce/commit/026114ece325d8f675ba8820c6b63345e48532fa) - Sovle issue where showValid would be forwarded to the textField element ([@paales](https://github.com/paales))
+
+- [#2530](https://github.com/graphcommerce-org/graphcommerce/pull/2530) [`fe48501`](https://github.com/graphcommerce-org/graphcommerce/commit/fe4850106abebe1fe113e08e38623ebfd5481c1d) - Make sure the increment step of the NumberInputField rounds to the nearest step. ([@paales](https://github.com/paales))
+
+- [#2538](https://github.com/graphcommerce-org/graphcommerce/pull/2538) [`9b96d69`](https://github.com/graphcommerce-org/graphcommerce/commit/9b96d69d2aba2779e1875ffb068096087582f10d) - fix issue where stepper could have values such as 8,10000000000 inste… ([@FrankHarland](https://github.com/FrankHarland))
+
+- [`ea7af54`](https://github.com/graphcommerce-org/graphcommerce/commit/ea7af54048506228b6fde04d3bba764358b7f7e0) - Round step increment also max to two decimals as we might else get very long numbers ([@paales](https://github.com/paales))
+
+- [`5a9adde`](https://github.com/graphcommerce-org/graphcommerce/commit/5a9addee16aa9dc8f4ce6f8fa4b3fe6c11b90d8f) - FormElements now are now disabled when the whole form is disabled. ([@paales](https://github.com/paales))
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`0af3466`](https://github.com/graphcommerce-org/graphcommerce/commit/0af34663f882ad9906dc13ae6c835c158598b945) - Fix NumberFieldElement plus button decreasing the number instead of increasing ([@paales](https://github.com/paales))
+
+- [#2541](https://github.com/graphcommerce-org/graphcommerce/pull/2541) [`09e67d6`](https://github.com/graphcommerce-org/graphcommerce/commit/09e67d6cb266ed4714a209ef90e49c3963962604) - Fix issue where setting required on the controller caused the form to submit without variables ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2470](https://github.com/graphcommerce-org/graphcommerce/pull/2470) [`910e6aa`](https://github.com/graphcommerce-org/graphcommerce/commit/910e6aab024a925bb042cf17968b2ab826f97d88) - Refactor the FormComponents for better TypeScript checking performance. ([@paales](https://github.com/paales))
+
+- [#2493](https://github.com/graphcommerce-org/graphcommerce/pull/2493) [`2d22429`](https://github.com/graphcommerce-org/graphcommerce/commit/2d2242932b7e07fa970c1dae1685487832f864d7) - Always log the networkError during development to the console. ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`7c7d6e4`](https://github.com/graphcommerce-org/graphcommerce/commit/7c7d6e4976d263f4139ce1de2caf47e7f49a2bf8) - Solve issue where an individual item in the ActionCardListForm couldn't be disabed. Resulting in configurable options on the product page to be selectable while they shouldn't be. ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+### Patch Changes
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`0af3466`](https://github.com/graphcommerce-org/graphcommerce/commit/0af34663f882ad9906dc13ae6c835c158598b945) - Fix NumberFieldElement plus button decreasing the number instead of increasing ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.68
 
 ### Major Changes

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,5 +1,6 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import type { AlertProps, SxProps, Theme } from '@mui/material'
 import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'
@@ -7,7 +8,7 @@ import { maskNetworkError } from './maskNetworkError'
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
 export type ApolloErrorAlertProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
   sx?: SxProps<Theme>
@@ -15,48 +16,50 @@ export type ApolloErrorAlertProps = {
 export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
   const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
 
+  if (!error) return null
+
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
-    <>
-      {error && (
-        <Box key='alerts'>
-          <Box sx={sx} className={classes.root}>
-            {error.graphQLErrors.map((e, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Box key={index}>
-                <div className={classes.alert}>
-                  <Alert
-                    severity='error'
-                    {...graphqlErrorAlertProps}
-                    sx={(theme) => ({
-                      borderRadius: theme.shape.borderRadius * 1,
-                      marginTop: 0.5,
-                    })}
-                  >
-                    {e.message}
-                  </Alert>
-                </div>
-              </Box>
-            ))}
-            {error.networkError && (
-              <Box key='networkError'>
-                <Box
-                  sx={(theme) => ({
-                    paddingTop: theme.spacings.xxs,
-                    paddingBottom: theme.spacings.xxs,
-                  })}
-                  className={classes.alert}
-                  key='networkError'
-                >
-                  <Alert severity='error' {...networkErrorAlertProps}>
-                    {maskNetworkError(error.networkError)}
-                  </Alert>
-                </Box>
-              </Box>
-            )}
+    <Box key='alerts'>
+      <Box sx={sx} className={classes.root}>
+        {graphQLErrors.map((e, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Box key={index}>
+            <div className={classes.alert}>
+              <Alert
+                severity='error'
+                {...graphqlErrorAlertProps}
+                sx={(theme) => ({
+                  borderRadius: theme.shape.borderRadius * 1,
+                  marginTop: 0.5,
+                })}
+              >
+                {e.message}
+              </Alert>
+            </div>
+          </Box>
+        ))}
+        {!isGraphQLError && error && (
+          <Box key='networkError'>
+            <Box
+              sx={(theme) => ({
+                paddingTop: theme.spacings.xxs,
+                paddingBottom: theme.spacings.xxs,
+              })}
+              className={classes.alert}
+              key='networkError'
+            >
+              <Alert severity='error' {...networkErrorAlertProps}>
+                {maskNetworkError(error)}
+              </Alert>
+            </Box>
           </Box>
-        </Box>
-      )}
-    </>
+        )}
+      </Box>
+    </Box>
   )
 }
 

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,13 +1,14 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
 import { FullPageMessage } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
-  error: ApolloError
+  error: ErrorLike
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
 } & Omit<FullPageMessageProps, 'title' | 'description'>
@@ -21,14 +22,17 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+  const errorCount = graphQLErrors.length + (isGraphQLError ? 0 : 1)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
+        title={graphQLErrors[0]?.message ?? maskNetworkError(error)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,10 +1,11 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { ErrorSnackbarProps } from '@graphcommerce/next-ui'
 import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
@@ -12,11 +13,15 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
 
   if (!error) return null
 
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
-        {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {maskNetworkError(error.networkError)}
+        {graphQLErrors.map((e) => e.message).join(', ')}
+        {!isGraphQLError && maskNetworkError(error)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -1,24 +1,15 @@
-import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import type { ErrorLike } from '@apollo/client'
+import { ServerError, ServerParseError } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 
-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
+export function maskNetworkError(error: ErrorLike | null) {
+  if (!error) return null
 
   if (process.env.NODE_ENV === 'development') {
-    console.log(networkError)
+    console.log(error)
   }
 
-  if (isServerParseError(networkError) || isServerError(networkError)) {
+  if (ServerParseError.is(error) || ServerError.is(error)) {
     return <Trans>Something went wrong on the server, please try again later.</Trans>
   }
 

package/components/FormComponents/NumberFieldElement.tsx

@@ -167,7 +167,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
               onClick={() => {
                 if (valueAsNumber >= (inputProps.max ?? Infinity)) return
                 // Round to nearest step with precision fix
-                const newValue = roundToPrecision(Math.round((valueAsNumber - step) / step) * step)
+                const newValue = roundToPrecision(Math.round((valueAsNumber + step) / step) * step)
                 onChange(newValue)
               }}
               sx={sxx(

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,10 +1,10 @@
-import type { QueryResult } from '@graphcommerce/graphql'
+import type { ApolloClient, useQuery } from '@graphcommerce/graphql'
 import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  waitFor: useQuery.Result<any, any> | boolean | (useQuery.Result<any, any> | boolean)[] | undefined
   children: React.ReactNode
   fallback?: React.ReactNode
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.68",
+  "version": "10.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/next-ui": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0",
+    "@graphcommerce/graphql": "^10.0.0",
+    "@graphcommerce/next-ui": "^10.0.0",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0",
+    "@graphcommerce/react-hook-form": "^10.0.0",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",