@graphcommerce/next-ui 4.26.0 → 4.27.0

package/ActionCard/ActionCard.tsx

@@ -1,9 +1,25 @@
-import { SxProps, ButtonBase, Box, Theme, alpha } from '@mui/material'
+import { alpha, Box, BoxProps, ButtonBase, ButtonProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
+type Variants = 'outlined' | 'default'
+type Size = 'large' | 'medium' | 'small'
+type Color = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+type Layout = 'inline' | 'grid' | 'list' | 'stack'
+
+function isButtonProps(props: ButtonProps<'div'> | BoxProps<'div'>): props is ButtonProps<'div'> {
+  return props.onClick !== undefined
+}
+
+const RenderComponent = (props: ButtonProps<'div'> | BoxProps<'div'>) =>
+  isButtonProps(props) ? <ButtonBase component='div' {...props} /> : <Box {...props} />
+
 export type ActionCardProps = {
+  variant?: Variants
+  size?: Size
+  color?: Color
+  layout?: Layout
   sx?: SxProps<Theme>
   title?: string | React.ReactNode
   image?: React.ReactNode
@@ -14,10 +30,10 @@ export type ActionCardProps = {
   secondaryAction?: React.ReactNode
   onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
   selected?: boolean
-  hidden?: boolean
   value: string | number
   reset?: React.ReactNode
   disabled?: boolean
+  error?: boolean
 }
 
 const parts = [
@@ -34,10 +50,14 @@ const parts = [
 const name = 'ActionCard'
 
 type StateProps = {
-  selected?: boolean
-  hidden?: boolean
-  disabled?: boolean
-  image?: boolean
+  variant: Variants
+  size: Size
+  color: Color
+  layout: Layout
+  selected: boolean
+  disabled: boolean
+  image: boolean
+  error: boolean
 }
 
 const { withState, selectors } = extendableComponent<StateProps, typeof name, typeof parts>(
@@ -60,99 +80,131 @@ export function ActionCard(props: ActionCardProps) {
     onClick,
     value,
     selected = false,
-    hidden = false,
     reset,
     disabled = false,
+    size = 'medium',
+    color = 'primary',
+    variant = 'outlined',
+    layout = 'list',
+    error = false,
   } = props
 
-  const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => onClick?.(event, value)
+  const classes = withState({
+    disabled,
+    selected,
+    image: Boolean(image),
+    variant,
+    size,
+    color,
+    layout,
+    error,
+  })
 
   return (
-    <ButtonBase
-      component='div'
+    <RenderComponent
       className={classes.root}
-      onClick={handleClick}
+      onClick={onClick && ((event) => onClick?.(event, value))}
       disabled={disabled}
       sx={[
         (theme) => ({
-          display: 'grid',
-          width: '100%',
-          gridTemplateColumns: 'min-content auto auto',
-          gridTemplateAreas: `
-            "image title action"
-            "image details ${price ? 'price' : 'details'}"
-            "image secondaryAction additionalDetails"
-            "after after after"
-          `,
-          justifyContent: 'unset',
-          typography: 'body1',
-          // textAlign: 'left',
-          background: theme.palette.background.paper,
-          padding: `calc(${theme.spacings.xxs} + 1px) calc(${theme.spacings.xs} + 1px)`,
-          columnGap: theme.spacings.xxs,
-          border: `1px solid ${theme.palette.divider}`,
-          borderBottomColor: `transparent`,
-          '&:first-of-type': {
-            ...breakpointVal(
-              'borderTopLeftRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            ...breakpointVal(
-              'borderTopRightRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
+          '&.sizeSmall': {
+            padding: `5px 10px`,
+            display: 'flex',
+            typography: 'body2',
           },
-          '&:last-of-type': {
-            ...breakpointVal(
-              'borderBottomLeftRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            ...breakpointVal(
-              'borderBottomRightRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            borderBottom: `1px solid ${theme.palette.divider}`,
+
+          '&.sizeMedium': {
+            padding: `10px 12px`,
+            typography: 'body2',
+            display: 'block',
           },
-        }),
-        !image && {
-          gridTemplateColumns: 'auto auto',
-          gridTemplateAreas: `
-            "title action"
-            "details ${price ? 'price' : 'details'}"
-            "secondaryAction additionalDetails"
-            "after after"
-          `,
-        },
-        hidden && {
-          display: 'none',
-        },
-        selected &&
-          ((theme) => ({
-            border: `2px solid ${theme.palette.secondary.main} !important`,
-            boxShadow: `0 0 0 4px ${alpha(
-              theme.palette.secondary.main,
-              theme.palette.action.hoverOpacity,
-            )} !important`,
-            ...breakpointVal(
-              'borderRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
+
+          '&.sizeLarge': {
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
-          })),
-        disabled &&
-          ((theme) => ({
+            display: 'block',
+          },
+
+          '&.variantDefault': {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+            '&.selected': {
+              borderBottom: `2px solid ${theme.palette[color].main}`,
+              marginBottom: '-1px',
+              backgroundColor: `${theme.palette[color].main}10`,
+            },
+            '&.error': {
+              borderBottom: `2px solid ${theme.palette.error.main}`,
+              marginBottom: '-1px',
+              backgroundColor: `${theme.palette.error.main}10`,
+            },
+          },
+
+          '&.variantOutlined': {
+            backgroundColor: theme.palette.background.paper,
+            border: `1px solid ${theme.palette.divider}`,
+            '&:not(:last-of-type)': {
+              marginBottom: '-1px',
+            },
+
+            '&.layoutList': {
+              '&:first-of-type, &.selected': {
+                ...breakpointVal(
+                  'borderTopLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderTopRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+              },
+              '&:last-of-type, &.selected': {
+                ...breakpointVal(
+                  'borderBottomLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderBottomRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+              },
+            },
+            '&:not(.layoutList)': {
+              ...breakpointVal(
+                'borderRadius',
+                theme.shape.borderRadius * 3,
+                theme.shape.borderRadius * 4,
+                theme.breakpoints.values,
+              ),
+            },
+
+            '&.selected': {
+              border: `2px solid ${theme.palette[color].main}`,
+              boxShadow: `0 0 0 4px ${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
+
+              '&.sizeSmall': { padding: `4px 9px` },
+              '&.sizeMedium': { padding: `9px 11px` },
+              '&.sizeLarge': {
+                padding: `calc(${theme.spacings.xxs} - 1px) calc(${theme.spacings.xs} - 1px)`,
+              },
+            },
+            '&.error': {
+              border: `2px solid ${theme.palette.error.main}`,
+            },
+          },
+          '&.selected': {
+            zIndex: 1,
+          },
+          '&.disabled': {
             '& *': {
               opacity: theme.palette.action.disabledOpacity,
             },
@@ -160,64 +212,96 @@ export function ActionCard(props: ActionCardProps) {
               theme.palette.action.disabledBackground,
               theme.palette.action.disabledOpacity / 10,
             ),
-          })),
-
+          },
+        }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {image && (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          justifyContent: 'space-between',
+        }}
+      >
         <Box
-          className={classes.image}
           sx={{
-            gridArea: 'image',
             display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
           }}
         >
-          {image}
-        </Box>
-      )}
-      {title && (
-        <Box className={classes.title} sx={{ gridArea: 'title', display: 'flex' }}>
-          {title}
-        </Box>
-      )}
-      {action && (
-        <Box className={classes.action} sx={{ gridArea: 'action', textAlign: 'right' }}>
-          {!selected ? action : reset}
-        </Box>
-      )}
-      {details && (
-        <Box
-          className={classes.details}
-          sx={(theme) => ({
-            typography: 'body2',
-            gridArea: 'details',
-            color: 'text.secondary',
-          })}
-        >
-          {details}
+          {image && (
+            <Box
+              className={classes.image}
+              sx={{ display: 'flex', paddingRight: '15px', alignSelf: 'center' }}
+            >
+              {image}
+            </Box>
+          )}
+
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+            }}
+          >
+            {title && (
+              <Box
+                className={classes.title}
+                sx={{
+                  typography: 'subtitle2',
+                  '&.sizeMedium': { typographty: 'subtitle1' },
+                  '&.sizeLarge': { typography: 'h6' },
+                }}
+              >
+                {title}
+              </Box>
+            )}
+
+            {details && (
+              <Box className={classes.details} sx={{ color: 'text.secondary' }}>
+                {details}
+              </Box>
+            )}
+
+            {secondaryAction && <Box className={classes.secondaryAction}>{secondaryAction}</Box>}
+          </Box>
         </Box>
-      )}
 
-      {price && !disabled && (
         <Box
-          className={classes.price}
-          sx={{ gridArea: 'price', textAlign: 'right', typography: 'h5' }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
+          }}
         >
-          {price}
-        </Box>
-      )}
+          {action && (
+            <Box className={classes.action} sx={{ marginBottom: '5px' }}>
+              {!selected ? action : reset}
+            </Box>
+          )}
 
-      {secondaryAction && (
-        <Box className={classes.secondaryAction} sx={{ gridArea: 'secondaryAction' }}>
-          {secondaryAction}
-        </Box>
-      )}
-      {after && (
-        <Box className={classes.after} sx={{ gridArea: 'after' }}>
-          {after}
+          {price && !disabled && (
+            <Box
+              className={classes.price}
+              sx={{
+                textAlign: 'right',
+                typography: 'body1',
+                '&.sizeMedium': { typographty: 'subtitle1' },
+                '&.sizeLarge': { typography: 'h6' },
+              }}
+            >
+              {price}
+            </Box>
+          )}
         </Box>
-      )}
-    </ButtonBase>
+      </Box>
+      {after && <Box className={classes.after}>{after}</Box>}
+    </RenderComponent>
   )
 }

package/ActionCard/ActionCardList.tsx

@@ -1,10 +1,12 @@
-import { Alert, Box } from '@mui/material'
+import { Alert, Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { extendableComponent } from '../Styles'
 import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
   multiple: true
+  collapse?: false
   value: (string | number)[]
 
   onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
@@ -12,6 +14,7 @@ type MultiSelect = {
 type Select = {
   multiple?: false
   value: string | number
+  collapse?: boolean
 
   /** Value is null when deselected when not required */
   onChange?: (event: React.MouseEvent<HTMLElement>, value: Select['value'] | null) => void
@@ -22,7 +25,9 @@ export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
   required?: boolean
   error?: boolean
   errorMessage?: string
-} & SelectOrMulti
+  sx?: SxProps<Theme>
+} & SelectOrMulti &
+  HoistedActionCardProps
 
 function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
   return props.multiple === true
@@ -37,9 +42,30 @@ function isValueSelected(
   return value === candidate
 }
 
+type HoistedActionCardProps = Pick<ActionCardProps, 'color' | 'variant' | 'size' | 'layout'>
+
+const parts = ['root'] as const
+const name = 'ActionCardList'
+const { withState, selectors } = extendableComponent<
+  HoistedActionCardProps,
+  typeof name,
+  typeof parts
+>(name, parts)
+
 export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
   (props, ref) => {
-    const { children, required, error = false, errorMessage } = props
+    const {
+      children,
+      required,
+      error = false,
+      errorMessage,
+      size = 'medium',
+      color = 'primary',
+      variant = 'outlined',
+      layout = 'list',
+      collapse = false,
+      sx = [],
+    } = props
 
     const handleChange: ActionCardProps['onClick'] = isMulti(props)
       ? (event, v) => {
@@ -65,8 +91,10 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         }
 
     type ActionCardLike = React.ReactElement<
-      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick' | 'hidden'>
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick' | 'error' | 'onClick'> &
+        HoistedActionCardProps
     >
+
     function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
       const hasValue = (el as ActionCardLike).props.value
 
@@ -100,55 +128,68 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       (child) => child.props.value === props.value && child.props.disabled !== true,
     )?.props.value
 
+    const classes = withState({ size, color, variant, layout })
+
     return (
-      <Box
-        ref={ref}
-        sx={[
-          error && {
-            '& .ActionCard-root': {
-              borderLeft: 2,
-              borderRight: 2,
-              borderLeftColor: 'error.main',
-              borderRightColor: 'error.main',
-            },
-            '& > div:first-of-type.ActionCard-root': {
-              borderTop: 2,
-              borderTopColor: 'error.main',
-            },
-            '& > div:last-of-type.ActionCard-root': {
-              borderBottom: 2,
-              borderBottomColor: 'error.main',
-            },
-          },
-        ]}
-      >
-        {childReactNodes.map((child) =>
-          React.cloneElement(child, {
-            onClick: handleChange,
-            hidden: !!value && value !== child.props.value,
-            selected:
-              child.props.selected === undefined
-                ? isValueSelected(child.props.value, value)
-                : child.props.selected,
-          }),
-        )}
-        {error && (
-          <Box component='span'>
-            <Alert
-              severity='error'
-              variant='standard'
-              sx={(theme) => ({
-                marginTop: 0.5,
-                borderStartStartRadius: 0,
-                borderStartEndRadius: 0,
-                borderRadius: theme.shape.borderRadius * 1,
-              })}
-            >
-              {errorMessage}
-            </Alert>
-          </Box>
+      <div>
+        <Box
+          className={classes.root}
+          ref={ref}
+          sx={[
+            (theme) => ({
+              '&.layoutStack': {
+                display: 'grid',
+                height: 'min-content',
+                gap: theme.spacings.xxs,
+              },
+              '&.layoutList': {
+                display: 'grid',
+                height: 'min-content',
+              },
+              '&.layoutGrid': {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+                gap: theme.spacings.xxs,
+              },
+              '&.layoutInline': {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacings.xxs,
+              },
+            }),
+
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+        >
+          {childReactNodes.map((child) => {
+            if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))
+              return null
+            return React.cloneElement(child, {
+              onClick: handleChange,
+              error: child.props.error ?? error,
+              color: child.props.color ?? color,
+              variant: child.props.variant ?? variant,
+              size: child.props.size ?? size,
+              layout: child.props.layout ?? layout,
+              selected:
+                child.props.selected === undefined
+                  ? isValueSelected(child.props.value, value)
+                  : child.props.selected,
+            })
+          })}
+        </Box>
+        {error && errorMessage && (
+          <Alert
+            severity='error'
+            variant='standard'
+            sx={(theme) => ({
+              marginTop: theme.spacings.xxs,
+            })}
+          >
+            {errorMessage}
+          </Alert>
         )}
-      </Box>
+      </div>
     )
   },
 )

package/ActionCard/ActionCardListForm.tsx

@@ -6,37 +6,37 @@ import { ActionCardList, ActionCardListProps } from './ActionCardList'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
-export type ActionCardItemRenderProps<T> = Pick<
-  ActionCardProps,
-  'selected' | 'hidden' | 'value'
-> & {
+export type ActionCardItemRenderProps<T> = ActionCardProps & {
   onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
 export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
   ActionCardListProps,
-  'value'
+  'value' | 'error' | 'onChange' | 'children' | 'multiple'
 > &
-  Omit<ControllerProps<any>, 'render'> & {
+  Omit<ControllerProps<any>, 'render' | 'shouldUnregister'> & {
     items: T[]
-    render: React.VFC<ActionCardItemRenderProps<T>>
+    render: React.FC<ActionCardItemRenderProps<T>>
   }
 
 export function ActionCardListForm<T extends ActionCardItemBase>(
   props: ActionCardListFormProps<T>,
 ) {
-  const { required, rules, items, render, control, name, errorMessage } = props
-  const RenderItem = render as React.VFC<ActionCardItemRenderProps<ActionCardItemBase>>
+  const { required, rules, items, render, control, name, errorMessage, defaultValue, ...other } =
+    props
+  const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
 
   return (
     <Controller
       {...props}
       control={control}
       name={name}
-      rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
+      defaultValue={defaultValue}
+      rules={{ required: errorMessage || required, ...rules }}
       render={({ field: { onChange, value, ref }, fieldState, formState }) => (
         <ActionCardList
-          required
+          {...other}
+          required={required}
           value={value}
           ref={ref}
           onChange={(_, incomming) => onChange(incomming)}

package/Button/Button.tsx

@@ -1,5 +1,9 @@
 /* eslint-disable react/forbid-foreign-prop-types */
-import { LoadingButton as Button, LoadingButtonProps } from '@mui/lab'
+import { LoadingButton as Button, LoadingButtonProps, LoadingButtonTypeMap } from '@mui/lab'
+
+export type ButtonProps<
+  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  P = {},
+> = LoadingButtonProps<D, P>
 
-export type ButtonProps = LoadingButtonProps
 export { Button }

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 4.27.0
+
+### Minor Changes
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8) Thanks [@paales](https://github.com/paales)! - Introduced `<AddProductsToCartForm/>`, which is allows for adding all product types to the cart with a single react-hook-form form.
+
+  Which allows you to fully compose the form on the product page without having to modify the page.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.39
+
 ## 4.26.0
 
 ### Minor Changes

package/FramerScroller/SidebarGallery.tsx

@@ -10,7 +10,7 @@ import {
 import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'

package/RenderType/RenderType.tsx

@@ -42,6 +42,13 @@ export function RenderType<
 export function findByTypename<T extends TypeObject, Typename extends T['__typename']>(
   type: (T | undefined | null)[] | undefined | null,
   typename: Typename,
-): FilterTypeByTypename<T, Typename> {
+): FilterTypeByTypename<T, Typename> | undefined {
   return type?.find((item) => item?.__typename === typename) as FilterTypeByTypename<T, Typename>
 }
+
+export function isTypename<T extends TypeObject, Typenames extends T['__typename'][]>(
+  type: FilterTypeByTypename<T, T['__typename']>,
+  typename: Typenames,
+): type is FilterTypeByTypename<T, Typenames[number]> {
+  return typename.includes(type.__typename)
+}

package/RenderType/filterNonNullableKeys.ts

@@ -3,7 +3,7 @@ import type { OptionalKeysOf, Simplify } from 'type-fest'
 export function filterNonNullableKeys<
   T extends Record<string, unknown>,
   Keys extends OptionalKeysOf<T>,
->(items: (T | null | undefined)[] | null | undefined, values: Keys[]) {
+>(items: (T | null | undefined)[] | null | undefined, values: Keys[] = []) {
   if (!items) return []
 
   type ResultWithRequired = Simplify<

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.26.0",
+  "version": "4.27.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.3.0",
-    "@graphcommerce/framer-scroller": "2.1.38",
+    "@graphcommerce/framer-scroller": "2.1.39",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",