maksit-webui/assets/docs/NPM_CONSUMPTION.md
2026-05-24 20:48:35 +02:00

1.7 KiB

Consuming @maks-it.com/webui-* in Certs UI / Vault

Install:

npm install @maks-it.com/webui-contracts @maks-it.com/webui-core @maks-it.com/webui-components

Wrap the app:

import { WebUiProvider, Loader, Authorization } from '@maks-it.com/webui-components'

<WebUiProvider
  api={{
    getData: (url) => getData(url),
    getDataWithoutLoader: (url) => getDataWithoutLoader(url),
    postData: (url, body) => postData(url, body),
    postDataWithoutLoader: (url, body) => postDataWithoutLoader(url, body),
  }}
  loader={{
    disableLoader: () => dispatch(disableLoader()),
    enableLoader: () => dispatch(enableLoader()),
  }}
  auth={{
    identity,
    hydrated,
    login: (c) => dispatch(login(c)),
    logout: (r) => dispatch(logout(r)),
    setIdentityFromLocalStorage: () => dispatch(setIdentityFromLocalStorage()),
    showUserOffcanvas,
    setShowUserOffcanvas: () => dispatch(setShowUserOffcanvas()),
    setHideUserOffcanvas: () => dispatch(setHideUserOffcanvas()),
  }}
  loading={loading}
>
  <Loader />
  <Authorization>{/* routes */}</Authorization>
</WebUiProvider>

API differences vs copied local folders

  • RemoteSelectBoxComponent: use searchRoute (absolute API path string) instead of apiRoute: ApiRoutes.
  • SecretComponent: pass generateSecretRoute when enableGenerate is true.
  • ACL: generic parseAclEntry / parseAclEntries from @maks-it.com/webui-core; per-app entity maps and parse*AclEntries live in each WebUI project (models/acl.ts).
  • Identity request types and Zod schemas (LoginRequest + LoginRequestSchema, LogoutRequest + LogoutRequestSchema, RefreshTokenRequest + RefreshTokenRequestSchema) live in @maks-it.com/webui-contracts.