lerelais-front-library 0.1.0

package/src/components/ProcessBadge/ProcessBadge.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/cn';
+import styles from './ProcessBadge.module.css';
+
+export type ProcessBadgeState = 'pending' | 'success' | 'error';
+
+const LABELS: Record<ProcessBadgeState, string> = {
+  pending: 'En cours de traitement',
+  success: 'En cours de traitement',
+  error: 'En cours de traitement',
+};
+
+export interface ProcessBadgeProps {
+  state?: ProcessBadgeState;
+  label?: string;
+}
+
+export function ProcessBadge({ state = 'pending', label }: ProcessBadgeProps) {
+  return <span className={cn(styles.badge, styles[state])}>{label ?? LABELS[state]}</span>;
+}

package/src/components/ProcessBadge/index.ts

@@ -0,0 +1 @@
+export { ProcessBadge, type ProcessBadgeProps, type ProcessBadgeState } from './ProcessBadge';

package/src/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,56 @@
+.progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.label {
+  font-weight: 600;
+}
+
+.value {
+  font-weight: 700;
+}
+
+.active {
+  color: var(--color-primary);
+}
+
+.done {
+  color: var(--color-success);
+}
+
+.idle {
+  color: var(--color-text-secondary);
+}
+
+.track {
+  height: 8px;
+  width: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-sunken);
+  overflow: hidden;
+}
+
+.fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: transparent;
+}
+
+.fill.active {
+  background: var(--color-primary);
+}
+
+.fill.done {
+  background: var(--color-success);
+}

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { ProgressBar } from './ProgressBar';
+
+describe('<ProgressBar>', () => {
+  it('should render the label and the percentage', () => {
+    render(<ProgressBar label="En cours de traitement" value={65} />);
+    expect(screen.getByText('En cours de traitement')).toBeInTheDocument();
+    expect(screen.getByText('65%')).toBeInTheDocument();
+  });
+
+  it('should expose the current value to assistive tech', () => {
+    render(<ProgressBar label="Livraison terminée" value={100} />);
+    expect(screen.getByRole('progressbar', { name: 'Livraison terminée' })).toHaveAttribute(
+      'aria-valuenow',
+      '100',
+    );
+  });
+});

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/cn';
+import styles from './ProgressBar.module.css';
+
+export interface ProgressBarProps {
+  /** Valeur entre 0 et 100. */
+  value: number;
+  label: string;
+  className?: string;
+}
+
+export function ProgressBar({ value, label, className }: ProgressBarProps) {
+  const percent = Math.min(100, Math.max(0, value));
+  const tone = percent === 100 ? 'done' : percent === 0 ? 'idle' : 'active';
+
+  return (
+    <div className={cn(styles.progress, className)}>
+      <div className={styles.row}>
+        <span className={styles.label}>{label}</span>
+        <span className={cn(styles.value, styles[tone])}>{percent}%</span>
+      </div>
+      <div
+        className={styles.track}
+        role="progressbar"
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={label}
+      >
+        <span className={cn(styles.fill, styles[tone])} style={{ width: `${percent}%` }} />
+      </div>
+    </div>
+  );
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './ProgressBar';

package/src/components/QrScanner/QrScanner.module.css

@@ -0,0 +1,50 @@
+.scanner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 390px;
+  max-width: 100%;
+  padding: 24px;
+  border-radius: 24px;
+  background: var(--color-sidebar);
+  color: #fff;
+  text-align: center;
+}
+
+.scanner h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.hint {
+  margin: 0;
+  color: var(--color-text-placeholder);
+  font-size: 12px;
+}
+
+.viewfinder {
+  width: 280px;
+  max-width: 100%;
+  aspect-ratio: 1;
+  border: 3px solid var(--color-primary);
+  border-radius: 28px;
+  background: var(--color-ink);
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.actions button {
+  border: 0;
+  background: transparent;
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+}

package/src/components/QrScanner/QrScanner.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QrScanner } from './QrScanner';
+
+describe('<QrScanner>', () => {
+  it('should render the scanner instructions', () => {
+    render(<QrScanner />);
+    expect(screen.getByRole('heading', { name: 'Scanner un QR code' })).toBeInTheDocument();
+  });
+
+  it('should call onManual when manual entry is activated', async () => {
+    const user = userEvent.setup();
+    const onManual = vi.fn();
+    render(<QrScanner onManual={onManual} />);
+
+    await user.click(screen.getByRole('button', { name: 'Saisie manuelle' }));
+
+    expect(onManual).toHaveBeenCalledOnce();
+  });
+});

