@graphcommerce/ecommerce-ui 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.5.1
+
+### Patch Changes
+
+- [#1660](https://github.com/graphcommerce-org/graphcommerce/pull/1660) [`e5048c5ec`](https://github.com/graphcommerce-org/graphcommerce/commit/e5048c5ec52b83dbe70a246ffdcea65b55a884c6) Thanks [@paales](https://github.com/paales)! - Flatten the NumberFieldElement to use the Controller directly
+
+- Updated dependencies [[`75ae24a93`](https://github.com/graphcommerce-org/graphcommerce/commit/75ae24a93bd74e3b9b7efda21ec7ba6fbe9a3a75)]:
+  - @graphcommerce/react-hook-form@3.3.4
+
+## 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

package/components/FormComponents/NumberFieldElement.tsx

@@ -0,0 +1,140 @@
+import {
+  extendableComponent,
+  iconMin,
+  iconPlus,
+  IconSvg,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import {
+  IconButton,
+  IconButtonProps,
+  SxProps,
+  Theme,
+  TextField,
+  TextFieldProps,
+} from '@mui/material'
+
+export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
+  TextFieldProps,
+  'type' | 'defaultValue'
+> & {
+  DownProps?: IconButtonProps
+  UpProps?: IconButtonProps
+  sx?: SxProps<Theme>
+} & Omit<ControllerProps<T>, 'render'>
+
+type OwnerState = { size?: 'small' | 'medium' }
+const componentName = 'TextInputNumber' as const
+const parts = ['quantity', 'quantityInput', 'button'] as const
+const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
+
+export function NumberFieldElement<T extends FieldValues = FieldValues>(
+  props: NumberFieldElementProps<T>,
+) {
+  const {
+    DownProps = {},
+    UpProps = {},
+    inputProps = {},
+    sx = [],
+    size = 'medium',
+    control,
+    name,
+    rules = {},
+    required,
+    defaultValue,
+    ...textFieldProps
+  } = props
+
+  const classes = withState({ size })
+
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
+  }
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+        const valueAsNumber = value ? parseFloat(value) : 0
+
+        return (
+          <TextField
+            {...textFieldProps}
+            name={name}
+            value={value ?? ''}
+            onChange={(ev) => {
+              const newValue = (ev.target as HTMLInputElement).valueAsNumber
+              onChange(Number.isNaN(newValue) ? '' : newValue)
+              textFieldProps.onChange?.(ev)
+            }}
+            onBlur={onBlur}
+            required={required}
+            error={invalid}
+            helperText={error ? error.message : textFieldProps.helperText}
+            size={size}
+            type='number'
+            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={() => {
+                    if ((valueAsNumber || Infinity) <= inputProps.min) return
+                    onChange(value - 1)
+                  }}
+                  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={() => {
+                    if (valueAsNumber >= (inputProps.max ?? Infinity)) return
+                    onChange(valueAsNumber + 1)
+                  }}
+                  tabIndex={-1}
+                  color='inherit'
+                  {...UpProps}
+                  className={`${classes.button} ${UpProps.className ?? ''}`}
+                >
+                  {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+                </IconButton>
+              ),
+            }}
+            inputProps={{
+              ...inputProps,
+              'aria-label': i18n._(/* i18n */ 'Number'),
+              className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+              sx: {
+                textAlign: 'center',
+                '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+                  appearance: 'none',
+                },
+              },
+            }}
+          />
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/TextFieldElement.tsx

@@ -0,0 +1,74 @@
+import {
+  Controller,
+  ControllerProps,
+  FieldError,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+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 = i18n._(/* i18n */ '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

@@ -9,7 +9,6 @@ export {
   SelectElement,
   SliderElement,
   SwitchElement,
-  TextFieldElement,
   ToggleButtonGroupElement,
 } from 'react-hook-form-mui'
 export type {
@@ -23,6 +22,8 @@ export type {
   SelectElementProps,
   SliderElementProps,
   SwitchElementProps,
-  TextFieldElementProps,
   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.4.0",
+  "version": "1.5.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@graphcommerce/graphql": "3.4.8",
-    "@graphcommerce/next-ui": "4.26.0",
-    "@graphcommerce/react-hook-form": "3.3.3",
+    "@graphcommerce/next-ui": "4.27.0",
+    "@graphcommerce/react-hook-form": "3.3.4",
     "@mui/icons-material": "^5.10.3",
     "@mui/x-date-pickers": "^5.0.0",
     "react-hook-form-mui": "^5.7.1"