@jsarc/native-mda

@jsarc/native-mda est le système de composants design MDA pour React Native / Expo — le port natif de la bibliothèque MDA de arcjs-app. ~80 composants (Button, Card, Dialog, Charts, DatePicker, Drawer, Tabs, …) avec un thème JS (theme.ts/cx.ts), une i18n intégrée et des icônes fournies par @jsarc/native-mda-svgicons (un seul contexte IconStyle partagé).

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

📦 Installation

npm install @jsarc/native-mda @jsarc/native-mda-svgicons
# dépendances natives (projet Expo) :
npx expo install react-native-svg expo-linear-gradient expo-blur expo-video \
  expo-audio expo-document-picker expo-image-manipulator react-native-view-shot

Dépendances

• @jsarc/native-mda-svgicons (icônes)
• React 18+, React Native 0.81+, react-native-svg 15+
• Expo 54+ : expo-linear-gradient, expo-blur, expo-video, expo-audio, expo-document-picker, expo-image-manipulator, react-native-view-shot

🚀 Utilisation

import { Button, Card, CardContent, Chip, MDALocaleProvider } from '@jsarc/native-mda';

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

Icônes

Les composants affichent leurs icônes via MdaIcon, lui-même rendu par SvgIcon de @jsarc/native-mda-svgicons. La couleur et la taille héritent du plus proche <IconStyle> (≈ currentColor + font-size) :

import { MdaIcon, IconStyle } from '@jsarc/native-mda';

<IconStyle color="#1976d2" size={15}>
  <MdaIcon d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" />
</IconStyle>

Pour utiliser les 2583 icônes nommées du jeu MDA, importez-les directement depuis le paquet d'icônes :

import { SvgIcon } from '@jsarc/native-mda-svgicons';
import home from '@jsarc/native-mda-svgicons/icons/home';
<SvgIcon icon={home} size={24} />

🗂️ Structure

@jsarc/native-mda/
  index.ts            # barrel public (tous les composants + thème + i18n)
  theme.ts  cx.ts     # thème JS + helpers de style/couleur
  _shared/            # Icon (→ @jsarc/native-mda-svgicons), i18n, hooks, …
  <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/)

📄 Licence

MIT © INICODE