@algomedis-sas/prism-ui (0.3.50)

Published 2026-08-03 05:40:50 +00:00 by corent1lb

Setup this registry in your project .npmrc file:

@algomedis-sas:registry=

To install the package using npm, run the following command:

npm install @algomedis-sas/prism-ui@0.3.50

or add it to the package.json file:

"@algomedis-sas/prism-ui": "0.3.50"

For more information on the npm registry, see the documentation.

Prism UI

Design system partagé pour l'écosystème Prism Médical.

Prism-UI centralise le branding, les tokens, les composants React, les layouts, les patterns d'écran, et les pages auth/system communes pour :

Prism Ressources
Prism Planning
Prism Admin

Ce projet est une librairie frontend, pas une API backend.

Objectif

Standardiser l'UI existante de Prism-backend (ancien Prism Ressources), tout en améliorant :

la cohérence visuelle
la réutilisabilité
l'accessibilité
la maintenance
le responsive

Stack cible

React 19.2.4
React DOM 19.2.4
TypeScript 5.9.3
Tailwind CSS 4.2.1
Vite 7.x
Node.js 24 (image Docker cible: node:24-alpine)
Prism SVG icon registry
react-hot-toast

Branding

API cible:

<PrismLogo />
<PrismLogo variant="ressources" />
<PrismLogo variant="planning" />
<PrismLogo lockup="prism" />
<PrismLogo lockup="medical" />

<PrismBrand app="ressources" />
<PrismBrand app="planning" />
<PrismBrand app="admin" />

Règles branding :

logos light/dark pour chaque marque
2 lockups Prism principaux:
- icon + PRISM
- icon + Prism Médical
une icône email par app (sans light/dark)
prism-icon commun (sans light/dark)
favicon commun (sans light/dark)

Theme / Dark mode (contrat)

darkMode: "class" (Tailwind)
états : light | dark | auto
persistance : localStorage clé theme
auto suit prefers-color-scheme
fallback light si indéterminable
priorité : préférence utilisateur > préférence système
application via classe light ou dark sur document.documentElement
provider partagé : ThemeProvider + useTheme()
PrismLogo / PrismBrand résolvent les assets via resolvedTheme

Typographie (OS-aware)

La police par défaut doit suivre l'OS de l'utilisateur (Windows/macOS/Linux/iOS/Android) via une stack système.

Stack recommandée :

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Pour les emails, on conserve aussi une stack système compatible clients mail.

Icons

Prism-UI expose un registre SVG interne via Icon. Les applications hotes n'ont pas a charger Google Fonts / Material Symbols.

import { Icon, resourcesIconMap } from '@algomedis-sas/prism-ui'

<Icon name="dashboard" />
<Icon name={resourcesIconMap.medications} />

Contrat :

les icones partagées Prism sont centralisees dans Prism-UI
healthicons-react et autres icon packs ne doivent pas etre requis par les apps metier pour les patterns partages
les noms utiles a Prism Ressources sont exposes via resourcesIconMap

Toasts

Base technique: react-hot-toast
Le rendu visuel et le comportement doivent reproduire exactement Prism-backend.

Email templates

Oui, on intègre des templates email de base dans Prism-UI, mais en mode présentation uniquement :

layout/template HTML partagé
branding partagé
composants de contenu réutilisables

Hors scope Prism-UI:

envoi d'emails (SMTP/Nodemailer)
orchestration backend (queue/retry/providers)

Effet blur

Le design system introduit un style blur/translucide (glass) de manière contrôlée :

modals et overlays
drawers / slide panels
popovers flottants (si pertinent)

Objectif : rester lisible et cohérent, sans blur global agressif.

Utilisez NavigationProgress ou son alias PageTransitionBar pour signaler une transition de route sans remplacer tout le contenu par un spinner.

import { NavigationProgress, PageLoadingOverlay } from '@algomedis-sas/prism-ui'
import { useNavigation } from 'react-router'

export function AppLayout() {
  const navigation = useNavigation()
  const isPending = navigation.state !== 'idle'

  return (
    <>
      <NavigationProgress
        active={isPending}
        position="header"
        label="Chargement"
        srLabel="Chargement de la page"
      />
      <main className="relative">
        {/* contenu */}
        <PageLoadingOverlay active={isPending} label="Synchronisation" />
      </main>
    </>
  )
}

Avec un état local ou useTransition :

<NavigationProgress active={isPending} position="content" variant="bar" />

Notes :

variant="bar" garde le contenu totalement visible.
variant="veil" applique un voile glass volontairement plus présent.
variant="skeleton" ajoute un shimmer discret, utile dans un conteneur relative.

Sidebar avec routing

Sidebar peut gérer des items avec href et calculer l'état actif depuis currentPath, sans dépendre de react-router-dom.

import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import { Sidebar } from '@algomedis-sas/prism-ui'

export function AppSidebar() {
  const location = useLocation()
  const navigate = useNavigate()

  return (
    <Sidebar
      groups={groups}
      currentPath={location.pathname}
      onNavigate={navigate}
      renderLink={({ item, className, children, onClick }) => (
        <NavLink to={item.href ?? '#'} className={className} onClick={onClick}>
          {children}
        </NavLink>
      )}
    />
  )
}

Contrat utile :

href transforme un item feuille en lien.
currentPath active automatiquement un item si le chemin correspond a href ou a un sous-chemin.
isItemActive permet de remplacer cette logique.
onSelect reste supporte pour les callbacks existants.
closeOnNavigate ferme le drawer mobile apres clic sur un lien, par defaut.
renderLink permet d'injecter NavLink, Link, ou le routeur de l'application hote.

Distribution et installation consommateur

