Metric

Affiche un indicateur avec un libellé, une valeur et un delta optionnel (variation positive/négative).

Signature

import { Metric } from './bpm';

<Metric
  label={string}
  value={number|string}
  delta={number|undefined}
  deltaType="normal" | "inverse"
  deltaDecimals={number}
  currency={string}
  help={string|null}
/>

Parameters

Examples

Example 1: Afficher une métrique

<Metric label="Valorisation" value={12345.67} delta={+250.5} currency="EUR" />

Example 2: Plusieurs métriques côte à côte

import { Metric } from './bpm';

<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
  <Metric label="Valorisation" value={valorisation} delta={deltaVal} currency="EUR" />
  <Metric label="Positions" value={nbPositions} />
  <Metric label="Valeur nette" value={valeurNette} delta={deltaNet} currency="EUR" />
</div>

Example 3: Inverser la couleur du delta

Pour un indicateur où une baisse est positive (ex. coût), utilisez deltaType="inverse".

<Metric
  label="Coût"
  value={4200}
  delta={-150}
  deltaType="inverse"
  currency="EUR"
/>

Button

Bouton avec variantes (primary, secondary, danger) et tailles (small, medium, large).

Signature

import { Button } from './bpm';

<Button
  onClick={function}
  variant="primary" | "secondary" | "danger"
  size="small" | "medium" | "large"
  disabled={boolean}
  fullWidth={boolean}
  type="button" | "submit"
>
  {children}
</Button>

Parameters

Examples

Example 1: Bouton primary

<Button onClick={() => save()} variant="primary">Enregistrer</Button>

Example 2: Bouton danger et small

<Button onClick={() => confirmDelete()} variant="danger" size="small">Supprimer</Button>

Selectbox

Liste déroulante avec options, label, aide et placeholder. Gère le clic extérieur et Escape.

Signature

import { Selectbox } from './bpm';

<Selectbox
  label={string}
  options={Array<{ value, label }>}
  value={any}
  onChange={function}
  placeholder="Sélectionner..."
  disabled={boolean}
  required={boolean}
  help={string|null}
/>

Parameters

Examples

Example 1: Liste simple

<Selectbox
  label="Devise"
  options={[{ value: 'EUR', label: 'Euro' }, { value: 'USD', label: 'Dollar' }]}
  value={currency}
  onChange={setCurrency}
/>

Table

Tableau triable. Colonnes avec key, label, optionnellement align. Données = tableau d’objets.

Signature

import { Table } from './bpm';

<Table
  columns={Array<{ key, label, align? }>}
  data={Array<object>}
  striped={boolean}
  hover={boolean}
  onRowClick={function}
  defaultSortColumn={string|null}
  defaultSortDirection="asc" | "desc"
  name={string|null}
  keyColumn={string|null}
/>

Parameters

NumberInput

Champ numérique avec label, min/max/step, aide. Contrôlé ou non contrôlé.

Signature

<NumberInput label="Montant" value={n} onChange={setN} min={0} max={100} step={1} disabled={false} help={null} />

Parameters

DateInput

Sélecteur de date (type date) avec label, min/max et aide.

Signature

<DateInput label="Date" value={date} onChange={setDate} min={minDate} max={maxDate} disabled={false} />

Parameters

ColorPicker

Sélecteur de couleur (input color) avec label et valeur hex.

Signature

<ColorPicker label="Couleur" value={color} onChange={setColor} disabled={false} help={null} />

Parameters

Tabs

Onglets avec contenu. tabs = tableau de { label, content } ou de strings.

Signature

<Tabs tabs={[{ label: 'A', content: <p>Contenu A</p> }, { label: 'B', content: <p>Contenu B</p> }]} defaultTab={0} onChange={(index) => {}} />

Parameters

Message

Bloc de message avec type info, success, warning ou error.

Signature

<Message type="info" | "success" | "warning" | "error">{children}</Message>

Modal

Fenêtre modale avec titre, fermeture Escape et clic sur le fond. Rendu en portail.

Signature

<Modal isOpen={open} onClose={() => setOpen(false)} title="Titre" size="medium" | "small" | "large" showCloseButton={true}>{children}</Modal>

Toast

Notifications toast. Envelopper l’app avec ToastProvider et utiliser le hook useToast().

Signature

import { ToastProvider, useToast } from './bpm';

// À la racine
<ToastProvider>{children}</ToastProvider>

// Dans un composant
const { showToast } = useToast();
showToast(message, type, duration, title, pageName, pageIcon);

Spinner

Indicateur de chargement avec texte optionnel et tailles small, medium, large.

Signature

<Spinner text="Chargement..." size="medium" | "small" | "large" />

Tooltip

Infobulle (MUI). text = contenu, position = top, bottom, left, right, top-start, etc.

Signature

<Tooltip text="Explication" position="top"><span>Survoler</span></Tooltip>

Title

Titre avec niveaux 1–4. Niveau 1 affiche le logo (optionnel onLogoClick). Exporte Title1, Title2, Title3, Title4.

Signature

<Title level={1|2|3|4} onLogoClick={function|null}>{children}</Title>
// ou
<Title1>Mon écran</Title1>
<Title2>Sous-titre</Title2>

Panel

Panneau informatif (alertes, états). Variantes : info, warning, error, success.

Signature

<Panel variant="info" | "warning" | "error" | "success" title="Titre" icon={node|false}>{children}</Panel>

Box

Bloc avec titre, statut, détails. Optionnel isConnected pour style vert/rouge.

Signature

<Box title="Connexion" status="..." details="..." isConnected={boolean} actions={node} />

Expander

Bloc repliable avec titre. defaultExpanded pour ouvrir par défaut.

Signature

<Expander title="Détails" defaultExpanded={false}>{children}</Expander>