From a3b2d1d5547a74cfb1807752bc88cc7fdac8db4b Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 18:38:12 +0530 Subject: [PATCH 01/15] feat: esling, prettier configured --- .eslintignore | 10 ++++++++++ .eslintrc.json | 25 +++++++++++++++++++++++++ .husky/.gitignore | 1 + .husky/pre-commit | 4 ++++ .prettierrc | 20 ++++++++++++++++++++ package.json | 21 ++++++++++++++------- 6 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json create mode 100644 .husky/.gitignore create mode 100644 .husky/pre-commit create mode 100644 .prettierrc diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..a11e65b51e --- /dev/null +++ b/.eslintignore @@ -0,0 +1,10 @@ +node_modules +.github +.build +package-lock.json +yarn.lock +tailwind.config.js +tsconfig.json +postcss.config.js +Dockerfile.DEV +Dockerfile.PROD diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000000..1ea872e5d1 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,25 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "plugin:react/recommended", + "airbnb", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + } +} diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000000..31354ec138 --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000000..36af219892 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..65a38d8156 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,20 @@ +{ + "arrowParens": "always", + "bracketSpacing": true, + "endOfLine": "lf", + "htmlWhitespaceSensitivity": "css", + "insertPragma": false, + "jsxBracketSameLine": false, + "jsxSingleQuote": false, + "printWidth": 80, + "proseWrap": "preserve", + "quoteProps": "as-needed", + "requirePragma": false, + "semi": true, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "es5", + "useTabs": false, + "vueIndentScriptAndStyle": false, + "parser": "babel" +} diff --git a/package.json b/package.json index fa2d47a811..dc2fa3513d 100644 --- a/package.json +++ b/package.json @@ -59,13 +59,8 @@ "build": "npx create-react-play -p && react-scripts build", "snap": "react-snap", "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "eject": "react-scripts eject", + "prepare": "husky install" }, "reactSnap": { "puppeteerArgs": [ @@ -86,8 +81,20 @@ ] }, "devDependencies": { + "@typescript-eslint/eslint-plugin": "^5.33.1", + "@typescript-eslint/parser": "^5.33.1", "autoprefixer": "^10.4.7", + "eslint": "^8.22.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-import": "^2.25.3", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.3.0", + "husky": "^8.0.1", + "lint-staged": "^13.0.3", "postcss": "^8.4.13", + "prettier": "^2.7.1", "puppeteer": "^13.7.0", "react-snap": "^1.23.0", "tailwindcss": "^3.0.24", From 0546fabf4f510f65a3e3d172715d4df696cfb089 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 19:06:01 +0530 Subject: [PATCH 02/15] feat: husky configured - 5 --- .prettierrc | 1 - package.json | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index 65a38d8156..6c542387b5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,7 +4,6 @@ "endOfLine": "lf", "htmlWhitespaceSensitivity": "css", "insertPragma": false, - "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 80, "proseWrap": "preserve", diff --git a/package.json b/package.json index dc2fa3513d..788d7ffa86 100644 --- a/package.json +++ b/package.json @@ -99,5 +99,9 @@ "react-snap": "^1.23.0", "tailwindcss": "^3.0.24", "typescript": "^4.6.4" + }, + "lint-staged": { + "*.js": "eslint --cache --fix", + "*.{js,css,md}": "prettier --write" } } From 64177e56c4ccac881f8ad566d95308aaf92d70e6 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 19:20:10 +0530 Subject: [PATCH 03/15] feat: husky configured - 6 --- .eslintignore | 19 +++++++++---------- package.json | 3 +-- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/.eslintignore b/.eslintignore index a11e65b51e..b419e5fe9b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,10 +1,9 @@ -node_modules -.github -.build -package-lock.json -yarn.lock -tailwind.config.js -tsconfig.json -postcss.config.js -Dockerfile.DEV -Dockerfile.PROD +node_modules.github.build; +package - lock.json; +package.json; +yarn.lock; +tailwind.config.js; +tsconfig.json; +postcss.config.js; +Dockerfile.DEV; +Dockerfile.PROD; diff --git a/package.json b/package.json index 788d7ffa86..3b82c2c92f 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,6 @@ "typescript": "^4.6.4" }, "lint-staged": { - "*.js": "eslint --cache --fix", - "*.{js,css,md}": "prettier --write" + "*.{js,jsx,ts,tsx,md}": ["eslint --cache --fix", "prettier --write"] } } From ff09b4a6add2753f3df29bf27ec64531536262b3 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 20:47:54 +0530 Subject: [PATCH 04/15] fix: added prettier and lint commands and removed parser from prettierrc --- .prettierrc | 3 +-- package.json | 7 ++++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/.prettierrc b/.prettierrc index 6c542387b5..0b1b053697 100644 --- a/.prettierrc +++ b/.prettierrc @@ -14,6 +14,5 @@ "tabWidth": 2, "trailingComma": "es5", "useTabs": false, - "vueIndentScriptAndStyle": false, - "parser": "babel" + "vueIndentScriptAndStyle": false } diff --git a/package.json b/package.json index 3b82c2c92f..5921ef6cb0 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,8 @@ "snap": "react-snap", "test": "react-scripts test", "eject": "react-scripts eject", + "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md,html,json}'", + "lint": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", "prepare": "husky install" }, "reactSnap": { @@ -101,6 +103,9 @@ "typescript": "^4.6.4" }, "lint-staged": { - "*.{js,jsx,ts,tsx,md}": ["eslint --cache --fix", "prettier --write"] + "*.{js,jsx,ts,tsx,md}": [ + "eslint --cache --fix", + "prettier --write" + ] } } From df26afc6a75f16b39ceea092741279423e81e807 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 20:50:51 +0530 Subject: [PATCH 05/15] fix: added format script and fixed lint+prettier scripts --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5921ef6cb0..910682cf1c 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,9 @@ "snap": "react-snap", "test": "react-scripts test", "eject": "react-scripts eject", - "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md,html,json}'", - "lint": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", + "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", + "lint": "eslint --fix \"**/*.+(js|jsx|json|css|scss|md)\"", + "format": "npm run lint && npm run prettier", "prepare": "husky install" }, "reactSnap": { From c0df783e2be1235957588eab971763b141434731 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Fri, 19 Aug 2022 21:18:35 +0530 Subject: [PATCH 06/15] fix: added jsx-runtime --- .eslintrc.json | 42 ++++++++++++++++++++---------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 1ea872e5d1..946df02a7f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,25 +1,23 @@ { - "env": { - "browser": true, - "es2021": true + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "plugin:react/recommended", + + "plugin:react/jsx-runtime", + "airbnb", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true }, - "extends": [ - "plugin:react/recommended", - "airbnb", - "prettier" - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [ - "react", - "@typescript-eslint" - ], - "rules": { - } + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint"], + "rules": {} } From 3ab25f80675183eebad668cebf584495de717843 Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Mon, 17 Oct 2022 19:55:09 +0530 Subject: [PATCH 07/15] fix: added jsx-runtime plugin --- .eslintrc.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 946df02a7f..d30763899f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,6 @@ }, "extends": [ "plugin:react/recommended", - "plugin:react/jsx-runtime", "airbnb", "prettier" From a505770c5bfc8df11d2d8898386b88a9b6eec95a Mon Sep 17 00:00:00 2001 From: Kaushal Joshi <7joshikaushal@gmail.com> Date: Tue, 8 Nov 2022 21:14:13 +0530 Subject: [PATCH 08/15] fix: removed husky temporarily --- .eslintignore | 6 ++++-- .husky/.gitignore | 1 - .husky/pre-commit | 4 ---- package.json | 8 -------- 4 files changed, 4 insertions(+), 15 deletions(-) delete mode 100644 .husky/.gitignore delete mode 100644 .husky/pre-commit diff --git a/.eslintignore b/.eslintignore index b419e5fe9b..e06d658f26 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,7 @@ -node_modules.github.build; -package - lock.json; +node_modules +.github +.build; +package-lock.json; package.json; yarn.lock; tailwind.config.js; diff --git a/.husky/.gitignore b/.husky/.gitignore deleted file mode 100644 index 31354ec138..0000000000 --- a/.husky/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_ diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100644 index 36af219892..0000000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx lint-staged diff --git a/package.json b/package.json index 7a9aecdb30..db779b1ef9 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,6 @@ "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", "lint": "eslint --fix \"**/*.+(js|jsx|json|css|scss|md)\"", "format": "npm run lint && npm run prettier", - "prepare": "husky install" "cypress:open": "cypress open", "cypress:run": "cypress run" }, @@ -98,7 +97,6 @@ "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", - "husky": "^8.0.1", "lint-staged": "^13.0.3", "cypress": "^10.6.0", "postcss": "^8.4.13", @@ -107,11 +105,5 @@ "react-snap": "^1.23.0", "tailwindcss": "^3.0.24", "typescript": "^4.6.4" - }, - "lint-staged": { - "*.{js,jsx,ts,tsx,md}": [ - "eslint --cache --fix", - "prettier --write" - ] } } From 8135020357283530560711e590f1dd467e045124 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 15 Nov 2022 22:04:33 +0530 Subject: [PATCH 09/15] Update eslint and prettier --- .eslintrc.json | 67 ++++++++++++++++++++++++++++++++++++++++++++------ .prettierrc | 19 +++----------- 2 files changed, 64 insertions(+), 22 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d30763899f..eda76b9d11 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,13 +1,15 @@ { "env": { "browser": true, - "es2021": true + "node": true, + "es2021": true, + "jest": true }, "extends": [ + "eslint:recommended", "plugin:react/recommended", - "plugin:react/jsx-runtime", - "airbnb", - "prettier" + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { @@ -17,6 +19,57 @@ "ecmaVersion": "latest", "sourceType": "module" }, - "plugins": ["react", "@typescript-eslint"], - "rules": {} -} + "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], + "rules": { + "import/extensions": 0, + + "import/no-named-as-default-member": 0, + "react/prop-types": 0, + "react/display-name": 0, + "react/react-in-jsx-scope": 0, + + // Require a whitespace at the beginning of a comment + "spaced-comment": ["error", "always"], + + // Maximum line length for comments + // Trailing comments allowed beyond maximum line length + "max-len": ["error", { "code": 400, "comments": 100, "ignoreTrailingComments": true }], + + // Require PascalCase for user-defined JSX components + "react/jsx-pascal-case": ["error"], + + // Console logs cannot be committed. + "no-console": ["error"], + + // Require props to be sorted + "react/jsx-sort-props": ["error", { "callbacksLast": true, "shorthandFirst": true }], + + // Omit boolean prop value when set to true + "react/jsx-boolean-value": ["error", "never"], + + // Require self closing tags in JSX/HTML + "react/self-closing-comp": ["error", { "component": true, "html": true }], + + // Disallow unnecessary curly braces in JSX + "react/jsx-curly-brace-presence": ["error", "never"], + + // Require blank line before certain statements + "padding-line-between-statements": [ + "error", + { "blankLine": "always", "prev": "*", "next": "function" }, + { "blankLine": "always", "prev": "*", "next": "class" }, + { "blankLine": "always", "prev": "*", "next": "export" }, + // Ignore consecutive export statements + { "blankLine": "any", "prev": "export", "next": "export" }, + { "blankLine": "always", "prev": "*", "next": "return" }, + { "blankLine": "always", "prev": "*", "next": "break" }, + { "blankLine": "always", "prev": "*", "next": "continue" }, + { "blankLine": "always", "prev": "*", "next": "throw" } + ] + }, + "settings": { + "react": { + "version": "detect" + } + } +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 0b1b053697..f92560f5a3 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,18 +1,7 @@ { - "arrowParens": "always", - "bracketSpacing": true, - "endOfLine": "lf", - "htmlWhitespaceSensitivity": "css", - "insertPragma": false, - "jsxSingleQuote": false, - "printWidth": 80, - "proseWrap": "preserve", - "quoteProps": "as-needed", - "requirePragma": false, "semi": true, - "singleQuote": false, "tabWidth": 2, - "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false -} + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none" +} \ No newline at end of file From d32de2e5d7f3e2c39f0af34fc4d0c26eacde58f3 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 15 Nov 2022 22:07:54 +0530 Subject: [PATCH 10/15] Update scripts --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 282827f5bf..884156abe6 100644 --- a/package.json +++ b/package.json @@ -71,8 +71,9 @@ "test": "react-scripts test", "eject": "react-scripts eject", "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", - "lint": "eslint --fix \"**/*.+(js|jsx|json|css|scss|md)\"", - "format": "npm run lint && npm run prettier", + "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}", + "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", + "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc", "cypress:open": "cypress open", "cypress:run": "cypress run" }, From b089eeeaaab874e417ac603738a56e2ca2b71cdb Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 15 Nov 2022 22:11:24 +0530 Subject: [PATCH 11/15] Add missing dependency --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 884156abe6..ce9669191a 100644 --- a/package.json +++ b/package.json @@ -99,15 +99,16 @@ "@typescript-eslint/eslint-plugin": "^5.33.1", "@typescript-eslint/parser": "^5.33.1", "autoprefixer": "^10.4.7", + "cypress": "^10.6.0", "eslint": "^8.22.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "lint-staged": "^13.0.3", - "cypress": "^10.6.0", "postcss": "^8.4.13", "prettier": "^2.7.1", "puppeteer": "^13.7.0", From d74decfc7adc6f4df3ee59f4610603a6570f7ba7 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Sat, 19 Nov 2022 18:33:17 +0530 Subject: [PATCH 12/15] Change rule from error to warn --- .eslintrc.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index eda76b9d11..4531ff5e65 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -29,33 +29,33 @@ "react/react-in-jsx-scope": 0, // Require a whitespace at the beginning of a comment - "spaced-comment": ["error", "always"], + "spaced-comment": ["warn", "always"], // Maximum line length for comments // Trailing comments allowed beyond maximum line length - "max-len": ["error", { "code": 400, "comments": 100, "ignoreTrailingComments": true }], + "max-len": ["warn", { "code": 400, "comments": 100, "ignoreTrailingComments": true }], // Require PascalCase for user-defined JSX components - "react/jsx-pascal-case": ["error"], + "react/jsx-pascal-case": ["warn"], // Console logs cannot be committed. - "no-console": ["error"], + "no-console": ["warn"], // Require props to be sorted - "react/jsx-sort-props": ["error", { "callbacksLast": true, "shorthandFirst": true }], + "react/jsx-sort-props": ["warn", { "callbacksLast": true, "shorthandFirst": true }], // Omit boolean prop value when set to true - "react/jsx-boolean-value": ["error", "never"], + "react/jsx-boolean-value": ["warn", "never"], // Require self closing tags in JSX/HTML - "react/self-closing-comp": ["error", { "component": true, "html": true }], + "react/self-closing-comp": ["warn", { "component": true, "html": true }], // Disallow unnecessary curly braces in JSX - "react/jsx-curly-brace-presence": ["error", "never"], + "react/jsx-curly-brace-presence": ["warn", "never"], // Require blank line before certain statements "padding-line-between-statements": [ - "error", + "warn", { "blankLine": "always", "prev": "*", "next": "function" }, { "blankLine": "always", "prev": "*", "next": "class" }, { "blankLine": "always", "prev": "*", "next": "export" }, @@ -72,4 +72,4 @@ "version": "detect" } } -} \ No newline at end of file +} From 6ebe805c6e020be76e4e770e708e7a7f67f93a5a Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Sat, 19 Nov 2022 18:45:49 +0530 Subject: [PATCH 13/15] Update the script config --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index ce9669191a..24d8f8b5be 100644 --- a/package.json +++ b/package.json @@ -71,9 +71,9 @@ "test": "react-scripts test", "eject": "react-scripts eject", "prettier": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", - "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}", - "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'", - "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc", + "lint": "eslint \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", + "lint:fix": "eslint --fix \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\"", + "format": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|css|scss|md)\" --config ./.prettierrc", "cypress:open": "cypress open", "cypress:run": "cypress run" }, From 1fd1dba1be4835be042d41d3deac6a85c4d13f93 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Fri, 25 Nov 2022 10:49:22 +0530 Subject: [PATCH 14/15] Format code files with prettier --- CODE_OF_CONDUCT.md | 22 +- CONTRIBUTING.md | 32 +- CREATE-PLAY.md | 59 +- README.md | 46 +- cypress.config.ts | 8 +- cypress/e2e/homePage.cy.ts | 59 +- cypress/support/commands.ts | 2 +- cypress/support/e2e.ts | 4 +- postcss.config.js | 6 +- src/App.css | 6 +- src/App.js | 6 +- src/ErrorBoundary/ErrorBoundary.jsx | 8 +- src/ErrorBoundary/ErrorFallback.jsx | 36 +- src/common/404/404.css | 82 +- src/common/404/PageNotFound.jsx | 28 +- .../activities/hackathon/HackathonBanner.jsx | 66 +- src/common/components/Comment.jsx | 8 +- src/common/components/LevelBadge.jsx | 32 +- src/common/components/Like/Like.jsx | 17 +- src/common/components/MultiSelect.jsx | 48 +- src/common/components/Notification.jsx | 8 +- src/common/components/PlayForms.jsx | 48 +- src/common/components/SocialShare.jsx | 25 +- src/common/components/YouTubeEmbed.jsx | 16 +- src/common/const/git.js | 4 +- src/common/const/index.js | 4 +- src/common/const/nhost.js | 10 +- src/common/createplay/CreatePlay.jsx | 117 +- .../createplay/create-play-form-template.js | 203 +- src/common/createplay/create-play.scss | 2 +- src/common/createplay/utils.js | 42 +- src/common/defaultBanner/DefaultBanner.jsx | 22 +- src/common/footer/ExtendedFooter.jsx | 85 +- src/common/footer/Footer.jsx | 4 +- src/common/header/Header.jsx | 40 +- src/common/header/HeaderNav.jsx | 64 +- src/common/header/header.css | 79 +- src/common/home/Contributors.jsx | 14 +- src/common/home/Home.jsx | 97 +- src/common/home/home.css | 34 +- src/common/home/index.js | 1 - src/common/hooks/index.js | 12 +- src/common/hooks/useContributors.js | 9 +- src/common/hooks/useFeaturedPlays.js | 6 +- src/common/hooks/useFetch.js | 8 +- src/common/hooks/useGetPlays.js | 17 +- src/common/hooks/useGitHub.js | 4 +- src/common/hooks/useLikePlays.js | 7 +- src/common/hooks/useLocalStorage.js | 5 +- src/common/index.js | 26 +- src/common/modal/index.jsx | 49 +- src/common/playcreated/PlayCreated.jsx | 32 +- src/common/playcreated/play-created.scss | 4 +- src/common/playideas/PlayIdeas.jsx | 52 +- src/common/playideas/ideas.json | 4 +- src/common/playideas/playIdeas.css | 270 +- src/common/playlists/FeaturedPlays.jsx | 14 +- src/common/playlists/PlayHeader.jsx | 6 +- src/common/playlists/PlayHeaderActions.jsx | 86 +- src/common/playlists/PlayHeaderInfo.jsx | 20 +- src/common/playlists/PlayList.jsx | 28 +- src/common/playlists/PlayMeta.jsx | 70 +- src/common/playlists/PlayThumbnail.jsx | 67 +- src/common/playlists/playlist.css | 18 +- src/common/routing/RouteDefs.jsx | 35 +- src/common/routing/hooks/useLocationChange.js | 12 +- src/common/search/FilterPlays.jsx | 81 +- src/common/search/SearchPlays.jsx | 42 +- src/common/search/hooks/usePlayFilter.js | 14 +- src/common/search/search-context.js | 8 +- src/common/search/search.css | 40 +- src/common/services/index.js | 6 +- src/common/services/issues.js | 8 +- src/common/services/levels.js | 6 +- src/common/services/plays.js | 30 +- src/common/services/request/index.js | 5 +- .../services/request/query/edit-play.js | 22 +- .../request/query/fetch-filter-data.js | 32 +- .../request/query/fetch-plays-filter.js | 90 +- .../request/query/fetch-plays-paginated.js | 64 +- .../request/query/fetch-plays-sorted.js | 48 +- .../services/request/query/fetch-plays.js | 82 +- src/common/services/request/query/index.js | 4 +- src/common/services/request/query/levels.js | 8 +- .../services/request/query/like-play.js | 40 +- src/common/services/request/query/play.js | 16 +- src/common/services/request/query/tags.js | 44 +- src/common/services/string.js | 25 +- src/common/services/tags.js | 6 +- src/common/spinner/spinner.jsx | 17 +- src/common/spinner/spinner.scss | 38 +- src/common/techstack/TechStackInfo.js | 106 +- src/common/techstack/TechStacks.jsx | 20 +- src/common/utils/countByProp.js | 7 +- src/globals.d.ts | 6 +- src/index.js | 33 +- src/meta/DefMeta.jsx | 14 +- src/meta/play-meta-util.js | 8 +- src/plays/2048/Game2048Components/Cell.js | 2 +- src/plays/2048/Game2048Components/Game.js | 10 +- .../2048/Game2048Components/GameHeader.js | 29 +- .../2048/Game2048Components/GameOverlay.js | 39 +- src/plays/2048/Game2048Components/Grid.js | 74 +- src/plays/2048/Game2048Components/Modal.js | 27 +- src/plays/2048/Game2048Components/Row.js | 4 +- src/plays/2048/Game2048Components/Score.js | 6 +- .../2048/Game2048Components/VideoMusic.js | 10 +- src/plays/2048/Game2048Styles/Modal.css | 10 +- src/plays/2048/Game2048Styles/game-header.css | 24 +- .../2048/Game2048Styles/game-overlay.css | 15 +- src/plays/2048/Game2048Styles/game.css | 103 +- src/plays/2048/GameTwentyFourtyEight.js | 42 +- src/plays/2048/TwentyFourtyEight.js | 7 +- src/plays/2048/gameLogic.js | 32 +- src/plays/2048/readme.md | 3 +- src/plays/2048/transformGrid.js | 53 +- src/plays/analog-clock/AnalogClock.css | 6 +- src/plays/analog-clock/AnalogClock.jsx | 13 +- src/plays/calendar/Calendar.scss | 42 +- src/plays/calendar/Calendar.tsx | 9 +- src/plays/calendar/CalendarDayTile.tsx | 47 +- src/plays/calendar/CalendarEvent.tsx | 41 +- src/plays/calendar/CalendarEventForm.tsx | 126 +- src/plays/calendar/CalendarEventInfo.tsx | 27 +- src/plays/calendar/CalendarEvents.tsx | 34 +- src/plays/calendar/CalendarEventsMore.tsx | 22 +- src/plays/calendar/CalendarGrid.tsx | 58 +- src/plays/calendar/CalendarNavigation.tsx | 40 +- src/plays/calendar/Context.tsx | 89 +- src/plays/calendar/EventType.ts | 14 +- src/plays/calendar/ModalContainer.tsx | 25 +- src/plays/calendar/Readme.md | 2 +- src/plays/calendar/utils.tsx | 70 +- src/plays/clock/CurrentTimer.jsx | 12 +- src/plays/clock/Readme.md | 2 +- src/plays/clock/clock.css | 11 +- src/plays/code-editor/Button.jsx | 2 +- src/plays/code-editor/CodeEditor.js | 64 +- src/plays/code-editor/Editor.jsx | 68 +- src/plays/code-editor/Modal.jsx | 34 +- src/plays/code-editor/Readme.md | 6 +- src/plays/code-editor/modal.css | 282 +- src/plays/code-editor/styles.css | 72 +- .../ContextWithRealUsecases.jsx | 28 +- .../context-with-real-usecases/Recipes.js | 211 +- .../components/ContextInfoSlider.jsx | 55 +- .../components/CuisineModal.jsx | 8 +- .../components/Heading.jsx | 10 +- .../components/Main/Main.jsx | 4 +- .../components/Main/RecipeGrid.jsx | 16 +- .../components/Menu.jsx | 9 +- .../context/CuisineContext.jsx | 2 +- .../contextWithRealUsecases.css | 10 +- src/plays/counter/Counter.jsx | 49 +- src/plays/counter/CounterApp.jsx | 16 +- src/plays/counter/counter.css | 6 +- src/plays/countries-statics/Context.jsx | 2 +- .../countries-statics/CountriesStatics.jsx | 38 +- src/plays/countries-statics/Country.jsx | 96 +- src/plays/countries-statics/Map.jsx | 30 +- .../countries-statics/SearchAndFilter.jsx | 18 +- src/plays/countries-statics/featues.json | 87 +- src/plays/date-time-counter/CdTimerComp.jsx | 20 +- .../date-time-counter/CountDownTimer.jsx | 23 +- .../date-time-counter/DateTimeDisplay.jsx | 2 +- src/plays/date-time-counter/Readme.md | 2 +- src/plays/date-time-counter/datetime.css | 8 +- .../date-time-counter/hooks/useCountDown.js | 14 +- src/plays/dev-jokes/DevJokes.tsx | 20 +- src/plays/dev-jokes/Readme.md | 6 +- src/plays/dev-jokes/Spinner.tsx | 9 +- src/plays/dev-jokes/devJokes.css | 16 +- src/plays/dev-jokes/spinner.css | 28 +- .../CustomHooks/UseCustomFetchAPI.jsx | 8 +- .../DownloadFetchResponse.jsx | 63 +- src/plays/dynamic-routes/Data.js | 47 +- src/plays/dynamic-routes/DynamicRoutes.jsx | 27 +- src/plays/dynamic-routes/Navbar.jsx | 8 +- src/plays/dynamic-routes/dynamicRoutes.css | 4 +- src/plays/emojipedia/Emojipedia.js | 251 +- src/plays/emojipedia/components/EmojiCard.js | 32 +- .../emojipedia/components/SkeletonCard.js | 34 +- src/plays/emojipedia/config.js | 4 +- src/plays/emojipedia/readme.md | 122 +- .../expanding-cards/Expanding-Card-Images.jsx | 32 +- src/plays/expanding-cards/ExpandingCards.css | 1 - src/plays/expanding-cards/ExpandingCards.jsx | 20 +- src/plays/flip-card-effect/Card.jsx | 12 +- src/plays/flip-card-effect/FlipCardEffect.css | 2 +- src/plays/flip-card-effect/FlipCardEffect.jsx | 16 +- src/plays/fun-quiz/EndScreen.jsx | 44 +- src/plays/fun-quiz/FrontScreen.jsx | 59 +- src/plays/fun-quiz/FrontScreen.scss | 6 +- src/plays/fun-quiz/FunQuiz.jsx | 35 +- src/plays/fun-quiz/FunQuiz.scss | 8 +- src/plays/fun-quiz/QuizScreen.jsx | 65 +- src/plays/fun-quiz/QuizScreen.scss | 9 +- src/plays/fun-quiz/Readme.md | 1 - src/plays/fun-quiz/_variables.scss | 7 +- .../GithubProfileSearch.js | 11 +- src/plays/git-hub-profile-search/Readme.md | 1 - .../components/Input.jsx | 45 +- .../components/Results.jsx | 151 +- .../context/ResultContextProvider.jsx | 55 +- src/plays/git-hub-profile-search/styles.css | 216 +- .../github-user-search/GitHubUserCard.jsx | 4 +- .../github-user-search/GitHubUserSearch.jsx | 66 +- src/plays/image-carousel/ImageCarousel.tsx | 59 +- src/plays/image-carousel/Readme.md | 2 +- src/plays/image-carousel/common/data.ts | 35 +- src/plays/image-carousel/styles.css | 48 +- src/plays/image-collector/ImageCollector.js | 14 +- src/plays/image-compressor/ImageCompressor.js | 28 +- src/plays/image-compressor/readme.md | 3 +- src/plays/image-gallery/Gallery.js | 73 +- src/plays/image-gallery/GalleryAPI.js | 389 +- src/plays/image-gallery/Imagegallery.js | 2 - src/plays/image-gallery/Readme.md | 4 +- src/plays/image-gallery/styles.css | 26 +- .../infinite-scrolling/InfiniteScrolling.js | 10 +- src/plays/infinite-scrolling/Posts.js | 5 +- src/plays/infinite-scrolling/readme.md | 3 + src/plays/keeper/CreateArea.jsx | 25 +- src/plays/keeper/Header.jsx | 17 +- src/plays/keeper/Keeper.css | 12 +- src/plays/keeper/Keeper.jsx | 8 +- src/plays/keeper/Notes.jsx | 24 +- src/plays/keeper/README.md | 5 +- src/plays/markdown-editor/Downloader.jsx | 47 +- src/plays/markdown-editor/MarkdownEditor.js | 75 +- src/plays/markdown-editor/Output.jsx | 16 +- src/plays/markdown-editor/Readme.md | 6 +- src/plays/markdown-editor/styles.css | 123 +- src/plays/memory-game/NetlifyCardGame.jsx | 93 +- src/plays/memory-game/NetlifyCardGame.scss | 4 +- src/plays/memory-game/Readme.md | 1 - src/plays/memory-game/modal.js | 48 +- src/plays/memory-game/modal.scss | 1 - src/plays/motivate-me/MotivateMe.js | 24 +- src/plays/motivate-me/README.md | 18 +- .../motivate-me/components/cards/index.css | 68 +- .../motivate-me/components/cards/index.js | 29 +- .../motivate-me/components/header/index.css | 10 +- .../motivate-me/components/header/index.js | 8 +- .../components/search-bar/index.css | 206 +- .../components/search-bar/index.js | 67 +- src/plays/motivate-me/container/index.js | 28 +- ...motivational_quote_card_container_main.css | 16 +- src/plays/motivate-me/data.js | 70 +- src/plays/motivate-me/motivate_me_style.css | 8 +- src/plays/movies/Movie.jsx | 18 +- src/plays/movies/MovieContainer.jsx | 26 +- src/plays/movies/Readme.md | 2 +- src/plays/movies/movies.css | 4 +- .../MultiselectComponent.tsx | 72 +- src/plays/multiselect-component/Readme.md | 2 +- .../components/CloseOptionsIcon.tsx | 19 +- .../components/MultiSelect.tsx | 194 +- .../components/OpenOptionsIcon.tsx | 19 +- src/plays/multiselect-component/styles.scss | 4 +- src/plays/navbar/Backgrounds.js | 103 +- src/plays/navbar/NavBar.css | 66 +- src/plays/navbar/NavBar.jsx | 3 +- src/plays/navbar/Readme.md | 4 +- src/plays/navbar/navListItems.js | 309 +- .../NewsFeedApplication.jsx | 32 +- .../component/CustomToggleButtonGroup.jsx | 29 +- .../component/NewsCard.jsx | 22 +- .../countriesAndCategories.js | 43 +- src/plays/news-feed-application/styles.css | 166 +- src/plays/org-tree/BasicTree.jsx | 37 +- src/plays/org-tree/Readme.md | 2 +- src/plays/org-tree/basic-tree.css | 2 +- src/plays/org-tree/org.js | 32 +- .../password-generator/PasswordGenerator.jsx | 40 +- src/plays/password-generator/Readme.md | 3 +- src/plays/password-generator/data.json | 65 +- .../password-generator-style.css | 499 +- .../PersonalProfileCard.tsx | 85 +- src/plays/personal-profile-card/Readme.md | 3 +- .../components/profile-card.tsx | 62 +- .../components/profile-form.tsx | 65 +- src/plays/personal-profile-card/index.css | 8 +- .../personal-profile-card/types/index.ts | 22 +- src/plays/play-fair-cipher/PlayFairCipher.tsx | 380 +- src/plays/play-fair-cipher/readme.md | 12 +- src/plays/play-fair-cipher/styles.css | 100 +- src/plays/pokemon-stats/PokemonStats.tsx | 36 +- src/plays/pokemon-stats/Readme.md | 6 +- .../pokemon-stats/components/Pokemoncard.tsx | 6 +- src/plays/pokemon-stats/components/Search.tsx | 6 +- .../pokemon-stats/components/pokecard.css | 29 +- src/plays/pokemon-stats/components/search.css | 10 +- src/plays/pokemon-stats/styles.css | 22 +- .../qr-code-generator/QrCodeGenerator.js | 54 +- src/plays/qr-code-generator/styles.css | 56 +- src/plays/quiz-app/QuizApp.tsx | 301 +- src/plays/quiz-app/types.ts | 2 +- src/plays/quizeo/Quizeo.jsx | 33 +- src/plays/quizeo/Readme.md | 6 +- .../directory/directory.component.jsx | 48 +- .../components/directory/directory.styles.css | 16 +- .../components/header/header.component.js | 14 +- .../components/header/header.styles.css | 16 +- .../components/menu-item/menu-item.styles.css | 58 +- .../menu-item/menuItem.component.js | 41 +- .../questions/questions.component.js | 125 +- .../components/questions/questions.styles.css | 177 +- src/plays/quizeo/data/movie.data.jsx | 498 +- .../pages/moviePage/moviePage.component.js | 28 +- .../pages/score-page/score.component.js | 55 +- .../quizeo/pages/score-page/score.styles.css | 80 +- src/plays/quizeo/quizeo.css | 12 +- .../redux/directory/directory-reducer.js | 69 +- .../redux/directory/directory-selectors.js | 8 +- src/plays/quizeo/redux/movie/movie-reducer.js | 102 +- src/plays/quizeo/redux/movie/movieSelector.js | 51 +- .../quizeo/redux/questions/question-types.js | 16 +- .../quizeo/redux/questions/question.utils.js | 19 +- .../redux/questions/questions-action.js | 38 +- src/plays/quizeo/redux/root-reducer.js | 22 +- src/plays/quizeo/redux/store.js | 6 +- src/plays/quote-generator/QuoteGenerator.jsx | 46 +- src/plays/quote-generator/Readme.md | 2 +- src/plays/quote-generator/quoteGenerator.css | 12 +- .../RandomMemeGenerator.jsx | 54 +- .../random-meme-generator.css | 70 +- src/plays/random-meme-generator/readme.md | 1 - .../react-gradients/GradientComponent.js | 27 +- src/plays/react-gradients/ReactGradients.js | 22 +- src/plays/react-gradients/Readme.md | 65 +- src/plays/react-gradients/gradients.json | 146 +- src/plays/react-todo-app/ReactTodoApp.jsx | 9 +- src/plays/react-todo-app/components/Input.jsx | 34 +- src/plays/react-todo-app/components/Todo.jsx | 16 +- .../react-todo-app/components/TodoList.jsx | 6 +- src/plays/react-todo-app/react-todo.css | 34 +- .../registration-form/RegistrationForm.jsx | 108 +- .../savings-calculator/SavingsCalculator.jsx | 18 +- .../components/SavingOptions/index.jsx | 40 +- .../SavingOptions/savingOptions.scss | 9 +- .../tests/SavingOptionsTest.test.jsx | 42 +- .../components/Total/index.jsx | 8 +- .../components/Total/tests/TotalTest.test.jsx | 10 +- .../components/Total/total.scss | 2 +- src/plays/savings-calculator/readme.md | 3 + .../styles/savingsCalculator.scss | 5 +- .../utils/getCalculatedSaving.js | 12 +- .../utils/getCurrencySymbol.js | 4 +- src/plays/sierpinski-triangle/README.md | 3 +- .../SierpinskiTriangle.tsx | 26 +- src/plays/sierpinski-triangle/Triangle.ts | 4 +- src/plays/sierpinski-triangle/utils/index.ts | 9 +- src/plays/simple-live-chat/Readme.md | 5 +- src/plays/simple-live-chat/SimpleLiveChat.jsx | 31 +- src/plays/simple-live-chat/_variables.scss | 3 +- .../components/chat/chat-body.jsx | 39 +- .../components/chat/chat-body.scss | 7 +- .../components/chat/chat-footer.jsx | 66 +- .../components/chat/chat-footer.scss | 2 +- .../components/chat/chat-header.jsx | 6 +- .../components/chat/chat-header.scss | 2 +- .../simple-live-chat/components/chat/chat.jsx | 43 +- .../components/chat/chat.scss | 2 +- .../components/chat/components/User.jsx | 8 +- .../components/chat/hooks/useDateFormat.js | 6 +- .../components/signin-button.jsx | 22 +- .../components/signin-button.scss | 2 +- .../simple-live-chat/components/user/user.jsx | 18 +- .../components/user/user.scss | 2 +- src/plays/simple-live-chat/firebase.js | 4 +- .../simple-live-chat/simpleLiveChat.scss | 6 +- src/plays/social-card/CardDetails.jsx | 95 +- src/plays/social-card/CardForm.jsx | 29 +- src/plays/social-card/Readme.md | 1 + src/plays/social-card/SocialCard.jsx | 8 +- .../social-card/context/SocialContext.js | 6 +- src/plays/social-card/social-card.css | 16 +- src/plays/star-rating/Readme.md | 2 - src/plays/star-rating/StarRating.js | 29 +- src/plays/states/Readme.md | 3 +- src/plays/states/States.jsx | 38 +- src/plays/states/states.css | 7 +- src/plays/text-avatar/Readme.md | 2 +- src/plays/text-avatar/TextAvatar.tsx | 28 +- .../text-avatar/components/Avatar/index.tsx | 28 +- .../text-avatar/components/Avatar/style.scss | 18 +- .../text-avatar/components/UserCard/index.tsx | 18 +- .../components/UserCard/style.scss | 32 +- src/plays/text-avatar/hooks/useFetchUser.ts | 109 +- src/plays/text-avatar/style.scss | 22 +- src/plays/text-avatar/types.ts | 41 +- src/plays/text-avatar/utils/index.ts | 16 +- src/plays/tic-tac-toe-game/Readme.md | 4 +- src/plays/tic-tac-toe-game/TicTacToeGame.jsx | 14 +- .../tic-tac-toe-game/components/Game.jsx | 28 +- .../styles/tic-tac-toe-tj.css | 109 +- .../typing-speed-test/TypingSpeedTest.js | 43 +- .../components/ResultModal.js | 113 +- .../typing-speed-test/components/Stats.js | 48 +- .../typing-speed-test/components/Timer.js | 20 +- .../components/TypingTest.js | 410 +- .../typing-speed-test/components/Word.js | 37 +- src/plays/typing-speed-test/readme.md | 108 +- src/plays/typing-speed-test/styles.css | 28 +- src/plays/typing-speed-test/utils/index.js | 30 +- src/plays/weather/Weather.js | 20 +- src/plays/weather/components/CityInput.js | 6 +- src/plays/weather/components/ForecastData.js | 2 +- src/plays/weather/components/ForecastItem.js | 13 +- src/plays/weather/components/WeatherOutput.js | 37 +- src/plays/weather/styles.scss | 8 +- src/plays/weather/utils/index.js | 12 +- src/plays/web3-staking-dapp/Readme.md | 6 +- .../web3-staking-dapp/Web3StakingDapp.js | 57 +- .../5faf9c6c2f8753632f3c7c13937cd196.json | 10797 +++++++++++++++- .../web3-staking-dapp/components/Navbar.js | 59 +- src/plays/web3-staking-dapp/constant.js | 2 +- .../smart-contract/hardhat.config.js | 20 +- .../smart-contract/scripts/deploy.js | 22 +- .../smart-contract/test/Staking.js | 22 +- src/plays/why-react/Readme.md | 2 +- src/plays/why-react/WhyReact.jsx | 25 +- src/plays/why-react/why-react.css | 4 +- src/plays/why-typescript/Readme.md | 1 + src/plays/why-typescript/WhyTypescript.tsx | 8 +- src/plays/why-typescript/data.json | 41 +- src/plays/why-typescript/wizard/index.css | 47 +- src/plays/why-typescript/wizard/index.tsx | 22 +- src/plays/why-typescript/wizard/page.tsx | 6 +- src/registerServiceWorker.js | 8 +- src/reportWebVitals.js | 2 +- src/service-worker.js | 38 +- tailwind.config.js | 18 +- tsconfig.json | 32 +- 435 files changed, 19052 insertions(+), 8666 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 918c3660ec..ff9130b987 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index edf6317482..6ca7fc820b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,19 +1,19 @@ # Contributing When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/reactplay/react-play/issues), -[email](mailto:ioreactplay@gmail.com), or any other method with the owners of this repository before making a change. +[email](mailto:ioreactplay@gmail.com), or any other method with the owners of this repository before making a change. Please note we have a [Code of Conduct](https://github.com/reactplay/react-play/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project. ## Pull Request Process -1. Ensure any install or build dependencies are removed before the end of the layer when doing a +1. Ensure any install or build dependencies are removed before the end of the layer when doing a build. -2. Update the README.md with details of changes to the interface, this includes new environment +2. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters. 3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). -4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you +4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you. ## Code of Conduct @@ -32,21 +32,21 @@ orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or -advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ### Our Responsibilities @@ -89,4 +89,4 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ \ No newline at end of file +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md index bc65cc0b51..51d10c1719 100644 --- a/CREATE-PLAY.md +++ b/CREATE-PLAY.md @@ -1,11 +1,15 @@ # Create a Play + This document helps you with the steps to `Create a play` in `react-play`. You will also find the details of how to submit a play for code review. + ## 🖥️ Steps to Create a Play + Welcome developers! We are as excited as you are to know that you are going to create a new play. It is super easy to get started. > **Note:** The steps below assumes that you have forked and cloned the [react-play](https://github.com/reactplay/react-play) repository. Also, you have installed the dependencies using the `npm install` or `yarn install` command. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. -- Run the application using +- Run the application using + ```bash yarn start #OR @@ -13,44 +17,47 @@ Welcome developers! We are as excited as you are to know that you are going to c ``` If you face dependency issues, then try running this command: + ```bash npm install --legacy-peer-deps ``` + You might check the [README](README.md) file for more details. - You might see a prompt like this - + You might see a prompt like this + ```bash Need to install the following packages: create-react-play Ok to proceed? (y) ``` + Press `y` and hit `Enter`. This will install `create-react-play` globally. For more info check [`create-react-play readme`](https://github.com/reactplay/create-react-play/blob/main/README.md) - You should be able to access the application on http://localhost:3000 -- Click on `Create` button. Note, its a `beta` feature, feel free to [log issue](https://github.com/reactplay/react-play/issues) (if any) +- Click on `Create` button. Note, its a `beta` feature, feel free to [log issue](https://github.com/reactplay/react-play/issues) (if any) - The application will try to authenticate you - If you are NOT already logged in with [`NHost`](https://nhost.io), you will be prompted to give permission - Log in with your GitHub account - Fill the information and submit. Parameter details - - | Field | Mandatory? | Description | - | --------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | Name | YES | It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. | - | Issue | YES | Every play should be mapped with an issue. Select it here. | - | Language | YES | Let the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it. | - | Style | NO | Let the application know your choice of style. It supports both css and scss. You can pick either of it. | - | Level | YES | You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React. | - | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. | - | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks | - | Cover Image URL | NO | A cover image is used to show your play with a thumbnail in the play list page. Please provide a link to a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image. | - | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. | - | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. | + + | Field | Mandatory? | Description | + | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Name | YES | It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. | + | Issue | YES | Every play should be mapped with an issue. Select it here. | + | Language | YES | Let the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it. | + | Style | NO | Let the application know your choice of style. It supports both css and scss. You can pick either of it. | + | Level | YES | You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React. | + | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. | + | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks | + | Cover Image URL | NO | A cover image is used to show your play with a thumbnail in the play list page. Please provide a link to a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image. | + | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. | + | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. | - On successfull submission, you will be redirected to a page where it will prompt you with the `play_id` - Stop your application -- Navigate to the root of the reactplay +- Navigate to the root of the reactplay - Run following command ```bash npx create-react-play -c @@ -61,14 +68,15 @@ Welcome developers! We are as excited as you are to know that you are going to c #OR npm run start ``` -- You should now see your play added to the [play list](http://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play. -- And you will notice a directory created for your play under `./src/plays/` -- Continue developing your play. Happy coding. - +- You should now see your play added to the [play list](http://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play. +- And you will notice a directory created for your play under `./src/plays/` +- Continue developing your play. Happy coding. + ## 👀 Submitting a Play for Review + After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process. -- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. +- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. - Dedicate some time in a week to take care of the review comments. Once the Pull Request is approved and merged, we will notify you and add you as a `Contributor` to the [react-play](https://github.com/reactplay/react-play) project. @@ -76,8 +84,3 @@ Once the Pull Request is approved and merged, we will notify you and add you as ## ✋ Need Help? You can reach out to us at [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO) with a DM. Additionally, feel free to open a [discussion](https://github.com/reactplay/react-play/discussions) or [issue](https://github.com/reactplay/react-play/issues) on the `react-play` repository. - - - - - diff --git a/README.md b/README.md index 3b11aefe77..d2cb8fafe8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # ReactPlay(Repo: `react-play`) + + [![All Contributors](https://img.shields.io/badge/all_contributors-58-orange.svg?style=flat-square)](#contributors-) +

