@metaboliccode-dev/widget

Publishable React dashboard library for Metabolic Code patient reports. It ships the dashboard component, iframe embed build, typed DTO mappers, report API helpers, LMS helpers, and Stealth Health payload builders.

Requirements

• Node.js 18+
• React 18 or 19

Development

npm install
npm run dev:iframe

Scripts

| Command | Description | | --- | --- | | npm run build | Build library ESM/CSS/types plus the iframe bundle | | npm run build:lib | Build the library package only | | npm run build:iframe | Build the standalone iframe app only | | npm run dev:lib | Watch-build dist/ for a linked host app | | npm run dev:iframe | Run the iframe dev server | | npm run typecheck | TypeScript check | | npm run test:run | Vitest once | | npm run lint | Biome check |

Quick install

npm install @metaboliccode-dev/widget

Component usage

import { MetabolicDashboard } from "@metaboliccode-dev/widget";
import "@metaboliccode-dev/widget/styles.css";

export function App({ authToken }: { authToken: string }) {
  return (
    <div className="h-screen">
      <MetabolicDashboard
        reportHttpConfig={{ authToken, backendRegion: "us" }}
        sideMenuUserProfile={{ displayName: "User", email: "[email protected]" }}
      />
    </div>
  );
}

Hosts pass a signed backend JWT as authToken. The library sends it as Authorization: Bearer ... and uses the backend URLs baked into the build unless an MC-owned local/staging host passes backendBaseUrl or reportHttpConfig.baseUrl. In component mode there is no iframe session exchange; browser-visible backend traffic is the signed report API traffic, for example POST /api/v1/report/full.

Iframe usage

The iframe path uses a one-time embedToken in mb_context. A trusted host backend obtains that token server-to-server from POST /api/v1/embed/launches. The browser receives only the one-time token, and the iframe exchanges it through POST /api/v1/embed/sessions for an encrypted HttpOnly backend session cookie before loading report data.

import {
  metabolicIframeSrcWithConfig,
  metabolicIframeSrcWithRenderContext,
} from "@metaboliccode-dev/widget";

const withConfig = metabolicIframeSrcWithConfig(iframeUrl, whitelabelConfig);
const src = metabolicIframeSrcWithRenderContext(withConfig, {
  role: "patient",
  embedToken,
  backendRegion: "us",
});

Documentation

| Document | Description | |----------|-------------| | Installation | Install and framework notes | | Quick Start | Component and iframe setup | | API Reference | Props, helpers, exported types | | Configuration & Theming | Branding-only config | | HTTP API | Backend request contract | | Iframe Embed | Secure iframe flow | | Development | Local workflow, tests, release |

AG Charts enterprise license

Charts use AG Charts Enterprise. The license key is baked into the published bundle by the manual GitHub Actions release workflow; consuming apps do not need to handle the license key.