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

48 lines
1.7 KiB
Markdown

# Consuming @maks-it.com/webui-* in Certs UI / Vault
Install:
```bash
npm install @maks-it.com/webui-contracts @maks-it.com/webui-core @maks-it.com/webui-components
```
Wrap the app:
```tsx
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`.