From 7aa142dde0bde029e402aabe01a30cfbae741877 Mon Sep 17 00:00:00 2001 From: jack13only Date: Sat, 30 Apr 2022 22:13:10 +0300 Subject: [PATCH 001/203] init: create react template --- .eslintrc | 47 ++++++++++++++++++ .gitignore | 107 +++++++++++++++++++++++++++++++++++++++++ .prettierignore | 11 +++++ .prettierrc.json | 9 ++++ package.json | 55 +++++++++++++++++++++ public/favicon.ico | Bin 0 -> 9662 bytes public/index.html | 19 ++++++++ public/manifest.json | 15 ++++++ public/robots.txt | 3 ++ src/App.scss | 0 src/App.test.tsx | 15 ++++++ src/App.tsx | 8 +++ src/app/hooks.ts | 6 +++ src/app/store.ts | 14 ++++++ src/index.scss | 14 ++++++ src/index.tsx | 21 ++++++++ src/react-app-env.d.ts | 1 + src/setupTests.ts | 5 ++ tsconfig.json | 26 ++++++++++ 19 files changed, 376 insertions(+) create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc.json create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/manifest.json create mode 100644 public/robots.txt create mode 100644 src/App.scss create mode 100644 src/App.test.tsx create mode 100644 src/App.tsx create mode 100644 src/app/hooks.ts create mode 100644 src/app/store.ts create mode 100644 src/index.scss create mode 100644 src/index.tsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/setupTests.ts create mode 100644 tsconfig.json diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..97a74f2 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,47 @@ +{ + "parser": "@typescript-eslint/parser", + "extends": [ + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier", + "plugin:react-hooks/recommended", + "plugin:prettier/recommended" + ], + "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks"], + "parserOptions": { + "ecmaVersion": 11, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "comma-dangle": ["error", "only-multiline"], + "react/prop-types": "off", + "react/display-name": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "prettier/prettier": ["error", { "endOfLine": "auto" }], + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/ban-ts-ignore": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-explicit-any": "error", + "@typescript-eslint/no-var-reqiures": "off", + "react/jsx-uses-react": "off", + "react/react-in-jsx-scope": "off" + }, + "settings": { + "react": { + "pragma": "React", + "version": "detect" + } + }, + "env": { + "browser": true, + "es6": true, + "jest": true + }, + "root": true +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..93a5548 --- /dev/null +++ b/.gitignore @@ -0,0 +1,107 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and *not* Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Package-lock +package-lock.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..5ba9bc3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,11 @@ +# Ignore artifacts: +build +coverage + +# Ignore all HTML files: +*.html + +# Ignore all eslint and prettier files: +*.json +*.prettierignore +*.eslintrc \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..c4724f0 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,9 @@ +{ + "endOfLine": "auto", + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "printWidth": 100, + "arrowParens": "always" +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..4d2b16f --- /dev/null +++ b/package.json @@ -0,0 +1,55 @@ +{ + "name": "project-management-app", + "version": "0.1.0", + "private": true, + "dependencies": { + "@reduxjs/toolkit": "^1.8.1", + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^13.1.1", + "@testing-library/user-event": "^14.1.1", + "@types/jest": "^27.4.1", + "@types/node": "^17.0.30", + "@types/react": "^18.0.8", + "@types/react-dom": "^18.0.3", + "react": "^18.1.0", + "react-dom": "^18.1.0", + "react-redux": "^8.0.1", + "react-router-dom": "^6.3.0", + "react-scripts": "5.0.1", + "sass": "^1.51.0", + "typescript": "^4.6.4" + }, + "scripts": { + "start": "cross-env HTTPS=true react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@typescript-eslint/eslint-plugin": "^5.16.0", + "@typescript-eslint/parser": "^5.16.0", + "cross-env": "^7.0.3", + "eslint-config-prettier": "^8.5.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-prettier": "^4.0.0", + "prettier": "2.6.0" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..9789aef81e81fe9aebf5d760dab929aa1ed75c5f GIT binary patch literal 9662 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 F{=a!4$FTqa literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..70998ff --- /dev/null +++ b/public/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + Poject Management App + + + +
+ + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..1f2f141 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 0000000..659cc13 --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { Provider } from 'react-redux'; +import { store } from './app/store'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render( + + + + ); + + expect(getByText(/learn/i)).toBeInTheDocument(); +}); diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..d9a359f --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import './App.scss'; + +function App() { + return
; +} + +export default App; diff --git a/src/app/hooks.ts b/src/app/hooks.ts new file mode 100644 index 0000000..520e84e --- /dev/null +++ b/src/app/hooks.ts @@ -0,0 +1,6 @@ +import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; +import type { RootState, AppDispatch } from './store'; + +// Use throughout your app instead of plain `useDispatch` and `useSelector` +export const useAppDispatch = () => useDispatch(); +export const useAppSelector: TypedUseSelectorHook = useSelector; diff --git a/src/app/store.ts b/src/app/store.ts new file mode 100644 index 0000000..07aad22 --- /dev/null +++ b/src/app/store.ts @@ -0,0 +1,14 @@ +import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'; + +export const store = configureStore({ + reducer: {}, +}); + +export type AppDispatch = typeof store.dispatch; +export type RootState = ReturnType; +export type AppThunk = ThunkAction< + ReturnType, + RootState, + unknown, + Action +>; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..90d39ac --- /dev/null +++ b/src/index.scss @@ -0,0 +1,14 @@ +html, body { + height: 100%; + width: 100%; + overflow-x: hidden; + scroll-behavior: smooth; + position: relative; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..32bf218 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import { Provider } from 'react-redux'; +import { store } from './app/store'; +import App from './App'; +import './index.scss'; +import { BrowserRouter } from 'react-router-dom'; + +// eslint-disable-next-line @typescript-eslint/no-non-null-assertion +const container = document.getElementById('root')!; +const root = createRoot(container); + +root.render( + + + + + + + +); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..74b1a27 --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a273b0c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} From b607fc9a8edbb9d99b2490357e46af456353d267 Mon Sep 17 00:00:00 2001 From: jack13only Date: Tue, 3 May 2022 18:45:21 +0300 Subject: [PATCH 002/203] fix: fix comments --- .eslintrc | 2 +- .prettierignore | 2 +- .prettierrc.json | 2 +- package.json | 22 +++++++++++----------- src/index.scss | 2 +- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/.eslintrc b/.eslintrc index 97a74f2..5bc539d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -44,4 +44,4 @@ "jest": true }, "root": true -} \ No newline at end of file +} diff --git a/.prettierignore b/.prettierignore index 5ba9bc3..df07c23 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,4 +8,4 @@ coverage # Ignore all eslint and prettier files: *.json *.prettierignore -*.eslintrc \ No newline at end of file +*.eslintrc diff --git a/.prettierrc.json b/.prettierrc.json index c4724f0..c651400 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -6,4 +6,4 @@ "trailingComma": "es5", "printWidth": 100, "arrowParens": "always" -} \ No newline at end of file +} diff --git a/package.json b/package.json index 4d2b16f..36d9c7e 100644 --- a/package.json +++ b/package.json @@ -4,20 +4,11 @@ "private": true, "dependencies": { "@reduxjs/toolkit": "^1.8.1", - "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.1.1", - "@testing-library/user-event": "^14.1.1", - "@types/jest": "^27.4.1", - "@types/node": "^17.0.30", - "@types/react": "^18.0.8", - "@types/react-dom": "^18.0.3", "react": "^18.1.0", "react-dom": "^18.1.0", "react-redux": "^8.0.1", "react-router-dom": "^6.3.0", - "react-scripts": "5.0.1", - "sass": "^1.51.0", - "typescript": "^4.6.4" + "react-scripts": "5.0.1" }, "scripts": { "start": "cross-env HTTPS=true react-scripts start", @@ -44,12 +35,21 @@ ] }, "devDependencies": { + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^13.1.1", + "@testing-library/user-event": "^14.1.1", + "@types/jest": "^27.4.1", + "@types/node": "^17.0.30", + "@types/react": "^18.0.8", + "@types/react-dom": "^18.0.3", "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "cross-env": "^7.0.3", "eslint-config-prettier": "^8.5.0", "eslint-config-react": "^1.1.7", "eslint-plugin-prettier": "^4.0.0", - "prettier": "2.6.0" + "prettier": "2.6.0", + "sass": "^1.51.0", + "typescript": "^4.6.4" } } diff --git a/src/index.scss b/src/index.scss index 90d39ac..7a68ae2 100644 --- a/src/index.scss +++ b/src/index.scss @@ -11,4 +11,4 @@ html, body { margin: 0; padding: 0; list-style-type: none; -} \ No newline at end of file +} From 592c4a54c0df3e029f36920f2b60efedcf814fe0 Mon Sep 17 00:00:00 2001 From: jack13only Date: Wed, 4 May 2022 17:42:56 +0300 Subject: [PATCH 003/203] docs: backend instruction --- SetUpBackend.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 SetUpBackend.md diff --git a/SetUpBackend.md b/SetUpBackend.md new file mode 100644 index 0000000..73946f2 --- /dev/null +++ b/SetUpBackend.md @@ -0,0 +1,10 @@ +# Setup backend + +1. Go to https://github.com/vitaly-sazonov/kanban-rest +2. Clone this repo to your pc +3. Install git and NodeJS, if you don't have them +4. Install Docker Desktop for Windows (or another OS), than reboot +https://docs.docker.com/desktop/windows/install/ +5. Open Docker and install WSL 2 based engine, than reboot +6. Open Docker and wait few seconds for the daemon to start. (you always need to run docker daemon for backend) +7. Write in gitbash\console in kanban-rest directory "docker-compose up" to start backend From 1b13f91fcba766868b0793f4bfd084211b40002c Mon Sep 17 00:00:00 2001 From: jack13only Date: Thu, 5 May 2022 17:26:18 +0300 Subject: [PATCH 004/203] docs: add backend url --- SetUpBackend.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/SetUpBackend.md b/SetUpBackend.md index 73946f2..8903265 100644 --- a/SetUpBackend.md +++ b/SetUpBackend.md @@ -1,4 +1,4 @@ -# Setup backend +# Setup backend locally 1. Go to https://github.com/vitaly-sazonov/kanban-rest 2. Clone this repo to your pc @@ -8,3 +8,6 @@ https://docs.docker.com/desktop/windows/install/ 5. Open Docker and install WSL 2 based engine, than reboot 6. Open Docker and wait few seconds for the daemon to start. (you always need to run docker daemon for backend) 7. Write in gitbash\console in kanban-rest directory "docker-compose up" to start backend + +# Use deployed backend +https://bublikbackend.herokuapp.com/ From 15de58fd9532daef991fdfc0584a5ca1674c63b6 Mon Sep 17 00:00:00 2001 From: VictoriaKochieva Date: Thu, 5 May 2022 17:41:56 +0300 Subject: [PATCH 005/203] feat: add header --- public/favicon.ico | Bin 9662 -> 4323 bytes src/App.tsx | 7 +++- src/components/Wrapper.scss | 5 +++ src/components/buttons/header/Buttons.scss | 42 ++++++++++++++++++++ src/components/buttons/header/LogInBtn.tsx | 9 +++++ src/components/buttons/header/SignUpBtn.tsx | 9 +++++ src/components/header/Header.scss | 42 ++++++++++++++++++++ src/components/header/Header.tsx | 26 ++++++++++++ src/images/logo.svg | 10 +++++ src/sass/Constants.scss | 3 ++ 10 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 src/components/Wrapper.scss create mode 100644 src/components/buttons/header/Buttons.scss create mode 100644 src/components/buttons/header/LogInBtn.tsx create mode 100644 src/components/buttons/header/SignUpBtn.tsx create mode 100644 src/components/header/Header.scss create mode 100644 src/components/header/Header.tsx create mode 100644 src/images/logo.svg create mode 100644 src/sass/Constants.scss diff --git a/public/favicon.ico b/public/favicon.ico index 9789aef81e81fe9aebf5d760dab929aa1ed75c5f..bda047980869cc14966310953be5ac66d5d03e98 100644 GIT binary patch literal 4323 zcmc&&S5VVml>P;RkkA6eKRxu06e-dPMXF#7O*$wVs?tl4B1lsyf(S$@p@>Mc(7T{i zk;mn=yn|sfkbLQUf-gA>s=7x+=E+_y1jK)U#XaE4w z{A+XQK2XN>~D7#%Ym0C=BDf96VA z4huEb*Rc!*ZOoW?^Q=bn?2r|ji-k=ti~lZRA8>Lkj%CPJ8#5TwGyYj`wBkZoUTXbFz%rK9i@Gse!5sCezv;BO^RDS9vD~&R6xsZi zaXhp+a%%KoN+cxYZr*WZ^f;5T@v;miaxW?`ED!UvczSJja5x6uo%|imA7?21PQ

~ptxouRobdYmx37=# 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 F{=a!4$FTqa diff --git a/src/App.tsx b/src/App.tsx index d9a359f..0736e38 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,13 @@ import React from 'react'; import './App.scss'; +import Header from './components/header/Header'; function App() { - return
; + return ( +
+
+
+ ); } export default App; diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss new file mode 100644 index 0000000..eb04987 --- /dev/null +++ b/src/components/Wrapper.scss @@ -0,0 +1,5 @@ +.wrapper { + display: flex; + width: 80%; + margin: 0 auto; +} diff --git a/src/components/buttons/header/Buttons.scss b/src/components/buttons/header/Buttons.scss new file mode 100644 index 0000000..9cd2b0b --- /dev/null +++ b/src/components/buttons/header/Buttons.scss @@ -0,0 +1,42 @@ +@import '../../../sass/Constants.scss'; + +.btn { + width: 86px; + height: 35px; + border: 1px solid $btn-colored; + background-color: $btn-light; + color: $btn-light; + border-radius: 20px; + cursor: pointer; + + &:hover { + border: 1px solid $btn-colored; + } + + &:active { + border: 2px solid $btn-active; + } + + &:focus { + box-shadow: 0 0 0 0.3rem rgba(235, 159, 19, 0.25); + background-color: $btn-colored; + color: $btn-light; + } +} + +.btn-colored { + background-color: $btn-colored; + + &:hover { + background-color: $btn-active; + } +} + +.btn-bordered { + color: $btn-colored; + + &:hover { + background-color: $btn-colored; + color: $btn-light + } +} diff --git a/src/components/buttons/header/LogInBtn.tsx b/src/components/buttons/header/LogInBtn.tsx new file mode 100644 index 0000000..48a75ea --- /dev/null +++ b/src/components/buttons/header/LogInBtn.tsx @@ -0,0 +1,9 @@ +const LogInBtn = () => { + return ( + + ); +}; + +export default LogInBtn; diff --git a/src/components/buttons/header/SignUpBtn.tsx b/src/components/buttons/header/SignUpBtn.tsx new file mode 100644 index 0000000..8d41316 --- /dev/null +++ b/src/components/buttons/header/SignUpBtn.tsx @@ -0,0 +1,9 @@ +const SignUpBtn = () => { + return ( + + ); +}; + +export default SignUpBtn; diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss new file mode 100644 index 0000000..2317a65 --- /dev/null +++ b/src/components/header/Header.scss @@ -0,0 +1,42 @@ +@import '../buttons/header/Buttons.scss'; +@import '../Wrapper.scss'; + +.header { + position: sticky; + padding: 20px 0; + top: 0; + width: 100%; + height: 70px; + backdrop-filter: blur(10px); + background: rgba($color: #f3f3f3, $alpha: 0.7); + + &__logo { + flex-basis: 30%; + cursor: pointer; + + &-img { + width: 100px; + height: auto; + } + + &:hover { + .header__logo-img { + transform: scale(1.05); + transition: .6s ease-in-out; + } + } + } + + &__navigation { + display: flex; + justify-content: flex-end; + flex-basis: 70%; + } + + &__buttons { + width: 44%; + display: flex; + justify-content: flex-end; + column-gap: 20px; + } +} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx new file mode 100644 index 0000000..b184474 --- /dev/null +++ b/src/components/header/Header.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from '../../images/logo.svg'; +import LogInBtn from '../buttons/header/LogInBtn'; +import SignUpBtn from '../buttons/header/SignUpBtn'; +import './Header.scss'; + +const Header = () => { + return ( +
+
+
+ logo +
+ +
+
+ + +
+
+
+
+ ); +}; + +export default Header; diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 0000000..a6a5210 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/sass/Constants.scss b/src/sass/Constants.scss new file mode 100644 index 0000000..00d3f5a --- /dev/null +++ b/src/sass/Constants.scss @@ -0,0 +1,3 @@ +$btn-colored: rgb(233, 192, 10); +$btn-light: white; +$btn-active: rgb(211, 118, 12); From 3c77fcfa36ab1aecfa874802f869dcbfa22dd4ce Mon Sep 17 00:00:00 2001 From: VictoriaKochieva Date: Thu, 5 May 2022 19:48:07 +0300 Subject: [PATCH 006/203] refactor: refactor styles and delete redundant --- src/components/header/Header.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss index 2317a65..067412a 100644 --- a/src/components/header/Header.scss +++ b/src/components/header/Header.scss @@ -3,6 +3,7 @@ .header { position: sticky; + align-items: center; padding: 20px 0; top: 0; width: 100%; @@ -10,11 +11,11 @@ backdrop-filter: blur(10px); background: rgba($color: #f3f3f3, $alpha: 0.7); - &__logo { + .header__logo { flex-basis: 30%; cursor: pointer; - &-img { + .header__logo-img { width: 100px; height: auto; } @@ -27,16 +28,16 @@ } } - &__navigation { + .header__navigation { display: flex; justify-content: flex-end; flex-basis: 70%; } - &__buttons { - width: 44%; + .header__buttons { display: flex; justify-content: flex-end; column-gap: 20px; + flex-wrap: wrap; } } From 9f9d52e420bcddb31ad5808ae8b3ee882fa22391 Mon Sep 17 00:00:00 2001 From: jack13only Date: Fri, 6 May 2022 08:21:24 +0300 Subject: [PATCH 007/203] docs: update instruction --- SetUpBackend.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/SetUpBackend.md b/SetUpBackend.md index 8903265..1bc3ba9 100644 --- a/SetUpBackend.md +++ b/SetUpBackend.md @@ -9,5 +9,21 @@ https://docs.docker.com/desktop/windows/install/ 6. Open Docker and wait few seconds for the daemon to start. (you always need to run docker daemon for backend) 7. Write in gitbash\console in kanban-rest directory "docker-compose up" to start backend -# Use deployed backend +# Deploy backend +1. Open cmd\gitbash: +git clone https://github.com/vitaly-sazonov/kanban-rest +git switch source +heroku create --region eu +heroku addons:create heroku-postgresql:hobby-dev +heroku config:set NPM_CONFIG_PRODUCTION=false +heroku config:set LOG_CONSOLE=false +heroku config:set LOG_ERR_LEVEL=warn +heroku config:set LOG_INFO_LEVEL=info +heroku config:set JWT_SECRET_KEY=secret-key +heroku config:set SALT_SIZE=10 +heroku config:set USE_FASTIFY=true +heroku git:remote -a bublikbackend +git push heroku source:master + +# Deployed backend url https://bublikbackend.herokuapp.com/ From 6a546c4cfa3da286690d99afc0dd183f1d93eec1 Mon Sep 17 00:00:00 2001 From: mitrofanzxc Date: Thu, 5 May 2022 22:52:19 +0300 Subject: [PATCH 008/203] refactor: header --- src/App.test.tsx | 30 +++-- src/components/Wrapper.scss | 1 + src/components/buttons/header/Buttons.scss | 42 ++++--- src/components/buttons/header/SignUpBtn.tsx | 13 +- src/components/header/Header.scss | 62 ++++----- src/components/header/Header.tsx | 26 ++-- src/index.scss | 5 +- src/sass/Constants.scss | 133 +++++++++++++++++++- 8 files changed, 239 insertions(+), 73 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 659cc13..2ca3777 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,15 +1,27 @@ -import React from 'react'; -import { render } from '@testing-library/react'; import { Provider } from 'react-redux'; import { store } from './app/store'; +import { render, screen } from '@testing-library/react'; import App from './App'; +import Header from './components/header/Header'; -test('renders learn react link', () => { - const { getByText } = render( - - - - ); +describe('Header', () => { + it('Header', () => { + render(
); - expect(getByText(/learn/i)).toBeInTheDocument(); + const HEADER = screen.getByTestId('header'); + expect(HEADER).toBeInTheDocument(); + + const HEADER_BTNS = screen.getAllByTestId('signUpBtn'); + expect(HEADER_BTNS.length).toBe(2); + }); +}); + +describe('Welcome page', () => { + it('Welcome page', () => { + render( + + + + ); + }); }); diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss index eb04987..00f92ff 100644 --- a/src/components/Wrapper.scss +++ b/src/components/Wrapper.scss @@ -1,5 +1,6 @@ .wrapper { display: flex; + align-items: center; width: 80%; margin: 0 auto; } diff --git a/src/components/buttons/header/Buttons.scss b/src/components/buttons/header/Buttons.scss index 9cd2b0b..41b24fc 100644 --- a/src/components/buttons/header/Buttons.scss +++ b/src/components/buttons/header/Buttons.scss @@ -1,42 +1,50 @@ -@import '../../../sass/Constants.scss'; +@import "../../../sass/Constants.scss"; .btn { - width: 86px; - height: 35px; - border: 1px solid $btn-colored; - background-color: $btn-light; - color: $btn-light; - border-radius: 20px; + width: $base * 17; + height: $base * 7; + border: 1px solid $color-yellow; + background-color: $color-white; + color: $color-white; + border-radius: $base * 4; cursor: pointer; + transition: $transition; &:hover { - border: 1px solid $btn-colored; + border: 1px solid $color-yellow; + transition: $transition; } &:active { - border: 2px solid $btn-active; + border: 2px solid $color-orange; + transition: $transition; } &:focus { - box-shadow: 0 0 0 0.3rem rgba(235, 159, 19, 0.25); - background-color: $btn-colored; - color: $btn-light; + box-shadow: 0 0 0 0.3rem $color-yellow-dark; + background-color: $color-yellow; + color: $color-white; + transition: $transition; } } .btn-colored { - background-color: $btn-colored; + background-color: $color-yellow; + transition: $transition; &:hover { - background-color: $btn-active; + background-color: $color-orange; + transition: $transition; } } .btn-bordered { - color: $btn-colored; + color: $color-yellow; + transition: $transition; &:hover { - background-color: $btn-colored; - color: $btn-light + background-color: $color-yellow; + color: $color-white; + transition: $transition; } } diff --git a/src/components/buttons/header/SignUpBtn.tsx b/src/components/buttons/header/SignUpBtn.tsx index 8d41316..b3e835c 100644 --- a/src/components/buttons/header/SignUpBtn.tsx +++ b/src/components/buttons/header/SignUpBtn.tsx @@ -1,7 +1,14 @@ -const SignUpBtn = () => { +type SignUpBtnTypes = { + dataTestId: string; + type: 'submit' | 'reset' | 'button'; + className: string; + description: string; +}; + +const SignUpBtn = ({ dataTestId, type, className, description }: SignUpBtnTypes) => { return ( - ); }; diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss index 067412a..51abe5d 100644 --- a/src/components/header/Header.scss +++ b/src/components/header/Header.scss @@ -1,43 +1,45 @@ -@import '../buttons/header/Buttons.scss'; -@import '../Wrapper.scss'; +@import "../buttons/header/Buttons.scss"; +@import "../Wrapper.scss"; .header { position: sticky; - align-items: center; - padding: 20px 0; + padding: $base * 4 0; top: 0; width: 100%; - height: 70px; - backdrop-filter: blur(10px); - background: rgba($color: #f3f3f3, $alpha: 0.7); + height: auto; + backdrop-filter: blur($base * 2); + background: $color-grey-07; +} - .header__logo { - flex-basis: 30%; - cursor: pointer; +.header__logo-img { + width: $base * 20; + height: auto; + transition: $transition; +} - .header__logo-img { - width: 100px; - height: auto; - } +.header__logo { + display: flex; + align-items: center; + flex-basis: 30%; + cursor: pointer; - &:hover { - .header__logo-img { - transform: scale(1.05); - transition: .6s ease-in-out; - } + &:hover { + .header__logo-img { + transform: scale(1.05); + transition: $transition; } } +} - .header__navigation { - display: flex; - justify-content: flex-end; - flex-basis: 70%; - } +.header__navigation { + display: flex; + justify-content: flex-end; + flex-basis: 70%; +} - .header__buttons { - display: flex; - justify-content: flex-end; - column-gap: 20px; - flex-wrap: wrap; - } +.header__buttons { + display: flex; + justify-content: flex-end; + column-gap: $base * 4; + flex-wrap: wrap; } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index b184474..30188fe 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,25 +1,33 @@ -import React from 'react'; -import logo from '../../images/logo.svg'; -import LogInBtn from '../buttons/header/LogInBtn'; +import { FC } from 'react'; import SignUpBtn from '../buttons/header/SignUpBtn'; +import logo from '../../images/logo.svg'; import './Header.scss'; -const Header = () => { +const Header: FC = () => { return ( -
+
logo
-
- - + +
-
+
); }; diff --git a/src/index.scss b/src/index.scss index 7a68ae2..b4d3b3a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,5 +1,6 @@ -html, body { - height: 100%; +html, +body { + height: 100%; width: 100%; overflow-x: hidden; scroll-behavior: smooth; diff --git a/src/sass/Constants.scss b/src/sass/Constants.scss index 00d3f5a..d7c48bc 100644 --- a/src/sass/Constants.scss +++ b/src/sass/Constants.scss @@ -1,3 +1,130 @@ -$btn-colored: rgb(233, 192, 10); -$btn-light: white; -$btn-active: rgb(211, 118, 12); +// === MIXIN === + +@mixin spartan { + font-family: "Spartan", sans-serif; +} + +@mixin disableSelection { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin flexSpaceEvenly { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +@mixin flexSpaceAround { + display: flex; + align-items: center; + justify-content: space-around; +} + +@mixin flexSpaceBetween { + display: flex; + align-items: center; + justify-content: space-between; +} + +@mixin flexCenter { + display: flex; + align-items: center; + justify-content: center; +} + +@mixin flexEnd { + display: flex; + align-items: center; + justify-content: flex-end; +} + +// === / MIXIN === + +// === FUNCTIONS === + +@function strip-unit($num) { + @return $num / ($num * 0 + 1); +} + +@function rem($num) { + @return (strip-unit($num) / 16) * 1rem; +} + +// === / FUNCTIONS === + +// === VARIABLES === + +$base: rem(5px); + +$fw-regular: 400; +$fw-medium: 500; +$fw-semi-bold: 600; +$fw-bold: 700; + +$fs-xxs: rem(11px); +$fs-xs: rem(12px); +$fs-s: rem(13px); +$fs-m: rem(14px); +$fs-l: rem(16px); +$fs-xl: rem(22px); +$fs-xxl: rem(26px); +$fs-xxxl: rem(36px); + +$transition: 0.3s; + +$color-dark: rgba(18, 18, 18, 1); +$color-dark-02: rgba(18, 18, 18, 0.2); +$color-dark-03: rgba(18, 18, 18, 0.3); +$color-dark-04: rgba(18, 18, 18, 0.4); +$color-dark-05: rgba(18, 18, 18, 0.5); +$color-dark-06: rgba(18, 18, 18, 0.6); +$color-dark-07: rgba(18, 18, 18, 0.7); +$color-dark-08: rgba(18, 18, 18, 0.8); +$color-dark-09: rgba(18, 18, 18, 0.9); +$color-grey: rgba(229, 229, 229, 1); +$color-grey-white: rgba(248, 248, 248, 1); +$color-grey-07: rgba(243, 243, 243, 0.7); +$color-white: rgba(255, 255, 255, 1); +$color-white-02: rgba(255, 255, 255, 0.2); +$color-white-03: rgba(255, 255, 255, 0.3); +$color-white-04: rgba(255, 255, 255, 0.4); +$color-white-05: rgba(255, 255, 255, 0.5); +$color-white-06: rgba(255, 255, 255, 0.6); +$color-white-07: rgba(255, 255, 255, 0.7); +$color-white-08: rgba(255, 255, 255, 0.8); +$color-white-09: rgba(255, 255, 255, 0.9); +$color-sale: rgba(233, 30, 99, 1); +$color-yellow: rgba(240, 204, 132, 1); +$color-error: rgba(214, 19, 19, 1); +$color-ok: rgba(11, 177, 127, 1); +$color-grey-dark: rgba(156, 156, 156, 1); +$color-orange: rgba(211, 118, 12, 1); +$color-green: rgba(0, 255, 119, 1); +$color-blue: rgba(0, 3, 51, 1); +$color-yellow: rgba(233, 192, 10, 1); +$color-yellow-dark: rgba(235, 159, 19, 0.25); + +$breakpoint-xxs-min: 320px; +$breakpoint-xs-min: 480px; +$breakpoint-sm-min: 576px; +$breakpoint-md-min: 768px; +$breakpoint-lg-min: 992px; +$breakpoint-xl-min: 1200px; +$breakpoint-xxl-min: 1440px; + +$breakpoint-xxxs-max: $breakpoint-xxs-min - 1px; +$breakpoint-xxs-max: $breakpoint-xs-min - 1px; +$breakpoint-xs-max: $breakpoint-sm-min - 1px; +$breakpoint-sm-max: $breakpoint-md-min - 1px; +$breakpoint-md-max: $breakpoint-lg-min - 1px; +$breakpoint-lg-max: $breakpoint-xl-min - 1px; +$breakpoint-xl-max: $breakpoint-xxl-min - 1px; + +$calcWidth: 100%; + +// === / VARIABLES === From 9e30aa5af20639475f83a4d0c13678be2a894ee9 Mon Sep 17 00:00:00 2001 From: mitrofanzxc Date: Sat, 7 May 2022 11:42:04 +0300 Subject: [PATCH 009/203] feat: add router, layout component, add tests, add folder for pages --- src/App.test.tsx | 37 +++++++++++++++---- src/App.tsx | 22 +++++++---- src/components/Wrapper.scss | 6 --- src/components/buttons/header/LogInBtn.tsx | 9 ----- .../{Buttons.scss => PrimaryButton.scss} | 2 +- .../{SignUpBtn.tsx => PrimaryButton.tsx} | 12 ++++-- src/components/layout/Layout.tsx | 19 ++++++++++ src/components/layout/footer/Footer.scss | 1 + src/components/layout/footer/Footer.tsx | 13 +++++++ .../{ => layout}/header/Header.scss | 10 ++++- src/components/{ => layout}/header/Header.tsx | 21 ++++++----- src/index.scss | 2 + src/index.tsx | 5 ++- src/pages/welcomepage/WelcomePage.scss | 1 + src/pages/welcomepage/WelcomePage.tsx | 7 ++++ 15 files changed, 119 insertions(+), 48 deletions(-) delete mode 100644 src/components/Wrapper.scss delete mode 100644 src/components/buttons/header/LogInBtn.tsx rename src/components/buttons/header/{Buttons.scss => PrimaryButton.scss} (95%) rename src/components/buttons/header/{SignUpBtn.tsx => PrimaryButton.tsx} (51%) create mode 100644 src/components/layout/Layout.tsx create mode 100644 src/components/layout/footer/Footer.scss create mode 100644 src/components/layout/footer/Footer.tsx rename src/components/{ => layout}/header/Header.scss (83%) rename src/components/{ => layout}/header/Header.tsx (63%) create mode 100644 src/pages/welcomepage/WelcomePage.scss create mode 100644 src/pages/welcomepage/WelcomePage.tsx diff --git a/src/App.test.tsx b/src/App.test.tsx index 2ca3777..2dfea55 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,27 +1,50 @@ import { Provider } from 'react-redux'; -import { store } from './app/store'; +import { MemoryRouter } from 'react-router-dom'; import { render, screen } from '@testing-library/react'; -import App from './App'; -import Header from './components/header/Header'; +import { store } from './app/store'; + +import { App } from './App'; +import { Header } from './components/layout/header/Header'; +import { Footer } from './components/layout/footer/Footer'; -describe('Header', () => { +describe('Layout', () => { it('Header', () => { - render(
); + render( + +
+ + ); const HEADER = screen.getByTestId('header'); expect(HEADER).toBeInTheDocument(); - const HEADER_BTNS = screen.getAllByTestId('signUpBtn'); + const HEADER_BTNS = screen.getAllByTestId('PrimaryButton'); expect(HEADER_BTNS.length).toBe(2); }); + + it('Footer', () => { + render( + +