@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/responsiveColumnStripe.md

@@ -0,0 +1,435 @@
+# ResponsiveColumnStripe
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/responsiveColumnStripe
+*Captured:* 2025-12-12T12:38:43.178Z
+
+The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.
+
+## ResponsiveColumnStripe
+
+> Note: It is mandatory to set the key attribute for the individual items. If they are not set or when they are not unique the calculation of how many items to show on which page wont work. In case a custom component is used as item, wrap it in a native DOM element and set the key to the wrapping element.
+
+### Example: Shipments
+
+ResponsiveColumnStripe with minColumns 2 and maxColumns 5
+Item 1
+Item 2
+Item 3
+Item 4
+Item 5
+
+ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4
+Item 1
+Item 2
+Item 3
+Item 4
+
+ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation
+Friday
+14.01.2023
+
+Shipments4
+Planned0
+
+Monday
+17.01.2023
+
+Shipments4
+Planned0
+
+Thuesday
+18.01.2023
+
+Shipments4
+Planned0
+
+Wednesday
+19.01.2023
+
+Shipments4
+Planned0
+
+#### Summary
+
+ResponsiveColumnStripe with minColumns 2 and maxColumns 5
+Item 1
+Item 2
+Item 3
+Item 4
+Item 5
+
+ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4
+Item 1
+Item 2
+Item 3
+Item 4
+
+ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation
+Friday
+14.01.2023
+
+Shipments4
+Planned0
+
+Monday
+17.01.2023
+
+Shipments4
+Planned0
+
+Thuesday
+18.01.2023
+
+Shipments4
+Planned0
+
+Wednesday
+19.01.2023
+
+Shipments4
+Planned0
+
+#### React (tsx)
+
+```tsx
+import ResponsiveColumnStripe from '@rio-cloud/rio-uikit/ResponsiveColumnStripe';
+
+export default () => {
+    const demoContentOneClasses =
+        'border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer';
+
+    return (
+        <>
+            <div className='margin-bottom-50'>
+                <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>
+                <ResponsiveColumnStripe
+                    className='border rounded bg-white shadow-default'
+                    columnsWrapperClassName='space-x--1'
+                    minColumnWith={150}
+                    minColumns={2}
+                    maxColumns={5}
+                    stretchLastItems={false}
+                    onNextClick={pageNumber => console.log(`show page: ${pageNumber}`)}
+                    onPreviousClick={pageNumber => console.log(`show page: ${pageNumber}`)}
+                >
+                    <div key='1' className={demoContentOneClasses}>
+                        Item 1
+                    </div>
+                    <div key='2' className={demoContentOneClasses}>
+                        Item 2
+                    </div>
+                    <div key='3' className={demoContentOneClasses}>
+                        Item 3
+                    </div>
+                    <div key='4' className={demoContentOneClasses}>
+                        Item 4
+                    </div>
+                    <div key='5' className={demoContentOneClasses}>
+                        Item 5
+                    </div>
+                    <div key='6' className={demoContentOneClasses}>
+                        Item 6
+                    </div>
+                    <div key='7' className={demoContentOneClasses}>
+                        Item 7
+                    </div>
+                </ResponsiveColumnStripe>
+            </div>
+            <div className='margin-bottom-50'>
+                <label>ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4</label>
+                <ResponsiveColumnStripe
+                    className='rounded bg-lightest'
+                    columnsWrapperClassName='nav nav-pills nav-pills-filled nav-justified user-select-none'
+                    buttonClassName='bg-none'
+                    minColumnWith={100}
+                    minColumns={1}
+                    maxColumns={4}
+                    asType='ul'
+                >
+                    <li key='1' className='foobar' style={{ color: 'red' }}>
+                        <span>Item 1</span>
+                    </li>
+                    <li key='2' className='active'>
+                        <span>Item 2</span>
+                    </li>
+                    <li key='3'>
+                        <span>Item 3</span>
+                    </li>
+                    <li key='4'>
+                        <span>Item 4</span>
+                    </li>
+                    <li key='5'>
+                        <span>Item 5</span>
+                    </li>
+                    <li key='6'>
+                        <span>Item 6</span>
+                    </li>
+                    <li key='7'>
+                        <span>Item 7</span>
+                    </li>
+                    <li key='8'>
+                        <span>Item 8</span>
+                    </li>
+                    <li key='9'>
+                        <span>Item 9</span>
+                    </li>
+                    <li key='10'>
+                        <span>Item 10</span>
+                    </li>
+                    <li key='11'>
+                        <span>Item 11</span>
+                    </li>
+                </ResponsiveColumnStripe>
+            </div>
+            <div className='margin-bottom-50'>
+                <label>ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation</label>
+                <ResponsiveColumnStripe
+                    className='bg-white'
+                    columnsWrapperClassName='margin-0 padding-0 space-x--1 user-select-none'
+                    buttonClassName='hover-bg-highlight-decent'
+                    minColumnWith={220}
+                    minColumns={1}
+                    maxColumns={5}
+                    asType='ul'
+                    activePage={1}
+                    disableAnimation
+                >
+                    <div key='1'>
+                        <ComplexDemoContent day='Monday' date='10.01.2023' />
+                    </div>
+                    <div key='2'>
+                        <ComplexDemoContent day='Thuesday' date='11.01.2023' />
+                    </div>
+                    <div key='3'>
+                        <ComplexDemoContent day='Wednesday' date='12.01.2023' />
+                    </div>
+                    <div key='4'>
+                        <ComplexDemoContent day='Thursday' date='13.01.2023' />
+                    </div>
+                    <div key='5'>
+                        <ComplexDemoContent day='Friday' date='14.01.2023' />
+                    </div>
+                    <div key='6'>
+                        <ComplexDemoContent day='Monday' date='17.01.2023' />
+                    </div>
+                    <div key='7'>
+                        <ComplexDemoContent day='Thuesday' date='18.01.2023' />
+                    </div>
+                    <div key='8'>
+                        <ComplexDemoContent day='Wednesday' date='19.01.2023' active />
+                    </div>
+                    <div key='9'>
+                        <ComplexDemoContent day='Thursday' date='20.01.2023' />
+                    </div>
+                    <div key='10'>
+                        <ComplexDemoContent day='Friday' date='21.01.2023' />
+                    </div>
+                </ResponsiveColumnStripe>
+            </div>
+        </>
+    );
+};
+
+type ComplexDemoContentProps = {
+    day: string;
+    date: string;
+    active?: boolean;
+};
+
+const ComplexDemoContent = ({ day, date, active }: ComplexDemoContentProps) => (
+    <div
+        className={`padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ${
+            active ? 'bg-highlight' : ''
+        }`}
+    >
+        <div className='flex-1-1 text-medium'>
+            <div>{day}</div>
+            <div className='text-size-16'>{date}</div>
+        </div>
+        <div className='flex-1-1 text-size-14'>
+            <div className='display-flex flex-row justify-content-end-lg gap-10'>
+                <span className={active ? 'text-color-white' : 'text-color-dark'}>Shipments</span>
+                <span>
+                    <strong>4</strong>
+                </span>
+            </div>
+            <div className='display-flex flex-row justify-content-end-lg gap-10'>
+                <span className={active ? 'text-color-white' : 'text-color-dark'}>Planned</span>
+                <span className={`text-medium ${active ? 'text-color-white' : 'text-color-gray'}`}>0</span>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-bottom-50">
+    <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>
+    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden border rounded bg-white shadow-default">
+        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>
+        </div>
+        <div class="ColumnsArea flex-1-1 overflow-hidden">
+            <div class="ColumnWrapper flex-1-1 display-flex space-x--1">
+                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="1">Item 1</div>
+                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="2">Item 2</div>
+                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="3">Item 3</div>
+                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="4">Item 4</div>
+                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="5">Item 5</div>
+            </div>
+        </div>
+        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>
+        </div>
+    </div>
+</div>
+<div class="margin-bottom-50">
+    <label>ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4</label>
+    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden rounded bg-lightest">
+        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>
+        </div>
+        <div class="ColumnsArea flex-1-1 overflow-hidden">
+            <ul class="ColumnWrapper flex-1-1 display-flex nav nav-pills nav-pills-filled nav-justified user-select-none">
+                <li class="ColumnItem flex-1-1 foobar" data-key="1" style="color: red;">
+                    <span>Item 1</span>
+                </li>
+                <li class="ColumnItem flex-1-1 active" data-key="2">
+                    <span>Item 2</span>
+                </li>
+                <li class="ColumnItem flex-1-1 " data-key="3">
+                    <span>Item 3</span>
+                </li>
+                <li class="ColumnItem flex-1-1 " data-key="4">
+                    <span>Item 4</span>
+                </li>
+            </ul>
+        </div>
+        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>
+        </div>
+    </div>
+</div>
+<div class="margin-bottom-50">
+    <label>ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation</label>
+    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden bg-white">
+        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
+            <span class="rioglyph rioglyph-chevron-left">
+            </span>
+        </div>
+        <div class="ColumnsArea flex-1-1 overflow-hidden">
+            <ul class="ColumnWrapper flex-1-1 display-flex margin-0 padding-0 space-x--1 user-select-none">
+                <div class="ColumnItem flex-1-1 " data-key="5">
+                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
+                        <div class="flex-1-1 text-medium">
+                            <div>Friday</div>
+                            <div class="text-size-16">14.01.2023</div>
+                        </div>
+                        <div class="flex-1-1 text-size-14">
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Shipments</span>
+                                <span>
+                                    <strong>4</strong>
+                                </span>
+                            </div>
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Planned</span>
+                                <span class="text-medium text-color-gray">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ColumnItem flex-1-1 " data-key="6">
+                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
+                        <div class="flex-1-1 text-medium">
+                            <div>Monday</div>
+                            <div class="text-size-16">17.01.2023</div>
+                        </div>
+                        <div class="flex-1-1 text-size-14">
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Shipments</span>
+                                <span>
+                                    <strong>4</strong>
+                                </span>
+                            </div>
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Planned</span>
+                                <span class="text-medium text-color-gray">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ColumnItem flex-1-1 " data-key="7">
+                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
+                        <div class="flex-1-1 text-medium">
+                            <div>Thuesday</div>
+                            <div class="text-size-16">18.01.2023</div>
+                        </div>
+                        <div class="flex-1-1 text-size-14">
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Shipments</span>
+                                <span>
+                                    <strong>4</strong>
+                                </span>
+                            </div>
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-dark">Planned</span>
+                                <span class="text-medium text-color-gray">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ColumnItem flex-1-1 " data-key="8">
+                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none bg-highlight">
+                        <div class="flex-1-1 text-medium">
+                            <div>Wednesday</div>
+                            <div class="text-size-16">19.01.2023</div>
+                        </div>
+                        <div class="flex-1-1 text-size-14">
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-white">Shipments</span>
+                                <span>
+                                    <strong>4</strong>
+                                </span>
+                            </div>
+                            <div class="display-flex flex-row justify-content-end-lg gap-10">
+                                <span class="text-color-white">Planned</span>
+                                <span class="text-medium text-color-white">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ul>
+        </div>
+        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
+            <span class="rioglyph rioglyph-chevron-right">
+            </span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| minColumnWith | Number | 300 | The minimum width in pixel of a single column. This value determines how many columns are shown per page depending on the parent width. |
+| minColumns | Number | 1 | The minimum amount of columns that should be shown per page. |
+| maxColumns | Number | 5 | The maximum amount of columns that should be shown per page. |
+| stretchLastItems | Boolean | false | Defines whether the items on the last page are stretched out to fill the space. |
+| activePage | Number | 0 | The page that shall be shown. This can be used to control the pages from outside. |
+| asType | String | div | The DOM element type of the wrapping column element. If you need a list, this might be set to "ul". |
+| disableAnimation | Boolean | false | Set to true to skip animating pages. |
+| onPreviousClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the previous page is clicked. |
+| onNextClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the next page is clicked. |
+| buttonClassName | String | — | Additional classes set to the navigation buttons. |
+| columnsWrapperClassName | String | — | Additional classes set to the component wrapper element. |
+| className | String | — | Additional classes set to the column wrapper element. |

package/dist/docs/components/responsiveVideo.md

@@ -0,0 +1,71 @@
+# Responsive Video
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/responsiveVideo
+*Captured:* 2025-12-12T12:38:57.123Z
+
+## Responsive Video
+
+### Example: Example 1
+
+Responsive Video 16x9
+
+Responsive Video 4x3
+
+#### Summary
+
+Responsive Video 16x9
+
+Responsive Video 4x3
+
+#### React (tsx)
+
+```tsx
+import ResponsiveVideo from '@rio-cloud/rio-uikit/ResponsiveVideo';
+
+export default () => (
+    <div className='padding-left-15pct padding-right-15pct'>
+        <div className='h3'>Responsive Video 16x9</div>
+        <ResponsiveVideo
+            src='https://www.youtube.com/embed/znckWdXTbTk'
+            aspectRatio={ResponsiveVideo.ASPECT_RATIO_16_BY_9}
+            allowFullScreen
+        />
+        <hr />
+        <div className='h3'>Responsive Video 4x3</div>
+        <ResponsiveVideo
+            src='https://www.youtube.com/embed/znckWdXTbTk'
+            aspectRatio={ResponsiveVideo.ASPECT_RATIO_4_BY_3}
+            allowFullScreen
+        />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-left-15pct padding-right-15pct">
+    <div class="h3">Responsive Video 16x9</div>
+    <div class="video-responsive video-responsive-16by9">
+        <iframe src="https://www.youtube.com/embed/znckWdXTbTk" allowfullscreen="">
+        </iframe>
+    </div>
+    <hr>
+    <div class="h3">Responsive Video 4x3</div>
+    <div class="video-responsive video-responsive-4by3">
+        <iframe src="https://www.youtube.com/embed/znckWdXTbTk" allowfullscreen="">
+        </iframe>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| src | String | — | The link to the source of the video file. |
+| aspectRatio | String | ResponsiveVideo.ASPECT_RATIO_16_BY_9 | Defined the aspect ratio of the video. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9 or '4by3', '16by9' |
+| allowFullScreen | Boolean | true | Allows the fullscreen feature of the underlying embedded iframe. |
+| className | String | — | Additional classes added to the wrapping element. |