refactor: updated the library components to latest React structure

Author: madhavilosetty-intel

.claude/settings.local.json

@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(tree:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm install)",
+      "Bash(npm run dev:*)",
+      "Bash(npx rimraf dist)",
+      "Bash(npx rollup -c)",
+      "Bash(timeout /t 3)",
+      "Bash(npm test)",
+      "Bash(find:*)",
+      "Bash(npm install:*)",
+      "Bash(npm run lint:*)",
+      "Bash(grep:*)"
+    ]
+  }
+}

.eslintrc.json

@@ -38,32 +38,19 @@ jobs:
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
         with:
           node-version: 24.x
-      - name: Run NPM CI
-        run: npm install
+      - name: Install Dependencies
+        run: npm ci
 
       - name: Run Lint
         run: npm run lint
 
-      - name: Run Test
-        run: npm run test
+      - name: Run Tests with Coverage
+        run: npm run test:coverage
 
-      - name: Run Coverage
-        run: npm run coverage
-
-      - uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2
-        name: Upload Coverage Results
+      - name: Upload Coverage Results
+        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2
         with:
           directory: ./coverage/
 
-      - name: Run Build Dev
+      - name: Run Build
         run: npm run build
-
-      - name: Run Build Externals
-        run: npm run build-ext
-
-      - run: mv junit.xml ui-toolkit-react-unit.xml
-      - name: Upload JEST Results
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
-        with:
-          name: ui-toolkit-react-unit
-          path: ui-toolkit-react-unit.xml

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
         with:
           node-version: "24.x"
       - run: npm ci
-      - run: npm run build-ext --if-present
+      - run: npm run build
       - run: rsync -a package.json README.md ./dist/
       - name: Semantic Release
         id: semantic

.github/workflows/release.yml

@@ -26,48 +26,61 @@ To succesfully deploy the UI Toolkit using React, the following software must be
 - [Visual Studio Code](https://code.visualstudio.com/) or any other IDE of choice
 
 
-## Create a New React App
+## Quick Start
 
-The React app can be created in any preferred development directory. The MPS can continue to run while creating and running the app.
+```bash
+# Create a new React app with Vite
+npm create vite@latest my-app -- --template react-ts
+cd my-app
 
-1. In a Command Prompt or Terminal, go to your preferred development directory. 
+# Install UI Toolkit
+npm install @device-management-toolkit/ui-toolkit-react
 
-2. Run the following commands to create sample React app named `my-app`.
+# Start development server
+npm run dev
+```
 
-    ``` bash
-    npx create-react-app my-app && cd my-app
-    ```
+### Run the Example
 
-## Add UI Toolkit
+For quick testing, an example app is included. This requires a deployed MPS/RPS instance and an AMT device connected to it.
 
-1. Run the following command to add the UI Toolkit and install the required dependencies:
+```bash
+cd example
+npm install
+npm run dev
+```
 
-    ``` bash
-    npm install @device-management-toolkit/ui-toolkit-react
-    ```
 
-2. Run the following commands to start the web UI locally:
+## Development
 
-    ``` bash
-    npm start
-    ```
+To build and develop the library locally:
 
-3. By default, React apps run on port `3000`. If port `3000` is already used by the MPS server or any other application, you'll be prompted to use another port. If this happens, enter 'Y'.
+```bash
+# Clone the repository
+git clone https://github.com/device-management-toolkit/ui-toolkit-react.git
+cd ui-toolkit-react
 
-    Sample Output:
+# Install dependencies
+npm install
 
-    ```
-    You can now view my-app in the browser.
-    Local: http://localhost:3000
-    On Your Network: http://172.16.17.4:3000
-    ```
+# Run tests
+npm test
 
+# Run tests with coverage
+npm run test:coverage
+
+# Run linting
+npm run lint
+
+# Build the library
+npm run build
+```
 
 ## Additional Resources
 
 - For detailed documentation and Getting Started, [visit the docs site](https://device-management-toolkit.github.io/docs).
 
-- Looking to contribute? [Find more information here about contribution guidelines and practices](.\CONTRIBUTING.md).
+- Looking to contribute? [Find more information here about contribution guidelines and practices](./CONTRIBUTING.md).
 
 - Find a bug? Or have ideas for new features? [Open a new Issue](https://github.com/device-management-toolkit/ui-toolkit-react/issues).
 

README.md

@@ -0,0 +1,81 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import globals from 'globals'
+
+export default tseslint.config(
+  // Ignore patterns
+  {
+    ignores: ['dist/**', 'node_modules/**', 'coverage/**', 'example/**', '**/mocks/**']
+  },
+
+  // Base JavaScript recommended rules
+  js.configs.recommended,
+
+  // TypeScript recommended rules
+  ...tseslint.configs.recommended,
+
+  // React and TypeScript files configuration
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'jsx-a11y': jsxA11y
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.es2022
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      // React rules
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      'react/react-in-jsx-scope': 'off', // Not needed with React 17+ JSX transform
+      'react/prop-types': 'off', // Using TypeScript for prop validation
+
+      // React Hooks rules
+      ...reactHooks.configs.recommended.rules,
+      'react-hooks/set-state-in-effect': 'off', // Allow setState in effects for initialization patterns
+
+      // Accessibility rules
+      ...jsxA11y.configs.recommended.rules,
+
+      // TypeScript rules adjustments
+      '@typescript-eslint/no-unused-vars': ['error', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off'
+    }
+  },
+
+  // Test files - more relaxed rules
+  {
+    files: ['**/__tests__/**/*.{ts,tsx}', '**/*.test.{ts,tsx}', '**/__mocks__/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off'
+    }
+  }
+)

eslint.config.js

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Toolkit React - Test Application</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/[email protected]/css/xterm.min.css" />
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
+      .app-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+      .header { background: #1a1a2e; color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
+      .header h1 { margin-bottom: 10px; }
+      .config-panel { background: #f9f9f9; padding: 15px; border-radius: 4px; margin-bottom: 20px; }
+      .config-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
+      .config-panel input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+      .config-actions { display: flex; gap: 10px; align-items: center; }
+      .config-actions select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
+      .config-actions button { margin-left: auto; }
+      .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
+      .tab-button { padding: 10px 20px; border: none; background: #e0e0e0; cursor: pointer; border-radius: 4px; font-size: 14px; }
+      .tab-button.active, .tab-button:hover { background: #007bff; color: white; }
+      .component-container { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+      .btn-success { padding: 10px 30px; font-weight: bold; color: #fff; background: #28a745; border: none; border-radius: 4px; cursor: pointer; }
+      .btn-danger { padding: 10px 30px; font-weight: bold; color: #fff; background: #dc3545; border: none; border-radius: 4px; cursor: pointer; }
+      .btn-success:disabled, .btn-danger:disabled { background: #6c757d; cursor: not-allowed; }
+      .alert { margin-top: 10px; padding: 10px; border-radius: 4px; }
+      .alert-error { background: #f8d7da; color: #721c24; }
+      .alert-success { background: #d4edda; color: #155724; }
+      .placeholder { padding: 40px; text-align: center; color: #666; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>