Contact Elements

A collection of reusable React components for building contact management interfaces.

Installation

```bash npm install contact-elements

or

yarn add contact-elements ```

Components

ContactCard

A card component to display contact information.

```jsx import { ContactCard } from 'contact-elements';

function MyComponent() { // Option 1: Provide contact data directly const contact = { id: '1', name: 'John Doe', email: '[email protected]', phone: '555-123-4567', company: 'Acme Inc.', position: 'CEO' };

return ( <ContactCard userId="user123" contact={contact} onEdit={(contact) => console.log('Edit', contact)} onDelete={(id) => console.log('Delete', id)} onClick={(contact) => console.log('Clicked', contact)} /> );

// Option 2: Let the component fetch data return ( <ContactCard userId="user123" contactId="contact456" onEdit={(contact) => console.log('Edit', contact)} onDelete={(id) => console.log('Delete', id)} onClick={(contact) => console.log('Clicked', contact)} /> ); } ```

ContactForm

A form component for creating or editing contacts.

```jsx import { ContactForm } from 'contact-elements';

function MyComponent() { // Option 1: Handle form submission manually return ( <ContactForm userId="user123" initialData={{ name: 'John', email: '[email protected]' }} onSubmit={(data) => console.log('Submit', data)} onCancel={() => console.log('Cancel')} isLoading={false} /> );

// Option 2: Edit an existing contact with API return ( <ContactForm userId="user123" contactId="contact456" onSuccess={(contact) => console.log('Contact updated', contact)} onCancel={() => console.log('Cancel')} /> ); } ```

ContactList

A component to display a list of contacts.

```jsx import { ContactList } from 'contact-elements';

function MyComponent() { // Option 1: Provide contacts data directly const contacts = [ { id: '1', name: 'John Doe', email: '[email protected]' }, { id: '2', name: 'Jane Smith', email: '[email protected]' } ];

return ( <ContactList userId="user123" contacts={contacts} onContactClick={(contact) => console.log('Click', contact)} onContactEdit={(contact) => console.log('Edit', contact)} onContactDelete={(id) => console.log('Delete', id)} isLoading={false} emptyMessage="No contacts found" /> );

// Option 2: Let the component fetch data return ( <ContactList userId="user123" onContactClick={(contact) => console.log('Click', contact)} onContactEdit={(contact) => console.log('Edit', contact)} onContactDelete={(contact) => console.log('Delete', contact)} /> ); } ```

ContactDetails

A component to display detailed information about a contact.

```jsx import { ContactDetails } from 'contact-elements';

function MyComponent() { // Option 1: Provide contact data directly const contact = { id: '1', name: 'John Doe', email: '[email protected]', phone: '555-123-4567', company: 'Acme Inc.', position: 'CEO', notes: 'Met at conference in June.' };

return ( <ContactDetails userId="user123" contactId="1" contact={contact} onEdit={(contact) => console.log('Edit', contact)} onDelete={(id) => console.log('Delete', id)} onBack={() => console.log('Back')} /> );

// Option 2: Let the component fetch data return ( <ContactDetails userId="user123" contactId="1" onEdit={(contact) => console.log('Edit', contact)} onDelete={(id) => console.log('Delete', id)} onBack={() => console.log('Back')} /> ); } ```

ContactSearch

A search component for filtering contacts.

```jsx import { ContactSearch } from 'contact-elements';

function MyComponent() { return ( <ContactSearch onSearch={(query) => console.log('Search', query)} placeholder="Find contacts..." initialValue="" /> ); } ```

API

The package includes a built-in API client for contact operations:

```jsx import { ContactsApi, contactsApi } from 'contact-elements';

// Use the default instance async function fetchContacts() { const contacts = await contactsApi.getContacts('user123'); console.log(contacts); }

// Or create a custom instance with options const api = new ContactsApi({ baseUrl: 'https://api.example.com' }); async function createContact() { const newContact = await api.createContact('user123', { name: 'John Doe', email: '[email protected]' }); console.log(newContact); } ```

Types

The package exports TypeScript types for all components:

```typescript import type { Contact, ContactCardProps, ContactFormProps, ContactListProps, ContactDetailsProps, ContactSearchProps, ApiOptions } from 'contact-elements'; ```

Development

This package is built with Vite and TypeScript. See BUILDING.md for more information on building and developing the package.

License

MIT