feat(*NumberField): add possibility to specify minimum and maximum va…

…lues

src/forms/FormikNumberField.tsx

@@ -18,6 +18,8 @@ export interface FormikNumberFieldProps {
   required?: boolean
   hideError?: boolean
   precision?: number
+  min?: number
+  max?: number
   disabled?: boolean
   className?: {
     root?: string
@@ -43,6 +45,8 @@ export interface FormikNumberFieldProps {
  * @param required - Indicate whether the field is required or not.
  * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else.
  * @param precision - The optional precision defines the number of decimal places that are allowed.
+ * @param min - The optional min defines the minimum value that is allowed.
+ * @param max - The optional max defines the maximum value that is allowed.
  * @param disabled - Disables the field.
  * @param className - The optional className object allows you to override the default styling.
  * @returns Text field component with Formik state management.
@@ -58,6 +62,8 @@ export function FormikNumberField({
   required = false,
   hideError = false,
   precision,
+  min,
+  max,
   disabled = false,
   className,
 }: FormikNumberFieldProps) {
@@ -104,6 +110,8 @@ export function FormikNumberField({
               ? Math.round(precision)
               : undefined
           }
+          min={min}
+          max={max}
           className={{
             ...className?.numberField,
             input: twMerge(

src/forms/NumberField.stories.tsx

@@ -34,6 +34,26 @@ export function Precision() {
   )
 }
 
+export function MinMax() {
+  const [value, setValue] = useState('')
+  return (
+    <div>
+      <div>
+        The min and max props can be used to limit the allowed values. For this
+        example, the minimum value is set to 0 and the maximum value is set to
+        100.
+      </div>
+      <NumberField
+        value={value}
+        onChange={(newValue) => setValue(newValue)}
+        min={0}
+        max={100}
+      />
+      <div>Value: {value}</div>
+    </div>
+  )
+}
+
 export function Integer() {
   const [value, setValue] = useState('')
   return (

src/forms/NumberField.tsx

@@ -26,6 +26,8 @@ export interface NumberFieldProps {
   disabled?: boolean
   className?: NumberFieldClassName
   precision?: number
+  min?: number
+  max?: number
   [key: string]: any
 }
 
@@ -42,6 +44,8 @@ export function NumberField({
   disabled,
   className,
   precision,
+  min,
+  max,
 }: NumberFieldProps): React.ReactElement {
   const regex =
     typeof precision === 'number' && !isNaN(precision)
@@ -73,7 +77,15 @@ export function NumberField({
         type="text"
         value={value}
         onChange={(e) => {
-          if (e.target.value.match(regex) !== null) {
+          if (
+            e.target.value.match(regex) !== null &&
+            (e.target.value === '' ||
+              typeof min === 'undefined' ||
+              parseFloat(e.target.value) >= min) &&
+            (e.target.value === '' ||
+              typeof max === 'undefined' ||
+              parseFloat(e.target.value) <= max)
+          ) {
             onChange(e.target.value)
           } else {
             console.log(`input ${e.target.value} does not match regex ${regex}`)