@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 · article · mcq_set · saq · leq · dbq

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 |

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

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