lerelais-front-library 0.1.0

package/src/components/DataFiltersToolbar/DataFiltersToolbar.tsx

@@ -0,0 +1,22 @@
+import type { InputHTMLAttributes } from 'react';
+import { CoreButton } from '@/components/CoreButton';
+import styles from './DataFiltersToolbar.module.css';
+
+export interface DataFiltersToolbarProps extends InputHTMLAttributes<HTMLInputElement> {
+  onFilters?: () => void;
+}
+
+export function DataFiltersToolbar({
+  placeholder = 'Rechercher par nom, email ou téléphone…',
+  onFilters,
+  ...props
+}: DataFiltersToolbarProps) {
+  return (
+    <form className={styles.toolbar} role="search">
+      <input className={styles.input} type="search" placeholder={placeholder} {...props} />
+      <CoreButton variant="filter" onClick={onFilters}>
+        Filtres
+      </CoreButton>
+    </form>
+  );
+}

package/src/components/DataFiltersToolbar/index.ts

@@ -0,0 +1 @@
+export { DataFiltersToolbar, type DataFiltersToolbarProps } from './DataFiltersToolbar';

package/src/components/DataSearchBar/DataSearchBar.module.css

@@ -0,0 +1,28 @@
+.bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 900px;
+  height: 72px;
+  padding: 0 17px;
+  overflow: hidden;
+  border: 1px solid #e5e8ed;
+  border-radius: 16px;
+  background: #fff;
+}
+
+.input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: #191d26;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: normal;
+  outline: none;
+}
+
+.input::placeholder {
+  color: #606978;
+}

package/src/components/DataSearchBar/DataSearchBar.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DataSearchBar } from './DataSearchBar';
+
+describe('<DataSearchBar>', () => {
+  it('should accept a search query', async () => {
+    const user = userEvent.setup();
+    render(<DataSearchBar aria-label="Recherche utilisateurs" />);
+
+    const field = screen.getByRole('searchbox', { name: 'Recherche utilisateurs' });
+    await user.type(field, 'Awa');
+
+    expect(field).toHaveValue('Awa');
+  });
+});

package/src/components/DataSearchBar/DataSearchBar.tsx

@@ -0,0 +1,15 @@
+import type { InputHTMLAttributes } from 'react';
+import styles from './DataSearchBar.module.css';
+
+export interface DataSearchBarProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export function DataSearchBar({
+  placeholder = 'Rechercher par nom, email ou téléphone…',
+  ...props
+}: DataSearchBarProps) {
+  return (
+    <form className={styles.bar} role="search">
+      <input className={styles.input} type="search" placeholder={placeholder} {...props} />
+    </form>
+  );
+}

package/src/components/DataSearchBar/index.ts

@@ -0,0 +1 @@
+export { DataSearchBar, type DataSearchBarProps } from './DataSearchBar';

package/src/components/DataTable/DataTable.module.css

@@ -0,0 +1,57 @@
+.card {
+  width: 100%;
+  max-width: 1098px;
+  padding: 19px;
+  overflow: hidden;
+  border: 1px solid #e5e8ed;
+  border-radius: 18px;
+  background: #fff;
+}
+
+.title {
+  margin: 0 0 21px;
+  color: #191d26;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.header,
+.row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 10px;
+}
+
+.header {
+  height: 38px;
+  background: #f9fafc;
+  color: #606978;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.row {
+  height: 46px;
+  background: #fff;
+  color: #606978;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.striped {
+  background: #f9fafc;
+}
+
+.name {
+  color: #191d26;
+  font-weight: 600;
+}

