Feature
Feature-specific composite components
Composite components for specific application features.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
ContainerDetail
Container detail page shell: a back link, the container name, and a per-model tab strip. Purely presentational — the page resolves the tab list (via the foundation tab matrix), owns the active tab / routing, and supplies the tab body as children. This is the frame every container detail tab mounts into
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
activeTab | Required | string | - | Currently active tab key |
onBack | Required | () => void | - | Fired when the back link is clicked (the page decides where to go) |
onTabChange | Required | (tab: string) => void | - | Fired with the next tab key when the operator switches tabs |
tabs | Required | ContainerDetailTab[] | - | Ordered tabs for this container model (already resolved by the page) |
backLabel | Optional | React.ReactNode | "Explorer" | Back-link label. Defaults to "Explorer" |
children | Optional | React.ReactNode | - | The active tab's body — supplied by the page (real content or a placeholder) |
className | Optional | string | - | Additional class for the root element |
name | Optional | React.ReactNode | - | Container display name shown in the header. Optional — omit it when the host already renders the container name as the page title (e.g. the shell's PageLayout), so the name is not shown twice |
ContainerWidgets
Site Overview → Container Widgets: the read-only grid of per-container summary cards. Purely presentational — the shell page feeds it the shaped containers array (from the container-widgets data hook) and handles navigation via onContainerClick
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
containers | Required | ContainerWidgetItem[] | - | Card-ready data for every container, shaped by the data hook |
className | Optional | string | - | Additional class for the root element |
errorMessage | Optional | string | - | Error message shown in place of the grid |
isLoading | Optional | boolean | false | Shows a spinner while the first load is in flight |
onContainerClick | Optional | ((id: string) => void) | - | Invoked with the container id when a card is clicked |
title | Optional | string | - | Section heading |
ExplorerLayout
Explorer split-view shell: a header, a scrollable list column, and a sticky detail column that appears when a row is selected (stacking on narrow viewports). Purely presentational — the page supplies the list (tabs + table) and the detail panel, and owns selection/routing state
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
list | Required | React.ReactNode | - | The list column — typically a tab switch plus the device/container table |
className | Optional | string | - | Additional class for the root element |
detail | Optional | React.ReactNode | - | The detail column content (shown in the sticky panel when hasSelection) |
hasSelection | Optional | boolean | false | When true the layout splits into list (70%) + a sticky detail column (30%); otherwise the list fills the width. Driven by whether a row is selected |
headerActions | Optional | React.ReactNode | - | Optional header controls (export button, etc.) shown next to the title |
title | Optional | string | - | Page heading; nothing renders when omitted |