From 2f558ba6118ae28cf144728450f099e037b2dc72 Mon Sep 17 00:00:00 2001 From: Ema Lorenzo Date: Wed, 28 Jul 2021 01:59:05 -0300 Subject: [PATCH 1/3] Simplified lint flow --- .github/workflows/lint.yml | 4 ++-- package.json | 12 +++++------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 07e6ae2..89dfa72 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -17,9 +17,9 @@ jobs: run: | yarn install - - name: Run Prettier and ESlint + - name: Run Prettier and ESLint run: | - yarn lint + yarn eslint types: name: Types diff --git a/package.json b/package.json index 4fcd9d7..67b2767 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,13 @@ { - "name": "react-three-next", - "version": "2.0.0", + "name": "coderhood", + "version": "1.0.0", "authors": [ - "Renaud ROHLINGER " + "Emanuel Lorenzo ", + "Tomas Discoli " ], "private": false, "scripts": { - "lint": "yarn prettier && yarn eslint", - "eslint": "eslint --max-warnings 20 'src/**/*.{js,jsx}' --ext jsconfig.json", - "eslint-fix": "eslint --fix 'src/**/*.{js,jsx}' --ext jsconfig.json", - "prettier": "prettier --list-different '**/*.{js,jsx,md}'", + "eslint": "eslint --max-warnings 20 'src/**/*.{js,jsx,ts,tsx}'", "tsc": "tsc --noEmit", "dev": "next dev", "build": "next build", From 9d775a881c93786aca4d9a212397f5501829a6cb Mon Sep 17 00:00:00 2001 From: Ema Lorenzo Date: Wed, 28 Jul 2021 02:03:51 -0300 Subject: [PATCH 2/3] added ts parser --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 67b2767..246021e 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,8 @@ "@next/bundle-analyzer": "^10.0.7", "@types/node": "^16.3.3", "@types/react": "^17.0.14", + "@typescript-eslint/eslint-plugin": "^4.28.5", + "@typescript-eslint/parser": "^4.28.5", "autoprefixer": "^10.2.6", "babel-eslint": "^10.1.0", "babel-plugin-glsl": "^1.0.0", From 30235ecd0e116bd6fd114ee4e49218c59fdbe175 Mon Sep 17 00:00:00 2001 From: Emanuel Lorenzo Date: Wed, 28 Jul 2021 19:28:34 -0300 Subject: [PATCH 3/3] Developer Experience mejorada (#20) * Improved ESLint rules, sorting, and using next rules * sending with error * testing husky * should fail * should be fixed now * added eslint fix command on pre-commit with husky * improved prettier config * merged tsconfig with jsconfig * removed unnecesary vscode config and added default project vscode settings * removed codesandbox config * lock dependencies * lint * fix mdx images Co-authored-by: Tomas Discoli --- .eslintrc | 57 ++++ .eslintrc.js | 24 -- .husky/pre-commit | 4 + .prettierrc | 6 +- .vscode/launch.json | 39 --- .vscode/settings.json | 15 + .vscode/tasks.json | 18 -- jsconfig.json | 15 - jsconfig.server.json | 14 - next.config.js | 10 +- package.json | 22 +- sandbox.config.json | 8 - src/components/Account.jsx | 9 +- src/components/Auth/SignInForm.jsx | 20 +- src/components/Auth/SignUpForm.jsx | 46 +-- src/components/Auth/Welcome.jsx | 16 +- src/components/Auth/index.jsx | 18 +- src/components/Author.tsx | 11 +- src/components/Box.jsx | 3 + src/components/Bubble.jsx | 19 +- src/components/Bubbles.jsx | 3 +- src/components/Button.jsx | 1 + src/components/Container.jsx | 6 +- src/components/CreateTeamForm.jsx | 39 +-- src/components/CreateTeamModal.jsx | 16 +- src/components/CubesAnimation.jsx | 3 + src/components/Dots.jsx | 6 +- src/components/Footer.jsx | 27 +- src/components/Head.jsx | 34 +- src/components/Header.jsx | 8 +- src/components/Input.jsx | 4 +- src/components/LessonVideo.jsx | 16 +- src/components/MDX.tsx | 1 + src/components/Sidebar.jsx | 6 +- src/components/ThemeSwitcher.jsx | 42 +-- src/components/TransitionManager.jsx | 4 +- src/context/Auth.jsx | 6 +- src/examples/canvas/test_shader.js | 13 +- src/hoc/withProtection.jsx | 6 +- src/hooks/useAuth.jsx | 3 + src/hooks/useInterval.jsx | 1 + src/layouts/Lesson.jsx | 7 +- src/layouts/Module.jsx | 2 +- src/layouts/_canvas.jsx | 1 + src/lib/errors.js | 2 +- src/lib/files.js | 9 +- src/lib/store.js | 2 +- src/lib/string.js | 5 +- src/pages/_document.jsx | 48 +-- src/pages/academy/[module]/[lesson].jsx | 5 +- src/pages/academy/[module]/index.jsx | 4 +- src/pages/academy/index.jsx | 7 +- src/pages/box.jsx | 3 +- src/pages/index.jsx | 5 +- src/pages/profile.jsx | 2 +- src/pages/teams.jsx | 26 +- tailwind.config.js | 2 +- tsconfig.json | 5 +- yarn.lock | 407 ++++++++++++------------ 59 files changed, 575 insertions(+), 586 deletions(-) create mode 100644 .eslintrc delete mode 100644 .eslintrc.js create mode 100755 .husky/pre-commit delete mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json delete mode 100644 .vscode/tasks.json delete mode 100644 jsconfig.json delete mode 100644 jsconfig.server.json delete mode 100644 sandbox.config.json diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..65ffa25 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,57 @@ +{ + "root": true, + "env": { + "browser": true, + "node": true + }, + "parser": "@typescript-eslint/parser", + "extends": [ + "eslint:recommended", + "plugin:prettier/recommended", + "plugin:tailwind/recommended", + "next", // includes eslint-plugin-react / eslint-plugin-react-hooks /eslint-plugin-next + "next/core-web-vitals", + "prettier" // deletes props with conflict with prettier + ], + "rules": { + "no-console": "warn", + "react/prop-types": "off", + "react/display-name": "off", + "react/jsx-indent-props": [2, "first"], + "import/prefer-default-export": "off", + "import/no-cycle": "off", + "no-multi-assign": "off", + "react/react-in-jsx-scope": "off", + "jsx-a11y/anchor-is-valid": "off", + "no-unused-vars": "warn", + "import/order": [ + "warn", + { + "pathGroups": [ + { + "pattern": "@/**", + "group": "external", + "position": "after" + } + ], + "newlines-between": "always" + } + ], + "react/jsx-sort-props": [ + "error", + { + "callbacksLast": true, + "shorthandFirst": true, + "noSortAlphabetically": false, + "reservedFirst": true + } + ], + "padding-line-between-statements": [ + "error", + { "blankLine": "always", "prev": "*", "next": "return" }, + { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" }, + { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] } + ] + }, + "plugins": ["import", "@typescript-eslint"] +} diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 81de1ff..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,24 +0,0 @@ -// @js-ignore -module.exports = { - extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:prettier/recommended', - 'react-app', - 'prettier', - 'plugin:tailwind/recommended', - 'plugin:react-hooks/recommended', - ], - rules: { - 'react/prop-types': 'off', - 'react/display-name': 'off', - 'react/jsx-indent-props': [2, 'first'], - 'import/prefer-default-export': 'off', - 'import/no-cycle': 'off', - 'no-multi-assign': 'off', - 'react/react-in-jsx-scope': 'off', - 'jsx-a11y/anchor-is-valid': 'off', - }, - settings: {}, - plugins: ['import'], -} diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..40df66d --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn eslint --fix diff --git a/.prettierrc b/.prettierrc index b3b93c5..69bde6d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,8 @@ { - "arrowParens": "always", + "arrowParens": "avoid", "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", - "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": true, "printWidth": 100, @@ -14,6 +13,5 @@ "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false + "useTabs": false } diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index ff05d9e..0000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "node", - "request": "launch", - "name": "Next: Node", - "runtimeExecutable": "${workspaceFolder}\\node_modules\\.bin\\next", - "port": 9229, - "console": "integratedTerminal" - }, - { - "type": "chrome", - "request": "launch", - "name": "Next: Chrome", - "url": "http://localhost:3000", - "webRoot": "${workspaceFolder}", - "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile" - }, - { - "type": "firefox", - "request": "launch", - "name": "Next: Firefox", - "url": "http://localhost:3000", - "webRoot": "${workspaceFolder}", - "profileDir": "${workspaceFolder}/.vscode/firefox-debug-profile", - "keepProfileChanges": true - } - ], - "compounds": [ - { - "name": "Next: Full", - "configurations": ["Next: Node", "Next: Chrome"] - } - ] -} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..e5d6161 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,15 @@ +{ + // other settings + // formatting using eslint + // let editor format using prettier for all other files + "editor.formatOnSave": true, + // disable editor formatting, so eslint can handle it + "[javascript]": { + "editor.formatOnSave": false + }, + // available through eslint plugin in vscode + "eslint.alwaysShowStatus": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + } +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json deleted file mode 100644 index c563b87..0000000 --- a/.vscode/tasks.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - // See https://go.microsoft.com/fwlink/?LinkId=733558 - // for the documentation about the tasks.json format - "version": "2.0.0", - "tasks": [ - { - "type": "npm", - "script": "build", - "group": { - "kind": "build", - "isDefault": true - }, - "problemMatcher": [], - "label": "npm: build", - "detail": "next build" - } - ] -} diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index b7f7171..0000000 --- a/jsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -// @js-ignore -{ - "compilerOptions": { - "module": "commonjs", - "allowSyntheticDefaultImports": true, - "baseUrl": ".", - "paths": { - "@/*": ["src/*"], - "@/data/*": ["public/data/*"] - } - }, - "include": ["./src/**/*", "./pages/**/*", "./public/**/*"], - "exclude": ["node_modules"] -} - \ No newline at end of file diff --git a/jsconfig.server.json b/jsconfig.server.json deleted file mode 100644 index 06486ca..0000000 --- a/jsconfig.server.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "./jsconfig.json", - "compilerOptions": { - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "lib": ["es2017"], - "module": "commonjs", - "noEmit": false, - "outDir": "build", - "skipLibCheck": true, - "target": "es2017" - }, - "include": ["server/**/*.js"] -} diff --git a/next.config.js b/next.config.js index 25abb1f..51a87eb 100644 --- a/next.config.js +++ b/next.config.js @@ -1,17 +1,17 @@ -const securityHeaders = require('./src/lib/security') - const plugins = require('next-compose-plugins') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) - const withOffline = require('next-offline') +// const securityHeaders = require('./src/lib/security') + function esbuildLoader(config, options) { - const jsLoader = config.module.rules.find((rule) => rule.test && rule.test.test('.js')) + const jsLoader = config.module.rules.find(rule => rule.test && rule.test.test('.js')) + if (jsLoader && jsLoader.use) { if (jsLoader.use.length > 0) { - jsLoader.use.forEach((e) => { + jsLoader.use.forEach(e => { e.loader = 'esbuild-loader' e.options = options }) diff --git a/package.json b/package.json index 246021e..79d1ec7 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,10 @@ ], "private": false, "scripts": { - "eslint": "eslint --max-warnings 20 'src/**/*.{js,jsx,ts,tsx}'", + "lint": "yarn prettier && yarn eslint", + "eslint": "eslint --max-warnings 50 'src/**/*.{js,jsx,ts,tsx}' --ext tsconfig.json", + "eslint-fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}' --ext tsconfig.json", + "prettier": "prettier --list-different '**/*.{js,jsx,md}'", "tsc": "tsc --noEmit", "dev": "next dev", "build": "next build", @@ -15,14 +18,6 @@ "analyze": "ANALYZE=true next build", "start": "next start" }, - "lint-staged": { - "*.{js,jsx,json,md}": [ - "prettier --write" - ], - "*.{js,jsx}": [ - "eslint --fix" - ] - }, "dependencies": { "@code-surfer/themes": "^3.1.1", "@headlessui/react": "^1.2.0", @@ -57,20 +52,17 @@ "babel-eslint": "^10.1.0", "babel-plugin-glsl": "^1.0.0", "code-surfer": "^3.1.1", - "eslint": "^7.25.0", + "eslint": "^7.31.0", + "eslint-config-next": "^11.0.1", "eslint-config-prettier": "^8.3.0", - "eslint-config-react-app": "^6.0.0", - "eslint-plugin-flowtype": "^5.2.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react": "^7.23.2", - "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-tailwind": "^0.2.1", "file-loader": "^6.2.0", "glslify": "^7.1.1", "glslify-loader": "^2.0.0", - "lint-staged": "^10.5.4", + "husky": "^7.0.1", "mdx-code": "^2.0.0", "mdx-deck": "^4.1.1", "next-compose-plugins": "^2.2.1", diff --git a/sandbox.config.json b/sandbox.config.json deleted file mode 100644 index 784fc4d..0000000 --- a/sandbox.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "infiniteLoopProtection": true, - "hardReloadOnChange": false, - "view": "browser", - "container": { - "node": "12" - } -} diff --git a/src/components/Account.jsx b/src/components/Account.jsx index 7fbfcda..6355153 100644 --- a/src/components/Account.jsx +++ b/src/components/Account.jsx @@ -1,4 +1,5 @@ import { useState, useEffect } from 'react' + import { supabase } from '@/lib/supabaseClient' export const Account = ({ session }) => { @@ -69,7 +70,7 @@ export const Account = ({ session }) => {
- +
@@ -77,7 +78,7 @@ export const Account = ({ session }) => { id='username' type='text' value={username || ''} - onChange={(e) => setUsername(e.target.value)} + onChange={e => setUsername(e.target.value)} />
@@ -86,15 +87,15 @@ export const Account = ({ session }) => { id='website' type='website' value={website || ''} - onChange={(e) => setWebsite(e.target.value)} + onChange={e => setWebsite(e.target.value)} />
diff --git a/src/components/Auth/SignInForm.jsx b/src/components/Auth/SignInForm.jsx index 3795942..e5bdb38 100644 --- a/src/components/Auth/SignInForm.jsx +++ b/src/components/Auth/SignInForm.jsx @@ -84,18 +84,18 @@ export const SignIn = ({ onComplete, onRequestSignUp, unauthorizedMessage }) =>

Inicia sesión con tu email y contraseña.

{getErrorMessage(error)}

- @@ -104,11 +104,11 @@ export const SignIn = ({ onComplete, onRequestSignUp, unauthorizedMessage }) =>

{unauthorizedMessage || 'Que bueno verte de vuelta :)'} diff --git a/src/components/Auth/SignUpForm.jsx b/src/components/Auth/SignUpForm.jsx index 9d1052e..0915bab 100644 --- a/src/components/Auth/SignUpForm.jsx +++ b/src/components/Auth/SignUpForm.jsx @@ -18,11 +18,11 @@ export const SignUp = ({ onComplete, onRequestSignIn }) => { const currentStep = steps[step] - const updateFields = (newFields) => { - setFields((prev) => ({ ...prev, ...newFields })) + const updateFields = newFields => { + setFields(prev => ({ ...prev, ...newFields })) } - const handleStepCompleted = (newFields) => { + const handleStepCompleted = newFields => { updateFields(newFields) if (currentStep === 'SIGNUP') { @@ -38,12 +38,12 @@ export const SignUp = ({ onComplete, onRequestSignIn }) => { const currentForm = { USERNAME: , - PROFILE: , + PROFILE: , SIGNUP: ( ), }[currentStep] @@ -52,13 +52,13 @@ export const SignUp = ({ onComplete, onRequestSignIn }) => {
{
Sumate a la comunidad de personas en tech que aprenden y comparten. @@ -147,11 +147,11 @@ const UsernameForm = ({ onSubmitComplete }) => {

Para comenzar elegí tu nombre de usuario.

{getErrorMessage(error)}

- @@ -185,20 +185,20 @@ const ProfileForm = ({ onSubmitComplete, onBack }) => { country && countriesWithRegions.find(({ countryName }) => countryName === country).regions const { errors } = formState - const onSubmit = (fields) => { + const onSubmit = fields => { onSubmitComplete(fields) } return ( -
+

Necesitamos algunos datos de tu identidad.

- - + +

{getErrorMessage(error)}

-
diff --git a/src/components/Auth/Welcome.jsx b/src/components/Auth/Welcome.jsx index 6e0f1a9..009f906 100644 --- a/src/components/Auth/Welcome.jsx +++ b/src/components/Auth/Welcome.jsx @@ -59,18 +59,18 @@ export const Welcome = ({ onComplete }) => {

{getErrorMessage(error)}

-
@@ -78,13 +78,13 @@ export const Welcome = ({ onComplete }) => {
{
Personaliza tu perfil, estos pasos son opcionales y lo podés hacer luego en tu perfil. diff --git a/src/components/Auth/index.jsx b/src/components/Auth/index.jsx index d18dcdb..805ae8b 100644 --- a/src/components/Auth/index.jsx +++ b/src/components/Auth/index.jsx @@ -11,7 +11,7 @@ const MotionOverlay = motion(Dialog.Overlay) export const AuthModal = ({ open, onClose, unauthorizedMessage }) => { const [selectedView, setSelectedView] = React.useState('SIGNIN') - const handleClose = (user) => { + const handleClose = user => { onClose(user) setSelectedView('SIGNIN') } @@ -19,9 +19,9 @@ export const AuthModal = ({ open, onClose, unauthorizedMessage }) => { const view = { SIGNIN: ( setSelectedView('SIGNUP')} - unauthorizedMessage={unauthorizedMessage} /> ), SIGNUP: ( @@ -41,33 +41,33 @@ export const AuthModal = ({ open, onClose, unauthorizedMessage }) => { {open && ( {/* Transition overlay */} {view} diff --git a/src/components/Author.tsx b/src/components/Author.tsx index 6fbdb4f..c694c5c 100644 --- a/src/components/Author.tsx +++ b/src/components/Author.tsx @@ -11,16 +11,17 @@ const team = { export const Author: React.FC<{ author: string }> = ({ author }) => { const src = team[author] || '/images/logos/logo.png' + return ( Bubble Image ) } diff --git a/src/components/Box.jsx b/src/components/Box.jsx index fc6f9e2..7db1642 100644 --- a/src/components/Box.jsx +++ b/src/components/Box.jsx @@ -4,10 +4,12 @@ import { useRef } from 'react' const BoxComponent = ({ route }) => { // This reference will give us direct access to the THREE.Mesh object const mesh = useRef() + // Subscribe this to the render-loop, rotate the mesh every frame useFrame((state, delta) => mesh.current ? (mesh.current.rotation.y = mesh.current.rotation.x += 0.002) : null ) + // Return the view, these are regular Threejs elements expressed in JSX return ( <> @@ -20,4 +22,5 @@ const BoxComponent = ({ route }) => { ) } + export default BoxComponent diff --git a/src/components/Bubble.jsx b/src/components/Bubble.jsx index 02b6ffe..3a056d7 100644 --- a/src/components/Bubble.jsx +++ b/src/components/Bubble.jsx @@ -102,6 +102,7 @@ export const Bubble = ({ status, img, animate, position }) => { }) } } + doWaveAnimations() }, [isTalking, waveControls]) @@ -109,9 +110,9 @@ export const Bubble = ({ status, img, animate, position }) => { {isVisible && ( { {isTalking && ( )} @@ -135,19 +136,19 @@ export const Bubble = ({ status, img, animate, position }) => { width: size, height: size, }} - initial={{ width: 0, height: 0 }} + className='overflow-hidden rounded-full' exit={{ width: 0, height: 0 }} + initial={{ width: 0, height: 0 }} transition={{ duration: 1 }} - className='overflow-hidden rounded-full' > Bubble Image
diff --git a/src/components/Bubbles.jsx b/src/components/Bubbles.jsx index 4838fc6..350004d 100644 --- a/src/components/Bubbles.jsx +++ b/src/components/Bubbles.jsx @@ -1,4 +1,5 @@ import { useState } from 'react' + import { Bubble } from '@/components/Bubble' import { useInterval } from '@/hooks/useInterval' @@ -24,7 +25,7 @@ export const Bubbles = ({ bubbles: initialState }) => { return (
- {bubbles.map((bubble) => ( + {bubbles.map(bubble => ( ))}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx index b25f4b8..bf9c471 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,6 +1,7 @@ export const Button = ({ children, className, loading, disabled, ...props }) => { const isDisabled = loading || disabled const background = isDisabled ? 'bg-gray-300' : 'bg-yellow-500 dark:bg-gray-900' + return (