@site-steward/client-ui

React UI for adding the Site Steward admin widget to a tenant application.

Install

npm install @site-steward/client-ui

The package expects the consuming app to provide these peer dependencies:

npm install react react-dom react-router-dom

Usage

Render AdminWidget anywhere in the client application. It owns its router and renders inside a Shadow DOM so host-page CSS cannot alter its appearance:

import { AdminWidget } from "@site-steward/client-ui";
import { BrowserRouter, Route, Routes } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/admin" element={<Home />} />
      </Routes>
      <AdminWidget />
    </BrowserRouter>
  );
}

The widget activates when the current route is /admin. The consumer app should make that route reachable, often by rendering the same page as /.

The API client targets /steward-api by default. In production, route that path to the Site Steward API for the tenant app.

The built package imports its stylesheet automatically from the JavaScript entry. Consumers that need an explicit stylesheet path can also import:

import "@site-steward/client-ui/style.css";

Local Development

This repository keeps two client consumers:

• packages/test/client-ui-demo is the fast source-linked Vite demo. Run it with npm run dev:client-ui --workspace @site-steward/test.
• packages/test/client-ui-dist-smoke is the minimal distribution fixture. Run npm run smoke:client-ui:dist --workspace @site-steward/test to build this package, pack it, install the tarball into a temporary app, and build that app without workspace source aliases.

Publishing

Before publishing, run:

npm run build --workspace @site-steward/client-ui
npm pack --workspace @site-steward/client-ui
npm run smoke:client-ui:dist --workspace @site-steward/test

Publish from packages/client-ui with an npm account that has access to the public @site-steward scope:

npm publish