@@ -45,7 +48,6 @@

- ## 👋 Introducing ReactPlay

@@ -55,11 +57,13 @@ `react-play` is an `open-source` web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of `ReactJS projects` that you can use to learn ReactJS. Is that all? Nope. You can also create your projects and share them with the world. The best part is that the ReactJS experts will `review` your project code before it gets part of the `ReactPlay` app. Isn't that a pure WIN-WIN? + ## 🔥 Demo + Here is the link to the app. We hope you enjoy it. > [The ReactPlay app Link](https://reactplay.io) - + Who doesn't want motivation and support? Many Thanks to all the Stargazers who have supported this project with stars(⭐). You all are amazing!!! @@ -78,23 +82,26 @@ You may want to set up the `react-play` repo for the following reasons: Here is a quick overview of the `react-play` repo setup: -### 🍴 Fork and Clone the Repo +### 🍴 Fork and Clone the Repo + First, you need to fork the `react-play` repo. You can do this by clicking the `Fork` button on the top right corner of the repo. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. Once forked, you can clone the repo by clicking the `Clone or Download` button on the top right corner of the forked repo. Please change the directory after cloning the repository using the `cd ` command. ->**Note:** Please do not remove the `.env.development` file from the root folder. It contains all the evironment variables required for development. +> **Note:** Please do not remove the `.env.development` file from the root folder. It contains all the evironment variables required for development. ### ⬇️ Install Dependencies + Next, install the dependencies by running the following command in the `react-play` repo: ```bash npm install ``` + Or - + ```bash yarn install ``` @@ -106,13 +113,15 @@ npm install --legacy-peer-deps ``` ### 🦄 Start the Development Mode + Use the following command to start the app in the development mode: ```bash npm start ``` + Or - + ```bash yarn start ``` @@ -122,13 +131,15 @@ It runs the app in development mode. Open [http://localhost:3000](http://localho The page will reload when you make changes. You may also see any lint errors in the console. ### 🧱 Build the App for Production + Use the following command to build the app for production: ```bash npm run build ``` + Or - + ```bash yarn build ``` @@ -165,6 +176,7 @@ You can deploy the app to `Vercel` or `Netlify` with a single click. ## 🤝 Contributing to `ReactPlay` + Any kind of positive contribution is welcome! Please help us to grow by contributing to the project. If you wish to contribute, you can, @@ -179,14 +191,15 @@ If you wish to contribute, you can, > Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us. ## Launching reactplay Rewards - Contributed to reactplay? Here is a big thank you from our community to you. - Claim your badge and showcase them with pride. - Let us inspire more folks ! - - ![reactplay Badges](https://aviyel.com/assets/uploads/rewards/share/project/43/512/share.png) - - ### **[Claim Now!](https://aviyel.com/projects/43/reactplay/rewards)** - + +Contributed to reactplay? Here is a big thank you from our community to you. +Claim your badge and showcase them with pride. +Let us inspire more folks ! + +![reactplay Badges](https://aviyel.com/assets/uploads/rewards/share/project/43/512/share.png) + +### **[Claim Now!](https://aviyel.com/projects/43/reactplay/rewards)** + ## 🙏 Support We all need support and motivation. `ReactPlay` is not an exception. Please give this project a ⭐️ to encourage and show that you liked it. Don't forget to leave a star ⭐️ before you move away. @@ -203,9 +216,6 @@ If you found the app helpful, consider supporting us with a coffee. A ⭐️ to ReactPlay is to make us more 💪 stronger and motivated. - - - ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): diff --git a/cypress.config.ts b/cypress.config.ts index 35dbb7fce2..26e545d0df 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -1,11 +1,11 @@ -import { defineConfig } from "cypress"; +import { defineConfig } from 'cypress'; export default defineConfig({ e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, - baseUrl: "http://localhost:3000", - watchForFileChanges: false, - }, + baseUrl: 'http://localhost:3000', + watchForFileChanges: false + } }); diff --git a/cypress/e2e/homePage.cy.ts b/cypress/e2e/homePage.cy.ts index 99a075d743..b892e5c11b 100644 --- a/cypress/e2e/homePage.cy.ts +++ b/cypress/e2e/homePage.cy.ts @@ -1,47 +1,44 @@ /// -import { CONTRIBUTORS_COUNT, TWEET_COUNT } from "../support/constant"; +import { CONTRIBUTORS_COUNT, TWEET_COUNT } from '../support/constant'; -describe("Test home page", () => { +describe('Test home page', () => { beforeEach(() => { - cy.visit("/"); + cy.visit('/'); }); - it("Header component should render properly", () => { - cy.get('[data-testid="app-header"]').should("be.visible"); - cy.get('[data-testid="app-logo"]').should("be.visible"); - cy.get('[data-testid="plays-search-box-container"]').should("not.exist"); - cy.get('[data-testid="header-links-container"]').should("be.visible"); - cy.get('[data-testid="browse-btn"]').should("be.visible").as("browseBtn"); - cy.get('[data-testid="create-btn"]').should("be.visible"); - cy.get('[data-testid="ideas-btn"]').should("be.visible"); - cy.get('[data-testid="github-btn"]').should("be.visible"); - cy.get('[data-testid="twitter-btn"]').should("be.visible"); - cy.get('[data-testid="share-btn"]').should("be.visible"); + it('Header component should render properly', () => { + cy.get('[data-testid="app-header"]').should('be.visible'); + cy.get('[data-testid="app-logo"]').should('be.visible'); + cy.get('[data-testid="plays-search-box-container"]').should('not.exist'); + cy.get('[data-testid="header-links-container"]').should('be.visible'); + cy.get('[data-testid="browse-btn"]').should('be.visible').as('browseBtn'); + cy.get('[data-testid="create-btn"]').should('be.visible'); + cy.get('[data-testid="ideas-btn"]').should('be.visible'); + cy.get('[data-testid="github-btn"]').should('be.visible'); + cy.get('[data-testid="twitter-btn"]').should('be.visible'); + cy.get('[data-testid="share-btn"]').should('be.visible'); - cy.get("@browseBtn").click(); - cy.get('[data-testid="plays-search-box-container"]').should("be.visible"); + cy.get('@browseBtn').click(); + cy.get('[data-testid="plays-search-box-container"]').should('be.visible'); }); - it("Tweet section should render with all tweets", () => { - cy.intercept("GET", "https://cdn.syndication.twimg.com/*").as("tweets"); - cy.wait("@tweets"); - cy.get('[data-testid="tweet-container"]') - .scrollIntoView() - .should("be.visible"); + it('Tweet section should render with all tweets', () => { + cy.intercept('GET', 'https://cdn.syndication.twimg.com/*').as('tweets'); + cy.wait('@tweets'); + cy.get('[data-testid="tweet-container"]').scrollIntoView().should('be.visible'); cy.get('[data-testid="tweet-container"] [id*="twitter-widget"]').should( - "have.length", + 'have.length', TWEET_COUNT ); - cy.get('[data-testid="watch-svg"]').should("not.exist"); + cy.get('[data-testid="watch-svg"]').should('not.exist'); }); - it("Contributors section should render with all contributors", () => { - cy.get('[data-testid="contributors-section"]') - .scrollIntoView() - .should("be.visible"); - cy.get( - '[data-testid="contributors-section"] [data-testid*="contributor-"]' - ).should("have.length", CONTRIBUTORS_COUNT); + it('Contributors section should render with all contributors', () => { + cy.get('[data-testid="contributors-section"]').scrollIntoView().should('be.visible'); + cy.get('[data-testid="contributors-section"] [data-testid*="contributor-"]').should( + 'have.length', + CONTRIBUTORS_COUNT + ); }); }); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a42c..95857aea4c 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -34,4 +34,4 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index f80f74f8e1..598ab5f0d7 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/postcss.config.js b/postcss.config.js index 33ad091d26..5cbc2c7d87 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, -} + autoprefixer: {} + } +}; diff --git a/src/App.css b/src/App.css index 9be2b6491e..65b0406295 100644 --- a/src/App.css +++ b/src/App.css @@ -3,7 +3,7 @@ @tailwind components; @tailwind utilities; -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Raleway:wght@900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Raleway:wght@900&display=swap'); .text-center { text-align: center; @@ -129,8 +129,7 @@ body * { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } small { @@ -571,7 +570,6 @@ small { fill: var(--color-neutral-50); } - .brand-tech-stack .image { filter: invert(60%) sepia(12%) saturate(186%) hue-rotate(151deg) brightness(86%) contrast(84%); } diff --git a/src/App.js b/src/App.js index ef6aea528b..5c8c0c7e3b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,12 @@ -import "App.css"; -import { Outlet } from "react-router-dom"; +import 'App.css'; +import { Outlet } from 'react-router-dom'; function App() { return (

