@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/subNavigation.md

@@ -0,0 +1,470 @@
+# SubNavigation
+
+*Category:* Components
+*Section:* Navigation
+*Source:* https://uikit.developers.rio.cloud/#components/subNavigation
+*Captured:* 2025-12-12T12:38:08.479Z
+
+## SubNavigation
+
+### Example: Example 1
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+
+#### Summary
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+
+#### React (tsx)
+
+```tsx
+import { NavLink } from 'react-router-dom';
+
+import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
+
+export default () => (
+    <div className='bg-white border max-width-500'>
+        <SubNavigation
+            navItems={[
+                {
+                    key: '1',
+                    route: <NavLink to='/components/subNavigation'>Subnavigation 1</NavLink>,
+                },
+                {
+                    key: '2',
+                    route: (
+                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>
+                            Subnavigation 2
+                        </NavLink>
+                    ),
+                },
+                {
+                    key: '3',
+                    route: (
+                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>
+                            Subnavigation 3
+                        </NavLink>
+                    ),
+                },
+            ]}
+        />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="bg-white border max-width-500">
+    <div class="SubNavigation width-100pct overflow-auto">
+        <ul class="SubmoduleNavigation nav">
+            <li class="submodule" data-nav-item-key="1">
+                <a aria-current="page" class="active" href="#components/subNavigation">Subnavigation 1</a>
+            </li>
+            <li class="submodule" data-nav-item-key="2">
+                <a href="#components/appLayout">Subnavigation 2</a>
+            </li>
+            <li class="submodule" data-nav-item-key="3">
+                <a href="#components/appLayout">Subnavigation 3</a>
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| navItems | Array | — | List of navigation items with key and route prop. The route prop is a react-router NavLink component with an "active" style. |
+| className | String | — | Additional classes for the wrapper element. |
+
+## SubNavigation with offset
+
+### Example: Example 2
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+
+#### Summary
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+
+#### React (tsx)
+
+```tsx
+import { useState, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
+import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
+import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
+import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';
+
+export default () => {
+    const currentLocation = window.location.hash.replace('#', '/');
+    const navItems = [
+        { key: '1', route: <NavLink to={currentLocation}>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>
+            ),
+        },
+    ];
+
+    // Listen for resize changes of the target element defined by the ref
+    // Note: this is for demo purpose only when resizing the demo playground.
+    // The SubNavigation component handles this case internally
+    const { ref, isMobile } = useResizer();
+    const bodyNavigationClasses = isMobile ? '' : 'has-offset';
+
+    return (
+        <ApplicationLayout className='bg-lighter' layoutRef={ref}>
+            <ApplicationLayout.Header>
+                <ApplicationHeader label='RIO Service' navItems={navItems} />
+            </ApplicationLayout.Header>
+            <ApplicationLayout.Body
+                className='uikitDemo'
+                navigation={
+                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
+                        <SubNavigation
+                            navItems={[
+                                {
+                                    key: '1',
+                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
+                                },
+                                {
+                                    key: '2',
+                                    route: (
+                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
+                                            Subnavigation 2
+                                        </NavLink>
+                                    ),
+                                },
+                                {
+                                    key: '3',
+                                    route: (
+                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
+                                            Subnavigation 3
+                                        </NavLink>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </ApplicationLayoutBodyNavigation>
+                }
+            >
+                <div className='dummy-class' />
+            </ApplicationLayout.Body>
+        </ApplicationLayout>
+    );
+};
+
+const useResizer = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    const [ref, observerEntry] = useResizeObserver();
+    const contentRect = observerEntry?.contentRect;
+    useEffect(() => {
+        if (!contentRect) {
+            return;
+        }
+        const width = Math.round(contentRect.width);
+        if (width <= SCREEN_MD) {
+            setIsMobile(true);
+        } else {
+            setIsMobile(false);
+        }
+    }, [contentRect]);
+
+    return { ref, isMobile };
+};
+```
+
+#### 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 aria-current="page" class="active" href="#components/subNavigation">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="ApplicationLayoutBodyNavigation">
+                <div class="SubNavigation width-100pct overflow-auto">
+                    <ul class="SubmoduleNavigation nav">
+                        <li class="submodule" data-nav-item-key="1">
+                            <a aria-current="page" class="active" href="#components/subNavigation">Subnavigation 1</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="2">
+                            <a href="#2">Subnavigation 2</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="3">
+                            <a href="#3">Subnavigation 3</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <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>
+```
+
+## SubNavigation without offset
+
+### Example: Example 3
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+
+#### Summary
+
+RIO Service
+
+Navigation 1
+Navigation 2
+Navigation 3
+
+Subnavigation 1
+Subnavigation 2
+Subnavigation 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';
+import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
+import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
+
+export default () => {
+    const currentLocation = window.location.hash.replace('#', '/');
+    const navItems = [
+        { key: '1', route: <NavLink to={currentLocation}>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>
+            ),
+        },
+    ];
+
+    return (
+        <ApplicationLayout className='bg-lighter'>
+            <ApplicationLayout.Header>
+                <ApplicationHeader label='RIO Service' navItems={navItems} />
+            </ApplicationLayout.Header>
+            <ApplicationLayout.Body
+                className='uikitDemo'
+                navigation={
+                    <ApplicationLayoutBodyNavigation>
+                        <SubNavigation
+                            navItems={[
+                                {
+                                    key: '1',
+                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
+                                },
+                                {
+                                    key: '2',
+                                    route: (
+                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
+                                            Subnavigation 2
+                                        </NavLink>
+                                    ),
+                                },
+                                {
+                                    key: '3',
+                                    route: (
+                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
+                                            Subnavigation 3
+                                        </NavLink>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </ApplicationLayoutBodyNavigation>
+                }
+            >
+                <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 aria-current="page" class="active" href="#components/subNavigation">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="ApplicationLayoutBodyNavigation">
+                <div class="SubNavigation width-100pct overflow-auto">
+                    <ul class="SubmoduleNavigation nav">
+                        <li class="submodule" data-nav-item-key="1">
+                            <a aria-current="page" class="active" href="#components/subNavigation">Subnavigation 1</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="2">
+                            <a href="#2">Subnavigation 2</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="3">
+                            <a href="#3">Subnavigation 3</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <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/supportMarker.md

@@ -0,0 +1,115 @@
+# SupportMarker
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/supportMarker
+*Captured:* 2025-12-12T12:38:59.090Z
+
+You can add the support-marker class along with the data-support attribute to any HTML element - even divs wrapping around iframes, for example!
+
+## SupportMarker
+
+By default, support markers are invisible. Adding the show-support-marker class to the html tag will cause all support markers to show up.
+
+You can use the utility functions provided by the UIKIT for easily adding / removing that class. Either simply toggle support markers on and off with toggleSupportMarker, or manage the state whether to show support markers manually and use enableSupportMarker.
+
+### Example: Example 1
+
+Toggle Support MarkersLorem Ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### Summary
+
+Toggle Support MarkersLorem Ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import { toggleSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+export default () => {
+    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';
+    const iframeSupportData = `Widget: The Widget Name\nTeam: The Team Name \nSRC: ${iFrameSrc}`;
+
+    return (
+        <div className='space-y-25'>
+            <Button onClick={toggleSupportMarker}>Toggle Support Markers</Button>
+
+            <div className='support-marker' data-support='LoremIpsum component'>
+                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>
+                    <div>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore
+                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet
+                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+                    </div>
+                </ExpanderPanel>
+            </div>
+
+            <div className='support-marker' data-support={iframeSupportData}>
+                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />
+            </div>
+        </div>
+    );
+};
+```
+
+### Example: Example 2
+
+Show support markers
+
+Lorem Ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### Summary
+
+Show support markers
+
+Lorem Ipsum
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useState } from 'react';
+
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import Switch from '@rio-cloud/rio-uikit/Switch';
+import { enableSupportMarker } from '@rio-cloud/rio-uikit/SupportMarker';
+
+export default () => {
+    // you could, for example, populate this state from localStorage at startup
+    const [showSupportMarker, setShowSupportMarker] = useState(false);
+
+    useEffect(() => {
+        enableSupportMarker(showSupportMarker);
+    }, [showSupportMarker]);
+
+    const iFrameSrc = 'https://uikit.developers.rio.cloud/#start/intro';
+    const iframeSupportData = `Widget: The Widget Name\nTeam: The Team Name \nSRC: ${iFrameSrc}`;
+
+    return (
+        <div className='space-y-25'>
+            <Switch onChange={setShowSupportMarker} checked={showSupportMarker} labelPosition='right'>
+                <div>Show support markers</div>
+            </Switch>
+
+            <div className='support-marker' data-support='LoremIpsum component'>
+                <ExpanderPanel title='Lorem Ipsum' bsStyle='default' open>
+                    <div>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor et dolore
+                        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et. Stet
+                        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+                    </div>
+                </ExpanderPanel>
+            </div>
+
+            <div className='support-marker' data-support={iframeSupportData}>
+                <iframe className='unstyled' width='100%' height='500' src={iFrameSrc} />
+            </div>
+        </div>
+    );
+};
+```