contacts-pane/README.md

Contacts Pane: Contacts manager for Address Book, Groups, and Individuals.

# contacts-pane

SolidOS pane that displays a personal contact and address books.

![CI](https://github.com/SolidOS/contacts-pane/workflows/CI/badge.svg)

## Contribute

### Tech stack

- JavaScript
- Jest
- Eslint
- SolidOS

### Tests

To run all tests:
```shell script
npm test
```

If you are a first time developer/user on Windows 10, the repository may give package issues regarding webpack or jest.
If this is the case, simply run "npm audit fix" and upgrade the repository. It should work fine.

#### Unit tests

Unit tests use `jest` and are placed in the `test` folder.

Accessibility is verified via `axe-core`/`jest-axe` – new tests extend the setup and will check rendered components for a11y violations.

### Dev Server

Start a webpack dev server:

```shell script
npm start
```

Visit `http://localhost:8080/` to render the pane. Adjust `const webIdToShow` in `./dev/index.ts` to show a different profile.
 
### Build

```
npm run build
```

### Generative AI usage
The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. 
We have added comments in the code to make it explicit which parts are 100% written by AI.
Example: 
* Some code was generated by the Raptor mini and Claude Opus 4.6 model in GitHub Copilot based on the following prompt:
* Regarding accessibility, how should I replace alert()/confirm() with accessible modal dialogs?
* Let us implement the modals in the localUtils.js.
* Add accessibility tests based on axe-core dependency.