feat: added FormControl input mask

package.json

@@ -68,6 +68,7 @@
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "^3.5.4",
+    "react-imask": "^7.1.3",
     "react-loading-skeleton": "^3.1.0",
     "react-popper": "^2.2.5",
     "react-proptype-conditional-require": "^1.0.4",

src/Form/FormControl.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
+import { IMaskInput } from 'react-imask';
 import { useFormGroupContext } from './FormGroupContext';
 import FormControlFeedback from './FormControlFeedback';
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
@@ -17,6 +18,7 @@ const FormControl = React.forwardRef(({
   floatingLabel,
   autoResize,
   onChange,
+  withMask,
   ...props
 }, ref) => {
   const {
@@ -71,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={as}
+        as={withMask ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}

src/Form/form-control.mdx

@@ -43,6 +43,89 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
+## Input phone mask
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Form.Group>
+      <Form.Control withMask mask="+{7}(000)000-00-00"
+        leadingElement={<Icon src={FavoriteBorder} />}
+        trailingElement={<Icon src={Verified} />}
+        floatingLabel="What kind of cats?"
+        value={value}
+        onAccept={
+          (value, unmaskedValue, mask) => console.log(unmaskedValue)
+        }
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </Form.Group>
+  );
+}
+```
+
+## Input card number mask
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+  console.log('============ value ===========', value);
+  return (
+    <Form.Group>
+      <Form.Control withMask mask="0000 0000 0000 0000"
+        leadingElement={<Icon src={FavoriteBorder} />}
+        trailingElement={<Icon src={Verified} />}
+        floatingLabel="What kind of cats?"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </Form.Group>
+  );
+}
+```
+
+## Input date mask
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+  console.log('============ value ===========', value);
+  return (
+    <Form.Group>
+      <Form.Control withMask mask={Date} min={new Date(1990, 0, 1)} max={new Date(2020, 0, 1)}
+        leadingElement={<Icon src={FavoriteBorder} />}
+        trailingElement={<Icon src={Verified} />}
+        floatingLabel="What kind of cats?"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </Form.Group>
+  );
+}
+```
+
+## Input Google-style OTP mask
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+  console.log('============ value ===========', value);
+  return (
+    <Form.Group>
+      <Form.Control withMask mask="G-000000000000"
+        leadingElement={<Icon src={FavoriteBorder} />}
+        trailingElement={<Icon src={Verified} />}
+        floatingLabel="What kind of cats?"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </Form.Group>
+  );
+}
+```
+
 
 ## Input types