package/src/components/QrScanner/QrScanner.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/lib/cn';
+import styles from './QrScanner.module.css';
+
+export interface QrScannerProps {
+  onTorch?: () => void;
+  onManual?: () => void;
+  className?: string;
+}
+
+export function QrScanner({ onTorch, onManual, className }: QrScannerProps) {
+  return (
+    <section className={cn(styles.scanner, className)}>
+      <h2>Scanner un QR code</h2>
+      <p className={styles.hint}>Placez le code du colis dans le cadre.</p>
+      <div className={styles.viewfinder} aria-hidden="true" />
+      <div className={styles.actions}>
+        <button type="button" onClick={onTorch}>
+          Lampe
+        </button>
+        <span aria-hidden="true">•</span>
+        <button type="button" onClick={onManual}>
+          Saisie manuelle
+        </button>
+      </div>
+    </section>
+  );
+}

package/src/components/QrScanner/index.ts

@@ -0,0 +1 @@
+export { QrScanner, type QrScannerProps } from './QrScanner';

package/src/components/QuestionSearch/QuestionSearch.module.css

@@ -0,0 +1,28 @@
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 648px;
+  height: 50px;
+  padding: 0 16px;
+  border: 1px solid #e8eaee;
+  border-radius: 14px;
+  background: #f3f4f6;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: #191d26;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  outline: none;
+}
+
+.input::placeholder {
+  color: #606978;
+}

package/src/components/QuestionSearch/QuestionSearch.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QuestionSearch } from './QuestionSearch';
+
+describe('<QuestionSearch>', () => {
+  it('should submit the typed query', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<QuestionSearch onSubmit={onSubmit} />);
+
+    await user.type(screen.getByPlaceholderText('Rechercher une question'), 'livraison{enter}');
+
+    expect(onSubmit).toHaveBeenCalledWith('livraison');
+  });
+});

package/src/components/QuestionSearch/QuestionSearch.tsx

@@ -0,0 +1,26 @@
+import type { FormEvent, InputHTMLAttributes } from 'react';
+import searchIcon from '@/assets/icons/core-search.svg';
+import styles from './QuestionSearch.module.css';
+
+export interface QuestionSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'> {
+  onSubmit?: (value: string) => void;
+}
+
+export function QuestionSearch({
+  placeholder = 'Rechercher une question',
+  onSubmit,
+  ...props
+}: QuestionSearchProps) {
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    onSubmit?.(String(data.get('query') ?? ''));
+  }
+
+  return (
+    <form className={styles.bar} onSubmit={handleSubmit}>
+      <img src={searchIcon} alt="" width={18} height={18} />
+      <input name="query" className={styles.input} placeholder={placeholder} {...props} />
+    </form>
+  );
+}

package/src/components/QuestionSearch/index.ts

@@ -0,0 +1 @@
+export { QuestionSearch, type QuestionSearchProps } from './QuestionSearch';

package/src/components/QuickActionCard/QuickActionCard.module.css

