@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/noData.md

@@ -0,0 +1,210 @@
+# NoData
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/noData
+*Captured:* 2025-12-12T12:38:43.173Z
+
+## NoData
+
+### Example: Example 1
+
+Simple NoData elementNo data
+Simple NoData element with lager textNo data
+NoData with tooltipNo data
+NoData with tooltip rightNo data
+
+#### Summary
+
+Simple NoData elementNo data
+Simple NoData element with lager textNo data
+NoData with tooltipNo data
+NoData with tooltip rightNo data
+
+#### React (tsx)
+
+```tsx
+import React from 'react';
+
+import NoData from '@rio-cloud/rio-uikit/NoData';
+
+export default () => (
+    <React.Fragment>
+        <div className='margin-10'>
+            <label>Simple NoData element</label>
+            <NoData text='No data' />
+        </div>
+        <div className='margin-10'>
+            <label>Simple NoData element with lager text</label>
+            <NoData text='No data' className='text-size-16' />
+        </div>
+        <div className='margin-10'>
+            <label>NoData with tooltip</label>
+            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' />
+        </div>
+        <div className='margin-10'>
+            <label>NoData with tooltip right</label>
+            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' tooltipPlacement='right' />
+        </div>
+    </React.Fragment>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-10">
+    <label>Simple NoData element</label>
+    <span class="NoData">
+        <span class="pointer-events-none user-select-none">No data</span>
+    </span>
+</div>
+<div class="margin-10">
+    <label>Simple NoData element with lager text</label>
+    <span class="NoData text-size-16">
+        <span class="pointer-events-none user-select-none">No data</span>
+    </span>
+</div>
+<div class="margin-10">
+    <label>NoData with tooltip</label>
+    <span class="NoData">
+        <span class="pointer-events-none user-select-none">No data</span>
+        <span class="rioglyph rioglyph-info-sign margin-left-5">
+        </span>
+    </span>
+</div>
+<div class="margin-10">
+    <label>NoData with tooltip right</label>
+    <span class="NoData">
+        <span class="pointer-events-none user-select-none">No data</span>
+        <span class="rioglyph rioglyph-info-sign margin-left-5">
+        </span>
+    </span>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | String / Node | — | The actual translated "No data" text. |
+| tooltip | String / Node | — | Additional explanation shown inside a tooltip. |
+| tooltipPlacement | String | bottom | Sets the direction the Tooltip 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 |
+| tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
+| className | String | — | Additional class names to be added to the wrapping element. |
+
+### Example: Example 2
+
+NoData in tablesColumn 1Column 2Column 3
+
+LoremNo dataNo data
+IpsumNo dataNo data
+
+#### Summary
+
+NoData in tablesColumn 1Column 2Column 3
+
+LoremNo dataNo data
+IpsumNo dataNo data
+
+#### React (tsx)
+
+```tsx
+import NoData from '@rio-cloud/rio-uikit/NoData';
+
+export default () => (
+    <>
+        <label>NoData in tables</label>
+        <table className='table table-bordered table-head-filled table-hover margin-top-15'>
+            <thead>
+                <tr>
+                    <th>Column 1</th>
+                    <th>Column 2</th>
+                    <th>Column 3</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>
+                        <span>Lorem</span>
+                    </td>
+                    <td>
+                        <NoData text='No data' />
+                    </td>
+                    <td>
+                        <NoData text='No data' />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <span>Ipsum</span>
+                    </td>
+                    <td>
+                        <NoData text='No data' />
+                    </td>
+                    <td>
+                        <NoData text='No data' />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<label>NoData in tables</label>
+<table class="table table-bordered table-head-filled table-hover margin-top-15">
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <span>Lorem</span>
+            </td>
+            <td>
+                <span class="NoData">
+                    <span class="pointer-events-none user-select-none">No data</span>
+                </span>
+            </td>
+            <td>
+                <span class="NoData">
+                    <span class="pointer-events-none user-select-none">No data</span>
+                </span>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <span>Ipsum</span>
+            </td>
+            <td>
+                <span class="NoData">
+                    <span class="pointer-events-none user-select-none">No data</span>
+                </span>
+            </td>
+            <td>
+                <span class="NoData">
+                    <span class="pointer-events-none user-select-none">No data</span>
+                </span>
+            </td>
+        </tr>
+    </tbody>
+</table>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | String / Node | — | The actual translated "No data" text. |
+| tooltip | String / Node | — | Additional explanation shown inside a tooltip. |
+| tooltipPlacement | String | bottom | Sets the direction the Tooltip 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 |
+| tooltipWidth | String | auto | Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
+| className | String | — | Additional class names to be added to the wrapping element. |

package/dist/docs/components/notifications.md

@@ -0,0 +1,314 @@
+# Notification
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/notifications
+*Captured:* 2025-12-12T12:38:55.225Z
+
+Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
+
+## Notification
+
+Hint: Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
+
+Please check out the notifications guidelines here.
+
+### Example: Notifications
+
+Notifications
+Default notification
+Info notificationSuccess notificationWarning notificationError notification
+
+Notifications with options
+InfoSuccessWarningError
+Note
+
+Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
+
+#### Summary
+
+Notifications
+Default notification
+Info notificationSuccess notificationWarning notificationError notification
+
+Notifications with options
+InfoSuccessWarningError
+Note
+
+Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
+
+#### React (tsx)
+
+```tsx
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Button from '@rio-cloud/rio-uikit/Button';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+import { Note } from '../../../components/Note';
+
+// Note: make sure you have set up the NotificationContainer
+
+export default () => (
+    <>
+        <FormLabel>Notifications</FormLabel>
+        <div className='margin-bottom-20'>
+            <Button onClick={() => Notification.default('Your report is being generated')}>Default notification</Button>
+        </div>
+        <div className='btn-toolbar margin-bottom-20'>
+            <Button bsStyle='info' onClick={() => Notification.info('Info message')}>
+                Info notification
+            </Button>
+            <Button bsStyle='success' onClick={() => Notification.success('Success message')}>
+                Success notification
+            </Button>
+            <Button bsStyle='warning' onClick={() => Notification.warning('Warning message')}>
+                Warning notification
+            </Button>
+            <Button bsStyle='danger' onClick={() => Notification.error('Error message')}>
+                Error notification
+            </Button>
+        </div>
+        <Divider spacing={25} />
+        <FormLabel>Notifications with options</FormLabel>
+        <ButtonToolbar>
+            <Button
+                bsStyle='info'
+                onClick={() => {
+                    Notification.info(
+                        <div>
+                            <div className='margin-bottom-5'>Lorem ipsum dolor sit amet </div>
+                            <a href='#' onClick={event => event.stopPropagation()}>
+                                <span>Read more information here</span>
+                                <span className='rioglyph rioglyph-new-window margin-left-5' />
+                            </a>
+                        </div>,
+                        {
+                            title: 'Info title',
+                            timeout: 10_000,
+                            closeButton: true,
+                            hideProgressBar: false,
+                            callback: () => {
+                                Notification.success('Clicked');
+                            },
+                        }
+                    );
+                }}
+            >
+                Info
+            </Button>
+            <Button
+                bsStyle='success'
+                onClick={() => {
+                    Notification.success(
+                        <div>
+                            <a href='#' onClick={event => event.stopPropagation()}>
+                                See all appointments here
+                            </a>
+                        </div>,
+                        {
+                            title: 'Appointment created successfully',
+                            timeout: 10_000,
+                            closeButton: true,
+                            hideProgressBar: false,
+                            callback: () => {
+                                Notification.success('Clicked');
+                            },
+                        }
+                    );
+                }}
+            >
+                Success
+            </Button>
+            <Button
+                bsStyle='warning'
+                onClick={() => {
+                    Notification.warning(
+                        <div>
+                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>
+                            <Button bsStyle='warning' variant='outline' onClick={event => event.stopPropagation()}>
+                                Retry
+                            </Button>
+                        </div>,
+                        {
+                            title: 'Warning title',
+                            timeout: 10_000,
+                            closeButton: true,
+                            hideProgressBar: false,
+                            callback: () => {
+                                Notification.success('Clicked');
+                            },
+                        }
+                    );
+                }}
+            >
+                Warning
+            </Button>
+            <Button
+                bsStyle='danger'
+                onClick={() => {
+                    Notification.error(
+                        <div>
+                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>
+                            <Button bsStyle='danger' variant='outline' onClick={event => event.stopPropagation()}>
+                                Retry
+                            </Button>
+                        </div>,
+                        {
+                            title: 'Error title',
+                            timeout: 10_000,
+                            closeButton: true,
+                            hideProgressBar: false,
+                            callback: () => {
+                                Notification.success('Clicked');
+                            },
+                        }
+                    );
+                }}
+            >
+                Error
+            </Button>
+        </ButtonToolbar>
+        <div className='margin-top-25 display-inline-flex'>
+            <Note />
+            Use notifications with a progress bar only when the user should interact with the notification for example
+            when adding a link or a button.
+        </div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Notifications</div>
+<div class="margin-bottom-20">
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Default notification</button>
+</div>
+<div class="btn-toolbar margin-bottom-20">
+    <button type="button" class="btn btn-info btn-component" tabindex="0">Info notification</button>
+    <button type="button" class="btn btn-success btn-component" tabindex="0">Success notification</button>
+    <button type="button" class="btn btn-warning btn-component" tabindex="0">Warning notification</button>
+    <button type="button" class="btn btn-danger btn-component" tabindex="0">Error notification</button>
+</div>
+<div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
+    <div class="divider-line bg-light" style="width: 100%; height: 1px;">
+    </div>
+</div>
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Notifications with options</div>
+<div class="btn-toolbar">
+    <button type="button" class="btn btn-info btn-component" tabindex="0">Info</button>
+    <button type="button" class="btn btn-success btn-component" tabindex="0">Success</button>
+    <button type="button" class="btn btn-warning btn-component" tabindex="0">Warning</button>
+    <button type="button" class="btn btn-danger btn-component" tabindex="0">Error</button>
+</div>
+<div class="margin-top-25 display-inline-flex">
+    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0" data-capture-callout="true">
+        <div>
+            <span class="label label-info label-condensed label-filled">Note</span>
+        </div>
+        <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">
+        </div>
+    </div>Use notifications with a progress bar only when the user should interact with the notification for example when adding a link or a button.
+</div>
+```
+
+#### Props (json)
+
+```json
+<ApplicationLayout>
+    <ApplicationLayout.Header>...</ApplicationLayout.Header>
+    <ApplicationLayout.Body>
+        <NotificationsContainer />
+        ...
+    </ApplicationLayout.Body>
+    ...
+</ApplicationLayout>
+```
+
+### Example: Example 2
+
+Copy to clipboard notification example
+
+#### Summary
+
+Copy to clipboard notification example
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef } from 'react';
+
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import Button from '@rio-cloud/rio-uikit/Button';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+import useClipboard from '@rio-cloud/rio-uikit/useClipboard';
+
+// Note: make sure you have set up the NotificationContainer
+
+export default () => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const clipboard = useClipboard();
+
+    const handleCopyToClipboard = () => clipboard.copy(inputRef.current?.value ?? '');
+
+    useEffect(() => {
+        clipboard.copied && Notification.default('Value copied to clipboard');
+    }, [clipboard.copied]);
+
+    return (
+        <div className='max-width-250'>
+            <div className='form-group'>
+                <FormLabel htmlFor='totalLength'>Copy to clipboard notification example</FormLabel>
+                <div className='input-group'>
+                    <input id='totalLength' className='form-control' type='text' defaultValue='6.52' ref={inputRef} />
+                    <div className='input-group-addon padding-right-0'>
+                        <Button
+                            bsStyle='muted'
+                            iconName='rioglyph-duplicate'
+                            iconOnly
+                            className='hover-bg-none'
+                            onClick={handleCopyToClipboard}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-250">
+    <div class="form-group">
+        <label for="totalLength" class="display-inline-block">
+            <span>Copy to clipboard notification example</span>
+        </label>
+        <div class="input-group">
+            <input id="totalLength" class="form-control" type="text" value="6.52">
+            <div class="input-group-addon padding-right-0">
+                <button type="button" class="btn btn-muted btn-icon-only btn-component hover-bg-none" tabindex="0">
+                    <span class="rioglyph rioglyph-duplicate">
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+<ApplicationLayout>
+    <ApplicationLayout.Header>...</ApplicationLayout.Header>
+    <ApplicationLayout.Body>
+        <NotificationsContainer />
+        ...
+    </ApplicationLayout.Body>
+    ...
+</ApplicationLayout>
+```