@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/templates/angular/CLAUDE.md

@@ -0,0 +1,148 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Angular 20 showcase application demonstrating Modus Web Components integration. Uses Tailwind CSS v4, strict TypeScript, and comprehensive design system enforcement through custom linting scripts.
+
+## Commands
+
+```bash
+# Development
+npm start                  # Dev server on localhost:4200
+npm run build              # Production build
+npm test                   # Run unit tests with Karma
+
+# Linting (all run automatically on pre-commit)
+npm run lint:all           # Run all design system compliance checks
+npm run type-check         # TypeScript type validation
+npm run lint:colors        # Modus color compliance
+npm run lint:styles        # Inline styles validation
+npm run lint:borders       # Border pattern violations
+npm run lint:opacity       # Opacity utilities validation
+npm run lint:icons         # Modus Icons library validation
+npm run lint:icon-names    # Icon name validation (700+ icons)
+```
+
+## Architecture
+
+### Core Technologies
+- **Angular 20** with standalone components (no NgModules)
+- **Modus Web Components** (`@trimble-oss/moduswebcomponents` + `@trimble-oss/moduswebcomponents-angular`)
+- **Tailwind CSS v4** with design system colors only
+- **Modus Icons** (`@trimble-oss/modus-icons`)
+
+### Dev Panel Architecture
+
+The boilerplate uses a **Dev Panel** architecture that separates demo/reference content from user application code:
+
+- **Pages** (`src/app/pages/`): Your application pages - start with `home/home.component.ts`
+- **Components** (`src/app/components/`): Reusable Modus wrapper components
+- **Dev Panel** (`src/app/dev/`): Floating panel with demos, colors, icons, theme switcher
+- **Demos** (`src/app/demos/`): 44 component demo pages (dev only)
+- **Dev Pages** (`src/app/dev-pages/`): Reference pages (colors, icons, components gallery)
+
+**Key Features:**
+- Toggle Dev Panel with `Ctrl+Shift+D` or floating button
+- Dev Panel only renders when `devPanel: true` in environment (development mode)
+- In production, Dev Panel and dev routes are automatically excluded
+- User's app and demos don't conflict - build your app without interference
+
+**Routes:**
+- `/` - Your home page (edit `src/app/pages/home/home.component.ts`)
+- `/dev` - Redirects to `/dev/components`
+- `/dev/colors` - Color palette reference
+- `/dev/icons` - Icon library browser (click-to-copy functionality)
+- `/dev/components` - Component gallery
+- `/dev/demos/*` - Individual component demos
+
+Add your routes directly in `src/app/app.routes.ts`.
+
+### Component Pattern
+All Modus Web Components are wrapped in Angular components at `src/app/components/modus-*.component.ts`. Never use Modus Web Components directly in templates - always use the wrapper components.
+
+### File Structure
+```
+src/app/
+├── pages/                    # User application pages
+│   └── home/                 # Start here for your app
+├── components/               # Modus wrapper components
+│   └── modus-*.component.ts  # No changes needed
+├── dev/                      # Dev Panel infrastructure
+│   ├── dev-panel.service.ts  # State management
+│   ├── dev-panel/            # Floating panel UI
+│   ├── dev-config.ts         # Navigation config
+│   └── theme-switcher-dropdown/
+├── dev-pages/                # Reference pages (dev only)
+│   ├── color-palette/
+│   ├── icons/
+│   └── components-gallery/
+├── demos/                    # Component demos (dev only)
+│   ├── shared/               # Demo utilities
+│   └── [component-name]/     # Individual demos
+├── data/                     # Shared data
+└── services/                 # Application services
+```
+
+## Angular 20 Patterns (Required)
+
+```typescript
+// Use input()/output() functions, not decorators
+color = input<ButtonColor>('primary');
+buttonClick = output<void>();
+
+// Use inject() for DI, not constructor
+private myService = inject(MyService);
+
+// Always use OnPush change detection
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // ...
+})
+
+// Don't set standalone: true (implicit in Angular 20)
+```
+
+### Template Control Flow
+Use built-in control flow, not structural directives:
+```html
+@if (condition) { ... }
+@for (item of items; track item.id) { ... }
+```
+
+## Design System Rules
+
+### Color System (9 Colors Only)
+**Base colors**: `bg-background`, `bg-card`, `bg-muted`, `bg-secondary`, `text-foreground`
+**Status colors**: `bg-primary`, `bg-success`, `bg-warning`, `bg-error`
+
+Never use generic Tailwind colors (e.g., `blue-500`, `gray-300`) or hardcoded hex values.
+
+### Icons
+Use Modus Icons only:
+```html
+<i class="modus-icons">icon-name</i>
+<modus-icon name="icon-name" />
+```
+Never use Font Awesome, Material Icons, or other icon libraries.
+
+### Opacity with Design System Colors
+Use custom utilities, not Tailwind `/` syntax:
+```html
+<!-- Correct -->
+<div class="text-foreground-80">
+
+<!-- Wrong - doesn't work with CSS variables -->
+<div class="text-foreground/80">
+```
+
+## Key Files
+
+- `src/main.ts` - Modus Web Components initialization via `defineCustomElements()`
+- `src/styles.css` - Design system color definitions and Dev Panel animations
+- `src/app/app.routes.ts` - Route definitions with conditional dev routes
+- `src/app/app.ts` - Main component with DevPanel integration
+- `src/environments/` - Environment configs with `devPanel` flag
+- `.cursor/rules/` - Detailed development guidelines (12 rule files)
+- `AGENTS.MD` - Comprehensive AI agent guide with patterns and examples