- ) + ); } export default App; diff --git a/src/ErrorBoundary/ErrorBoundary.jsx b/src/ErrorBoundary/ErrorBoundary.jsx index 8464d52982..58efcc864a 100644 --- a/src/ErrorBoundary/ErrorBoundary.jsx +++ b/src/ErrorBoundary/ErrorBoundary.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import { ErrorBoundary } from "react-error-boundary"; -import ErrorFallback from "./ErrorFallback"; +import React from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import ErrorFallback from './ErrorFallback'; const ErrorBoundry = ({ children }) => { const onErrorReset = () => { @@ -8,7 +8,7 @@ const ErrorBoundry = ({ children }) => { * Had to do this because we have placed the ErrorBoundary at the top level * and we can't use the react-router hooks outside of the Router */ - window.location.href = "/"; + window.location.href = '/'; }; return ( diff --git a/src/ErrorBoundary/ErrorFallback.jsx b/src/ErrorBoundary/ErrorFallback.jsx index 089b7dd8f8..e357d1c5ff 100644 --- a/src/ErrorBoundary/ErrorFallback.jsx +++ b/src/ErrorBoundary/ErrorFallback.jsx @@ -1,22 +1,22 @@ -import React from "react"; +import React from 'react'; -import { ReactComponent as ImageOops } from "images/img-oops.svg"; -import { Button, Typography } from "@mui/material"; -import { makeStyles } from "@mui/styles"; +import { ReactComponent as ImageOops } from 'images/img-oops.svg'; +import { Button, Typography } from '@mui/material'; +import { makeStyles } from '@mui/styles'; const useStyle = makeStyles({ Typography: { - margin: "8px 0px", - fontWeight: 600, + margin: '8px 0px', + fontWeight: 600 }, Button: { - background: "#00f2fe", - color: "#ffffff", - "&:hover": { - background: "#00f2fe", - color: "#ffffff", - }, - }, + background: '#00f2fe', + color: '#ffffff', + '&:hover': { + background: '#00f2fe', + color: '#ffffff' + } + } }); const ErrorFallback = ({ error, resetErrorBoundary }) => { @@ -25,15 +25,9 @@ const ErrorFallback = ({ error, resetErrorBoundary }) => { return (
- - Something went wrong! - + Something went wrong! {error.message} -
diff --git a/src/common/404/404.css b/src/common/404/404.css index 585bf0bbab..330ddc3f03 100644 --- a/src/common/404/404.css +++ b/src/common/404/404.css @@ -1,70 +1,70 @@ .page-404 { - padding: 2rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: calc(100vh - 120px); + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: calc(100vh - 120px); } .page-404-image { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .under-development { - max-width: 600px; + max-width: 600px; } .page-404-lead { - margin: 0; - font-family: var(--ff-accent); - font-size: var(--fs-xl); - text-align: center; + margin: 0; + font-family: var(--ff-accent); + font-size: var(--fs-xl); + text-align: center; } @media screen and (max-width: 768px) { - .page-404-lead { - line-height: var(--lh-rg); - margin-bottom: 1rem; - } - .under-development { - max-width: calc(100vw - 100px); - } + .page-404-lead { + line-height: var(--lh-rg); + margin-bottom: 1rem; + } + .under-development { + max-width: calc(100vw - 100px); + } } .page-404-desc { - margin-top: 0; - font-size: var(--fs-md); - text-align: center; + margin-top: 0; + font-size: var(--fs-md); + text-align: center; } .page-404-link { - position: relative; - color: var(--color-neutral-80); - text-decoration: none; - transition: all .5s ease-in-out; - font-weight: var(--fw-semibold); + position: relative; + color: var(--color-neutral-80); + text-decoration: none; + transition: all 0.5s ease-in-out; + font-weight: var(--fw-semibold); } .page-404-link:after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 2px; - height: 2px; - background-color: var(--color-brand-primary); - transition: all .1s ease-in-out; + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 2px; + height: 2px; + background-color: var(--color-brand-primary); + transition: all 0.1s ease-in-out; } .page-404-link:hover, .page-404-link:focus { - color: var(--color-neutral-90); + color: var(--color-neutral-90); } .page-404-link:hover:after, .page-404-link:focus:after { - height: 5px; - bottom: 0; - /* background-color: var(--color-neutral-90); */ -} \ No newline at end of file + height: 5px; + bottom: 0; + /* background-color: var(--color-neutral-90); */ +} diff --git a/src/common/404/PageNotFound.jsx b/src/common/404/PageNotFound.jsx index ea8c590c77..e2dd3ec472 100644 --- a/src/common/404/PageNotFound.jsx +++ b/src/common/404/PageNotFound.jsx @@ -1,8 +1,8 @@ -import { useState, useEffect } from "react"; -import { ReactComponent as Image404 } from "images/img-404.svg"; -import "./404.css"; -import Loader from "common/spinner/spinner"; -import { useNavigate } from "react-router-dom"; +import { useState, useEffect } from 'react'; +import { ReactComponent as Image404 } from 'images/img-404.svg'; +import './404.css'; +import Loader from 'common/spinner/spinner'; +import { useNavigate } from 'react-router-dom'; const PageNotFound = ({ loading, msg, details, Image }) => { const [timer, setTimer] = useState(5); @@ -15,7 +15,7 @@ const PageNotFound = ({ loading, msg, details, Image }) => { return () => { clearInterval(interval); if (timer === 0) { - return navigate("/plays"); + return navigate('/plays'); } }; }, [timer]); @@ -25,22 +25,24 @@ const PageNotFound = ({ loading, msg, details, Image }) => { } return ( -
+
{Image ? ( - under-development + under-development ) : ( - + )} -

{msg}

-

{details}. Redirecting in {timer} sec.

+

{msg}

+

+ {details}. Redirecting in {timer} sec. +

); }; PageNotFound.defaultProps = { - msg: "Looks like you are lost", + msg: 'Looks like you are lost', details: "Why don't you go back to home.", - Image: null, + Image: null }; export default PageNotFound; diff --git a/src/common/activities/hackathon/HackathonBanner.jsx b/src/common/activities/hackathon/HackathonBanner.jsx index fb7360050d..c75a7bdd72 100644 --- a/src/common/activities/hackathon/HackathonBanner.jsx +++ b/src/common/activities/hackathon/HackathonBanner.jsx @@ -1,30 +1,34 @@ -import React from "react"; -import { BsGithub } from "react-icons/bs"; -import { FiStar } from "react-icons/fi"; -import { IoIosRocket } from "react-icons/io"; -import HackerBannerImage from "./img-hero-coders.png"; -import HRPLogo from "./Logo.png"; -import useFetch from "common/hooks/useFetch"; -import "./hackathonBanner.css"; +import React from 'react'; +import { BsGithub } from 'react-icons/bs'; +import { FiStar } from 'react-icons/fi'; +import { IoIosRocket } from 'react-icons/io'; +import HackerBannerImage from './img-hero-coders.png'; +import HRPLogo from './Logo.png'; +import useFetch from 'common/hooks/useFetch'; +import './hackathonBanner.css'; function HackathonBanner() { - const { data } = useFetch( - "https://api.github.com/repos/reactplay/react-play" - ); + const { data } = useFetch('https://api.github.com/repos/reactplay/react-play'); return (
ReactPlay Presents

HACK-R-PLAY - HRP Logo + HRP Logo

-

Developers and Hacking are inseparable!

+

+ Developers and Hacking are inseparable! +

- ReactPlay brings you the opportunity to take part in the Hackathon - and learn from it. Showcase your mindblowing ideas, build projects, - and create content - there are also chances to win exciting prizes. + ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. + Showcase your mindblowing ideas, build projects, and create content - there are also + chances to win exciting prizes.

@@ -35,26 +39,24 @@ function HackathonBanner() { rel="noopener noreferrer" className="body-c2a-btn body-c2a-btn--primary" > - + Get started - - - GitHub{" "} -
- {" "} -
{data.stargazers_count}
-
{" "} - - + href="https://github.com/reactplay/react-play" + target="_blank" + rel="noopener noreferrer" + className="body-c2a-btn umami--click--github" + > + + + GitHub{' '} +
+
{data.stargazers_count}
+
{' '} + +
-
diff --git a/src/common/components/Comment.jsx b/src/common/components/Comment.jsx index ae88a40814..703cfad748 100644 --- a/src/common/components/Comment.jsx +++ b/src/common/components/Comment.jsx @@ -1,11 +1,9 @@ -import Giscus from "@giscus/react"; +import Giscus from '@giscus/react'; const Comment = () => { const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID; - const discussionCategoryId = - process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID; - const discussionCategoryName = - process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME; + const discussionCategoryId = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID; + const discussionCategoryName = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME; return ( <> diff --git a/src/common/components/LevelBadge.jsx b/src/common/components/LevelBadge.jsx index 466dbb7f1a..8cdb2b17cd 100644 --- a/src/common/components/LevelBadge.jsx +++ b/src/common/components/LevelBadge.jsx @@ -1,43 +1,43 @@ - import { useState, useEffect } from 'react'; -import { RiMedal2Fill } from "react-icons/ri"; -import { IoMdTrophy } from "react-icons/io"; -import { IoRibbon } from "react-icons/io5"; - +import { RiMedal2Fill } from 'react-icons/ri'; +import { IoMdTrophy } from 'react-icons/io'; +import { IoRibbon } from 'react-icons/io5'; const LevelBadge = ({ level }) => { const [playLevel, setPlayLevel] = useState(null); useEffect(() => { switch (level) { - case "Beginner": + case 'Beginner': setPlayLevel( {level} - ); + + ); break; - case "Intermediate": + case 'Intermediate': setPlayLevel( {level} - ); + + ); break; - case "Advanced": + case 'Advanced': setPlayLevel( {level} - ); + + ); break; default: setPlayLevel( {level} - ); + + ); } }, [level]); - return ( - <>{playLevel} - ); + return <>{playLevel}; }; -export default LevelBadge; \ No newline at end of file +export default LevelBadge; diff --git a/src/common/components/Like/Like.jsx b/src/common/components/Like/Like.jsx index 50128c25c1..ef3257cda0 100644 --- a/src/common/components/Like/Like.jsx +++ b/src/common/components/Like/Like.jsx @@ -1,24 +1,23 @@ -import { AiOutlineLike, AiFillLike } from "react-icons/ai"; +import { AiOutlineLike, AiFillLike } from 'react-icons/ai'; const Like = ({ onLikeClick, likeObj }) => { - const {liked, number} = likeObj - + const { liked, number } = likeObj; + const likeClickHandler = () => { if (onLikeClick) return onLikeClick(); }; - + return ( ); }; Like.defaultProps = { - onLikeClick: null, + onLikeClick: null }; export default Like; diff --git a/src/common/components/MultiSelect.jsx b/src/common/components/MultiSelect.jsx index 3220eb09ce..725340b94b 100644 --- a/src/common/components/MultiSelect.jsx +++ b/src/common/components/MultiSelect.jsx @@ -1,17 +1,17 @@ -import { useEffect } from "react"; -import OutlinedInput from "@mui/material/OutlinedInput"; -import InputLabel from "@mui/material/InputLabel"; -import MenuItem from "@mui/material/MenuItem"; -import FormControl from "@mui/material/FormControl"; -import ListItemText from "@mui/material/ListItemText"; -import Select from "@mui/material/Select"; -import Checkbox from "@mui/material/Checkbox"; -import { makeStyles } from "@mui/styles"; +import { useEffect } from 'react'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import ListItemText from '@mui/material/ListItemText'; +import Select from '@mui/material/Select'; +import Checkbox from '@mui/material/Checkbox'; +import { makeStyles } from '@mui/styles'; const useStyles = makeStyles({ menuPaper: { - maxHeight: "250px !important", - }, + maxHeight: '250px !important' + } }); export default function MultipleSelectCheckmarks({ @@ -19,7 +19,7 @@ export default function MultipleSelectCheckmarks({ setFilterQuery, options, filterKey, - label, + label }) { const classes = useStyles(); @@ -27,42 +27,42 @@ export default function MultipleSelectCheckmarks({ if ( filterQuery[filterKey].length > 0 && filterQuery[filterKey].length === options.length - 1 && - !filterQuery[filterKey].includes(" ") + !filterQuery[filterKey].includes(' ') ) { - setFilterQuery({ ...filterQuery, [filterKey]: [" "] }); + setFilterQuery({ ...filterQuery, [filterKey]: [' '] }); } }, [filterQuery, setFilterQuery, options, filterKey]); const handleChange = (event) => { const { - target: { value }, + target: { value } } = event; if (value.length === 0) { setFilterQuery({ ...filterQuery, [filterKey]: [] }); - } else if (value.indexOf(" ") > -1) { - const updatedValues = value.filter((id) => id !== " "); - if (updatedValues.length && value[value.length - 1] !== " ") { + } else if (value.indexOf(' ') > -1) { + const updatedValues = value.filter((id) => id !== ' '); + if (updatedValues.length && value[value.length - 1] !== ' ') { setFilterQuery({ ...filterQuery, [filterKey]: updatedValues }); } else { - setFilterQuery({ ...filterQuery, [filterKey]: [" "] }); + setFilterQuery({ ...filterQuery, [filterKey]: [' '] }); } } else { - const updatedValues = value.filter((id) => id !== " "); + const updatedValues = value.filter((id) => id !== ' '); setFilterQuery({ ...filterQuery, [filterKey]: updatedValues }); } }; const renderValueHandler = (value) => { - if (filterKey === "owner_user_id") { + if (filterKey === 'owner_user_id') { return options .filter((option) => value.includes(option.value)) .map((option) => option?.label?.props?.children[1]) - .join(", "); + .join(', '); } return options .filter((option) => filterQuery[filterKey].includes(option.value)) .map((option) => option.label) - .join(", "); + .join(', '); }; return ( @@ -84,7 +84,7 @@ export default function MultipleSelectCheckmarks({ -1 || - filterQuery[filterKey].includes(" ") + filterQuery[filterKey].includes(' ') } /> diff --git a/src/common/components/Notification.jsx b/src/common/components/Notification.jsx index 183323e802..d9f278e634 100644 --- a/src/common/components/Notification.jsx +++ b/src/common/components/Notification.jsx @@ -1,10 +1,10 @@ -import React from "react"; -import { ToastContainer } from "react-toastify"; +import React from 'react'; +import { ToastContainer } from 'react-toastify'; function Notification() { return ( ); } diff --git a/src/common/components/PlayForms.jsx b/src/common/components/PlayForms.jsx index f1b46a93bc..776bec3b4a 100644 --- a/src/common/components/PlayForms.jsx +++ b/src/common/components/PlayForms.jsx @@ -1,8 +1,8 @@ -import { useEffect, useState, useRef } from "react"; -import { TextField, FormControl, Autocomplete, Button } from "@mui/material"; -import * as _ from "lodash"; +import { useEffect, useState, useRef } from 'react'; +import { TextField, FormControl, Autocomplete, Button } from '@mui/material'; +import * as _ from 'lodash'; -const disabledFields = ["issue", "github"]; +const disabledFields = ['issue', 'github']; const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { const [formData, setFormData] = useState({ ...formDataObj }); @@ -20,24 +20,24 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { const renderField = (field) => { switch (field.type) { - case "input": + case 'input': return ( handleChange(field.datafield, e.target.value)} /> ); - case "select": + case 'select': return ( option.name || option[field.fieldName] || option} filterSelectedOptions @@ -45,7 +45,7 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { freeSolo={field.freeSolo} disabled={checkDisabledInputs(field.datafield)} value={ - !formData[field.datafield] ? (field.multiple ? [] : "") : formData[field.datafield] + !formData[field.datafield] ? (field.multiple ? [] : '') : formData[field.datafield] } onChange={(e, newValue) => { let updatedval = newValue; @@ -56,8 +56,8 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { updatedval.push(v); } else { updatedval.push({ - [field.fieldName || "name"]: v, - [field.fieldValue || "value"]: "", + [field.fieldName || 'name']: v, + [field.fieldValue || 'value']: '' }); } }); @@ -65,7 +65,7 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { handleChange(field.datafield, updatedval); }} renderInput={(params) => ( - + )} /> ); @@ -76,15 +76,15 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { const renderForm = () => { return ( - + {fields.map((field, field_key) => { return ( -
-
+
+
{field.display} - {field.required ? "*" : ""} + {field.required ? '*' : ''}
-
{renderField(field)}
+
{renderField(field)}
); })} @@ -108,19 +108,19 @@ const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay }) => { return ( <> -
+
{renderForm()}
-
+
-
+
diff --git a/src/common/components/SocialShare.jsx b/src/common/components/SocialShare.jsx index 453cb6bfa3..cc0328eaff 100644 --- a/src/common/components/SocialShare.jsx +++ b/src/common/components/SocialShare.jsx @@ -1,20 +1,13 @@ - import { IoLogoFacebook, IoLogoTwitter, IoLogoLinkedin, IoLogoReddit } from 'react-icons/io5'; -const SocialShare = ({ showTwitter, showLinkedin, showFB, showReddit , msg}) => { +const SocialShare = ({ showTwitter, showLinkedin, showFB, showReddit, msg }) => { const URL = window.location.href; - const VIA = "reactplayIO"; + const VIA = 'reactplayIO'; const tweetIt = () => { - msg = msg ?? "Learning ReactJS? Check out this awesome React Playlist!"; - const hashTags = [ - "javascript", - "devcommunity", - "100daysofcode", - "react", - "reactplay", - ]; - const tags = encodeURIComponent(hashTags.join(",")); + msg = msg ?? 'Learning ReactJS? Check out this awesome React Playlist!'; + const hashTags = ['javascript', 'devcommunity', '100daysofcode', 'react', 'reactplay']; + const tags = encodeURIComponent(hashTags.join(',')); return `https://twitter.com/intent/tweet?url=${URL}&text=${encodeURIComponent( msg )}&hashtags=${tags}&via=${VIA}`; @@ -29,10 +22,8 @@ const SocialShare = ({ showTwitter, showLinkedin, showFB, showReddit , msg}) => }; const postOnReddit = () => { - const title = "Learning ReactJS? Check out this awesome React Playlist!"; - return `http://www.reddit.com/submit?url=${URL}&title=${encodeURIComponent( - title - )}`; + const title = 'Learning ReactJS? Check out this awesome React Playlist!'; + return `http://www.reddit.com/submit?url=${URL}&title=${encodeURIComponent(title)}`; }; return ( @@ -83,4 +74,4 @@ const SocialShare = ({ showTwitter, showLinkedin, showFB, showReddit , msg}) => ); }; -export default SocialShare; \ No newline at end of file +export default SocialShare; diff --git a/src/common/components/YouTubeEmbed.jsx b/src/common/components/YouTubeEmbed.jsx index c250695615..0ca38ee406 100644 --- a/src/common/components/YouTubeEmbed.jsx +++ b/src/common/components/YouTubeEmbed.jsx @@ -1,18 +1,18 @@ - const YouTubeEmbed = ({ videoId, title }) => { return (