Merge pull request #94 from thibaudbrault/dev

Transition to Sass + usage of Radix UI

.env.sample

@@ -1,3 +1 @@
-NEXT_PUBLIC_FIREBASE_API=
-NEXT_PUBLIC_FIREBASE_APP=
 NEXT_POKEMONTCG_API_KEY=

.eslintrc

@@ -1,12 +1,23 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["prettier", "@typescript-eslint/eslint-plugin"],
+  "plugins": ["prettier", "@typescript-eslint/eslint-plugin", "import"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:jsx-a11y/strict",
     "prettier"
   ],
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint-parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  },
   "rules": {
     "prettier/prettier": "error",
     "camelcase": "off",
@@ -35,6 +46,34 @@
         "specialLink": ["hrefLeft", "hrefRight"],
         "aspects": ["invalidHref", "preferButton"]
       }
+    ],
+    "jsx-a11y/media-has-caption": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          ["parent", "sibling"],
+          "object",
+          "type",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "{react,react-dom/**}",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
     ]
   },
   "overrides": [

.github/workflows/ci.yml

@@ -26,7 +26,10 @@ jobs:
         run: pnpm install
 
       - name: Check types
-        run: pnpm type-check
+        run: pnpm type
 
       - name: Check linting
         run: pnpm lint
+
+      - name: Check style
+        run: pnpm style

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "no-descending-specificity": null,
+    "scss/percent-placeholder-pattern": null
+  }
+}

README.md

@@ -11,7 +11,7 @@
 
 </div>
 
-<h3 align="center">PokéRef is a Pokémon encyclopedia built with Next JS, Typescript and Styled-Components and uses data from PokéAPI and Smogon</h3>  
+<h3 align="center">PokéRef is a Pokémon encyclopedia built with Next JS, Typescript and Scss modules and uses data from PokéAPI, Smogon and PokémonTCG</h3>  
 <p align="center">You'll find a ton of information on every pokémon, moves, abilities, items and a lot more</p>  
 <div align="center">
   <a href="https://pokeref.app/">Live version</a>  
@@ -57,8 +57,9 @@
 ✅404 page  
 ✅Responsive
 
-🛠Check how the login with a provider works  
-🛠Second type select in the list of pokémon in a type page
+🛠Implement Radix UI to create reusable components  
+🛠Second type select in the list of pokémon in a type page  
+🛠Change login provider
 
 🔜Contest section in a move's page
 
@@ -82,13 +83,13 @@ git clone https://github.com/thibaudbrault/PokeRef.git
 <h4>Install the dependencies</h4>
 
 ```bash
-npm install
+pnpm install
 ```
 
 <h4>Start the server</h4>
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 <h4>Enjoy 😃</h4>
@@ -102,14 +103,15 @@ I chose to use PokéAPI because there are a lot of tutorials to start from, the
 
 <h4>Story of this project</h4>
 
-- Started by using vanilla JS + Sass to learn how to fetch data from an API in vanilla JS
-- Quickly moved to React JS + Sass to learn React by working on a big project
-- Moved to React JS + Styled-Components to learn a new way to write CSS. It was a good move for me because I really like Styled-Components because it has the advantages of Sass, is easily importable / exportable between files and supports theming.
+- Started by using vanilla JS + Scss to learn how to fetch data from an API in vanilla JS
+- Quickly moved to React JS + Scss to learn React by working on a big project
+- Moved to React JS + Styled-Components to learn a new way to write CSS. It was a good move for me because I really like Styled-Components because it has the advantages of Scss, is easily importable / exportable between files and supports theming.
 - Added React-Query to fetch data. It's a great library that makes it easy to manage caching, fetching, loading and error handling for every data fetch.
 - Finally moved to Next JS (instead of CRA) + Styled-Components to learn to use Next JS. I chose to use Next JS to benefit from the image optimization given by the <Image /> component because the app has a lot of images to render and every optimization is welcome. I also chose it to benefit from the Static-Site generation.
 - Upgraded to Next 13. There were some problems that made the transition to using the app folder instead of the pages one not possible, but I benefited from the changes to the <Image /> component (it no longer creates spans) and the <Link /> component (it no longer need to have an anchor tag inside).
 - Added React-Table and converted all my tables to benefit from virtualization, sorting and filtering for every column making it easier to find the desired information.
 - Added Firebase for authentication and saving a user's caught pokémon with data stored in Firestore.
+- Changed all the structure folder and moved from Styled-Components to Scss modules.
 
 <h4>Problems encountered (ordered from the oldest to the most recent)</h4>
 
