lerelais-front-library 0.1.0

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,98 @@
+import { cn } from '@/lib/cn';
+import { Logo } from '@/components/Logo';
+import styles from './Sidebar.module.css';
+
+export type SidebarVariant = 'admin' | 'gerant';
+
+export interface SidebarItem {
+  id: string;
+  label: string;
+}
+
+export interface SidebarProps {
+  variant?: SidebarVariant;
+  items?: SidebarItem[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+  className?: string;
+}
+
+export const ADMIN_ITEMS: SidebarItem[] = [
+  { id: 'overview', label: 'Vue d’ensemble' },
+  { id: 'users', label: 'Utilisateurs' },
+  { id: 'companies', label: 'Entreprises' },
+  { id: 'relays', label: 'Points relais' },
+  { id: 'parcels', label: 'Colis' },
+  { id: 'delivery', label: 'Livraison & API' },
+  { id: 'payments', label: 'Paiements' },
+  { id: 'disputes', label: 'Litiges' },
+  { id: 'support', label: 'Support' },
+  { id: 'reports', label: 'Rapports' },
+  { id: 'settings', label: 'Paramètres' },
+];
+
+export const GERANT_ITEMS: SidebarItem[] = [
+  { id: 'dashboard', label: 'Tableau de bord' },
+  { id: 'incoming', label: 'Colis à réceptionner' },
+  { id: 'available', label: 'Colis disponibles' },
+  { id: 'scan', label: 'Scan & remise' },
+  { id: 'history', label: 'Historique' },
+  { id: 'alerts', label: 'Alertes' },
+  { id: 'reports', label: 'Rapports' },
+  { id: 'commissions', label: 'Commissions' },
+  { id: 'settings', label: 'Paramètres' },
+];
+
+export function Sidebar({
+  variant = 'admin',
+  items,
+  activeId,
+  onSelect,
+  className,
+}: SidebarProps) {
+  const navigation = items ?? (variant === 'gerant' ? GERANT_ITEMS : ADMIN_ITEMS);
+  const current = activeId ?? navigation[0]?.id;
+
+  return (
+    <aside className={cn(styles.sidebar, className)}>
+      <Logo tone={variant === 'admin' ? 'light' : 'brand'} />
+      {variant === 'admin' ? (
+        <div className={styles.account}>
+          <p className={styles.kicker}>ADMINISTRATION</p>
+          <p className={styles.accountName}>Super Admin</p>
+        </div>
+      ) : (
+        <div className={styles.account}>
+          <p className={styles.accountName}>Point relais</p>
+          <p className={styles.meta}>Carrefour City — Abidjan 12e</p>
+          <p className={styles.meta}>Relais #PR-0842</p>
+        </div>
+      )}
+      <nav className={styles.nav} aria-label="Navigation latérale">
+        {navigation.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            className={cn(styles.item, item.id === current && styles.active)}
+            aria-current={item.id === current ? 'page' : undefined}
+            onClick={() => onSelect?.(item.id)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </nav>
+      {variant === 'admin' ? (
+        <div className={styles.status}>
+          <p className={styles.kicker}>PLATEFORME</p>
+          <p className={styles.ok}>● Tous les services opérationnels</p>
+          <p className={styles.meta}>Dernière vérification · à l’instant</p>
+          <p className={styles.meta}>Version admin 1.0</p>
+        </div>
+      ) : (
+        <button type="button" className={styles.logout}>
+          Déconnexion
+        </button>
+      )}
+    </aside>
+  );
+}

package/src/components/Sidebar/index.ts

@@ -0,0 +1 @@
+export { Sidebar, ADMIN_ITEMS, GERANT_ITEMS, type SidebarProps, type SidebarVariant, type SidebarItem } from './Sidebar';

package/src/components/SidebarNavItem/SidebarNavItem.module.css

@@ -0,0 +1,21 @@
+.item {
+  display: flex;
+  align-items: center;
+  width: 220px;
+  height: 44px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: var(--color-sidebar);
+  color: var(--color-sidebar-text);
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.active {
+  background: var(--color-sidebar-active);
+  color: #fff;
+  font-weight: 600;
+}

package/src/components/SidebarNavItem/SidebarNavItem.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SidebarNavItem } from './SidebarNavItem';
+
+describe('<SidebarNavItem>', () => {
+  it('should render the label', () => {
+    render(<SidebarNavItem label="Tableau de bord" active />);
+    expect(screen.getByRole('button', { name: 'Tableau de bord' })).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('should call onClick when activated', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<SidebarNavItem label="Colis" onClick={onClick} />);
+
+    await user.click(screen.getByRole('button', { name: 'Colis' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/SidebarNavItem/SidebarNavItem.tsx

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

package/src/components/SidebarNavItem/index.ts

@@ -0,0 +1 @@
+export { SidebarNavItem, type SidebarNavItemProps } from './SidebarNavItem';

package/src/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,22 @@
+.skeleton {
+  display: inline-block;
+  background: var(--color-skeleton);
+}
+
+.text {
+  width: 200px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.rectangle {
+  width: 200px;
+  height: 80px;
+  border-radius: 8px;
+}
+
+.circle {
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+}

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Skeleton } from './Skeleton';
+
+describe('<Skeleton>', () => {
+  it('should render a loading placeholder', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/cn';
+import styles from './Skeleton.module.css';
+
+export type SkeletonType = 'text' | 'rectangle' | 'circle';
+
+export interface SkeletonProps {
+  type?: SkeletonType;
+  className?: string;
+}
+
+export function Skeleton({ type = 'text', className }: SkeletonProps) {
+  return <span className={cn(styles.skeleton, styles[type], className)} aria-hidden="true" />;
+}

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, type SkeletonType } from './Skeleton';

package/src/components/StatCard/StatCard.module.css

@@ -0,0 +1,22 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 420px;
+  max-width: 100%;
+  padding: 20px 24px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: #fff;
+}
+
+.label,
+.hint {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.value {
+  font-size: 30px;
+  font-weight: 700;
+}

package/src/components/StatCard/StatCard.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { StatCard } from './StatCard';
+
+describe('<StatCard>', () => {
+  it('should render the statistic', () => {
+    render(<StatCard label="Colis en cours" value="0" hint="En transit ou en préparation" />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+});

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/cn';
+import styles from './StatCard.module.css';
+
+export interface StatCardProps {
+  label: string;
+  value: string;
+  hint: string;
+  className?: string;
+}
+
+export function StatCard({ label, value, hint, className }: StatCardProps) {
+  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/StatCard/index.ts

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps } from './StatCard';

package/src/components/StatusSummary/StatusSummary.module.css

@@ -0,0 +1,43 @@
+.summary {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  padding: 16px 20px;
+  overflow: hidden;
+  border: 1px solid #e8eaee;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgb(16 24 40 / 5%);
+}
+
+.item {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+}
+
+.item p {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.item p:first-child {
+  color: #606978;
+  font-size: 12px;
+}
+
+.item p:last-child {
+  margin-top: 4px;
+  color: #191d26;
+  font-size: 14px;
+}
+
+.rule {
+  width: 1px;
+  height: 40px;
+  background: #e8eaee;
+}

package/src/components/StatusSummary/StatusSummary.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { StatusSummary } from './StatusSummary';
+
+describe('<StatusSummary>', () => {
+  it('should render the next step', () => {
+    render(<StatusSummary />);
+    expect(screen.getByText('Disponible en point relais')).toBeInTheDocument();
+  });
+});

package/src/components/StatusSummary/StatusSummary.tsx

@@ -0,0 +1,32 @@
+import styles from './StatusSummary.module.css';
+
+export interface StatusSummaryItem {
+  label: string;
+  value: string;
+}
+
+export interface StatusSummaryProps {
+  items?: StatusSummaryItem[];
+}
+
+const DEFAULT_ITEMS: StatusSummaryItem[] = [
+  { label: 'Estimé', value: '15 août 2026' },
+  { label: 'Localisation', value: 'Bouaké 3e' },
+  { label: 'Étape suivante', value: 'Disponible en point relais' },
+];
+
+export function StatusSummary({ items = DEFAULT_ITEMS }: StatusSummaryProps) {
+  return (
+    <div className={styles.summary}>
+      {items.map((item, index) => (
+        <div key={item.label} className={styles.item}>
+          {index > 0 ? <span className={styles.rule} /> : null}
+          <div>
+            <p>{item.label}</p>
+            <p>{item.value}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/StatusSummary/index.ts

@@ -0,0 +1 @@
+export { StatusSummary, type StatusSummaryItem, type StatusSummaryProps } from './StatusSummary';

package/src/components/StepCard/StepCard.module.css

@@ -0,0 +1,48 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  max-width: 258px;
+  padding: 24px;
+  border: 1px solid #e5e8ed;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: #fdf4f6;
+}
+
+.index {
+  color: rgb(211 72 96 / 12%);
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.title {
+  margin: 0;
+  color: #191d26;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.description {
+  margin: -8px 0 0;
+  color: #606978;
+  font-size: 14px;
+  line-height: 1.5;
+}

package/src/components/StepCard/StepCard.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { StepCard } from './StepCard';
+
+describe('<StepCard>', () => {
+  it('should render the step title', () => {
+    render(<StepCard />);
+    expect(screen.getByRole('heading', { name: 'Préparez votre colis' })).toBeInTheDocument();
+  });
+});

package/src/components/StepCard/StepCard.tsx

@@ -0,0 +1,27 @@
+import parcel from '@/assets/icons/core-package.svg';
+import styles from './StepCard.module.css';
+
+export interface StepCardProps {
+  index?: string;
+  title?: string;
+  description?: string;
+}
+
+export function StepCard({
+  index = '01',
+  title = 'Préparez votre colis',
+  description = 'Destinataire, poids et dimensions.',
+}: StepCardProps) {
+  return (
+    <article className={styles.card}>
+      <div className={styles.header}>
+        <span className={styles.icon}>
+          <img src={parcel} alt="" width={28} height={28} />
+        </span>
+        <span className={styles.index}>{index}</span>
+      </div>
+      <h3 className={styles.title}>{title}</h3>
+      <p className={styles.description}>{description}</p>
+    </article>
+  );
+}

package/src/components/StepCard/index.ts

@@ -0,0 +1 @@
+export { StepCard, type StepCardProps } from './StepCard';

package/src/components/Stepper/Stepper.module.css

@@ -0,0 +1,66 @@
+.stepper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.done,
+.active {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.upcoming {
+  background: var(--color-surface-muted);
+  color: var(--color-text-secondary);
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+.labelActive {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.connector {
+  width: 48px;
+  height: 2px;
+  background: var(--color-primary);
+}
+
+.connectorMuted {
+  background: #e8eaee;
+}

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { Stepper } from './Stepper';
+
+describe('<Stepper>', () => {
+  it('should render each step label', () => {
+    render(
+      <Stepper
+        steps={[
+          { label: 'Je prépare mon colis', state: 'done' },
+          { label: 'Récapitulatif', state: 'active' },
+          { label: 'Paiement', state: 'upcoming' },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Je prépare mon colis')).toBeInTheDocument();
+    expect(screen.getByText('Récapitulatif')).toBeInTheDocument();
+    expect(screen.getByText('Paiement')).toBeInTheDocument();
+  });
+});

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/cn';
+import styles from './Stepper.module.css';
+
+export type StepState = 'done' | 'active' | 'upcoming';
+
+export interface Step {
+  label: string;
+  state: StepState;
+}
+
+export interface StepperProps {
+  steps: Step[];
+  className?: string;
+}
+
+export function Stepper({ steps, className }: StepperProps) {
+  return (
+    <ol className={cn(styles.stepper, className)}>
+      {steps.map((step, index) => (
+        <li key={step.label} className={styles.item}>
+          {index > 0 ? (
+            <span
+              className={cn(styles.connector, step.state === 'upcoming' && styles.connectorMuted)}
+              aria-hidden="true"
+            />
+          ) : null}
+          <span className={styles.content}>
+            <span className={cn(styles.dot, styles[step.state])} aria-hidden="true">
+              {step.state === 'done' ? '✓' : index + 1}
+            </span>
+            <span className={cn(styles.label, step.state === 'active' && styles.labelActive)}>
+              {step.label}
+            </span>
+          </span>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/Stepper/index.ts

@@ -0,0 +1 @@
+export { Stepper, type StepperProps, type Step, type StepState } from './Stepper';

package/src/components/StepsList/StepsList.module.css

@@ -0,0 +1,35 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 632px;
+  margin: 0;
+  padding: 16px 18px;
+  list-style: none;
+  border-radius: 16px;
+  background: #f9fafc;
+}
+
+.list li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #191d26;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.list span {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #d34860;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+}

package/src/components/StepsList/StepsList.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { StepsList } from './StepsList';
+
+describe('<StepsList>', () => {
+  it('should render the three steps', () => {
+    render(<StepsList />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expect(screen.getByText('Activation de votre espace gérant')).toBeInTheDocument();
+  });
+});

package/src/components/StepsList/StepsList.tsx

@@ -0,0 +1,24 @@
+import styles from './StepsList.module.css';
+
+export interface StepsListProps {
+  steps?: string[];
+}
+
+const DEFAULT_STEPS = [
+  'Vérification des informations',
+  'Validation administrative',
+  'Activation de votre espace gérant',
+];
+
+export function StepsList({ steps = DEFAULT_STEPS }: StepsListProps) {
+  return (
+    <ol className={styles.list}>
+      {steps.map((step, index) => (
+        <li key={step}>
+          <span>{index + 1}</span>
+          {step}
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/StepsList/index.ts

@@ -0,0 +1 @@
+export { StepsList, type StepsListProps } from './StepsList';