@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mainNavigation.md

@@ -0,0 +1,129 @@
+# MainNavigation
+
+*Category:* Components
+*Section:* Navigation
+*Source:* https://uikit.developers.rio.cloud/#components/mainNavigation
+*Captured:* 2025-12-12T12:38:07.047Z
+
+## MainNavigation
+
+> There is no dedicated MainNavigation Component. The navigation items are part of the ApplicationHeader
+
+### Example: Example 1
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+#### Summary
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+#### React (tsx)
+
+```tsx
+import { NavLink } from 'react-router-dom';
+
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+
+export default () => (
+    <ApplicationLayout className='bg-lighter'>
+        <ApplicationLayout.Header>
+            <ApplicationHeader label='RIO Service' navItems={navItems} />
+        </ApplicationLayout.Header>
+        <ApplicationLayout.Body className='uikitDemo'>
+            <div className='dummy-class' />
+        </ApplicationLayout.Body>
+    </ApplicationLayout>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutBody uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+</div>
+```

package/dist/docs/components/mapCircle.md

@@ -0,0 +1,93 @@
+# Circle
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapCircle
+*Captured:* 2025-12-12T12:39:15.145Z
+
+## Circle
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import Circle from '@rio-cloud/rio-uikit/Circle';
+import type { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+const STROKE_COLOR = 'rgba(90, 72, 118, 1)';
+const FILL_COLOR = 'rgba(90, 72, 118, 0.3)';
+
+const CircleExample = () => {
+    const position = { lat: 48.1351, lng: 11.582 };
+
+    const eventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => console.log(event),
+    };
+
+    return (
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            height={300}
+            mapSettings={
+                <MapSettings
+                    options={[
+                        <MapTypeSettings
+                            key='mapTypeSettings'
+                            tooltip='Change map type'
+                            dropdownHeaderText='Map views'
+                            defaultTypeLabel='Default view'
+                            truckTypeLabel='Truck view'
+                            terrainTypeLabel='Terrain view'
+                            satelliteTypeLabel='Satellite view'
+                            nightTypeLabel='Night view'
+                        />,
+                    ]}
+                />
+            }
+        >
+            <Circle
+                position={position}
+                radius={5_000}
+                style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}
+                precision={30}
+                eventListenerMap={eventListenerMap}
+            />
+        </Map>
+    );
+};
+
+export default CircleExample;
+```

package/dist/docs/components/mapCluster.md

@@ -0,0 +1,337 @@
+# Clusters
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapCluster
+*Captured:* 2025-12-12T12:39:13.237Z
+
+## Clusters
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Regenerate dataToggle cluster
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Regenerate dataToggle cluster
+
+#### React (tsx)
+
+```tsx
+import { useState, useMemo } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Map from '@rio-cloud/rio-uikit/Map';
+import MarkerLayer from '@rio-cloud/rio-uikit/MarkerLayer';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import MapClusterSettings from '@rio-cloud/rio-uikit/MapClusterSettings';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';
+import type { MapEvent, Point } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import type { Asset } from '../settings/demoData';
+
+const position = { lat: 49.1351, lng: 12.582 };
+const NUM = 100;
+
+const regenerateData = () =>
+    Array.from({ length: NUM * 2 }, (_, index) => {
+        const lat = position.lat + Math.random() * 6 - 3;
+        const lng = position.lng + Math.random() * 10 - 5;
+        return { lat, lng, data: `data-${index - NUM}`, name: `Asset ${index - NUM}`, type: 'truck' };
+    });
+
+const ClustersExample = () => {
+    const [data, setData] = useState(regenerateData());
+    const [showCluster, setShowCluster] = useState(true);
+
+    const simpleTheme = useMemo(
+        () => ({
+            getNoisePresentation: ({ name, numberWarnings, numberExceptions, type }: Asset) => (
+                <SingleMapMarker
+                    iconNames={[type]}
+                    name={name}
+                    warningCount={numberWarnings}
+                    exceptionCount={numberExceptions}
+                />
+            ),
+            getClusterPresentation: (assets: Asset[]) => (
+                <ClusterMapMarker
+                    count={assets.length}
+                    warningCount={Math.floor((assets.length * 10) / 3)}
+                    exceptionCount={Math.floor((assets.length * 10) / 5)}
+                />
+            ),
+        }),
+        []
+    );
+
+    const handleClusterEvent = (event: MapEvent) => {
+        const target = event.target.getData();
+        event.stopPropagation();
+
+        if (target.isCluster()) {
+            console.log('cluster event:', event.type);
+            target.forEachDataPoint((point: Point) => console.log(point.getData()));
+        } else {
+            console.log('noise point event:', event.type, target.getData());
+        }
+    };
+
+    const handleToggleCluster = () => setShowCluster(!showCluster);
+
+    const handleClusterChange = (newShowCluster: boolean) => setShowCluster(newShowCluster);
+
+    const handleRegenerateDataButtonClick = () => {
+        setData(regenerateData);
+    };
+
+    const eventListenerMap = EventUtils.createTapOnDblTapPreventer({
+        [EventUtils.TAP]: handleClusterEvent,
+        [EventUtils.DBL_TAP]: handleClusterEvent,
+    });
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={8}
+                height={400}
+                showCluster={showCluster}
+                onShowClusterChange={handleClusterChange}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                            <MapClusterSettings
+                                key='mapClusterSettings'
+                                tooltip='Enable or disable marker cluster'
+                                dropdownHeaderText='Vehicle cluster'
+                                clusterEnabledLabel='Enable cluster'
+                                clusterDisabledLabel='Disable cluster'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                <MarkerLayer data={data} eventListenerMap={eventListenerMap} simpleTheme={simpleTheme} />
+            </Map>
+            <div className='btn-toolbar margin-top-10'>
+                <Button onClick={handleRegenerateDataButtonClick}>Regenerate data</Button>
+                <Button onClick={handleToggleCluster}>Toggle cluster</Button>
+            </div>
+        </>
+    );
+};
+
+export default ClustersExample;
+```
+
+## Clusters with POIs
+
+### Example: Example 2
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Regenerate data
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Regenerate data
+
+#### React (tsx)
+
+```tsx
+import { useState, useMemo } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Map from '@rio-cloud/rio-uikit/Map';
+import MarkerLayer from '@rio-cloud/rio-uikit/MarkerLayer';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';
+import type { MapEvent, Point } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import type { Asset } from '../settings/demoData';
+
+const position = { lat: 49.1351, lng: 12.582 };
+const NUM = 500;
+
+type Poi = {
+    data: string;
+    name: string;
+    type: string;
+};
+
+const regenerateAssetData = () =>
+    Array.from({ length: NUM * 2 }, (_, index) => {
+        const lat = position.lat + Math.random() * 6 - 3;
+        const lng = position.lng + Math.random() * 10 - 5;
+        return { lat, lng, data: `data-${index - NUM}`, name: `Asset ${index - NUM}`, type: 'truck' };
+    });
+
+const regeneratePoiData = () =>
+    Array.from({ length: NUM * 2 }, (_, index) => {
+        const lat = position.lat + Math.random() * 6 - 3;
+        const lng = position.lng + Math.random() * 10 - 5;
+        return { lat, lng, data: `data-${index - NUM}`, name: `Poi ${index - NUM}`, type: 'pushpin' };
+    });
+
+const ClustersExample = () => {
+    const [assets, setAssets] = useState(regenerateAssetData());
+    const [pois, setPois] = useState(regeneratePoiData());
+
+    const assetTheme = useMemo(
+        () => ({
+            getNoisePresentation: ({ name, numberWarnings, numberExceptions, type }: Asset) => (
+                <SingleMapMarker
+                    iconNames={[type]}
+                    name={name}
+                    warningCount={numberWarnings}
+                    exceptionCount={numberExceptions}
+                />
+            ),
+            getClusterPresentation: ({ length }: Asset[]) => (
+                <ClusterMapMarker
+                    count={length}
+                    warningCount={Math.floor((length * 10) / 3)}
+                    exceptionCount={Math.floor((length * 10) / 5)}
+                />
+            ),
+        }),
+        []
+    );
+
+    const poiTheme = useMemo(
+        () => ({
+            getNoisePresentation: ({ name }: Poi) => (
+                <SingleMapMarker iconNames={['pushpin']} name={name} markerColor='bg-map-marker-poi' />
+            ),
+            getClusterPresentation: ({ length }: Poi[]) => (
+                <ClusterMapMarker iconName='pushpin' markerColor='bg-map-marker-poi' count={length} />
+            ),
+        }),
+        []
+    );
+
+    const handleClusterEvent = (event: MapEvent) => {
+        const target = event.target.getData();
+        event.stopPropagation();
+
+        if (target.isCluster()) {
+            console.log('cluster event:', event.type);
+            target.forEachDataPoint((point: Point) => console.log(point.getData()));
+        } else {
+            console.log('noise point event:', event.type, target.getData());
+        }
+    };
+
+    const handleRegenerateDataButtonClick = () => {
+        setAssets(regenerateAssetData);
+        setPois(regeneratePoiData);
+    };
+
+    const eventListenerMap = EventUtils.createTapOnDblTapPreventer({
+        [EventUtils.TAP]: handleClusterEvent,
+        [EventUtils.DBL_TAP]: handleClusterEvent,
+    });
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={8}
+                height={400}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                <MarkerLayer
+                    data={pois}
+                    simpleTheme={poiTheme}
+                    clusterDissolvable={false}
+                    eventListenerMap={eventListenerMap}
+                />
+                <MarkerLayer data={assets} simpleTheme={assetTheme} eventListenerMap={eventListenerMap} />
+            </Map>
+            <div className='btn-toolbar margin-top-10'>
+                <Button onClick={handleRegenerateDataButtonClick}>Regenerate data</Button>
+            </div>
+        </>
+    );
+};
+
+export default ClustersExample;
+```