create NumericStepperInput component

[arinchaik]

Description

• add NumericStepperInput component

[vmundhra]

@arinchaik I created a FieldNumberInput

import { Button, HStack, Input, useNumberInput } from '@chakra-ui/react';
import { useField } from '@formiz/core';

import { FormGroup } from '../FormGroup';

export const FieldNumberInput = (props: TODO) => {
  const {
    errorMessage,
    id,
    isValid,
    isSubmitted,
    resetKey,
    setValue,
    value,
    otherProps,
  } = useField(props);
  const { required, name } = props;
  const {
    children,
    label,
    helper,
    min = 1,
    max = 100000,
    step = 1,
    ...rest
  } = otherProps;
  const [isTouched, setIsTouched] = useState(false);
  const showError = !isValid && (isTouched || isSubmitted);

  const {
    valueAsNumber,
    getInputProps,
    getIncrementButtonProps,
    getDecrementButtonProps,
  } = useNumberInput({
    step,
    min,
    max,
  });

  const inc = getIncrementButtonProps();
  const dec = getDecrementButtonProps();
  const input = getInputProps();

  useEffect(() => {
    setValue(valueAsNumber);
  }, [valueAsNumber, setValue]);

  useEffect(() => {
    setIsTouched(false);
  }, [resetKey]);

  const formGroupProps = {
    errorMessage,
    helper,
    id,
    isRequired: !!required,
    label,
    showError,
    name,
    ...rest,
  };

  return (
    <FormGroup {...formGroupProps}>
      <HStack>
        <Button {...dec}>-</Button>
        <Input
          id={id}
          value={value || ''}
          //onChange={changeValue}
          onBlur={() => setIsTouched(true)}
          aria-invalid={showError}
          aria-describedby={!isValid ? `${id}-error` : undefined}
          min={min}
          max={max}
          step={step}
          {...input}
        />
        <Button {...inc}>+</Button>
      </HStack>
      {children}
    </FormGroup>
  );
};

which can be used under Formiz form as

<FieldNumberInput name="quantity" label="Quantity" required="Required" />