Merge pull request #163 from Prodeko/main

Make some changes

.devcontainer/devcontainer.json

@@ -6,15 +6,18 @@
 	"service": "next",
 	"workspaceFolder": "/usr/src/app",
 	// Configure tool-specific properties.
-	"extensions": [
-		"mrmlnc.vscode-scss",
-		"stylelint.vscode-stylelint",
-		"humao.rest-client",
-		"eamodio.gitlens",
-		"esbenp.prettier-vscode",
-		"dbaeumer.vscode-eslint",
-		"qufiwefefwoyn.inline-sql-syntax"
-	],
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"humao.rest-client",
+				"eamodio.gitlens",
+				"esbenp.prettier-vscode",
+				"biomejs.biome",
+        "bradlc.vscode-tailwindcss",
+				"qufiwefefwoyn.inline-sql-syntax"
+			]
+		}
+	},
 	"hostRequirements": {
 		"memory": "3gb"
 	},

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '19.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn --frozen-lockfile
       - name: Run tests

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["esbenp.prettier-vscode", "mrmlnc.vscode-scss"]
+    "recommendations": ["esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -1,29 +1,32 @@
 {
-  "[javascript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "never"
   },
+  "css.validate": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
   },
   "[typescriptreact]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
   },
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
   },
-  "css.validate": false,
-  "scss.validate": false,
-  "stylelint.validate": [
-    "css",
-    "scss"
-  ],
-  "prettier.prettierPath": "./node_modules/prettier",
-  "stylelint.configBasedir": "./",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
-}
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  }
+}

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:16
+FROM node:20
 WORKDIR /usr/src/app
 
 # We can add software here that should be available in the container

Dockerfile.prod

@@ -1,10 +1,10 @@
-FROM node:16-alpine as build-stage
+FROM node:20-alpine as build-stage
 WORKDIR /usr/src/app
 COPY . .
 RUN apk update && apk add git openssh
 RUN yarn && yarn build
 
-FROM node:16-alpine as production-stage
+FROM node:20-alpine as production-stage
 WORKDIR /usr/src/app
 COPY --from=build-stage /usr/src/app/package.json .
 COPY --from=build-stage /usr/src/app/next.config.js ./

README.md

@@ -68,11 +68,6 @@ Lisää breakpointeja ja tarkastele senhetkistä muuttujakontekstia sivuja ladat
 - Sivukohtainen peruslayout --> **Layouts** (tämä siksi että haluamme pitää CSS:n pois pages-kansiosta). 
 - Muut komponentit sivukohtaisesti ja käyttökohtaisesti: esim etusivun Leaderboard-komponentti menee **Homepage/Leaderboard**-kansion alle.
 
-##### Uuden komponentin luominen
-Uutta komponenttia tehdessä luodaan pääluokan alle uusi kansio, jonka nimeksi tulee komponentin nimi, esimerkiksi Button. Tämän kansion sisälle tulee kaksi tiedostoa: `index.tsx`, joka on perinteinen React-komponentti ja `ComponentName".module.scss`, johon tulee komponenttikohtainen SCSS-koodi.
-
-Scss-moduuliin importataan aina `@use 'styles' as *;`. Tällä saadaan scss-moduulin sisäiseen käyttöön koko meidän **styles**-kansion sisäinen design-systeemi. Sieltä voi sitten käyttää suoraan muuttujia ($-merkki), mixinejä (@-merkki) ja placeholdereita (%-merkki).
-
 #### Hooks
 **hooks**-kansion alle on määritetty kaikki yleisesti projektissa käytettävät custom React-hookit.
 
@@ -87,9 +82,8 @@ Meillä on tehty designia varten Figma. Oikeuksia Figmaan voit kysyä esimerkiks
 
 Tätä Figmaa vastaa melko yksi-yhteen meidän **styles**-kansion alla oleva tyylisysteemi. Tähän on ajan myötä tullut muutamia lisäyksiä mutta näitä muuttujia/mixinejä/placeholdereita tulisi hyödyntää, kun tyylittelee CSS:ää.
 
-CSS-framworkkina käytämme SASSia, josta voi lukea lisää...
-- virallisesta dokumentaatiosta (https://sass-lang.com/guide)
-- SASS vs CSS (https://www.youtube.com/watch?v=g1kF45K-q7o&list=PL4-IK0AVhVjMYRhK9vRPatSlb-9r0aKgh&index=4
+CSS-framworkkina käytämme Tailwindia, josta voi lukea lisää...
+- virallisesta dokumentaatiosta (https://tailwindcss.com/docs/utility-first)
 
 ### Dokumentaatio