@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/.github/instructions/components.instructions.md

@@ -0,0 +1,82 @@
+---
+applyTo: "src/components/**/*.tsx"
+---
+
+# Modus Wrapper Component Patterns
+
+These are wrapper components that wrap `@trimble-oss/moduswebcomponents-react` web components.
+
+## Event Handling Pattern
+
+Always use `useRef` + `useEffect` for web component events:
+
+```tsx
+const componentRef = useRef<HTMLModusWcButtonElement>(null);
+
+useEffect(() => {
+  const element = componentRef.current;
+  if (!element) return;
+
+  const handleEvent = (event: Event) => {
+    const customEvent = event as CustomEvent<EventDetail>;
+    // Handle event
+  };
+
+  element.addEventListener('eventName', handleEvent);
+  return () => element.removeEventListener('eventName', handleEvent);
+}, []);
+```
+
+## State Management
+
+- Let Modus components manage their own internal state
+- Don't control accordion/modal expanded state from React useState
+- Use refs for programmatic control when needed
+
+## Props Pattern
+
+Use conditional prop spreading to avoid overriding defaults:
+
+```tsx
+<ModusWcButton
+  {...(color && { color })}
+  {...(variant && { variant })}
+  size={size}
+>
+  {children}
+</ModusWcButton>
+```
+
+## Modal Implementation
+
+Use `forwardRef` with `useImperativeHandle`:
+
+```tsx
+const ModusModal = forwardRef<ModusModalRef, Props>((props, ref) => {
+  const modalRef = useRef<HTMLModusWcModalElement>(null);
+
+  const openModal = () => {
+    const dialog = modalRef.current?.querySelector("dialog");
+    dialog?.showModal();
+  };
+
+  useImperativeHandle(ref, () => ({ openModal, closeModal }));
+  // ...
+});
+```
+
+## Checkbox Bug
+
+The `value` property is inverted. Always invert:
+
+```tsx
+const actualChecked = !event.detail.value;
+```
+
+## Select Component
+
+Use `ModusDropdownMenu` instead of `ModusSelect` for reliable event handling.
+
+## Button Group
+
+Don't set default `variant` or `color` on buttons inside groups - let the group control styling.

package/templates/react/.github/instructions/demos.instructions.md

@@ -0,0 +1,82 @@
+---
+applyTo: "src/demos/**/*.tsx"
+---
+
+# Demo Page Patterns
+
+Demo pages showcase Modus components with interactive examples.
+
+## Page Structure
+
+```tsx
+export default function ComponentDemo() {
+  return (
+    <div className="space-y-8 p-6">
+      <div className="text-2xl font-bold text-foreground">Component Name</div>
+      <div className="text-foreground-60">Description of the component.</div>
+
+      {/* Demo sections */}
+      <DemoSection title="Basic Usage">
+        {/* Examples */}
+      </DemoSection>
+
+      <DemoSection title="Variants">
+        {/* Variant examples */}
+      </DemoSection>
+    </div>
+  );
+}
+```
+
+## Demo Section Pattern
+
+```tsx
+<div className="space-y-4">
+  <div className="text-lg font-semibold text-foreground">Section Title</div>
+  <div className="flex flex-wrap gap-4">
+    {/* Component examples */}
+  </div>
+</div>
+```
+
+## Styling Rules
+
+- Use design system colors: `bg-background`, `text-foreground`, `bg-card`
+- Use opacity utilities: `text-foreground-60` (not `text-foreground/60`)
+- Use custom border utilities: `border-default`, `border-bottom-default`
+- Use `<div>` elements only (no semantic HTML)
+
+## Interactive Examples
+
+Show multiple states and variants:
+
+```tsx
+<div className="flex flex-wrap gap-4">
+  <ModusButton color="primary">Primary</ModusButton>
+  <ModusButton color="secondary">Secondary</ModusButton>
+  <ModusButton color="danger">Danger</ModusButton>
+</div>
+```
+
+## Event Handling Demos
+
+Demonstrate event handling with visible feedback:
+
+```tsx
+const [lastAction, setLastAction] = useState<string>("");
+
+<ModusButton onClick={() => setLastAction("Button clicked")}>
+  Click Me
+</ModusButton>
+<div className="text-foreground-60">Last action: {lastAction}</div>
+```
+
+## Icons in Demos
+
+Use Modus icons only with underscore naming:
+
+```tsx
+<i className="modus-icons">check_circle</i>
+<i className="modus-icons">warning</i>
+<i className="modus-icons">info</i>
+```

package/templates/react/.github/instructions/pages.instructions.md

