@cincoai/vox-react

React UI library for the VOX organizational voice campaign system.

Guide d'intégration complet : voir Exemple.md pour le pas-à-pas d'intégration dans un nouveau projet hôte Next.js + NestJS.

Personnalisation couleurs & textes : voir CUSTOMIZATION.md.

Installation

npm install @cincoai/vox-react @cincoai/vox-api

Peer dependencies: React 18+, @apollo/client, graphql, lucide-react, zustand, @dnd-kit/*, CodeMirror packages.

Quick start (Next.js)

// app/vox/layout.tsx
'use client';
import { VoxProvider } from '@cincoai/vox-react';
import '@cincoai/vox-react/styles.css';
import { createPortailVoxAdapters } from '@/lib/vox/portailVoxConfig';

export default function Layout({ children }) {
  return (
    <VoxProvider
      graphqlUrl={process.env.NEXT_PUBLIC_GRAPHQL_API_URL!}
      getAccessToken={() => localStorage.getItem('access_token')}
      adapters={createPortailVoxAdapters(apolloClient)}
      apolloClient={apolloClient}
    >
      {children}
    </VoxProvider>
  );
}

// app/vox/page.tsx
import { VoxHub } from '@cincoai/vox-react';
export default function Page() {
  return <VoxHub />;
}

Exported screens

| Component | Description | |-----------|-------------| | VoxHub | Role-based navigation hub | | VoxAdminPacks / VoxAdminPolicies / VoxAdminCampaigns | Admin Studio | | VoxContribution | Contributor campaign list | | VoxContributionCampaign | Campaign item table | | VoxContributionItemCoach | AI conversational coach | | VoxManager | Manager dashboard | | VoxManagerItemDetail | Item synthesis detail | | VoxManagerDepartmentDetail | Org-unit diagnostic | | VoxSharedManager | Read-only shared syntheses |

Adapters

| Adapter | Purpose | |---------|---------| | router | Link, useRouter, useParams (framework-agnostic) | | hostQueries | Organizations, user search (host GraphQL) | | hostComponents | OrganizationsTreePicker, StateBadge | | toast | Snackbar notifications | | exportPdf | PDF download callbacks | | coach | Optional AI coach session actions | | labels | Partial UI label overrides (see CUSTOMIZATION.md) |

Personnalisation

Couleurs via CSS variables (styles.css) et textes via adapters.labels :

<VoxProvider
  adapters={{
    router: hostRouter,
    labels: {
      'hub.title': 'Quality Voice',
      'signal.0': 'Critical',
    },
  }}
  // …
/>

:root {
  --color-primary: #2563eb;
}

Détails : CUSTOMIZATION.md.

Styling (Tailwind)

The published styles.css only ships the VOX CSS custom properties. The components themselves rely on Tailwind utility classes, so the host app must run Tailwind and include this package in its content scan:

// tailwind.config.js
export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@cincoai/vox-react/dist/**/*.{js,cjs}',
  ],
};

Map semantic Tailwind colors to the same --color-* variables (see CUSTOMIZATION.md for the full token list).

PDF export (server)

For Next.js API routes:

import {
  buildExportPayload,
  generateExportPdf,
} from '@cincoai/vox-react/export-server';

Note: buildExportPayload resolves the exporting user through a built-in stub (getUserForToken) that returns a placeholder identity. The host app is responsible for resolving the real user (e.g. from its own token/session) before relying on the "Généré par" field in the generated PDF.

Development

npm install
npm run migrate:from-portail  # sync from portail-owliance
npm run codegen
npm run build
npm test
npm run check:parity

Backend

Requires @cincoai/vox-api NestJS module on the GraphQL API. See graphql/README.md.