@graphcommerce/next-ui 8.0.6-canary.3 → 8.0.6

package/ActionCard/ActionCardListForm.tsx

@@ -1,10 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -48,41 +43,38 @@ export function ActionCardListForm<
       : selectValues === itemValue
   }
 
-  const {
-    field: { onChange, value, ref },
-    fieldState,
-    formState,
-  } = useController({
-    ...props,
-    control,
-    name,
-    defaultValue,
-    rules: { required: errorMessage || required, ...rules },
-  })
-
   return (
-    <ActionCardList
-      {...other}
-      multiple={multiple}
-      required={required}
-      value={value}
-      ref={ref}
-      onChange={(_, incomming) => onChange(incomming)}
-      error={formState.isSubmitted && !!fieldState.error}
-      errorMessage={fieldState.error?.message}
-    >
-      {items.map((item) => (
-        <RenderItem
-          {...item}
-          key={item.value ?? ''}
-          value={item.value}
-          selected={onSelect(item.value, value)}
-          onReset={(e) => {
-            e.preventDefault()
-            onChange(null)
-          }}
-        />
-      ))}
-    </ActionCardList>
+    <Controller
+      {...props}
+      control={control}
+      name={name}
+      defaultValue={defaultValue}
+      rules={{ required: errorMessage || required, ...rules }}
+      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
+        <ActionCardList
+          {...other}
+          multiple={multiple}
+          required={required}
+          value={value}
+          ref={ref}
+          onChange={(_, incomming) => onChange(incomming)}
+          error={formState.isSubmitted && !!fieldState.error}
+          errorMessage={fieldState.error?.message}
+        >
+          {items.map((item) => (
+            <RenderItem
+              {...item}
+              key={item.value ?? ''}
+              value={item.value}
+              selected={onSelect(item.value, value)}
+              onReset={(e) => {
+                e.preventDefault()
+                onChange(null)
+              }}
+            />
+          ))}
+        </ActionCardList>
+      )}
+    />
   )
 }

package/CHANGELOG.md

@@ -1,25 +1,6 @@
 # Change Log
 
-## 8.0.6-canary.3
-
-## 8.0.6-canary.2
-
-### Patch Changes
-
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added useIsSSR hook that will properly resolve when the page is rendered on the server and on first render, but will return false when a component is rendered on the client directly.
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-## 8.0.6-canary.1
-
-## 8.0.6-canary.0
-
-### Patch Changes
-
-- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
-  ([@paales](https://github.com/paales))
+## 8.0.6
 
 ## 8.0.5
 

package/TimeAgo/TimeAgo.tsx

@@ -1,23 +1,17 @@
-import { useLocale } from '../hooks/useLocale'
-
 export type TimeAgoProps = {
   date: Date
-  /**
-   * @deprecated No longer used
-   */
   locale?: string
 }
 
 export function TimeAgo(props: TimeAgoProps) {
-  const { date } = props
+  const { date, locale = 'en' } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
 
   const timestamp = date.getTime()
   const elapsed = Date.now() - timestamp
-
-  const rtf = new Intl.RelativeTimeFormat(useLocale(), { numeric: 'auto' })
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
 
   if (elapsed < msPerMinute) {
     return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>

package/hooks/index.ts

@@ -5,5 +5,3 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
-export * from './useSsr'
-export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,13 +1,15 @@
 import { normalizeLocale } from '@graphcommerce/lingui-next'
+import { useRouter } from 'next/router'
 import { useMemo } from 'react'
-import { useStorefrontConfig } from './useStorefrontConfig'
-import { useLocale } from '@graphcommerce/next-ui'
 
 export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
-  const locale = useLocale()
+  const { locale } = useRouter()
 
-  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
+  const formatter = useMemo(
+    () => new Intl.DateTimeFormat(normalizeLocale(locale), props),
+    [locale, props],
+  )
   return formatter
 }

package/hooks/useNumberFormat.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.3",
+  "version": "8.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -25,14 +25,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.3",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.3",
-    "@graphcommerce/framer-utils": "^8.0.6-canary.3",
-    "@graphcommerce/image": "^8.0.6-canary.3",
-    "@graphcommerce/lingui-next": "^8.0.6-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6",
+    "@graphcommerce/framer-next-pages": "^8.0.6",
+    "@graphcommerce/framer-scroller": "^8.0.6",
+    "@graphcommerce/framer-utils": "^8.0.6",
+    "@graphcommerce/image": "^8.0.6",
+    "@graphcommerce/lingui-next": "^8.0.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/hooks/useLocale.ts

@@ -1,7 +0,0 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useStorefrontConfig } from './useStorefrontConfig'
-
-export function useLocale() {
-  const { locale } = useStorefrontConfig()
-  return normalizeLocale(locale)
-}

package/hooks/useSsr.ts

@@ -1,11 +0,0 @@
-import { useSyncExternalStore } from 'react'
-
-const emptySubscribe = () => () => {}
-
-export function useIsSSR() {
-  return useSyncExternalStore(
-    emptySubscribe,
-    () => false,
-    () => true,
-  )
-}