@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "angular-vite",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "type-check": "node scripts/check-typescript.js",
+    "lint:colors": "node scripts/check-modus-colors.js",
+    "lint:styles": "node scripts/check-inline-styles.js",
+    "lint:borders": "node scripts/check-border-violations.js",
+    "lint:opacity": "node scripts/check-opacity-utilities.js",
+    "lint:icons": "node scripts/check-modus-icons.js",
+    "lint:icon-names": "node scripts/check-icon-names.js",
+    "lint:all": "npm run type-check && npm run lint:colors && npm run lint:styles && npm run lint:borders && npm run lint:opacity && npm run lint:icons && npm run lint:icon-names",
+    "prepare": "husky"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@trimble-oss/modus-icons": "^1.18.0",
+    "@trimble-oss/moduswebcomponents": "^1.0.6",
+    "@trimble-oss/moduswebcomponents-angular": "^1.0.6-ng19",
+    "postcss": "^8.5.6",
+    "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.16",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.3.8",
+    "@angular/cli": "^20.3.8",
+    "@angular/compiler-cli": "^20.3.0",
+    "@types/jasmine": "~5.1.0",
+    "glob": "^11.0.0",
+    "husky": "^9.1.7",
+    "jasmine-core": "~5.9.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.9.2"
+  }
+}

package/templates/angular/public/angular-icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-8 0 272 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z" fill="#E23237">
+
+		<path d="M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z" fill="#B52E31">
+
+		<path d="M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z" fill="#FFFFFF">
+
+	</g>
+</svg>

package/templates/angular/public/modus-icons.css

