@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/animations.md

@@ -0,0 +1,459 @@
+# Animations
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/animations
+*Captured:* 2025-12-12T14:20:37.664Z
+
+The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.
+
+## Animations
+
+The official documentation can be found here https://motion.dev/docs/react
+
+### Example: Example 1
+
+Some Data
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### Summary
+
+Some Data
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### React (tsx)
+
+```tsx
+import { motion } from '@rio-cloud/rio-uikit/motion';
+
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    return (
+        <motion.div
+            animate={{ opacity: [1, 0, 1] }}
+            transition={{
+                // Keyframes that match to the keyframes of the opacity settings above
+                times: [0, 0.5, 1],
+                repeat: Number.POSITIVE_INFINITY,
+                ease: 'easeInOut',
+                duration: 2.5,
+                repeatDelay: 2,
+            }}
+        >
+            <div className='margin-10'>
+                <label>Some Data</label>
+                <div>{dummyText}</div>
+            </div>
+        </motion.div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div style="opacity: 0.863312;">
+    <div class="margin-10">
+        <label>Some Data</label>
+        <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+    </div>
+</div>
+```
+
+### Example: Example 2
+
+
+
+#### Summary
+
+
+
+#### React (tsx)
+
+```tsx
+import { motion } from '@rio-cloud/rio-uikit/motion';
+
+const icons = {
+    check: {
+        d: 'M5 13l4 4L19 7',
+    },
+    arrowRight: {
+        d: 'M14 5l7 7m0 0l-7 7m7-7H3',
+    },
+    externalLink: {
+        d: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',
+    },
+};
+
+const AnimatedIcon = props => {
+    const { icon = 'check', delay = 0.2, ...remainingProps } = props;
+    return (
+        <svg
+            {...remainingProps}
+            className='w-6 h-6'
+            fill='none'
+            stroke='currentColor'
+            viewBox='0 0 24 24'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <motion.path
+                key={icon}
+                initial={{ pathLength: 0 }}
+                animate={{ pathLength: 1 }}
+                transition={{ duration: 0.5, delay, type: 'tween', ease: 'easeOut' }}
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth='2'
+                {...icons[icon]}
+            />
+        </svg>
+    );
+};
+
+const container = {
+    hidden: { opacity: 0 },
+    show: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.2,
+        },
+    },
+};
+
+const item = {
+    hidden: { opacity: 0 },
+    show: { opacity: 1 },
+};
+
+export default () => (
+    <>
+        <motion.div
+            variants={container}
+            initial='hidden'
+            animate='show'
+            className='display-flex gap-20 text-color-darker'
+        >
+            <motion.div key='1' variants={item}>
+                <AnimatedIcon key='arrowRight' delay={0.2} icon='arrowRight' width='50' height='50' />
+            </motion.div>
+            <motion.div key='2' variants={item}>
+                <AnimatedIcon key='check' delay={0.4} icon='check' width='50' height='50' />
+            </motion.div>
+            <motion.div key='3' variants={item}>
+                <AnimatedIcon key='externalLink' delay={0.8} icon='externalLink' width='50' height='50' />
+            </motion.div>
+        </motion.div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex gap-20 text-color-darker" style="opacity: 1;">
+    <div style="opacity: 1;">
+        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="1px 1px">
+            </path>
+        </svg>
+    </div>
+    <div style="opacity: 1;">
+        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.9233986243780237px 1px">
+            </path>
+        </svg>
+    </div>
+    <div style="opacity: 1;">
+        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0px 1px">
+            </path>
+        </svg>
+    </div>
+</div>
+```
+
+### Example: Example 3
+
+Add ItemItem LTM5U13MCY
+
+Item 22I53GR1TM
+
+Item NFPHWUDEPD
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### Summary
+
+Add ItemItem LTM5U13MCY
+
+Item 22I53GR1TM
+
+Item NFPHWUDEPD
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/motion';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+import { dummyText } from '../../../utils/data';
+
+const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
+const generateItems = length => Array.from({ length }, () => getRandomString());
+
+export default () => {
+    const [items, setItems] = useState([...generateItems(3)]);
+
+    const handleAddItem = () => setItems(items => [...items, getRandomString()]);
+    const handleRemoveItem = item => setItems(items => items.filter(i => i !== item));
+
+    return (
+        <div>
+            <Button onClick={handleAddItem}>Add Item</Button>
+            <div className='border rounded bg-white padding-15 margin-top-25 overflow-hidden'>
+                <AnimatePresence>
+                    {items.map(item => (
+                        <motion.div
+                            key={item}
+                            initial={{ height: 0 }}
+                            animate={{ height: 'auto' }}
+                            exit={{ height: 0 }}
+                        >
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                transition={{
+                                    opacity: { duration: 0.1 },
+                                }}
+                            >
+                                <div className='display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only'>
+                                    <div>Item {item}</div>
+                                    <Button onClick={() => handleRemoveItem(item)} bsStyle='muted' bsSize='sm' iconOnly>
+                                        <span className='rioglyph rioglyph-remove text-size-14' />
+                                    </Button>
+                                </div>
+                            </motion.div>
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </div>
+            <div className='margin-top-15'>{dummyText}</div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Add Item</button>
+    <div class="border rounded bg-white padding-15 margin-top-25 overflow-hidden">
+        <div style="height: auto;">
+            <div style="opacity: 1;">
+                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
+                    <div>Item LTM5U13MCY</div>
+                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-remove text-size-14">
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div style="height: auto;">
+            <div style="opacity: 1;">
+                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
+                    <div>Item 22I53GR1TM</div>
+                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-remove text-size-14">
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div style="height: auto;">
+            <div style="opacity: 1;">
+                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
+                    <div>Item NFPHWUDEPD</div>
+                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
+                        <span class="rioglyph rioglyph-remove text-size-14">
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="margin-top-15">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+</div>
+```
+
+### Example: Example 4
+
+Load ItemsItem QJXBPX4FY1
+
+Item L56N5K97ZOG
+
+Item Y280KNO84
+
+Item JE4VGX02E
+
+Item 6TU5EMVX6MF
+
+Item 451IDXN9WP
+
+#### Summary
+
+Load ItemsItem QJXBPX4FY1
+
+Item L56N5K97ZOG
+
+Item Y280KNO84
+
+Item JE4VGX02E
+
+Item 6TU5EMVX6MF
+
+Item 451IDXN9WP
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/motion';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+
+const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
+const generateItems = () => Array.from({ length: 6 }, () => getRandomString());
+
+export default () => {
+    const [items, setItems] = useState([...generateItems()]);
+
+    const handleGenerateItem = () => setItems(generateItems());
+
+    return (
+        <div>
+            <Button onClick={handleGenerateItem}>Load Items</Button>
+            <ul className='list-group margin-top-25 width-300'>
+                <AnimatePresence initial={false}>
+                    {items.map((item, index) => (
+                        <motion.li
+                            key={item}
+                            variants={{
+                                hidden: { opacity: 0, y: -50 },
+                                visible: index => ({
+                                    opacity: 1,
+                                    y: 0,
+                                    transition: {
+                                        delay: index * 0.1,
+                                    },
+                                }),
+                            }}
+                            initial='hidden'
+                            animate='visible'
+                            custom={index}
+                        >
+                            <Checkbox className='list-group-item margin-bottom-10'>
+                                <div className='display-flex gap-5'>
+                                    <span>Item {item}</span>
+                                </div>
+                            </Checkbox>
+                        </motion.li>
+                    ))}
+                </AnimatePresence>
+            </ul>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Load Items</button>
+    <ul class="list-group margin-top-25 width-300">
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item QJXBPX4FY1</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item L56N5K97ZOG</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item Y280KNO84</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item JE4VGX02E</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item 6TU5EMVX6MF</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+        <li style="opacity: 1; transform: none;">
+            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
+                <input type="checkbox" class="list-group-item margin-bottom-10">
+                <span class="checkbox-text">
+                    <span>
+                        <div class="display-flex gap-5">
+                            <span>Item 451IDXN9WP</span>
+                        </div>
+                    </span>
+                </span>
+            </label>
+        </li>
+    </ul>
+</div>
+```