@graphcommerce/next-ui 4.10.0 → 4.11.2

package/ActionCard/ActionCardListForm.tsx

@@ -33,18 +33,14 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       {...props}
       control={control}
       name={name}
-      rules={{
-        required,
-        ...rules,
-        validate: (v) => (v ? true : 'Please select a shipping address'),
-      }}
+      rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
       render={({ field: { onChange, value }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={errorMessage}
+          errorMessage={fieldState.error?.message}
         >
           {items.map((item) => (
             <RenderItem

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -1,7 +1,6 @@
 import { Avatar, Box, Chip, SxProps, Theme } from '@mui/material'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { useDateTimeFormat } from '../../hooks'
 
 export type BlogAuthorProps = {
   author: string
@@ -12,11 +11,7 @@ export type BlogAuthorProps = {
 export function BlogAuthor(props: BlogAuthorProps) {
   const { author, date, sx = [] } = props
 
-  const { locale } = useRouter()
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric' }),
-    [locale],
-  )
+  const formatter = useDateTimeFormat({ month: 'long', day: 'numeric' })
 
   return (
     <Box

package/Blog/BlogListItem/BlogListItem.tsx

@@ -3,12 +3,12 @@ import PageLink from 'next/link'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { useDateTimeFormat } from '../../hooks'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
   url: string
   date: string
-  locale: string
   title: string
   sx?: SxProps<Theme>
 }
@@ -18,13 +18,9 @@ const parts = ['item', 'date', 'asset', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function BlogListItem(props: BlogListItemProps) {
-  const { asset, url, date, locale, title, sx = [] } = props
+  const { asset, url, date, title, sx = [] } = props
 
-  const formatter = new Intl.DateTimeFormat(locale, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
+  const formatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' })
 
   return (
     <Box

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.11.2
+
+### Patch Changes
+
+- [#1538](https://github.com/graphcommerce-org/graphcommerce/pull/1538) [`fe4baa42d`](https://github.com/graphcommerce-org/graphcommerce/commit/fe4baa42db0081ed960d62aef688bd36a7ac974f) Thanks [@paales](https://github.com/paales)! - add missing translations
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.20
+
+## 4.11.1
+
+### Patch Changes
+
+- [#1529](https://github.com/graphcommerce-org/graphcommerce/pull/1529) [`11bca2d2f`](https://github.com/graphcommerce-org/graphcommerce/commit/11bca2d2f7dbb7c5e2827c04eb0db43d4099f2fd) Thanks [@paales](https://github.com/paales)! - issue where the error message of actionCardList was incomplete
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.19
+
+## 4.11.0
+
+### Minor Changes
+
+- [#1524](https://github.com/graphcommerce-org/graphcommerce/pull/1524) [`9ec0338df`](https://github.com/graphcommerce-org/graphcommerce/commit/9ec0338dfe34d37b0f2c24e36ffa6ed13ea1145e) Thanks [@paales](https://github.com/paales)! - feat: Added useDateTimeFormat and useNumberFormat which automatically use the locales from nextjs.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.18
+
 ## 4.10.0
 
 ### Minor Changes

package/Layout/components/LayoutHeaderBack.tsx

@@ -46,7 +46,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href
 
-  let label = i18n._(/* i18n */ `Back`)
+  let label = i18n._(/* i18n */ 'Back')
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -1,4 +1,4 @@
-import { useUrlQuery } from '../../useUrlQuery/useUrlQuery'
+import { useUrlQuery } from '../../hooks/useUrlQuery'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<

package/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useDateTimeFormat'
+export * from './useNumberFormat'
+export * from './useUrlQuery'

package/hooks/useDateTimeFormat.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export type DateTimeFormatProps = Intl.DateTimeFormatOptions
+
+export function useDateTimeFormat(props?: DateTimeFormatProps) {
+  const { locale } = useRouter()
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
+  return formatter
+}

package/hooks/useNumberFormat.ts

@@ -0,0 +1,10 @@
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+export type NumberFormatProps = Intl.NumberFormatOptions
+
+export function useNumberFormat(props?: NumberFormatProps) {
+  const { locale } = useRouter()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
+  return formatter
+}

package/index.ts

@@ -50,6 +50,6 @@ export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
-export * from './useUrlQuery/useUrlQuery'
+export * from './hooks'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.10.0",
+  "version": "4.11.2",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.17",
+    "@graphcommerce/framer-scroller": "2.1.20",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
     "react-is": "^18.1.0",