@graphcommerce/ecommerce-ui 5.1.0-canary.0 → 5.1.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @graphcommerce/ecommerce-ui
 
+## 5.1.0-canary.10
+
+## 5.1.0-canary.9
+
+## 5.1.0-canary.8
+
+## 5.1.0-canary.7
+
+## 5.1.0-canary.6
+
+## 5.1.0-canary.5
+
+### Patch Changes
+
+- [`b1444b933`](https://github.com/graphcommerce-org/graphcommerce/commit/b1444b9336107d3ac111563f9b62a884f1b26a8d) - Bring password reset page more in line with standard forms, add missing translations. ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.4
+
+## 5.1.0-canary.3
+
+### Patch Changes
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`56d950ba3`](https://github.com/graphcommerce-org/graphcommerce/commit/56d950ba3d31828467b34f7e163586b628567a43) - Removed dependency on react-hook-form-mui ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.2
+
+## 5.1.0-canary.1
+
 ## 5.1.0-canary.0
 
 ## 5.0.0

package/components/FormComponents/AutoCompleteElement.tsx

@@ -0,0 +1,165 @@
+import {
+  Control,
+  Controller,
+  ControllerProps,
+  Path,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  Autocomplete,
+  AutocompleteProps,
+  Checkbox,
+  TextField,
+  TextFieldProps,
+  CircularProgress,
+} from '@mui/material'
+
+export type AutocompleteElementProps<
+  F extends FieldValues,
+  T,
+  M extends boolean | undefined,
+  D extends boolean | undefined,
+> = {
+  name: Path<F>
+  control?: Control<F>
+  options: T[]
+  loading?: boolean
+  multiple?: M
+  matchId?: boolean
+  rules?: ControllerProps['rules']
+  required?: boolean
+  label?: TextFieldProps['label']
+  showCheckbox?: boolean
+  autocompleteProps?: Omit<
+    AutocompleteProps<T, M, D, any>,
+    'name' | 'options' | 'loading' | 'renderInput'
+  >
+  textFieldProps?: Omit<TextFieldProps, 'name' | 'required' | 'label'>
+}
+
+type AutoDefault = {
+  id: string | number // must keep id in case of keepObject
+  label: string
+}
+
+export function AutocompleteElement<TFieldValues extends FieldValues>({
+  textFieldProps,
+  autocompleteProps,
+  name,
+  control,
+  options,
+  loading,
+  showCheckbox,
+  rules,
+  required,
+  multiple,
+  matchId,
+  label,
+}: AutocompleteElementProps<
+  TFieldValues,
+  AutoDefault | string | any,
+  boolean | undefined,
+  boolean | undefined
+>) {
+  const validationRules: ControllerProps['rules'] = {
+    ...rules,
+    ...(required && {
+      required: rules?.required || 'This field is required',
+    }),
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={validationRules}
+      render={({ field: { onChange, onBlur, value, ...fieldRest }, fieldState: { error } }) => {
+        const values = Array.isArray(value) ? (value as typeof value[]) : [value]
+        let currentValue = multiple ? value || [] : value || null
+        if (matchId) {
+          currentValue = multiple
+            ? values.map((i: any) => options.find((j) => (j.id || j) === i))
+            : options.find((i) => (i.id || i) === value) || null
+        }
+        return (
+          <Autocomplete
+            {...autocompleteProps}
+            value={currentValue}
+            loading={loading}
+            multiple={multiple}
+            options={options}
+            disableCloseOnSelect={
+              typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
+                ? autocompleteProps.disableCloseOnSelect
+                : !!multiple
+            }
+            isOptionEqualToValue={
+              autocompleteProps?.isOptionEqualToValue
+                ? autocompleteProps.isOptionEqualToValue
+                : (option, value) => (value ? option.id === (value?.id || value) : false)
+            }
+            getOptionLabel={
+              autocompleteProps?.getOptionLabel
+                ? autocompleteProps.getOptionLabel
+                : (option) => `${option?.label || option}`
+            }
+            onChange={(event, value, reason, details) => {
+              let changedVal = value
+              if (matchId) {
+                changedVal = Array.isArray(value)
+                  ? value.map((i: any) => i?.id || i)
+                  : value?.id || value
+              }
+              onChange(changedVal)
+              if (autocompleteProps?.onChange) {
+                autocompleteProps.onChange(event, value, reason, details)
+              }
+            }}
+            renderOption={
+              autocompleteProps?.renderOption ??
+              (showCheckbox
+                ? (props, option, { selected }) => (
+                    <li {...props}>
+                      <Checkbox sx={{ marginRight: 1 }} checked={selected} />
+                      {autocompleteProps?.getOptionLabel?.(option) || option.label || option}
+                    </li>
+                  )
+                : undefined)
+            }
+            onBlur={(event) => {
+              onBlur()
+              if (typeof autocompleteProps?.onBlur === 'function') {
+                autocompleteProps.onBlur(event)
+              }
+            }}
+            renderInput={(params) => (
+              <TextField
+                name={name}
+                required={rules?.required ? true : required}
+                label={label}
+                {...textFieldProps}
+                {...params}
+                error={!!error}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? <CircularProgress color='inherit' size={20} /> : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                  ...textFieldProps?.InputProps,
+                }}
+                inputProps={{
+                  ...params.inputProps,
+                  ...textFieldProps?.inputProps,
+                }}
+                helperText={error ? error.message : textFieldProps?.helperText}
+              />
+            )}
+            {...fieldRest}
+          />
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -0,0 +1,126 @@
+import {
+  Control,
+  FieldError,
+  Path,
+  useController,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  useTheme,
+} from '@mui/material'
+
+export type CheckboxButtonGroupProps<T extends FieldValues> = {
+  options: { id: string | number; label: string }[] | any[]
+  helperText?: string
+  name: Path<T>
+  required?: boolean
+  parseError?: (error: FieldError) => string
+  label?: string
+  labelKey?: string
+  valueKey?: string
+  onChange?: Function
+  returnObject?: boolean
+  disabled?: boolean
+  row?: boolean
+  control?: Control<T>
+  checkboxColor?: CheckboxProps['color']
+}
+
+export function CheckboxButtonGroup<TFieldValues extends FieldValues>({
+  helperText,
+  options,
+  label,
+  name,
+  parseError,
+  required,
+  labelKey = 'label',
+  valueKey = 'id',
+  returnObject,
+  disabled,
+  row,
+  control,
+  checkboxColor,
+  ...rest
+}: CheckboxButtonGroupProps<TFieldValues>): JSX.Element {
+  const theme = useTheme()
+  const {
+    field: { value = [], onChange },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    rules: required ? { required: 'This field is required' } : undefined,
+    control,
+  })
+
+  helperText = error
+    ? typeof parseError === 'function'
+      ? parseError(error)
+      : error.message
+    : helperText
+
+  const handleChange = (index: number | string) => {
+    const newArray: (string | number)[] | any[] = [...value]
+    const exists =
+      value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)) === -1
+    if (exists) {
+      newArray.push(returnObject ? options.find((i) => i[valueKey] === index) : index)
+    } else {
+      newArray.splice(
+        value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
+        1,
+      )
+    }
+    // setValue(name, newArray, { shouldValidate: true })
+    onChange(newArray)
+    if (typeof rest.onChange === 'function') {
+      rest.onChange(newArray)
+    }
+  }
+
+  return (
+    <FormControl error={invalid} required={required}>
+      {label && <FormLabel error={invalid}>{label}</FormLabel>}
+      <FormGroup row={row}>
+        {options.map((option: any) => {
+          const optionKey = option[valueKey]
+          if (!optionKey) {
+            console.error(
+              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
+              option,
+            )
+          }
+          const isChecked =
+            value.findIndex((item: any) =>
+              returnObject ? item[valueKey] === optionKey : item === optionKey,
+            ) !== -1
+          return (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  sx={{
+                    color: invalid ? theme.palette.error.main : undefined,
+                  }}
+                  color={checkboxColor || 'primary'}
+                  value={optionKey}
+                  checked={isChecked}
+                  disabled={disabled}
+                  onChange={() => handleChange(optionKey)}
+                />
+              }
+              label={option[labelKey]}
+              key={optionKey}
+            />
+          )
+        })}
+      </FormGroup>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  )
+}

