Initialize repository with tree component

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,17 +4,17 @@ about: Create a report to help us improve.
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 <!-- Prior to creating a bug report, please review
-existing issues at https://github.com/eclipse-cdt-cloud/vscode-peripheral-inspector/issues
+existing issues at https://github.com/eclipse-cdt-cloud/vscode-ui-components/issues
 to avoid creating duplicates.
 -->
 
 Type: Bug Report
 
 **Describe the bug**
+
 - OS and Version:
 - VS Code Version:
 - Extension Version:
@@ -24,20 +24,25 @@ Type: Bug Report
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 **Expected behavior**
+
 <!-- A clear and concise description of what you expected to happen. -->
 
 **Code sample and logs**
+
 - Code sample
 - `launch.json`
 
 **Screenshots**
+
 <!-- If applicable, add screenshots to help explain your problem. -->
 
 **Additional context**
+
 <!-- Provide any other context about the problem. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,13 +4,12 @@ about: Suggest an idea for this extension.
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 Type: Feature Request
 
 <!-- Prior to creating a feature request, please review
-existing issues at https://github.com/eclipse-cdt-cloud/vscode-peripheral-inspector/issues
+existing issues at https://github.com/eclipse-cdt-cloud/vscode-ui-components/issues
 to avoid creating duplicates.
 -->
 

.github/workflows/ci.yml

@@ -16,15 +16,15 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 20.x
       - name: Build
         env:
           GITHUB_TOKEN: ${{github.token}}
         run: |
           yarn install --ignore-scripts
-          yarn build
+          yarn build

LICENSE

@@ -1,8 +1,11 @@
 Copyright 2024-2025 Arm Limited and EclipseSource
+
+MIT
+
 Copyright 2017-2023 Marcel Ball and Arm Limited
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,48 +1,29 @@
-# VSCode UI Components
+# UI Components for Visual Studio Code Extensions
 
-This is a VSCode components React library.
+This is a VS Code components React library.
 
 ## Project Structure
 
 ```
-src/  
-│── base/           # Shared functionality  
-│── vscode/         # VSCode specific functionality  
+src/
+│── base/           # Shared functionality
+│── vscode/         # VS Code specific functionality
 
-├── <component>/  
-│   ├── browser/    # React specific code  
-│   ├── common/     # Shared code between browser and VSCode  
-│   ├── vscode/     # VSCode integration (converters, webview providers, etc.)  
+├── <component>/
+│   ├── browser/    # React specific code
+│   ├── common/     # Shared code between browser and VS Code
+│   ├── vscode/     # VS Code integration (converters, webview providers, etc.)
 
-├── <component>/  
-│   ├── *.tsx       # Components without VSCode integration  
+├── <component>/
+│   ├── *.tsx       # Components without VS Code integration
 ```
 
 ## Installation
 
 `npm install @eclipse-cdt-cloud/vscode-ui-components`
 
-## Usage
-
-```ts
-// Webview
-import {
-    messenger,
-    CDTTree
-} from '@eclipse-cdt-cloud/vscode-ui-components/lib/browser';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-messenger.start();
-
-function App() {  
-  return <CDTTree {...} />;  
-}
-
-// Render the component
-const container = document.getElementById('root');
-if (!container) {
-    throw new Error('Root element not found');
-}
-createRoot(container).render(<App />);
-```
+## Components
+
+- [Tree](./src/tree/README.md): A component that combines tree structure functionality with table capabilities.
+
+For usage information, refer to the component's README.

eslint.config.mjs

@@ -1,8 +1,16 @@
-// @ts-check
+/**********************************************************************************
+ * Copyright (c) 2025 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License as outlined in the LICENSE file.
+ **********************************************************************************/
 
 import globals from 'globals';
 import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
