lerelais-front-library 0.1.0

package/src/components/LinkButton/LinkButton.module.css

@@ -0,0 +1,22 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-primary);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.link:hover {
+  padding: 4px;
+  background: var(--color-primary-soft);
+  color: var(--color-primary-hover);
+}
+
+.link[aria-disabled='true'] {
+  color: var(--color-disabled);
+  pointer-events: none;
+  text-decoration: none;
+}

package/src/components/LinkButton/LinkButton.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { LinkButton } from './LinkButton';
+
+describe('<LinkButton>', () => {
+  it('should render a link', () => {
+    render(<LinkButton href="/relais">Voir tous les relais partenaires</LinkButton>);
+    expect(screen.getByRole('link', { name: /Voir tous les relais/ })).toHaveAttribute('href', '/relais');
+  });
+});

package/src/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,17 @@
+import type { AnchorHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './LinkButton.module.css';
+
+export interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: string;
+}
+
+export function LinkButton({ children, className, ...props }: LinkButtonProps) {
+  return (
+    <a className={cn(styles.link, className)} {...props}>
+      {children}
+      <Icon name="arrowRight" size={16} />
+    </a>
+  );
+}

package/src/components/LinkButton/index.ts

@@ -0,0 +1 @@
+export { LinkButton, type LinkButtonProps } from './LinkButton';

package/src/components/LocationCard/LocationCard.module.css

@@ -0,0 +1,61 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+  max-width: 416px;
+  padding: 24px;
+  overflow: hidden;
+  border: 1px solid #e8eaee;
+  border-radius: 22px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgb(16 24 40 / 5%);
+}
+
+.label,
+.name,
+.area {
+  margin: 0;
+  line-height: 1.3;
+}
+
+.label {
+  color: #d34860;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.name {
+  color: #191d26;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.area {
+  color: #606978;
+  font-size: 13px;
+}
+
+.map {
+  position: relative;
+  width: 100%;
+  height: 170px;
+  border: 1px solid #d1d5db;
+  border-radius: 18px;
+  background: #edf2f5;
+}
+
+.marker {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background: #d34860;
+  box-shadow: 0 6px 14px rgb(211 72 96 / 20%);
+  transform: translate(-50%, -50%);
+}

package/src/components/LocationCard/LocationCard.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { LocationCard } from './LocationCard';
+
+describe('<LocationCard>', () => {
+  it('should render the destination name', () => {
+    render(<LocationCard />);
+    expect(screen.getByText('Épicerie des Brotteaux')).toBeInTheDocument();
+  });
+});

package/src/components/LocationCard/LocationCard.tsx

@@ -0,0 +1,27 @@
+import pin from '@/assets/icons/core-pin-white.svg';
+import styles from './LocationCard.module.css';
+
+export interface LocationCardProps {
+  label?: string;
+  name?: string;
+  area?: string;
+}
+
+export function LocationCard({
+  label = 'Destination',
+  name = 'Épicerie des Brotteaux',
+  area = 'Bouaké 3e',
+}: LocationCardProps) {
+  return (
+    <article className={styles.card}>
+      <p className={styles.label}>{label}</p>
+      <p className={styles.name}>{name}</p>
+      <p className={styles.area}>{area}</p>
+      <div className={styles.map}>
+        <span className={styles.marker}>
+          <img src={pin} alt="" width={18} height={18} />
+        </span>
+      </div>
+    </article>
+  );
+}

package/src/components/LocationCard/index.ts

@@ -0,0 +1 @@
+export { LocationCard, type LocationCardProps } from './LocationCard';

package/src/components/Logo/Logo.module.css

@@ -0,0 +1,30 @@
+.logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.word {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--color-primary);
+}
+
+.light .word {
+  color: #fff;
+}

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/cn';
+import styles from './Logo.module.css';
+
+export interface LogoProps {
+  tone?: 'brand' | 'light';
+  className?: string;
+}
+
+export function Logo({ tone = 'brand', className }: LogoProps) {
+  return (
+    <span className={cn(styles.logo, styles[tone], className)}>
+      <span className={styles.mark} aria-hidden="true">
+        LR
+      </span>
+      <span className={styles.word}>LeRelais</span>
+    </span>
+  );
+}

package/src/components/Logo/index.ts

@@ -0,0 +1 @@
+export { Logo, type LogoProps } from './Logo';

package/src/components/MetricCard/MetricCard.module.css

@@ -0,0 +1,27 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  width: 250px;
+  padding: 18px 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  background: #fff;
+}
+
+.label,
+.hint {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.hint {
+  font-size: 11px;
+}
+
+.value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--color-primary);
+}

