diff --git a/.nvmrc b/.nvmrc index bf79505..37e391f 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.14.0 +v16.17.0 diff --git a/package.json b/package.json index ff294dc..b8aab0a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "react", "typescript" ], - "version": "2.1.10", + "version": "2.1.11", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", "types": "./dist/index.d.ts", @@ -52,7 +52,9 @@ "@storybook/react": "^6.5.12", "@storybook/testing-library": "^0.0.13", "@storybook/theming": "^6.5.12", + "@types/inputmask": "^5.0.3", "@types/lodash": "^4.14.186", + "@types/lodash.flowright": "^3.5.7", "@types/node": "18.7.23", "@types/react": "^18.0.23", "@types/react-dom": "^18.0.7", @@ -109,7 +111,9 @@ "@nexpy/react-easy-context-api": "^1.0.2", "@xstyled/styled-components": "^3.7.0", "framer-motion": "^7.6.1", + "inputmask": "^5.0.7", "lodash": "^4.17.21", + "lodash.flowright": "^3.5.0", "react-hook-form": "^7.38.0", "react-select": "^5.5.6", "scheduler": "^0.23.0", diff --git a/src/utils/form-utils.stories.mdx b/src/utils/form-utils.stories.mdx new file mode 100644 index 0000000..e12a443 --- /dev/null +++ b/src/utils/form-utils.stories.mdx @@ -0,0 +1,29 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Form Utils + +
+ +## withHookFormMask + +Create a mask for React Hook Form based fields. + +Using the function with React Hook Form: + +```tsx + +``` + +
+ +## withMask + +Create a mask for generic inputs. + +Using the function without React Hook Form: + +```tsx + +``` diff --git a/src/utils/form-utils.ts b/src/utils/form-utils.ts new file mode 100644 index 0000000..fe43feb --- /dev/null +++ b/src/utils/form-utils.ts @@ -0,0 +1,48 @@ +import type { UseFormRegisterReturn } from 'react-hook-form' + +import Inputmask from 'inputmask' +import flowright from 'lodash.flowright' + +export const withHookFormMask = ( + registerReturn: UseFormRegisterReturn, + mask: Inputmask.Options['mask'], + options?: Inputmask.Options +) => { + let newRef + + if (registerReturn) { + const { ref } = registerReturn + + const maskInput = Inputmask({ + mask, + jitMasking: true, + ...options, + }) + + newRef = flowright(ref, _ref => { + if (_ref) maskInput.mask(_ref) + return _ref + }) + } + + return { + ...registerReturn, + ref: newRef, + } +} + +export const withMask = + (mask: Inputmask.Options['mask'], options?: Inputmask.Options) => + (input: HTMLElement | HTMLInputElement | null) => { + // + const maskInput = Inputmask({ + mask, + ...options, + }) + + if (input) { + maskInput.mask(input) + } + + return input + } diff --git a/src/utils/index.ts b/src/utils/index.ts index d5434ad..3ffb812 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,4 @@ export * from './formatters' export * from './styled' export * from './theme' +export * from './form-utils' diff --git a/yarn.lock b/yarn.lock index 9da2c8b..cf4d9f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3105,6 +3105,11 @@ resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" integrity sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w== +"@types/inputmask@^5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@types/inputmask/-/inputmask-5.0.3.tgz#f23492d5b5862c5737ae24bfe9fb8b2acf77b453" + integrity sha512-9aTXacRhf9D3+porVydLR28ll8/y3TQIrXEXv7ZWY0c3Lzl/1r4nHoaesZeh2Fd+UIefpWZrg2tkSnDn/dKUsw== + "@types/is-function@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022" @@ -3139,6 +3144,18 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/lodash.flowright@^3.5.7": + version "3.5.7" + resolved "https://registry.yarnpkg.com/@types/lodash.flowright/-/lodash.flowright-3.5.7.tgz#154144dab8ed6561e7317ea158a4f7556d24858b" + integrity sha512-stlmNXfnJr1yI7+xwMkU1IQxWS59JMw83MejH13y0STHv0iVBzOrw6KcxSAZQjSkAtoRGk3T0aWAt67vrF7V0Q== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*": + version "4.14.191" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" + integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== + "@types/lodash@^4.14.167", "@types/lodash@^4.14.186": version "4.14.186" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97" @@ -8062,6 +8079,11 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== +inputmask@^5.0.7: + version "5.0.7" + resolved "https://registry.yarnpkg.com/inputmask/-/inputmask-5.0.7.tgz#b04d5d4e1c85018893c3c8edb1a9f074b051007f" + integrity sha512-rUxbRDS25KEib+c/Ow+K01oprU/+EK9t9SOPC8ov94/ftULGDqj1zOgRU/Hko6uzoKRMdwCfuhAafJ/Wk2wffQ== + inquirer@6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca" @@ -9021,6 +9043,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.flowright@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/lodash.flowright/-/lodash.flowright-3.5.0.tgz#2b5fff399716d7e7dc5724fe9349f67065184d67" + integrity sha512-YxTYuodkvyINbDInmFcGGvkQwoAuoGUYosqstRTr5eq63GQt7WQ2xFU0wG1UfdbKYPwevd3zWDd6ybEE2g6qvA== + lodash.map@^4.5.1: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"