@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/releaseNotes.md

@@ -0,0 +1,135 @@
+# ReleaseNotes
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/releaseNotes
+*Captured:* 2025-12-12T14:20:58.609Z
+
+Component to render release notes in a standardized manner.
+
+## ReleaseNotes
+
+### Example: Example 1
+
+1.1.023.07.2018
+
+Map view within the tour history table
+• Modern map design as used in the Beta of the fleet monitor
+• Works with all event types
+• Event specific map marker
+• Map size adjustable via slider
+
+1.0.027.06.2018
+
+New feature XYZ has been added ...
+
+fixed bugs in ...
+
+Another feature has been added
+
+#### Summary
+
+1.1.023.07.2018
+
+Map view within the tour history table
+• Modern map design as used in the Beta of the fleet monitor
+• Works with all event types
+• Event specific map marker
+• Map size adjustable via slider
+
+1.0.027.06.2018
+
+New feature XYZ has been added ...
+
+fixed bugs in ...
+
+Another feature has been added
+
+#### React (tsx)
+
+```tsx
+import ReleaseNotes from '@rio-cloud/rio-uikit/ReleaseNotes';
+
+const releaseNotes = {
+    'en-GB': {
+        '1.1.0': {
+            date: '23.07.2018',
+            content: (
+                <div className='padding-left-15'>{`Map view within the tour history table
+• Modern map design as used in the Beta of the fleet monitor
+• Works with all event types
+• Event specific map marker
+    • Map size adjustable via slider`}</div>
+            ),
+        },
+        '1.0.0': {
+            date: '27.06.2018',
+            content: [
+                <div>New feature XYZ has been added ...</div>,
+                <div>fixed bugs in ...</div>,
+                <div>Another feature has been added</div>,
+            ],
+        },
+    },
+};
+
+const translationKey = 'en-GB';
+
+export default () => <ReleaseNotes releaseNotes={releaseNotes[translationKey]} />;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <div class="display-flex justify-content-between">
+                <span class="text-size-16 text-medium">1.1.0</span>
+                <span class="text-thin">23.07.2018</span>
+            </div>
+        </div>
+        <div class="panel-body white-space-pre-line">
+            <div>
+                <div class="padding-left-15">Map view within the tour history table
+                    • Modern map design as used in the Beta of the fleet monitor
+                    • Works with all event types
+                    • Event specific map marker
+                    • Map size adjustable via slider</div>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <div class="display-flex justify-content-between">
+                <span class="text-size-16 text-medium">1.0.0</span>
+                <span class="text-thin">27.06.2018</span>
+            </div>
+        </div>
+        <div class="panel-body white-space-pre-line">
+            <ul class="margin-bottom-0 margin-left-5 padding-left-25">
+                <li>
+                    <div>New feature XYZ has been added ...</div>
+                </li>
+                <li>
+                    <div>fixed bugs in ...</div>
+                </li>
+                <li>
+                    <div>Another feature has been added</div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+{
+    "0.1.2": {
+        date: String,
+        content: arrayOf(nodes) or single node,
+    }
+}
+```

package/dist/docs/components/resizer.md

