@modul/mbui 0.0.0 → 0.0.1

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "packageManager": "yarn@3.5.1",
   "main": "src/index.ts",
   "scripts": {
     "build:demo": "webpack --config ./demo/webpack.config.js",
+    "dev:demo": "webpack serve --config ./demo/webpack.config.js --open",
     "demo": "yarn dlx http-server demo/dist -so -c-1"
   },
   "lintConfig": "./.eslintrc.json",
@@ -12,7 +13,8 @@
     "src"
   ],
   "dependencies": {
-    "react-datepicker": "4.16.0"
+    "react-datepicker": "4.16.0",
+    "react-imask": "7.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -52,7 +54,8 @@
     "tslib": "^2.5.0",
     "typescript": "4.4.4",
     "webpack": "^5.82.1",
-    "webpack-cli": "^5.1.1"
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "4.15.1"
   },
   "peerDependencies": {
     "classnames": "^2.3.2",

package/src/Base/Input/Input.tsx

@@ -0,0 +1,22 @@
+import React, { ChangeEvent, ForwardedRef } from 'react'
+import { IMaskInput } from 'react-imask'
+import { IInputProps } from './types'
+
+const Input = React.forwardRef<HTMLInputElement, IInputProps>(
+	({ onChange, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+			const val = event.target.value
+			onChange?.(val, event)
+		}
+
+		return (
+			<IMaskInput
+				ref={ref}
+				{...props}
+				onChange={handleChange}
+			/>
+		)
+	}
+)
+
+export default Input

package/src/Base/Input/index.ts

@@ -0,0 +1,3 @@
+import Input from './Input'
+
+export { Input }

package/src/Base/Input/types.ts

@@ -0,0 +1,10 @@
+import React, { ChangeEvent, ChangeEventHandler } from 'react'
+
+type CustomChangeEventHandler = (value: string, event: ChangeEvent<HTMLInputElement>) => void
+
+type CombinedChangeEventHandler = ChangeEventHandler<HTMLInputElement> & CustomChangeEventHandler
+
+export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	onChange?: CombinedChangeEventHandler
+	mask?: string | RegExp | (string | RegExp)[]
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 import { Button } from './Base/Buttons'
 import { TextLink } from './Base/Links'
 import { DatePicker } from './DatePicker'
+import { Input } from './Base/Input'
 
-export { Button, TextLink, DatePicker }
+export { Button, TextLink, DatePicker, Input }