@graphcommerce/next-ui 10.0.4-canary.1 → 10.1.0-canary.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 10.1.0-canary.5
+
+## 10.1.0-canary.4
+
+## 10.1.0-canary.3
+
+### Patch Changes
+
+- [#2603](https://github.com/graphcommerce-org/graphcommerce/pull/2603) [`b59420f`](https://github.com/graphcommerce-org/graphcommerce/commit/b59420fe1e50b311ed2840af5774bb2fdbf19337) - Cast theme.typography spreads to CSSObject in MuiButton variants to satisfy MUI v7 typing ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2603](https://github.com/graphcommerce-org/graphcommerce/pull/2603) [`cb33760`](https://github.com/graphcommerce-org/graphcommerce/commit/cb337603284004033702cf4536561ee7d743a603) - Allow passing HTML attributes to UspListItem, ButtonLinkList & IconBlocks root element ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 10.0.4-canary.2
+
+### Patch Changes
+
+- [#2598](https://github.com/graphcommerce-org/graphcommerce/pull/2598) [`ac652cc`](https://github.com/graphcommerce-org/graphcommerce/commit/ac652cc7b1358cebe9047733afccc87b5b89dae4) - Added generic proxy handling to graphcommerce that can be used for plugins. Disabledby default. ([@paales](https://github.com/paales))
+
+- [#2598](https://github.com/graphcommerce-org/graphcommerce/pull/2598) [`8d1c48c`](https://github.com/graphcommerce-org/graphcommerce/commit/8d1c48cdbdcf30d4f1e55cf16a02028d19703382) - Store the css flags as a cookie, so we are able to retrieve the flags in the middleware as well. ([@paales](https://github.com/paales))
+
+- [#2598](https://github.com/graphcommerce-org/graphcommerce/pull/2598) [`5957a2b`](https://github.com/graphcommerce-org/graphcommerce/commit/5957a2b90520574a0d72c5850858464092cdf7c0) - Fix hydration erorr with SkipLink when there are query params. ([@paales](https://github.com/paales))
+
 ## 10.0.4-canary.1
 
 ## 10.0.4-canary.0

package/Row/ButtonLinkList/ButtonLinkList.tsx

@@ -11,7 +11,8 @@ export type ButtonLinkListProps = {
   children: React.ReactNode
   component?: React.ElementType
   sx?: SxProps<Theme>
-} & OwnerState
+} & OwnerState &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>
 
 type OwnerState = { containsBigLinks: boolean }
 
@@ -23,12 +24,12 @@ const { withState } = extendableComponent<OwnerState, typeof compName, typeof pa
 )
 
 export function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, children, component = 'span', containsBigLinks, sx = [] } = props
+  const { title, children, component = 'span', containsBigLinks, sx = [], ...rest } = props
 
   const classes = withState({ containsBigLinks })
 
   return (
-    <Row maxWidth='820px' className={classes.root} sx={sx}>
+    <Row maxWidth='820px' className={classes.root} sx={sx} {...rest}>
       <Box
         sx={sxx((theme) => ({
           position: 'relative',

package/Row/IconBlocks/IconBlocks.tsx

@@ -10,17 +10,17 @@ export type IconBlocksProps = {
   title: string
   children: React.ReactNode
   sx?: SxProps<Theme>
-}
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>
 
 const compName = 'IconBlocks'
 const parts = ['container', 'title', 'optionsWrapper', 'block', 'wrapper'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function IconBlocks(props: IconBlocksProps) {
-  const { title, children, sx = [] } = props
+  const { title, children, sx = [], ...rest } = props
 
   return (
-    <Row maxWidth='md' className={classes.container} sx={sxx({ maxWidth: 820 }, sx)}>
+    <Row maxWidth='md' className={classes.container} sx={sxx({ maxWidth: 820 }, sx)} {...rest}>
       <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
         <Box
           className={classes.title}

package/SkipLink/SkipLink.tsx

@@ -10,6 +10,7 @@ export function SkipLink() {
 
   return (
     <Link
+      component='a'
       href='#skip-nav'
       tabIndex={0}
       onClick={setFocus}

package/Theme/MuiButton.ts

@@ -1,4 +1,4 @@
-import type { ComponentsVariants, Theme } from '@mui/material'
+import type { ComponentsVariants, CSSObject, Theme } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button' {
@@ -21,7 +21,7 @@ export const MuiButtonResponsive: ButtonVariants = [
   {
     props: { size: 'small' },
     style: ({ theme }) => ({
-      ...theme.typography.body2,
+      ...(theme.typography.body2 as CSSObject),
       padding: `${responsiveVal(3, 5)} ${responsiveVal(8, 15)}`,
       '&.MuiLoadingButton-loading:hover': {
         backgroundColor: theme.vars.palette.action.disabledBackground,
@@ -33,7 +33,7 @@ export const MuiButtonResponsive: ButtonVariants = [
   {
     props: { size: 'medium' },
     style: ({ theme }) => ({
-      ...theme.typography.body1,
+      ...(theme.typography.body1 as CSSObject),
       padding: `${responsiveVal(7, 9)} ${responsiveVal(15, 22)}`,
       '&.MuiLoadingButton-loading:hover': {
         backgroundColor: theme.vars.palette.action.disabledBackground,
@@ -45,7 +45,7 @@ export const MuiButtonResponsive: ButtonVariants = [
   {
     props: { size: 'large' },
     style: ({ theme }) => ({
-      ...theme.typography.subtitle1,
+      ...(theme.typography.subtitle1 as CSSObject),
       fontWeight: theme.typography.fontWeightBold,
       padding: `${responsiveVal(10, 15)} ${responsiveVal(28, 58)}`,
       '&.MuiLoadingButton-loading:hover': {

package/UspList/UspListItem.tsx

@@ -8,7 +8,8 @@ export type UspListItemProps = {
   text: React.ReactNode
   icon?: React.ReactNode
   sx?: SxProps<Theme>
-} & OwnerState
+} & OwnerState &
+  Omit<React.HTMLAttributes<HTMLLIElement>, 'children'>
 
 type OwnerState = { size?: 'small' | 'medium' }
 const name = 'UspListItem'
@@ -16,13 +17,14 @@ const parts = ['root', 'icon', 'text'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function UspListItem(props: UspListItemProps) {
-  const { text, icon, size = 'medium', sx = [] } = props
+  const { text, icon, size = 'medium', sx = [], ...rest } = props
   const classes = withState({ size })
 
   return (
     <Box
       component='li'
       className={classes.root}
+      {...rest}
       sx={sxx(
         (theme) => ({
           display: 'grid',

package/copy/proxy.ts

@@ -0,0 +1,12 @@
+export { proxy } from '@graphcommerce/next-ui/proxy'
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except static assets (_next/static, _next/image,
+     * api routes, and files with extensions like .png, .js, .css, etc.).
+     * Further filtering is handled by proxy plugins.
+     */
+    '/((?!api|_next/static|_next/image|.*\\..*).*)',
+  ],
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.4-canary.1",
+  "version": "10.1.0-canary.5",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -27,7 +27,8 @@
     "./Intl/DateTimeFormat/toDate": "./Intl/DateTimeFormat/toDate.ts",
     "./Breadcrumbs/BreadcrumbsJsonLd": "./Breadcrumbs/BreadcrumbsJsonLd.tsx",
     "./Breadcrumbs/jsonLdBreadcrumb": "./Breadcrumbs/jsonLdBreadcrumb.tsx",
-    "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts"
+    "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts",
+    "./proxy": "./proxy.ts"
   },
   "dependencies": {
     "cookie": "^1.1.1",
@@ -42,13 +43,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
-    "@graphcommerce/eslint-config-pwa": "^10.0.4-canary.1",
-    "@graphcommerce/framer-next-pages": "^10.0.4-canary.1",
-    "@graphcommerce/framer-scroller": "^10.0.4-canary.1",
-    "@graphcommerce/framer-utils": "^10.0.4-canary.1",
-    "@graphcommerce/image": "^10.0.4-canary.1",
-    "@graphcommerce/prettier-config-pwa": "^10.0.4-canary.1",
-    "@graphcommerce/typescript-config-pwa": "^10.0.4-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.5",
+    "@graphcommerce/framer-next-pages": "^10.1.0-canary.5",
+    "@graphcommerce/framer-scroller": "^10.1.0-canary.5",
+    "@graphcommerce/framer-utils": "^10.1.0-canary.5",
+    "@graphcommerce/image": "^10.1.0-canary.5",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.5",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.5",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",

package/proxy.ts

@@ -0,0 +1,11 @@
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
+
+/**
+ * Base proxy handler for GraphCommerce. Returns NextResponse.next() by default.
+ *
+ * Extend this via function plugins to add authentication checks, redirects, etc.
+ */
+export function proxy(request: NextRequest): Response | NextResponse {
+  return NextResponse.next()
+}

package/utils/cssFlags.tsx

@@ -1,13 +1,22 @@
-import { FLAGS_STORAGE_KEY } from './getCssFlagInitScript'
-
-function loadFlags() {
-  const flags = JSON.parse(localStorage.getItem(FLAGS_STORAGE_KEY) || '{}')
-  if (typeof flags !== 'object' && flags !== null) return {}
-  return flags as Record<string, true | string>
+import { cookie } from './cookie'
+import { FLAGS_COOKIE_KEY } from './getCssFlagInitScript'
+
+function loadFlags(): Record<string, true | string> {
+  try {
+    const raw = cookie(FLAGS_COOKIE_KEY)
+    if (!raw) return {}
+    const flags = JSON.parse(raw)
+    if (typeof flags !== 'object' || flags === null) return {}
+    return flags as Record<string, true | string>
+  } catch {
+    return {}
+  }
 }
 
 function saveFlags(flags: Record<string, true | string>) {
-  window.localStorage?.setItem(FLAGS_STORAGE_KEY, JSON.stringify(flags))
+  const json = JSON.stringify(flags)
+  if (json === '{}') cookie(FLAGS_COOKIE_KEY, null)
+  else cookie(FLAGS_COOKIE_KEY, json)
 }
 
 export function removeCssFlag(flagName: string) {

package/utils/getCssFlagInitScript.tsx

@@ -1,4 +1,4 @@
-export const FLAGS_STORAGE_KEY = 'gc-flags'
+export const FLAGS_COOKIE_KEY = 'gc-flags'
 
 export function getCssFlagsInitScript() {
   return (
@@ -9,7 +9,9 @@ export function getCssFlagsInitScript() {
       dangerouslySetInnerHTML={{
         __html: `(function() {
 try {
-  const flags = JSON.parse(localStorage.getItem('${FLAGS_STORAGE_KEY}') || '{}')
+  var m = document.cookie.match(/(^|; )${FLAGS_COOKIE_KEY}=([^;]*)/)
+  if (!m) return
+  var flags = JSON.parse(decodeURIComponent(m[2]))
   Object.entries(flags).forEach(([key, val]) => {
     document.documentElement.setAttribute('data-' +key, typeof val === 'boolean' ? '' : val)
   })