Feature - Widget for people Searching input box

README.md

@@ -318,6 +318,27 @@ import { SignupButton } from 'solid-ui/components/signup-button'
 <solid-ui-signup-button label="Get a Pod" signup-url="https://solidproject.org/get_a_pod" icon="https://example.com/icon.svg"></solid-ui-signup-button>
 ```
 
+### solid-ui-people-search
+
+A standalone people-search component built on top of `<solid-ui-combobox>`. It discovers people from the authenticated user's FOAF graph, linked address books, and the Solid catalog, then emits `person-select` with the selected person's details.
+
+**Subpath exports:** `solid-ui/components/forms/people-search`, `solid-ui/components/people-search`
+
+```typescript
+import { PeopleSearch } from 'solid-ui/components/forms/people-search'
+```
+
+```html
+<solid-ui-people-search></solid-ui-people-search>
+```
+
+```typescript
+const peopleSearch = document.querySelector('solid-ui-people-search') as PeopleSearch
+peopleSearch.addEventListener('person-select', (event: CustomEvent) => {
+  console.log(event.detail.person)
+})
+```
+
 ### Component build pipeline
 
 Web components use a two-stage build to produce a clean public runtime layout while keeping internal TypeScript artifacts separate:

__mocks__/contacts-rdflib.ts

@@ -0,0 +1,32 @@
+type AddressBookContact = {
+  uri: string
+  name: string
+}
+
+type AddressBook = {
+  contacts: AddressBookContact[]
+}
+
+type AddressBookList = {
+  publicUris: string[]
+  privateUris: string[]
+}
+
+export default class ContactsModuleRdfLib {
+  constructor (_options: unknown) {}
+
+  async listAddressBooks (_webId: string): Promise<AddressBookList> {
+    return {
+      publicUris: [],
+      privateUris: []
+    }
+  }
+
+  async readAddressBook (_addressBookUri: string): Promise<AddressBook> {
+    return {
+      contacts: []
+    }
+  }
+}
+
+export type { AddressBook }

jest.config.mjs

@@ -13,10 +13,11 @@ export default {
   transformIgnorePatterns: [
     '<rootDir>/node_modules/(?!(lit|lit-html|lit-element|@lit|@lit-labs|@lit-labs/ssr-dom-shim|@lit/reactive-element|@noble/curves|@noble/hashes|@exodus/bytes|uuid|jsdom|parse5|@asamuzakjp/css-color|@csstools)/)',
   ],
-  setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   moduleNameMapper: {
+    '^@solid-data-modules/contacts-rdflib$': '<rootDir>/__mocks__/contacts-rdflib.ts',
     '^.+\\.css$': '<rootDir>/__mocks__/styleMock.js'
   },
+  setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
   roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],
 }