lerelais-front-library 0.1.0

package/src/components/FavoriteRelayCard/FavoriteRelayCard.module.css

@@ -0,0 +1,83 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 644px;
+  max-width: 100%;
+  padding: 24px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: #fff;
+  box-shadow: var(--shadow-card);
+}
+
+.top,
+.bottom,
+.middle,
+.address,
+.hours {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top,
+.bottom {
+  justify-content: space-between;
+}
+
+.top h3 {
+  margin: 0 0 4px;
+  font-size: 18px;
+}
+
+.address,
+.hours {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.middle {
+  gap: 16px;
+}
+
+.distance,
+.bottom li {
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.distance {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.line {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--color-border);
+}
+
+.bottom ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bottom button {
+  border: 0;
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}

package/src/components/FavoriteRelayCard/FavoriteRelayCard.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FavoriteRelayCard } from './FavoriteRelayCard';
+
+describe('<FavoriteRelayCard>', () => {
+  it('should render the relay', () => {
+    render(
+      <FavoriteRelayCard
+        name="Épicerie Centrale"
+        address="12 rue de Charenton, Abidjan 12e"
+        distance="350m"
+        hours="Lun-Sam 08:00-21:00"
+        services={['Dépôt', 'Retrait']}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Épicerie Centrale' })).toBeInTheDocument();
+  });
+
+  it('should call onDetail when the detail action is activated', async () => {
+    const user = userEvent.setup();
+    const onDetail = vi.fn();
+    render(
+      <FavoriteRelayCard
+        name="Épicerie Centrale"
+        address="Abidjan"
+        distance="350m"
+        hours="Lun-Sam"
+        services={['Dépôt']}
+        onDetail={onDetail}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Voir le détail →' }));
+
+    expect(onDetail).toHaveBeenCalledOnce();
+  });
+});

package/src/components/FavoriteRelayCard/FavoriteRelayCard.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './FavoriteRelayCard.module.css';
+
+export interface FavoriteRelayCardProps {
+  name: string;
+  address: string;
+  distance: string;
+  hours: string;
+  services: string[];
+  detailLabel?: string;
+  onDetail?: () => void;
+  className?: string;
+}
+
+export function FavoriteRelayCard({
+  name,
+  address,
+  distance,
+  hours,
+  services,
+  detailLabel = 'Voir le détail →',
+  onDetail,
+  className,
+}: FavoriteRelayCardProps) {
+  return (
+    <article className={cn(styles.card, className)}>
+      <div className={styles.top}>
+        <div>
+          <h3>{name}</h3>
+          <p className={styles.address}>
+            <Icon name="mapPin" size={14} />
+            {address}
+          </p>
+        </div>
+        <Icon name="heart" size={20} />
+      </div>
+      <div className={styles.middle}>
+        <span className={styles.distance}>{distance}</span>
+        <span className={styles.hours}>
+          <Icon name="clockMuted" size={14} />
+          {hours}
+        </span>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles.bottom}>
+        <ul>
+          {services.map((service) => (
+            <li key={service}>{service}</li>
+          ))}
+        </ul>
+        <button type="button" onClick={onDetail}>
+          {detailLabel}
+        </button>
+      </div>
+    </article>
+  );
+}

package/src/components/FavoriteRelayCard/index.ts

@@ -0,0 +1 @@
+export { FavoriteRelayCard, type FavoriteRelayCardProps } from './FavoriteRelayCard';

package/src/components/FeatureCard/FeatureCard.module.css

@@ -0,0 +1,62 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 384px;
+  padding: 32px;
+  overflow: hidden;
+  border: 1px solid #edf0f2;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow:
+    0 6px 16px -2px rgb(16 24 40 / 6%),
+    0 1px 3px rgb(16 24 40 / 4%);
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: #fcf2f5;
+}
+
+.title {
+  margin: 16px 0 0;
+  color: #191d26;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.description {
+  margin: 8px 0 0;
+  color: #6b7486;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.metric {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f2f5;
+}
+
+.metric span:first-child {
+  color: #d34860;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 28px;
+}
+
+.metric span:last-child {
+  color: #6b7486;
+  font-size: 13px;
+  line-height: 18px;
+}

package/src/components/FeatureCard/FeatureCard.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { FeatureCard } from './FeatureCard';
+
+describe('<FeatureCard>', () => {
+  it('should render the metric', () => {
+    render(<FeatureCard />);
+    expect(screen.getByRole('heading', { name: '+ de trafic' })).toBeInTheDocument();
+    expect(screen.getByText('+30%')).toBeInTheDocument();
+  });
+});

package/src/components/FeatureCard/FeatureCard.tsx

@@ -0,0 +1,30 @@
+import store from '@/assets/icons/core-store.svg';
+import styles from './FeatureCard.module.css';
+
+export interface FeatureCardProps {
+  title?: string;
+  description?: string;
+  metric?: string;
+  caption?: string;
+}
+
+export function FeatureCard({
+  title = '+ de trafic',
+  description = 'Attirez de nouveaux clients dans votre commerce grâce aux dépôts et retraits de colis quotidiens.',
+  metric = '+30%',
+  caption = 'de passage en plus',
+}: FeatureCardProps) {
+  return (
+    <article className={styles.card}>
+      <span className={styles.icon}>
+        <img src={store} alt="" width={24} height={24} />
+      </span>
+      <h3 className={styles.title}>{title}</h3>
+      <p className={styles.description}>{description}</p>
+      <div className={styles.metric}>
+        <span>{metric}</span>
+        <span>{caption}</span>
+      </div>
+    </article>
+  );
+}

package/src/components/FeatureCard/index.ts

@@ -0,0 +1 @@
+export { FeatureCard, type FeatureCardProps } from './FeatureCard';

package/src/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,41 @@
+.zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 136px;
+  padding: 24px;
+  border: 1.5px dashed var(--color-border-strong);
+  border-radius: var(--radius-control);
+  background: var(--color-surface-muted);
+  text-align: center;
+  cursor: pointer;
+}
+
+.prompt {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.prompt span {
+  color: var(--color-primary);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.hint {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}

package/src/components/FileUpload/FileUpload.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FileUpload } from './FileUpload';
+
+describe('<FileUpload>', () => {
+  it('should render the browse prompt', () => {
+    render(<FileUpload aria-label="Ajouter un fichier" />);
+    expect(screen.getByText(/Glissez vos fichiers/)).toBeInTheDocument();
+  });
+
+  it('should accept a selected file', async () => {
+    const user = userEvent.setup();
+    render(<FileUpload aria-label="Ajouter un fichier" />);
+    const input = screen.getByLabelText('Ajouter un fichier');
+    const file = new File(['colis'], 'bordereau.pdf', { type: 'application/pdf' });
+
+    await user.upload(input, file);
+
+    expect(input).toBeInstanceOf(HTMLInputElement);
+    expect((input as HTMLInputElement).files?.[0]?.name).toBe('bordereau.pdf');
+  });
+});

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './FileUpload.module.css';
+
+export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  hint?: string;
+  className?: string;
+}
+
+export function FileUpload({
+  hint = 'Formats acceptés: PDF, PNG, JPG (max. 10 Mo)',
+  className,
+  ...props
+}: FileUploadProps) {
+  return (
+    <label className={cn(styles.zone, className)}>
+      <Icon name="uploadCloud" size={32} />
+      <p className={styles.prompt}>
+        Glissez vos fichiers ici ou <span>parcourir</span>
+      </p>
+      <p className={styles.hint}>{hint}</p>
+      <input className={styles.input} type="file" {...props} />
+    </label>
+  );
+}

package/src/components/FileUpload/index.ts

@@ -0,0 +1 @@
+export { FileUpload, type FileUploadProps } from './FileUpload';

package/src/components/FilterPill/FilterPill.module.css

@@ -0,0 +1,18 @@
+.pill {
+  padding: 8px 14px;
+  border: 1px solid #d34860;
+  border-radius: 999px;
+  background: #fff;
+  color: #d34860;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.active {
+  border-color: #d34860;
+  background: #d34860;
+  color: #fff;
+}

package/src/components/FilterPill/FilterPill.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FilterPill } from './FilterPill';
+
+describe('<FilterPill>', () => {
+  it('should call onClick when pressed', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <FilterPill active onClick={onClick}>
+        Ouvert maintenant
+      </FilterPill>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Ouvert maintenant' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/FilterPill/FilterPill.tsx

@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './FilterPill.module.css';
+
+export interface FilterPillProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+}
+
+export function FilterPill({ active = false, className, type = 'button', children, ...props }: FilterPillProps) {
+  return (
+    <button
+      type={type}
+      aria-pressed={active}
+      className={cn(styles.pill, active && styles.active, className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/FilterPill/index.ts

@@ -0,0 +1 @@
+export { FilterPill, type FilterPillProps } from './FilterPill';

package/src/components/Footer/Footer.module.css

@@ -0,0 +1,57 @@
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 32px;
+  padding: 60px 96px;
+  background: var(--color-surface-muted);
+}
+
+.brand {
+  width: 310px;
+  max-width: 100%;
+}
+
+.logo {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 10px;
+  color: var(--color-primary);
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.logo span {
+  font-size: 26px;
+}
+
+.tagline,
+.copy,
+.column a {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  line-height: 1.25;
+  text-decoration: none;
+}
+
+.tagline {
+  max-width: 280px;
+  font-size: 14px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.title {
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.copy {
+  font-size: 11px;
+}

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { Footer } from './Footer';
+
+describe('<Footer>', () => {
+  it('should render the service links', () => {
+    render(<Footer />);
+    expect(screen.getByRole('link', { name: 'Suivre un colis' })).toBeInTheDocument();
+    expect(screen.getByText(/© 2026 LeRelais/)).toBeInTheDocument();
+  });
+});

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,63 @@
+import { cn } from '@/lib/cn';
+import styles from './Footer.module.css';
+
+export interface FooterColumn {
+  title: string;
+  links: Array<{ label: string; href: string }>;
+}
+
+export interface FooterProps {
+  columns?: FooterColumn[];
+  className?: string;
+}
+
+const DEFAULT_COLUMNS: FooterColumn[] = [
+  {
+    title: 'Services',
+    links: [
+      { label: 'Envoyer un colis', href: '#envoyer' },
+      { label: 'Suivre un colis', href: '#suivre' },
+      { label: 'Trouver un relais', href: '#relais' },
+    ],
+  },
+  {
+    title: 'Partenaires',
+    links: [
+      { label: 'Devenir point relais', href: '#devenir' },
+      { label: 'Entreprises', href: '#entreprises' },
+      { label: 'Documentation API', href: '#api' },
+    ],
+  },
+  {
+    title: 'LeRelais',
+    links: [
+      { label: 'À propos', href: '#apropos' },
+      { label: 'Aide & contact', href: '#aide' },
+      { label: 'Mentions légales', href: '#mentions' },
+    ],
+  },
+];
+
+export function Footer({ columns = DEFAULT_COLUMNS, className }: FooterProps) {
+  return (
+    <footer className={cn(styles.footer, className)}>
+      <div className={styles.brand}>
+        <p className={styles.logo}>
+          <span>R</span> LeRelais
+        </p>
+        <p className={styles.tagline}>Le point relais simple pour envoyer, suivre et recevoir vos colis.</p>
+      </div>
+      {columns.map((column) => (
+        <nav key={column.title} className={styles.column} aria-label={column.title}>
+          <p className={styles.title}>{column.title}</p>
+          {column.links.map((link) => (
+            <a key={link.label} href={link.href}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      ))}
+      <p className={styles.copy}>© 2026 LeRelais — Livraison de proximité.</p>
+    </footer>
+  );
+}

package/src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer, type FooterProps, type FooterColumn } from './Footer';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,20 @@
+import { icons, type IconName } from '@/assets/icons';
+
+export interface IconProps {
+  name: IconName;
+  /** Taille affichée, en pixels. Laisse la taille native du fichier si absente. */
+  size?: number;
+  className?: string;
+}
+
+export function Icon({ name, size, className }: IconProps) {
+  return (
+    <img
+      className={className}
+      src={icons[name]}
+      alt=""
+      width={size}
+      height={size}
+    />
+  );
+}

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { Icon, type IconProps } from './Icon';

package/src/components/InfoRow/InfoRow.module.css

@@ -0,0 +1,33 @@
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+  max-width: 736px;
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f7f8fa;
+}
+
+.row p {
+  margin: 0;
+}
+
+.row p:first-child {
+  color: #6b7080;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.row p:last-child {
+  color: #191d26;
+  font-size: 14px;
+  line-height: 20px;
+}

package/src/components/InfoRow/InfoRow.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { InfoRow } from './InfoRow';
+
+describe('<InfoRow>', () => {
+  it('should render the address', () => {
+    render(<InfoRow />);
+    expect(screen.getByText('12 rue de Charenton, Abidjan 12e')).toBeInTheDocument();
+  });
+});

package/src/components/InfoRow/InfoRow.tsx

@@ -0,0 +1,21 @@
+import pin from '@/assets/icons/core-pin-info.svg';
+import styles from './InfoRow.module.css';
+
+export interface InfoRowProps {
+  label?: string;
+  value?: string;
+}
+
+export function InfoRow({ label = 'Adresse', value = '12 rue de Charenton, Abidjan 12e' }: InfoRowProps) {
+  return (
+    <div className={styles.row}>
+      <span className={styles.icon}>
+        <img src={pin} alt="" width={16} height={16} />
+      </span>
+      <div>
+        <p>{label}</p>
+        <p>{value}</p>
+      </div>
+    </div>
+  );
+}

package/src/components/InfoRow/index.ts

@@ -0,0 +1 @@
+export { InfoRow, type InfoRowProps } from './InfoRow';