lerelais-front-library 0.1.0

package/src/components/BarChart/BarChart.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { BarChart } from './BarChart';
+
+describe('<BarChart>', () => {
+  it('should render the chart title and labels', () => {
+    render(
+      <BarChart
+        title="Colis par jour"
+        items={[
+          { label: 'Lun', value: 60 },
+          { label: 'Mar', value: 110 },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Colis par jour')).toBeInTheDocument();
+    expect(screen.getByText('Lun')).toBeInTheDocument();
+  });
+});

package/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/cn';
+import styles from './BarChart.module.css';
+
+export interface BarChartItem {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export interface BarChartProps {
+  title: string;
+  items: BarChartItem[];
+  max?: number;
+  className?: string;
+}
+
+const DEFAULT_COLORS = ['#d34860', '#e06c7e', '#b8324a', '#f5a3b1', '#d34860'];
+
+export function BarChart({ title, items, max = 150, className }: BarChartProps) {
+  return (
+    <figure className={cn(styles.chart, className)}>
+      <figcaption className={styles.title}>{title}</figcaption>
+      <div className={styles.body}>
+        <div className={styles.axis} aria-hidden="true">
+          <span>{max}</span>
+          <span>{Math.round(max * 0.66)}</span>
+          <span>{Math.round(max * 0.33)}</span>
+          <span>0</span>
+        </div>
+        <div className={styles.bars}>
+          {items.map((item, index) => (
+            <div key={item.label} className={styles.column}>
+              <span
+                className={styles.bar}
+                style={{
+                  height: `${Math.min(100, (item.value / max) * 100)}%`,
+                  background: item.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+                }}
+              />
+              <span className={styles.label}>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </figure>
+  );
+}

package/src/components/BarChart/index.ts

@@ -0,0 +1 @@
+export { BarChart, type BarChartProps, type BarChartItem } from './BarChart';

package/src/components/BenefitsCard/BenefitsCard.module.css

@@ -0,0 +1,44 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  max-width: 340px;
+}
+
+.illustration {
+  display: grid;
+  place-items: center;
+  width: 120px;
+  height: 120px;
+  border-radius: 24px;
+  background: #fff1f2;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.list li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #606978;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.list span {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  background: #fff1f2;
+}

package/src/components/BenefitsCard/BenefitsCard.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { BenefitsCard } from './BenefitsCard';
+
+describe('<BenefitsCard>', () => {
+  it('should list the benefits', () => {
+    render(<BenefitsCard />);
+    expect(screen.getByText('Suivi en temps réel de vos colis')).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+});

package/src/components/BenefitsCard/BenefitsCard.tsx

@@ -0,0 +1,33 @@
+import check from '@/assets/icons/core-check-sm.svg';
+import parcel from '@/assets/icons/core-package-lg.svg';
+import styles from './BenefitsCard.module.css';
+
+export interface BenefitsCardProps {
+  items?: string[];
+}
+
+const DEFAULT_ITEMS = [
+  'Suivi en temps réel de vos colis',
+  'Historique de tous vos envois',
+  'Notifications automatiques',
+];
+
+export function BenefitsCard({ items = DEFAULT_ITEMS }: BenefitsCardProps) {
+  return (
+    <div className={styles.card}>
+      <span className={styles.illustration}>
+        <img src={parcel} alt="" width={56} height={56} />
+      </span>
+      <ul className={styles.list}>
+        {items.map((item) => (
+          <li key={item}>
+            <span>
+              <img src={check} alt="" width={14} height={14} />
+            </span>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/components/BenefitsCard/index.ts

@@ -0,0 +1 @@
+export { BenefitsCard, type BenefitsCardProps } from './BenefitsCard';

package/src/components/BottomNavItem/BottomNavItem.module.css

@@ -0,0 +1,24 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: 78px;
+  height: 64px;
+  border: 0;
+  background: #fff;
+  color: var(--color-text-secondary);
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.item span {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.active {
+  color: var(--color-primary);
+  font-weight: 600;
+}

package/src/components/BottomNavItem/BottomNavItem.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BottomNavItem } from './BottomNavItem';
+
+describe('<BottomNavItem>', () => {
+  it('should render the label', () => {
+    render(<BottomNavItem label="Accueil" />);
+    expect(screen.getByRole('button', { name: 'Accueil' })).toBeInTheDocument();
+  });
+
+  it('should call onClick when activated', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<BottomNavItem label="Accueil" onClick={onClick} />);
+
+    await user.click(screen.getByRole('button', { name: 'Accueil' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/cn';
+import styles from './BottomNavItem.module.css';
+
+export interface BottomNavItemProps {
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function BottomNavItem({ label, active = false, onClick, className }: BottomNavItemProps) {
+  return (
+    <button
+      type="button"
+      className={cn(styles.item, active && styles.active, className)}
+      aria-current={active ? 'page' : undefined}
+      onClick={onClick}
+    >
+      <span aria-hidden="true">●</span>
+      {label}
+    </button>
+  );
+}

package/src/components/BottomNavItem/index.ts

@@ -0,0 +1 @@
+export { BottomNavItem, type BottomNavItemProps } from './BottomNavItem';

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1,31 @@
+.nav {
+  font-size: 13px;
+}
+
+.list {
+  display: flex;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: inline-flex;
+  gap: 8px;
+  color: var(--color-text-muted);
+}
+
+.item a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+
+.current {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.item span[aria-hidden] {
+  color: var(--color-text-placeholder);
+}

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { Breadcrumb } from './Breadcrumb';
+
+describe('<Breadcrumb>', () => {
+  it('should render the current page', () => {
+    render(
+      <Breadcrumb
+        items={[
+          { label: 'Accueil', href: '/' },
+          { label: 'Mes colis', href: '/colis' },
+          { label: 'LR-2026-000123' },
+        ]}
+      />,
+    );
+    expect(screen.getByText('LR-2026-000123')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('should link the previous crumbs', () => {
+    render(
+      <Breadcrumb
+        items={[
+          { label: 'Accueil', href: '/' },
+          { label: 'Mes colis' },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('link', { name: 'Accueil' })).toHaveAttribute('href', '/');
+  });
+});

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,36 @@
+import { cn } from '@/lib/cn';
+import styles from './Breadcrumb.module.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export function Breadcrumb({ items, className }: BreadcrumbProps) {
+  return (
+    <nav className={cn(styles.nav, className)} aria-label="Fil d’Ariane">
+      <ol className={styles.list}>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+          return (
+            <li key={item.label} className={styles.item}>
+              {index > 0 ? <span aria-hidden="true">/</span> : null}
+              {current || !item.href ? (
+                <span aria-current={current ? 'page' : undefined} className={current ? styles.current : undefined}>
+                  {item.label}
+                </span>
+              ) : (
+                <a href={item.href}>{item.label}</a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItem } from './Breadcrumb';

package/src/components/Button/Button.module.css

@@ -0,0 +1,61 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 160px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-button);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  cursor: pointer;
+  background: transparent;
+}
+
+.primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.primary:disabled {
+  background: var(--color-disabled);
+  color: #fff;
+}
+
+.secondary {
+  background: #fff;
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.secondary:hover:not(:disabled) {
+  background: var(--color-primary-soft);
+}
+
+.secondary:disabled {
+  color: var(--color-disabled);
+  border-color: var(--color-disabled);
+}
+
+.ghost {
+  background: #fff;
+  color: var(--color-text);
+}
+
+.ghost:hover:not(:disabled) {
+  background: var(--color-surface-muted);
+}
+
+.ghost:disabled {
+  color: var(--color-disabled);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './Button';
+
+describe('<Button>', () => {
+  it('should render its label', () => {
+    render(<Button>Continuer</Button>);
+    expect(screen.getByRole('button', { name: 'Continuer' })).toBeInTheDocument();
+  });
+
+  it('should call onClick when activated', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Continuer</Button>);
+
+    await user.click(screen.getByRole('button', { name: 'Continuer' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('should not call onClick when disabled', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Continuer
+      </Button>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Continuer' }));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './Button.module.css';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Variante visuelle du bouton. */
+  variant?: ButtonVariant;
+}
+
+export function Button({
+  variant = 'primary',
+  className,
+  type = 'button',
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button type={type} className={cn(styles.button, styles[variant], className)} {...props}>
+      {children}
+    </button>
+  );
+}

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps, type ButtonVariant } from './Button';

package/src/components/Checkbox/Checkbox.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;
+}
+
+.box {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.input:checked + .box {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.input:checked + .box::after {
+  content: '✓';
+}
+
+.input:focus-visible + .box {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.input:disabled + .box {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label {
+  font-size: 13px;
+  color: var(--color-text);
+}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Checkbox } from './Checkbox';
+
+describe('<Checkbox>', () => {
+  it('should render an unchecked checkbox', () => {
+    render(<Checkbox label="Accepter" />);
+    expect(screen.getByRole('checkbox', { name: 'Accepter' })).not.toBeChecked();
+  });
+
+  it('should toggle when activated', async () => {
+    const user = userEvent.setup();
+    render(<Checkbox label="Accepter" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accepter' });
+
+    await user.click(checkbox);
+
+    expect(checkbox).toBeChecked();
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

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

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

package/src/components/ConfirmModal/ConfirmModal.module.css

@@ -0,0 +1,69 @@
+.backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 480px;
+  max-width: 100%;
+  padding: 32px 32px 28px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: #fff;
+  box-shadow: var(--shadow-modal);
+  text-align: center;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin-bottom: 20px;
+  border-radius: 28px;
+  background: var(--color-warning-icon);
+}
+
+.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;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+.cancel,
+.confirm {
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+}
+
+.cancel {
+  border: 1px solid var(--color-border-line);
+  background: var(--color-surface-cancel);
+  color: var(--color-text);
+  font-weight: 600;
+  cursor: pointer;
+}

package/src/components/ConfirmModal/ConfirmModal.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfirmModal } from './ConfirmModal';
+
+describe('<ConfirmModal>', () => {
+  it('should render the confirmation copy', () => {
+    render(
+      <ConfirmModal
+        title="Confirmer la remise du colis ?"
+        description="Cette action marque le colis comme remis au destinataire."
+      />,
+    );
+    expect(screen.getByRole('dialog', { name: 'Confirmer la remise du colis ?' })).toBeInTheDocument();
+  });
+
+  it('should call onConfirm when the confirm button is activated', async () => {
+    const user = userEvent.setup();
+    const onConfirm = vi.fn();
+    render(<ConfirmModal title="Confirmer ?" description="Action irréversible." onConfirm={onConfirm} />);
+
+    await user.click(screen.getByRole('button', { name: 'Confirmer' }));
+
+    expect(onConfirm).toHaveBeenCalledOnce();
+  });
+});