@@ -0,0 +1,31 @@
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 420px;
+  max-width: 100%;
+  height: 92px;
+  padding: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+}
+
+.card span:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title {
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.description {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}

package/src/components/QuickActionCard/QuickActionCard.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QuickActionCard } from './QuickActionCard';
+
+describe('<QuickActionCard>', () => {
+  it('should render the action', () => {
+    render(<QuickActionCard title="Envoyer un colis" description="Préparez un nouvel envoi" />);
+    expect(screen.getByRole('button', { name: /Envoyer un colis/ })).toBeInTheDocument();
+  });
+
+  it('should call onClick when activated', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<QuickActionCard title="Envoyer un colis" description="Préparez un nouvel envoi" onClick={onClick} />);
+
+    await user.click(screen.getByRole('button', { name: /Envoyer un colis/ }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/QuickActionCard/QuickActionCard.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './QuickActionCard.module.css';
+
+export interface QuickActionCardProps {
+  title: string;
+  description: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function QuickActionCard({ title, description, onClick, className }: QuickActionCardProps) {
+  return (
+    <button type="button" className={cn(styles.card, className)} onClick={onClick}>
+      <span>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.description}>{description}</span>
+      </span>
+      <Icon name="arrowRight" size={20} />
+    </button>
+  );
+}

package/src/components/QuickActionCard/index.ts

@@ -0,0 +1 @@
+export { QuickActionCard, type QuickActionCardProps } from './QuickActionCard';

package/src/components/Radio/Radio.module.css

@@ -0,0 +1,53 @@
+.control {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+}
+
+.circle {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-pill);
+  background: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.circle::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-pill);
+  background: #fff;
+  transform: scale(0);
+}
+
+.input:checked + .circle {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.input:checked + .circle::after {
+  transform: scale(1);
+}
+
+.input:focus-visible + .circle {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.label {
+  font-size: 13px;
+  color: var(--color-text);
+}

package/src/components/Radio/Radio.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Radio } from './Radio';
+
+describe('<Radio>', () => {
+  it('should render an unselected radio', () => {
+    render(<Radio name="mode" label="Point relais" />);
+    expect(screen.getByRole('radio', { name: 'Point relais' })).not.toBeChecked();
+  });
+
+  it('should select the radio when activated', async () => {
+    const user = userEvent.setup();
+    render(<Radio name="mode" label="Point relais" />);
+    const radio = screen.getByRole('radio', { name: 'Point relais' });
+
+    await user.click(radio);
+
+    expect(radio).toBeChecked();
+  });
+});

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,20 @@
+import { useId, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './Radio.module.css';
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+}
+
+export function Radio({ label, id, className, ...props }: RadioProps) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+
+  return (
+    <label className={cn(styles.control, className)} htmlFor={fieldId}>
+      <input id={fieldId} className={styles.input} type="radio" {...props} />
+      <span className={styles.circle} aria-hidden="true" />
+      {label ? <span className={styles.label}>{label}</span> : null}
+    </label>
+  );
+}

package/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export { Radio, type RadioProps } from './Radio';

package/src/components/RelayCard/RelayCard.module.css

@@ -0,0 +1,38 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 7px;
+  width: 410px;
+  max-width: 100%;
+  padding: 16px 18px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  background: #fff;
+}
+
+.name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.location {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+.hours {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-success);
+}
+
+.map {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}

package/src/components/RelayCard/RelayCard.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RelayCard } from './RelayCard';
+
+describe('<RelayCard>', () => {
+  it('should render the relay name', () => {
+    render(<RelayCard name="Carrefour Cocody" location="Cocody · 1,2 km" hours="Ouvert · ferme à 20:00" />);
+    expect(screen.getByText('Carrefour Cocody')).toBeInTheDocument();
+  });
+
+  it('should call onMapClick when the map action is activated', async () => {
+    const user = userEvent.setup();
+    const onMapClick = vi.fn();
+    render(
+      <RelayCard name="Carrefour Cocody" location="Cocody" hours="Ouvert" onMapClick={onMapClick} />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Voir sur la carte →' }));
+
+    expect(onMapClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/RelayCard/RelayCard.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/cn';
+import styles from './RelayCard.module.css';
+
+export interface RelayCardProps {
+  name: string;
+  location: string;
+  hours: string;
+  mapLabel?: string;
+  onMapClick?: () => void;
+  className?: string;
+}
+
+export function RelayCard({
+  name,
+  location,
+  hours,
+  mapLabel = 'Voir sur la carte →',
+  onMapClick,
+  className,
+}: RelayCardProps) {
+  return (
+    <article className={cn(styles.card, className)}>
+      <p className={styles.name}>{name}</p>
+      <p className={styles.location}>{location}</p>
+      <p className={styles.hours}>{hours}</p>
+      <button type="button" className={styles.map} onClick={onMapClick}>
+        {mapLabel}
+      </button>
+    </article>
+  );
+}

package/src/components/RelayCard/index.ts

@@ -0,0 +1 @@
+export { RelayCard, type RelayCardProps } from './RelayCard';

package/src/components/RelayResultCard/RelayResultCard.module.css

@@ -0,0 +1,82 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 504px;
+  padding: 16px;
+  overflow: hidden;
+  border: 0;
+  border-left: 4px solid #d34860;
+  border-radius: 16px;
+  background: #fff5f6;
+  box-shadow: 0 6px 16px rgb(0 0 0 / 4%);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.name {
+  margin: 0;
+  color: #191d26;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #16a34a;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #16a34a;
+}
+
+.badge {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #d34860;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.address {
+  margin: 0;
+  color: #606978;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.distance {
+  padding: 6px 10px;
+  border: 1px solid #e8eaee;
+  border-radius: 999px;
+  background: #f9fafb;
+  color: #d34860;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+}

package/src/components/RelayResultCard/RelayResultCard.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { RelayResultCard } from './RelayResultCard';
+
+describe('<RelayResultCard>', () => {
+  it('should render the relay name and the open status', () => {
+    render(<RelayResultCard />);
+    expect(screen.getByText('Carrefour City - 350 m')).toBeInTheDocument();
+    expect(screen.getByText('Ouvert')).toBeInTheDocument();
+  });
+});