@algomedis-sas/prism-ui est distribue via GitHub Packages (scope @algomedis-sas).

Imports publics

Privilégiez les sous-chemins publics pour les nouveaux développements :

import { Button, Input, Select } from '@algomedis-sas/prism-ui/primitives'
import { Modal, Table } from '@algomedis-sas/prism-ui/composites'
import { AppShell, Sidebar } from '@algomedis-sas/prism-ui/layouts'
import { FilterBar, SearchBar } from '@algomedis-sas/prism-ui/patterns'
import { PrismProvider, toast } from '@algomedis-sas/prism-ui/providers'

L'import racine reste supporte pour compatibilite :

import { Button, Input, Modal, PrismProvider } from '@algomedis-sas/prism-ui'

N'importez jamais les fichiers internes src/* ou dist/* directement. Seuls ces chemins sont publics :

@algomedis-sas/prism-ui
@algomedis-sas/prism-ui/branding
@algomedis-sas/prism-ui/composites
@algomedis-sas/prism-ui/emails
@algomedis-sas/prism-ui/form
@algomedis-sas/prism-ui/icons
@algomedis-sas/prism-ui/layouts
@algomedis-sas/prism-ui/pages
@algomedis-sas/prism-ui/patterns
@algomedis-sas/prism-ui/primitives
@algomedis-sas/prism-ui/providers
@algomedis-sas/prism-ui/style.css
@algomedis-sas/prism-ui/favicon.ico

1) Configurer l'authentification npm (`.npmrc`)

Ajoutez un fichier .npmrc dans le projet consommateur:

@algomedis-sas:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
always-auth=true

2) Installer le package

npm install @algomedis-sas/prism-ui

3) Déclarer les sources Tailwind et importer les styles

Dans votre CSS global (ex: src/index.css):

@import "tailwindcss";
@source "../node_modules/@algomedis-sas/prism-ui/dist";
@import "@algomedis-sas/prism-ui/style.css";

3.b) Utiliser le favicon Prism (optionnel)

Prism-UI expose un asset public dedie : @algomedis-sas/prism-ui/favicon.ico.

Exemple (Vite / bundlers compatibles import URL) :

import prismFaviconUrl from '@algomedis-sas/prism-ui/favicon.ico?url'

const link = document.querySelector("link[rel='icon']") ?? document.createElement('link')
link.setAttribute('rel', 'icon')
link.setAttribute('href', prismFaviconUrl)
document.head.appendChild(link)

4) Monter le provider racine

Dans votre entrée React:

import { PrismProvider } from '@algomedis-sas/prism-ui'

export function AppRoot() {
  return (
    <PrismProvider>
      {/* votre app */}
    </PrismProvider>
  )
}

Boundary API publique

Utilisez uniquement les exports publics racine et subpath documentes (@algomedis-sas/prism-ui, @algomedis-sas/prism-ui/style.css).
Anti-pattern: ne jamais importer depuis le dossier source interne (@algomedis-sas/prism-ui/src...).

Scripts (état actuel)

npm run build
npm run typecheck
npm run typecheck:node

Structure cible

src/
  branding/
  icons/
  tokens/
  components/
  layouts/
  patterns/
  pages/
  providers/
  utils/
  index.ts

Voir idea.md pour la spécification complète (scope, architecture détaillée, checklist QA, contraintes et critères de succès).

Dependencies

ID	Version
clsx	^2.1.1
focus-trap	^8.2.2
tailwind-merge	^3.6.0

Development dependencies

ID	Version
@changesets/cli	^2.30.0
@tailwindcss/vite	^4.3.3
@types/node	^25.9.5
@types/react	^19.2.17
@types/react-dom	^19.2.3
@typescript/typescript6	^6.0.2
@vitejs/plugin-react	^6.0.4
react	^19.2.8
react-dom	^19.2.8
react-hot-toast	^2.6.0
tailwindcss	^4.3.3
typescript	^7.0.2
vite	8.1.5
vite-plugin-dts	^5.0.3

Peer dependencies

ID	Version
react	>=19.0.0
react-dom	>=19.0.0
react-hot-toast	>=2.0.0
tailwindcss	>=4.0.0

Details

npm

2026-08-03 05:40:50 +00:00

latest

6.8 MiB

Assets (1)

prism-ui-0.3.50.tgz 6.8 MiB

Versions (2) View all

0.3.50

2026-08-03

0.3.49

2026-08-03

@algomedis-sas/prism-ui (0.3.50)

Installation

About this package

Prism UI

Objectif

Stack cible

Branding

Theme / Dark mode (contrat)

Typographie (OS-aware)

Icons

Toasts

Email templates

Effet blur

Chargement de navigation

Sidebar avec routing

Distribution et installation consommateur

Imports publics

1) Configurer l'authentification npm (`.npmrc`)

2) Installer le package

3) Déclarer les sources Tailwind et importer les styles

3.b) Utiliser le favicon Prism (optionnel)

4) Monter le provider racine

Boundary API publique

Scripts (état actuel)

Structure cible

Dependencies

@algomedis-sas/prism-ui (0.3.50)

Installation

About this package

Prism UI

Objectif

Stack cible

Branding

Theme / Dark mode (contrat)

Typographie (OS-aware)

Icons

Toasts

Email templates

Effet blur

Chargement de navigation

Sidebar avec routing

Distribution et installation consommateur

Imports publics

1) Configurer l'authentification npm (.npmrc)

2) Installer le package

3) Déclarer les sources Tailwind et importer les styles

3.b) Utiliser le favicon Prism (optionnel)

4) Monter le provider racine

Boundary API publique

Scripts (état actuel)

Structure cible

Dependencies

1) Configurer l'authentification npm (`.npmrc`)