package/src/components/DataTable/DataTable.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { DataTable } from './DataTable';
+
+describe('<DataTable>', () => {
+  it('should list the users', () => {
+    render(<DataTable />);
+
+    expect(screen.getByRole('heading', { name: 'Utilisateurs' })).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: 'Awa Koné' })).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: 'Suspendu' })).toBeInTheDocument();
+  });
+});

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/cn';
+import styles from './DataTable.module.css';
+
+export interface DataTableColumn {
+  key: string;
+  label: string;
+}
+
+export interface DataTableRowData {
+  id: string;
+  cells: Record<string, string>;
+}
+
+export interface DataTableProps {
+  title?: string;
+  columns?: DataTableColumn[];
+  rows?: DataTableRowData[];
+}
+
+const DEFAULT_COLUMNS: DataTableColumn[] = [
+  { key: 'user', label: 'Utilisateur' },
+  { key: 'contact', label: 'Contact' },
+  { key: 'city', label: 'Ville' },
+  { key: 'parcels', label: 'Colis' },
+  { key: 'status', label: 'Statut' },
+];
+
+const DEFAULT_ROWS: DataTableRowData[] = [
+  { id: 'awa', cells: { user: 'Awa Koné', contact: 'awa@exemple.ci', city: 'Cocody', parcels: '18', status: 'Actif' } },
+  { id: 'yann', cells: { user: 'Yann Kouassi', contact: 'yann@exemple.ci', city: 'Yopougon', parcels: '7', status: 'Actif' } },
+  { id: 'marie', cells: { user: 'Marie N’Guessan', contact: 'marie@exemple.ci', city: 'Marcory', parcels: '31', status: 'Vérifié' } },
+  { id: 'serge', cells: { user: 'Serge Koffi', contact: 'serge@exemple.ci', city: 'Abobo', parcels: '2', status: 'À vérifier' } },
+  { id: 'nadia', cells: { user: 'Nadia Touré', contact: 'nadia@exemple.ci', city: 'Bouaké', parcels: '13', status: 'Actif' } },
+  { id: 'kevin', cells: { user: 'Kevin Yao', contact: 'kevin@exemple.ci', city: 'Plateau', parcels: '0', status: 'Suspendu' } },
+  { id: 'fatou', cells: { user: 'Fatou Diarra', contact: 'fatou@exemple.ci', city: 'Treichville', parcels: '22', status: 'Actif' } },
+  { id: 'eric', cells: { user: 'Eric Bamba', contact: 'eric@exemple.ci', city: 'Cocody', parcels: '9', status: 'Actif' } },
+];
+
+export function DataTable({
+  title = 'Utilisateurs',
+  columns = DEFAULT_COLUMNS,
+  rows = DEFAULT_ROWS,
+}: DataTableProps) {
+  return (
+    <section className={styles.card} aria-label={title}>
+      <h3 className={styles.title}>{title}</h3>
+      <div className={styles.table} role="table">
+        <div className={styles.header} role="row">
+          {columns.map((column) => (
+            <span key={column.key} role="columnheader">
+              {column.label}
+            </span>
+          ))}
+        </div>
+        {rows.map((row, index) => (
+          <div key={row.id} className={cn(styles.row, index % 2 === 1 && styles.striped)} role="row">
+            {columns.map((column, columnIndex) => (
+              <span key={column.key} className={columnIndex === 0 ? styles.name : undefined} role="cell">
+                {row.cells[column.key]}
+              </span>
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1 @@
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTableRowData } from './DataTable';

package/src/components/Divider/Divider.module.css

@@ -0,0 +1,29 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.caption {
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.line {
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.label {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { Divider } from './Divider';
+
+describe('<Divider>', () => {
+  it('should render a labelled divider', () => {
+    render(<Divider label="ou" caption="Avec label central" />);
+    expect(screen.getByText('ou')).toBeInTheDocument();
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/cn';
+import styles from './Divider.module.css';
+
+export interface DividerProps {
+  label?: string;
+  caption?: string;
+  className?: string;
+}
+
+export function Divider({ label, caption, className }: DividerProps) {
+  return (
+    <div className={cn(styles.wrap, className)}>
+      {caption ? <p className={styles.caption}>{caption}</p> : null}
+      <div className={styles.row}>
+        <span className={styles.line} />
+        {label ? <span className={styles.label}>{label}</span> : null}
+        {label ? <span className={styles.line} /> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/src/components/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,45 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  padding: 6px 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-control);
+  background: #fff;
+  box-shadow: var(--shadow-menu);
+}
+
+.slot {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.item:hover {
+  background: var(--color-surface-muted);
+}
+
+.danger {
+  color: var(--color-primary);
+}
+
+.separator {
+  height: 1px;
+  margin: 4px 12px;
+  background: var(--color-divider);
+}

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DropdownMenu } from './DropdownMenu';
+
+describe('<DropdownMenu>', () => {
+  it('should render the menu items', () => {
+    render(<DropdownMenu />);
+    expect(screen.getByRole('menuitem', { name: 'Mon profil' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Déconnexion' })).toBeInTheDocument();
+  });
+
+  it('should call onSelect with the item id', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<DropdownMenu onSelect={onSelect} />);
+
+    await user.click(screen.getByRole('menuitem', { name: 'Paramètres' }));
+
+    expect(onSelect).toHaveBeenCalledWith('settings');
+  });
+});

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,45 @@
+import { cn } from '@/lib/cn';
+import { Icon, type IconProps } from '@/components/Icon';
+import styles from './DropdownMenu.module.css';
+
+export interface DropdownItem {
+  id: string;
+  label: string;
+  icon: IconProps['name'];
+  danger?: boolean;
+  separated?: boolean;
+}
+
+export interface DropdownMenuProps {
+  items?: DropdownItem[];
+  onSelect?: (id: string) => void;
+  className?: string;
+}
+
+const DEFAULT_ITEMS: DropdownItem[] = [
+  { id: 'profile', label: 'Mon profil', icon: 'user' },
+  { id: 'settings', label: 'Paramètres', icon: 'settings' },
+  { id: 'notifications', label: 'Notifications', icon: 'bell' },
+  { id: 'logout', label: 'Déconnexion', icon: 'logout', danger: true, separated: true },
+];
+
+export function DropdownMenu({ items = DEFAULT_ITEMS, onSelect, className }: DropdownMenuProps) {
+  return (
+    <div className={cn(styles.menu, className)} role="menu">
+      {items.map((item) => (
+        <span key={item.id} className={styles.slot}>
+          {item.separated ? <span className={styles.separator} /> : null}
+          <button
+            type="button"
+            role="menuitem"
+            className={cn(styles.item, item.danger && styles.danger)}
+            onClick={() => onSelect?.(item.id)}
+          >
+            <Icon name={item.icon} size={16} />
+            {item.label}
+          </button>
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/components/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export { DropdownMenu, type DropdownMenuProps, type DropdownItem } from './DropdownMenu';

package/src/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,52 @@
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 420px;
+  max-width: 100%;
+  padding: 40px 40px 36px;
+  border: 1px dashed var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-empty);
+  text-align: center;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  margin-bottom: 20px;
+  border-radius: 36px;
+  background: var(--color-primary-wash);
+}
+
+.title {
+  margin: 0 0 8px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.description {
+  margin: 0 0 24px;
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  line-height: 21px;
+  white-space: pre-line;
+}
+
+.action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { EmptyState } from './EmptyState';
+
+describe('<EmptyState>', () => {
+  it('should render the empty message', () => {
+    render(<EmptyState title="Aucun colis" description="Les nouveaux colis apparaîtront ici." />);
+    expect(screen.getByRole('heading', { name: 'Aucun colis' })).toBeInTheDocument();
+  });
+
+  it('should call onAction when the call to action is activated', async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    render(<EmptyState title="Aucun colis" description="Commencez." onAction={onAction} />);
+
+    await user.click(screen.getByRole('button', { name: 'Envoyer un colis' }));
+
+    expect(onAction).toHaveBeenCalledOnce();
+  });
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './EmptyState.module.css';
+
+export interface EmptyStateProps {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  className?: string;
+}
+
+export function EmptyState({
+  title,
+  description,
+  actionLabel = 'Envoyer un colis',
+  onAction,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div className={cn(styles.empty, className)}>
+      <span className={styles.icon}>
+        <Icon name="package" size={32} />
+      </span>
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.description}>{description}</p>
+      <button type="button" className={styles.action} onClick={onAction}>
+        <Icon name="plus" size={16} />
+        {actionLabel}
+      </button>
+    </div>
+  );
+}

package/src/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export { EmptyState, type EmptyStateProps } from './EmptyState';

package/src/components/FaqItem/FaqItem.module.css

@@ -0,0 +1,47 @@
+.item {
+  width: 100%;
+  max-width: 648px;
+  overflow: hidden;
+  border: 1px solid #e8eaee;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 4%);
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  background: transparent;
+  color: #191d26;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-align: left;
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  background: #fdf4f6;
+}
+
+.open img {
+  transform: rotate(180deg);
+}
+
+.answer {
+  margin: 0;
+  padding: 0 16px 16px;
+  color: #606978;
+  font-size: 14px;
+  line-height: 1.4;
+}

package/src/components/FaqItem/FaqItem.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FaqItem } from './FaqItem';
+
+describe('<FaqItem>', () => {
+  it('should reveal the answer', async () => {
+    const user = userEvent.setup();
+    render(<FaqItem />);
+
+    expect(screen.queryByText(/Indiquez le destinataire/)).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Comment envoyer un colis ?' }));
+    expect(screen.getByText(/Indiquez le destinataire/)).toBeInTheDocument();
+  });
+});

package/src/components/FaqItem/FaqItem.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import chevron from '@/assets/icons/core-chevron.svg';
+import { cn } from '@/lib/cn';
+import styles from './FaqItem.module.css';
+
+export interface FaqItemProps {
+  question?: string;
+  answer?: string;
+}
+
+export function FaqItem({
+  question = 'Comment envoyer un colis ?',
+  answer = 'Indiquez le destinataire, le poids et le point relais, puis confirmez l’envoi.',
+}: FaqItemProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={styles.item}>
+      <button type="button" className={styles.trigger} aria-expanded={open} onClick={() => setOpen((value) => !value)}>
+        {question}
+        <span className={cn(styles.icon, open && styles.open)}>
+          <img src={chevron} alt="" width={16} height={16} />
+        </span>
+      </button>
+      {open ? <p className={styles.answer}>{answer}</p> : null}
+    </div>
+  );
+}

package/src/components/FaqItem/index.ts

@@ -0,0 +1 @@
+export { FaqItem, type FaqItemProps } from './FaqItem';