@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/popover.md

@@ -0,0 +1,222 @@
+# Popover
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/popover
+*Captured:* 2025-12-12T14:20:58.362Z
+
+In order to use a Popover on an element, wrap it with the OverlayTrigger component.
+
+## Popover
+
+For positioning Popovers and Tooltips we use Popper.js that is integrated into the OverlayTrigger. For controlling the position or behavior use the popperConfig attribute.
+
+### Example: Example 1
+
+Popover on top
+Popover on right
+Popover on bottom
+Popover on left
+
+#### Summary
+
+Popover on top
+Popover on right
+Popover on bottom
+Popover on left
+
+#### React (tsx)
+
+```tsx
+import Popover from '@rio-cloud/rio-uikit/Popover';
+import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';
+
+const placements = ['top', 'right', 'bottom', 'left'] as const;
+
+export default () => (
+    <div className='display-flex flex-wrap'>
+        {placements.map(placement => (
+            <OverlayTrigger
+                trigger='click'
+                key={placement}
+                placement={placement}
+                overlay={
+                    <Popover id={`popover-positioned-${placement}`} title='Demo'>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                    </Popover>
+                }
+            >
+                {/* Surrounding div is required for proper positioning of the Popover as the button uses a margin */}
+                <div>
+                    <button className='btn btn-default margin-10' type='button'>
+                        Popover on {placement}
+                    </button>
+                </div>
+            </OverlayTrigger>
+        ))}
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-wrap">
+    <div>
+        <button class="btn btn-default margin-10" type="button">Popover on top</button>
+    </div>
+    <div>
+        <button class="btn btn-default margin-10" type="button">Popover on right</button>
+    </div>
+    <div>
+        <button class="btn btn-default margin-10" type="button">Popover on bottom</button>
+    </div>
+    <div>
+        <button class="btn btn-default margin-10" type="button">Popover on left</button>
+    </div>
+</div>
+```
+
+#### Props: Popover
+
+### Popover
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | An html id attribute, necessary for accessibility. |
+| placement | 'auto' \| 'top' \| 'right' \| 'bottom' \| 'left' | — | Sets the direction the Popover is positioned towards. This is generally provided by the OverlayTrigger component positioning the Popover. Possible values are: auto, top, bottom, right orleft |
+| title | String / Node | — | Any element to be rendered as the title of the Popover. It creates a Popover.Title inside the Popover passing the title directly into it. |
+| titleClassName | String | — | Additional classes to be set on the Popover.Title element. |
+| contentClassName | String | — | Additional classes to be set on the Popover.Content element. |
+
+#### Props: OverlayTrigger
+
+### OverlayTrigger
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | 'click' \| 'hover' \| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |
+| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |
+| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |
+| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |
+| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |
+| overlay | Node | — | An element or text to overlay next to the target. |
+| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |
+
+## Extended example
+
+### Example: Example 2
+
+Click Me
+
+#### Summary
+
+Click Me
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Popover from '@rio-cloud/rio-uikit/Popover';
+import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';
+
+const content = (
+    <ul className='list-group margin-0 width-300'>
+        <li className='list-group-item padding-x-20 border-none'>Cras justo odio</li>
+        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>
+            <span>Dapibus ac facilisis in</span>
+            <span className='label label-info margin-left-25'>Some info</span>
+        </li>
+        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>Morbi leo risus</li>
+        <li className='list-group-item padding-x-20 border-top-only border-color-lighter rounded-bottom'>
+            Porta ac consectetur ac
+        </li>
+    </ul>
+);
+
+export default () => {
+    const [showPopover, setShowPopover] = useState(false);
+
+    return (
+        <div className='padding-25 bg-lightest'>
+            <OverlayTrigger
+                show={showPopover}
+                onToggle={setShowPopover}
+                trigger='click'
+                placement='right'
+                overlay={
+                    <Popover
+                        id='popover-extended-sample'
+                        titleClassName='bg-lightest rounded-top'
+                        contentClassName='padding-0'
+                    >
+                        <Popover.Title className='rounded-top padding-x-20'>
+                            <div>
+                                <div className='h5 text-medium margin-bottom-0'>Lorem ipsum dolor</div>
+                                <div className='margin-bottom-20 text-color-dark'>13.04.2021 15:00 - 16:00</div>
+                                <div className='btn-toolbar display-grid grid-cols-2 margin-bottom-15'>
+                                    <Button>Do nothing</Button>
+                                    <Button bsStyle='primary' onClick={() => setShowPopover(false)}>
+                                        Close
+                                    </Button>
+                                </div>
+                            </div>
+                        </Popover.Title>
+                        <Popover.Content className='padding-0'>{content}</Popover.Content>
+                    </Popover>
+                }
+                popperConfig={{
+                    modifiers: [
+                        { name: 'offset', options: { offset: [50, 15] } },
+
+                        // 5px from the edges of the popper due to rounded corners for the popover
+                        { name: 'arrow', options: { padding: 5 } },
+                    ],
+                }}
+            >
+                <Button bsStyle='info' bsSize='lg' variant='outline'>
+                    Click Me
+                </Button>
+            </OverlayTrigger>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-25 bg-lightest">
+    <button type="button" class="btn btn-info btn-outline btn-lg btn-component" tabindex="0">Click Me</button>
+</div>
+```
+
+#### Props: Popover
+
+### Popover
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | An html id attribute, necessary for accessibility. |
+| placement | 'auto' \| 'top' \| 'right' \| 'bottom' \| 'left' | — | Sets the direction the Popover is positioned towards. This is generally provided by the OverlayTrigger component positioning the Popover. Possible values are: auto, top, bottom, right orleft |
+| title | String / Node | — | Any element to be rendered as the title of the Popover. It creates a Popover.Title inside the Popover passing the title directly into it. |
+| titleClassName | String | — | Additional classes to be set on the Popover.Title element. |
+| contentClassName | String | — | Additional classes to be set on the Popover.Content element. |
+
+#### Props: OverlayTrigger
+
+### OverlayTrigger
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | 'click' \| 'hover' \| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |
+| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |
+| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |
+| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |
+| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |
+| overlay | Node | — | An element or text to overlay next to the target. |
+| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |

package/dist/docs/components/position.md

@@ -0,0 +1,50 @@
+# Position
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/position
+*Captured:* 2025-12-12T14:20:58.277Z
+
+A helper component to format a latitude / longitude position.
+
+## Position
+
+### Example: Example 1
+
+N48° 8.246′ E11° 34.529′N52° 7.394′ W12° 14.054′
+
+#### Summary
+
+N48° 8.246′ E11° 34.529′N52° 7.394′ W12° 14.054′
+
+#### React (tsx)
+
+```tsx
+import Position from '@rio-cloud/rio-uikit/Position';
+
+export default () => (
+    <div>
+        <Position latitude={48.13743} longitude={11.57549} />
+        <hr />
+        <Position latitude={52.123234} longitude={-12.234234234} />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <span class="vehiclePositionInfo">N48° 8.246′ E11° 34.529′</span>
+    <hr>
+    <span class="vehiclePositionInfo">N52° 7.394′ W12° 14.054′</span>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| latitude | Number | — |  |
+| longitude | Number | — |  |
+| address | String | — | Can be used to override the default output |