lerelais-front-library 0.1.0

package/src/components/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,50 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import { Button } from '@/components/Button';
+import styles from './ConfirmModal.module.css';
+
+export interface ConfirmModalProps {
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  open?: boolean;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export function ConfirmModal({
+  title,
+  description,
+  confirmLabel = 'Confirmer',
+  cancelLabel = 'Annuler',
+  open = true,
+  onConfirm,
+  onCancel,
+  className,
+}: ConfirmModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className={styles.backdrop} role="presentation">
+      <div className={cn(styles.modal, className)} role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+        <span className={styles.icon}>
+          <Icon name="alertTriangle" size={24} />
+        </span>
+        <h2 id="confirm-title" className={styles.title}>
+          {title}
+        </h2>
+        <p className={styles.description}>{description}</p>
+        <div className={styles.actions}>
+          <button type="button" className={styles.cancel} onClick={onCancel}>
+            {cancelLabel}
+          </button>
+          <Button className={styles.confirm} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ConfirmModal/index.ts

@@ -0,0 +1 @@
+export { ConfirmModal, type ConfirmModalProps } from './ConfirmModal';

package/src/components/CoreButton/CoreButton.module.css

@@ -0,0 +1,71 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #fff;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.primary {
+  width: 100%;
+  max-width: 520px;
+  padding: 13px 20px;
+  border-radius: 14px;
+  background: #d34860;
+  font-size: 14px;
+  box-shadow: 0 10px 24px rgb(211 72 96 / 20%);
+}
+
+.secondary {
+  width: 100%;
+  max-width: 402px;
+  height: 53px;
+  padding: 16px 20px;
+  border: 1px solid #d34860;
+  border-radius: 14px;
+  background: #fff;
+  color: #d34860;
+  font-size: 16px;
+}
+
+.icon {
+  height: 44px;
+  padding: 0 18px;
+  border: 1px solid #d34860;
+  border-radius: 16px;
+  background: #fff;
+  color: #d34860;
+  font-size: 14px;
+}
+
+.compact {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #fff4f5;
+  color: #d34860;
+  font-size: 13px;
+}
+
+.filter {
+  width: 118px;
+  height: 44px;
+  justify-content: flex-start;
+  padding: 0 15px;
+  border: 1px solid #e5e8ed;
+  border-radius: 13px;
+  background: #fff;
+  color: #191d26;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: normal;
+}

package/src/components/CoreButton/CoreButton.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreButton } from './CoreButton';
+
+describe('<CoreButton>', () => {
+  it('should render its label', () => {
+    render(<CoreButton>Se connecter</CoreButton>);
+    expect(screen.getByRole('button', { name: 'Se connecter' })).toBeInTheDocument();
+  });
+
+  it('should call onClick when activated', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <CoreButton variant="icon" onClick={onClick}>
+        Voir sur la carte
+      </CoreButton>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Voir sur la carte' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/CoreButton/CoreButton.tsx

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import mapPin from '@/assets/icons/core-map-pin.svg';
+import { cn } from '@/lib/cn';
+import styles from './CoreButton.module.css';
+
+export type CoreButtonVariant = 'primary' | 'secondary' | 'icon' | 'compact' | 'filter';
+
+export interface CoreButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: CoreButtonVariant;
+  icon?: ReactNode;
+}
+
+export function CoreButton({
+  variant = 'primary',
+  className,
+  type = 'button',
+  children,
+  icon,
+  ...props
+}: CoreButtonProps) {
+  return (
+    <button type={type} className={cn(styles.button, styles[variant], className)} {...props}>
+      {variant === 'icon' ? (icon ?? <img src={mapPin} alt="" width={18} height={18} />) : null}
+      {children}
+    </button>
+  );
+}

package/src/components/CoreButton/index.ts

@@ -0,0 +1 @@
+export { CoreButton, type CoreButtonProps, type CoreButtonVariant } from './CoreButton';

package/src/components/CoreField/CoreField.module.css

@@ -0,0 +1,31 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  width: 100%;
+  max-width: 520px;
+}
+
+.label {
+  color: #191d26;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.input {
+  width: 100%;
+  height: 52px;
+  padding: 0 15px;
+  border: 1px solid #e8eaee;
+  border-radius: 12px;
+  background: #f9fafb;
+  color: #191d26;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.input::placeholder {
+  color: #606978;
+}

package/src/components/CoreField/CoreField.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreField } from './CoreField';
+
+describe('<CoreField>', () => {
+  it('should accept typed text', async () => {
+    const user = userEvent.setup();
+    render(<CoreField label="Adresse email" placeholder="vous@email.fr" />);
+
+    const field = screen.getByLabelText('Adresse email');
+    await user.type(field, 'ada@lerelais.fr');
+
+    expect(field).toHaveValue('ada@lerelais.fr');
+  });
+});