@@ -0,0 +1,76 @@
+---
+applyTo: "src/pages/**/*.tsx"
+---
+
+# Application Page Patterns
+
+Pages are user-facing application screens in `src/pages/`.
+
+## Page Structure
+
+```tsx
+export default function PageName() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Page content */}
+      <div className="container mx-auto p-6">
+        <div className="text-2xl font-bold text-foreground mb-6">
+          Page Title
+        </div>
+        {/* Content sections */}
+      </div>
+    </div>
+  );
+}
+```
+
+## Layout Patterns
+
+Use Tailwind utilities with design system colors:
+
+```tsx
+// Card layout
+<div className="bg-card border-default rounded-lg p-6">
+  {/* Card content */}
+</div>
+
+// Grid layout
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  {/* Grid items */}
+</div>
+```
+
+## Navigation
+
+Add routes in `src/App.tsx`:
+
+```tsx
+<Route path="/your-page" element={<YourPage />} />
+```
+
+## Styling Rules
+
+- Use design system colors only: `bg-background`, `text-foreground`, `bg-card`
+- Use opacity utilities: `text-foreground-80` (not `text-foreground/80`)
+- Use border utilities: `border-default`, `border-bottom-default`
+- Use `<div>` elements only (no `h1`, `p`, `section`)
+
+## Theme Awareness
+
+Pages automatically adapt to the active theme. Use theme context if needed:
+
+```tsx
+import { useTheme } from "@/contexts/ThemeContext";
+
+const { theme, setTheme } = useTheme();
+```
+
+## Component Usage
+
+Always use wrapper components from `src/components/`:
+
+```tsx
+import { ModusButton, ModusAlert, ModusCard } from "@/components";
+```
+
+Never import `ModusWc*` components directly.

package/templates/react/.github/instructions/styles.instructions.md

@@ -0,0 +1,77 @@
+---
+applyTo: "**/*.css"
+---
+
+# CSS and Design System Patterns
+
+This project uses Tailwind CSS 3 with a custom 9-color design system.
+
+## Color Variables
+
+Modus provides 9 CSS variables mapped to Tailwind utilities:
+
+```css
+/* Base colors */
+--modus-wc-color-base-page     /* bg-background */
+--modus-wc-color-base-100      /* bg-card */
+--modus-wc-color-base-200      /* bg-muted */
+--modus-wc-color-base-300      /* bg-secondary */
+--modus-wc-color-base-content  /* text-foreground */
+
+/* Semantic colors */
+--modus-wc-color-info          /* bg-primary, text-primary */
+--modus-wc-color-success       /* bg-success, text-success */
+--modus-wc-color-warning       /* bg-warning, text-warning */
+--modus-wc-color-error         /* bg-destructive, text-destructive */
+```
+
+## Custom Border Utilities
+
+Tailwind's border-color doesn't work with CSS variables. Use custom utilities:
+
+```css
+/* Standard borders */
+.border-default { border: 1px solid var(--modus-wc-color-base-200); }
+.border-primary { border: 1px solid var(--modus-wc-color-info); }
+.border-success { border: 1px solid var(--modus-wc-color-success); }
+.border-warning { border: 1px solid var(--modus-wc-color-warning); }
+.border-destructive { border: 1px solid var(--modus-wc-color-error); }
+
+/* Directional borders */
+.border-bottom-default { border-bottom: 1px solid var(--modus-wc-color-base-200); }
+.border-top-default { border-top: 1px solid var(--modus-wc-color-base-200); }
+```
+
+## Custom Opacity Utilities
+
+Tailwind's `/80` syntax doesn't work with CSS variables. Use color-mix():
+
+```css
+/* Text opacity */
+.text-foreground-80 {
+  color: color-mix(in srgb, var(--modus-wc-color-base-content) 80%, transparent);
+}
+.text-foreground-60 {
+  color: color-mix(in srgb, var(--modus-wc-color-base-content) 60%, transparent);
+}
+
+/* Background opacity */
+.bg-primary-20 {
+  background-color: color-mix(in srgb, var(--modus-wc-color-info) 20%, transparent);
+}
+```
+
+## Forbidden Patterns
+
+```css
+/* NEVER use hardcoded colors */
+.wrong { color: #000000; }
+.wrong { background-color: rgb(0, 0, 0); }
+
+/* NEVER use generic Tailwind colors in CSS */
+/* Use the design system utilities instead */
+```
+
+## Theme Support
+
+All CSS variables automatically update when the `data-theme` attribute changes on `<html>`. No additional CSS is needed for theme switching.

package/templates/react/.github/instructions/typescript.instructions.md

