react-mui-form-validator 1.1.2 → 1.1.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 blencm
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2022 blencm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/Readme.md

@@ -1,144 +1,219 @@
-## Validation component for material-ui forms
-
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)
-
-### Installation
-
-```
-npm install react-mui-form-validator
-
-```
-
-### Info
-
-Some rules can accept extra parameter, example:
-
-TextField
-```javascript
-<MuiTextField
-  {...someProps}
-  validators={["minNumber:0", "maxNumber:255", "matchRegexp:^[0-9]$"]}
-/>
-```
-
-### Usage Example
-
-You can pass any props of field components, but note that `errorText` prop will be replaced when validation errors occurred.
-Your component must [provide a theme](http://www.material-ui.com/#/get-started/usage).
-
-```javascript
-import React from "react";
-import Button from "@mui/material/Button";
-import { MuiForm, MuiTextField } from "react-mui-form-validator";
-
-class MyForm extends React.Component {
-  state = {
-    email: "",
-  };
-
-  handleChange = (event) => {
-    const email = event.target.value;
-    this.setState({ email });
-  };
-
-  handleSubmit = () => {
-    // your submit logic
-  };
-
-  render() {
-    const { email } = this.state;
-    return (
-      <MuiForm
-        onSubmit={this.handleSubmit}
-        onError={(errors) => console.log(errors)}
-      >
-        <MuiTextField
-          label="Email"
-          onChange={this.handleChange}
-          name="email"
-          value={email}
-          validators={["required", "isEmail"]}
-          errorMessages={["this field is required", "email is not valid"]}
-        />
-        <Button type="submit">Submit</Button>
-      </MuiForm>
-    );
-  }
-}
-```
-
-You can add your custom rules:
-
-```javascript
-
-import React from 'react';
-import Button from '@mui/material/Button';
-import { MuiForm, MuiTextField} from 'react-mui-form-validator';
-
-class ResetPasswordForm extends React.Component {
-
-    state = {
-        user: {
-            password: '',
-            repeatPassword: '',
-        },
-    };
-
-    componentDidMount() {
-        // custom rule will have name 'isPasswordMatch'
-        MuiForm.addValidationRule('isPasswordMatch', (value) => {
-            if (value !== this.state.user.password) {
-                return false;
-            }
-            return true;
-        });
-    }
-
-    componentWillUnmount() {
-        // remove rule when it is not needed
-        MuiForm.removeValidationRule('isPasswordMatch');
-    }
-
-    handleChange = (event) => {
-        const { user } = this.state;
-        user[event.target.name] = event.target.value;
-        this.setState({ user });
-    }
-
-    handleSubmit = () => {
-        // your submit logic
-    }
-
-    render() {
-        const { user } = this.state;
-
-        return (
-            <MuiForm
-                onSubmit={this.handleSubmit}
-            >
-                <MuiTextField
-                    label="Password"
-                    onChange={this.handleChange}
-                    name="password"
-                    type="password"
-                    validators={['required']}
-                    errorMessages={['this field is required']}
-                    value={user.password}
-                />
-                <MuiTextField
-                    label="Repeat password"
-                    onChange={this.handleChange}
-                    name="repeatPassword"
-                    type="password"
-                    validators={['isPasswordMatch', 'required']}
-                    errorMessages={['password mismatch', 'this field is required']}
-                    value={user.repeatPassword}
-                />
-                <Button type="submit">Submit</Button>
-            </MuiForm>
-        );
-    }
-
-```
-
-##### [Advanced usage](https://github.com/blencm/react-mui-form-validator/wiki)
+## Validation component for material-ui forms
+
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)
+
+### Installation
+
+```
+npm install react-mui-form-validator
+
+```
+
+### Info
+
+Some rules can accept extra parameter, example:
+
+TextField
+```javascript
+<MuiTextField
+  {...someProps}
+  validators={["minNumber:0", "maxNumber:255", "matchRegexp:^[0-9]$"]}
+/>
+```
+
+### Usage Example
+
+You can pass any props of field components, but note that `errorText` prop will be replaced when validation errors occurred.
+Your component must [provide a theme](http://www.material-ui.com/#/get-started/usage).
+
+```javascript
+
+import { useState } from "react";
+import "./App.css";
+import { MuiForm, MuiTextField } from "react-mui-form-validator";
+import { Button, IconButton, InputAdornment, Paper } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faEnvelope,
+  faEye,
+  faEyeSlash,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default function App(props: any) {
+  const [name, setName] = useState();
+  const [email, setEmail] = useState();
+  const [password, setPassword] = useState();
+  const [showPassword, setShowPassword] = useState(false);
+
+  const changeName = (event: any) => {
+    const name = event.target.value;
+    setName(name);
+  };
+
+  const changeEmail = (event: any) => {
+    const email = event.target.value;
+    setEmail(email);
+  };
+
+  const changePassword = (event: any) => {
+    const password = event.target.value;
+    setPassword(password);
+  };
+
+  const handleSubmit = () => {
+    // your submit logic
+  };
+
+  return (
+    <div className="App">
+      <center>
+        <Paper className="container">
+          <h3>Example Sign In</h3>
+          <MuiForm
+            onSubmit={handleSubmit}
+            onError={(errors: any) => console.log(errors)}
+          >
+            <MuiTextField
+              name="name"
+              //className="css-style-name" add your css style
+              //classes={classes.emailInput} //add your js or ts style
+              label="Name"
+              placeholder="Name"
+              onChange={changeName}
+              value={name}
+              validators={["required"]}
+              errorMessages={["this field is required"]}
+              fullWidth
+            />
+            <br />
+            <MuiTextField
+              name="email"
+              //className="css-style-name" add your css style
+              //classes={classes.emailInput} //add your js or ts style
+              label="Email"
+              placeholder="Email"
+              onChange={changeEmail}
+              value={email}
+              validators={["required", "isEmail"]}
+              errorMessages={["this field is required", "email is not valid"]}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faEnvelope} />
+                  </InputAdornment>
+                ),
+              }}
+              fullWidth
+            />
+            <br />
+            <MuiTextField
+              type={showPassword ? "text" : "password"}
+              style={{ marginBottom: 0 }}
+              name="password"
+              label="Password"
+              //InputLabelProps={{ shrink: true }}
+              placeholder="Password"
+              value={password}
+              onChange={changePassword}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faEnvelope} />
+                  </InputAdornment>
+                ),
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowPassword(!showPassword)}
+                      onMouseDown={(e) => e.preventDefault()}
+                      edge="end"
+                    >
+                      <FontAwesomeIcon
+                        icon={showPassword ? faEyeSlash : faEye}
+                      />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+              validators={["required"]}
+              errorMessages={["Password is required"]}
+              variant="outlined"
+              fullWidth
+            />
+            <br />
+            <Button type="submit" variant="outlined">
+              Sign In
+            </Button>
+          </MuiForm>
+        </Paper>
+      </center>
+    </div>
+  );
+}
+
+```
+css style example:
+
+```
+.App {
+  text-align: center;
+  width: 100%;
+}
+
+.container {
+  width: 500px;
+  height: auto;
+  background: #FFFFFF;
+  box-shadow: 0px 20px 56px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  padding: 15px;
+  margin: 20px;
+}
+
+```
+
+Class component example:
+
+```javascript
+
+import React from "react";
+import Button from "@mui/material/Button";
+import { MuiForm, MuiTextField } from "react-mui-form-validator";
+
+class MyForm extends React.Component {
+  state = {
+    email: "",
+  };
+
+  handleChange = (event) => {
+    const email = event.target.value;
+    this.setState({ email });
+  };
+
+  handleSubmit = () => {
+    // your submit logic
+  };
+
+  render() {
+    const { email } = this.state;
+    return (
+      <MuiForm
+        onSubmit={this.handleSubmit}
+        onError={(errors) => console.log(errors)}
+      >
+        <MuiTextField
+          label="Email"
+          onChange={this.handleChange}
+          name="email"
+          value={email}
+          validators={["required", "isEmail"]}
+          errorMessages={["this field is required", "email is not valid"]}
+        />
+        <Button type="submit">Submit</Button>
+      </MuiForm>
+    );
+  }
+}
+
+```

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-mui-form-validator",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "description": "Validator for forms designed with material-ui components.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.ts --dts"
+    "build": "tsup src/index.ts --dts --outDir=lib"
   },
   "repository": {
     "type": "git",
@@ -14,6 +14,7 @@
   "keywords": [
     "react",
     "mui",
+    "material-ui",
     "form",
     "form-validator",
     "validator"

package/tsconfig.json

@@ -1,26 +1,26 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "target": "es2022",
-
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-
-    "lib": ["es2022", "dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "outDir": "dist",
-    "declaration": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
-  },
-
-  "include": ["src/**/*"]
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2022",
+
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "lib": ["es2022", "dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "outDir": "lib",
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+
+  "include": ["src/**/*"]
 }