Modernization

.devcontainer/README.md

@@ -0,0 +1,118 @@
+# Home Assistant Custom Card - Dev Container Setup
+
+This directory contains the development container configuration for building and testing the restriction-card custom card for Home Assistant.
+
+## Setup Instructions
+
+1. **Install VS Code Remote Containers**
+   - [VS Code Extension: Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+
+2. **Open in Dev Container**
+   - Open the project folder in VS Code
+   - Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac)
+   - Type "Remote-Containers: Reopen in Container"
+   - Wait for the container to build (first time takes ~2-3 minutes)
+
+3. **Build the Card**
+   ```bash
+   yarn build      # Lint and build
+   yarn start      # Start dev server with hot reload (port 5000)
+   yarn lint       # Check code quality
+   yarn rollup     # Production build
+   ```
+
+4. **Access Services**
+   - **Dev Container**: Terminal in VS Code (automatic)
+   - **Home Assistant**: http://localhost:8123 (user: dev/pass: dev)
+   - **Rollup Dev Server**: http://localhost:5000
+
+5. **Configure Home Assistant to Use Your Card**
+   - In Home Assistant, go to Settings > Dashboards
+   - Create a new Dashboard
+   - Add the card from the GUI
+
+## File Structure
+
+```
+.devcontainer/
+├── devcontainer.json    # VS Code dev container config
+├── .gitignore          # Ignore HA data
+└── README.md           # This file
+```
+
+## Base Image
+
+This project uses the published image:
+
+- `ghcr.io/custom-cards/custom-card-devcontainer:latest`
+
+The image includes the `container` helper used by the devcontainer lifecycle commands.
+
+## Development Workflow
+
+### Building the Card
+
+```bash
+# One-time setup (automatic on container creation)
+yarn install
+
+# Development with hot reload
+yarn start              # Runs Rollup in watch mode on port 5000
+
+# Quality checks
+yarn lint             # ESLint check
+yarn build            # Full build pipeline (lint + rollup)
+
+# Production build
+yarn rollup           # Create optimized dist files
+```
+
+### File Locations
+
+- **Source Code**: `src/`
+- **Built Output**: `dist/` (inside container)
+- **Configuration**: Root directory (`tsconfig.json`, `rollup.config.js`, etc.)
+
+## Troubleshooting
+
+### Container Won't Start
+```bash
+# Rebuild the container
+ctrl+shift+p → "Remote: Rebuild Container"
+```
+
+### Port Already in Use
+```bash
+# Find what's using port 5000 or 8123
+lsof -i :5000
+lsof -i :8123
+```
+
+### Node Modules Issues
+```bash
+# Clear and reinstall dependencies
+rm -rf node_modules
+yarn install
+```
+
+## Additional Resources
+
+- [Home Assistant Custom Card Development](https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/)
+- [VS Code Dev Containers Docs](https://code.visualstudio.com/docs/remote/containers)
+- [Lit Documentation](https://lit.dev/)
+- [Material Design Web Components](https://github.com/material-components/material-web)
+
+## Environment Details
+
+- **Node.js**: 24
+- **TypeScript**: 5.9.3
+- **Build Tool**: Rollup 4.20
+- **Linter**: ESLint 9 + TypeScript Support
+- **Code Formatter**: Prettier 3.8
+- **Web Framework**: Lit 3.3
+- **Home Assistant Image**: Latest (optional)
+
+## Notes
+
+- All Yarn commands run inside the container automatically
+- VS Code extensions are configured for TypeScript and YAML development

.devcontainer/configuration.yaml → .devcontainer/config/configuration.yaml

@@ -1,6 +1,6 @@
 default_config:
-lovelace:
-  mode: yaml
+homeassistant_alerts:
+  enabled: false
 demo:
 frontend:
   themes:

.devcontainer/devcontainer.json

@@ -1,32 +1,70 @@
-// See https://aka.ms/vscode-remote/devcontainer.json for format details.
+// For format details, see https://aka.ms/devcontainer.json
+// Uses custom-cards/custom-card-devcontainer image for Home Assistant + Dev environment
 {
-  "name": "Restriction Card Development",
-  "image": "ludeeus/container:monster",
-  "context": "..",
-  "appPort": ["5000:5000", "9123:8123"],
-  "postCreateCommand": "npm install",
-  "runArgs": [
-    "-v",
-    "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+  "name": "Home Assistant Custom Card Dev",
+
+  // Use published devcontainer image
+  "image": "ghcr.io/custom-cards/custom-card-devcontainer:latest",
+  "remoteUser": "vscode",
+
+  // Set working directory
+  "workspaceFolder": "/workspaces/test",
+
+  // Mount project to workspace, dist to Lovelace plugins, and config directory for Home Assistant
+  "mounts": [
+    "source=${localWorkspaceFolder},target=/workspaces/test,type=bind",
+    "source=${localWorkspaceFolder}/dist,target=/config/www/workspace,type=bind",
+    "source=${localWorkspaceFolder}/.devcontainer/config,target=/config,type=bind"
   ],
-  "extensions": [
-    "github.vscode-pull-request-github",
-    "eamodio.gitlens",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bierner.lit-html",
-    "runem.lit-plugin",
-    "auchenberg.vscode-browser-preview",
-    "davidanson.vscode-markdownlint",
-    "redhat.vscode-yaml"
-  ],
-  "settings": {
-    "files.eol": "\n",
-    "editor.tabSize": 4,
-    "terminal.integrated.shell.linux": "/bin/bash",
-    "editor.formatOnPaste": false,
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "files.trimTrailingWhitespace": true
+
+  // Forward Home Assistant port
+  "forwardPorts": [8123],
+  "portsAttributes": {
+    "8123": {
+      "label": "Home Assistant",
+      "onAutoForward": "notify"
+    }
+  },
+
+  // Container environment variables for Home Assistant setup
+  "containerEnv": {
+    "COREPACK_ENABLE_DOWNLOAD_PROMPT": "0",
+    "DEVCONTAINER": "1",
+    "HASS_USERNAME": "dev",
+    "HASS_PASSWORD": "dev",
+    "LOVELACE_REMOTE_FILES": "http://localhost:5000/restriction-card.js"
+  },
+
+  // Setup Home Assistant and install dependencies
+  "postCreateCommand": "container setup && corepack enable && yarn install",
+  "postStartCommand": "container launch & yarn start & wait",
+
+  // VS Code extensions for development
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "github.vscode-github-actions",
+        "github.vscode-pull-request-github",
+        "bierner.lit-html",
+        "redhat.vscode-yaml", 
+        "esbenp.prettier-vscode"
+      ],
+      "settings": {
+        "typescript.enablePromptUseWorkspaceTsdk": true,
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.formatOnSave": true,
+          "editor.codeActionsOnSave": {
+            "source.fixAll.eslint": "explicit"
+          }
+        },
+        "typescript.tsdk": "node_modules/typescript/lib",
+        "typescript.tsserver.pluginPaths": [
+          "node_modules/typescript/lib"
+        ],
+        "files.eol": "\n",
+        "task.allowAutomaticTasks": "on"
+      }
+    }
   }
 }