package/src/components/MetricCard/MetricCard.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { MetricCard } from './MetricCard';
+
+describe('<MetricCard>', () => {
+  it('should render the metric', () => {
+    render(<MetricCard label="Colis en cours" value="128" hint="+8 cette semaine" />);
+    expect(screen.getByText('128')).toBeInTheDocument();
+    expect(screen.getByText('Colis en cours')).toBeInTheDocument();
+  });
+});

package/src/components/MetricCard/MetricCard.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/cn';
+import styles from './MetricCard.module.css';
+
+export interface MetricCardProps {
+  label: string;
+  value: string;
+  hint: string;
+  className?: string;
+}
+
+export function MetricCard({ label, value, hint, className }: MetricCardProps) {
+  return (
+    <article className={cn(styles.card, className)}>
+      <p className={styles.label}>{label}</p>
+      <p className={styles.value}>{value}</p>
+      <p className={styles.hint}>{hint}</p>
+    </article>
+  );
+}

package/src/components/MetricCard/index.ts

@@ -0,0 +1 @@
+export { MetricCard, type MetricCardProps } from './MetricCard';

package/src/components/Navbar/Navbar.module.css

@@ -0,0 +1,87 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  background: #fff;
+}
+
+.full {
+  height: 84px;
+  padding: 0 78px;
+}
+
+.topbar,
+.entreprise {
+  height: 84px;
+  padding: 0 78px;
+}
+
+.topbar {
+  padding-inline: 120px;
+  height: 82px;
+}
+
+.particulier {
+  height: 76px;
+  padding: 18px 64px;
+}
+
+.links {
+  display: flex;
+  gap: 22px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.particulier .links {
+  gap: 26px;
+  margin-left: auto;
+}
+
+.links a {
+  text-decoration: none;
+}
+
+.activeLink {
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.heading {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+}
+
+.login,
+.primary {
+  padding: 13px 20px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.login {
+  border: 1px solid var(--color-border-line);
+  background: #fff;
+  color: var(--color-text);
+}
+
+.primary {
+  border: 0;
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.primary:hover {
+  background: var(--color-primary-hover);
+}

package/src/components/Navbar/Navbar.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Navbar } from './Navbar';
+
+describe('<Navbar>', () => {
+  it('should render the public links', () => {
+    render(<Navbar />);
+    expect(screen.getByRole('link', { name: 'Suivre' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Connexion' })).toBeInTheDocument();
+  });
+
+  it('should call onPrimary when the send action is activated', async () => {
+    const user = userEvent.setup();
+    const onPrimary = vi.fn();
+    render(<Navbar onPrimary={onPrimary} />);
+
+    await user.click(screen.getByRole('button', { name: 'Envoyer un colis' }));
+
+    expect(onPrimary).toHaveBeenCalledOnce();
+  });
+});

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,77 @@
+import { cn } from '@/lib/cn';
+import { Logo } from '@/components/Logo';
+import { Avatar } from '@/components/Avatar';
+import styles from './Navbar.module.css';
+
+export type NavbarVariant = 'full' | 'topbar' | 'entreprise' | 'particulier';
+
+export interface NavbarLink {
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export interface NavbarProps {
+  variant?: NavbarVariant;
+  links?: NavbarLink[];
+  title?: string;
+  initials?: string;
+  onLogin?: () => void;
+  onPrimary?: () => void;
+  className?: string;
+}
+
+const PUBLIC_LINKS: NavbarLink[] = [
+  { label: 'Envoyer', href: '#envoyer' },
+  { label: 'Suivre', href: '#suivre' },
+  { label: 'Trouver un relais', href: '#relais' },
+  { label: 'Devenir relais', href: '#devenir' },
+  { label: 'Entreprises', href: '#entreprises' },
+];
+
+const PARTICULIER_LINKS: NavbarLink[] = [
+  { label: 'Tableau de bord', href: '#dashboard', active: true },
+  { label: 'Mes colis', href: '#colis' },
+  { label: 'Profil', href: '#profil' },
+];
+
+export function Navbar({
+  variant = 'full',
+  links,
+  title,
+  initials = 'EA',
+  onLogin,
+  onPrimary,
+  className,
+}: NavbarProps) {
+  const resolvedLinks = links ?? (variant === 'full' ? PUBLIC_LINKS : variant === 'particulier' ? PARTICULIER_LINKS : []);
+  const heading =
+    title ?? (variant === 'topbar' ? 'Envoyer un colis' : variant === 'entreprise' ? 'Espace Entreprise' : undefined);
+
+  return (
+    <header className={cn(styles.navbar, styles[variant], className)}>
+      <Logo />
+      {resolvedLinks.length > 0 ? (
+        <nav className={styles.links} aria-label="Navigation principale">
+          {resolvedLinks.map((link) => (
+            <a key={link.label} href={link.href} className={cn(link.active && styles.activeLink)}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      ) : null}
+      {heading ? <p className={styles.heading}>{heading}</p> : null}
+      {variant === 'full' ? (
+        <div className={styles.actions}>
+          <button type="button" className={styles.login} onClick={onLogin}>
+            Connexion
+          </button>
+          <button type="button" className={styles.primary} onClick={onPrimary}>
+            Envoyer un colis
+          </button>
+        </div>
+      ) : null}
+      {variant === 'particulier' ? <Avatar initials={initials} size="sm" /> : null}
+    </header>
+  );
+}

package/src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export { Navbar, type NavbarProps, type NavbarVariant, type NavbarLink } from './Navbar';

package/src/components/NotificationItem/NotificationItem.module.css

@@ -0,0 +1,73 @@
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  width: 440px;
+  max-width: 100%;
+  padding: 16px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-control);
+  background: #fff;
+  box-shadow: var(--shadow-note);
+}
+
+.unread {
+  background: var(--color-primary-card);
+  border-color: var(--color-primary-border);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background: #f1f2f4;
+  flex-shrink: 0;
+}
+
+.iconUnread {
+  background: var(--color-primary);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.titleUnread {
+  font-weight: 600;
+}
+
+.description {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.time {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-text-faint);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  flex-shrink: 0;
+}

package/src/components/NotificationItem/NotificationItem.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { NotificationItem } from './NotificationItem';
+
+describe('<NotificationItem>', () => {
+  it('should render the notification copy', () => {
+    render(
+      <NotificationItem
+        unread
+        title="Colis LR-2026-000123 disponible"
+        description="Votre colis est prêt à être retiré au relais Tabac du Centre."
+        time="Il y a 2 heures"
+      />,
+    );
+    expect(screen.getByText('Colis LR-2026-000123 disponible')).toBeInTheDocument();
+    expect(screen.getByLabelText('Non lu')).toBeInTheDocument();
+  });
+
+  it('should hide the unread marker when the item is read', () => {
+    render(<NotificationItem title="Titre" description="Détail" time="Il y a 2 heures" />);
+    expect(screen.queryByLabelText('Non lu')).not.toBeInTheDocument();
+  });
+});

package/src/components/NotificationItem/NotificationItem.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './NotificationItem.module.css';
+
+export interface NotificationItemProps {
+  title: string;
+  description: string;
+  time: string;
+  unread?: boolean;
+  className?: string;
+}
+
+export function NotificationItem({ title, description, time, unread = false, className }: NotificationItemProps) {
+  return (
+    <article className={cn(styles.item, unread && styles.unread, className)}>
+      <span className={cn(styles.icon, unread && styles.iconUnread)}>
+        <Icon name={unread ? 'packageWhite' : 'packageRead'} size={18} />
+      </span>
+      <div className={styles.content}>
+        <p className={cn(styles.title, unread && styles.titleUnread)}>{title}</p>
+        <p className={styles.description}>{description}</p>
+        <p className={styles.time}>
+          <Icon name="clock" size={12} />
+          {time}
+        </p>
+      </div>
+      {unread ? <span className={styles.dot} aria-label="Non lu" /> : null}
+    </article>
+  );
+}

package/src/components/NotificationItem/index.ts

@@ -0,0 +1 @@
+export { NotificationItem, type NotificationItemProps } from './NotificationItem';

package/src/components/NotificationRow/NotificationRow.module.css

@@ -0,0 +1,49 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  width: 100%;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-primary-soft);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.description,
+.time {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.row > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.time {
+  font-size: 12px;
+  white-space: nowrap;
+}

package/src/components/NotificationRow/NotificationRow.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { NotificationRow } from './NotificationRow';
+
+describe('<NotificationRow>', () => {
+  it('should render the notification', () => {
+    render(
+      <NotificationRow
+        title="Colis disponible en point relais"
+        description="Votre colis LR-2026-084215 est arrivé au relais Cocody Centre."
+        time="Il y a 2h"
+      />,
+    );
+    expect(screen.getByText('Il y a 2h')).toBeInTheDocument();
+  });
+});

package/src/components/NotificationRow/NotificationRow.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './NotificationRow.module.css';
+
+export interface NotificationRowProps {
+  title: string;
+  description: string;
+  time: string;
+  className?: string;
+}
+
+export function NotificationRow({ title, description, time, className }: NotificationRowProps) {
+  return (
+    <article className={cn(styles.row, className)}>
+      <span className={styles.dot} aria-hidden="true" />
+      <span className={styles.icon}>
+        <Icon name="package" size={20} />
+      </span>
+      <div>
+        <p className={styles.title}>{title}</p>
+        <p className={styles.description}>{description}</p>
+      </div>
+      <time className={styles.time}>{time}</time>
+    </article>
+  );
+}