package/components/FormComponents/CheckboxElement.tsx

@@ -0,0 +1,83 @@
+import {
+  Control,
+  Controller,
+  ControllerProps,
+  FieldError,
+  Path,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControl,
+  FormControlLabel,
+  FormControlLabelProps,
+  FormGroup,
+  FormHelperText,
+} from '@mui/material'
+
+export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
+  validation?: ControllerProps['rules']
+  name: Path<T>
+  parseError?: (error: FieldError) => string
+  label?: FormControlLabelProps['label']
+  helperText?: string
+  control?: Control<T>
+}
+
+export function CheckboxElement<TFieldValues extends FieldValues>({
+  name,
+  validation = {},
+  required,
+  parseError,
+  label,
+  control,
+  helperText,
+  ...rest
+}: CheckboxElementProps<TFieldValues>): JSX.Element {
+  if (required && !validation.required) {
+    validation.required = 'This field is required'
+  }
+
+  return (
+    <Controller
+      name={name}
+      rules={validation}
+      control={control}
+      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
+        const parsedHelperText = error
+          ? typeof parseError === 'function'
+            ? parseError(error)
+            : error.message
+          : helperText
+        return (
+          <FormControl required={required} error={invalid}>
+            <FormGroup row>
+              <FormControlLabel
+                label={label || ''}
+                control={
+                  <Checkbox
+                    {...rest}
+                    color={rest.color || 'primary'}
+                    sx={{
+                      ...rest.sx,
+                      color: invalid ? 'error.main' : undefined,
+                    }}
+                    value={value}
+                    checked={!!value}
+                    onChange={() => {
+                      onChange(!value)
+                    }}
+                  />
+                }
+              />
+            </FormGroup>
+            {parsedHelperText && (
+              <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
+            )}
+          </FormControl>
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/MultiSelectElement.tsx

@@ -0,0 +1,171 @@
+/* eslint-disable no-nested-ternary */
+import { IconSvg, iconClose } from '@graphcommerce/next-ui'
+import { Control, Controller, FieldError, Path, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Checkbox,
+  Chip,
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select,
+  SelectProps,
+} from '@mui/material'
+
+export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, 'value'> & {
+  options: { id: string | number; label: string }[] | any[]
+  label?: string
+  itemKey?: string
+  itemValue?: string
+  itemLabel?: string
+  required?: boolean
+  validation?: any
+  name: Path<T>
+  parseError?: (error: FieldError) => string
+  minWidth?: number
+  menuMaxHeight?: number
+  menuMaxWidth?: number
+  helperText?: string
+  showChips?: boolean
+  control?: Control<T>
+  showCheckbox?: boolean
+  formControlProps?: Omit<FormControlProps, 'fullWidth' | 'variant'>
+}
+
+const ITEM_HEIGHT = 48
+const ITEM_PADDING_TOP = 8
+
+export function MultiSelectElement<TFieldValues extends FieldValues>(
+  props: MultiSelectElementProps<TFieldValues>,
+): JSX.Element {
+  let {
+    options,
+    label = '',
+    itemKey = 'id',
+    itemValue = '',
+    itemLabel = 'label',
+    required = false,
+    validation = {},
+    parseError,
+    name,
+    menuMaxHeight = ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+    menuMaxWidth = 250,
+    minWidth = 120,
+    helperText,
+    showChips,
+    control,
+    showCheckbox,
+    formControlProps,
+    ...rest
+  } = props
+  if (required && !validation.required) {
+    validation.required = 'This field is required'
+  }
+
+  return (
+    <Controller
+      name={name}
+      rules={validation}
+      control={control}
+      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+        helperText = error
+          ? typeof parseError === 'function'
+            ? parseError(error)
+            : error.message
+          : helperText
+        return (
+          <FormControl
+            {...formControlProps}
+            style={{
+              ...formControlProps?.style,
+              minWidth,
+            }}
+            variant={rest.variant}
+            fullWidth={rest.fullWidth}
+            error={invalid}
+            size={rest.size}
+          >
+            {label && (
+              <InputLabel
+                size={rest.size === 'small' ? 'small' : undefined}
+                error={invalid}
+                htmlFor={rest.id || `select-multi-select-${name}`}
+                required={required}
+              >
+                {label}
+              </InputLabel>
+            )}
+            <Select
+              {...rest}
+              id={rest.id || `select-multi-select-${name}`}
+              multiple
+              label={label || undefined}
+              error={invalid}
+              value={value || []}
+              required={required}
+              onChange={onChange}
+              onBlur={onBlur}
+              MenuProps={{
+                ...rest.MenuProps,
+                PaperProps: {
+                  ...(rest.MenuProps?.PaperProps ?? {
+                    style: {
+                      maxHeight: menuMaxHeight,
+                      width: menuMaxWidth,
+                      ...rest.MenuProps?.PaperProps?.style,
+                    },
+                  }),
+                },
+              }}
+              renderValue={
+                typeof rest.renderValue === 'function'
+                  ? rest.renderValue
+                  : showChips
+                  ? (selected) => (
+                      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                        {((selected as any[]) || []).map((selectedValue) => (
+                          <Chip
+                            key={selectedValue}
+                            label={selectedValue}
+                            style={{ display: 'flex', flexWrap: 'wrap' }}
+                            onDelete={() => {
+                              onChange(value.filter((i: any) => i !== selectedValue))
+                              // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
+                            }}
+                            deleteIcon={<IconSvg src={iconClose} />}
+                          />
+                        ))}
+                      </div>
+                    )
+                  : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
+              }
+            >
+              {options.map((item) => {
+                const val: string | number = item[itemValue || itemKey] || item
+                const isChecked = Array.isArray(value) ? value.includes(val) : false
+                return (
+                  <MenuItem
+                    key={val}
+                    value={val}
+                    sx={{
+                      fontWeight: (theme) =>
+                        isChecked
+                          ? theme.typography.fontWeightBold
+                          : theme.typography.fontWeightRegular,
+                    }}
+                  >
+                    {showCheckbox && <Checkbox checked={isChecked} />}
+                    <ListItemText primary={item[itemLabel] || item} />
+                  </MenuItem>
+                )
+              })}
+            </Select>
+            {helperText && <FormHelperText>{helperText}</FormHelperText>}
+          </FormControl>
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/PasswordElement.tsx

@@ -0,0 +1,36 @@
+import { iconEye, iconEyeCrossed, IconSvg } from '@graphcommerce/next-ui'
+import { FieldValues } from '@graphcommerce/react-hook-form'
+import { IconButton, IconButtonProps, InputAdornment } from '@mui/material'
+import { MouseEvent, useState } from 'react'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type PasswordElementProps<T extends FieldValues> = TextFieldElementProps<T> & {
+  iconColor?: IconButtonProps['color']
+}
+
+export function PasswordElement<TFieldValues extends FieldValues>({
+  iconColor,
+  ...props
+}: PasswordElementProps<TFieldValues>): JSX.Element {
+  const [password, setPassword] = useState<boolean>(true)
+  return (
+    <TextFieldElement
+      {...props}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position='end'>
+            <IconButton
+              onMouseDown={(e: MouseEvent<HTMLButtonElement>) => e.preventDefault()}
+              onClick={() => setPassword(!password)}
+              tabIndex={-1}
+              color={iconColor ?? 'default'}
+            >
+              <IconSvg src={password ? iconEyeCrossed : iconEye} size='medium' />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      type={password ? 'password' : 'text'}
+    />
+  )
+}

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -0,0 +1,25 @@
+import { Path, useWatch, FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { PasswordElement, PasswordElementProps } from './PasswordElement'
+
+export type PasswordRepeatElementProps<T extends FieldValues> = PasswordElementProps<T> & {
+  passwordFieldName: Path<T>
+}
+export function PasswordRepeatElement<TFieldValues extends FieldValues>({
+  passwordFieldName,
+  ...rest
+}: PasswordRepeatElementProps<TFieldValues>) {
+  const pwValue = useWatch({
+    name: passwordFieldName,
+    control: rest.control,
+  })
+  return (
+    <PasswordElement
+      {...rest}
+      validation={{
+        validate: (value: string) =>
+          value === pwValue || i18n._(/* i18n */ "Passwords don't match"),
+      }}
+    />
+  )
+}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -0,0 +1,132 @@
+import {
+  Control,
+  FieldError,
+  Path,
+  useController,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import { ChangeEvent } from 'react'
+
+export type RadioButtonGroupProps<T extends FieldValues> = {
+  options: { label: string; id: string | number }[] | any[]
+  helperText?: string
+  name: Path<T>
+  required?: boolean
+  parseError?: (error: FieldError) => string
+  label?: string
+  labelKey?: string
+  valueKey?: string
+  type?: 'number' | 'string'
+  emptyOptionLabel?: 'string'
+  onChange?: (value: any) => void
+  returnObject?: boolean
+  row?: boolean
+  control?: Control<T>
+}
+
+export function RadioButtonGroup<TFieldValues extends FieldValues>({
+  helperText,
+  options,
+  label,
+  name,
+  parseError,
+  labelKey = 'label',
+  valueKey = 'id',
+  required,
+  emptyOptionLabel,
+  returnObject,
+  row,
+  control,
+  ...rest
+}: RadioButtonGroupProps<TFieldValues>): JSX.Element {
+  const theme = useTheme()
+  const {
+    field: { value, onChange },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    rules: required ? { required: 'This field is required' } : undefined,
+    control,
+  })
+
+  helperText = error
+    ? typeof parseError === 'function'
+      ? parseError(error)
+      : error.message
+    : helperText
+
+  const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const radioValue = (event.target as HTMLInputElement).value
+    const returnValue = returnObject
+      ? options.find((items) => items[valueKey] === radioValue)
+      : radioValue
+    // setValue(name, returnValue, { shouldValidate: true })
+    onChange(returnValue)
+    if (typeof rest.onChange === 'function') {
+      rest.onChange(returnValue)
+    }
+  }
+
+  return (
+    <FormControl error={invalid}>
+      {label && (
+        <FormLabel required={required} error={invalid}>
+          {label}
+        </FormLabel>
+      )}
+      <RadioGroup onChange={onRadioChange} name={name} row={row} value={value || ''}>
+        {emptyOptionLabel && (
+          <FormControlLabel
+            control={
+              <Radio
+                sx={{
+                  color: invalid ? theme.palette.error.main : undefined,
+                }}
+                checked={!value}
+              />
+            }
+            label={emptyOptionLabel}
+            value=''
+          />
+        )}
+        {options.map((option: any) => {
+          const optionKey = option[valueKey]
+          if (!optionKey) {
+            console.error(
+              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
+              option,
+            )
+          }
+          const isChecked = !!(
+            value && (returnObject ? value[valueKey] === optionKey : value === optionKey)
+          )
+          return (
+            <FormControlLabel
+              control={
+                <Radio
+                  sx={{
+                    color: invalid ? theme.palette.error.main : undefined,
+                  }}
+                  checked={isChecked}
+                />
+              }
+              value={optionKey}
+              label={option[labelKey]}
+              key={optionKey}
+            />
+          )
+        })}
+      </RadioGroup>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  )
+}

package/components/FormComponents/SliderElement.tsx

@@ -0,0 +1,73 @@
+import {
+  Control,
+  Controller,
+  ControllerProps,
+  FieldError,
+  Path,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  FormLabel,
+  Slider,
+  SliderProps,
+} from '@mui/material'
+
+export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
+  name: Path<T>
+  control?: Control<T>
+  label?: string
+  rules?: ControllerProps['rules']
+  parseError?: (error: FieldError) => string
+  required?: boolean
+  formControlProps?: FormControlProps
+}
+
+export function SliderElement<TFieldValues extends FieldValues>({
+  name,
+  control,
+  label,
+  rules = {},
+  parseError,
+  required,
+  formControlProps,
+  ...other
+}: SliderElementProps<TFieldValues>) {
+  if (required && !rules.required) {
+    rules.required = 'This field is required'
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field: { onChange, value }, fieldState: { invalid, error } }) => {
+        const parsedHelperText = error
+          ? typeof parseError === 'function'
+            ? parseError(error)
+            : error.message
+          : null
+        return (
+          <FormControl error={invalid} required={required} fullWidth {...formControlProps}>
+            {label && (
+              <FormLabel component='legend' error={invalid}>
+                {label}
+              </FormLabel>
+            )}
+            <Slider
+              {...other}
+              value={value}
+              onChange={onChange}
+              valueLabelDisplay={other.valueLabelDisplay || 'auto'}
+            />
+            {parsedHelperText && (
+              <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
+            )}
+          </FormControl>
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/SwitchElement.tsx

@@ -0,0 +1,28 @@
+import { Control, Controller, Path, FieldValues } from '@graphcommerce/react-hook-form'
+import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
+
+type IProps = Omit<FormControlLabelProps, 'control'>
+
+export type SwitchElementProps<T extends FieldValues> = IProps & {
+  name: Path<T>
+  control?: Control<T>
+}
+
+export function SwitchElement<TFieldValues extends FieldValues>({
+  name,
+  control,
+  ...other
+}: SwitchElementProps<TFieldValues>) {
+  return (
+    <FormControlLabel
+      control={
+        <Controller
+          name={name}
+          control={control}
+          render={({ field }) => <Switch {...field} checked={!!field.value} />}
+        />
+      }
+      {...other}
+    />
+  )
+}

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -0,0 +1,101 @@
+import {
+  Control,
+  Controller,
+  ControllerProps,
+  FieldError,
+  Path,
+  FieldValues,
+} from '@graphcommerce/react-hook-form'
+import {
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  FormLabelProps,
+  ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonGroupProps,
+  ToggleButtonProps,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
+  id: number | string
+  label: ReactNode
+}
+
+export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
+  required?: boolean
+  label?: string
+  validation?: ControllerProps['rules']
+  name: Path<T>
+  parseError?: (error: FieldError) => string
+  control?: Control<T>
+  options: SingleToggleButtonProps[]
+  formLabelProps?: FormLabelProps
+  helperText?: string
+}
+
+export function ToggleButtonGroupElement<TFieldValues extends FieldValues = FieldValues>({
+  name,
+  control,
+  label,
+  validation = {},
+  required,
+  options = [],
+  parseError,
+  helperText,
+  formLabelProps,
+  ...toggleButtonGroupProps
+}: ToggleButtonGroupElementProps<TFieldValues>) {
+  if (required && !validation.required) {
+    validation.required = 'This field is required'
+  }
+
+  const isRequired = required || !!validation?.required
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={validation}
+      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+        const renderHelperText = error
+          ? typeof parseError === 'function'
+            ? parseError(error)
+            : error.message
+          : helperText
+        return (
+          <FormControl error={invalid} required={isRequired}>
+            {label && (
+              <FormLabel
+                {...formLabelProps}
+                error={invalid}
+                required={isRequired}
+                sx={{ mb: 1, ...formLabelProps?.sx }}
+              >
+                {label}
+              </FormLabel>
+            )}
+            <ToggleButtonGroup
+              {...toggleButtonGroupProps}
+              value={value}
+              onBlur={onBlur}
+              onChange={(event, val) => {
+                onChange(val)
+                if (typeof toggleButtonGroupProps.onChange === 'function') {
+                  toggleButtonGroupProps.onChange(event, val)
+                }
+              }}
+            >
+              {options.map(({ label, id, ...toggleProps }) => (
+                <ToggleButton value={id} {...toggleProps} key={id}>
+                  {label}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+            {renderHelperText && <FormHelperText>{renderHelperText}</FormHelperText>}
+          </FormControl>
+        )
+      }}
+    />
+  )
+}

package/components/FormComponents/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.0",
+  "version": "5.1.0-canary.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,26 +12,22 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql": "5.1.0-canary.0",
-    "@graphcommerce/next-ui": "5.1.0-canary.0",
-    "@graphcommerce/react-hook-form": "5.1.0-canary.0",
-    "@mui/icons-material": "^5.10.3",
-    "@mui/x-date-pickers": "^5.0.0",
-    "react-hook-form-mui": "^5.7.1"
+    "@graphcommerce/graphql": "5.1.0-canary.10",
+    "@graphcommerce/next-ui": "5.1.0-canary.10",
+    "@graphcommerce/react-hook-form": "5.1.0-canary.10"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^5.1.0-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^5.1.0-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^5.1.0-canary.0",
-    "@playwright/test": "^1.21.1"
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.10",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.10",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.10"
   },
   "peerDependencies": {
     "@lingui/core": "^3.13.2",
     "@lingui/react": "^3.13.2",
-    "@mui/material": "5.5.3",
-    "framer-motion": "^6.2.4",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "^7.0.0",
     "next": "^12.1.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }