feat: add devcontainer

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=20-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+RUN su node -c "npm install -g pnpm ts-node"

.devcontainer/devcontainer.json

@@ -0,0 +1,42 @@
+{
+  "name": "TypeScript Next.js",
+  "build": {
+    "dockerfile": "Dockerfile",
+    // Update 'VARIANT' to pick a Node version: 18, 16, 14.
+    // Append -bullseye or -buster to pin to an OS version.
+    // Use -bullseye variants on local on arm64/Apple Silicon.
+    "args": {
+      "VARIANT": "20-bullseye"
+    }
+  },
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "eamodio.gitlens",
+        "ms-vsliveshare.vsliveshare"
+      ]
+    }
+  },
+  // Use 'features' to configure features.
+  "features": {
+    // add desktop-lite to allow Cypress GUI over VNC web & desktop
+    // https://github.com/devcontainers/features/tree/main/src/desktop-lite
+    "ghcr.io/devcontainers/features/desktop-lite:1": {}
+  },
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [6080, 5901],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "./.devcontainer/postCreateCommand.sh",
+  // Use 'postStartCommand' to run commands after the container starts.
+  "postStartCommand": {
+    "safeDir": "git config --global --add safe.directory ${containerWorkspaceFolder}",
+    "updateIndex": "git update-index --assume-unchanged .npmrc"
+  },
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
+}

.devcontainer/postCreateCommand.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# remove node_modules and .pnpm-store if it exists from the host platform
+rm -rf node_modules .pnpm-store
+
+# hard link workaround for docker containers instantiated on darwin
+# https://github.com/pnpm/pnpm/issues/7024
+if [ $(sysctl -n kern.osversion | cut -d '.' -f 1) -ge 20 ]; then
+  echo "Hard links are supported."
+else
+  echo "Hard links are not supported."
+
+  # edit a fresh .npmrc with package-import-method set to clone-or-copy and ignore git changes on it
+  echo "package-import-method=clone-or-copy" >> .npmrc
+fi
+
+# install all modules with pnpm
+pnpm install

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.pnpm-store/
 
 # IDE
 .vscode
@@ -33,4 +34,4 @@ yarn-error.log*
 /src/components/icons/index.ts
 
 #storybook
-storybook-static
+storybook-static