@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,176 @@
+name: 🐛 Bug Report
+description: Report a bug or unexpected behavior in the Modus React App
+title: "[BUG] "
+labels: ["bug", "needs-triage"]
+assignees: ["julianoczkowski"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to report a bug! Please fill out this form as completely as possible to help us understand and reproduce the issue.
+
+  - type: checkboxes
+    id: prerequisites
+    attributes:
+      label: Prerequisites
+      description: Please confirm you have completed the following steps
+      options:
+        - label: I have searched existing issues to avoid duplicates
+          required: true
+        - label: I have tested this with the latest version of the React app
+          required: true
+        - label: I have run `npm run lint:colors` to check for color violations
+          required: false
+        - label: I have run `npm run lint:styles` to check for inline style violations
+          required: false
+        - label: I have run `npm run lint:semantic` to check for semantic HTML violations
+          required: false
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Bug Description
+      description: A clear and concise description of what the bug is
+      placeholder: Describe the bug...
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Steps to Reproduce
+      description: Detailed steps to reproduce the behavior
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Behavior
+      description: What you expected to happen
+      placeholder: Describe what should happen...
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual Behavior
+      description: What actually happened
+      placeholder: Describe what actually happened...
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem
+      placeholder: Drag and drop images here or paste URLs
+
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser are you using?
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Other (please specify in additional context)
+    validations:
+      required: true
+
+  - type: input
+    id: browser-version
+    attributes:
+      label: Browser Version
+      description: What version of the browser are you using?
+      placeholder: e.g., Chrome 120.0.0.0
+    validations:
+      required: true
+
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating System
+      description: Which operating system are you using?
+      options:
+        - Windows
+        - macOS
+        - Linux
+        - Other (please specify in additional context)
+    validations:
+      required: true
+
+  - type: input
+    id: node-version
+    attributes:
+      label: Node.js Version
+      description: What version of Node.js are you using?
+      placeholder: e.g., 18.17.0
+    validations:
+      required: true
+
+  - type: input
+    id: npm-version
+    attributes:
+      label: npm/yarn Version
+      description: What version of npm or yarn are you using?
+      placeholder: e.g., npm 9.6.7 or yarn 1.22.19
+    validations:
+      required: true
+
+  - type: dropdown
+    id: theme
+    attributes:
+      label: Modus Theme
+      description: Which Modus theme were you using when the bug occurred?
+      options:
+        - Classic Light
+        - Classic Dark
+        - Modern Light
+        - Modern Dark
+        - Connect Light
+        - Connect Dark
+        - Not applicable
+    validations:
+      required: false
+
+  - type: textarea
+    id: console-errors
+    attributes:
+      label: Console Errors
+      description: Any errors shown in the browser console
+      placeholder: Paste console errors here...
+      render: text
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context about the problem here
+      placeholder: Any additional information that might be helpful...
+
+  - type: checkboxes
+    id: component-related
+    attributes:
+      label: Component Related
+      description: Is this bug related to specific components?
+      options:
+        - label: Modus Web Components (buttons, alerts, etc.)
+        - label: React Components (ModusIcon, custom components)
+        - label: Theme switching functionality
+        - label: Icon system
+        - label: Color system
+        - label: Vite build process
+        - label: Development tools (linting, MCP servers)
+        - label: TypeScript integration
+        - label: Tailwind CSS integration

package/templates/react/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,20 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 💬 GitHub Discussions
+    url: https://github.com/julianoczkowski/modus-react-app/discussions
+    about: Ask questions and discuss ideas with the community
+  - name: 🔒 Security Vulnerability
+    url: https://mailto:julian.oczkowski@trimble.com
+    about: Report security vulnerabilities privately via email
+  - name: 📚 Modus Web Components Documentation
+    url: https://trimble-oss.github.io/modus-wc-2.0/main/
+    about: Official Modus Web Components documentation and examples
+  - name: 🎨 Modus Figma MCP Integration
+    url: https://trimble-oss.github.io/modus-wc-2.0/main/?path=/docs/documentation-modus-figma-mcp-integration-guide--docs
+    about: Learn about Figma to code integration with AI assistance
+  - name: ⚡ Vite Documentation
+    url: https://vitejs.dev/
+    about: Official Vite documentation for build tool configuration
+  - name: 🎨 Tailwind CSS Documentation
+    url: https://tailwindcss.com/docs
+    about: Official Tailwind CSS documentation for styling

package/templates/react/.github/ISSUE_TEMPLATE/documentation.yml

@@ -0,0 +1,115 @@
+name: 📚 Documentation Issue
+description: Report an issue with documentation or suggest documentation improvements
+title: "[DOCS] "
+labels: ["documentation", "needs-triage"]
+assignees: ["julianoczkowski"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for helping improve our documentation! Please provide details about the documentation issue or improvement.
+
+  - type: checkboxes
+    id: prerequisites
+    attributes:
+      label: Prerequisites
+      description: Please confirm you have completed the following steps
+      options:
+        - label: I have searched existing issues to avoid duplicates
+          required: true
+        - label: I have checked the latest version of the documentation
+          required: true
+
+  - type: dropdown
+    id: type
+    attributes:
+      label: Documentation Issue Type
+      description: What type of documentation issue is this?
+      options:
+        - Missing documentation
+        - Incorrect information
+        - Outdated information
+        - Unclear instructions
+        - Broken links
+        - Typos/grammar
+        - Code examples not working
+        - Missing code examples
+        - Improvement suggestion
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: location
+    attributes:
+      label: Documentation Location
+      description: Where is the documentation issue located?
+      options:
+        - README.md
+        - CONTRIBUTING.md
+        - SECURITY.md
+        - Code comments
+        - TypeScript definitions
+        - Development rules (.cursor/rules/)
+        - Package.json descriptions
+        - Vite configuration
+        - Tailwind configuration
+        - Component documentation
+        - Other (please specify)
+    validations:
+      required: true
+
+  - type: textarea
+    id: current-content
+    attributes:
+      label: Current Content
+      description: What does the current documentation say? (copy/paste the relevant section)
+      placeholder: Paste the current documentation content here...
+      render: markdown
+
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Issue Description
+      description: Describe the problem with the current documentation
+      placeholder: Explain what's wrong or missing...
+    validations:
+      required: true
+
+  - type: textarea
+    id: suggested-content
+    attributes:
+      label: Suggested Content
+      description: What should the documentation say instead?
+      placeholder: Provide your suggested improvement...
+      render: markdown
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional Context
+      description: Any additional context that would help improve the documentation
+      placeholder: Any additional information...
+
+  - type: checkboxes
+    id: areas
+    attributes:
+      label: Related Areas
+      description: Which areas does this documentation issue affect?
+      options:
+        - label: Installation/Setup
+        - label: Development workflow
+        - label: Component usage
+        - label: Color system
+        - label: Icon system
+        - label: Theme system
+        - label: Vite configuration
+        - label: Tailwind CSS integration
+        - label: Build/Deployment
+        - label: Contributing guidelines
+        - label: Security information
+        - label: Troubleshooting
+        - label: API reference
+        - label: Examples/tutorials
+        - label: TypeScript integration

package/templates/react/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,171 @@
+name: ✨ Feature Request
+description: Suggest a new feature or enhancement for the Modus React App
+title: "[FEATURE] "
+labels: ["enhancement", "needs-triage"]
+assignees: ["julianoczkowski"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for suggesting a new feature! Please provide as much detail as possible to help us understand your request.
+
+  - type: checkboxes
+    id: prerequisites
+    attributes:
+      label: Prerequisites
+      description: Please confirm you have completed the following steps
+      options:
+        - label: I have searched existing issues and feature requests to avoid duplicates
+          required: true
+        - label: This feature aligns with the app's scope (React + Vite + Modus Design System integration)
+          required: true
+        - label: I have considered if this should be a separate package/plugin instead
+          required: true
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem Statement
+      description: What problem does this feature solve? What use case does it address?
+      placeholder: Describe the problem or use case this feature would solve...
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: Proposed Solution
+      description: Describe your ideal solution for this feature
+      placeholder: Describe what you'd like to see implemented...
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternative Solutions
+      description: Have you considered any alternative solutions or workarounds?
+      placeholder: Describe any alternative solutions you've considered...
+
+  - type: dropdown
+    id: category
+    attributes:
+      label: Feature Category
+      description: Which category does this feature belong to?
+      options:
+        - Component Examples
+        - Development Tools
+        - Vite Configuration
+        - Build/Deployment
+        - Documentation
+        - Performance
+        - Accessibility
+        - Testing
+        - Developer Experience
+        - TypeScript Integration
+        - Tailwind CSS Integration
+        - Other
+    validations:
+      required: true
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority Level
+      description: How important is this feature to you?
+      options:
+        - Low - Nice to have
+        - Medium - Would be helpful
+        - High - Important for my use case
+        - Critical - Blocking my project
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: components
+    attributes:
+      label: Related Components
+      description: Which components or areas would this feature affect?
+      options:
+        - label: Modus Web Components integration
+        - label: React component architecture
+        - label: Icon system
+        - label: Theme system
+        - label: Color system
+        - label: TypeScript definitions
+        - label: Vite configuration
+        - label: Tailwind CSS integration
+        - label: Development rules
+        - label: MCP servers
+        - label: Documentation
+        - label: Linting rules
+
+  - type: textarea
+    id: implementation
+    attributes:
+      label: Implementation Ideas
+      description: Do you have any ideas on how this could be implemented?
+      placeholder: Share any implementation ideas or technical approaches...
+
+  - type: textarea
+    id: examples
+    attributes:
+      label: Usage Examples
+      description: Provide examples of how this feature would be used
+      placeholder: |
+        ```tsx
+        // Example usage
+        import { ModusButton } from './components/ModusButton';
+
+        function MyComponent() {
+          return (
+            <ModusButton variant="primary">
+              Your example here
+            </ModusButton>
+          );
+        }
+        ```
+
+  - type: checkboxes
+    id: breaking-changes
+    attributes:
+      label: Breaking Changes
+      description: Would this feature require breaking changes?
+      options:
+        - label: This feature would require breaking changes
+        - label: This feature can be implemented without breaking changes
+        - label: I'm not sure about breaking changes
+
+  - type: textarea
+    id: benefits
+    attributes:
+      label: Benefits
+      description: What benefits would this feature provide to users?
+      placeholder: List the benefits this feature would provide...
+
+  - type: textarea
+    id: drawbacks
+    attributes:
+      label: Potential Drawbacks
+      description: Are there any potential drawbacks or concerns with this feature?
+      placeholder: List any potential drawbacks or concerns...
+
+  - type: checkboxes
+    id: contribution
+    attributes:
+      label: Contribution
+      description: Are you willing to contribute to this feature?
+      options:
+        - label: I would like to implement this feature myself
+        - label: I can help with testing and feedback
+        - label: I can help with documentation
+        - label: I can provide design/UX input
+        - label: I prefer to let others implement this
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context, mockups, or examples about the feature request
+      placeholder: Any additional information that might be helpful...

package/templates/react/.github/ISSUE_TEMPLATE/question.yml

@@ -0,0 +1,139 @@
+name: ❓ Question
+description: Ask a question about using the Modus React App
+title: "[QUESTION] "
+labels: ["question", "needs-triage"]
+assignees: ["julianoczkowski"]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Have a question about using the Modus React App? We're here to help! Please provide as much context as possible.
+
+  - type: checkboxes
+    id: prerequisites
+    attributes:
+      label: Prerequisites
+      description: Please confirm you have completed the following steps
+      options:
+        - label: I have searched existing issues and discussions
+          required: true
+        - label: I have read the README.md documentation
+          required: true
+        - label: I have checked the development rules in .cursor/rules/
+          required: false
+
+  - type: dropdown
+    id: category
+    attributes:
+      label: Question Category
+      description: What category does your question fall into?
+      options:
+        - Setup/Installation
+        - Component Usage
+        - Development Workflow
+        - Color System
+        - Icon System
+        - Theme System
+        - Vite Configuration
+        - Build/Deployment
+        - TypeScript Integration
+        - Tailwind CSS Integration
+        - MCP Servers
+        - Development Rules
+        - Performance
+        - Accessibility
+        - Best Practices
+        - Troubleshooting
+        - Other
+    validations:
+      required: true
+
+  - type: textarea
+    id: question
+    attributes:
+      label: Your Question
+      description: What would you like to know?
+      placeholder: Ask your question here...
+    validations:
+      required: true
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Context
+      description: Provide any relevant context about your project or use case
+      placeholder: |
+        - What are you trying to achieve?
+        - What have you tried so far?
+        - Any specific requirements or constraints?
+
+  - type: textarea
+    id: code-example
+    attributes:
+      label: Code Example (if applicable)
+      description: Share any relevant code that relates to your question
+      placeholder: |
+        ```tsx
+        // Your code here
+        import { ModusButton } from './components/ModusButton';
+
+        function MyComponent() {
+          return <ModusButton variant="primary">Click me</ModusButton>;
+        }
+        ```
+      render: tsx
+
+  - type: dropdown
+    id: experience
+    attributes:
+      label: Experience Level
+      description: What's your experience level with the technologies involved?
+      options:
+        - Beginner with React
+        - Intermediate with React
+        - Advanced with React
+        - New to Vite
+        - Familiar with Vite
+        - Expert with Vite
+        - New to Modus Design System
+        - Familiar with Modus Design System
+        - Expert with Modus Design System
+        - New to TypeScript
+        - Familiar with TypeScript
+        - Expert with TypeScript
+        - New to Tailwind CSS
+        - Familiar with Tailwind CSS
+        - Expert with Tailwind CSS
+    validations:
+      required: false
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment Details
+      description: Share relevant environment information
+      placeholder: |
+        - Node.js version:
+        - npm/yarn version:
+        - Browser:
+        - Operating System:
+      render: text
+
+  - type: checkboxes
+    id: urgency
+    attributes:
+      label: Urgency
+      description: How urgent is this question for you?
+      options:
+        - label: This is blocking my project
+        - label: This would help me move forward faster
+        - label: This is for learning/understanding
+        - label: No rush, just curious
+
+  - type: textarea
+    id: additional-info
+    attributes:
+      label: Additional Information
+      description: Any other information that might be helpful
+      placeholder: Any additional context or information...

package/templates/react/.github/copilot-instructions.md

@@ -0,0 +1,80 @@
+# Modus React App - Copilot Instructions
+
+React 19 + Vite boilerplate with Modus 2 Web Components (Trimble Design System). Uses TypeScript, Tailwind CSS 3, and React Router.
+
+## Commands
+
+```bash
+npm run dev          # Development server
+npm run build        # Production build
+npm run lint:all     # All linting checks
+npm run lint:colors  # Color compliance
+npm run lint:icons   # Icon validation
+```
+
+## Design System (9 Colors Only)
+
+**Base colors**: `bg-background`, `bg-card`, `bg-muted`, `bg-secondary`, `text-foreground`
+**Semantic colors**: `bg-primary`, `bg-success`, `bg-warning`, `bg-destructive`
+
+**NEVER use**: Generic Tailwind colors (`bg-blue-500`, `text-gray-600`), hex values, or RGB.
+
+## Component Patterns
+
+- Use wrapper components from `src/components/` (e.g., `ModusButton`, `ModusAlert`)
+- Never use `ModusWc*` web components directly
+- Use `useRef` + `useEffect` for event listeners
+- Let Modus components manage their own state
+
+## Critical Bugs
+
+**Checkbox value inversion** - Always invert the value:
+```tsx
+const actualChecked = !event.detail.value;
+```
+
+**Select component** - Use `ModusDropdownMenu` instead of `ModusSelect` for reliable events.
+
+**Modal pattern** - Use `forwardRef` + `useImperativeHandle`. Access dialog via `querySelector("dialog")`.
+
+## Icons
+
+```tsx
+<i className="modus-icons">icon_name</i>
+```
+
+- Only Modus icons (no Font Awesome, Material Icons)
+- Names use underscores: `save_disk`, `arrow_left` (not `save-disk`)
+
+## Styling Rules
+
+**Borders**: Use `border-default`, `border-primary`, `border-success`
+- Directional: `border-bottom-default` (not `border-b border-default`)
+
+**Opacity**: Use `text-foreground-80` (not `text-foreground/80`)
+- CSS variables don't work with Tailwind opacity modifiers
+
+**HTML Elements**: Use `<div>` only (no `h1`, `p`, `section`, `span`). Exception: `<i>` for icons.
+
+## Themes
+
+6 themes via `data-theme` on `<html>`:
+- `modus-classic-light`, `modus-classic-dark`
+- `modus-modern-light`, `modus-modern-dark`
+- `connect-light`, `connect-dark`
+
+## Forbidden
+
+- Emojis in code or UI
+- Semantic HTML elements (use divs)
+- Controlling Modus component state from React useState
+- Generic Tailwind colors
+- Other icon libraries
+
+## Architecture
+
+- `src/pages/` - Application pages
+- `src/components/` - Modus wrapper components
+- `src/demos/` - Component demos (dev only)
+- `src/dev/` - Dev Panel infrastructure
+- `src/contexts/ThemeContext.tsx` - Theme management