Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
267a620
init: start React. Forms task βš›οΈ
Quiddlee Nov 27, 2023
acdd1fa
fix: paths problems
Quiddlee Nov 27, 2023
d405a63
chore: change config files
Quiddlee Nov 29, 2023
f3ac897
feat: initialize app routing
Quiddlee Nov 29, 2023
a58d47b
feat: add initial styles
Quiddlee Nov 29, 2023
4cbdcd8
refactor: extract link button into separate component
Quiddlee Nov 30, 2023
9654363
feat: implement basic form layout
Quiddlee Nov 30, 2023
d01d1f8
chore: remove eslint rule
Quiddlee Nov 30, 2023
e908701
feat: improve form styles
Quiddlee Nov 30, 2023
22fdd5f
chore: disable eslint rule
Quiddlee Nov 30, 2023
0316297
feat: add form errors
Quiddlee Nov 30, 2023
8f6c6f0
chore: add hook form resolver
Quiddlee Nov 30, 2023
ff2a451
fix: layout issue
Quiddlee Nov 30, 2023
a693222
feat: add all required form fields
Quiddlee Dec 1, 2023
949b9e2
feat: implement hook form validation
Quiddlee Dec 1, 2023
15cb56b
refactor: encapsulate form header into a separate component
Quiddlee Dec 1, 2023
7f6b125
feat: add password input visibility toggle
Quiddlee Dec 1, 2023
35cabbf
fix: password input
Quiddlee Dec 2, 2023
6a63676
refactor: remove react hook form native required
Quiddlee Dec 2, 2023
94a0dc6
chore: remove unnecessary .gitkeep files
Quiddlee Dec 2, 2023
ea3fc06
feat: implement redirect user to the main page on success
Quiddlee Dec 2, 2023
7c579ef
feat: implement file validation
Quiddlee Dec 2, 2023
dc874d0
chore: change redux reducer rule
Quiddlee Dec 2, 2023
c1fcdfb
feat: initialize redux store
Quiddlee Dec 2, 2023
b675d5b
feat: implement to store hook form data in redux
Quiddlee Dec 2, 2023
3819571
feat: implement to render the stored data on the main route
Quiddlee Dec 2, 2023
855dcb0
refactor: change main data appearance
Quiddlee Dec 2, 2023
8a5b2b9
refactor: change app appearance
Quiddlee Dec 2, 2023
45841cb
fix: form issues
Quiddlee Dec 2, 2023
909cca1
refactor: change data render appearance
Quiddlee Dec 2, 2023
6a31dc7
feat: add uncontrolled form ui
Quiddlee Dec 2, 2023
1c68512
refactor: change to store the picture in base64 format
Quiddlee Dec 2, 2023
9bb219e
feat: add back button to form pages
Quiddlee Dec 2, 2023
5478fd7
feat: implement uncontrolled form data handling
Quiddlee Dec 2, 2023
675e2f6
refactor: change yup schema to be reused as shared
Quiddlee Dec 2, 2023
7045f1c
feat: implement form error showing & data dispatching
Quiddlee Dec 3, 2023
e146158
refactor: encapsulate data preparation logic
Quiddlee Dec 3, 2023
f69d5ae
refactor: change validation resolver to be more generic
Quiddlee Dec 3, 2023
c00b953
refactor: encapsulate form submitting logic in custom hook
Quiddlee Dec 3, 2023
cde5948
refactor: change to reuse form data display block
Quiddlee Dec 3, 2023
30890c2
fix: to show title based on form type
Quiddlee Dec 3, 2023
3d12d8c
feat: implement to show password strength meter
Quiddlee Dec 3, 2023
8864b5b
feat: implement to render new form data block on every new form
Quiddlee Dec 3, 2023
a7d2d80
fix: layout issue
Quiddlee Dec 3, 2023
d0d3022
refactor: change inline type to type declaration
Quiddlee Dec 3, 2023
6125248
refactor: show nice password strength errors
Quiddlee Dec 3, 2023
dbc5dcc
refactor: change form styles
Quiddlee Dec 3, 2023
8fe59ea
fix: to store datalist in redux store
Quiddlee Dec 3, 2023
2a28733
fix: check that the first letter is uppercase
Quiddlee Dec 3, 2023
529a24f
fix: typo
Quiddlee Dec 3, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
86 changes: 86 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'prettier',
],
ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'prettier.config.js', 'node_modules', 'tailwind.config.js'],
plugins: ['react', 'react-refresh', 'simple-import-sort', 'import', 'prettier', '@typescript-eslint'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
project: ['tsconfig.json'],
tsconfigRootDir: __dirname,
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state',
]
}],
'no-void': 0,
'jsx-a11y/label-has-associated-control': 0,
'react/jsx-props-no-spreading': 0,
'react/function-component-definition': 0,
'react/require-default-props': 0,
'react/react-in-jsx-scope': 0,
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
'import/extensions': ["error", "never"],
'import/namespace': 0,
'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
'import/order': [
'error',
{
groups: [
['external', 'builtin'],
'internal',
['sibling', 'parent'],
'index',
],
pathGroups: [
{
pattern: '@(react|react-native)',
group: 'external',
position: 'before',
},
{
pattern: '*',
group: 'internal',
},
],
pathGroupsExcludedImportTypes: ['internal', 'react'],
'newlines-between': 'always',
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
},
settings: {
'import/resolver': {
typescript: {
alwaysTryTypes: true,
project: './tsconfig.json',
},
node: {
extensions: ['.js','.jsx','.ts','.tsx']
},
},
react: {
version: 'detect',
},
},
};
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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?
4 changes: 4 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run precommit
6 changes: 6 additions & 0 deletions .lintstagedrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
'./src/**/*.{tsx,ts}': [
'npm run lint',
'npm run format:fix',
],
};
20 changes: 20 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>βš›οΈ</text></svg>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<title>React. Forms</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading