Allow rules to be a single rule

Author: zackify

README.md

@@ -50,9 +50,11 @@ It just needs to support a `handleChange` `handleBlur` and `value` prop. This is
 
 ```js
 import React from "react";
-import { useField, UseFieldProps } from "react-validify";
+import { useField, FieldProps } from "react-validify";
 
-const Input = ({ name, rules }: UseFieldProps) => {
+type Props = { placeholder: string } & FieldProps;
+
+const Input = ({ name, rules, placeholder }: Props) => {
   let { handleChange, handleBlur, value, errors } = useField({ name, rules });
 
   return (
@@ -62,6 +64,7 @@ const Input = ({ name, rules }: UseFieldProps) => {
         name={name}
         value={value}
         onBlur={handleBlur}
+        placeholder={placeholder}
         onChange={(event) => handleChange(event.target.value)}
       />
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-validify",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "description": "Form validation made easy",
   "main": "dist/index.js",
   "module": "lib/index.js",

src/index.ts

@@ -1,6 +1,6 @@
-import { Form } from "./form";
+export * from "./form";
+export * from "./use-field";
+export * from "./use-submit";
 import * as rules from "./rules";
-import useField from "./use-field";
-import useSubmit from "./use-submit";
 
-export { Form, useField, useSubmit, rules };
+export { rules };

src/rules.ts

@@ -1,13 +1,15 @@
 export type RuleFn = (
   value: string,
-  values: { [key: string]: string },
+  values: { [key: string]: string }
 ) => string | boolean | undefined | null;
 
+export type RuleFns = RuleFn | RuleFn[];
+
 // Taken from Stackoverflow
-export const email: RuleFn = value => {
+export const email: RuleFn = (value) => {
   var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-  if (!re.test(String(value).toLowerCase())) return 'Email address is invalid';
+  if (!re.test(String(value).toLowerCase())) return "Email address is invalid";
 };
 
-export const required: RuleFn = value =>
-  !value || !value.toString().length ? 'This field is required' : null;
+export const required: RuleFn = (value) =>
+  !value || !value.toString().length ? "This field is required" : null;

src/use-field.ts

@@ -3,14 +3,14 @@ import get from "lodash/get";
 import set from "lodash/set";
 import validate from "./validate";
 import { FormContext } from "./form";
-import { RuleFn } from "rules";
+import { RuleFns } from "rules";
 
-export type UseFieldProps = {
+export type FieldProps = {
   name: string;
-  rules?: RuleFn[];
+  rules?: RuleFns;
 };
 
-const useField = ({ name, rules: fieldRules }: UseFieldProps) => {
+export const useField = ({ name, rules: fieldRules }: FieldProps) => {
   const {
     errors,
     values,
@@ -23,7 +23,13 @@ const useField = ({ name, rules: fieldRules }: UseFieldProps) => {
 
   //set the rules when they change, clear when unmounted
   useEffect(() => {
-    rules.current[name] = fieldRules || [];
+    //This check lets us pass in a single rule without making an array, or an array of rules
+    if (Array.isArray(fieldRules)) {
+      rules.current[name] = fieldRules;
+    } else {
+      rules.current[name] = fieldRules ? [fieldRules] : [];
+    }
+
     return () => {
       rules.current[name] = [];
     };
@@ -86,5 +92,3 @@ const useField = ({ name, rules: fieldRules }: UseFieldProps) => {
     errors: fieldErrors.length ? fieldErrors : null,
   };
 };
-
-export default useField;

src/use-submit.ts

@@ -2,7 +2,7 @@ import React from "react";
 import validate from "./validate";
 import { FormContext } from "./form";
 
-const useSubmit = () => {
+export const useSubmit = () => {
   const {
     rules,
     values,
@@ -36,5 +36,3 @@ const useSubmit = () => {
     canSubmit: !errors.length,
   };
 };
-
-export default useSubmit;

src/validate.ts

@@ -1,7 +1,6 @@
 import get from "lodash/get";
 import { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { Error, RulesRef } from "./form";
-import { RuleFn } from "rules";
 
 type Props = {
   values: any;

tests/form.test.js

@@ -1,6 +1,10 @@
 import React from "react";
 import { render, fireEvent, wait, act } from "@testing-library/react";
-import { TestForm, TestFormWithRemovedField } from "./helpers/form";
+import {
+  TestForm,
+  TestFormWithRemovedField,
+  TestFormWithSingleRule,
+} from "./helpers/form";
 
 test("Checks dependent rule", async () => {
   let errorMessage = "Must be longer value than date 2 field";
@@ -210,3 +214,19 @@ test(`Doesnt check rule after component is unmounted`, async () => {
   //it should call submit even though email is empty, because it was unmounted
   expect(spy.mock.calls[0][0].email).toEqual("");
 });
+
+test(`Passing in single rule without array works correctly`, () => {
+  let { queryByPlaceholderText, queryByText } = render(
+    <TestFormWithSingleRule />
+  );
+  const email = queryByPlaceholderText("email");
+
+  fireEvent.focus(email);
+  fireEvent.change(email, { target: { value: "testtesst.com" } });
+  fireEvent.blur(email);
+
+  expect(queryByText("Email address is invalid")).toBeTruthy();
+  fireEvent.change(email, { target: { value: "[email protected]" } });
+  fireEvent.blur(email);
+  expect(queryByText("Email address is invalid")).toBeNull();
+});

tests/helpers/form.tsx

@@ -55,3 +55,20 @@ export const TestFormWithRemovedField = (props: Props) => {
 
   return <TestForm {...props} unmountEmail={unmountEmail} />;
 };
+
+export const TestFormWithSingleRule = ({
+  onSubmit,
+  noRules,
+  nameRule,
+  unmountEmail,
+}: Props) => {
+  let [values, setValues] = useState<TestValues>({ email: "test" });
+
+  return (
+    <Form values={values} onValues={setValues}>
+      <Input name="email" rules={email} />
+
+      <Submit onSubmit={onSubmit} />
+    </Form>
+  );
+};

tests/helpers/input.tsx

@@ -1,19 +1,18 @@
 import React from "react";
-import useField from "../../src/use-field";
+import useField, { FieldProps } from "../../src/use-field";
 
-const Input = (props) => {
+const Input = ({ name, rules }: FieldProps) => {
   let { handleChange, handleBlur, value, errors } = useField({
-    name: props.name,
-    rules: props.rules,
+    name,
+    rules,
   });
   return (
     <div>
       {errors ? <p>{errors[0]}</p> : null}
       <input
-        {...props}
         value={value || ""}
         onBlur={handleBlur}
-        placeholder={props.name}
+        placeholder={name}
         onChange={(event) => handleChange(event.target.value)}
       />
     </div>