@plumile/backoffice-react

React provider and pages for Plumile backoffice.

Role

@plumile/backoffice-react is the optional React composition layer for data-driven backoffice applications.

It builds on top of:

• @plumile/ui for visual components
• @plumile/backoffice-core for manifests, facets and shared types

It should contain:

• providers
• auth flows and generic auth pages
• routing and page scaffolds
• backoffice hooks
• Relay integration helpers
• entity registry and facet loading

It should not become:

• a second UI component library
• a container for product-specific business components
• a replacement for app-level domain code

Instrumentation

BackofficeProvider forwards router instrumentations to the internal createRouter(...) call.

Use this when you want to expose:

• the Plumile Router DevTools bridge
• Performance Timeline marks and measures in Chrome DevTools

Example:

import {
  createDevtoolsBridgeInstrumentation,
  createPerformanceTimelineInstrumentation,
} from '@plumile/router';
import { BackofficeProvider } from '@plumile/backoffice-react';

const instrumentations = [
  createDevtoolsBridgeInstrumentation(),
  createPerformanceTimelineInstrumentation(),
];

<BackofficeProvider
  entityManifest={entityManifest}
  auth={auth}
  graphql={graphql}
  instrumentations={instrumentations}
/>;

This remains optional. If instrumentations is omitted, backoffice routing behaves exactly as before.

Examples

Performance Timeline only

import { createPerformanceTimelineInstrumentation } from '@plumile/router';
import { BackofficeProvider } from '@plumile/backoffice-react';

<BackofficeProvider
  entityManifest={entityManifest}
  auth={auth}
  graphql={graphql}
  instrumentations={[createPerformanceTimelineInstrumentation()]}
/>;

DevTools bridge + Performance Timeline in development

import {
  createDevtoolsBridgeInstrumentation,
  createPerformanceTimelineInstrumentation,
} from '@plumile/router';
import { BackofficeProvider } from '@plumile/backoffice-react';

const instrumentations = [];

if (import.meta.env.DEV) {
  instrumentations.push(createDevtoolsBridgeInstrumentation());
  instrumentations.push(createPerformanceTimelineInstrumentation());
}

<BackofficeProvider
  entityManifest={entityManifest}
  auth={auth}
  graphql={graphql}
  instrumentations={instrumentations}
/>;

With additional custom instrumentation

import {
  createConsoleLoggerInstrumentation,
  createDevtoolsBridgeInstrumentation,
  createPerformanceTimelineInstrumentation,
} from '@plumile/router';

const instrumentations = [
  createDevtoolsBridgeInstrumentation(),
  createPerformanceTimelineInstrumentation(),
  createConsoleLoggerInstrumentation({ label: 'backoffice-router' }),
];

In practice, this is useful to inspect:

• route navigations
• route preloads
• route prepare durations
• backoffice page transitions driven by the internal router