@graphcommerce/next-ui 4.13.1 → 4.14.0

package/ActionCard/ActionCard.tsx

@@ -11,7 +11,7 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
   selected?: boolean
   hidden?: boolean
   value: string | number
@@ -66,7 +66,7 @@ export function ActionCard(props: ActionCardProps) {
 
   const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
 
-  const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase

package/ActionCard/ActionCardList.tsx

@@ -3,19 +3,20 @@ import { AnimatePresence } from 'framer-motion'
 import React from 'react'
 import { isFragment } from 'react-is'
 import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
+import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
   multiple: true
-  value: string[]
+  value: (string | number)[]
 
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string[]) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
   multiple?: false
-  value: string
+  value: string | number
 
   /** Value is null when deselected when not required */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: Select['value'] | null) => void
 }
 
 export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
@@ -29,94 +30,124 @@ function isMulti(props: ActionCardListProps): props is ActionCardListProps<Multi
   return props.multiple === true
 }
 
-function isValueSelected(value: string, candidate: string | string[]) {
-  if (candidate === undefined || value === undefined) return false
+function isValueSelected(
+  value: ActionCardProps['value'],
+  candidate?: Select['value'] | MultiSelect['value'],
+) {
+  if (candidate === undefined) return false
   if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
   return value === candidate
 }
 
-export function ActionCardList(props: ActionCardListProps) {
-  const { children, required, value, error = false, errorMessage } = props
+export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
+  (props, ref) => {
+    const { children, required, error = false, errorMessage } = props
 
-  const handleChange = isMulti(props)
-    ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
-        const index = Boolean(value) && value?.indexOf(buttonValue)
-        let newValue: string[]
+    const handleChange: ActionCardProps['onClick'] = isMulti(props)
+      ? (event, v) => {
+          const { onChange, value } = props
+          const index = Boolean(value) && value?.indexOf(v)
+          let newValue: typeof value
 
-        if (Array.isArray(value) && value.length && index && index >= 0) {
-          newValue = value.slice()
-          newValue.splice(index, 1)
-        } else {
-          newValue = value ? [...value, buttonValue] : [buttonValue]
+          if (value.length && index && index >= 0) {
+            newValue = value.slice()
+            newValue.splice(index, 1)
+          } else {
+            newValue = value ? [...value, v] : [v]
+          }
+          onChange?.(event, newValue)
         }
-        onChange?.(event, newValue)
-      }
-    : (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
+      : (event, v) => {
+          const { onChange, value } = props
 
-        if (value === buttonValue) return
-        if (required) onChange?.(event, buttonValue)
-        else onChange?.(event, value === buttonValue ? null : buttonValue)
-      }
+          if (value !== v) {
+            if (required) onChange?.(event, v)
+            else onChange?.(event, value === v ? null : v)
+          }
+        }
 
-  return (
-    <Box
-      sx={[
-        error &&
-          ((theme) => ({
-            '& .ActionCard-root': {
-              borderLeft: 2,
-              borderRight: 2,
-              borderLeftColor: 'error.main',
-              borderRightColor: 'error.main',
-              paddingLeft: theme.spacings.xs,
-              paddingRight: theme.spacings.xs,
-            },
-            '& > div:first-of-type.ActionCard-root': {
-              borderTop: 2,
-              borderTopColor: 'error.main',
-              paddingTop: theme.spacings.xxs,
-            },
-            '& > div:last-of-type.ActionCard-root': {
-              borderBottom: 2,
-              borderBottomColor: 'error.main',
-              paddingBottom: theme.spacings.xxs,
-            },
-          })),
-      ]}
+    type ActionCardLike = React.ReactElement<
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick'>
     >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return null
+    function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
+      const hasValue = (el as ActionCardLike).props.value
 
+      if (process.env.NODE_ENV !== 'production') {
+        if (!hasValue) console.error(el, `must be an instance of ActionCard`)
+      }
+      return (el as ActionCardLike).props.value !== undefined
+    }
+
+    // Make sure the children are cardlike
+    const childReactNodes = React.Children.toArray(children)
+      .filter(React.isValidElement)
+      .filter(isActionCardLike)
+      .filter((child) => {
         if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
+          if (isFragment(child))
             console.error(
               [
                 "@graphcommerce/next-ui: The ActionCardList component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
+                'Consider providing an array instead',
               ].join('\n'),
             )
-          }
         }
 
-        return React.cloneElement(child, {
-          onClick: handleChange,
-          selected:
-            child.props.selected === undefined
-              ? isValueSelected(child.props.value as string, value)
-              : child.props.selected,
-        })
-      })}
-      {error && (
-        <Alert
-          severity='error'
-          variant='filled'
-          sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
-        >
-          {errorMessage}
-        </Alert>
-      )}
-    </Box>
-  )
-}
+        return !isFragment(child)
+      })
+
+    // Make sure the selected values is in the list of all possible values
+    const value = childReactNodes.find(
+      // eslint-disable-next-line react/destructuring-assignment
+      (child) => child.props.value === props.value && child.props.disabled !== true,
+    )?.props.value
+
+    return (
+      <Box
+        ref={ref}
+        sx={[
+          error &&
+            ((theme) => ({
+              '& .ActionCard-root': {
+                borderLeft: 2,
+                borderRight: 2,
+                borderLeftColor: 'error.main',
+                borderRightColor: 'error.main',
+                paddingLeft: theme.spacings.xs,
+                paddingRight: theme.spacings.xs,
+              },
+              '& > div:first-of-type.ActionCard-root': {
+                borderTop: 2,
+                borderTopColor: 'error.main',
+                paddingTop: theme.spacings.xxs,
+              },
+              '& > div:last-of-type.ActionCard-root': {
+                borderBottom: 2,
+                borderBottomColor: 'error.main',
+                paddingBottom: theme.spacings.xxs,
+              },
+            })),
+        ]}
+      >
+        {childReactNodes.map((child) =>
+          React.cloneElement(child, {
+            onClick: handleChange,
+            selected:
+              child.props.selected === undefined
+                ? isValueSelected(child.props.value, value)
+                : child.props.selected,
+          }),
+        )}
+        {error && (
+          <Alert
+            severity='error'
+            variant='filled'
+            sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
+          >
+            {errorMessage}
+          </Alert>
+        )}
+      </Box>
+    )
+  },
+)

