feat: refactor features to another lib

.github/ISSUE_TEMPLATE/bug_report.md

@@ -14,7 +14,7 @@ Before filing a bug, please confirm that you have:
 
 ### To Reproduce
 
-Please include a CodeSandbox demo of the problem if possible. (You can fork [this CodeSandbox](https://codesandbox.io/p/github/tiavina-mika/check-password-complexity-demo).)
+Please include a CodeSandbox demo of the problem if possible. (You can fork [this CodeSandbox](https://codesandbox.io/p/github/tiavina-mika/mui-password-checklist-demo).)
 
 Steps to reproduce the behavior:
 
@@ -32,7 +32,7 @@ If applicable, add screenshots to help explain your problem.
 
 ### System (please complete the following information)
 
-- check-password-complexity version: [e.g. 2.0.0]
+- mui-password-checklist version: [e.g. 2.0.0]
 - Browser: [e.g. Chrome, Firefox]
 - Node version: [e.g 16.4.2]
 - React version: [e.g 18.0.2]

__tests__/index.spec.ts

@@ -1,25 +1,25 @@
 // import {describe, expect, test} from '@jest/globals';
 
-import { getPasswordChecklist } from "../src/utils";
+import { validatePasswordChecklist } from "validate-password-checklist";
 
 // ------------ default options ------------ //
 describe('check password', () => {
   test('check min length', () => {
-    const { allChecksPassed, validationMessages } = getPasswordChecklist('abcde')
+    const { allChecksPassed, validationMessages } = validatePasswordChecklist('abcde')
     expect(allChecksPassed).toBe(false);
     const currentPassed = validationMessages.find((error) => error.key === 'lowerCase');
-    expect(currentPassed?.pass).toBe(true);
+    expect(currentPassed?.passed).toBe(true);
   });
 
   test('check two passed check', () => {
-    const { allChecksPassed, validationMessages } = getPasswordChecklist('abcde8')
+    const { allChecksPassed, validationMessages } = validatePasswordChecklist('abcde8')
     expect(allChecksPassed).toBe(false);
     const passedChecks = validationMessages.filter((error) => error.key && ['lowerCase', 'number'].includes(error.key));
     expect(passedChecks?.length).toBe(2);
   });
 
   test('check all checks passed', () => {
-    const { allChecksPassed, validationMessages } = getPasswordChecklist('abcde8=F')
+    const { allChecksPassed, validationMessages } = validatePasswordChecklist('abcde8=F')
     expect(allChecksPassed).toBe(true);
     expect(validationMessages?.length).toBe(5);
   });

package.json

@@ -69,7 +69,6 @@
     "test:watch": "jest watch",
     "test:coverage": "jest --coverage"
   },
-
   "peerDependencies": {
     "@emotion/react": "^11.11.3",
     "@mui/material": "^5.15.2",
@@ -113,5 +112,8 @@
     "vite": "5.0.8",
     "vite-tsconfig-paths": "^4.3.1"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "validate-password-checklist": "^0.1.2"
+  }
 }

src/PasswordChecklist.tsx

@@ -6,8 +6,8 @@ import VisibilityOff from './icons/VisibilityOff';
 import Visibility from './icons/Visibility';
 import Check from './icons/Check';
 import Close from './icons/Close';
-import { PasswordChecklistProps, PasswordsComplexityPass } from './types';
-import { getPasswordChecklist } from './utils';
+import { PasswordChecklistProps } from './types';
+import { validatePasswordChecklist, PasswordCheckListResult } from 'validate-password-checklist';
 
 const PasswordChecklist =  forwardRef<HTMLDivElement, PasswordChecklistProps & TextFieldProps>(({
   options,
@@ -17,7 +17,7 @@ const PasswordChecklist =  forwardRef<HTMLDivElement, PasswordChecklistProps & T
   validationMessages,
   ...rest
 }, ref) => {
-  const [errors, setErrors] = useState<PasswordsComplexityPass[]>([]);
+  const [rules, setRules] = useState<PasswordCheckListResult['validationMessages']>([]);
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
   const theme = useTheme();
@@ -27,9 +27,9 @@ const PasswordChecklist =  forwardRef<HTMLDivElement, PasswordChecklistProps & T
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 
-    const result = getPasswordChecklist(value, validationMessages, options);
+    const result = validatePasswordChecklist(value, validationMessages, options);
     const newErrors = result.validationMessages || [];
-    setErrors(newErrors);
+    setRules(newErrors);
 
     rest.onChange?.(event);
   };
@@ -65,20 +65,20 @@ const PasswordChecklist =  forwardRef<HTMLDivElement, PasswordChecklistProps & T
       {/* ------------------------------------------- */}
       {/* ------ password requirement checklist ----- */}
       {/* ------------------------------------------- */}
-      {errors.length > 0 && (
+      {rules.length > 0 && (
         <List sx={{ p: 0, mt: 1 }}>
-          {errors.map((error, index) => (
+          {rules.map((error, index) => (
               <ListItem key={index} sx={{ padding: 0 }}>
                 <ListItemIcon sx={{ minWidth: 24, '& svg': { width: 18 } }}>
                   {/* ------ left icon ------ */}
-                  {error.pass
+                  {error.passed
                     ? <Check fill={theme.palette.success.main} />
                     : <Close fill={theme.palette.error.main} />
                   }
                 </ListItemIcon>
                 {/* ------ error message ------ */}
                 <ListItemText
-                  sx={{ color: (theme: Theme) => error.pass
+                  sx={{ color: (theme: Theme) => error.passed
                     ? theme.palette.success.main
                     : theme.palette.error.main
                   }}

yarn.lock

@@ -3277,16 +3277,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"check-password-complexity@npm:^1.4.9":
-  version: 1.4.9
-  resolution: "check-password-complexity@npm:1.4.9"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.2 || ^18.2.0
-    react-dom: ^16.8.0 || ^17.0.2 || ^18.2.0
-  checksum: 10c0/1567222f66e60b62e9390b9b9cf3737fd36deb9487c1b1cafd4bf9985f28d3882291d50e3b15029e00fe101560dafc12639ad24e100e1db45469b25fe18a3d96
-  languageName: node
-  linkType: hard
-
 "cheerio-select@npm:^2.1.0":
   version: 2.1.0
   resolution: "cheerio-select@npm:2.1.0"
@@ -6930,7 +6920,6 @@ __metadata:
     "@typescript-eslint/parser": "npm:^6.20.0"
     "@vitejs/plugin-react": "npm:^4.2.1"
     babel-plugin-module-resolver: "npm:^5.0.0"
-    check-password-complexity: "npm:^1.4.9"
     copyfiles: "npm:^2.4.1"
     cspell: "npm:^6.31.1"
     eslint: "npm:^8.56.0"
@@ -6954,6 +6943,7 @@ __metadata:
     ts-add-js-extension: "npm:^1.6.4"
     ts-jest: "npm:^29.1.4"
     typescript: "npm:^5.2.2"
+    validate-password-checklist: "npm:^0.1.2"
     vite: "npm:5.0.8"
     vite-tsconfig-paths: "npm:^4.3.1"
   peerDependencies:
@@ -8790,6 +8780,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"validate-password-checklist@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "validate-password-checklist@npm:0.1.2"
+  peerDependencies:
+    "@emotion/react": ^11.11.3
+    "@mui/material": ^5.15.2
+    react: ^16.8.0 || ^17.0.2 || ^18.2.0
+    react-dom: ^16.8.0 || ^17.0.2 || ^18.2.0
+  checksum: 10c0/8ae7ee5b102ba89b95b6f9093f18e0f6528e0877b27a8e4dd0a875d555912d12701e24c2d894653ffc16b742371ec5f86e70c66f8b471b972cca4c26231bcdc4
+  languageName: node
+  linkType: hard
+
 "vite-tsconfig-paths@npm:^4.3.1":
   version: 4.3.2
   resolution: "vite-tsconfig-paths@npm:4.3.2"