@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/nodata.json

@@ -0,0 +1,139 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:40.154Z",
+    "source": "https://uikit.developers.rio.cloud/#components/noData",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/nodata",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "33febc972d900e15fe367f4ceabf5b0379708e8360d7a6efebc972d84b063b4d"
+  },
+  "title": "NoData",
+  "lead": null,
+  "content": [
+    {
+      "heading": "NoData",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport NoData from '@rio-cloud/rio-uikit/NoData';\n\nexport default () => (\n    <React.Fragment>\n        <div className='margin-10'>\n            <label>Simple NoData element</label>\n            <NoData text='No data' />\n        </div>\n        <div className='margin-10'>\n            <label>Simple NoData element with lager text</label>\n            <NoData text='No data' className='text-size-16' />\n        </div>\n        <div className='margin-10'>\n            <label>NoData with tooltip</label>\n            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' />\n        </div>\n        <div className='margin-10'>\n            <label>NoData with tooltip right</label>\n            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' tooltipPlacement='right' />\n        </div>\n    </React.Fragment>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-10\">\n    <label>Simple NoData element</label>\n    <span class=\"NoData\">\n        <span class=\"pointer-events-none user-select-none\">No data</span>\n    </span>\n</div>\n<div class=\"margin-10\">\n    <label>Simple NoData element with lager text</label>\n    <span class=\"NoData text-size-16\">\n        <span class=\"pointer-events-none user-select-none\">No data</span>\n    </span>\n</div>\n<div class=\"margin-10\">\n    <label>NoData with tooltip</label>\n    <span class=\"NoData\">\n        <span class=\"pointer-events-none user-select-none\">No data</span>\n        <span class=\"rioglyph rioglyph-info-sign margin-left-5\">\n        </span>\n    </span>\n</div>\n<div class=\"margin-10\">\n    <label>NoData with tooltip right</label>\n    <span class=\"NoData\">\n        <span class=\"pointer-events-none user-select-none\">No data</span>\n        <span class=\"rioglyph rioglyph-info-sign margin-left-5\">\n        </span>\n    </span>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "text",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The actual translated \"No data\" text."
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Additional explanation shown inside a tooltip."
+                    },
+                    {
+                      "name": "tooltipPlacement",
+                      "type": "String",
+                      "default": "bottom",
+                      "description": "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"
+                    },
+                    {
+                      "name": "tooltipWidth",
+                      "type": "String",
+                      "default": "auto",
+                      "description": "Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names to be added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport NoData from '@rio-cloud/rio-uikit/NoData';\n\nexport default () => (\n    <>\n        <label>NoData in tables</label>\n        <table className='table table-bordered table-head-filled table-hover margin-top-15'>\n            <thead>\n                <tr>\n                    <th>Column 1</th>\n                    <th>Column 2</th>\n                    <th>Column 3</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr>\n                    <td>\n                        <span>Lorem</span>\n                    </td>\n                    <td>\n                        <NoData text='No data' />\n                    </td>\n                    <td>\n                        <NoData text='No data' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>\n                        <span>Ipsum</span>\n                    </td>\n                    <td>\n                        <NoData text='No data' />\n                    </td>\n                    <td>\n                        <NoData text='No data' />\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>NoData in tables</label>\n<table class=\"table table-bordered table-head-filled table-hover margin-top-15\">\n    <thead>\n        <tr>\n            <th>Column 1</th>\n            <th>Column 2</th>\n            <th>Column 3</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>\n                <span>Lorem</span>\n            </td>\n            <td>\n                <span class=\"NoData\">\n                    <span class=\"pointer-events-none user-select-none\">No data</span>\n                </span>\n            </td>\n            <td>\n                <span class=\"NoData\">\n                    <span class=\"pointer-events-none user-select-none\">No data</span>\n                </span>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <span>Ipsum</span>\n            </td>\n            <td>\n                <span class=\"NoData\">\n                    <span class=\"pointer-events-none user-select-none\">No data</span>\n                </span>\n            </td>\n            <td>\n                <span class=\"NoData\">\n                    <span class=\"pointer-events-none user-select-none\">No data</span>\n                </span>\n            </td>\n        </tr>\n    </tbody>\n</table>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "text",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The actual translated \"No data\" text."
+                    },
+                    {
+                      "name": "tooltip",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Additional explanation shown inside a tooltip."
+                    },
+                    {
+                      "name": "tooltipPlacement",
+                      "type": "String",
+                      "default": "bottom",
+                      "description": "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"
+                    },
+                    {
+                      "name": "tooltipWidth",
+                      "type": "String",
+                      "default": "auto",
+                      "description": "Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names to be added to the wrapping element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/notifications.json

@@ -0,0 +1,65 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:52.838Z",
+    "source": "https://uikit.developers.rio.cloud/#components/notifications",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/notifications",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0e8460b7cedb713d5ceeef0b5e46da889da6f7c4ed686f391e85e8faee5b1b81"
+  },
+  "title": "Notification",
+  "lead": "Hint: Notifications need to be wrapped by a NotificationsContainer inside your application layout body.",
+  "content": [
+    {
+      "heading": "Notification",
+      "body": "Please check out the notifications guidelines here.",
+      "examples": [
+        {
+          "caption": "Notifications",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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\"><div data-capture-callout=\"true\"><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><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\">Legacy notification API - will be removed in the future</div><div><button type=\"button\" class=\"btn btn-danger btn-component\" tabindex=\"0\">Legacy notification with callback and close icon</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Notification, { NOTIFICATION_TIMEOUT_INFINITE } from '@rio-cloud/rio-uikit/Notification';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport { Note } from '../../../components/Note';\n\n// Note: make sure you have set up the NotificationContainer\n\nexport default () => (\n    <>\n        <FormLabel>Notifications</FormLabel>\n        <div className='margin-bottom-20'>\n            <Button onClick={() => Notification.default('Your report is being generated')}>Default notification</Button>\n        </div>\n        <div className='btn-toolbar margin-bottom-20'>\n            <Button bsStyle='info' onClick={() => Notification.info('Info message')}>\n                Info notification\n            </Button>\n            <Button bsStyle='success' onClick={() => Notification.success('Success message')}>\n                Success notification\n            </Button>\n            <Button bsStyle='warning' onClick={() => Notification.warning('Warning message')}>\n                Warning notification\n            </Button>\n            <Button bsStyle='danger' onClick={() => Notification.error('Error message')}>\n                Error notification\n            </Button>\n        </div>\n        <Divider spacing={25} />\n        <FormLabel>Notifications with options</FormLabel>\n        <ButtonToolbar>\n            <Button\n                bsStyle='info'\n                onClick={() => {\n                    Notification.info(\n                        <div>\n                            <div className='margin-bottom-5'>Lorem ipsum dolor sit amet </div>\n                            <a href='#' onClick={event => event.stopPropagation()}>\n                                <span>Read more information here</span>\n                                <span className='rioglyph rioglyph-new-window margin-left-5' />\n                            </a>\n                        </div>,\n                        {\n                            title: 'Info title',\n                            timeout: 10_000,\n                            closeButton: true,\n                            hideProgressBar: false,\n                            callback: () => {\n                                Notification.success('Clicked');\n                            },\n                        }\n                    );\n                }}\n            >\n                Info\n            </Button>\n            <Button\n                bsStyle='success'\n                onClick={() => {\n                    Notification.success(\n                        <div>\n                            <a href='#' onClick={event => event.stopPropagation()}>\n                                See all appointments here\n                            </a>\n                        </div>,\n                        {\n                            title: 'Appointment created successfully',\n                            timeout: 10_000,\n                            closeButton: true,\n                            hideProgressBar: false,\n                            callback: () => {\n                                Notification.success('Clicked');\n                            },\n                        }\n                    );\n                }}\n            >\n                Success\n            </Button>\n            <Button\n                bsStyle='warning'\n                onClick={() => {\n                    Notification.warning(\n                        <div>\n                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>\n                            <Button bsStyle='warning' variant='outline' onClick={event => event.stopPropagation()}>\n                                Retry\n                            </Button>\n                        </div>,\n                        {\n                            title: 'Warning title',\n                            timeout: 10_000,\n                            closeButton: true,\n                            hideProgressBar: false,\n                            callback: () => {\n                                Notification.success('Clicked');\n                            },\n                        }\n                    );\n                }}\n            >\n                Warning\n            </Button>\n            <Button\n                bsStyle='danger'\n                onClick={() => {\n                    Notification.error(\n                        <div>\n                            <div className='margin-bottom-10'>Lorem ipsum dolor sit amet </div>\n                            <Button bsStyle='danger' variant='outline' onClick={event => event.stopPropagation()}>\n                                Retry\n                            </Button>\n                        </div>,\n                        {\n                            title: 'Error title',\n                            timeout: 10_000,\n                            closeButton: true,\n                            hideProgressBar: false,\n                            callback: () => {\n                                Notification.success('Clicked');\n                            },\n                        }\n                    );\n                }}\n            >\n                Error\n            </Button>\n        </ButtonToolbar>\n        <div className='margin-top-25 display-inline-flex'>\n            <Note />\n            Use notifications with a progress bar only when the user should interact with the notification for example\n            when adding a link or a button.\n        </div>\n        <Divider spacing={25} />\n        <FormLabel>Legacy notification API - will be removed in the future</FormLabel>\n        <div>\n            <Button\n                bsStyle='danger'\n                onClick={() => {\n                    Notification.error(\n                        <span>\n                            {'You seem to be offline. '}\n                            <span className='notification-close'>\n                                <span className='rioglyph rioglyph-remove' />\n                            </span>\n                        </span>,\n                        'Connection loss',\n                        NOTIFICATION_TIMEOUT_INFINITE,\n                        () => {\n                            Notification.success('Clicked');\n                        }\n                    );\n                }}\n            >\n                Legacy notification with callback and close icon\n            </Button>\n        </div>\n    </>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Notifications</div>\n<div class=\"margin-bottom-20\">\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Default notification</button>\n</div>\n<div class=\"btn-toolbar margin-bottom-20\">\n    <button type=\"button\" class=\"btn btn-info btn-component\" tabindex=\"0\">Info notification</button>\n    <button type=\"button\" class=\"btn btn-success btn-component\" tabindex=\"0\">Success notification</button>\n    <button type=\"button\" class=\"btn btn-warning btn-component\" tabindex=\"0\">Warning notification</button>\n    <button type=\"button\" class=\"btn btn-danger btn-component\" tabindex=\"0\">Error notification</button>\n</div>\n<div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\">\n    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n    </div>\n</div>\n<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Notifications with options</div>\n<div class=\"btn-toolbar\">\n    <button type=\"button\" class=\"btn btn-info btn-component\" tabindex=\"0\">Info</button>\n    <button type=\"button\" class=\"btn btn-success btn-component\" tabindex=\"0\">Success</button>\n    <button type=\"button\" class=\"btn btn-warning btn-component\" tabindex=\"0\">Warning</button>\n    <button type=\"button\" class=\"btn btn-danger btn-component\" tabindex=\"0\">Error</button>\n</div>\n<div class=\"margin-top-25 display-inline-flex\">\n    <div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\">\n        <div data-capture-callout=\"true\">\n            <span class=\"label label-info label-condensed label-filled\">Note</span>\n        </div>\n        <div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">\n        </div>\n    </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.\n</div>\n<div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\">\n    <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n    </div>\n</div>\n<div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Legacy notification API - will be removed in the future</div>\n<div>\n    <button type=\"button\" class=\"btn btn-danger btn-component\" tabindex=\"0\">Legacy notification with callback and close icon</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "<ApplicationLayout>\n    <ApplicationLayout.Header>...</ApplicationLayout.Header>\n    <ApplicationLayout.Body>\n        <NotificationsContainer />\n        ...\n    </ApplicationLayout.Body>\n    ...\n</ApplicationLayout>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useRef } from 'react';\n\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport useClipboard from '@rio-cloud/rio-uikit/useClipboard';\n\n// Note: make sure you have set up the NotificationContainer\n\nexport default () => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const clipboard = useClipboard();\n\n    const handleCopyToClipboard = () => clipboard.copy(inputRef.current?.value ?? '');\n\n    useEffect(() => {\n        clipboard.copied && Notification.default('Value copied to clipboard');\n    }, [clipboard.copied]);\n\n    return (\n        <div className='max-width-250'>\n            <div className='form-group'>\n                <FormLabel htmlFor='totalLength'>Copy to clipboard notification example</FormLabel>\n                <div className='input-group'>\n                    <input id='totalLength' className='form-control' type='text' defaultValue='6.52' ref={inputRef} />\n                    <div className='input-group-addon padding-right-0'>\n                        <Button\n                            bsStyle='muted'\n                            iconName='rioglyph-duplicate'\n                            iconOnly\n                            className='hover-bg-none'\n                            onClick={handleCopyToClipboard}\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-250\">\n    <div class=\"form-group\">\n        <label for=\"totalLength\" class=\"display-inline-block\">\n            <span>Copy to clipboard notification example</span>\n        </label>\n        <div class=\"input-group\">\n            <input id=\"totalLength\" class=\"form-control\" type=\"text\" value=\"6.52\">\n            <div class=\"input-group-addon padding-right-0\">\n                <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component hover-bg-none\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-duplicate\">\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "<ApplicationLayout>\n    <ApplicationLayout.Header>...</ApplicationLayout.Header>\n    <ApplicationLayout.Body>\n        <NotificationsContainer />\n        ...\n    </ApplicationLayout.Body>\n    ...\n</ApplicationLayout>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}