📝 RadReport Template Builder

@radaid/radreport-template-builder is a React toolkit for medical radiology reporting. It ships two building blocks:

• TemplateBuilder: create and manage radiology report templates (sections, fields, HTML import/export).
• ReportCreator: fill in a structured report from a template, with AI-assisted findings, impression and recommendations, key images and an HTML report preview.

✨ Features

• ✅ Create or import radiology report templates using HTML.
• 🧱 Dynamically add, remove, and edit sections and fields (nested sections, inline fields).
• 📥 Import existing standard templates.
• 🤖 Copilot integration through @radaid/copilotagent-js (voice, AI suggestions).
• 💡 Built with flexibility to support standard reporting workflows.

📚 Documentation

| Document | What it covers | |---|---| | docs/ARCHITECTURE.md | How the package connects to the OHIF viewer, the copilot agent and the backend, with flow diagrams | | docs/PUBLISHING.md | How to bump the version and publish to npm, and roll it out to consumers | | docs/VERSION_HISTORY.md | What changed in each version |

🚀 Getting Started

📦 Install

npm install @radaid/radreport-template-builder
# peer dependencies: react ^18.2.0, react-dom ^18.2.0

The package ships its styles in @radaid/radreport-template-builder/style.css.

🧩 Usage

Report Creator

import { ReportCreator } from '@radaid/radreport-template-builder';

const reportCreator = new ReportCreator();

reportCreator.init({
  appConfig: { baseUrl: 'https://<api-host>/api' }, // required: RadAid API base URL
  copilotAgent,                                     // a CopilotAgent from @radaid/copilotagent-js
  getAccessToken: () => token,                      // used for Authorization: Bearer <token>
  getDICOMMetadataStore: () => store,               // optional: DICOM metadata for template fields
  onSaveState: state => {},                         // optional
});

// Render it anywhere in your React tree:
<reportCreator.UI height="800px" />

Template Builder

import { TemplateBuilder } from '@radaid/radreport-template-builder';

<TemplateBuilder copilotAgent={copilotAgent} appConfig={appConfig} getAccessToken={getAccessToken} />

See docs/ARCHITECTURE.md for what each service calls.

🛠️ Develop locally

yarn install
cp .env.example .env    # fill in your environment values (do not commit secrets)
yarn dev                # webpack dev server (port 3010)

📦 Build the Package

To build the package for production:

yarn run build

This runs tsc && webpack --mode production and writes the UMD bundle to dist/ (rad-report.umd.js and style.css). The first build is slow (several minutes).

To publish a new version, follow docs/PUBLISHING.md.

📦 Usage in Other Projects

When importing @radaid/radreport-template-builder into another project, make sure to configure React, ReactDOM, and JSX Runtime aliases properly to avoid issues like duplicate React instances or unresolved modules. These issues commonly occur in monorepos, local linking setups (e.g., pnpm link), or even in production builds where the package is consumed as a UMD bundle.

🔧 Webpack Configuration

If your project uses Webpack, update your config like this:

resolve: {
  alias: {
    react: path.resolve(__dirname, '../../../node_modules/react'),
    'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
    'react/jsx-runtime': path.resolve(__dirname, '../../../node_modules/react/jsx-runtime'),
    React: path.resolve(__dirname, '../../../node_modules/react'),
    ReactDOM: path.resolve(__dirname, '../../../node_modules/react-dom'),
    ReactJSXRuntime: path.resolve(__dirname, '../../../node_modules/react/jsx-runtime'),
  },
  modules: [
    'node_modules',
    path.resolve(__dirname, 'src'),
  ],
},

🔧 Next.js Configuration

If your project uses Next.js, modify your next.config.js as follows:

// next.config.js
webpack: (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    React: require.resolve('react'),
    ReactDOM: require.resolve('react-dom'),
    ReactJSXRuntime: require.resolve('react/jsx-runtime'),
  };
  return config;
};

ℹ️ Note: This setup is especially important when:

• Using @radaid/radreport-template-builder via local linking (pnpm link)
• Installing the package via registry (e.g., pnpm add) and encountering build errors like:

Module not found: Can't resolve 'React'
Module not found: Can't resolve 'ReactDOM'
Module not found: Can't resolve 'ReactJSXRuntime'

These errors usually occur during Next.js production builds (next build) or in CI/CD pipelines when UMD builds are consumed.

To resolve this, ensure that the consuming app explicitly resolves these dependencies using aliasing (as shown above) and that the required versions of react, react-dom, and react/jsx-runtime are installed at the root level of your project.

If a rule in your bundler config sets its own resolve options for .js files (for example test: /\.m?js/ with fullySpecified: false), that rule may not inherit the global alias. Add the same aliases inside it if the UMD bundle still loads its own React copy.