@@ -0,0 +1,49 @@
+/*!
+ * Modus Icons - Field Systems
+ * Custom configuration for Modus Web Components compatibility
+ */
+
+@font-face {
+  font-family: 'modus-icons';
+  src: url('https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1.19.0/dist/field-systems/fonts/modus-icons.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'modus-icons-outlined';
+  src: url('https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1.19.0/dist/field-systems/fonts/modus-icons.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'modus-icons-solid';
+  src: url('https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1.19.0/dist/field-systems/fonts/modus-icons.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+}
+
+.modus-icons-outlined {
+  font-family: 'modus-icons-outlined';
+  font-style: normal;
+  font-weight: normal;
+}
+
+.modus-icons-solid {
+  font-family: 'modus-icons-solid';
+  font-style: normal;
+  font-weight: normal;
+}
+
+.modus-icons {
+  font-family: 'modus-icons';
+  font-style: normal;
+  font-weight: normal;
+}

package/templates/angular/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/angular/scripts/README.md

@@ -0,0 +1,410 @@
+# Modus Design System Linting Scripts for Angular + Tailwind v4
+
+This directory contains comprehensive linting scripts for enforcing Modus Design System compliance in the Angular + Tailwind v4 codebase. These scripts ensure consistent styling, proper component usage, and adherence to design system standards.
+
+## Available Linting Scripts
+
+### 1. TypeScript Type Checking (`check-typescript.js`)
+
+**Purpose**: Enhanced TypeScript type checking with improved developer experience and clear error reporting.
+
+**What it provides:**
+
+- Clear success/failure messages with emojis
+- Grouped error reporting by file
+- Helpful error resolution tips
+- Consistent UX with other linting scripts
+- Pre-commit integration for type safety
+
+**Usage:**
+
+```bash
+npm run type-check
+```
+
+**Success Output:**
+
+```
+🔍 TypeScript Type Check for Angular App
+
+🔍 Running TypeScript type checking...
+
+✅ All TypeScript files are type-safe!
+🎯 No type errors found in the codebase.
+
+🎉 Type checking completed successfully!
+```
+
+**Error Output:**
+
+```
+❌ Found 3 TypeScript errors:
+
+📄 app/components/my.component.ts:
+  15:8 - TS2322: Type 'string' is not assignable to type 'number'
+  22:12 - TS2345: Argument of type 'undefined' is not assignable to parameter of type 'string'
+
+💡 TypeScript Error Resolution Tips:
+  • Check for missing type annotations
+  • Verify import/export statements
+  • Ensure proper interface definitions
+  • Check for null/undefined handling
+  • Verify component prop types
+```
+
+### 2. Color Compliance (`check-modus-colors.js`)
+
+**Purpose**: Ensures only approved Modus colors are used throughout the codebase.
+
+**What it detects:**
+
+- Tailwind color classes (`red-400`, `blue-500`, etc.)
+- Hardcoded hex colors (`#ff0000`, `#ffffff`, etc.)
+- RGB/RGBA values
+- Background, text, and border color violations
+- Raw Modus CSS variables (should use design system colors)
+
+**What it suggests:**
+
+- Proper design system Tailwind classes (`bg-background`, `text-foreground`, etc.)
+- Design system compliant alternatives
+- Links to official documentation
+
+**Usage:**
+
+```bash
+npm run lint:colors
+```
+
+### 3. Inline Styles Compliance (`check-inline-styles.js`)
+
+**Purpose**: Detects inline styles that should be replaced with Tailwind classes for better maintainability and design system consistency.
+
+**What it detects:**
+
+- Angular style attribute binding (`[style.*]`)
+- Regular style attributes (`style=""`)
+- Background colors (`backgroundColor`, `background`)
+- Text colors (`color`)
+- Spacing (`margin`, `padding`)
+- Typography (`fontSize`, `fontWeight`, `lineHeight`, `textAlign`)
+- Layout properties (`display`, `flexDirection`, `justifyContent`, `alignItems`)
+- Positioning (`position`, `top`, `left`, `right`, `bottom`)
+- Sizing (`width`, `height`, `maxWidth`, `minHeight`)
+
+**What it suggests:**
+
+- Equivalent Tailwind utility classes
+- Design system compliant alternatives
+- Performance and maintainability improvements
+
+**Usage:**
+
+```bash
+npm run lint:styles
+```
+
+**Exceptions:**
+
+- Border-related styles are allowed due to Tailwind v4 + Modus conflicts
+- Dynamic values (template expressions) are allowed
+
+### 4. Icon Usage Compliance (`check-modus-icons.js`)
+
+**Purpose**: Ensures only Modus Icons are used, preventing non-design-system icon libraries.
+
+**What it detects:**
+
+- Font Awesome icons (`fa-*`, `fas-*`, `far-*`, etc.)
+- Material Icons (`material-icons`, `material-symbols`)
+- Heroicons (`heroicons`)
+- Lucide icons (`lucide`, `lucide-react`)
+- React Icons imports (`react-icons`, `@heroicons`, `lucide-react`)
+- Other icon libraries (`@ant-design/icons`, `@mui/icons-material`, `@tabler/icons`, `@phosphor-icons`)
+- Custom SVG icons (non-Modus)
+- Generic icon components (`<Icon>`, `<Icons>`, `<IconButton>`)
+
+**What it suggests:**
+
+- Modus Icons alternatives
+- Proper Modus Icons usage patterns
+- Design system compliance
+
+**Usage:**
+
+```bash
+npm run lint:icons
+```
+
+### 5. Border Violations Compliance (`check-border-violations.js`)
+
+**Purpose**: Detects incorrect border patterns that violate Tailwind v4 + Modus design system rules.
+
+**What it detects:**
+
+- Border classes with Tailwind color classes (`border-red-500`, `border-gray-300`, etc.)
+- Border classes with hardcoded hex colors
+- Directional borders with Tailwind colors (`border-t-red-500`, etc.)
+- Inline border styles that should use utility classes
+
+**What it suggests:**
+
+- Border utility classes: `border-default`, `border-thick`, `border-dashed`
+- Design system colors: `border-primary`, `border-success`, `border-warning`, `border-error`
+- Specific side borders: `border-top-default`, `border-bottom-default`, `border-left-default`, `border-right-default`
+
+**Usage:**
+
+```bash
+npm run lint:borders
+```
+
+### 6. Opacity Utilities (`check-opacity-utilities.js`)
+
+**Purpose**: Validates opacity usage with design system colors to ensure custom opacity utilities are used instead of Tailwind's `/80` syntax.
+
+**What it checks:**
+
+- Tailwind opacity syntax with design system colors (e.g., `text-foreground/80`)
+- Suggests custom opacity utilities (e.g., `text-foreground-80`)
+- Validates all opacity levels: 20, 40, 60, 80
+- Checks text, background, and border opacity usage
+
+**Usage:**
+
+```bash
+npm run lint:opacity
+```
+
+**Success Output:**
+
+```
+🔍 Checking for Tailwind opacity syntax violations...
+
+✅ No Tailwind opacity syntax violations found!
+All design system colors are using custom opacity utilities.
+```
+
+**Error Output:**
+
+```
+❌ Found 3 Tailwind opacity syntax violations:
+
+📁 src/app/components/my.component.html
+  src/app/components/my.component.html:43:38
+  Found Tailwind opacity syntax: text-foreground/80
+  Use custom opacity utility: text-foreground-80
+  Tailwind /80 syntax doesn't work with CSS variables. Use our custom opacity utilities instead.
+```
+
+**Key Features:**
+
+- Detects Tailwind opacity syntax with design system colors
+- Provides specific suggestions for each violation
+- Supports all design system color combinations
+- Explains why the syntax doesn't work
+- Integrates with existing lint suite
+
+### 7. Icon Names Validation (`check-icon-names.js`)
+
+**Purpose**: Validates that all Modus icon names used in the codebase are correct and exist in the official Modus Icons list.
+
+**What it checks:**
+
+- `<modus-icon>` component usage with invalid icon names
+- Direct icon class usage with invalid names
+- Icon names in string literals and template literals
+- Provides suggestions for similar/partial matches
+- Validates against complete official icon list (700+ icons)
+
+**Usage:**
+
+```bash
+npm run lint:icon-names
+```
+
+**Success Output:**
+
+```
+🔍 Validating Modus icon names...
+
+✅ All Modus icon names are valid!
+Found 710 valid Modus icons across 25 categories.
+```
+
+**Error Output:**
+
+```
+❌ Found 3 invalid Modus icon names:
+
+📁 src/app/components/my.component.html
+  src/app/components/my.component.html:15:19
+  Invalid Modus icon name: visibility
+  Did you mean: visibility_off, visibility_on, visibility_part_outline
+  The icon "visibility" is not found in the official Modus Icons list.
+```
+
+**Key Features:**
+
+- Validates against complete official Modus Icons list
+- Provides intelligent suggestions using Levenshtein distance
+- Supports multiple icon usage patterns (Angular components, direct class usage)
+- Shows icon categories and counts
+- Integrates with existing lint suite
+- Helps prevent typos and invalid icon names
+
+## Comprehensive Linting
+
+Run all linting checks at once:
+
+```bash
+# Run all design system compliance checks
+npm run lint:all
+```
+
+## Pre-commit Integration
+
+All scripts run automatically before each commit via pre-commit hooks to ensure design system consistency:
+
+```bash
+# Automatic check on commit (pre-commit hook)
+git commit -m "your changes"
+```
+
+The pre-commit hooks will:
+
+1. ✅ Run TypeScript type checking for type safety
+2. ✅ Check for inline styles that should use Tailwind classes
+3. ✅ Verify only approved Modus colors are used
+4. ✅ Ensure only Modus Icons are used
+5. ✅ Detect border violations (Tailwind color classes in borders)
+6. ✅ Validate opacity utilities usage
+7. ✅ Validate Modus icon names are correct
+
+## Modus Color System (9 Colors Only)
+
+### Base Colors (5 total):
+
+1. **Background**: `bg-background` → `var(--modus-wc-color-base-page)` - #fff (light) / #000 (dark)
+2. **Card**: `bg-card` → `var(--modus-wc-color-base-100)` - #f1f1f6 (light) / #252a2e (dark)
+3. **Muted**: `bg-muted` → `var(--modus-wc-color-base-200)` - #cbcdd6 (light) / #464b52 (dark)
+4. **Secondary**: `bg-secondary` → `var(--modus-wc-color-base-300)` - #b7b9c3 (light) / #353a40 (dark)
+5. **Foreground**: `text-foreground` → `var(--modus-wc-color-base-content)` - #171c1e (light) / #cbcdd6 (dark)
+
+### Status Colors (4 total - same in both themes):
+
+6. **Primary/Info**: `bg-primary` → `var(--modus-wc-color-info)` - #0063a3
+7. **Success**: `bg-success` → `var(--modus-wc-color-success)` - #1e8a44
+8. **Error**: `bg-error` → `var(--modus-wc-color-error)` - #da212c
+9. **Warning**: `bg-warning` → `var(--modus-wc-color-warning)` - #fbad26
+
+### Component Props:
+
+- **Buttons**: `color="primary"`, `color="secondary"`, `color="warning"`, `color="danger"`
+- **Alerts**: `type="info"`, `type="success"`, `type="warning"`, `type="error"`
+
+**Note**: All colors are defined locally in `src/styles.css` for LLM context awareness. Use Tailwind classes (`bg-background`, `text-foreground`, etc.) instead of raw Modus CSS variables.
+
+## Angular-Specific Patterns
+
+### Template Syntax
+
+- Use `class=""` instead of `className=""` (React pattern)
+- Use `[style.*]` for dynamic styles (only if truly dynamic)
+- Use Tailwind classes for static styles
+- Use `<modus-icon>` Angular component or `<i class="modus-icons">`
+
+### File Patterns
+
+- Component files: `src/app/**/*.ts`
+- Template files: `src/app/**/*.html`
+- Styles: `src/**/*.css`, `src/**/*.scss`
+
+### Icon Usage
+
+```html
+<!-- ✅ CORRECT: Angular modus-icon component -->
+<modus-icon name="add" size="md" [decorative]="true" />
+
+<!-- ✅ CORRECT: Direct icon class -->
+<i class="modus-icons text-lg" aria-hidden="true">add</i>
+
+<!-- ❌ WRONG: React syntax -->
+<ModusIcon name="add" size="md" decorative />
+```
+
+---
+
+## 🪝 Pre-commit Hooks
+
+This project uses **Husky** to automatically run all linting scripts before commits:
+
+### Setup
+
+```bash
+# Install dependencies (includes Husky)
+npm install
+
+# Husky is automatically initialized via the "prepare" script
+```
+
+### What Runs on Pre-commit
+
+The pre-commit hook (`.husky/pre-commit`) runs each linting script individually with clear step messages:
+
+1. **📝 TypeScript Type Check** - `npm run type-check`
+2. **🎨 Design System Colors** - `npm run lint:colors`
+3. **💅 Inline Styles** - `npm run lint:styles`
+4. **🔲 Border Patterns** - `npm run lint:borders`
+5. **🌈 Opacity Utilities** - `npm run lint:opacity`
+6. **🎨 Modus Icons Usage** - `npm run lint:icons`
+7. **🏷️ Icon Names Validation** - `npm run lint:icon-names`
+
+### Behavior
+
+- ✅ **Commit allowed** if all checks pass
+- ❌ **Commit blocked** if any check fails
+- 📋 **Clear error messages** guide you to fix issues
+
+### Manual Testing
+
+```bash
+# Test the pre-commit hook manually
+./.husky/pre-commit
+
+# Run individual checks
+npm run lint:colors
+npm run lint:icons
+npm run type-check
+```
+
+## 🚀 GitHub Actions CI
+
+The project includes a comprehensive CI workflow (`.github/workflows/ci.yml`) that runs on:
+- **Push to main branch**
+- **Pull requests to main branch**
+
+### CI Pipeline Steps
+
+1. **🔧 Setup** - Checkout code, setup Node.js 20, install dependencies
+2. **📝 Type Checking** - Run TypeScript type validation
+3. **🎨 Modus Linting Suite** - Run all design system compliance checks:
+   - Color compliance
+   - Inline styles validation
+   - Border patterns check
+   - Opacity utilities validation
+   - Modus icons usage validation
+   - Icon names validation
+4. **🏗️ Build** - Compile the Angular application
+5. **🧪 Tests** - Run unit tests (if available)
+
+### Workflow Features
+
+- **✅ Parallel execution** where possible for faster CI
+- **🛡️ Quality gates** - Build fails if any check fails
+- **📊 Clear reporting** - Each step shows detailed results
+- **🔄 Automatic triggers** - Runs on every push and PR
+
+---
+
+**All scripts are updated for Angular + Tailwind v4 and work with the design system defined in `src/styles.css`.**