react-mui-form-validator 1.0.6 → 1.1.0

package/dist/index.js

@@ -0,0 +1,601 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core/validator/ValidationRules.jsx
+var require_ValidationRules = __commonJS({
+  "src/core/validator/ValidationRules.jsx"(exports, module2) {
+    "use strict";
+    var isExisty = function(value) {
+      return value !== null && value !== void 0;
+    };
+    var isEmpty = function(value) {
+      if (value instanceof Array) {
+        return value.length === 0;
+      }
+      return value === "" || !isExisty(value);
+    };
+    var isEmptyTrimed = function(value) {
+      if (typeof value === "string") {
+        return value.trim() === "";
+      }
+      return true;
+    };
+    var validations = {
+      matchRegexp: (value, regexp) => {
+        const validationRegexp = regexp instanceof RegExp ? regexp : new RegExp(regexp);
+        return isEmpty(value) || validationRegexp.test(value);
+      },
+      // eslint-disable-next-line
+      isEmail: (value) => validations.matchRegexp(value, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i),
+      isEmpty: (value) => isEmpty(value),
+      required: (value) => !isEmpty(value),
+      trim: (value) => !isEmptyTrimed(value),
+      isNumber: (value) => validations.matchRegexp(value, /^-?[0-9]\d*(\d+)?$/i),
+      isFloat: (value) => validations.matchRegexp(value, /^(?:-?[1-9]\d*|-?0)?(?:\.\d+)?$/i),
+      isPositive: (value) => {
+        if (isExisty(value)) {
+          return (validations.isNumber(value) || validations.isFloat(value)) && value >= 0;
+        }
+        return true;
+      },
+      maxNumber: (value, max) => isEmpty(value) || parseInt(value, 10) <= parseInt(max, 10),
+      minNumber: (value, min) => isEmpty(value) || parseInt(value, 10) >= parseInt(min, 10),
+      maxFloat: (value, max) => isEmpty(value) || parseFloat(value) <= parseFloat(max),
+      minFloat: (value, min) => isEmpty(value) || parseFloat(value) >= parseFloat(min),
+      isString: (value) => isEmpty(value) || typeof value === "string" || value instanceof String,
+      minStringLength: (value, length) => validations.isString(value) && value.length >= length,
+      maxStringLength: (value, length) => validations.isString(value) && value.length <= length,
+      // eslint-disable-next-line no-undef
+      isFile: (value) => isEmpty(value) || value instanceof File,
+      maxFileSize: (value, max) => isEmpty(value) || validations.isFile(value) && value.size <= parseInt(max, 10),
+      allowedExtensions: (value, fileTypes) => isEmpty(value) || validations.isFile(value) && fileTypes.split(",").indexOf(value.type) !== -1
+    };
+    module2.exports = validations;
+  }
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MuiComponent: () => MuiComponent,
+  MuiForm: () => MuiForm,
+  MuiSelect: () => MuiSelect2,
+  MuiTextField: () => MuiTextField
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/MuiTextField.tsx
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_react5 = __toESM(require("react"));
+
+// src/core/validator/ValidatorComponent.jsx
+var import_react4 = __toESM(require("react"));
+var import_prop_types3 = __toESM(require("prop-types"));
+var import_promise_polyfill2 = __toESM(require("promise-polyfill"));
+var import_react_lifecycles_compat = require("react-lifecycles-compat");
+
+// src/core/validator/ValidatorForm.jsx
+var import_react3 = __toESM(require("react"));
+var import_prop_types2 = __toESM(require("prop-types"));
+var import_promise_polyfill = __toESM(require("promise-polyfill"));
+
+// src/core/context/index.ts
+var import_react2 = __toESM(require("react"));
+
+// src/core/context/implementation.js
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_warning = __toESM(require("warning"));
+var MAX_SIGNED_31_BIT_INT = 1073741823;
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
+function getUniqueId() {
+  const key = "__global_unique_id__";
+  return commonjsGlobal[key] = (commonjsGlobal[key] || 0) + 1;
+}
+function objectIs(x, y) {
+  if (x === y) {
+    return x !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function createEventEmitter(value) {
+  let handlers = [];
+  return {
+    on(handler) {
+      handlers.push(handler);
+    },
+    off(handler) {
+      handlers = handlers.filter((h) => h !== handler);
+    },
+    get() {
+      return value;
+    },
+    set(newValue, changedBits) {
+      value = newValue;
+      handlers.forEach((handler) => handler(value, changedBits));
+    }
+  };
+}
+function onlyChild(children) {
+  return Array.isArray(children) ? children[0] : children;
+}
+function createReactContext(defaultValue, calculateChangedBits) {
+  const contextProp = "__create-react-context-" + getUniqueId() + "__";
+  class Provider extends import_react.Component {
+    emitter = createEventEmitter(this.props.value);
+    static childContextTypes = {
+      [contextProp]: import_prop_types.default.object.isRequired
+    };
+    getChildContext() {
+      return {
+        [contextProp]: this.emitter
+      };
+    }
+    static getDerivedStateFromProps(props, state) {
+      if (props.value !== nextProps.value) {
+        let oldValue = props.value;
+        let newValue = nextProps.value;
+        let changedBits;
+        if (objectIs(oldValue, newValue)) {
+          changedBits = 0;
+        } else {
+          changedBits = typeof calculateChangedBits === "function" ? calculateChangedBits(oldValue, newValue) : MAX_SIGNED_31_BIT_INT;
+          if (process.env.NODE_ENV !== "production") {
+            (0, import_warning.default)(
+              (changedBits & MAX_SIGNED_31_BIT_INT) === changedBits,
+              "calculateChangedBits: Expected the return value to be a 31-bit integer. Instead received: %s",
+              changedBits
+            );
+          }
+          changedBits |= 0;
+          if (changedBits !== 0) {
+            this.emitter.set(nextProps.value, changedBits);
+          }
+        }
+      }
+      return null;
+    }
+    render() {
+      return this.props.children;
+    }
+  }
+  class Consumer extends import_react.Component {
+    static contextTypes = {
+      [contextProp]: import_prop_types.default.object
+    };
+    observedBits;
+    state = {
+      value: this.getValue()
+    };
+    static getDerivedStateFromProps(props, state) {
+      let { observedBits } = nextProps;
+      this.observedBits = observedBits === void 0 || observedBits === null ? MAX_SIGNED_31_BIT_INT : observedBits;
+      return null;
+    }
+    componentDidMount() {
+      if (this.context[contextProp]) {
+        this.context[contextProp].on(this.onUpdate);
+      }
+      let { observedBits } = this.props;
+      this.observedBits = observedBits === void 0 || observedBits === null ? MAX_SIGNED_31_BIT_INT : observedBits;
+    }
+    componentWillUnmount() {
+      if (this.context[contextProp]) {
+        this.context[contextProp].off(this.onUpdate);
+      }
+    }
+    getValue() {
+      if (this.context[contextProp]) {
+        return this.context[contextProp].get();
+      } else {
+        return defaultValue;
+      }
+    }
+    onUpdate = (newValue, changedBits) => {
+      const observedBits = this.observedBits | 0;
+      if ((observedBits & changedBits) !== 0) {
+        this.setState({ value: this.getValue() });
+      }
+    };
+    render() {
+      return onlyChild(this.props.children)(this.state.value);
+    }
+  }
+  return {
+    Provider,
+    Consumer
+  };
+}
+var implementation_default = createReactContext;
+
+// src/core/context/index.ts
+var context_default = import_react2.default.createContext || implementation_default;
+
+// src/core/validator/ValidatorForm.jsx
+var import_ValidationRules = __toESM(require_ValidationRules());
+var FormContext = context_default("form");
+var ValidatorForm = class extends import_react3.default.Component {
+  static getValidator = (validator, value, includeRequired) => {
+    let result = true;
+    let name = validator;
+    if (name !== "required" || includeRequired) {
+      let extra;
+      const splitIdx = validator.indexOf(":");
+      if (splitIdx !== -1) {
+        name = validator.substring(0, splitIdx);
+        extra = validator.substring(splitIdx + 1);
+      }
+      result = import_ValidationRules.default[name](value, extra);
+    }
+    return result;
+  };
+  getFormHelpers = () => ({
+    form: {
+      attachToForm: this.attachToForm,
+      detachFromForm: this.detachFromForm,
+      instantValidate: this.instantValidate,
+      debounceTime: this.debounceTime
+    }
+  });
+  instantValidate = this.props.instantValidate !== void 0 ? this.props.instantValidate : true;
+  debounceTime = this.props.debounceTime;
+  childs = [];
+  errors = [];
+  attachToForm = (component) => {
+    if (this.childs.indexOf(component) === -1) {
+      this.childs.push(component);
+    }
+  };
+  detachFromForm = (component) => {
+    const componentPos = this.childs.indexOf(component);
+    if (componentPos !== -1) {
+      this.childs = this.childs.slice(0, componentPos).concat(this.childs.slice(componentPos + 1));
+    }
+  };
+  submit = (event) => {
+    if (event) {
+      event.preventDefault();
+      event.persist();
+    }
+    this.errors = [];
+    this.walk(this.childs).then((result) => {
+      if (this.errors.length) {
+        this.props.onError(this.errors);
+      }
+      if (result) {
+        this.props.onSubmit(event);
+      }
+      return result;
+    });
+  };
+  walk = (children, dryRun) => {
+    const self = this;
+    return new import_promise_polyfill.default((resolve) => {
+      let result = true;
+      if (Array.isArray(children)) {
+        import_promise_polyfill.default.all(
+          children.map((input) => self.checkInput(input, dryRun))
+        ).then((data) => {
+          data.forEach((item) => {
+            if (!item) {
+              result = false;
+            }
+          });
+          resolve(result);
+        });
+      } else {
+        self.walk([children], dryRun).then((result2) => resolve(result2));
+      }
+    });
+  };
+  checkInput = (input, dryRun) => new import_promise_polyfill.default((resolve) => {
+    let result = true;
+    const validators = input.props.validators;
+    if (validators) {
+      this.validate(input, true, dryRun).then((data) => {
+        if (!data) {
+          result = false;
+        }
+        resolve(result);
+      });
+    } else {
+      resolve(result);
+    }
+  });
+  validate = (input, includeRequired, dryRun) => new import_promise_polyfill.default((resolve) => {
+    const { value } = input.props;
+    input.validate(value, includeRequired, dryRun).then((valid) => {
+      if (!valid) {
+        this.errors.push(input);
+      }
+      resolve(valid);
+    });
+  });
+  find = (collection, fn) => {
+    for (let i = 0, l = collection.length; i < l; i++) {
+      const item = collection[i];
+      if (fn(item)) {
+        return item;
+      }
+    }
+    return null;
+  };
+  resetValidations = () => {
+    this.childs.forEach((child) => {
+      child.validateDebounced.cancel();
+      child.setState({ isValid: true });
+    });
+  };
+  isFormValid = (dryRun = true) => this.walk(this.childs, dryRun);
+  render() {
+    const {
+      onSubmit,
+      instantValidate,
+      onError,
+      debounceTime,
+      children,
+      ...rest
+    } = this.props;
+    return /* @__PURE__ */ import_react3.default.createElement(FormContext.Provider, { value: this.getFormHelpers() }, /* @__PURE__ */ import_react3.default.createElement("form", { ...rest, onSubmit: this.submit }, children));
+  }
+};
+ValidatorForm.addValidationRule = (name, callback) => {
+  import_ValidationRules.default[name] = callback;
+};
+ValidatorForm.getValidationRule = (name) => import_ValidationRules.default[name];
+ValidatorForm.hasValidationRule = (name) => import_ValidationRules.default[name] && typeof import_ValidationRules.default[name] === "function";
+ValidatorForm.removeValidationRule = (name) => {
+  delete import_ValidationRules.default[name];
+};
+ValidatorForm.propTypes = {
+  onSubmit: import_prop_types2.default.func.isRequired,
+  instantValidate: import_prop_types2.default.bool,
+  children: import_prop_types2.default.node,
+  onError: import_prop_types2.default.func,
+  debounceTime: import_prop_types2.default.number
+};
+ValidatorForm.defaultProps = {
+  onError: () => {
+  },
+  debounceTime: 0
+};
+var ValidatorForm_default = ValidatorForm;
+
+// src/core/utils/utils.ts
+var debounce = (func, wait, immediate) => {
+  let timeout;
+  function cancel() {
+    if (timeout !== void 0) {
+      clearTimeout(timeout);
+    }
+  }
+  const debounced = function debounced2(...args) {
+    const context = args;
+    const later = function delayed() {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+};
+
+// src/core/validator/ValidatorComponent.jsx
+var ValidatorComponent = class extends import_react4.default.Component {
+  static getDerivedStateFromProps(nextProps2, prevState) {
+    if (nextProps2.validators && nextProps2.errorMessages && (prevState.validators !== nextProps2.validators || prevState.errorMessages !== nextProps2.errorMessages)) {
+      return {
+        value: nextProps2.value,
+        validators: nextProps2.validators,
+        errorMessages: nextProps2.errorMessages
+      };
+    }
+    return {
+      value: nextProps2.value
+    };
+  }
+  state = {
+    isValid: true,
+    value: this.props.value,
+    errorMessages: this.props.errorMessages,
+    validators: this.props.validators
+  };
+  componentDidMount() {
+    this.configure();
+  }
+  shouldComponentUpdate(nextProps2, nextState) {
+    return this.state !== nextState || this.props !== nextProps2;
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.instantValidate && this.props.value !== prevState.value) {
+      this.validateDebounced(this.props.value, this.props.withRequiredValidator);
+    }
+  }
+  componentWillUnmount() {
+    this.form.detachFromForm(this);
+    this.validateDebounced.cancel();
+  }
+  getErrorMessage = () => {
+    const { errorMessages } = this.state;
+    const type = typeof errorMessages;
+    if (type === "string") {
+      return errorMessages;
+    } else if (type === "object") {
+      if (this.invalid.length > 0) {
+        return errorMessages[this.invalid[0]];
+      }
+    }
+    console.log("unknown errorMessages type", errorMessages);
+    return true;
+  };
+  instantValidate = true;
+  invalid = [];
+  configure = () => {
+    this.form.attachToForm(this);
+    this.instantValidate = this.form.instantValidate;
+    this.debounceTime = this.form.debounceTime;
+    this.validateDebounced = debounce(this.validate, this.debounceTime);
+  };
+  validate = (value, includeRequired = false, dryRun = false) => {
+    const validations = import_promise_polyfill2.default.all(
+      this.state.validators.map((validator) => ValidatorForm_default.getValidator(validator, value, includeRequired))
+    );
+    return validations.then((results) => {
+      this.invalid = [];
+      let valid = true;
+      results.forEach((result, key) => {
+        if (!result) {
+          valid = false;
+          this.invalid.push(key);
+        }
+      });
+      if (!dryRun) {
+        this.setState({ isValid: valid }, () => {
+          this.props.validatorListener(this.state.isValid);
+        });
+      }
+      return valid;
+    });
+  };
+  isValid = () => this.state.isValid;
+  makeInvalid = () => {
+    this.setState({ isValid: false });
+  };
+  makeValid = () => {
+    this.setState({ isValid: true });
+  };
+  renderComponent = (form) => {
+    if (!this.form) {
+      this.form = form;
+    }
+    return this.renderValidatorComponent();
+  };
+  render() {
+    return /* @__PURE__ */ import_react4.default.createElement(FormContext.Consumer, null, ({ form }) => /* @__PURE__ */ import_react4.default.createElement("div", { ...this.props.containerProps }, this.renderComponent(form)));
+  }
+};
+ValidatorComponent.propTypes = {
+  errorMessages: import_prop_types3.default.oneOfType([
+    import_prop_types3.default.array,
+    import_prop_types3.default.string
+  ]),
+  validators: import_prop_types3.default.array,
+  value: import_prop_types3.default.any,
+  validatorListener: import_prop_types3.default.func,
+  withRequiredValidator: import_prop_types3.default.bool,
+  containerProps: import_prop_types3.default.object
+};
+ValidatorComponent.defaultProps = {
+  errorMessages: "error",
+  validators: [],
+  validatorListener: () => {
+  }
+};
+(0, import_react_lifecycles_compat.polyfill)(ValidatorComponent);
+var ValidatorComponent_default = ValidatorComponent;
+
+// src/components/MuiTextField.tsx
+var TextValidator = class extends ValidatorComponent_default {
+  renderValidatorComponent() {
+    const {
+      error,
+      errorMessages,
+      validators,
+      requiredError,
+      helperText,
+      validatorListener,
+      withRequiredValidator,
+      containerProps,
+      ...rest
+    } = this.props;
+    const { isValid } = this.state;
+    return /* @__PURE__ */ import_react5.default.createElement(
+      import_TextField.default,
+      {
+        ...rest,
+        error: !isValid || error,
+        helperText: !isValid && this.getErrorMessage() || helperText
+      }
+    );
+  }
+};
+
+// src/components/MuiSelect.tsx
+var import_material = require("@mui/material");
+var import_react6 = __toESM(require("react"));
+var MuiSelect = class extends ValidatorComponent_default {
+  renderValidatorComponent() {
+    const {
+      error,
+      errorMessages,
+      validators,
+      requiredError,
+      helperText,
+      validatorListener,
+      withRequiredValidator,
+      containerProps,
+      ...rest
+    } = this.props;
+    const { isValid } = this.state;
+    return /* @__PURE__ */ import_react6.default.createElement(
+      import_material.TextField,
+      {
+        ...rest,
+        select: true,
+        error: !isValid || error,
+        helperText: !isValid && this.getErrorMessage() || helperText
+      }
+    );
+  }
+};
+
+// src/index.ts
+var MuiTextField = TextValidator;
+var MuiSelect2 = MuiSelect;
+var MuiComponent = ValidatorComponent_default;
+var MuiForm = ValidatorForm_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MuiComponent,
+  MuiForm,
+  MuiSelect,
+  MuiTextField
+});

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "react-mui-form-validator",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Validator for forms designed with material-ui components.",
-  "main": "./lib/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rimraf lib && npm install --ignore-scripts && babel src --out-dir lib",
-    "prepublish": "npm run build",
-    "lint": "eslint src/**"
+    "build": "tsup src/index.ts --dts"
   },
   "repository": {
     "type": "git",
@@ -14,7 +13,6 @@
   },
   "keywords": [
     "react",
-    "material-ui",
     "mui",
     "form",
     "form-validator",
@@ -28,29 +26,38 @@
   "homepage": "https://github.com/Blencm/react-mui-form-validator#readme",
   "dependencies": {
     "@mui/material": "^5.13.6",
-    "core-js": "^3.31.0",
+    "@types/prop-types": "^15.7.5",
+    "gud": "^1.0.0",
     "promise-polyfill": "^8.3.0",
     "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.1",
     "react-lifecycles-compat": "^3.0.4",
     "tiny-warning": "^1.0.3",
-    "typescript": "^5.1.6"
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.6",
+    "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.2.0 || ^19.0.0 || ^20.0.0"
+    "react": "^17.0.0 || ^18.2.0 || ^19.0.0 || ^20.0.0",
+    "react-dom": "^17.0.0 || ^18.2.0 || ^19.0.0 || ^20.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.5",
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-syntax-jsx": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
+    "@types/node": "^20.3.3",
+    "@types/promise-polyfill": "^6.0.4",
     "@types/react": "18.2.14",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.2",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-lifecycles-compat": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "17.0.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "rimraf": "^5.0.1"