lerelais-front-library 0.1.0

package/src/components/RelayResultCard/RelayResultCard.tsx

@@ -0,0 +1,34 @@
+import styles from './RelayResultCard.module.css';
+
+export interface RelayResultCardProps {
+  name?: string;
+  status?: string;
+  badge?: string;
+  address?: string;
+  distance?: string;
+}
+
+export function RelayResultCard({
+  name = 'Carrefour City - 350 m',
+  status = 'Ouvert',
+  badge = 'recommandé',
+  address = "12 rue de Charenton · Ouvert jusqu'à 21h",
+  distance = '350 m',
+}: RelayResultCardProps) {
+  return (
+    <article className={styles.card}>
+      <div className={styles.content}>
+        <p className={styles.name}>{name}</p>
+        <div className={styles.meta}>
+          <span className={styles.status}>
+            <span className={styles.dot} />
+            {status}
+          </span>
+          <span className={styles.badge}>{badge}</span>
+        </div>
+        <p className={styles.address}>{address}</p>
+      </div>
+      <span className={styles.distance}>{distance}</span>
+    </article>
+  );
+}

package/src/components/RelayResultCard/index.ts

@@ -0,0 +1 @@
+export { RelayResultCard, type RelayResultCardProps } from './RelayResultCard';

package/src/components/ResetPasswordCard/ResetPasswordCard.module.css

@@ -0,0 +1,102 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  width: 100%;
+  max-width: 480px;
+  padding: 48px;
+  overflow: hidden;
+  border: 1px solid #e8eaee;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgb(16 24 40 / 8%);
+}
+
+.icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background: #fde7e0;
+}
+
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  text-align: center;
+}
+
+.copy h3 {
+  margin: 0;
+  color: #191d26;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.copy p {
+  margin: 0;
+  color: #606978;
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  width: 100%;
+  color: #191d26;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.field input {
+  height: 50px;
+  padding: 0 15px;
+  border: 1px solid #e8eaee;
+  border-radius: 12px;
+  background: #f9fafb;
+  color: #191d26;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.field input::placeholder {
+  color: #606978;
+}
+
+.submit {
+  width: 100%;
+  padding: 13px 20px;
+  border: 0;
+  border-radius: 14px;
+  background: #d34860;
+  box-shadow: 0 10px 24px rgb(211 72 96 / 20%);
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.back {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #d34860;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  text-align: center;
+}

package/src/components/ResetPasswordCard/ResetPasswordCard.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ResetPasswordCard } from './ResetPasswordCard';
+
+describe('<ResetPasswordCard>', () => {
+  it('should submit the email', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<ResetPasswordCard onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText('Adresse email'), 'ada@lerelais.fr');
+    await user.click(screen.getByRole('button', { name: 'Envoyer le lien' }));
+
+    expect(onSubmit).toHaveBeenCalledWith('ada@lerelais.fr');
+  });
+});

package/src/components/ResetPasswordCard/ResetPasswordCard.tsx

@@ -0,0 +1,45 @@
+import type { FormEvent } from 'react';
+import lock from '@/assets/icons/core-lock-form.svg';
+import styles from './ResetPasswordCard.module.css';
+
+export interface ResetPasswordCardProps {
+  title?: string;
+  description?: string;
+  onSubmit?: (email: string) => void;
+  onBack?: () => void;
+}
+
+export function ResetPasswordCard({
+  title = 'Mot de passe oublié',
+  description = 'Indiquez votre adresse email pour recevoir un lien de réinitialisation.',
+  onSubmit,
+  onBack,
+}: ResetPasswordCardProps) {
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    onSubmit?.(String(data.get('email') ?? ''));
+  }
+
+  return (
+    <form className={styles.card} onSubmit={handleSubmit}>
+      <span className={styles.icon}>
+        <img src={lock} alt="" width={24} height={24} />
+      </span>
+      <div className={styles.copy}>
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+      <label className={styles.field}>
+        Adresse email
+        <input name="email" type="email" placeholder="vous@email.fr" />
+      </label>
+      <button type="submit" className={styles.submit}>
+        Envoyer le lien
+      </button>
+      <button type="button" className={styles.back} onClick={onBack}>
+        Retour à la connexion
+      </button>
+    </form>
+  );
+}