package/ActionCard/ActionCardListForm.tsx

@@ -34,10 +34,11 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       control={control}
       name={name}
       rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
-      render={({ field: { onChange, value }, fieldState, formState }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
+          ref={ref}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
           errorMessage={fieldState.error?.message}

package/Blog/BlogListItem/BlogListItem.tsx

@@ -20,7 +20,7 @@ const { classes } = extendableComponent(name, parts)
 export function BlogListItem(props: BlogListItemProps) {
   const { asset, url, date, title, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' })
+  const formatter = useDateTimeFormat({ dateStyle: 'long' })
 
   return (
     <Box

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 4.14.0
+
+### Minor Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50) Thanks [@NickdeK](https://github.com/NickdeK)! - Added a new cookies utility to load cookies on the frontend
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4) Thanks [@NickdeK](https://github.com/NickdeK)! - ActionCardList will now show all options when the selected value isn't in any of the options
+
+* [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df) Thanks [@NickdeK](https://github.com/NickdeK)! - Make sure the useDateTimeFormat isn't giving hydration warnings
+
+* Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.24
+
 ## 4.13.1
 
 ### Patch Changes

package/index.ts

@@ -1,5 +1,6 @@
 export * from './ActionCard/ActionCard'
 export * from './ActionCard/ActionCardList'
+export * from './ActionCard/ActionCardListForm'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
@@ -55,3 +56,4 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
+export * from './utils/cookie'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.13.1",
+  "version": "4.14.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,9 +20,10 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.2.4",
-    "@graphcommerce/framer-scroller": "2.1.23",
+    "@graphcommerce/framer-scroller": "2.1.24",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
+    "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
@@ -42,6 +43,7 @@
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
+    "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
     "typescript": "4.7.4"

package/utils/cookie.ts

@@ -0,0 +1,33 @@
+import { serialize, parse, CookieSerializeOptions } from 'cookie'
+
+/** Read a cookie */
+export function cookie(name: string): string | undefined
+/** Set a cookie */
+export function cookie(name: string, value: string, options?: CookieSerializeOptions): void
+/** Delete a cookie */
+export function cookie(name: string, value: null): void
+/** Function to handle the three different cases */
+export function cookie(name: string, value?: string | null, options?: CookieSerializeOptions) {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  // Read a cookie
+  if (typeof value === 'undefined') return parse(document.cookie)[name]
+
+  // Set a cookie
+  if (typeof value === 'string') {
+    const serialized = serialize(name, value, { path: '/', maxAge: 31536000, ...options })
+    document.cookie = serialized
+    return undefined
+  }
+
+  // Delete a cookie
+  if (value === null) {
+    const serialized = serialize(name, '', { path: '/', maxAge: 0 })
+    document.cookie = serialized
+    return undefined
+  }
+
+  return undefined
+}