@graphcommerce/next-ui 9.1.0-canary.17 → 9.1.0-canary.19

package/ActionCard/ActionCard.tsx

@@ -117,7 +117,6 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
     layout = 'list',
     error = false,
     slotProps = {},
-    ...other
   } = props
 
   const classes = withState({
@@ -254,22 +253,23 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           },
         }),
         sx,
-        slotProps.root?.sx,
+        slotProps.root?.sx as SxProps<Theme>,
       )}
       {...slotProps.root}
-      {...other}
+      // {...other}
     >
       <Box
         className={classes.rootInner}
         sx={sxx(
-          {
+          (theme) => ({
             display: 'flex',
             flexDirection: 'row',
             width: '100%',
             justifyContent: 'space-between',
             alignContent: 'stretch',
             alignItems: 'center',
-          },
+            columnGap: theme.spacings.xxs,
+          }),
           slotProps.rootInner?.sx,
         )}
         {...slotProps.rootInner}
@@ -307,7 +307,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
                     '&.sizeSmall': { typography: 'body1' },
                     '&.sizeMedium': { typography: 'body1' },
                     '&.sizeLarge': { typography: 'h6' },
-                    '&.sizeResponsive': { typography: { xs: 'body1', md: 'body1', lg: 'body1' } },
+                    '&.sizeResponsive': { typography: { xs: 'body1', md: 'subtitle1', lg: 'h6' } },
                   },
                   slotProps.title?.sx,
                 )}

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`1e38811`](https://github.com/graphcommerce-org/graphcommerce/commit/1e3881177065548165b7141a29cff8ab27692b25) - Added support for meta_keyword for products and categories ([@paales](https://github.com/paales))
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`340c8ef`](https://github.com/graphcommerce-org/graphcommerce/commit/340c8ef93248a120cc4b92a6cd91f775ae662a1f) - Solve issue where ActionCard would crash the whole app because it forwarded components to string attributes ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.18
+
 ## 9.1.0-canary.17
 
 ## 9.1.0-canary.16

package/FindAndReplace/FindAndReplace.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+export type FindAndReplacerProps = { part: string }
+
+type FindAndReplaceTuple = [string, React.FC<FindAndReplacerProps> | React.ReactNode]
+
+export type FindAndReplaceProps = {
+  source: string
+  findAndReplace: [FindAndReplaceTuple, ...FindAndReplaceTuple[]]
+}
+
+export function FindAndReplace(props: FindAndReplaceProps) {
+  const { source, findAndReplace } = props
+
+  // Create a regex pattern that matches any of the strings to be replaced
+  const pattern = new RegExp(
+    `(${findAndReplace.map(([find]) => find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')})`,
+    'g',
+  )
+
+  // Split the string and map parts to either original string or replaced content
+  const parts = source.split(pattern)
+
+  return parts.map((part, index) => {
+    const key = `${part}-${index}`
+    // Check if this part matches any of our replacement keys
+    const Replacement = findAndReplace.find(([find]) => find === part)?.[1]
+
+    if (!Replacement) return <React.Fragment key={key}>{part}</React.Fragment>
+    if (typeof Replacement === 'function') {
+      return <Replacement part={part} key={key} />
+    }
+    return <React.Fragment key={key}>{Replacement}</React.Fragment>
+  })
+}

package/Intl/DateTimeFormat/index.ts

@@ -2,3 +2,4 @@ export * from './DateTimeFormat'
 export * from './DateFormat'
 export * from './TimeFormat'
 export * from './useIntlDateTimeFormat'
+export * from './toDate'

package/LayoutParts/GlobalHead.tsx

@@ -1,10 +1,14 @@
 import { useTheme } from '@mui/material'
 import Head from 'next/head'
+import type React from 'react'
 
-export type GlobalHeadProps = { name: string }
+export type GlobalHeadProps = {
+  name: string
+  children?: React.ReactNode
+}
 
 export function GlobalHead(props: GlobalHeadProps) {
-  const { name } = props
+  const { name, children } = props
   const theme = useTheme()
 
   return (
@@ -25,10 +29,9 @@ export function GlobalHead(props: GlobalHeadProps) {
       <meta name='apple-mobile-web-app-title' content={name} key='apple-mobile-web-app-title' />
       <meta name='format-detection' content='telephone=no' key='format-detection' />
       <meta name='mobile-web-app-capable' content='yes' key='mobile-web-app-capable' />
-      <link rel='icon' href='/favicon.ico' sizes='any' />
-      <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
       <link rel='apple-touch-icon' href='/apple-touch-icon.png' />
       <link rel='manifest' href='/manifest.webmanifest' key='manifest' />
+      {children}
     </Head>
   )
 }

package/PageMeta/PageMeta.tsx

@@ -21,8 +21,9 @@ type MetaRobotsAll = ['all' | 'none']
 export type PageMetaProps = {
   title: string
   canonical?: Canonical
-  metaDescription?: string
+  metaDescription?: string | null
   metaRobots?: MetaRobotsAll | MetaRobots[]
+  metaKeywords?: string | null
   children?: React.ReactNode
   ogImage?: string | null
   ogImageUseFallback?: boolean
@@ -36,6 +37,7 @@ export function PageMeta(props: PageMetaProps) {
     title,
     canonical: canonicalBare,
     metaDescription,
+    metaKeywords,
     ogImage,
     ogType,
     ogImageUseFallback = false,
@@ -56,6 +58,7 @@ export function PageMeta(props: PageMetaProps) {
       )}
       <meta name='robots' content={metaRobots.join(',')} key='meta-robots' />
       {canonical && <link rel='canonical' href={canonical} key='canonical' />}
+      {metaKeywords && <meta name='keywords' content={metaKeywords.trim()} key='meta-keywords' />}
       <meta property='og:title' content={title.trim()} key='og-title' />
       <meta property='og:type' content={ogType ?? 'website'} key='og-type' />
       <meta property='og:url' content={canonical} key='og-url' />

package/Styles/extendableComponent.ts

@@ -35,6 +35,14 @@ const partselectorsMap = <O extends Record<string, string>>(
   return Object.fromEntries(mapped)
 }
 
+export type ExtendableComponentProps<
+  ClassNames extends ReadonlyArray<string> = ReadonlyArray<string>,
+> = {
+  classes?: {
+    [P in ClassNames[number]]?: string | undefined
+  }
+}
+
 /**
  * Utility function to:
  *
@@ -42,14 +50,17 @@ const partselectorsMap = <O extends Record<string, string>>(
  * - Generate state css classes.
  */
 export function extendableComponent<
-  ComponentStyleProps extends Record<string, boolean | string | number | undefined>,
+  ComponentStyleProps extends Record<string, boolean | string | number | undefined> = Record<
+    string,
+    any
+  >,
   Name extends string = string,
   ClassNames extends ReadonlyArray<string> = ReadonlyArray<string>,
 >(componentName: Name, slotNames: ClassNames) {
   const classes = slotClasses(componentName, slotNames)
   const partselectors = partselectorsMap(classes)
 
-  const withState = (state: ComponentStyleProps) => {
+  const withState = (state: ComponentStyleProps & ExtendableComponentProps<ClassNames>) => {
     const stateClas = Object.fromEntries(
       Object.entries<string>(classes).map(([slot, className]) => {
         const mapped = Object.entries(state).map(([key, value]) => {
@@ -58,7 +69,7 @@ export function extendableComponent<
           if (typeof value === 'number' && value > 0) return `${key}${value}`
           return ''
         })
-
+        if (state.classes?.[slot]) mapped.push(state.classes[slot] as string)
         if (className) mapped.unshift(className)
         return [slot, mapped.filter(Boolean).join(' ')]
       }),

package/index.ts

@@ -9,6 +9,7 @@ export * from './Blog/BlogTitle/BlogTitle'
 export * from './Breadcrumbs'
 export * from './Button'
 export * from './ChipMenu/ChipMenu'
+export * from './FindAndReplace/FindAndReplace'
 export * from './ContainerWithHeader/ContainerWithHeader'
 export * from './Fab'
 export * from './FlagAvatar/FlagAvatar'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.17",
+  "version": "9.1.0-canary.19",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.17",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.17",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.17",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.17",
-    "@graphcommerce/image": "^9.1.0-canary.17",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.17",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.17",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.19",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.19",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.19",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.19",
+    "@graphcommerce/image": "^9.1.0-canary.19",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.19",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.19",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",