package/src/components/ResetPasswordCard/index.ts

@@ -0,0 +1 @@
+export { ResetPasswordCard, type ResetPasswordCardProps } from './ResetPasswordCard';

package/src/components/SearchBar/SearchBar.module.css

@@ -0,0 +1,33 @@
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 360px;
+  max-width: 100%;
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.icon {
+  color: var(--color-text);
+  font-size: 16px;
+}
+
+.input {
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 14px;
+}
+
+.input::placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.input:focus {
+  outline: none;
+}

package/src/components/SearchBar/SearchBar.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SearchBar } from './SearchBar';
+
+describe('<SearchBar>', () => {
+  it('should render the search field', () => {
+    render(<SearchBar placeholder="Rechercher un colis, un relais…" />);
+    expect(screen.getByRole('searchbox', { name: 'Recherche' })).toBeInTheDocument();
+  });
+
+  it('should update the query when the user types', async () => {
+    const user = userEvent.setup();
+    render(<SearchBar />);
+
+    await user.type(screen.getByRole('searchbox'), 'Cocody');
+
+    expect(screen.getByRole('searchbox')).toHaveValue('Cocody');
+  });
+});

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './SearchBar.module.css';
+
+export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+}
+
+export function SearchBar({ label = 'Recherche', className, ...props }: SearchBarProps) {
+  return (
+    <label className={cn(styles.bar, className)}>
+      <span className={styles.icon} aria-hidden="true">
+        ⌕
+      </span>
+      <input className={styles.input} type="search" aria-label={label} {...props} />
+    </label>
+  );
+}

package/src/components/SearchBar/index.ts

@@ -0,0 +1 @@
+export { SearchBar, type SearchBarProps } from './SearchBar';

package/src/components/Select/Select.module.css