+import header from 'eslint-plugin-header';
+
+header.rules.header.meta.schema = false;
 
 export default tseslint.config(
     {
@@ -52,9 +60,25 @@ export default tseslint.config(
             ],
 
             'no-trailing-spaces': ['error'],
-            'object-curly-spacing': ['error', 'always'],
-
-            // TypeScript specific rules
+            'object-curly-spacing': ['error', 'always']
+        }
+    },
+    {
+        name: 'typescript',
+        files: ['**/*.ts', '**/*.mts', '**/*.cts', '**/*.tsx'],
+        plugins: {
+            typescript: tseslint
+        },
+        rules: {
+            '@typescript-eslint/explicit-member-accessibility': [
+                'error',
+                {
+                    accessibility: 'explicit',
+                    overrides: {
+                        constructors: 'off'
+                    }
+                }
+            ],
             '@typescript-eslint/no-this-alias': 'off',
             '@typescript-eslint/no-namespace': 'off',
             '@typescript-eslint/no-unused-vars': [
@@ -64,5 +88,30 @@ export default tseslint.config(
                 }
             ]
         }
+    },
+    {
+        name: 'header',
+        files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.mjs', '**/*.cjs'],
+        plugins: {
+            header
+        },
+        rules: {
+            'header/header': [
+                2,
+                'block',
+                [
+                    {
+                        pattern: '[\n\r]+ \\* Copyright \\([cC]\\) \\d{4}(-\\d{4})? .*[\n\r]+',
+                        template: `*********************************************************************************
+* Copyright (c) ${new Date().getFullYear()} Company and others.
+*
+* This program and the accompanying materials are made available under the
+* terms of the MIT License as outlined in the LICENSE file.
+*********************************************************************************`
+                    }
+                ],
+                2
+            ]
+        }
     }
 );

package.json

@@ -1,26 +1,22 @@
 {
     "name": "@eclipse-cdt-cloud/vscode-ui-components",
-    "displayName": "VSCode UI Components",
-    "description": "VSCode UI Components for React",
     "version": "0.0.1",
-    "publisher": "eclipse-cdt",
-    "license": "MIT",
+    "description": "VS Code UI Components for React",
     "repository": "https://github.com/eclipse-cdt-cloud/vscode-ui-components",
+    "license": "MIT",
     "qna": "https://github.com/eclipse-cdt-cloud/vscode-ui-components/issues",
+    "publisher": "eclipse-cdt",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",
     "files": [
         "lib"
     ],
-    "engines": {
-        "node": ">=20"
-    },
     "scripts": {
-        "prepare": "yarn clean && yarn build",
-        "clean": "rimraf ./lib ./node_modules/.tmp",
         "build": "tsc && yarn lint",
-        "watch": "tsc -w",
-        "lint": "eslint ."
+        "clean": "rimraf ./lib ./node_modules/.tmp",
+        "lint": "eslint .",
+        "prepare": "yarn clean && yarn build",
+        "watch": "tsc -w"
     },
     "dependencies": {
         "@floating-ui/react": "^0.26.17",
@@ -46,16 +42,19 @@
         "@typescript-eslint/eslint-plugin": "^5.49.0",
         "@typescript-eslint/parser": "^5.49.0",
         "eslint": "^9.21.0",
+        "eslint-plugin-header": "^3.1.1",
         "globals": "^16.0.0",
         "prettier": "^3.5.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "prettier-plugin-packagejson": "^2.5.8",
+        "rimraf": "^6.0.1",
         "typescript": "^5.7.3",
-        "typescript-eslint": "^8.25.0",
-        "rimraf": "^6.0.1"
+        "typescript-eslint": "^8.25.0"
     },
     "peerDependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
+    },
+    "engines": {
+        "node": ">=20"
     }
 }

prettier.config.mjs

@@ -1,4 +1,9 @@
-// @ts-check
+/**********************************************************************************
+ * Copyright (c) 2025 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License as outlined in the LICENSE file.
+ **********************************************************************************/
 
 /**
  * @see https://prettier.io/docs/configuration
@@ -11,6 +16,15 @@ export default {
     trailingComma: 'none',
     endOfLine: 'lf',
     printWidth: 140,
-    tabWidth: 4
+    tabWidth: 4,
+    overrides: [
+        {
+            files: ['*.json', '*.yml'],
+            options: {
+                printWidth: 140,
+                tabWidth: 4
+            }
+        }
+    ],
+    plugins: ['prettier-plugin-packagejson']
 };
-

src/base/index.ts

@@ -1,8 +1,9 @@
 /********************************************************************************
- * Copyright (C) 2024 EclipseSource and others.
+ * Copyright (C) 2024-2025 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the MIT License as outlined in the LICENSE File
  ********************************************************************************/
 
 export * from './utils';
+export * from './style-utils';

src/base/style-utils.ts

@@ -0,0 +1,21 @@
+/**********************************************************************************
+ * Copyright (c) 2025 Company and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License as outlined in the LICENSE file.
+ **********************************************************************************/
+
+export function classNames(...classes: (string | Record<string, boolean>)[]): string {
+    return classes
+        .filter(c => c !== undefined)
+        .map(c => {
+            if (typeof c === 'string') {
+                return c;
+            }
+
+            return Object.entries(c)
+                .filter(([, value]) => value)
+                .map(([key]) => key);
+        })
+        .join(' ');
+}

src/base/utils.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (C) 2024 EclipseSource and others.
+ * Copyright (C) 2024-2025 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the MIT License as outlined in the LICENSE File
@@ -11,7 +11,7 @@
 export function findNestedValue<T>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     obj: Record<string, any>,
-    path: string | string[],
+    path: string | string[]
 ): T | undefined {
     const keys = Array.isArray(path) ? path : path.split('.');
     return keys.reduce((acc, key) => acc?.[key], obj) as T | undefined;
@@ -24,5 +24,5 @@ export function hasProperty<TKey extends object>(object: object, ...keys: (keyof
     return keys.every(key => key in object);
 }
 
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
-export type MaybePromise<T> = T | Promise<T>
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+export type MaybePromise<T> = T | Promise<T>;