lerelais-front-library 0.1.0

package/src/components/SuccessFeedback/SuccessFeedback.module.css

@@ -0,0 +1,42 @@
+.feedback {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  max-width: 760px;
+  text-align: center;
+}
+
+.mark {
+  display: grid;
+  place-items: center;
+  width: 96px;
+  height: 96px;
+  border-radius: 999px;
+  background: #e8f7ed;
+  box-shadow:
+    0 2px 4px rgb(43 120 69 / 8%),
+    0 10px 12px rgb(43 120 69 / 13%);
+  color: #2b7845;
+  font-size: 44px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.feedback h3 {
+  margin: 0;
+  color: #191d26;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+.feedback p {
+  margin: 0;
+  color: #606978;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}

package/src/components/SuccessFeedback/SuccessFeedback.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { SuccessFeedback } from './SuccessFeedback';
+
+describe('<SuccessFeedback>', () => {
+  it('should render the tracking confirmation', () => {
+    render(<SuccessFeedback />);
+    expect(screen.getByRole('heading', { name: 'Votre envoi est créé !' })).toBeInTheDocument();
+  });
+});

package/src/components/SuccessFeedback/SuccessFeedback.tsx

@@ -0,0 +1,21 @@
+import styles from './SuccessFeedback.module.css';
+
+export interface SuccessFeedbackProps {
+  title?: string;
+  description?: string;
+}
+
+export function SuccessFeedback({
+  title = 'Votre envoi est créé !',
+  description = 'Votre colis porte le numéro LR-2026-084215.',
+}: SuccessFeedbackProps) {
+  return (
+    <div className={styles.feedback}>
+      <span className={styles.mark} aria-hidden="true">
+        ✓
+      </span>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}

package/src/components/SuccessFeedback/index.ts

@@ -0,0 +1 @@
+export { SuccessFeedback, type SuccessFeedbackProps } from './SuccessFeedback';

package/src/components/Switch/Switch.module.css

@@ -0,0 +1,57 @@
+.control {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 44px;
+  height: 24px;
+  margin: 0;
+}
+
+.track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  border-radius: 12px;
+  background: #d0d5dd;
+  flex-shrink: 0;
+}
+
+.knob {
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: var(--shadow-knob);
+  transition: left 0.15s ease;
+}
+
+.input:checked + .track {
+  background: var(--color-primary);
+}
+
+.input:checked + .track .knob {
+  left: 21px;
+}
+
+.input:focus-visible + .track {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.input:disabled + .track {
+  opacity: 0.5;
+}
+
+.label {
+  font-size: 13px;
+  color: var(--color-text);
+}

package/src/components/Switch/Switch.test.tsx

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

package/src/components/Switch/Switch.tsx

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

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from './Switch';

package/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,26 @@
+.tabs {
+  display: flex;
+  background: #fff;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 38px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: #fff;
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  cursor: pointer;
+}
+
+.active {
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+  font-weight: 600;
+}

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tabs } from './Tabs';
+
+function Harness() {
+  const [value, setValue] = useState('all');
+  return (
+    <Tabs
+      value={value}
+      onChange={setValue}
+      items={[
+        { id: 'all', label: 'Tous' },
+        { id: 'transit', label: 'En transit' },
+      ]}
+    />
+  );
+}
+
+describe('<Tabs>', () => {
+  it('should mark the current tab as selected', () => {
+    render(<Harness />);
+    expect(screen.getByRole('tab', { name: 'Tous' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('should select another tab when activated', async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+
+    await user.click(screen.getByRole('tab', { name: 'En transit' }));
+
+    expect(screen.getByRole('tab', { name: 'En transit' })).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,38 @@
+import { cn } from '@/lib/cn';
+import styles from './Tabs.module.css';
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  value: string;
+  onChange: (id: string) => void;
+  className?: string;
+  /** Libellé accessible du groupe d’onglets. */
+  label?: string;
+}
+
+export function Tabs({ items, value, onChange, className, label = 'Sections' }: TabsProps) {
+  return (
+    <div className={cn(styles.tabs, className)} role="tablist" aria-label={label}>
+      {items.map((item) => {
+        const selected = item.id === value;
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            className={cn(styles.tab, selected && styles.active)}
+            onClick={() => onChange(item.id)}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs, type TabsProps, type TabItem } from './Tabs';

package/src/components/Tag/Tag.module.css

@@ -0,0 +1,39 @@
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-sunken);
+  color: var(--color-text-strong);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.active {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+}
+
+.remove {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tag } from './Tag';
+
+describe('<Tag>', () => {
+  it('should render its label', () => {
+    render(<Tag>Standard</Tag>);
+    expect(screen.getByText('Standard')).toBeInTheDocument();
+  });
+
+  it('should call onRemove when the remove button is activated', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(
+      <Tag type="removable" onRemove={onRemove}>
+        Filtre
+      </Tag>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Retirer Filtre' }));
+
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/lib/cn';
+import { Icon } from '@/components/Icon';
+import styles from './Tag.module.css';
+
+export type TagType = 'default' | 'active' | 'removable' | 'success' | 'warning' | 'error';
+
+export interface TagProps {
+  type?: TagType;
+  children: string;
+  onRemove?: () => void;
+  className?: string;
+}
+
+export function Tag({ type = 'default', children, onRemove, className }: TagProps) {
+  return (
+    <span className={cn(styles.tag, styles[type], className)}>
+      {children}
+      {type === 'removable' ? (
+        <button type="button" className={styles.remove} onClick={onRemove} aria-label={`Retirer ${children}`}>
+          <Icon name="close" size={12} />
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { Tag, type TagProps, type TagType } from './Tag';

package/src/components/TextField/TextField.module.css

@@ -0,0 +1,55 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 340px;
+  max-width: 100%;
+}
+
+.label {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-secondary);
+}
+
+.labelError {
+  color: var(--color-error);
+}
+
+.input {
+  width: 100%;
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-control);
+  background: #fff;
+  color: var(--color-text);
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+.input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.inputError {
+  border-color: var(--color-error);
+}
+
+.input:disabled {
+  background: var(--color-surface-muted);
+  border-color: var(--color-border);
+  color: var(--color-disabled);
+}
+
+.error {
+  font-size: 12px;
+  color: var(--color-error);
+}

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextField } from './TextField';
+
+describe('<TextField>', () => {
+  it('should render the label and the field', () => {
+    render(<TextField label="Libellé" placeholder="Saisir une valeur" />);
+    expect(screen.getByLabelText('Libellé')).toBeInTheDocument();
+  });
+
+  it('should update the value when the user types', async () => {
+    const user = userEvent.setup();
+    render(<TextField label="Ville" />);
+
+    await user.type(screen.getByLabelText('Ville'), 'Abidjan');
+
+    expect(screen.getByLabelText('Ville')).toHaveValue('Abidjan');
+  });
+
+  it('should expose the error message', () => {
+    render(<TextField label="Libellé" error="Ce champ est requis" />);
+    expect(screen.getByRole('alert')).toHaveTextContent('Ce champ est requis');
+  });
+});

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,37 @@
+import { useId, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+import styles from './TextField.module.css';
+
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Libellé visible au-dessus du champ. */
+  label: string;
+  /** Message d’erreur. Passe le champ en état invalide. */
+  error?: string;
+}
+
+export function TextField({ label, error, id, className, disabled, ...props }: TextFieldProps) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const errorId = error ? `${fieldId}-error` : undefined;
+
+  return (
+    <div className={cn(styles.field, className)}>
+      <label className={cn(styles.label, error && styles.labelError)} htmlFor={fieldId}>
+        {label}
+      </label>
+      <input
+        id={fieldId}
+        className={cn(styles.input, error && styles.inputError)}
+        disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={errorId}
+        {...props}
+      />
+      {error ? (
+        <p id={errorId} className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/TextField/index.ts

@@ -0,0 +1 @@
+export { TextField, type TextFieldProps } from './TextField';

package/src/components/Toast/Toast.module.css

@@ -0,0 +1,72 @@
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 400px;
+  max-width: 100%;
+  min-height: 72px;
+  padding: 14px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
+  background: #fff;
+  box-shadow: var(--shadow-toast);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.message {
+  flex: 1;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.close {
+  border: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.success {
+  border-color: rgba(43, 120, 69, 0.3);
+}
+.success .icon {
+  background: rgba(43, 120, 69, 0.12);
+  color: var(--color-success);
+}
+
+.error {
+  border-color: rgba(184, 50, 74, 0.3);
+}
+.error .icon {
+  background: rgba(184, 50, 74, 0.12);
+  color: var(--color-error);
+}
+
+.warning {
+  border-color: rgba(184, 106, 18, 0.3);
+}
+.warning .icon {
+  background: rgba(184, 106, 18, 0.12);
+  color: var(--color-warning);
+}
+
+.info {
+  border-color: rgba(47, 111, 204, 0.3);
+}
+.info .icon {
+  background: rgba(47, 111, 204, 0.12);
+  color: var(--color-info);
+}

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Toast } from './Toast';
+
+describe('<Toast>', () => {
+  it('should render the message', () => {
+    render(<Toast>Colis envoyé avec succès.</Toast>);
+    expect(screen.getByText('Colis envoyé avec succès.')).toBeInTheDocument();
+  });
+
+  it('should call onClose when the close button is activated', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<Toast onClose={onClose}>Colis envoyé avec succès.</Toast>);
+
+    await user.click(screen.getByRole('button', { name: 'Fermer' }));
+
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/cn';
+import styles from './Toast.module.css';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+const ICONS: Record<ToastType, string> = {
+  success: '✓',
+  error: '!',
+  warning: '⚠',
+  info: 'i',
+};
+
+export interface ToastProps {
+  type?: ToastType;
+  children: string;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function Toast({ type = 'success', children, onClose, className }: ToastProps) {
+  return (
+    <div className={cn(styles.toast, styles[type], className)} role="status">
+      <span className={styles.icon} aria-hidden="true">
+        {ICONS[type]}
+      </span>
+      <p className={styles.message}>{children}</p>
+      <button type="button" className={styles.close} onClick={onClose} aria-label="Fermer">
+        ✕
+      </button>
+    </div>
+  );
+}

package/src/components/Toast/index.ts

@@ -0,0 +1 @@
+export { Toast, type ToastProps, type ToastType } from './Toast';

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,37 @@
+.wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.tip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%);
+  padding: 6px 10px 10px;
+  border-radius: 6px;
+  background: var(--color-tooltip);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.tip::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 4px;
+  width: 8px;
+  height: 8px;
+  background: var(--color-tooltip);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.wrap:hover .tip,
+.wrap:focus-within .tip {
+  opacity: 1;
+}