{status}

} > Change status to {config.next.map((next) => ( ))} ); } export default function Demo() { const [alerts, setAlerts] = useState(initialAlerts); const updateStatus = (id: string, next: AlertStatus) => setAlerts((prev) => prev.map((a) => (a.id === id ? { ...a, status: next } : a)), ); return ( Alert Asset Status {alerts.map((alert) => ( {alert.name} {alert.asset} updateStatus(alert.id, next)} /> ))} ); } ``` -------------------------------- ### Automatic setup with @pentaho/uikit-cli Source: https://pentaho.github.io/uikit-docs/master/app-shell/installation Use the CLI tool to automatically create a new App Shell project. ```bash npx @pentaho/uikit-cli@latest create my-app ``` -------------------------------- ### Configure App Shell services Source: https://pentaho.github.io/uikit-docs/master/app-shell/configuration Example configuration object demonstrating instance, factory, and component service definitions using both direct values and bundle references with ranking and conditions. ```javascript const appShellConfig = { services: { "my-app/services:UseCreateAction": [ // Instance - direct value { instance: { value: { key1: "some value", key2: 11, key3: { nested: "value" }, }, }, ranking: 10, }, // Instance - module reference with conditions { instance: { bundle: "some-app/actions/create/useCreateReportAction.js", }, ranking: 50, conditions: [ { bundle: "@hv-apps/my-app/conditions/useHasReportPermission.js", }, ], }, // Factory - module reference { factory: { bundle: "some-app/factories/factory.js", config: { option: true }, }, }, // Component - module reference with conditions { component: { bundle: "@my-app/components/HelloComponent.js", config: { name: "John" }, }, ranking: 50, conditions: [ { bundle: "@hv-apps/my-app/conditions/useFeatureEnabled.js", config: { featureFlag: "hello-component" }, }, ], }, ], }, }; ``` -------------------------------- ### Set Up HvProvider Source: https://pentaho.github.io/uikit-docs/master/docs/get-started Wrap your application root with HvProvider to enable theming and global configuration. ```javascript // 1. import `Provider` component import { HvProvider } from "@pentaho/uikit-react-core"; function App() { // 2. Wrap Provider at the root of your app return ( ); } ``` -------------------------------- ### Automatic Installation via CLI Source: https://pentaho.github.io/uikit-docs/master/docs/get-started Use the UI Kit CLI to scaffold a preconfigured project with all necessary dependencies. ```bash npx @pentaho/uikit-cli@latest create ``` -------------------------------- ### Configure Main Panel Views Source: https://pentaho.github.io/uikit-docs/master/app-shell/configuration Example of configuring the main panel with specific views, routes, and container properties. ```javascript const mainPanel = { maxWidth: "sm", views: [ { bundle: "@hv-apps/my-app/pages/Hello.js", route: "/hello", config: { name: "John", }, }, { bundle: "@hv-apps/another-app/pages/Person.js", route: "/contacts/:name", maxWidth: "lg", fixed: true, }, ], }; ``` -------------------------------- ### HvRadio color prop examples Source: https://pentaho.github.io/uikit-docs/master/components/radio Demonstrates the `color` prop to style the radio. The example shows four radios with colors `primary`, `positive`, `coral`, and a custom hex color `#c73aa8`. The second line is the same example in a compact single-line form. ```jsx

``` ```jsx

``` -------------------------------- ### Example of a custom value renderer Source: https://pentaho.github.io/uikit-docs/master/components/query-builder A functional component example using the useQueryBuilderContext hook to dispatch value updates. ```typescript const Renderer = ({ id }: HvQueryBuilderRendererProps) => { const { dispatchAction } = useQueryBuilderContext(); return ( { dispatchAction({ type: "set-value", id, value, }); }} /> ); }; ``` -------------------------------- ### Card with Media Example Source: https://pentaho.github.io/uikit-docs/master/components/card Shows how to use the HvCardMedia component to add an image to a card. The media component automatically adapts to its placement within the card. ```jsx Use the live code editor to change the position of the `HvCardMedia` component in the card. ``` -------------------------------- ### HvCheckBox labelPosition examples Source: https://pentaho.github.io/uikit-docs/master/components/checkbox Shows the labelPosition prop with left and right values. The second line is the same example in a single-line format. ```jsx

``` ```jsx

``` -------------------------------- ### HvOverflowTooltip usage example Source: https://pentaho.github.io/uikit-docs/master/components/overflow-tooltip Example of using HvOverflowTooltip with placement='top', paragraphOverflow={false}, and a long data string that triggers the tooltip when overflowing. ```jsx ``` -------------------------------- ### Example translation JSON file Source: https://pentaho.github.io/uikit-docs/master/app-shell/internationalization Example of a JSON file containing translation keys and values. Each locale file uses this format. ```json { "appName": "My Application", "pageOne": "Page One", "logoDesc": "Company logo" } ``` -------------------------------- ### Manual setup: Create app-shell.config.ts Source: https://pentaho.github.io/uikit-docs/master/app-shell/installation Define the App Shell configuration in the root directory using the HvAppShellConfig type. ```typescript import type { HvAppShellConfig } from "@pentaho/app-shell-vite-plugin"; export default { logo: { name: "HITACHI" }, menu: [ { label: "Home", target: "/", }, ], mainPanel: { views: [ { route: "/", bundle: "$app/App.js", }, ], }, } satisfies HvAppShellConfig; ``` -------------------------------- ### HvRadio labelPosition examples Source: https://pentaho.github.io/uikit-docs/master/components/radio Shows the `labelPosition` prop to place the label on the left or right of the radio. The example renders two radios with labels "Label on the left" and "Label on the right" respectively. The second line is the same example in a compact single-line form. ```jsx

``` ```jsx

``` -------------------------------- ### Reference Shared Modules Source: https://pentaho.github.io/uikit-docs/master/app-shell/configuration Example of importing and using a module from a registered Application Bundle. ```javascript import { getName } from "@hv-apps/another-app/modules/nameGenerator.js"; export default function Hello() { return

Hello {getName()}!

; } ``` -------------------------------- ### Hello.tsx module component Source: https://pentaho.github.io/uikit-docs/master/app-shell/configuration Example module component that receives the config object as props and renders a greeting. It is referenced by the module configuration example. ```tsx // Hello.tsx export default function Hello({ name, age }) { return

{`Hello ${name} (${age})!`}

; } ```