@@ -0,0 +1,64 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 280px;
+  max-width: 100%;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-strong);
+}
+
+.box {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.box:focus-within {
+  border: 2px solid var(--color-primary);
+}
+
+.boxError {
+  border-color: var(--color-error);
+}
+
+.select {
+  width: 100%;
+  height: 100%;
+  padding: 0 14px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 14px;
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, #7a8494 50%),
+    linear-gradient(135deg, #7a8494 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) 19px,
+    calc(100% - 12px) 19px;
+  background-size:
+    6px 6px,
+    6px 6px;
+  background-repeat: no-repeat;
+}
+
+.select:invalid,
+.select option[value=''] {
+  color: var(--color-text-placeholder);
+}
+
+.select:disabled {
+  opacity: 0.5;
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-error);
+}

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select } from './Select';
+
+const options = [
+  { value: 'relay', label: 'Point relais' },
+  { value: 'home', label: 'Domicile' },
+];
+
+describe('<Select>', () => {
+  it('should render the label and the placeholder', () => {
+    render(<Select label="Mode de livraison" options={options} />);
+    expect(screen.getByLabelText('Mode de livraison')).toBeInTheDocument();
+  });
+
+  it('should update the selected option', async () => {
+    const user = userEvent.setup();
+    render(<Select label="Mode de livraison" options={options} />);
+
+    await user.selectOptions(screen.getByLabelText('Mode de livraison'), 'relay');
+
+    expect(screen.getByLabelText('Mode de livraison')).toHaveValue('relay');
+  });
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,60 @@
+import { useId, type SelectHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './Select.module.css';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Libellé visible au-dessus du champ. */
+  label: string;
+  options: SelectOption[];
+  /** Texte affiché tant qu’aucune valeur n’est choisie. */
+  placeholder?: string;
+  error?: string;
+}
+
+export function Select({
+  label,
+  options,
+  placeholder = 'Sélectionner…',
+  error,
+  id,
+  className,
+  ...props
+}: SelectProps) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const errorId = error ? `${fieldId}-error` : undefined;
+
+  return (
+    <div className={cn(styles.field, className)}>
+      <label className={styles.label} htmlFor={fieldId}>
+        {label}
+      </label>
+      <div className={cn(styles.box, error && styles.boxError)}>
+        <select
+          id={fieldId}
+          className={styles.select}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={errorId}
+          {...props}
+        >
+          <option value="">{placeholder}</option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      {error ? (
+        <p id={errorId} className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { Select, type SelectProps, type SelectOption } from './Select';

package/src/components/ShipmentStatus/ShipmentStatus.module.css

@@ -0,0 +1,41 @@
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.neutral {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-secondary);
+}
+
+.info {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+}

package/src/components/ShipmentStatus/ShipmentStatus.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { ShipmentStatus } from './ShipmentStatus';
+
+describe('<ShipmentStatus>', () => {
+  it('should render the preparing label', () => {
+    render(<ShipmentStatus />);
+    expect(screen.getByText('Préparation')).toBeInTheDocument();
+  });
+
+  it('should render the anomaly label', () => {
+    render(<ShipmentStatus status="anomaly" />);
+    expect(screen.getByText('Anomalie')).toBeInTheDocument();
+  });
+});

package/src/components/ShipmentStatus/ShipmentStatus.tsx

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/cn';
+import styles from './ShipmentStatus.module.css';
+
+export type ShipmentStatusValue =
+  | 'preparing'
+  | 'dropped'
+  | 'picked'
+  | 'transit'
+  | 'available'
+  | 'collected'
+  | 'delivered'
+  | 'anomaly'
+  | 'expired';
+
+const LABELS: Record<ShipmentStatusValue, string> = {
+  preparing: 'Préparation',
+  dropped: 'Déposé',
+  picked: 'Pris en charge',
+  transit: 'En transit',
+  available: 'Disponible',
+  collected: 'Retiré',
+  delivered: 'Livré',
+  anomaly: 'Anomalie',
+  expired: 'Expiré',
+};
+
+const TONE: Record<ShipmentStatusValue, string> = {
+  preparing: 'neutral',
+  dropped: 'info',
+  picked: 'info',
+  transit: 'warning',
+  available: 'success',
+  collected: 'success',
+  delivered: 'success',
+  anomaly: 'error',
+  expired: 'error',
+};
+
+export interface ShipmentStatusProps {
+  status?: ShipmentStatusValue;
+  className?: string;
+}
+
+export function ShipmentStatus({ status = 'preparing', className }: ShipmentStatusProps) {
+  const tone = TONE[status];
+  return (
+    <span className={cn(styles.status, styles[tone], className)}>
+      <span className={styles.dot} aria-hidden="true" />
+      {LABELS[status]}
+    </span>
+  );
+}

package/src/components/ShipmentStatus/index.ts

@@ -0,0 +1 @@
+export { ShipmentStatus, type ShipmentStatusProps, type ShipmentStatusValue } from './ShipmentStatus';

package/src/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,79 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  width: 248px;
+  min-height: 100%;
+  padding: 26px 18px 24px;
+  background: var(--color-sidebar);
+  color: #fff;
+}
+
+.account,
+.status {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 212px;
+  padding: 12px 14px;
+  border-radius: var(--radius-md);
+  background: var(--color-sidebar-raised);
+}
+
+.kicker {
+  color: var(--color-text-placeholder);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.accountName {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.meta {
+  color: var(--color-sidebar-muted);
+  font-size: 11px;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.item,
+.logout {
+  width: 212px;
+  height: 40px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  color: var(--color-sidebar-text);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.active {
+  background: var(--color-sidebar-active);
+  color: #fff;
+  font-weight: 600;
+}
+
+.status {
+  margin-top: auto;
+}
+
+.ok {
+  color: var(--color-success-bright);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.logout {
+  margin-top: auto;
+  color: var(--color-sidebar-muted);
+}

package/src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Sidebar } from './Sidebar';
+
+describe('<Sidebar>', () => {
+  it('should render the admin navigation', () => {
+    render(<Sidebar />);
+    expect(screen.getByRole('button', { name: 'Vue d’ensemble' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByText('Super Admin')).toBeInTheDocument();
+  });
+
+  it('should call onSelect when a section is activated', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<Sidebar onSelect={onSelect} />);
+
+    await user.click(screen.getByRole('button', { name: 'Colis' }));
+
+    expect(onSelect).toHaveBeenCalledWith('parcels');
+  });
+});