@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/utilities/useCount.md

@@ -0,0 +1,178 @@
+# useCount
+
+*Category:* Utilities
+*Section:* Data aggregation hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useCount
+*Captured:* 2025-12-12T12:39:48.738Z
+
+useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.
+
+## useCount
+
+### Example: Example 1
+
+Deliveries marked as delivered:3
+Deliveries marked as not delivered:2
+Deliveries with status "PENDING":2
+Deliveries with quantity 0:2
+Deliveries with a written note:2
+Deliveries with at least one item:3
+
+#### Summary
+
+Deliveries marked as delivered:3
+Deliveries marked as not delivered:2
+Deliveries with status "PENDING":2
+Deliveries with quantity 0:2
+Deliveries with a written note:2
+Deliveries with at least one item:3
+
+#### React (tsx)
+
+```tsx
+import useCount from '@rio-cloud/rio-uikit/useCount';
+
+const deliveries = [
+    {
+        id: 'D-001',
+        delivered: true,
+        status: 'PENDING',
+        quantity: 0,
+        notes: '',
+        items: [],
+    },
+    {
+        id: 'D-002',
+        delivered: false,
+        status: 'CONFIRMED',
+        quantity: 20,
+        notes: 'Customer confirmed by phone.',
+        items: [1, 2],
+    },
+    {
+        id: 'D-003',
+        delivered: true,
+        status: 'CANCELLED',
+        quantity: 0,
+        notes: null,
+        items: [],
+    },
+    {
+        id: 'D-004',
+        delivered: false,
+        status: 'PENDING',
+        quantity: 10,
+        notes: 'Leave at front desk.',
+        items: [1],
+    },
+    {
+        id: 'D-005',
+        delivered: true,
+        status: 'CONFIRMED',
+        quantity: 5,
+        notes: '',
+        items: [1, 2, 3],
+    },
+];
+
+export default () => {
+    const countDelivered = useCount(deliveries, 'delivered', { equals: true });
+    const countUndelivered = useCount(deliveries, 'delivered', { equals: false });
+
+    const countPendingStatus = useCount(deliveries, 'status', { equals: 'PENDING' });
+
+    const countQuantityZero = useCount(deliveries, 'quantity', { equals: 0 });
+
+    const countWithNotes = useCount(deliveries, 'notes', {
+        match: val => typeof val === 'string' && val.trim().length > 0,
+    });
+
+    const countWithItems = useCount(deliveries, 'items', {
+        match: val => Array.isArray(val) && val.length > 0,
+    });
+
+    return (
+        <table>
+            <tbody>
+                <tr>
+                    <td>Deliveries marked as delivered:</td>
+                    <td className='text-right width-20'>{countDelivered}</td>
+                </tr>
+                <tr>
+                    <td>Deliveries marked as not delivered:</td>
+                    <td className='text-right width-20'>{countUndelivered}</td>
+                </tr>
+                <tr>
+                    <td>Deliveries with status "PENDING":</td>
+                    <td className='text-right width-20'>{countPendingStatus}</td>
+                </tr>
+                <tr>
+                    <td>Deliveries with quantity 0:</td>
+                    <td className='text-right width-20'>{countQuantityZero}</td>
+                </tr>
+                <tr>
+                    <td>Deliveries with a written note:</td>
+                    <td className='text-right width-20'>{countWithNotes}</td>
+                </tr>
+                <tr>
+                    <td>Deliveries with at least one item:</td>
+                    <td className='text-right width-20'>{countWithItems}</td>
+                </tr>
+            </tbody>
+        </table>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<table>
+    <tbody>
+        <tr>
+            <td>Deliveries marked as delivered:</td>
+            <td class="text-right width-20">3</td>
+        </tr>
+        <tr>
+            <td>Deliveries marked as not delivered:</td>
+            <td class="text-right width-20">2</td>
+        </tr>
+        <tr>
+            <td>Deliveries with status "PENDING":</td>
+            <td class="text-right width-20">2</td>
+        </tr>
+        <tr>
+            <td>Deliveries with quantity 0:</td>
+            <td class="text-right width-20">2</td>
+        </tr>
+        <tr>
+            <td>Deliveries with a written note:</td>
+            <td class="text-right width-20">2</td>
+        </tr>
+        <tr>
+            <td>Deliveries with at least one item:</td>
+            <td class="text-right width-20">3</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+#### Props: Options for the `useCount` hook
+
+### Options for the `useCount` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | unknown[] | — | The array of objects to evaluate. |
+| path | string | — | Dot-separated path to the field that should be checked in each object. |
+| options | object | — | Optional configuration for counting logic. |
+| └equals | unknown | — | The exact value to match against. Only values that strictly equal this will be counted. Ignored if `match` is defined. |
+| └match | (value: unknown) => boolean | — | Custom predicate function that determines whether a value should be counted. Overrides `equals` if defined. |
+
+#### Props: Return value of the `useCount` hook
+
+### Return value of the `useCount` hook
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| count | number | — | The number of objects where the target value matches the given condition. |

package/dist/docs/utilities/useDarkMode.md

@@ -0,0 +1,49 @@
+# useDarkMode
+
+*Category:* Utilities
+*Section:* Browser & device hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useDarkMode
+*Captured:* 2025-12-12T12:39:44.755Z
+
+The useDarkMode hook enables you to listen for the color scheme change and react accordingly.
+
+## useDarkMode
+
+### Example: Example 1
+
+isDarkMode:false
+
+#### Summary
+
+isDarkMode:false
+
+#### React (tsx)
+
+```tsx
+import useDarkMode from '@rio-cloud/rio-uikit/useDarkMode';
+
+export default () => {
+    const isDarkMode = useDarkMode();
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center'>
+            <label>isDarkMode:</label>
+            <div className='margin-15'>{`${isDarkMode}`}</div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center">
+    <label>isDarkMode:</label>
+    <div class="margin-15">false</div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |

package/dist/docs/utilities/useDebugInfo.md

@@ -0,0 +1,126 @@
+# useDebugInfo
+
+*Category:* Utilities
+*Section:* UI state & input hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useDebugInfo
+*Captured:* 2025-12-12T12:39:46.321Z
+
+The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.
+
+## useDebugInfo
+
+### Example: Example 1
+
+Component props:isToggled: false
+count: 0
+
+Debug Info:{
+"renderCount": 1,
+"changedProps": {},
+"timeSinceLastRender": 0,
+"lastRenderTimestamp": 1765543185577
+}
+
+ToggleIncrement
+
+#### Summary
+
+Component props:isToggled: false
+count: 0
+
+Debug Info:{
+"renderCount": 1,
+"changedProps": {},
+"timeSinceLastRender": 0,
+"lastRenderTimestamp": 1765543185577
+}
+
+ToggleIncrement
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import useDebugInfo from '@rio-cloud/rio-uikit/useDebugInfo';
+
+const ChildComponent = (props: { isToggled?: boolean; count?: number }) => {
+    const { isToggled, count } = props;
+
+    const info = useDebugInfo('ChildComponent', props);
+
+    return (
+        <div className='margin-bottom-25 padding-15 border'>
+            <div>
+                <label>Component props:</label>
+                <div>
+                    <b>isToggled: </b>
+                    {isToggled?.toString()}
+                </div>
+                <div>
+                    <b>count: </b>
+                    {count}
+                </div>
+            </div>
+            <div className='margin-top-20'>
+                <label>Debug Info:</label>
+                <pre className='bg-none text-size-12 text-color-darker'>{JSON.stringify(info, null, 1)}</pre>
+            </div>
+        </div>
+    );
+};
+
+export default () => {
+    const [toggle, setToggle] = useState(false);
+    const [count, setCount] = useState(0);
+
+    return (
+        <div>
+            <ChildComponent isToggled={toggle} count={count} />
+            <div className='btn-toolbar'>
+                <Button onClick={() => setToggle(!toggle)}>Toggle</Button>
+                <Button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</Button>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="margin-bottom-25 padding-15 border">
+        <div>
+            <label>Component props:</label>
+            <div>
+                <b>isToggled: </b>false
+            </div>
+            <div>
+                <b>count: </b>0
+            </div>
+        </div>
+        <div class="margin-top-20">
+            <label>Debug Info:</label>
+            <pre class="bg-none text-size-12 text-color-darker">{
+ "renderCount": 1,
+ "changedProps": {},
+ "timeSinceLastRender": 0,
+ "lastRenderTimestamp": 1765543185577
+}</pre>
+        </div>
+    </div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle</button>
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Increment</button>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| component | String | — | The name of the component that will be printed out. |
+| props | Object | — | The component props that will be checked for changed values. |

package/dist/docs/utilities/useEffectOnce.md

@@ -0,0 +1,58 @@
+# useEffectOnce
+
+*Category:* Utilities
+*Section:* Lifecycle & execution hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useEffectOnce
+*Captured:* 2025-12-12T12:39:36.402Z
+
+The useEffectOnce hook allows to use a side effect only once after the component has been mounted.
+
+## useEffectOnce
+
+### Example: Example 1
+
+0
+Increment
+
+#### Summary
+
+0
+Increment
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import useEffectOnce from '@rio-cloud/rio-uikit/useEffectOnce';
+
+export default () => {
+    const [count, setCount] = useState(0);
+
+    useEffectOnce(() => alert('Hi'));
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center'>
+            <div className='margin-15'>{count}</div>
+            <button className='btn btn-default' type='button' onClick={() => setCount(value => value + 1)}>
+                Increment
+            </button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center">
+    <div class="margin-15">0</div>
+    <button class="btn btn-default" type="button">Increment</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| callback | Function | — | The effect callback function to be used after the component has been mounted. |

package/dist/docs/utilities/useElapsedTime.md

@@ -0,0 +1,58 @@
+# useElapsedTime
+
+*Category:* Utilities
+*Section:* Lifecycle & execution hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useElapsedTime
+*Captured:* 2025-12-12T12:39:36.704Z
+
+## useElapsedTime
+
+### Example: Example 1
+
+Get elapsed timeElapsed time sind mount: 0 ms
+
+#### Summary
+
+Get elapsed timeElapsed time sind mount: 0 ms
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+export default () => {
+    const [timeValue, setTimeValue] = useState(0);
+
+    const getElapsedTime = useElapsedTime();
+
+    const handleClick = () => {
+        const elapsedTime = getElapsedTime();
+        setTimeValue(elapsedTime);
+    };
+
+    return (
+        <div>
+            <Button onClick={handleClick}>Get elapsed time</Button>
+            <p>Elapsed time sind mount: {timeValue} ms</p>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Get elapsed time</button>
+    <p>Elapsed time sind mount: 0 ms</p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| startTime | Function | Date.now() | The start time in milliseconds from which to measure the elapsed time. |

package/dist/docs/utilities/useElementSize.md

@@ -0,0 +1,71 @@
+# useElementSize
+
+*Category:* Utilities
+*Section:* DOM behavior hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useElementSize
+*Captured:* 2025-12-12T12:39:39.353Z
+
+The useElementSize hook allows to easily detect an elements dimension.
+
+## useElementSize
+
+### Example: Example 1
+
+Resize box to see it's width updating
+
+Width: 50, Height: 50
+
+#### Summary
+
+Resize box to see it's width updating
+
+Width: 50, Height: 50
+
+#### React (tsx)
+
+```tsx
+import { useState, useRef } from 'react';
+
+import useElementSize from '@rio-cloud/rio-uikit/useElementSize';
+import Resizer from '@rio-cloud/rio-uikit/Resizer';
+
+export default () => {
+    const [boxWidth, setBoxWidth] = useState(50);
+
+    const elementRef = useRef<HTMLDivElement>(null);
+    const [width, height] = useElementSize(elementRef);
+
+    const handleResize = (diff: number) => setBoxWidth(oldWidth => oldWidth - diff);
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center height-100'>
+            <label>Resize box to see it's width updating</label>
+            <div className='height-50 bg-info position-relative' style={{ width: boxWidth }} ref={elementRef}>
+                <Resizer onResize={handleResize} />
+            </div>
+
+            <div>{`Width: ${width}, Height: ${height}`}</div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center height-100">
+    <label>Resize box to see it's width updating</label>
+    <div class="height-50 bg-info position-relative" style="width: 50px;">
+        <div class="Resizer resize-horizontal resize-right">
+        </div>
+    </div>
+    <div>Width: 50, Height: 50</div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | Function | — | Pass a ref of the target element as parameter to the hook to get its height and width. |
+| [width, height] | Number | — | Returns height and width values of the referenced element. |

package/dist/docs/utilities/useEsc.md

@@ -0,0 +1,58 @@
+# useEsc
+
+*Category:* Utilities
+*Section:* DOM behavior hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useEsc
+*Captured:* 2025-12-12T12:39:39.553Z
+
+The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.
+
+## useEsc
+
+### Example: Example 1
+
+Press "esc" key
+
+#### Summary
+
+Press "esc" key
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import useEsc from '@rio-cloud/rio-uikit/useEsc';
+
+export default () => {
+    const [log, setLog] = useState('');
+
+    useEsc(event => {
+        console.log(event);
+        setLog(`${log}Esc pressed\n`);
+    });
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center height-100'>
+            <label className='margin-bottom-10'>Press "esc" key</label>
+            <textarea className='form-control width-50pct' value={log} readOnly rows={4} />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center height-100">
+    <label class="margin-bottom-10">Press "esc" key</label>
+    <textarea class="form-control width-50pct" readonly="" rows="4">
+</textarea>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |

package/dist/docs/utilities/useEvent.md

@@ -0,0 +1,64 @@
+# useEvent
+
+*Category:* Utilities
+*Section:* UI state & input hooks
+*Source:* https://uikit.developers.rio.cloud/#utilities/useEvent
+*Captured:* 2025-12-12T12:39:46.735Z
+
+The useEvent hook allows to easily detect given events registered on the document.
+
+## useEvent
+
+### Example: Example 1
+
+Mouse position:
+
+#### Summary
+
+Mouse position:
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { throttle } from 'es-toolkit/function';
+
+import useEvent from '@rio-cloud/rio-uikit/useEvent';
+
+const THROTTLE_TIMEOUT_IN_MS = 100;
+
+export default () => {
+    const [mousePosition, setMousePosition] = useState(' ');
+
+    const handleMouseMove = throttle(event => {
+        setMousePosition(`x: ${event.screenX} - y: ${event.screenY}`);
+    }, THROTTLE_TIMEOUT_IN_MS);
+
+    useEvent('mousemove', handleMouseMove);
+
+    return (
+        <div className='display-flex justify-content-center align-items-center height-50'>
+            <div className='margin-right-10'>{'Mouse position: '}</div>
+            <div className='label label-default'>{mousePosition}</div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center align-items-center height-50">
+    <div class="margin-right-10">Mouse position: </div>
+    <div class="label label-default">x: 775 - y: 355</div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |
+| eventType | String | — | The event type to listen on. |
+| options | Boolean | false | Flag for event listener options. |
+| target | Node | document | The target the event shall be registered for. Use "window" for "resize" events. |