@@ -120,6 +122,7 @@ I chose to use PokéAPI because there are a lot of tutorials to start from, the
 - Implementing React-Query. I had to learn how to modify my custom hooks to make it work with React-Query and how to import the data from the hooks. It took me some time to make the transition works, but I don't regret it because my code is more readable (mainly the part where I import my hooks, but also the way I handle the loading state to return an animation while the data is being fetched) and it's an easy way to cache data.
 - Moving from CRA to Next. The main problem I had was learning to use dynamic routing and when I understood it the migration became easier. It still took me some time because I had to move all my files in other folders, change the paths in imports, implement the <Image /> component along with a width and height, correct some problems with the images (the creation of multiple spans wrapping the image that was solved by using next/future/image before moving to Next 13) and a few other problems with the <Link /> component (the fact that it can't have multiple children, that it needs to have a 'href' instead of the 'to' used in react-router to give the path and that you need to put an anchor tag inside the Link and use passHref).
 - Converting all the files to Typescript and declare all the types.
+- Make my components fully reusable.
 
 <h4>Contents</h4>
 
@@ -137,8 +140,10 @@ I chose to use PokéAPI because there are a lot of tutorials to start from, the
 - <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" />
 - <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" />
 - <img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" />
-- <img src="https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white" />
+- <img src="https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white" />
 - <img src="https://img.shields.io/badge/Firebase-F5830C?style=for-the-badge&logo=Firebase&logoColor=white" />
+- <img src="https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white" />
+- <img src="https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220" />
 
 <h2 id="acknowledgements">Acknowledgements</h2>
 
@@ -170,4 +175,5 @@ A big thanks also to the PokeAPI team for creating such a huge, detailed and ver
 
 <h2 id="license">License</h2>
 
-MIT
+<img src="https://img.shields.io/github/license/thibaudbrault/pokeref
+" />

next.config.js

@@ -9,9 +9,6 @@ const withPWA = require("next-pwa")({
 })
 
 const nextConfig = withPWA({
-  compiler: {
-    styledComponents: true
-  },
   eslint: {
     ignoreDuringBuilds: true
   },

package.json

@@ -13,24 +13,33 @@
   "scripts": {
     "dev": "next dev -p 3005",
     "build": "next build",
+    "start": "next start",
     "test": "playwright test",
     "test:headed": "playwright test --headed",
     "postbuild": "next-sitemap",
-    "start": "next start",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --fix",
-    "format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
+    "type": "tsc --noEmit",
+    "lint": "eslint --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\"",
+    "lint:fix": "eslint --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --fix",
+    "format": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\"",
+    "format:fix": "prettier --ignore-path .gitignore \"src/**/*.+(ts|js|tsx)\" --write",
+    "style": "stylelint \"src/**/*.scss\"",
+    "style:fix": "stylelint \"src/**/*.scss\" --fix",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@hookform/resolvers": "2.9.10",
+    "@hookform/resolvers": "3.1.1",
     "@meronex/icons": "4.0.0",
+    "@radix-ui/react-label": "2.0.2",
+    "@radix-ui/react-navigation-menu": "1.1.3",
+    "@radix-ui/react-separator": "1.0.3",
+    "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-tabs": "1.0.4",
     "@tanstack/match-sorter-utils": "8.7.6",
     "@tanstack/react-query": "4.29.7",
     "@tanstack/react-query-devtools": "4.29.7",
     "@tanstack/react-table": "8.7.9",
     "axios": "^1.4.0",
-    "firebase": "9.22.0",
+    "class-variance-authority": "0.6.1",
     "fuse.js": "6.6.2",
     "hamburger-react": "2.5.0",
     "next": "13.4.3",
@@ -49,7 +58,7 @@
     "react-select": "5.7.0",
     "react-tooltip": "5.13.1",
     "react-virtual": "2.10.4",
-    "styled-components": "6.0.0-rc.3",
+    "sass": "1.63.4",
     "yup": "1.2.0"
   },
   "devDependencies": {
@@ -59,24 +68,30 @@
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
     "@types/react-modal": "3.13.1",
-    "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
-    "@typescript-eslint/parser": "5.43.0",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-typescript": "3.5.2",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "5.0.0",
     "husky": "8.0.2",
     "lint-staged": "13.2.2",
-    "prettier": "2.7.1",
-    "typescript": "4.8.4"
+    "prettier": "3.0.0",
+    "stylelint": "15.9.0",
+    "stylelint-config-prettier-scss": "1.0.0",
+    "stylelint-config-standard-scss": "10.0.0",
+    "typescript": "5.1.3"
   },
   "lint-staged": {
     "./src/**/*.{ts,js,jsx,tsx}": [
-      "pnpm lint",
-      "pnpm format"
+      "pnpm lint:fix",
+      "pnpm format:fix"
+    ],
+    "./src/**/*.scss": [
+      "pnpm style:fix"
     ]
   }
 }