@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-table-usage.mdc

@@ -0,0 +1,151 @@
+---
+description: Modus Table component usage patterns for Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modus Table Usage Rules
+
+Comprehensive guide for using the Modus Table component in Angular applications.
+
+## Basic Usage
+
+```typescript
+import { ModusTableComponent } from '../modus-table.component';
+import type { ITableColumn } from '@trimble-oss/moduswebcomponents';
+
+const columns: ITableColumn[] = [
+  { id: 'name', header: 'Name', accessor: 'name', width: '40%' },
+  { id: 'role', header: 'Role', accessor: 'role' },
+  { id: 'status', header: 'Status', accessor: 'status' },
+];
+
+const data = [
+  { id: '1', name: 'Alex Rivera', role: 'Lead', status: 'Active' },
+  { id: '2', name: 'Chris Patel', role: 'Developer', status: 'Active' },
+];
+```
+
+```html
+<modus-table
+  [columns]="columns"
+  [data]="data"
+  density="comfortable"
+  [zebra]="true"
+  [hover]="true"
+/>
+```
+
+## CRITICAL: Editable Tables with Custom Editors
+
+For editable tables, you MUST use `editor: 'custom'` with `customEditorRenderer` functions.
+
+### DO: Use Custom Editor Renderer Functions
+
+```typescript
+function createTextEditor(value: unknown, onCommit: (value: unknown) => void): HTMLElement {
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = String(value || '');
+  input.style.width = '100%';
+  input.style.border = '1px solid var(--border)';
+  input.style.padding = '4px 8px';
+  input.style.borderRadius = '4px';
+  input.style.fontSize = '14px';
+  input.style.backgroundColor = 'var(--background)';
+  input.style.color = 'var(--foreground)';
+
+  setTimeout(() => {
+    input.focus();
+    input.select();
+  }, 0);
+
+  const commitValue = () => onCommit(input.value);
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitValue();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onCommit(value);
+    }
+  });
+  input.addEventListener('blur', commitValue);
+
+  return input;
+}
+
+const taskColumns: ITableColumn[] = [
+  { id: 'id', header: 'ID', accessor: 'id', width: '60px' },
+  {
+    id: 'task',
+    header: 'Task',
+    accessor: 'task',
+    editor: 'custom',
+    customEditorRenderer: (value, onCommit) => createTextEditor(value, onCommit),
+  },
+];
+```
+
+## Event Handling
+
+### Cell Edit Events
+
+```typescript
+readonly taskData = signal<Record<string, unknown>[]>([...initialTaskData]);
+
+handleCellEditCommit(event: {
+  rowIndex: number;
+  colId: string;
+  newValue: unknown;
+  updatedRow: Record<string, unknown>;
+}): void {
+  this.taskData.update((prevData) => {
+    const newData = [...prevData];
+    newData[event.rowIndex] = { ...newData[event.rowIndex], [event.colId]: event.newValue };
+    return newData;
+  });
+}
+```
+
+```html
+<modus-table
+  [columns]="taskColumns"
+  [data]="taskData()"
+  [editable]="true"
+  (cellEditCommit)="handleCellEditCommit($event)"
+/>
+```
+
+## Selection Events
+
+```typescript
+readonly selectedIds = signal<string[]>([]);
+
+handleRowSelectionChange(event: {
+  selectedRows: Record<string, unknown>[];
+  selectedRowIds: string[];
+}): void {
+  this.selectedIds.set(event.selectedRowIds);
+}
+```
+
+```html
+<modus-table
+  [columns]="columns"
+  [data]="data"
+  selectable="multi"
+  [selectedRowIds]="selectedIds()"
+  (rowSelectionChange)="handleRowSelectionChange($event)"
+/>
+```
+
+## Key Takeaways
+
+1. **Custom editors are required** for reliable cell editing
+2. **Use design system CSS variables** in custom editors (`--border`, `--background`, `--foreground`)
+3. **Handle keyboard events** (Enter to commit, Escape to cancel)
+4. **Use immutable updates** with signals for change detection
+5. **Import types** from `@trimble-oss/moduswebcomponents`

package/templates/angular/.cursor/rules/modus-angular-tailwind-usage-short.mdc

