@owlmeans/mui-panel

MUI + React Router base for OwlMeans web apps — makeContext, panel/form components, and hand-picked re-exports for app-side modules.

Overview

• makeContext(cfg) / useContext() — base web context with API config middleware and flow service wired in
• render(context, theme?, opts?) — entry-point renderer that wraps the app with MUI theme and i18n
• modules — base module declarations for auth panel screens
• Components and form primitives in ./components
• Re-exports from sibling packages: module, route, frontend, handler, elevate, useNavigate, useI18nApp, HOME, BASE, ROOT, GUEST, flow, configureFlows, CAUTHEN_FLOW_ENTER, Dispatcher, appendWebAuthService, addWebService, etc.
• Inherits all @owlmeans/client-panel exports (ClientForm, InputCtrl, ActionCtrl, …)

Installation

bun add @owlmeans/mui-panel

Usage

Build the app context on top of web-panel:

import {
  useContext as useBasicContext,
  makeContext as makeBasicContext
} from '@owlmeans/mui-panel'
import { appendOidcGuard } from '@owlmeans/mui-oidc-rp'

export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T => {
  const context = makeBasicContext<C, T>(cfg) as T
  appendOidcGuard<C, T>(context)
  context.makeContext = makeContext as typeof context.makeContext
  return context
}

export const useContext = useBasicContext

Compose your modules over the base set:

import { modules as baseModules } from '@owlmeans/mui-panel'

export const modules = [...baseModules, ...appModules]

Use the re-exported helpers in screens:

import { HOME, useI18nApp, useNavigate } from '@owlmeans/mui-panel'

const t = useI18nApp('manager-web')
const navigate = useNavigate()

Render the app:

import { render } from '@owlmeans/mui-panel'
import { theme } from './theme'

render(context, theme)

API

makeContext<C, T>(cfg): T

Creates a web context: registers apiConfigMiddleware, the flow service, and adds context.flow() accessor.

useContext<C, T>(): T

React hook returning the current context.

render<C, T>(context, theme?, opts?)

Mounts the React tree using the configured theme and i18n detector.

modules

Base module declarations for auth panel screens.

Re-exports

Cherry-picked APIs from @owlmeans/client, @owlmeans/client-context, @owlmeans/client-module, @owlmeans/client-route, @owlmeans/client-config, @owlmeans/client-auth, @owlmeans/client-i18n, @owlmeans/web-client, @owlmeans/web-flow, @owlmeans/route, @owlmeans/module, @owlmeans/auth, @owlmeans/i18n, @owlmeans/flow, @owlmeans/config, @owlmeans/context. See src/exports.ts for the full list.

Plus full re-export of @owlmeans/client-panel.

Related Packages

• @owlmeans/web-client — provides render and the underlying web context
• @owlmeans/client-panel — cross-platform form/panel primitives re-exported here
• @owlmeans/web-flow — flow service registered by makeContext
• @owlmeans/mui-oidc-rp — typically chained on top of this makeContext