@@ -0,0 +1,101 @@
+---
+applyTo: "**/*.ts,**/*.tsx"
+---
+
+# TypeScript Patterns for Modus Components
+
+## Event Type Casting
+
+Modus web components emit CustomEvents. Cast them properly:
+
+```tsx
+const handleEvent = (event: Event) => {
+  const customEvent = event as CustomEvent<EventDetailType>;
+  const detail = customEvent.detail;
+  // Use detail
+};
+```
+
+## Common Event Types
+
+```tsx
+// Button click
+(event: Event) => {
+  const customEvent = event as CustomEvent<MouseEvent | KeyboardEvent>;
+}
+
+// Input change
+(event: Event) => {
+  const customEvent = event as CustomEvent<InputEvent>;
+  const value = (customEvent.target as HTMLInputElement).value;
+}
+
+// Checkbox (remember value is inverted!)
+(event: Event) => {
+  const customEvent = event as CustomEvent<InputEvent>;
+  const rawValue = (customEvent.target as HTMLModusWcCheckboxElement).value;
+  const actualChecked = !rawValue; // Invert the value
+}
+```
+
+## Component Ref Types
+
+```tsx
+import type { HTMLModusWcButtonElement } from "@trimble-oss/moduswebcomponents-react";
+
+const buttonRef = useRef<HTMLModusWcButtonElement>(null);
+const modalRef = useRef<HTMLModusWcModalElement>(null);
+const checkboxRef = useRef<HTMLModusWcCheckboxElement>(null);
+```
+
+## Modal Ref Pattern
+
+```tsx
+interface ModusModalRef {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+const modalRef = useRef<ModusModalRef>(null);
+modalRef.current?.openModal();
+```
+
+## Props Interfaces
+
+```tsx
+interface ComponentProps {
+  color?: "primary" | "secondary" | "danger";
+  variant?: "filled" | "outlined" | "borderless";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+```
+
+## Import Patterns
+
+```tsx
+// Use wrapper components
+import { ModusButton, ModusAlert } from "@/components";
+
+// Import types from the web components package
+import type { 
+  HTMLModusWcButtonElement,
+  HTMLModusWcModalElement 
+} from "@trimble-oss/moduswebcomponents-react";
+```
+
+## Design System Types
+
+```tsx
+type ThemeName = 
+  | "modus-classic-light" 
+  | "modus-classic-dark"
+  | "modus-modern-light" 
+  | "modus-modern-dark"
+  | "connect-light" 
+  | "connect-dark";
+
+type ButtonColor = "primary" | "secondary" | "danger";
+type ButtonVariant = "filled" | "outlined" | "borderless";
+```

package/templates/react/.github/pull_request_template.md