@@ -0,0 +1,44 @@
+---
+description: Tailwind CSS v4 with Modus Design System integration in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Tailwind Usage - Short
+
+Tailwind CSS v4 with Modus Design System integration.
+
+## Key Rules
+
+- **Tailwind v4 with design system** - Uses CSS imports, reads variables from `src/styles.css`
+- **No generic Tailwind colors** - Never use `bg-blue-500`, `text-gray-600`, etc.
+- **Use design system colors** - `bg-background`, `text-foreground`, `bg-primary`, etc.
+- **Custom utilities for borders** - Use `border-default`, `border-success`, `border-warning`, etc.
+- **Custom utilities for opacity** - Use `text-foreground-80`, not `text-foreground/80`
+- **Test in all themes** - Ensure Tailwind classes work in all 6 themes
+
+## Correct Usage
+
+```html
+<!-- CORRECT: Design system colors -->
+<div class="bg-background text-foreground"></div>
+<div class="bg-card text-card-foreground border-default"></div>
+<div class="bg-primary text-primary-foreground"></div>
+```
+
+## Forbidden Patterns
+
+```html
+<!-- WRONG: Generic Tailwind colors -->
+<div class="bg-blue-500 text-white border-gray-300"></div>
+
+<!-- WRONG: Hardcoded colors -->
+<div class="bg-[#ffffff] text-[#000000]"></div>
+
+<!-- WRONG: Raw Modus variables -->
+<div class="bg-[var(--modus-wc-color-base-page)]"></div>
+```
+
+## Reference
+
+For detailed Tailwind patterns and styling examples, fetch the full rule: `modus-angular-tailwind-usage`

package/templates/angular/.cursor/rules/modus-angular-tailwind-usage.mdc

@@ -0,0 +1,242 @@
+---
+description: Tailwind CSS v4 with Modus Design System integration in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Tailwind CSS Usage in Angular + Vite
+
+## Tailwind v4 Integration
+
+This Angular + Vite application uses **Tailwind CSS v4** with Modus Design System integration.
+
+**Configuration**: Tailwind v4 reads CSS variables directly from `src/styles.css`. No separate `tailwind.config.js` is required for basic color mapping.
+
+## FORBIDDEN: Generic Tailwind Colors
+
+### Never Use Generic Tailwind Color Classes
+
+```html
+<!-- WRONG: Generic Tailwind color classes -->
+<div class="bg-blue-500 text-white border-gray-300"></div>
+<div class="bg-red-400 text-yellow-200 border-green-500"></div>
+<div class="bg-gray-100 text-black border-purple-300"></div>
+```
+
+### Never Use Hardcoded Colors
+
+```html
+<!-- WRONG: Hardcoded colors -->
+<div class="bg-[#ffffff] text-[#000000] border-[#e5e5e5]"></div>
+<div [style.background-color]="'#ffffff'"></div>
+```
+
+### Never Use Raw Modus Variables
+
+```html
+<!-- WRONG: Raw Modus CSS variables -->
+<div class="bg-[var(--modus-wc-color-base-page)]"></div>
+<div [style.background-color]="'var(--modus-wc-color-base-page)'"></div>
+```
+
+## CORRECT: Design System Colors
+
+### Use Design System Tailwind Classes
+
+```html
+<!-- CORRECT: Design system colors -->
+<div class="bg-background text-foreground"></div>
+<div class="bg-card text-card-foreground border-default"></div>
+<div class="bg-primary text-primary-foreground"></div>
+<div class="bg-secondary text-secondary-foreground"></div>
+<div class="bg-muted text-muted-foreground"></div>
+<div class="bg-destructive text-destructive-foreground"></div>
+<div class="bg-warning text-warning-foreground"></div>
+<div class="bg-success text-success-foreground"></div>
+```
+
+### Available Design System Colors
+
+```typescript
+// Background colors
+bg-background, bg-card, bg-muted, bg-secondary
+
+// Text colors
+text-foreground, text-card-foreground, text-muted-foreground
+
+// Primary colors
+bg-primary, text-primary-foreground
+
+// Status colors
+bg-destructive, text-destructive-foreground
+bg-warning, text-warning-foreground
+bg-success, text-success-foreground
+
+// Border colors
+border-border, border-default, border-primary, border-success, border-warning, border-destructive
+```
+
+## Component Styling Patterns
+
+### Card Components
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-card text-card-foreground border-default rounded-lg p-6">
+      <div class="text-2xl font-semibold mb-2">{{ title() }}</div>
+      <div class="text-muted-foreground">{{ content() }}</div>
+    </div>
+  `,
+})
+export class CardComponent {
+  readonly title = input.required<string>();
+  readonly content = input<string>('');
+}
+```
+
+### Form Components
+
+```typescript
+@Component({
+  template: `
+    <div class="space-y-4">
+      <div class="flex flex-col gap-2">
+        <div class="text-sm font-medium text-foreground">{{ label() }}</div>
+        <modus-text-input
+          [value]="value()"
+          (inputChange)="handleChange($event)"
+        />
+      </div>
+    </div>
+  `,
+})
+export class FormFieldComponent {
+  readonly label = input.required<string>();
+  readonly value = input<string>('');
+  readonly valueChange = output<string>();
+  
+  handleChange(event: string): void {
+    this.valueChange.emit(event);
+  }
+}
+```
+
+### Status Indicators
+
+```typescript
+@Component({
+  template: `
+    <div [class]="statusClasses()">
+      {{ status() }}
+    </div>
+  `,
+})
+export class StatusIndicatorComponent {
+  readonly status = input<'success' | 'warning' | 'error' | 'info'>('info');
+  
+  readonly statusClasses = computed(() => {
+    const base = 'px-3 py-1 rounded border';
+    const variants = {
+      success: 'bg-success text-success-foreground border-success',
+      warning: 'bg-warning text-warning-foreground border-warning',
+      error: 'bg-destructive text-destructive-foreground border-destructive',
+      info: 'bg-primary text-primary-foreground border-primary',
+    };
+    return `${base} ${variants[this.status()]}`;
+  });
+}
+```
+
+## Typography Patterns
+
+### Typography with Design System Colors
+
+```html
+<div class="space-y-4">
+  <div class="text-4xl font-bold text-foreground">Heading 1</div>
+  <div class="text-3xl font-semibold text-foreground">Heading 2</div>
+  <div class="text-2xl font-medium text-foreground">Heading 3</div>
+  <div class="text-xl font-medium text-foreground">Heading 4</div>
+  <div class="text-lg font-medium text-foreground">Heading 5</div>
+  <div class="text-base font-medium text-foreground">Heading 6</div>
+  
+  <div class="text-base text-foreground">Regular paragraph text</div>
+  <div class="text-sm text-muted-foreground">Small text</div>
+  <div class="text-xs text-muted-foreground">Extra small text</div>
+</div>
+```
+
+## Custom Utilities
+
+### Border Utilities
+
+```html
+<!-- Default borders -->
+<div class="border-default">Default border</div>
+<div class="border-thick">Thick border</div>
+<div class="border-dashed">Dashed border</div>
+
+<!-- Semantic borders -->
+<div class="border-success">Success border</div>
+<div class="border-warning">Warning border</div>
+<div class="border-destructive">Destructive border</div>
+<div class="border-primary">Primary border</div>
+
+<!-- Directional borders -->
+<div class="border-top-default">Top border</div>
+<div class="border-bottom-default">Bottom border</div>
+<div class="border-left-default">Left border</div>
+<div class="border-right-default">Right border</div>
+```
+
+### Elevation Utilities
+
+```html
+<div class="shadow-sm">Small elevation</div>
+<div class="shadow-md">Medium elevation</div>
+<div class="shadow-lg">Large elevation</div>
+<div class="shadow-xl">Extra large elevation</div>
+```
+
+## Common Anti-Patterns
+
+### Don't Mix Color Systems
+
+```html
+<!-- WRONG: Mixing design system and generic colors -->
+<div class="bg-background text-blue-500 border-red-300">
+  Mixed color systems
+</div>
+
+<!-- CORRECT: Consistent design system -->
+<div class="bg-background text-foreground border-default">
+  Consistent design system
+</div>
+```
+
+## Validation
+
+### Linting Commands
+
+```bash
+# Check for color violations
+npm run lint:colors
+
+# Check for inline styles
+npm run lint:styles
+
+# Check for border violations
+npm run lint:borders
+
+# Check for opacity violations
+npm run lint:opacity
+```
+
+## Key Takeaways
+
+1. **Use Design System Colors**: Always use design system Tailwind classes
+2. **Never Use Generic Colors**: No generic Tailwind color classes
+3. **Never Use Hardcoded Colors**: No hex, RGB, or hardcoded values
+4. **Use Custom Utilities**: Leverage custom border and opacity utilities from `src/styles.css`
+5. **Tailwind v4**: Uses CSS imports, reads variables directly from `src/styles.css`

