@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,251 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:53.873Z",
+    "source": "https://uikit.developers.rio.cloud/#components/popover",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/popover",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "74d666dec81740971f88365628dd717089c41d670fa5167587eebe9f555df5ae"
+  },
+  "title": "Popover",
+  "lead": "In order to use a Popover on an element, wrap it with the OverlayTrigger component.",
+  "content": [
+    {
+      "heading": "Popover",
+      "body": "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.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Popover from '@rio-cloud/rio-uikit/Popover';\nimport OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';\n\nconst placements = ['top', 'right', 'bottom', 'left'] as const;\n\nexport default () => (\n    <div className='display-flex flex-wrap'>\n        {placements.map(placement => (\n            <OverlayTrigger\n                trigger='click'\n                key={placement}\n                placement={placement}\n                overlay={\n                    <Popover id={`popover-positioned-${placement}`} title='Demo'>\n                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n                    </Popover>\n                }\n            >\n                {/* Surrounding div is required for proper positioning of the Popover as the button uses a margin */}\n                <div>\n                    <button className='btn btn-default margin-10' type='button'>\n                        Popover on {placement}\n                    </button>\n                </div>\n            </OverlayTrigger>\n        ))}\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap\">\n    <div>\n        <button class=\"btn btn-default margin-10\" type=\"button\">Popover on top</button>\n    </div>\n    <div>\n        <button class=\"btn btn-default margin-10\" type=\"button\">Popover on right</button>\n    </div>\n    <div>\n        <button class=\"btn btn-default margin-10\" type=\"button\">Popover on bottom</button>\n    </div>\n    <div>\n        <button class=\"btn btn-default margin-10\" type=\"button\">Popover on left</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Popover",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "An html id attribute, necessary for accessibility."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "'auto' | 'top' | 'right' | 'bottom' | 'left'",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "titleClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the Popover.Title element."
+                    },
+                    {
+                      "name": "contentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the Popover.Content element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "OverlayTrigger",
+                  "rows": [
+                    {
+                      "name": "trigger",
+                      "type": "'click' | 'hover' | 'focus'",
+                      "default": "hover",
+                      "description": "Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus'"
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number / Object",
+                      "default": "",
+                      "description": "A millisecond delay amount to show and hide the Overlay once triggered."
+                    },
+                    {
+                      "name": "└show",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before showing the Overlay once triggered."
+                    },
+                    {
+                      "name": "└hide",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before hiding the Overlay once triggered."
+                    },
+                    {
+                      "name": "defaultShow",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly."
+                    },
+                    {
+                      "name": "overlay",
+                      "type": "Node",
+                      "default": "",
+                      "description": "An element or text to overlay next to the target."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "popperConfig",
+                      "type": "Object",
+                      "default": "",
+                      "description": "A Popper.js config object passed to the the underlying popper instance."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Extended example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Popover from '@rio-cloud/rio-uikit/Popover';\nimport OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';\n\nconst content = (\n    <ul className='list-group margin-0 width-300'>\n        <li className='list-group-item padding-x-20 border-none'>Cras justo odio</li>\n        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>\n            <span>Dapibus ac facilisis in</span>\n            <span className='label label-info margin-left-25'>Some info</span>\n        </li>\n        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>Morbi leo risus</li>\n        <li className='list-group-item padding-x-20 border-top-only border-color-lighter rounded-bottom'>\n            Porta ac consectetur ac\n        </li>\n    </ul>\n);\n\nexport default () => {\n    const [showPopover, setShowPopover] = useState(false);\n\n    return (\n        <div className='padding-25 bg-lightest'>\n            <OverlayTrigger\n                show={showPopover}\n                onToggle={setShowPopover}\n                trigger='click'\n                placement='right'\n                overlay={\n                    <Popover\n                        id='popover-extended-sample'\n                        titleClassName='bg-lightest rounded-top'\n                        contentClassName='padding-0'\n                    >\n                        <Popover.Title className='rounded-top padding-x-20'>\n                            <div>\n                                <div className='h5 text-medium margin-bottom-0'>Lorem ipsum dolor</div>\n                                <div className='margin-bottom-20 text-color-dark'>13.04.2021 15:00 - 16:00</div>\n                                <div className='btn-toolbar display-grid grid-cols-2 margin-bottom-15'>\n                                    <Button>Do nothing</Button>\n                                    <Button bsStyle='primary' onClick={() => setShowPopover(false)}>\n                                        Close\n                                    </Button>\n                                </div>\n                            </div>\n                        </Popover.Title>\n                        <Popover.Content className='padding-0'>{content}</Popover.Content>\n                    </Popover>\n                }\n                popperConfig={{\n                    modifiers: [\n                        { name: 'offset', options: { offset: [50, 15] } },\n\n                        // 5px from the edges of the popper due to rounded corners for the popover\n                        { name: 'arrow', options: { padding: 5 } },\n                    ],\n                }}\n            >\n                <Button bsStyle='info' bsSize='lg' variant='outline'>\n                    Click Me\n                </Button>\n            </OverlayTrigger>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-25 bg-lightest\">\n    <button type=\"button\" class=\"btn btn-info btn-outline btn-lg btn-component\" tabindex=\"0\">Click Me</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Popover",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "An html id attribute, necessary for accessibility."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "'auto' | 'top' | 'right' | 'bottom' | 'left'",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "titleClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the Popover.Title element."
+                    },
+                    {
+                      "name": "contentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the Popover.Content element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "OverlayTrigger",
+                  "rows": [
+                    {
+                      "name": "trigger",
+                      "type": "'click' | 'hover' | 'focus'",
+                      "default": "hover",
+                      "description": "Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus'"
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number / Object",
+                      "default": "",
+                      "description": "A millisecond delay amount to show and hide the Overlay once triggered."
+                    },
+                    {
+                      "name": "└show",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before showing the Overlay once triggered."
+                    },
+                    {
+                      "name": "└hide",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before hiding the Overlay once triggered."
+                    },
+                    {
+                      "name": "defaultShow",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly."
+                    },
+                    {
+                      "name": "overlay",
+                      "type": "Node",
+                      "default": "",
+                      "description": "An element or text to overlay next to the target."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "",
+                      "description": "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"
+                    },
+                    {
+                      "name": "popperConfig",
+                      "type": "Object",
+                      "default": "",
+                      "description": "A Popper.js config object passed to the the underlying popper instance."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:53.921Z",
+    "source": "https://uikit.developers.rio.cloud/#components/position",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/position",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "da9add5071a0c46141530eeb23e99a02826ce72ff597db4b55babc12b0e6f778"
+  },
+  "title": "Position",
+  "lead": "A helper component to format a latitude / longitude position.",
+  "content": [
+    {
+      "heading": "Position",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><span class=\"vehiclePositionInfo\">N48° 8.246′ E11° 34.529′</span><hr><span class=\"vehiclePositionInfo\">N52° 7.394′ W12° 14.054′</span></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport Position from '@rio-cloud/rio-uikit/Position';\n\nexport default () => (\n    <div>\n        <Position latitude={48.13743} longitude={11.57549} />\n        <hr />\n        <Position latitude={52.123234} longitude={-12.234234234} />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <span class=\"vehiclePositionInfo\">N48° 8.246′ E11° 34.529′</span>\n    <hr>\n    <span class=\"vehiclePositionInfo\">N52° 7.394′ W12° 14.054′</span>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "latitude",
+                      "type": "Number",
+                      "default": "",
+                      "description": ""
+                    },
+                    {
+                      "name": "longitude",
+                      "type": "Number",
+                      "default": "",
+                      "description": ""
+                    },
+                    {
+                      "name": "address",
+                      "type": "String",
+                      "default": "",
+                      "description": "Can be used to override the default output"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}