Hip huu

.eslintrc.js → .eslintrc.cjs

@@ -5,14 +5,15 @@ module.exports = {
     node: true
   },
   extends: [
+    "next/core-web-vitals",
+    "next/typescript",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
-    "next/core-web-vitals",
     "plugin:storybook/recommended"
   ],
   plugins: ["@typescript-eslint", "jsx-a11y", "prettier"],

README.md

@@ -2,8 +2,7 @@
 
 ## Introduction
 
-Welcome to my two day React Workshop. It is very important
-that you read and follow these instructions **carefully** and **before** the actual two training days begin.
+Welcome to my two day React Workshop. It is very important that you read and follow these instructions **carefully** and **before** the actual two training days begin.
 
 ## Human Requirements
 
@@ -16,7 +15,7 @@ that you read and follow these instructions **carefully** and **before** the act
 - MacOS, Linux or Windows all work.
   - In Windows, this works in **WSL 2**. I often use that myself when hobby coding.
   - If it doesn't work, just boot it up in some Linux virtual machine or docker or whatnot.
-- Current stable version of Node.js (20.x, 18.x) and a "normal" default version of `npm` that comes bundled with the Node version. This might work on older or newer Node versions too, but who knows! Use `nvm` (for example) to manage multiple Node versions.
+- Current stable version of Node.js (22.x, 20.x) and a "normal" default version of `npm` that comes bundled with the Node version. This might work on older or newer Node versions too, but who knows! Use `nvm` (for example) to manage multiple Node versions.
 - An editor / IDE that supports all the good stuff. I use [VSCode](https://code.visualstudio.com/) myself, and because of the LiveShare code sharing environment, you really probably should use it too during this training.
 
 ## Installation
@@ -26,8 +25,7 @@ Start by forking / cloning this repository.
 `main` is the default branch that contains the starting point for our course.
 
 There are lots of other branches too. These contain the code I've done
-in basically all of the previous courses I've teached and while preparing the material. Interesting stuff, at least if you're
-hungry for nostalgia and see how the scene has changed!
+in basically all of the previous courses I've teached and while preparing the material. Interesting stuff, at least if you're hungry for nostalgia and see how the scene has changed!
 
 ### Browser extensions
 
@@ -42,16 +40,8 @@ You should install at least the following extensions.
 - ESLint (dbaeumer.vscode-eslint)
 - Prettier - Code formatter (esbenp.prettier-vscode)
 - EditorConfig for VS Code (editorconfig.editorconfig)
-- Live Share (ms-vsliveshare.vsliveshare)
-- vscode-styled-components (styled-components.vscode-styled-components)
 - stylelint (stylelint.vscode-stylelint)
-- PostCSS language support (csstools.postcss)
-
-I also seem to have these maybe relevant ones, so if you want feature
-parity with me2 you should install them too.
-
-- Visual Studio IntelliCode (visualstudioexptteam.vscodeintellicode)
-- GitLens — Git supercharged (eamodio.gitlens)
+- Live Share (ms-vsliveshare.vsliveshare) - if you want to join a liveshare session
 
 Some extensions you might already have could conflict with these, so please
 try to check that everything is a-ok. Also if you have good extensions that
@@ -61,7 +51,10 @@ I should use in addition / replacing one of these, please holler!
 
 ### Develop
 
-- `npm i -g pnpm` (just once to install pnpm if you don't still have it)
+- `corepack enable` (just once, if you haven't run it before or it doesn't work)
+
+  - if this doesn't work for some reason, use the following:
+  - `npm i -g pnpm` (just once to install pnpm if you don't still have it)
 
 - `pnpm i`
 - `cp .env.example .env.local`
@@ -78,7 +71,7 @@ There should be more instructions / assertions on the screen. Please read them c
 
 - `pnpm run build`
 
-Goes to `.next/` folder.
+Builds to `.next/` folder.
 
 ## Licensing
 

next.config.js

@@ -1,11 +1,11 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 const withVanillaExtract = createVanillaExtractPlugin();
 
-const { compose } = require("ramda");
+import { piped } from "remeda";
+
+import bundleAnalyzer from "@next/bundle-analyzer";
 
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
+const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
   openAnalyzer: true
 });
@@ -21,4 +21,4 @@ const nextConfig = {
   }
 };
 
-module.exports = compose(withBundleAnalyzer, withVanillaExtract)(nextConfig);
+export default piped(withBundleAnalyzer, withVanillaExtract)(nextConfig);

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@dr-kobros/hardcore-react-training",
-  "version": "2023.1.0",
+  "type": "module",
+  "version": "2024.10.0",
   "description": "A two day hardcore React workshop for professionals",
   "main": "src",
   "scripts": {
-    "test": "jest",
+    "test": "vitest run",
     "test:e2e": "playwright test",
     "dev": "next dev",
     "build": "next build",
@@ -49,6 +50,7 @@
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
+    "remeda": "^2.14.0",
     "sharp": "^0.33.5",
     "three": "^0.169.0",
     "zod": "^3.23.8",
@@ -70,7 +72,6 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.7.4",
     "@types/ramda": "^0.30.2",
@@ -81,6 +82,7 @@
     "@typescript-eslint/parser": "^8.7.0",
     "@vanilla-extract/next-plugin": "^2.4.5",
     "@vanilla-extract/webpack-plugin": "^2.3.13",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
@@ -93,8 +95,6 @@
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-storybook": "^0.9.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^25.0.1",
     "mini-css-extract-plugin": "^2.9.1",
     "msw": "^2.4.9",
@@ -104,7 +104,8 @@
     "stylelint": "^16.9.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-prettier": "^5.0.2",
-    "typescript": "~5.6.2"
+    "typescript": "~5.6.2",
+    "vitest": "^2.1.1"
   },
-  "packageManager": "pnpm@9.1.3+sha256.7f63001edc077f1cff96cacba901f350796287a2800dfa83fe898f94183e4f5f"
+  "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }

playwright.config.ts

@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
   // Timeout per test
   timeout: 30 * 1000,
   // Test directory
-  testDir: path.join(__dirname, "e2e"),
+  testDir: path.join(".", "e2e"),
   // If a test fails, retry it additional 2 times
   retries: 2,
   // Artifacts folder where screenshots, videos, and traces are stored.