@@ -0,0 +1,188 @@
+# Pull Request
+
+## 📝 Description
+
+<!-- Provide a brief description of the changes in this PR -->
+
+## 🔗 Related Issue
+
+<!-- Link to the issue this PR addresses -->
+
+Fixes #(issue number)
+
+## 🎯 Type of Change
+
+<!-- Mark the relevant option with an "x" -->
+
+- [ ] 🐛 Bug fix (non-breaking change that fixes an issue)
+- [ ] ✨ New feature (non-breaking change that adds functionality)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] 📚 Documentation update
+- [ ] 🎨 Style/UI changes
+- [ ] ♻️ Code refactoring (no functional changes)
+- [ ] ⚡ Performance improvement
+- [ ] 🧪 Adding or updating tests
+- [ ] 🔧 Build/CI changes
+- [ ] 🏗️ Infrastructure changes
+
+## 🧪 Testing
+
+<!-- Describe the tests you ran and provide instructions for reviewers -->
+
+### Manual Testing Checklist
+
+- [ ] **Development server starts** without errors (`npm run dev`)
+- [ ] **All demo pages load** correctly
+- [ ] **Theme switching works** for all 6 themes (Classic/Modern/Connect, Light/Dark)
+- [ ] **Icons display properly** with valid names
+- [ ] **Colors follow Modus standards** (`npm run lint:colors` passes)
+- [ ] **Modus styles are followed** (`npm run lint:styles` passes)
+- [ ] **No semantic HTML is used** (`npm run lint:semantic` passes)
+- [ ] **Modus icons are used correctly** (`npm run lint:icons` passes)
+- [ ] **Border usage follows guidelines** (`npm run lint:borders` passes)
+- [ ] **Responsive design** works on mobile and desktop
+- [ ] **Accessibility** - tested with keyboard navigation
+- [ ] **Build succeeds** (`npm run build`)
+- [ ] **TypeScript compilation** passes (`npm run type-check`)
+
+### Browser Testing
+
+Tested in the following browsers:
+
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (latest)
+- [ ] Edge (latest)
+
+### Component-Specific Testing (if applicable)
+
+- [ ] **Modus Web Components** render correctly
+- [ ] **React components** work as expected
+- [ ] **Event handling** functions properly
+- [ ] **Props and attributes** are properly typed
+- [ ] **Accessibility attributes** are present (ARIA labels, roles)
+- [ ] **Vite build process** works correctly
+- [ ] **Tailwind CSS** integration works properly
+
+## 📸 Screenshots
+
+<!-- Add screenshots for UI changes -->
+
+### Before
+
+<!-- Screenshot of the current state -->
+
+### After
+
+<!-- Screenshot of the changes -->
+
+## 🎨 Design System Compliance
+
+<!-- Confirm compliance with Modus Design System -->
+
+- [ ] **Uses only approved Modus colors** (9 total: 5 base + 4 semantic)
+- [ ] **Uses valid Modus icon names** from the official list
+- [ ] **Follows React + Vite component creation rules** (Tailwind classes, TypeScript interfaces)
+- [ ] **Uses Tailwind classes instead of inline styles** (no `style={{}}` syntax)
+- [ ] **Uses div elements instead of semantic HTML** (no `<h1>`, `<section>`, etc.)
+- [ ] **Maintains theme compatibility** across all 6 Modus themes
+- [ ] **Follows accessibility guidelines** (WCAG 2.1 AA compliance)
+
+## 📋 Code Quality
+
+<!-- Confirm code quality standards -->
+
+- [ ] **Code follows project conventions** and style guide
+- [ ] **TypeScript strict mode** compliance
+- [ ] **ESLint rules** pass without warnings
+- [ ] **No hardcoded values** - uses Modus design tokens
+- [ ] **Proper error handling** implemented
+- [ ] **Code is well-documented** with comments where needed
+
+## 🔄 Breaking Changes
+
+<!-- If this PR introduces breaking changes, describe them here -->
+
+- [ ] This PR introduces breaking changes
+- [ ] Migration guide provided (if applicable)
+- [ ] Version bump required
+
+**Breaking changes description:**
+
+<!-- Describe any breaking changes and how to migrate -->
+
+## 📚 Documentation
+
+<!-- Confirm documentation updates -->
+
+- [ ] **README.md** updated (if needed)
+- [ ] **Code comments** added for complex logic
+- [ ] **TypeScript definitions** updated (if needed)
+- [ ] **Examples** provided for new features
+- [ ] **Development rules** updated (if needed)
+
+## 🔍 Review Checklist
+
+<!-- For reviewers -->
+
+### Code Review
+
+- [ ] Code follows project patterns and conventions
+- [ ] Logic is sound and handles edge cases
+- [ ] Performance considerations addressed
+- [ ] Security considerations addressed
+- [ ] No code duplication or unnecessary complexity
+
+### Design System Review
+
+- [ ] Uses approved Modus colors and components
+- [ ] Maintains visual consistency
+- [ ] Responsive design implemented correctly
+- [ ] Accessibility standards met
+
+### Testing Review
+
+- [ ] Adequate test coverage (manual or automated)
+- [ ] Edge cases considered and tested
+- [ ] Cross-browser compatibility verified
+- [ ] Performance impact assessed
+
+## 💬 Additional Notes
+
+<!-- Add any additional context, concerns, or notes for reviewers -->
+
+## 📝 Reviewer Instructions
+
+<!-- Specific instructions for reviewers -->
+
+1. **Pull and test locally:**
+
+   ```bash
+   git checkout [branch-name]
+   npm install
+   npm run dev
+   ```
+
+2. **Test the specific changes:**
+
+   - Navigate to affected pages/components
+   - Test functionality described in this PR
+   - Verify no regressions in existing features
+
+3. **Check compliance:**
+   - Run `npm run lint:colors` to verify color usage
+   - Run `npm run lint:styles` to verify no inline styles
+   - Run `npm run lint:semantic` to verify no semantic HTML
+   - Run `npm run lint:icons` to verify Modus icons usage
+   - Run `npm run lint:borders` to verify border usage
+   - Test theme switching if UI changes were made
+   - Verify accessibility with keyboard navigation
+
+---
+
+**By submitting this PR, I confirm that:**
+
+- [ ] I have read and followed the [Contributing Guidelines](CONTRIBUTING.md)
+- [ ] I have tested my changes thoroughly
+- [ ] I have considered the impact on existing users
+- [ ] I am willing to address feedback and make necessary changes

package/templates/react/.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint
+
+      - name: Run type checks
+        run: npm run type-check
+
+      - name: Run Modus linting suite
+        run: |
+          npm run lint:colors
+          npm run lint:icons
+          npm run lint:semantic
+          npm run lint:styles
+          npm run lint:borders
+          npm run lint:opacity
+          npm run lint:icon-names
+
+      - name: Build application
+        run: npm run build

package/templates/react/.github/workflows/claude-code-review.yml

@@ -0,0 +1,44 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
+          plugins: 'code-review@claude-code-plugins'
+          prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+