Merge pull request #7 from PepperDash/feature/add-svgs

Feature/add svgs

Author: ndorin

.github/workflows/build.yaml

@@ -0,0 +1,118 @@
+name: Build React Application
+
+on:
+  workflow_call:
+    inputs:
+      newVersion:
+        description: 'new version?'
+        required: true
+        type: string
+      version:
+        description: 'The version of the file to build and push'
+        required: true
+        type: string
+      tag:
+        description: 'The tag of the image to build and push'
+        required: true
+        type: string
+      channel:
+        description: 'The channel of the image to build and push'
+        required: true
+        type: string
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+      - name: Use Node 22
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          node-version: '22'
+          registry-url: 'https://npm.pkg.github.com'
+      - name: Set package.json version
+        run: |
+          if [ '${{ inputs.newVersion }}' = 'true' ]; then
+            echo "Setting package.json version to ${{ inputs.version }}"
+            npm version ${{ inputs.version }} --no-git-tag-version
+          else
+            echo "Not setting package.json version"
+          fi
+      - name: Install Packages
+        run: |
+          npm ci
+      - name: Build App
+        id: build
+        run: |
+          # Enable pipefail to ensure the step fails if npm build fails
+          set -o pipefail
+
+          echo "## Build Output" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
+
+          # Run build and capture output, but handle failure gracefully for summary
+          if npm run build 2>&1 | tee build_output.log; then
+            echo "Build completed successfully"
+          else
+            echo "Build failed - capturing output for summary"
+          fi
+
+          # Always add the build output to summary (success or failure)
+          sed 's/\x1b\[[0-9;]*m//g' build_output.log >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
+
+          # Check if build actually failed and exit with error code
+          if [ ! -d "dist" ]; then
+            echo "Build failed - dist directory not created"
+            exit 1
+          fi
+      - name: Clean up after failed build
+        if: failure() && steps.build.conclusion == 'failure'
+        run: |
+          git push origin --delete ${{ inputs.tag }}
+
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "---" >> $GITHUB_STEP_SUMMARY
+          echo "## Build Result" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "❌ **BUILD FAILED**" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "The build output above shows the specific errors that caused the build to fail." >> $GITHUB_STEP_SUMMARY
+      - name: Archive Output
+        if: success()
+        id: package
+        run: |
+          cd dist
+          branch=${GITHUB_REF#refs/heads/}
+          repo_name=${GITHUB_REPOSITORY#*/}
+
+          if [ '${{ inputs.newVersion }}' = 'true' ]; then
+            filename=${repo_name}-${{ inputs.tag }}.zip         
+          else
+            filename=${repo_name}-${branch//\//-}.zip
+          fi
+
+          zip -r ../$filename .
+          echo "filename=${filename}" >> $GITHUB_OUTPUT
+      - name: Get release notes
+        if: success() && inputs.newVersion == 'true'
+        uses: actions/download-artifact@v4
+        with:
+          name: change-log
+      - name: Create Release
+        id: create_release
+        if: success() && inputs.newVersion == 'true'
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: './${{ steps.package.outputs.filename }}'
+          bodyFile: ./CHANGELOG.md
+          prerelease: ${{ inputs.channel != '' }}
+          tag: ${{ inputs.tag }}
+          commit: ${{ github.sha }}
+          allowUpdates: true

.github/workflows/ci.yaml

@@ -0,0 +1,18 @@
+name: Build Application
+on:
+  push:
+    branches:
+      - '**'
+jobs:
+  getVersion:
+    uses: PepperDash/workflow-templates/.github/workflows/essentialsplugins-getversion.yml@main
+    secrets: inherit
+  build:
+    uses: PepperDash/workflow-templates/.github/workflows/react-app-build.yml@main
+    secrets: inherit
+    needs: getVersion
+    with:
+      newVersion: ${{ needs.getVersion.outputs.newVersion }}
+      version: ${{ needs.getVersion.outputs.version }}
+      tag: ${{ needs.getVersion.outputs.tag }}
+      channel: ${{ needs.getVersion.outputs.channel }}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
@@ -21,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+dist/assets/index-C_SGWbYA.js
+tsconfig.tsbuildinfo

.releaserc.json

@@ -0,0 +1,36 @@
+{
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "releaseRules": [
+          { "scope": "force-patch", "release": "patch" },
+          { "scope": "no-release", "release": false }
+        ]
+      }
+    ],
+    "@semantic-release/release-notes-generator",    
+    ["@semantic-release/changelog", 
+      {
+        "changelogFile": "CHANGELOG.md"
+      }
+    ],
+    [
+      "@semantic-release/exec",
+      {
+        "verifyReleaseCmd": "echo \"newVersion=true\" >> $GITHUB_OUTPUT",
+        "publishCmd": "echo \"version=${nextRelease.version}\" >> $GITHUB_OUTPUT && echo \"tag=${nextRelease.gitTag}\" >> $GITHUB_OUTPUT && echo \"type=${nextRelease.type}\" >> $GITHUB_OUTPUT && echo \"channel=${nextRelease.channel}\" >> $GITHUB_OUTPUT"
+      }
+    ]
+  ],  
+  "branches": [
+    "main",
+    {"name": "development", "prerelease": "beta", "channel": "beta"},
+    {"name": "release", "prerelease": "rc", "channel": "rc"},
+    {
+      "name": "replace-me-feature-branch",
+      "prerelease": "replace-me-prerelease",
+      "channel": "replace-me-prerelease"
+    }
+  ]
+}

