Deolys · Deolys · Aug 10, 2024 · Aug 10, 2024 · Aug 10, 2024 · Aug 10, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "arrowParens": "always",
+  "semi": true,
+  "bracketSpacing": true
+}
diff --git a/README.md b/README.md
@@ -1 +1,64 @@
-# React forms
+## React forms
+
+This project demonstrates a React application with two forms for user data collection, featuring comprehensive validation, data management using Redux, and image handling.
+
+Features:
+
+Multiple Routes: 
+  * Main route displays collected data.
+  * Two separate routes for form submissions.
+
+Data Collection and Management:
+  * Redux is used to store and manage form data from both forms.
+  * After form submission, the user is redirected to the main route.
+
+Form Validation:
+  * Yup library is used for validation in both forms.
+  * Error messages are displayed to guide users.
+  * Submit button is disabled until all required fields are filled and validation criteria are met.
+
+ Form Fields:
+  * Both forms include fields for:
+    * Name
+    * Age
+    * Email
+    * Gender selection
+    * Terms and conditions acceptance checkbox
+  * Input for image upload.
+
+Image Handling:
+  * Image is saved as base64 encoded data.
+  * The uploaded image is displayed on the main route after redirection.
+
+Password Handling:
+  * Both forms include password fields with password strength indication.
+
+Autocomplete Feature:
+  * Autocomplete functionality is implemented in both forms to enhance user experience.
+
+Technical Details:
+
+1. Framework: React
+2. State Management: Redux
+3. Validation Library: Yup
+4. Image Handling: Base64 encoding
+
+This project showcases a robust approach to form validation in a React application.
+
+
+## Getting Started
+1. Clone the repository
+```bash
+  https://github.com/Deolys/react-forms.git
+```
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Run the development server:
+
+```bash
+npm run dev
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,56 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactCompiler from 'eslint-plugin-react-compiler';
+import eslintPluginPrettier from 'eslint-plugin-prettier';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended, eslintConfigPrettier],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    react,
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+    'react-compiler': reactCompiler,
+    ...eslintConfigPrettier.plugins,
+    prettier: eslintPluginPrettier,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+    'react-compiler/react-compiler': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      {
+        allowExpressions: true,
+      },
+    ],
+    ...eslintConfigPrettier.rules,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React forms</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>