Use biome on project level. (#1384)

biome.jsonc

@@ -0,0 +1,42 @@
+{
+  // https://biomejs.dev/guides/configure-biome/
+
+  // Reference local dependency version.
+  "$schema": "frontend/node_modules/@biomejs/biome/configuration_schema.json",
+
+  "files": {
+    // For now, only include frontend files.
+    "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+    // Match files, not folders.
+    "ignore": [
+      "**/*.json",
+      "**/*.jsonc",
+      "**/*.config.ts",
+      "**/src/routes/backend.ts", // Autogenerated file.
+      "**/build/static/**/*", // Build files from frontend.
+      "**/dist/assets/**/*", // Build files from frontend.
+      "**/.history/**/*", // VSCode extension.
+      "**/staticroot/**/*", // Django static files.
+      "**/static/**/*", // Django static files.
+      "**/.venv/**/*"
+    ]
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "lineWidth": 120
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  }
+}

docker-compose.yml

@@ -24,7 +24,13 @@ services:
       context: ./frontend
     image: samfundet-frontend
     volumes:
-      - ./frontend/src:/app/src # Share project code between host machine and container to enable reload on changes.
+      # Share project code between host machine and container to enable reload on changes.
+      # Excellent solution when component needs files/folders from outside context.
+      - ./biome.jsonc:/biome.jsonc
+      - ./frontend/src:/app/src 
+      - ./frontend/biome.jsonc:/app/biome.jsonc
+      - ./frontend/package.json:/app/package.json
+      - ./frontend/index.html:/app/index.html
     env_file:
       - ./frontend/.env.docker # Environment for frontend docker
     environment:

frontend/.dockerignore

@@ -6,3 +6,4 @@ node_modules
 .git
 Dockerfile
 .dockerignore
+.history

frontend/.yarnrc.yml

@@ -1,7 +1,3 @@
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
 yarnPath: .yarn/releases/yarn-4.5.0.cjs

frontend/Dockerfile

@@ -1,4 +1,5 @@
 # For cypress dependencies use cypress image, eg. cypress/base:19
+
 FROM node:21-slim
 EXPOSE 3000
 WORKDIR /app
@@ -10,8 +11,10 @@ COPY .yarn/ /app/.yarn/
 # Require up to date package.json and yarn.lock, fail otherwise.
 RUN yarn install --immutable
 
-# Copy remaining files
-COPY . /app
+# Copy remaining files.
+COPY . /app/
+
+# Aliases:
+RUN echo 'alias la="ls -la"' >> ~/.bashrc
 
-# Commands are run from docker-compose
-# to use same image for storybook and vite
+# Commands are run from docker-compose to use the same image for storybook and vite.

frontend/biome.jsonc

@@ -0,0 +1,10 @@
+{
+  /*
+    Biome currently doesn't have a 'configPath' setting in VSCode.
+    It only recognises config located in workspace root.
+    Our config is therefore located at root of repo,
+    and extended here to support both directories (including docker container).
+  */
+  "extends": ["../biome.jsonc"], // Available in container through docker-compose volume.
+  "$schema": "node_modules/@biomejs/biome/configuration_schema.json"
+}

frontend/package.json

@@ -24,14 +24,17 @@
     "build-storybook-dev": "storybook build",
     "cypress:open": "cypress open",
     "cypress:run": "yarn run cypress run",
-    "biome:check": "biome check .",
-    "biome:ci": "biome ci .",
-    "biome:fix": "biome check --write .",
-    "lint:check": "biome lint .",
-    "lint:fix": "biome lint --write .",
-    "lint:fix-unsafe": "biome lint --write --unsafe .",
-    "format:check": "biome format .",
-    "format:fix": "biome format --write .",
+
+    "biome//": "echo Biome is configured for entire repo.",
+    "biome:check": "biome check",
+    "biome:ci": "biome ci",
+    "biome:fix": "biome check --write",
+    "lint:check": "biome lint",
+    "lint:fix": "biome lint --write",
+    "lint:fix-unsafe": "biome lint --write --unsafe",
+    "format:check": "biome format",
+    "format:fix": "biome format --write",
+
     "stylelint:check": "stylelint --config .stylelintrc src/**/*.{css,scss}",
     "tsc:check": "tsc",
     "tsc:watch": "tsc --watch",