README.md

@@ -1,46 +1,180 @@
-# Getting Started with Create React App
+# PepperDash Essentials Web Config App
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+A powerful web-based configuration and debugging tool for PepperDash Essentials systems. This React application provides real-time system monitoring, configuration management, and troubleshooting capabilities through an intuitive web interface.
 
-## Available Scripts
+## 🚀 Quick Start
 
-In the project directory, you can run:
+### For Users
+**New to the application?** Start with the [Getting Started Tutorial](./docs/tutorials/getting-started.md) for a guided introduction.
 
-### `npm start`
+**Need to solve a specific problem?** Check the [How-to Guides](./docs/how-to/) for step-by-step solutions.
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### For Developers
+**Setting up the development environment:**
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+```bash
+# Install dependencies
+npm install
 
-### `npm test`
+# Create a .env.local file in the project root with your target processor:
+# PROGRAM_HOST=https://your-processor-ip
+# VITE_PROGRAM_ID=app01
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+# Start development server
+npm run start
+```
 
-### `npm run build`
+The app will be available at `http://localhost:5173/cws/debug/`.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+## 📚 Documentation
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+This project uses the [Diataxis framework](https://diataxis.fr/) to provide you with the right information at the right time:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### 🎯 [Tutorials](./docs/tutorials/) - Learning-oriented
+**"Take me by the hand and teach me"**
+- [Getting Started Tutorial](./docs/tutorials/getting-started.md) - Your first steps with the web config app
+- [Debug Console Tutorial](./docs/tutorials/debug-console-basics.md) - Master the debug console
+- [Device Management Tutorial](./docs/tutorials/device-management-basics.md) - Device inspection and management
 
-### `npm run eject`
+### 🔧 [How-to Guides](./docs/how-to/) - Problem-oriented
+**"Show me how to solve this specific problem"**
+- [Troubleshooting Connection Issues](./docs/how-to/troubleshoot-connection.md)
+- [Filter and Search Debug Messages](./docs/how-to/filter-debug-messages.md)
+- [Export and Analyze Configuration](./docs/how-to/export-configuration.md)
+- [Monitor System Performance](./docs/how-to/monitor-performance.md)
+- [Restart and Reload Configuration](./docs/how-to/restart-reload-config.md)
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+### 📚 [Reference](./docs/reference/) - Information-oriented
+**"Tell me the facts"**
+- [UI Components Reference](./docs/reference/ui-components.md) - Complete component documentation
+- [API Endpoints Reference](./docs/reference/api-endpoints.md) - All available REST endpoints
+- [Configuration Schema Reference](./docs/reference/configuration-schema.md) - Configuration file structure
+- [Device Types Reference](./docs/reference/device-types.md) - Supported device types and properties
+- [Log Levels and Filters Reference](./docs/reference/log-levels.md) - Complete logging reference
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### 💡 [Explanation](./docs/explanation/) - Understanding-oriented
+**"Help me understand why and how this works"**
+- [System Architecture](./docs/explanation/architecture.md) - How the web app integrates with Essentials
+- [Debug Console Design](./docs/explanation/debug-console-design.md) - How real-time debugging works
+- [Configuration Management](./docs/explanation/configuration-management.md) - How configuration is handled
+- [Security Considerations](./docs/explanation/security.md) - Security model and best practices
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+## ✨ Key Features
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+- **🔍 Real-Time Debug Console**: Monitor system behavior with live message streaming
+- **⚙️ Device Management**: Inspect and understand configured devices
+- **📄 Configuration Viewer**: View and analyze complete system configuration
+- **📦 Version Information**: Check loaded assemblies and software versions
+- **🏷️ Type Registry**: Browse supported device types and capabilities
+- **🔄 System Control**: Restart system and reload configuration safely
 
-## Learn More
+## 🛠️ Development
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### Available Scripts
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+#### `npm start`
+Runs the app in development mode via Vite. The page will reload when you make edits. Available at `http://localhost:5173/cws/debug/`.
+
+#### `npm test`
+Launches the Vitest test runner in interactive watch mode.
+
+#### `npm run build`
+Compiles TypeScript and builds the app for production to the `dist/` folder with optimized bundles.
+
+#### `npm run preview`
+Serves the production build locally for inspection before deployment.
+
+### Environment Setup
+
+Create a `.env.local` file in the project root (never commit this file):
+
+```dotenv
+PROGRAM_HOST=https://your-processor-ip    # Required: Target processor IP
+VITE_PROGRAM_ID=app01                     # Optional: Default application slot
+```
+
+**Development Prerequisites:**
+- Node.js 18+
+- npm
+- Network access to target PepperDash Essentials processor
+- Modern web browser
+
+### Architecture Overview
+
+**Frontend Stack:**
+- React 19 with TypeScript
+- Redux Toolkit for state management (including WebSocket middleware)
+- React Router v7 for navigation
+- Bootstrap 5 for UI components
+- WebSocket for real-time communication
+
+**Integration:**
+- Connects to PepperDash Essentials processors via HTTPS API at `/cws/<appId>/api/`
+- Uses WebSocket for real-time debug message streaming
+- In development, Vite proxies all `/cws/` API requests to `PROGRAM_HOST`
+- In production, served as static files from the processor's built-in web server at `/cws/debug/`
+
+## 🔐 Security Considerations
+
+- **HTTPS Required**: All communication encrypted
+- **Self-Signed Certificates**: Common for internal network devices; must be accepted in the browser before use
+- **Processor Authentication**: Leverages processor's built-in security
+- **Network-Level Security**: Relies on internal network protection
+
+## 🌐 Browser Compatibility
+
+**Supported Browsers:**
+- Chrome 70+
+- Firefox 65+
+- Safari 12+
+- Edge 79+
+
+**Required Features:**
+- WebSocket support for real-time debugging
+- Modern JavaScript (ES6+) support
+- CSS Grid and Flexbox for responsive layouts
+
+## 📖 Learning Resources
+
+**New Users:**
+1. Start with [Getting Started Tutorial](./docs/tutorials/getting-started.md)
+2. Learn [Debug Console Basics](./docs/tutorials/debug-console-basics.md)
+3. Explore [Device Management](./docs/tutorials/device-management-basics.md)
+
+**Troubleshooting:**
+- Check [How-to Guides](./docs/how-to/) for specific solutions
+- Review [Connection Troubleshooting](./docs/how-to/troubleshoot-connection.md) for access issues
+- Use [Performance Monitoring](./docs/how-to/monitor-performance.md) for system health
+
+**Advanced Usage:**  
+- Understand [System Architecture](./docs/explanation/architecture.md)
+- Learn [Debug Console Design](./docs/explanation/debug-console-design.md)
+- Reference [API Documentation](./docs/reference/api-endpoints.md)
+
+## 🤝 Contributing
+
+This project follows standard React development practices:
+- TypeScript for type safety
+- ESLint and Prettier for code formatting
+- Component-based architecture with feature organization
+- Redux Toolkit for predictable state management
+
+## 📄 License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+## 🆘 Support
+
+**For Application Issues:**
+- Check the [How-to Guides](./docs/how-to/) for common solutions
+- Review system requirements and browser compatibility
+- Verify network connectivity to target processor
+
+**For PepperDash Essentials Questions:**
+- Consult PepperDash documentation and support resources
+- Verify Essentials framework version compatibility
+- Check processor configuration and network settings
+
+---
+
+*Built with ❤️ for the PepperDash community. This web application makes PepperDash Essentials systems more accessible and manageable through modern web interfaces.*