lerelais-front-library 0.1.0

package/src/components/NotificationRow/index.ts

@@ -0,0 +1 @@
+export { NotificationRow, type NotificationRowProps } from './NotificationRow';

package/src/components/OutcomeModal/OutcomeModal.module.css

@@ -0,0 +1,101 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+  max-width: 480px;
+  padding: 32px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 16px rgb(16 24 40 / 15%);
+}
+
+.successOuter,
+.errorOuter {
+  display: grid;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+}
+
+.successOuter {
+  background: #e6f7f0;
+}
+
+.errorOuter {
+  background: #fee2e2;
+}
+
+.successInner,
+.errorInner {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+}
+
+.successInner {
+  background: #10b981;
+}
+
+.errorInner {
+  background: #ef4444;
+}
+
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  text-align: center;
+}
+
+.copy h3 {
+  margin: 0;
+  color: #191d26;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.copy p {
+  margin: 0;
+  color: #606978;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+.close,
+.cancel,
+.retry {
+  flex: 1;
+  padding: 14px 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.close,
+.retry {
+  border: 0;
+  background: #d34860;
+  color: #fff;
+}
+
+.cancel {
+  border: 1px solid #d0d5dd;
+  background: #fff;
+  color: #191d26;
+}

package/src/components/OutcomeModal/OutcomeModal.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { OutcomeModal } from './OutcomeModal';
+
+describe('<OutcomeModal>', () => {
+  it('should retry from the error state', async () => {
+    const user = userEvent.setup();
+    const onRetry = vi.fn();
+    render(<OutcomeModal type="error" onRetry={onRetry} />);
+
+    await user.click(screen.getByRole('button', { name: 'Réessayer' }));
+
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});

package/src/components/OutcomeModal/OutcomeModal.tsx

@@ -0,0 +1,45 @@
+import check from '@/assets/icons/core-check-white.svg';
+import close from '@/assets/icons/core-x.svg';
+import styles from './OutcomeModal.module.css';
+
+export interface OutcomeModalProps {
+  type?: 'success' | 'error';
+  title?: string;
+  description?: string;
+  onClose?: () => void;
+  onRetry?: () => void;
+}
+
+export function OutcomeModal({
+  type = 'success',
+  title = 'Candidature envoyée avec succès !',
+  description = 'Votre candidature a bien été transmise à notre équipe. Nous reviendrons vers vous par email sous 48 heures.',
+  onClose,
+  onRetry,
+}: OutcomeModalProps) {
+  const isError = type === 'error';
+
+  return (
+    <div className={styles.modal} role="dialog" aria-labelledby="outcome-title">
+      <span className={isError ? styles.errorOuter : styles.successOuter}>
+        <span className={isError ? styles.errorInner : styles.successInner}>
+          <img src={isError ? close : check} alt="" width={isError ? 16 : 20} height={isError ? 16 : 20} />
+        </span>
+      </span>
+      <div className={styles.copy}>
+        <h3 id="outcome-title">{title}</h3>
+        <p>{description}</p>
+      </div>
+      <div className={styles.actions}>
+        <button type="button" className={isError ? styles.cancel : styles.close} onClick={onClose}>
+          Fermer
+        </button>
+        {isError ? (
+          <button type="button" className={styles.retry} onClick={onRetry}>
+            Réessayer
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/OutcomeModal/index.ts

@@ -0,0 +1 @@
+export { OutcomeModal, type OutcomeModalProps } from './OutcomeModal';

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,27 @@
+.nav {
+  display: flex;
+  gap: 8px;
+}
+
+.button {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+  color: var(--color-text);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.current {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: #fff;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  color: var(--color-disabled);
+}

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Pagination } from './Pagination';
+
+function Harness() {
+  const [page, setPage] = useState(1);
+  return <Pagination page={page} pageCount={3} onChange={setPage} />;
+}
+
+describe('<Pagination>', () => {
+  it('should mark the current page', () => {
+    render(<Harness />);
+    expect(screen.getByRole('button', { current: 'page' })).toHaveTextContent('1');
+  });
+
+  it('should move to the next page', async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+
+    await user.click(screen.getByRole('button', { name: 'Page suivante' }));
+
+    expect(screen.getByRole('button', { current: 'page' })).toHaveTextContent('2');
+  });
+});

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/cn';
+import styles from './Pagination.module.css';
+
+export interface PaginationProps {
+  page: number;
+  pageCount: number;
+  onChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, pageCount, onChange, className }: PaginationProps) {
+  const pages = Array.from({ length: pageCount }, (_, index) => index + 1);
+
+  return (
+    <nav className={cn(styles.nav, className)} aria-label="Pagination">
+      <button type="button" className={styles.button} aria-label="Page précédente" disabled={page <= 1} onClick={() => onChange(page - 1)}>
+        ←
+      </button>
+      {pages.map((number) => (
+        <button
+          key={number}
+          type="button"
+          className={cn(styles.button, number === page && styles.current)}
+          aria-current={number === page ? 'page' : undefined}
+          onClick={() => onChange(number)}
+        >
+          {number}
+        </button>
+      ))}
+      <button
+        type="button"
+        className={styles.button}
+        aria-label="Page suivante"
+        disabled={page >= pageCount}
+        onClick={() => onChange(page + 1)}
+      >
+        →
+      </button>
+    </nav>
+  );
+}

package/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination, type PaginationProps } from './Pagination';

package/src/components/ParcelCard/ParcelCard.module.css

@@ -0,0 +1,34 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 410px;
+  max-width: 100%;
+  padding: 16px 18px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  background: #fff;
+}
+
+.id {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.route {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.recipient {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+.status {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-info);
+}

package/src/components/ParcelCard/ParcelCard.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { ParcelCard } from './ParcelCard';
+
+describe('<ParcelCard>', () => {
+  it('should render the tracking details', () => {
+    render(
+      <ParcelCard
+        trackingId="LR-2026-084215"
+        route="Abidjan → Bouaké"
+        recipient="Destinataire · Aminata K."
+        status="En transit"
+      />,
+    );
+    expect(screen.getByText('Abidjan → Bouaké')).toBeInTheDocument();
+    expect(screen.getByText('En transit')).toBeInTheDocument();
+  });
+});

package/src/components/ParcelCard/ParcelCard.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/cn';
+import styles from './ParcelCard.module.css';
+
+export interface ParcelCardProps {
+  trackingId: string;
+  route: string;
+  recipient: string;
+  status: string;
+  className?: string;
+}
+
+export function ParcelCard({ trackingId, route, recipient, status, className }: ParcelCardProps) {
+  return (
+    <article className={cn(styles.card, className)}>
+      <p className={styles.id}>{trackingId}</p>
+      <p className={styles.route}>{route}</p>
+      <p className={styles.recipient}>{recipient}</p>
+      <p className={styles.status}>{status}</p>
+    </article>
+  );
+}

package/src/components/ParcelCard/index.ts

@@ -0,0 +1 @@
+export { ParcelCard, type ParcelCardProps } from './ParcelCard';

package/src/components/ParcelRow/ParcelRow.module.css

@@ -0,0 +1,25 @@
+.row {
+  display: grid;
+  grid-template-columns: 170px 190px 160px 150px 180px;
+  align-items: center;
+  width: 100%;
+  height: 58px;
+  padding: 0 16px;
+  border: 1px solid var(--color-border);
+  background: #fff;
+  font-size: 11px;
+  color: var(--color-text);
+}
+
+.id {
+  color: var(--color-primary);
+}
+
+.status {
+  font-weight: 600;
+  color: var(--color-info);
+}
+
+.muted {
+  color: var(--color-text-secondary);
+}

package/src/components/ParcelRow/ParcelRow.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { ParcelRow } from './ParcelRow';
+
+describe('<ParcelRow>', () => {
+  it('should render the parcel cells', () => {
+    render(
+      <ParcelRow
+        trackingId="LR-084215"
+        recipient="Aminata K."
+        location="Cocody"
+        status="En transit"
+        date="20 août 2026"
+      />,
+    );
+    expect(screen.getByText('LR-084215')).toBeInTheDocument();
+    expect(screen.getByText('Aminata K.')).toBeInTheDocument();
+  });
+});

package/src/components/ParcelRow/ParcelRow.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/cn';
+import styles from './ParcelRow.module.css';
+
+export interface ParcelRowProps {
+  trackingId: string;
+  recipient: string;
+  location: string;
+  status: string;
+  date: string;
+  className?: string;
+}
+
+export function ParcelRow({ trackingId, recipient, location, status, date, className }: ParcelRowProps) {
+  return (
+    <div className={cn(styles.row, className)} role="row">
+      <span className={styles.id} role="cell">
+        {trackingId}
+      </span>
+      <span role="cell">{recipient}</span>
+      <span className={styles.muted} role="cell">
+        {location}
+      </span>
+      <span className={styles.status} role="cell">
+        {status}
+      </span>
+      <span className={styles.muted} role="cell">
+        {date}
+      </span>
+    </div>
+  );
+}

package/src/components/ParcelRow/index.ts

@@ -0,0 +1 @@
+export { ParcelRow, type ParcelRowProps } from './ParcelRow';

package/src/components/ParcelTimeline/ParcelTimeline.module.css

@@ -0,0 +1,68 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 520px;
+  max-width: 100%;
+  padding: 20px 22px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: #fff;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.event {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 54px;
+}
+
+.dot {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  background: var(--color-surface-muted);
+  flex-shrink: 0;
+}
+
+.done {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.eventTitle,
+.time {
+  display: block;
+}
+
+.eventTitle {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.upcoming {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.time {
+  margin-top: 3px;
+  font-size: 10px;
+  color: var(--color-text-secondary);
+}

package/src/components/ParcelTimeline/ParcelTimeline.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { ParcelTimeline } from './ParcelTimeline';
+
+describe('<ParcelTimeline>', () => {
+  it('should render the tracking events', () => {
+    render(
+      <ParcelTimeline
+        events={[
+          { title: 'Colis créé', time: '18 août · 09:12', done: true },
+          { title: 'Disponible au relais', time: 'À venir' },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Suivi du colis' })).toBeInTheDocument();
+    expect(screen.getByText('Colis créé')).toBeInTheDocument();
+  });
+});

package/src/components/ParcelTimeline/ParcelTimeline.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/cn';
+import styles from './ParcelTimeline.module.css';
+
+export interface TimelineEvent {
+  title: string;
+  time: string;
+  done?: boolean;
+}
+
+export interface ParcelTimelineProps {
+  title?: string;
+  events: TimelineEvent[];
+  className?: string;
+}
+
+export function ParcelTimeline({ title = 'Suivi du colis', events, className }: ParcelTimelineProps) {
+  return (
+    <section className={cn(styles.card, className)}>
+      <h2 className={styles.title}>{title}</h2>
+      <ol className={styles.list}>
+        {events.map((event) => (
+          <li key={event.title} className={styles.event}>
+            <span className={cn(styles.dot, event.done && styles.done)} aria-hidden="true" />
+            <span>
+              <span className={cn(styles.eventTitle, !event.done && styles.upcoming)}>{event.title}</span>
+              <span className={styles.time}>{event.time}</span>
+            </span>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

package/src/components/ParcelTimeline/index.ts

@@ -0,0 +1 @@
+export { ParcelTimeline, type ParcelTimelineProps, type TimelineEvent } from './ParcelTimeline';

package/src/components/PhotoUpload/PhotoUpload.module.css

@@ -0,0 +1,39 @@
+.zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 696px;
+  height: 180px;
+  padding: 24px;
+  border: 1px dashed #d34860;
+  border-radius: 12px;
+  background: #f9fafb;
+  cursor: pointer;
+  text-align: center;
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.title {
+  color: #191d26;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.hint {
+  max-width: 420px;
+  color: #606978;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.4;
+}

package/src/components/PhotoUpload/PhotoUpload.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PhotoUpload } from './PhotoUpload';
+
+describe('<PhotoUpload>', () => {
+  it('should report the selected file', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<PhotoUpload onSelect={onSelect} />);
+
+    const file = new File(['photo'], 'colis.png', { type: 'image/png' });
+    await user.upload(screen.getByLabelText(/Prendre une photo ou importer/i), file);
+
+    expect(onSelect).toHaveBeenCalledWith(file);
+  });
+});

package/src/components/PhotoUpload/PhotoUpload.tsx

@@ -0,0 +1,29 @@
+import type { ChangeEvent } from 'react';
+import camera from '@/assets/icons/core-camera.svg';
+import styles from './PhotoUpload.module.css';
+
+export interface PhotoUploadProps {
+  title?: string;
+  hint?: string;
+  onSelect?: (file: File) => void;
+}
+
+export function PhotoUpload({
+  title = 'Prendre une photo ou importer',
+  hint = 'Une photo du colis peut aider à vérifier le contenu et la préparation.',
+  onSelect,
+}: PhotoUploadProps) {
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (file) onSelect?.(file);
+  }
+
+  return (
+    <label className={styles.zone}>
+      <input className={styles.input} type="file" accept="image/*" onChange={handleChange} />
+      <img src={camera} alt="" width={24} height={24} />
+      <span className={styles.title}>{title}</span>
+      <span className={styles.hint}>{hint}</span>
+    </label>
+  );
+}

package/src/components/PhotoUpload/index.ts

@@ -0,0 +1 @@
+export { PhotoUpload, type PhotoUploadProps } from './PhotoUpload';

package/src/components/ProcessBadge/ProcessBadge.module.css

@@ -0,0 +1,29 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.pending {
+  border-color: #fde68a;
+  background: #fef3c7;
+  color: #f59e0b;
+}
+
+.success {
+  border-color: #6ee7b7;
+  background: #d1fae5;
+  color: #059669;
+}
+
+.error {
+  border-color: #fca5a5;
+  background: #fee2e2;
+  color: #dc2626;
+}

package/src/components/ProcessBadge/ProcessBadge.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { ProcessBadge } from './ProcessBadge';
+
+describe('<ProcessBadge>', () => {
+  it('should render the pending label', () => {
+    render(<ProcessBadge />);
+    expect(screen.getByText('En cours de traitement')).toBeInTheDocument();
+  });
+});