@arcpkg/mda

@arcpkg/mda est le système de composants design MDA pour React (DOM) — la bibliothèque MDA de arcjs-app extraite en paquet autonome. ~80 composants (Button, Card, Dialog, Charts, DatePicker, Drawer, Tabs, …) avec un thème CSS (theme.css/cx.ts), une i18n intégrée et des icônes fournies par @arcpkg/mda-svgicons (composant SvgIcon, icônes nommées tree-shakeables).

Structure de plugin npm comme les paquets @arcpkg/* : source TypeScript à la racine (main: index.ts) + miroir compilé js/.

📦 Installation

npm install @arcpkg/mda @arcpkg/mda-svgicons react react-dom

Dépendances

• @arcpkg/mda-svgicons (icônes)
• React 19+, React DOM 19+
• Un bundler (Vite recommandé) qui résout l'import à effet de bord ./theme.css

🚀 Utilisation

import { Button, Card, CardContent, Chip, MDALocaleProvider } from '@arcpkg/mda';

export default function App() {
  return (
    <MDALocaleProvider locale="fr">
      <Card>
        <CardContent>
          <Chip label="MDA" />
          <Button variant="contained" onClick={() => {}}>Valider</Button>
        </CardContent>
      </Card>
    </MDALocaleProvider>
  );
}

Icônes

Les composants affichent leurs icônes via SvgIcon de @arcpkg/mda-svgicons, en important chaque glyphe nommé directement (la couleur hérite de currentColor et la taille suit la prop size) :

import { SvgIcon } from '@arcpkg/mda-svgicons';
import home from '@arcpkg/mda-svgicons/icons/home';

<SvgIcon icon={home} size={13} color="#1976d2" />

🗂️ Structure

@arcpkg/mda/
  index.ts            # barrel public (tous les composants + thème + i18n)
  theme.css  cx.ts    # thème CSS + helpers de style/couleur
  _shared/            # i18n, hooks de navigation, …
  <Component>/        # ~80 dossiers de composants
  js/                 # miroir compilé (esbuild)
  package.json  tsconfig.json  README.md

🛠️ (Re)génération du miroir js/

npm run build   # node build-js.mjs (esbuild → js/ + copie theme.css)

📄 Licence

MIT © INICODE