package/templates/angular/README.md

@@ -0,0 +1,92 @@
+# AngularVite
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.8.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Deployment to AWS Amplify
+
+This project includes an `amplify.yml` configuration file for AWS Amplify deployment.
+
+### Setup Steps
+
+1. **Build Configuration**: The `amplify.yml` file is already configured with:
+
+   - Build commands: `npm ci` → `npm run build`
+   - Output directory: `dist/angular-vite/browser`
+   - Caching for `node_modules`
+
+2. **Redirect Rules** (Important for Angular Routing):
+
+   After deploying to AWS Amplify, you **must** configure redirect rules in the Amplify Console for client-side routing to work:
+
+   - Go to your Amplify app in the AWS Console
+   - Navigate to **App settings** → **Rewrites and redirects**
+   - Add a redirect rule:
+     - **Source**: `/<*>`
+     - **Target**: `/index.html`
+     - **Type**: `200 (Rewrite)`
+
+   This ensures all routes (like `/theme-demo`, `/button-demo`) are handled by Angular's client-side router.
+
+### Build Output
+
+The build outputs to `dist/angular-vite/browser/` with:
+
+- Production-optimized bundles
+- Hashed filenames for caching
+- Static assets from `public/` directory
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/templates/angular/amplify.yml

@@ -0,0 +1,25 @@
+version: 1
+frontend:
+  phases:
+    preBuild:
+      commands:
+        - npm ci
+    build:
+      commands:
+        - npm run build
+  artifacts:
+    baseDirectory: dist/angular-vite/browser
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - node_modules/**/*
+customHeaders:
+  - pattern: '**/*'
+    headers:
+      - key: 'Cache-Control'
+        value: 'public, max-age=31536000, immutable'
+  - pattern: '*.html'
+    headers:
+      - key: 'Cache-Control'
+        value: 'public, max-age=0, must-revalidate'

package/templates/angular/angular.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-vite": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@trimble-oss/moduswebcomponents/modus-wc/assets",
+                "output": "modus-wc/assets"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "800kB",
+                  "maximumError": "1.5MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.development.ts",
+                  "with": "src/environments/environment.ts"
+                }
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-vite:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-vite:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}