Change custom webpack

.browserlistrc

@@ -0,0 +1,3 @@
+ >0.2%
+ not dead
+ not op_mini all

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

.env

@@ -0,0 +1 @@
+PUBLIC_URL=/React-Use-Form

.eslintrc.js

@@ -0,0 +1,77 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    "jest/globals": true,
+    node: true,
+  },
+  extends: [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:react-hooks/recommended",
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react", "jest"],
+  rules: {
+    "react/jsx-filename-extension": 0,
+    quotes: [2, "double", { avoidEscape: true }],
+    "operator-linebreak": [
+      "error",
+      "after",
+      { overrides: { "?": "ignore", ":": "ignore" } },
+    ],
+    "implicit-arrow-linebreak": 0,
+    "import/no-useless-path-segments": 0,
+    "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
+    "no-confusing-arrow": 0,
+    "function-paren-newline": 0,
+    "object-curly-newline": 0,
+    "react/prop-types": 0,
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "error",
+    "global-require": 0,
+    "no-restricted-syntax": 0,
+    "jsx-a11y/mouse-events-have-key-events": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "react/jsx-props-no-spreading": 0,
+    "newline-per-chained-call": ["error", { ignoreChainWithDepth: 5 }],
+    "react/destructuring-assignment": 0,
+    "no-underscore-dangle": 0,
+    "react/require-default-props": 0,
+    "consistent-return": 0,
+    "react/jsx-no-bind": 0,
+    "react/no-array-index-key": 0,
+    "no-tabs": 0,
+    "comma-dangle": [
+      "error",
+      {
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "only-multiline",
+        exports: "always-multiline",
+        functions: "never",
+      },
+    ],
+    "import/prefer-default-export": 0,
+    "no-shadow": 0,
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+        optionalDependencies: true,
+        peerDependencies: true,
+      },
+    ],
+    "no-param-reassign": ["error", { props: false }],
+  },
+};

LICENSE

@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2020, Alexandr Sosunov [email protected]
+
+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.

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

demo/components/app/App.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useState } from "react";
+import { useForm } from "../../../src";
+/* import { useForm } from "../../../dist"; */
+import Input from "../UI/input";
+import BlackButton from "../UI/button/blackButton";
+import Progress from "../UI/progress/Progress";
+
+const INITIAL_FORM = {
+  text: {
+    value: "",
+    type: "text",
+    label: "text",
+  },
+  login: {
+    value: "",
+    validation: {
+      required: {
+        message: "Необходимо заполнить поле",
+      },
+    },
+    type: "text",
+    label: "Логин",
+  },
+  password: {
+    value: "",
+    validation: {
+      required: {
+        message: "Необходимо заполнить поле",
+      },
+      minLength: {
+        value: 4,
+        message: "Поле должно быть больше 4 символов",
+      },
+    },
+    type: "password",
+    label: "Пароль",
+  },
+};
+
+const App = () => {
+  const [loading, setLoading] = useState(false);
+
+  const { values, handlers, isFormInvalid } = useForm(INITIAL_FORM);
+
+  const submitHandler = useCallback(
+    (e) => {
+      e.preventDefault();
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+        console.log(values);
+      }, 1000);
+    },
+    [values]
+  );
+
+  return (
+    <form
+      className="card hoverable"
+      style={{
+        gridArea: "cc",
+        margin: 0,
+      }}
+      onSubmit={submitHandler}
+    >
+      <div className="card-content">
+        {Object.entries(handlers).map(([key, config]) => (
+          <Input
+            key={key}
+            label={config.label}
+            value={config.value}
+            disabled={loading}
+            onChange={config.onChange}
+            invalid={config.touched && config.invalid}
+            invalidMessage={config.invalidMessage}
+          />
+        ))}
+      </div>
+
+      <div className="card-action">
+        <BlackButton type="submit" disabled={isFormInvalid || loading}>
+          Войти
+        </BlackButton>
+      </div>
+
+      <Progress canVisible={loading} />
+    </form>
+  );
+};
+
+export default App;

demo/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/app";
+import EmptyLayout from "./components/layout/emptyLayout";
+import "materialize-css/dist/js/materialize.min";
+import "./assets/index.scss";
+
+ReactDOM.render(
+  <EmptyLayout>
+    <App />
+  </EmptyLayout>,
+  document.getElementById("root")
+);