@graphcommerce/ecommerce-ui 1.3.3 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.5.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
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`9e6fd498e`](https://github.com/graphcommerce-org/graphcommerce/commit/9e6fd498e3242ab30602767ae77a8e22f80d9fd3) Thanks [@paales](https://github.com/paales)! - Support for defaultValue for TextFieldElement
+
+- Updated dependencies [[`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8)]:
+  - @graphcommerce/next-ui@4.27.0
+
+## 1.4.0
+
+### Minor Changes
+
+- [#1645](https://github.com/graphcommerce-org/graphcommerce/pull/1645) [`fad7b6b48`](https://github.com/graphcommerce-org/graphcommerce/commit/fad7b6b48732fd631599c17abd8961de3f49c7dc) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Export all react-hook-form-mui components
+
+### Patch Changes
+
+- Updated dependencies [[`42e7fac75`](https://github.com/graphcommerce-org/graphcommerce/commit/42e7fac75712f9bda7a6b919ede14b3c75d07771)]:
+  - @graphcommerce/next-ui@4.26.0
+
 ## 1.3.3
 
 ### Patch Changes

package/components/FormComponents/NumberFieldElement.tsx

@@ -0,0 +1,120 @@
+import {
+  extendableComponent,
+  iconMin,
+  iconPlus,
+  IconSvg,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import {
+  IconButton,
+  IconButtonProps,
+  SxProps,
+  useForkRef,
+  Theme,
+  useEventCallback,
+} from '@mui/material'
+import { ChangeEvent, Ref, useRef } from 'react'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
+  TextFieldElementProps<T>,
+  'type'
+> & {
+  DownProps?: IconButtonProps
+  UpProps?: IconButtonProps
+  sx?: SxProps<Theme>
+}
+
+type OwnerState = { size?: 'small' | 'medium' }
+const name = 'TextInputNumber' as const
+const parts = ['quantity', 'quantityInput', 'button'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function NumberFieldElement<T extends FieldValues = FieldValues>(
+  props: NumberFieldElementProps<T>,
+) {
+  const {
+    DownProps = {},
+    UpProps = {},
+    inputProps = {},
+    inputRef,
+    sx = [],
+    size = 'medium',
+    ...textFieldProps
+  } = props
+
+  const classes = withState({ size })
+  const ref = useRef<HTMLInputElement>(null)
+  const forkRef = useForkRef(ref, inputRef as Ref<HTMLInputElement>)
+
+  return (
+    <TextFieldElement
+      {...textFieldProps}
+      size={size}
+      type='number'
+      inputRef={forkRef}
+      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      sx={[{ width: responsiveVal(80, 120) }, ...(Array.isArray(sx) ? sx : [sx])]}
+      autoComplete='off'
+      InputProps={{
+        ...textFieldProps.InputProps,
+        startAdornment: (
+          <IconButton
+            aria-label={i18n._(/* i18n */ 'Decrease')}
+            size='medium'
+            edge='start'
+            onClick={useEventCallback(() => {
+              if ((ref.current?.value ?? Infinity) >= inputProps.max) return
+
+              ref.current?.stepUp()
+              ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
+            })}
+            tabIndex={-1}
+            color='inherit'
+            {...DownProps}
+            className={`${classes.button} ${DownProps.className ?? ''}`}
+          >
+            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+          </IconButton>
+        ),
+        endAdornment: (
+          <IconButton
+            aria-label={i18n._(/* i18n */ 'Increase')}
+            size='medium'
+            edge='end'
+            onClick={useEventCallback(() => {
+              if ((ref.current?.value ?? 0) <= inputProps.min) return
+
+              ref.current?.stepDown()
+              ref.current?.dispatchEvent(new Event('change', { bubbles: true }))
+            })}
+            tabIndex={-1}
+            color='inherit'
+            {...UpProps}
+            className={`${classes.button} ${UpProps.className ?? ''}`}
+          >
+            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+          </IconButton>
+        ),
+      }}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        if (textFieldProps.onChange) textFieldProps.onChange(e)
+      }}
+      inputProps={{
+        ...inputProps,
+        'aria-label': i18n._(/* i18n */ 'Number'),
+        sx: [
+          {
+            textAlign: 'center',
+            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+              appearance: 'none',
+            },
+          },
+        ],
+        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+      }}
+    />
+  )
+}

package/components/FormComponents/TextFieldElement.tsx

@@ -0,0 +1,73 @@
+import {
+  Controller,
+  ControllerProps,
+  FieldError,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import { TextField, TextFieldProps } from '@mui/material'
+
+export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
+  TextFieldProps,
+  'name' | 'defaultValue'
+> & {
+  validation?: ControllerProps['rules']
+  parseError?: (error: FieldError) => string
+} & Pick<ControllerProps<T>, 'control' | 'defaultValue' | 'name'>
+
+/** This is a copy of the default one, but allowing defaultValue */
+export function TextFieldElement<TFieldValues extends FieldValues = FieldValues>({
+  validation = {},
+  parseError,
+  type,
+  required,
+  name,
+  control,
+  defaultValue,
+  ...rest
+}: TextFieldElementProps<TFieldValues>): JSX.Element {
+  if (required && !validation.required) {
+    validation.required = 'This field is required'
+  }
+
+  if (type === 'email' && !validation.pattern) {
+    validation.pattern = {
+      // eslint-disable-next-line no-useless-escape
+      value:
+        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      message: 'Please enter a valid email address',
+    }
+  }
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={validation}
+      defaultValue={defaultValue}
+      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => (
+        <TextField
+          {...rest}
+          name={name}
+          value={value ?? ''}
+          onChange={(ev) => {
+            onChange(ev)
+            if (typeof rest.onChange === 'function') {
+              rest?.onChange(ev)
+            }
+          }}
+          onBlur={onBlur}
+          required={required}
+          type={type}
+          error={invalid}
+          helperText={
+            error
+              ? typeof parseError === 'function'
+                ? parseError(error)
+                : error.message
+              : rest.helperText
+          }
+        />
+      )}
+    />
+  )
+}

package/components/FormComponents/index.ts

@@ -1,2 +1,29 @@
-export { TextFieldElement, SelectElement } from 'react-hook-form-mui'
-export type { TextFieldElementProps, SelectElementProps } from 'react-hook-form-mui'
+export {
+  AutocompleteElement,
+  CheckboxButtonGroup,
+  CheckboxElement,
+  MultiSelectElement,
+  PasswordElement,
+  PasswordRepeatElement,
+  RadioButtonGroup,
+  SelectElement,
+  SliderElement,
+  SwitchElement,
+  ToggleButtonGroupElement,
+} from 'react-hook-form-mui'
+export type {
+  AutocompleteElementProps,
+  CheckboxButtonGroupProps,
+  CheckboxElementProps,
+  MultiSelectElementProps,
+  PasswordElementProps,
+  PasswordRepeatElementProps,
+  RadioButtonGroupProps,
+  SelectElementProps,
+  SliderElementProps,
+  SwitchElementProps,
+  ToggleButtonGroupElementProps,
+} from 'react-hook-form-mui'
+
+export * from './TextFieldElement'
+export * from './NumberFieldElement'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/next-ui": "4.25.0",
+    "@graphcommerce/next-ui": "4.27.0",
     "@graphcommerce/react-hook-form": "3.3.3",
     "@mui/icons-material": "^5.10.3",
     "@mui/x-date-pickers": "^5.0.0",