SIMUI

SIMUI est maintenant un projet separe du referentiel applicatif Animax. Ce dossier constitue le depot source de la librairie version 1.0.2.

Le package est prepare pour une publication npm sous le nom @simcorp-mel/simui. Le nom non scope simui est deja pris sur npm.

Le dossier contient maintenant deux usages dans le meme projet:

• une application de demonstration et de documentation lancee avec Vite
• une sortie librairie construite dans dist-lib pour etre consommee par d'autres apps

Demarrage

npm install
npm run dev

Le build complet produit a la fois l'app et la librairie:

npm run build

Point d'entree librairie

Le package exporte:

• createSimUIApp
• defineSimUIConfig, configureSimUI, getSimUIConfig
• le shell principal et les stores/composables utiles
• le CSS construit via l'export ./styles.css

Le point d'entree de demo est configure dans src/simui/demo.config.js.

Depuis la version 1.0.1, une application consommatrice peut injecter ses propres pages via routes.additionalChildren tout en reutilisant le shell, la topbar, la sidebar et les preferences du package. Depuis cette mise a jour, elle peut aussi remplacer une vue starter existante via routes.replaceChildren, par exemple dashboard. Depuis la version 1.0.2, l'installation du package cree aussi une base locale dans src quand les fichiers n'existent pas encore.

Scaffold automatique du projet consommateur

Lors de l'installation de SIMUI dans un projet Vue, le package cree si besoin:

• src/views/DashboardView.vue pour remplacer rapidement le dashboard
• src/simui.routes.js pour brancher le remplacement du dashboard
• src/composables, src/stores et src/services avec des fichiers README de depart

La documentation reste fournie par la vue integree de SimUI via la route simui-docs.

Le scaffold est idempotent: un fichier deja present n'est jamais ecrase.

Configuration rapide

La configuration centralisee couvre:

• app: nom, titre, sous-titre, description
• branding: nom affiche, shortName, tagline, logoUrl, supportEmail
• navigation: items du menu et placeholder de recherche
• appearance, layout, features
• axios: baseURL, timeout, defaultHeaders, withCredentials
• auth: enabled, mode, loginEndpoint, meEndpoint, redirectOn401, tokenResolver
• storage: cles localStorage pour eviter les collisions entre applications
• routes: noms internes, remplacements de vues starter et routes enfants additionnelles pour les pages metier

Exemple minimal:

import { createSimUIApp, defineSimUIConfig } from '@simcorp-mel/simui'

const config = defineSimUIConfig({
  app: {
    name: 'My Product',
    subtitle: 'Back office operations'
  },
  branding: {
    name: 'My Product',
    shortName: 'MP',
    logoUrl: '/logo.svg'
  },
  auth: {
    enabled: false,
    mode: 'disabled'
  }
})

await createSimUIApp({ config })

Exemple d'ajout de page metier dans une application consommatrice:

defineSimUIConfig({
  navigation: {
    items: [
      { key: 'home', label: 'Accueil', icon: 'pi pi-home', routeName: 'dashboard' },
      { key: 'orders', label: 'Commandes', icon: 'pi pi-briefcase', routeName: 'orders-board' }
    ]
  },
  routes: {
    additionalChildren: [
      {
        path: 'operations/orders',
        name: 'orders-board',
        component: () => import('./views/OrdersBoardView.vue'),
        meta: { title: 'Orders board', section: 'Operations', layoutKey: 'orders-board' }
      }
    ]
  }
})

Exemple de remplacement du dashboard fourni par SimUI:

defineSimUIConfig({
  navigation: {
    items: [
      { key: 'home', label: 'Accueil', icon: 'pi pi-home', routeName: 'dashboard' }
    ]
  },
  routes: {
    replaceChildren: [
      {
        name: 'dashboard',
        component: () => import('./views/MyDashboardView.vue'),
        meta: { title: 'Mon dashboard', section: 'Operations', layoutKey: 'dashboard' }
      }
    ]
  }
})

Exemple avec le scaffold local genere automatiquement:

import { simUIStarterRoutes } from './simui.routes'

defineSimUIConfig({
  routes: {
    replaceChildren: simUIStarterRoutes.replaceChildren,
    additionalChildren: simUIStarterRoutes.additionalChildren
  }
})

Authentification

Trois modes sont prevus en V1:

• disabled: aucun guard ni ecran de login
• demo: login visuel avec session locale sans backend
• jwt: login via axios, compatible avec /login_check et /auth/me

Exemple JWT:

defineSimUIConfig({
  auth: {
    enabled: true,
    mode: 'jwt',
    loginEndpoint: '/login_check',
    meEndpoint: '/auth/me',
    redirectOn401: true
  },
  axios: {
    baseURL: 'https://api.example.com'
  },
  storage: {
    authTokenKey: 'my-product-access-token',
    authUserKey: 'my-product-auth-user'
  }
})

Axios

Le client axios partage la configuration runtime de SimUI et applique automatiquement:

• baseURL et timeout
• headers par defaut
• jeton d'auth quand il existe
• redirection sur 401 si l'auth JWT est activee

Documentation embarquee

L'application demo expose une vue Documentation dans la navigation. Elle presente:

• l'initialisation du package
• les variables de branding
• la configuration axios
• les modes d'authentification

Verification

npm run build
npm run lint
npm pack --dry-run

Publication npm

Quand le scope npm @simcorp-mel est pret:

npm login
npm publish --access public