@trilogy-innovations/content-renderers

Shared React component library for rendering educational question types across Incept products.

Install

npm install @trilogy-innovations/content-renderers

Tailwind setup (required)

RichText renders Markdown (including GFM tables) and relies on the @tailwindcss/typography plugin for prose/table styling. Install it and register it in your Tailwind config, and add the package's dist folder to content so classes aren't purged:

npm install -D @tailwindcss/typography

// tailwind.config.{js,ts}
const typography = require('@tailwindcss/typography');

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@trilogy-innovations/content-renderers/dist/**/*.{js,mjs}',
  ],
  plugins: [typography],
};

Without the typography plugin, Markdown tables will render as unstyled (no borders, no spacing).

Question Types

mcq · msq · fill-in · match · sequence · article · mcq_set · saq · leq · dbq · spr · frq_long · frq_short

Usage

Platform (TypeScript / StandardQuestion)

import { QuestionCard, QuestionsDisplay } from '@trilogy-innovations/content-renderers';

<QuestionCard question={question} index={0} />
<QuestionsDisplay questions={questions} />

Benchmark / Evaluator (raw generation object)

import { GenerationColumn } from '@trilogy-innovations/content-renderers';

<GenerationColumn generation={generation} />

Schema Validation

Content is validated before rendering. Invalid content shows a ValidationErrorCard with the error message and a collapsible raw data panel instead of a broken UI.

All 9 types are validated:

| Type | Checks | |---|---| | mcq | Non-empty question, non-empty answer_options array, each option has key + text | | msq | Same as MCQ + answer is an array | | fill-in | Answer format (object array, string array, 2D accepted_answers) | | match | Non-empty column_a + column_b arrays, answer is an object | | article | content or question is a non-empty string | | leq | question or prompt is a non-empty string | | mcq_set | Non-empty questions array | | saq | parts object with at least one key | | dbq | Non-empty documents array, each doc has doc_number, source, content | | frq_long / frq_short | parts object with at least one key (same shape as saq) |

You can also call validators directly:

import { validateContent } from '@trilogy-innovations/content-renderers';

const { valid, message } = validateContent('mcq_set', rawContent);

Exports

// Renderers
MCQRenderer, MSQRenderer, FillInRenderer, MatchRenderer, ArticleRenderer,
MCQSetRenderer, SAQRenderer, LEQRenderer, DBQRenderer

// Dispatchers
QuestionCard           // StandardQuestion → correct renderer
GenerationColumn       // raw generation object → normalize → render

// Shared components
RichText               // markdown + inline SVG + [Image: URL] + DOMPurify
ImageDisplay           // image array with error handling
ExplanationBox         // explanation + steps + misconceptions
ValidationErrorCard    // shown when schema validation fails

// View system
ViewModeToggle, JSONView, QuestionsDisplay

// Validation
validateContent, validateFillInContent, validateTypeSpecificContent, validateStandardQuestion

// Types
StandardQuestion, ContentType, AnswerOption, MatchColumnItem, ValidationResult

// Utils
safeString, formatDate, formatScorePercent, sortGrades, toTitleCase

// Adapter
normalizeToStandardQuestion   // raw benchmark/evaluator shape → StandardQuestion

Publishing

One-click release (recommended)

Run the Release workflow from the GitHub Actions tab (.github/workflows/release.yml) and pick the bump level (patch / minor / major). It will:

1. build, version-bump, publish to npm, and push the version commit + tag to main;
2. open an auto-landed PR in each consumer repo bumping the dependency (package.json + package-lock.json) in every manifest that references it:
   • inceptbench-evaluator — package.json
   • incept-benchmark — package.json, worker/package.json
   • incept-platform — package.json, api/package.json

npm auth — Trusted Publishing (OIDC): the workflow publishes without an npm token. On npmjs.com, the @trilogy-innovations/content-renderers package must list this repo + release.yml as a trusted publisher (package page → Settings → Trusted Publisher → GitHub Actions: organization trilogy-group, repository content-renderers, workflow release.yml).

Required repo secret (Settings → Secrets and variables → Actions):

| Secret | What | |--------|------| | RELEASE_TOKEN | PAT with Contents + Pull Requests write (and admin to land the PRs) on this repo and the three consumers |

Manual release

npm run build
npm version patch   # or minor / major
npm publish