package/src/components/CoreField/CoreField.tsx

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './CoreField.module.css';
+
+export interface CoreFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export function CoreField({ label, className, id, ...props }: CoreFieldProps) {
+  const fieldId = id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined);
+
+  return (
+    <label className={styles.field} htmlFor={fieldId}>
+      {label ? <span className={styles.label}>{label}</span> : null}
+      <input id={fieldId} className={cn(styles.input, className)} {...props} />
+    </label>
+  );
+}

package/src/components/CoreField/index.ts

@@ -0,0 +1 @@
+export { CoreField, type CoreFieldProps } from './CoreField';

package/src/components/CoreSelect/CoreSelect.module.css

@@ -0,0 +1,37 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  width: 234px;
+}
+
+.label {
+  color: #191d26;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.select {
+  width: 100%;
+  height: 52px;
+  padding: 0 36px 0 14px;
+  border: 1px solid #e8eaee;
+  border-radius: 12px;
+  appearance: none;
+  background: #f9fafb;
+  color: #191d26;
+  font: inherit;
+  font-size: 14px;
+}
+
+.control img {
+  position: absolute;
+  right: 14px;
+  pointer-events: none;
+}

package/src/components/CoreSelect/CoreSelect.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreSelect } from './CoreSelect';
+
+describe('<CoreSelect>', () => {
+  it('should change the selected option', async () => {
+    const user = userEvent.setup();
+    render(
+      <CoreSelect
+        label="Ville"
+        options={[
+          { value: 'abidjan', label: 'Abidjan' },
+          { value: 'bouake', label: 'Bouaké' },
+        ]}
+      />,
+    );
+
+    await user.selectOptions(screen.getByLabelText('Ville'), 'bouake');
+
+    expect(screen.getByLabelText('Ville')).toHaveValue('bouake');
+  });
+});

package/src/components/CoreSelect/CoreSelect.tsx

@@ -0,0 +1,29 @@
+import type { SelectHTMLAttributes } from 'react';
+import chevron from '@/assets/icons/core-chevron.svg';
+import { cn } from '@/lib/cn';
+import styles from './CoreSelect.module.css';
+
+export interface CoreSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  options: { value: string; label: string }[];
+}
+
+export function CoreSelect({ label, options, className, id, ...props }: CoreSelectProps) {
+  const fieldId = id ?? 'core-select';
+
+  return (
+    <label className={styles.field} htmlFor={fieldId}>
+      {label ? <span className={styles.label}>{label}</span> : null}
+      <span className={styles.control}>
+        <select id={fieldId} className={cn(styles.select, className)} {...props}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <img src={chevron} alt="" width={16} height={16} />
+      </span>
+    </label>
+  );
+}

package/src/components/CoreSelect/index.ts

@@ -0,0 +1 @@
+export { CoreSelect, type CoreSelectProps } from './CoreSelect';

package/src/components/CoreTabs/CoreTabs.module.css

@@ -0,0 +1,41 @@
+.tabs {
+  display: flex;
+  gap: 24px;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 124px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #606978;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.bar {
+  height: 3px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+.active .label {
+  color: #d34860;
+  font-weight: 700;
+}
+
+.active .bar {
+  background: #d34860;
+}

package/src/components/CoreTabs/CoreTabs.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreTabs } from './CoreTabs';
+
+describe('<CoreTabs>', () => {
+  it('should select the clicked tab', async () => {
+    const user = userEvent.setup();
+    render(<CoreTabs />);
+
+    const tabs = screen.getAllByRole('tab', { name: 'Se connecter' });
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+
+    await user.click(tabs[0]);
+
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+  });
+});

