@graphcommerce/ecommerce-ui 8.0.3-canary.4 → 8.0.3-canary.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @graphcommerce/ecommerce-ui
 
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+### Patch Changes
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
+  ([@paales](https://github.com/paales))
+
 ## 8.0.3-canary.4
 
 ### Patch Changes

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -21,6 +21,7 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/CheckboxElement.tsx

@@ -19,6 +19,7 @@ import {
 } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: FormControlLabelProps['label']
   helperText?: string

package/components/FormComponents/MultiSelectElement.tsx

@@ -27,6 +27,7 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
   itemValue?: string
   itemLabel?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   minWidth?: number
   menuMaxHeight?: number

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -14,7 +14,7 @@ export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   return (
     <PasswordElement
       {...rest}
-      validation={{
+      rules={{
         validate: (value: string) =>
           value === pwValue || i18n._(/* i18n */ "Passwords don't match"),
       }}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -20,6 +20,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/SelectElement.tsx

@@ -8,6 +8,7 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: ControllerProps<T>['rules']
   options?: O[]
   type?: 'string' | 'number'
@@ -19,22 +20,23 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
   required,
   options = [],
   type,
-  validation = {},
+  validation,
   control,
   defaultValue,
+  rules = validation ?? {},
   ...rest
 }: SelectElementProps<TFieldValues, O>): JSX.Element {
   const isNativeSelect = !!rest.SelectProps?.native
   const ChildComponent = isNativeSelect ? 'option' : MenuItem
 
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
   return (
     <Controller
       name={name}
-      rules={validation}
+      rules={rules}
       control={control}
       defaultValue={defaultValue}
       render={({ field: { onChange, value, ref, ...field }, fieldState: { invalid, error } }) => {

package/components/FormComponents/SliderElement.tsx

@@ -16,6 +16,7 @@ import {
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   required?: boolean
   formControlProps?: FormControlProps

package/components/FormComponents/TextFieldElement.tsx

@@ -1,10 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import {
-  Controller,
-  FieldError,
-  FieldValues,
-  UseControllerProps,
-} from '@graphcommerce/react-hook-form'
+import { Controller, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -12,8 +7,9 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
   'name' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: UseControllerProps<T>['rules']
-} & Omit<UseControllerProps<T>, 'rules'>
+} & UseControllerProps<T>
 
 export function TextFieldElement<TFieldValues extends FieldValues>({
   validation = {},
@@ -22,14 +18,15 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   name,
   control,
   defaultValue,
+  rules = validation,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  if (type === 'email' && !validation.pattern) {
-    validation.pattern = {
+  if (type === 'email' && !rules.pattern) {
+    rules.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,}))$/,
@@ -41,7 +38,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     <Controller
       name={name}
       control={control}
-      rules={validation}
+      rules={rules}
       defaultValue={defaultValue}
       render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
         <TextField

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -25,6 +25,7 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.3-canary.4",
+  "version": "8.0.3-canary.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.4",
-    "@graphcommerce/graphql": "^8.0.3-canary.4",
-    "@graphcommerce/next-ui": "^8.0.3-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.4",
-    "@graphcommerce/react-hook-form": "^8.0.3-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.4",
+    "@graphcommerce/eslint-config-pwa": "^8.0.3-canary.6",
+    "@graphcommerce/graphql": "^8.0.3-canary.6",
+    "@graphcommerce/next-ui": "^8.0.3-canary.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.3-canary.6",
+    "@graphcommerce/react-hook-form": "^8.0.3-canary.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.3-canary.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",