@mostajs/qa-ui-react

Auteur : Dr Hamid MADANI [email protected] · Licence : AGPL-3.0-or-later · Niveau : N2 Proposition validée : ../mosta-qa-engine/docs/05-PROPOSITION-QA-UI.md

Composants React de MostaQatraxFlow (QatraxFlow) au-dessus de @mostajs/qa-engine — pendant React de @mostajs/qa-ui-html. Zéro-build (createElement, pas de JSX) : ESM pur, utilisables directement (bundler ou SSR).

Installation

npm i @mostajs/qa-ui-react react @mostajs/qa-engine

Exemple

import { AppShell, Dashboard, KanbanBoard, LogIngestForm } from '@mostajs/qa-ui-react';
import { createQaEngine } from '@mostajs/qa-engine';

const qa = createQaEngine();

export default function App() {
  const [bugs, setBugs] = React.useState([]);
  return (
    <AppShell active="#/dashboard" title="QatraxFlow">
      <Dashboard pass={[4,6,5,7]} fail={[3,2,1,1]} burndown={[8,6,4,2]} mttr={{ value: 32, max: 100, label: '32 min' }} />
      <LogIngestForm onIngest={(raw) => setBugs(qa.ingestLogs(raw).bugDrafts)} />
      <KanbanBoard brouillon={bugs} ouvert={[]} resolu={[]} />
    </AppShell>
  );
}

Composants

AppShell · Dashboard · KanbanBoard · BugBoard · BugDetail · TraceabilityChain · Badges · LogIngestForm · SeverityBadge · StatusPill · Sparkline · Gauge.

Tests

npm test   # mjs-unit + react-dom/server → rapport dans test-scripts/.out/report.html

Exemple d'app complète : examples/next-app/ (Next.js).