Frontend (SDK / UI)

Le frontend d'un module est construit avec React 19 + TypeScript + Vite, puis chargé au runtime par le host. Le partage passe par des libs @kubuno/* résolues via une import map.

Le point d'entrée (entry.ts) #

Le host charge /modules/<id>/entry.js et appelle la fonction register() exportée. Vous y déclarez vos routes (lazy), votre barre latérale, votre barre d'outils, la recherche et vos slots :

import { lazy } from 'react'
import { RouteRegistry, SlotRegistry, SDK_VERSION,
         useSidebarStore, useToolbarStore } from '@kubuno/sdk'
import './i18n'
import './index.css'

export const sdkVersion = SDK_VERSION

export function register() {
  RouteRegistry.register('calendar', lazy(() => import('./CalendarApp')))
  RouteRegistry.register('calendar/:view', lazy(() => import('./CalendarApp')))

  useSidebarStore.getState().register({ moduleId: 'calendar', routePrefix: '/calendar', /* … */ })
  useToolbarStore.getState().register({ moduleId: 'calendar', routePrefix: '/calendar', /* … */ })

  SlotRegistry.register('app-dialogs', 'calendar', CalendarWorker)
}

Specifiers externes #

Au runtime, react, zustand, @kubuno/sdk et @ui sont marqués external dans Vite : le host les résout via son import map vers ses instances uniques. Les paquets npm ne servent qu'au build et au typecheck.

Règles UX impératives #

• Jamais de dialogs navigateur (alert/confirm/prompt) → ConfirmDialog/useConfirm et prompt() du SDK.
• Menus contextuels : MenuDropdown de @ui — jamais de div flottant maison.
• CSS : émettez les utilitaires Tailwind dans la couche cascade kubuno-module pour ne pas écraser le shell host. Accentuez par module via [data-module="<id>"].

La liste complète des composants et stores est dans la référence SDK & UI.