@@ -0,0 +1,162 @@
+# Resizer
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/resizer
+*Captured:* 2025-12-12T14:20:59.045Z
+
+A helper component to allow elements to resize.
+
+## Resizer
+
+> Note: When the resizer position is set to left or top you also need to position your elements on screen accordingly. Otherwise, the browser will set the height or width and expands in the opposite direction
+
+### Example: Example 1
+
+Horizontal (default):
+
+Vertical (with child element as handle):
+
+#### Summary
+
+Horizontal (default):
+
+Vertical (with child element as handle):
+
+#### React (tsx)
+
+```tsx
+import { Component } from 'react';
+
+import Resizer from '@rio-cloud/rio-uikit/Resizer';
+
+export default class ResizeExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            box1width: 50,
+            box2height: 50,
+            minWidth: 25,
+            maxWidth: 500,
+            minHeight: 25,
+            maxHeight: 500,
+        };
+
+        this.onResizeHorizontal = this.onResizeHorizontal.bind(this);
+        this.onResizeVertical = this.onResizeVertical.bind(this);
+        this.onResizeStart = this.onResizeStart.bind(this);
+        this.onResizeEnd = this.onResizeEnd.bind(this);
+    }
+
+    getWidthInBoundaries(minWidth, maxWidth, width) {
+        if (width > 0 && width < minWidth) {
+            return minWidth;
+        }
+
+        if (width > 0 && width > maxWidth) {
+            return maxWidth;
+        }
+
+        if (width > 0 && width > maxWidth) {
+            return maxWidth;
+        }
+
+        return width;
+    }
+
+    getHeightInBoundaries(minHeight, maxHeight, height) {
+        if (height > 0 && height < minHeight) {
+            return minHeight;
+        }
+
+        if (height > 0 && height > maxHeight) {
+            return maxHeight;
+        }
+
+        if (height > 0 && height > maxHeight) {
+            return maxHeight;
+        }
+
+        return height;
+    }
+
+    onResizeHorizontal(diff) {
+        const { minWidth, maxWidth } = this.props;
+        const updatedWidth = this.state.box1width - diff;
+
+        this.setState({
+            box1width: this.getWidthInBoundaries(minWidth, maxWidth, updatedWidth),
+        });
+    }
+
+    onResizeVertical(diff) {
+        const { minHeight, maxHeight } = this.state;
+        const updatedHeight = this.state.box2height - diff;
+
+        this.setState({
+            box2height: this.getHeightInBoundaries(minHeight, maxHeight, updatedHeight),
+        });
+    }
+
+    onResizeStart(/* event*/) {}
+
+    onResizeEnd(/* event*/) {}
+
+    render() {
+        return (
+            <div>
+                <div>{'Horizontal (default): '}</div>
+                <div className='height-50 bg-light position-relative' style={{ width: this.state.box1width }}>
+                    <Resizer onResize={this.onResizeHorizontal} />
+                </div>
+                <hr />
+                <div>Vertical (with child element as handle):</div>
+                <div className='width-50 bg-light position-relative' style={{ height: this.state.box2height }}>
+                    <Resizer
+                        onResizeStart={this.onResizeStart}
+                        onResize={this.onResizeVertical}
+                        onResizeEnd={this.onResizeEnd}
+                        direction={Resizer.VERTICAL}
+                        position={Resizer.BOTTOM}
+                    >
+                        <div className='height-5 width-100pct bg-dark' />
+                    </Resizer>
+                </div>
+            </div>
+        );
+    }
+}
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div>Horizontal (default): </div>
+    <div class="height-50 bg-light position-relative" style="width: 50px;">
+        <div class="Resizer resize-horizontal resize-right">
+        </div>
+    </div>
+    <hr>
+    <div>Vertical (with child element as handle):</div>
+    <div class="width-50 bg-light position-relative" style="height: 50px;">
+        <div class="Resizer resize-vertical resize-bottom">
+            <div class="height-5 width-100pct bg-dark">
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| direction | String | Resizer.HORIZONTAL | Defines on which axis to resize. Possible values are: Resizer.HORIZONTAL Resizer.VERTICAL or 'x' 'y' |
+| position | String | Resizer.RIGHT | Defines where the resize handle is positioned relative to the element to resize. Possible values are: Resizer.LEFT Resizer.RIGHT Resizer.TOP Resizer.BOTTOM or 'left' 'right' 'top' 'bottom' |
+| onResizeStart | Function | — | Callback when the resize starts, means when the handle is pressed. It returns the respective event. |
+| onResizeEnd | Function | — | Callback when the resize ends, means when the handle is released. It returns the respective event. |
+| onResize | Function | — | Callback when the resize handle is moved. The function returns the distant between the last position and the mouse movement. Means you can either subtract or add this diff to the elements width you want to change. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| children | any | — | Any element to be rendered inside the resizer handle. |