package/templates/angular/.cursor/rules/modus-angular-themes-short.mdc

@@ -0,0 +1,54 @@
+---
+description: 6 Modus themes with proper switching and persistence in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Themes - Short
+
+6 Modus themes with proper switching and persistence.
+
+## Key Rules
+
+- **6 Modus themes supported** - Classic Light/Dark, Modern Light/Dark, Connect Light/Dark
+- **Use ThemeService with inject()** - Proper Angular service pattern
+- **Theme persistence** - Save to localStorage and restore on page load
+- **Official data-theme attribute** - Use `data-theme` for theme switching
+- **Theme-aware components** - Use computed signals for conditional styling
+- **Test all themes** - Verify components work in all 6 themes
+
+## Available Themes
+
+- `modus-classic-light` / `modus-classic-dark`
+- `modus-modern-light` / `modus-modern-dark`
+- `connect-light` / `connect-dark`
+
+## Usage Pattern
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-background text-foreground">
+      Theme: {{ themeService.currentTheme() }}
+      Mode: {{ themeService.isDark() ? 'Dark' : 'Light' }}
+    </div>
+  `,
+})
+export class ThemedComponent {
+  readonly themeService = inject(ThemeService);
+}
+```
+
+## Theme Switching
+
+```typescript
+// Set theme via service
+this.themeService.setTheme('modus-modern-dark');
+
+// Document attribute is set automatically
+// document.documentElement.setAttribute('data-theme', theme);
+```
+
+## Reference
+
+For detailed theme implementation and service patterns, fetch the full rule: `modus-angular-themes`