package/src/components/CoreTabs/CoreTabs.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import lockIcon from '@/assets/icons/core-lock.svg';
+import plusIcon from '@/assets/icons/core-plus.svg';
+import { cn } from '@/lib/cn';
+import styles from './CoreTabs.module.css';
+
+const ICONS = {
+  lock: lockIcon,
+  plus: plusIcon,
+} as const;
+
+export interface CoreTabItem {
+  id: string;
+  label: string;
+  icon?: keyof typeof ICONS;
+}
+
+export interface CoreTabsProps {
+  items?: CoreTabItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (id: string) => void;
+}
+
+const DEFAULT_ITEMS: CoreTabItem[] = [
+  { id: 'login', label: 'Se connecter', icon: 'lock' },
+  { id: 'create', label: 'Se connecter', icon: 'plus' },
+];
+
+export function CoreTabs({
+  items = DEFAULT_ITEMS,
+  value,
+  defaultValue,
+  onChange,
+}: CoreTabsProps) {
+  const [internal, setInternal] = useState(defaultValue ?? items[1]?.id ?? items[0]?.id);
+  const current = value ?? internal;
+
+  function select(id: string) {
+    if (value === undefined) setInternal(id);
+    onChange?.(id);
+  }
+
+  return (
+    <div className={styles.tabs} role="tablist">
+      {items.map((item) => {
+        const selected = item.id === current;
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            className={cn(styles.tab, selected && styles.active)}
+            onClick={() => select(item.id)}
+          >
+            <span className={styles.label}>
+              {item.icon ? <img src={ICONS[item.icon]} alt="" width={18} height={18} /> : null}
+              {item.label}
+            </span>
+            <span className={styles.bar} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/CoreTabs/index.ts

@@ -0,0 +1 @@
+export { CoreTabs, type CoreTabItem, type CoreTabsProps } from './CoreTabs';

package/src/components/DashboardParcelRow/DashboardParcelRow.module.css

@@ -0,0 +1,61 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  min-height: 116px;
+  padding: 18px 24px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: #fff;
+}
+
+.row > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.id,
+.row button {
+  color: var(--color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.route {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.recipient,
+.date {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.row > div:nth-child(2) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status {
+  padding: 6px 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.date {
+  font-size: 11px;
+}
+
+.row button {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}

package/src/components/DashboardParcelRow/DashboardParcelRow.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DashboardParcelRow } from './DashboardParcelRow';
+
+describe('<DashboardParcelRow>', () => {
+  it('should render the parcel summary', () => {
+    render(
+      <DashboardParcelRow
+        trackingId="LR-2026-084215"
+        route="Abidjan → Bouaké"
+        recipient="À l'attention de Marie Konan"
+        status="En transit"
+        date="13 août 2026 · 08:42"
+      />,
+    );
+    expect(screen.getByText('Abidjan → Bouaké')).toBeInTheDocument();
+  });
+
+  it('should call onDetail when the detail action is activated', async () => {
+    const user = userEvent.setup();
+    const onDetail = vi.fn();
+    render(
+      <DashboardParcelRow
+        trackingId="LR-1"
+        route="Abidjan"
+        recipient="Marie"
+        status="En transit"
+        date="13 août"
+        onDetail={onDetail}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Voir le détail →' }));
+
+    expect(onDetail).toHaveBeenCalledOnce();
+  });
+});

package/src/components/DashboardParcelRow/DashboardParcelRow.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/cn';
+import styles from './DashboardParcelRow.module.css';
+
+export interface DashboardParcelRowProps {
+  trackingId: string;
+  route: string;
+  recipient: string;
+  status: string;
+  date: string;
+  detailLabel?: string;
+  onDetail?: () => void;
+  className?: string;
+}
+
+export function DashboardParcelRow({
+  trackingId,
+  route,
+  recipient,
+  status,
+  date,
+  detailLabel = 'Voir le détail →',
+  onDetail,
+  className,
+}: DashboardParcelRowProps) {
+  return (
+    <article className={cn(styles.row, className)}>
+      <div>
+        <p className={styles.id}>{trackingId}</p>
+        <p className={styles.route}>{route}</p>
+        <p className={styles.recipient}>{recipient}</p>
+      </div>
+      <div>
+        <span className={styles.status}>{status}</span>
+        <p className={styles.date}>{date}</p>
+      </div>
+      <button type="button" onClick={onDetail}>
+        {detailLabel}
+      </button>
+    </article>
+  );
+}

package/src/components/DashboardParcelRow/index.ts

@@ -0,0 +1 @@
+export { DashboardParcelRow, type DashboardParcelRowProps } from './DashboardParcelRow';

package/src/components/DataFiltersToolbar/DataFiltersToolbar.module.css

@@ -0,0 +1,29 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  max-width: 1098px;
+  height: 72px;
+  padding: 13px 17px 13px 17px;
+  overflow: hidden;
+  border: 1px solid #e5e8ed;
+  border-radius: 16px;
+  background: #fff;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: #191d26;
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+}
+
+.input::placeholder {
+  color: #606978;
+}

package/src/components/DataFiltersToolbar/DataFiltersToolbar.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DataFiltersToolbar } from './DataFiltersToolbar';
+
+describe('<DataFiltersToolbar>', () => {
+  it('should open the filters', async () => {
+    const user = userEvent.setup();
+    const onFilters = vi.fn();
+    render(<DataFiltersToolbar onFilters={onFilters} />);
+
+    await user.click(screen.getByRole('button', { name: 'Filtres' }));
+
+    expect(onFilters).toHaveBeenCalledOnce();
+  });
+});