@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/vivinho-loading-animation/in-lottie.json

@@ -0,0 +1,402 @@
+{
+    "v": "4.8.0",
+    "meta": {"g": "LottieFiles AE 3.5.1", "a": "", "k": "", "d": "", "tc": ""},
+    "fr": 25,
+    "ip": 0,
+    "op": 25,
+    "w": 500,
+    "h": 500,
+    "ddd": 0,
+    "assets": [],
+    "layers": [
+        {
+            "ddd": 0,
+            "ind": 1,
+            "ty": 4,
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 1,
+                    "k": [
+                        {"i": {"x": [0.2], "y": [1]}, "o": {"x": [0.17], "y": [0.17]}, "t": 0, "s": [0]},
+                        {"t": 17.92, "s": [100]}
+                    ]
+                },
+                "r": {"a": 0, "k": 0},
+                "p": {"a": 0, "k": [250, 250.5, 0]},
+                "a": {"a": 0, "k": [0, 5, 0]},
+                "s": {
+                    "a": 1,
+                    "k": [
+                        {
+                            "i": {"x": [0.2, 0.2, 0.83], "y": [1, 1, 1]},
+                            "o": {"x": [0.17, 0.17, 0.17], "y": [0.17, 0.17, 0]},
+                            "t": 0,
+                            "s": [10, 10, 100]
+                        },
+                        {"t": 25, "s": [212, 212, 100]}
+                    ]
+                }
+            },
+            "ao": 0,
+            "shapes": [
+                {
+                    "ty": "gr",
+                    "it": [
+                        {
+                            "ind": 0,
+                            "ty": "sh",
+                            "ks": {
+                                "a": 0,
+                                "k": {
+                                    "i": [
+                                        [16.33, -59.11],
+                                        [-0.59, -65.4],
+                                        [-6.41, -63.77],
+                                        [-16.54, -58.8],
+                                        [-24.7, -30.25],
+                                        [-11.86, -19.77],
+                                        [-10.61, -12.32],
+                                        [-27.31, -16.72],
+                                        [-38.63, -18.37],
+                                        [-43.73, -14.48],
+                                        [-45.75, -7.31],
+                                        [-45.98, -0.33],
+                                        [-41.74, 4.62],
+                                        [-26.82, 8.29],
+                                        [-15.8, 12.12],
+                                        [-16.27, 19.22],
+                                        [-31.01, 37.75],
+                                        [-39.93, 56.25],
+                                        [-30.76, 64.34],
+                                        [-23.82, 64.51],
+                                        [-19.62, 62.07],
+                                        [-9.02, 48.63],
+                                        [-2.21, 40.42],
+                                        [2.67, 40.77],
+                                        [14.15, 55.22],
+                                        [28.34, 65.65],
+                                        [37.89, 58.34],
+                                        [39.65, 51.74],
+                                        [38.44, 47.25],
+                                        [24.17, 29.24],
+                                        [14.91, 17],
+                                        [18.01, 10.53],
+                                        [33.45, 6.79],
+                                        [47.09, -0.97],
+                                        [45, -10.56],
+                                        [41.9, -16.54],
+                                        [36.16, -18.7],
+                                        [21.29, -15.08],
+                                        [12.24, -12.82],
+                                        [8.76, -16.91],
+                                        [15.27, -21.49],
+                                        [25.49, -40.2]
+                                    ],
+                                    "o": [
+                                        [5.61, -64.74],
+                                        [-6.4, -63.77],
+                                        [-11.82, -62.22],
+                                        [-26.41, -44.62],
+                                        [-14.23, -20.84],
+                                        [-8.24, -15.87],
+                                        [-20.32, -14.76],
+                                        [-36.45, -18.72],
+                                        [-42.33, -16.21],
+                                        [-45.11, -9.88],
+                                        [-46.5, -2.53],
+                                        [-43.56, 3.31],
+                                        [-33.25, 6.8],
+                                        [-18.16, 10.52],
+                                        [-14.97, 17.04],
+                                        [-24.33, 29.38],
+                                        [-40.71, 49.95],
+                                        [-33.17, 61.17],
+                                        [-25.45, 64.77],
+                                        [-20.88, 63.14],
+                                        [-13.9, 54.65],
+                                        [-3.37, 41.35],
+                                        [1.01, 39.38],
+                                        [9.02, 48.63],
+                                        [22.43, 65.31],
+                                        [34.43, 60.14],
+                                        [39.54, 53.32],
+                                        [39.1, 48.68],
+                                        [30.82, 37.64],
+                                        [16.2, 19.13],
+                                        [15.79, 12.23],
+                                        [26.81, 8.24],
+                                        [44.29, 3.91],
+                                        [45.48, -7.94],
+                                        [43.35, -14.98],
+                                        [38.25, -18.43],
+                                        [27.7, -16.74],
+                                        [13.6, -13.37],
+                                        [9.3, -14.2],
+                                        [12.49, -20.18],
+                                        [23.32, -30.2],
+                                        [20.44, -54.35]
+                                    ],
+                                    "v": [
+                                        [10.97, -61.93],
+                                        [-6.4, -63.77],
+                                        [-6.41, -63.77],
+                                        [-19.74, -54.1],
+                                        [-16.07, -22.61],
+                                        [-10.04, -17.97],
+                                        [-13.24, -13.29],
+                                        [-34.36, -18.29],
+                                        [-40.48, -17.29],
+                                        [-44.42, -12.43],
+                                        [-46.22, -4.71],
+                                        [-44.77, 1.49],
+                                        [-39.64, 5.16],
+                                        [-20.41, 9.93],
+                                        [-15.48, 14.66],
+                                        [-17.69, 20.99],
+                                        [-37.59, 46.17],
+                                        [-35.98, 59.12],
+                                        [-27.05, 64.6],
+                                        [-22.35, 63.83],
+                                        [-18.7, 60.72],
+                                        [-4.22, 42.54],
+                                        [-0.87, 39.87],
+                                        [3.79, 42.14],
+                                        [19.45, 61.65],
+                                        [31.8, 62.5],
+                                        [39.04, 54.79],
+                                        [39.38, 50.21],
+                                        [37.46, 46.05],
+                                        [17.53, 20.83],
+                                        [15.41, 14.74],
+                                        [20.31, 9.96],
+                                        [39.97, 5.04],
+                                        [46.09, -5.35],
+                                        [44.17, -13.07],
+                                        [40.07, -17.49],
+                                        [34.15, -18.25],
+                                        [14.85, -13.57],
+                                        [11.05, -13.49],
+                                        [10.26, -18.17],
+                                        [17.3, -23.75],
+                                        [22.49, -48.59]
+                                    ],
+                                    "c": true
+                                }
+                            },
+                            "_render": true
+                        },
+                        {
+                            "ty": "gs",
+                            "o": {"a": 0, "k": 100},
+                            "w": {"a": 0, "k": 1.5},
+                            "g": {
+                                "p": 3,
+                                "k": {"a": 0, "k": [0, 0.9, 0.73, 1, 0.5, 0.95, 0.57, 0.91, 1, 1, 0.42, 0.81]}
+                            },
+                            "s": {"a": 0, "k": [-46.3, -64.65]},
+                            "e": {"a": 0, "k": [45.84, 64.65]},
+                            "t": 1,
+                            "lc": 1,
+                            "lj": 1,
+                            "ml": 4,
+                            "ml2": {"a": 0, "k": 4},
+                            "bm": 0,
+                            "_render": true
+                        },
+                        {
+                            "ty": "fl",
+                            "c": {"a": 0, "k": [0.40000000596, 0, 0.600000023842, 1]},
+                            "o": {"a": 0, "k": 100},
+                            "r": 1,
+                            "bm": 0,
+                            "_render": true
+                        },
+                        {
+                            "ty": "tr",
+                            "p": {"a": 0, "k": [0, 0]},
+                            "a": {"a": 0, "k": [0, 0]},
+                            "s": {"a": 0, "k": [100, 100]},
+                            "r": {"a": 0, "k": -0.91},
+                            "o": {"a": 0, "k": 100},
+                            "sk": {"a": 0, "k": 0},
+                            "sa": {"a": 0, "k": 0},
+                            "_render": true
+                        }
+                    ],
+                    "bm": 0,
+                    "_render": true
+                },
+                {"ty": "op", "a": {"a": 0, "k": 0}, "lj": 1, "ml": {"a": 0, "k": 4}, "_render": true},
+                {
+                    "ty": "gr",
+                    "it": [
+                        {
+                            "ind": 0,
+                            "ty": "sh",
+                            "ks": {
+                                "a": 0,
+                                "k": {
+                                    "i": [
+                                        [16.33, -59.11],
+                                        [-0.59, -65.4],
+                                        [-6.41, -63.77],
+                                        [-16.54, -58.8],
+                                        [-24.7, -30.25],
+                                        [-11.86, -19.77],
+                                        [-10.61, -12.32],
+                                        [-27.31, -16.72],
+                                        [-38.63, -18.37],
+                                        [-43.73, -14.48],
+                                        [-45.75, -7.31],
+                                        [-45.98, -0.33],
+                                        [-41.74, 4.62],
+                                        [-26.82, 8.29],
+                                        [-15.8, 12.12],
+                                        [-16.27, 19.22],
+                                        [-31.01, 37.75],
+                                        [-39.93, 56.25],
+                                        [-30.76, 64.34],
+                                        [-23.82, 64.51],
+                                        [-19.62, 62.07],
+                                        [-9.02, 48.63],
+                                        [-2.21, 40.42],
+                                        [2.67, 40.77],
+                                        [14.15, 55.22],
+                                        [28.34, 65.65],
+                                        [37.89, 58.34],
+                                        [39.65, 51.74],
+                                        [38.44, 47.25],
+                                        [24.17, 29.24],
+                                        [14.91, 17],
+                                        [18.01, 10.53],
+                                        [33.45, 6.79],
+                                        [47.09, -0.97],
+                                        [45, -10.56],
+                                        [41.9, -16.54],
+                                        [36.16, -18.7],
+                                        [21.29, -15.08],
+                                        [12.24, -12.82],
+                                        [8.76, -16.91],
+                                        [15.27, -21.49],
+                                        [25.49, -40.2]
+                                    ],
+                                    "o": [
+                                        [5.61, -64.74],
+                                        [-6.4, -63.77],
+                                        [-11.82, -62.22],
+                                        [-26.41, -44.62],
+                                        [-14.23, -20.84],
+                                        [-8.24, -15.87],
+                                        [-20.32, -14.76],
+                                        [-36.45, -18.72],
+                                        [-42.33, -16.21],
+                                        [-45.11, -9.88],
+                                        [-46.5, -2.53],
+                                        [-43.56, 3.31],
+                                        [-33.25, 6.8],
+                                        [-18.16, 10.52],
+                                        [-14.97, 17.04],
+                                        [-24.33, 29.38],
+                                        [-40.71, 49.95],
+                                        [-33.17, 61.17],
+                                        [-25.45, 64.77],
+                                        [-20.88, 63.14],
+                                        [-13.9, 54.65],
+                                        [-3.37, 41.35],
+                                        [1.01, 39.38],
+                                        [9.02, 48.63],
+                                        [22.43, 65.31],
+                                        [34.43, 60.14],
+                                        [39.54, 53.32],
+                                        [39.1, 48.68],
+                                        [30.82, 37.64],
+                                        [16.2, 19.13],
+                                        [15.79, 12.23],
+                                        [26.81, 8.24],
+                                        [44.29, 3.91],
+                                        [45.48, -7.94],
+                                        [43.35, -14.98],
+                                        [38.25, -18.43],
+                                        [27.7, -16.74],
+                                        [13.6, -13.37],
+                                        [9.3, -14.2],
+                                        [12.49, -20.18],
+                                        [23.32, -30.2],
+                                        [20.44, -54.35]
+                                    ],
+                                    "v": [
+                                        [10.97, -61.93],
+                                        [-6.4, -63.77],
+                                        [-6.41, -63.77],
+                                        [-19.74, -54.1],
+                                        [-16.07, -22.61],
+                                        [-10.04, -17.97],
+                                        [-13.24, -13.29],
+                                        [-34.36, -18.29],
+                                        [-40.48, -17.29],
+                                        [-44.42, -12.43],
+                                        [-46.22, -4.71],
+                                        [-44.77, 1.49],
+                                        [-39.64, 5.16],
+                                        [-20.41, 9.93],
+                                        [-15.48, 14.66],
+                                        [-17.69, 20.99],
+                                        [-37.59, 46.17],
+                                        [-35.98, 59.12],
+                                        [-27.05, 64.6],
+                                        [-22.35, 63.83],
+                                        [-18.7, 60.72],
+                                        [-4.22, 42.54],
+                                        [-0.87, 39.87],
+                                        [3.79, 42.14],
+                                        [19.45, 61.65],
+                                        [31.8, 62.5],
+                                        [39.04, 54.79],
+                                        [39.38, 50.21],
+                                        [37.46, 46.05],
+                                        [17.53, 20.83],
+                                        [15.41, 14.74],
+                                        [20.31, 9.96],
+                                        [39.97, 5.04],
+                                        [46.09, -5.35],
+                                        [44.17, -13.07],
+                                        [40.07, -17.49],
+                                        [34.15, -18.25],
+                                        [14.85, -13.57],
+                                        [11.05, -13.49],
+                                        [10.26, -18.17],
+                                        [17.3, -23.75],
+                                        [22.49, -48.59]
+                                    ],
+                                    "c": true
+                                }
+                            },
+                            "_render": true
+                        },
+                        {
+                            "ty": "tr",
+                            "p": {"a": 0, "k": [0, 0]},
+                            "a": {"a": 0, "k": [0, 0]},
+                            "s": {"a": 0, "k": [100, 100]},
+                            "r": {"a": 0, "k": 0},
+                            "o": {"a": 0, "k": 100},
+                            "sk": {"a": 0, "k": 0},
+                            "sa": {"a": 0, "k": 0},
+                            "_render": true
+                        }
+                    ],
+                    "bm": 0,
+                    "_render": true
+                }
+            ],
+            "ip": 0,
+            "op": 25.42,
+            "st": 50,
+            "bm": 0,
+            "completed": true
+        }
+    ],
+    "markers": [],
+    "__complete": true
+}

package/src/vivinho-loading-animation/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+import Lottie from 'lottie-react';
+import * as React from 'react';
+import vivinhoInLottie from './in-lottie.json';
+import vivinhoPulseLottie from './pulse-lottie.json';
+import waveLottie from './wave-lottie.json';
+import vivinhoOutLottie from './out-lottie.json';
+import * as styles from './vivinho-loading-animation.css';
+
+type Props = {
+    isLoading?: boolean;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+};
+
+const VivinhoLoadingAnimation = ({isLoading, onCloseStart, onCloseEnd}: Props): JSX.Element => {
+    const [state, setState] = React.useState<'in' | 'loop' | 'out'>('in');
+    const [waves, setWaves] = React.useState<Array<number>>([]);
+
+    const addWave = () => {
+        setWaves((w) => {
+            if (!w.length) {
+                return [0];
+            }
+            const lastIndex = w[w.length - 1];
+            return [...w, lastIndex + 1];
+        });
+    };
+
+    const removeWave = () => {
+        setWaves((w) => w.slice(1));
+    };
+
+    return (
+        <div className={styles.container}>
+            {waves.map((waveIndex) => (
+                <div className={state === 'out' ? styles.waveFadeOut : undefined} key={waveIndex}>
+                    <Lottie
+                        animationData={waveLottie}
+                        loop={false}
+                        onComplete={() => {
+                            removeWave();
+                        }}
+                    />
+                </div>
+            ))}
+            {state === 'in' ? (
+                <Lottie
+                    animationData={vivinhoInLottie}
+                    loop={false}
+                    onComplete={() => {
+                        if (isLoading) {
+                            setTimeout(() => {
+                                addWave();
+                            }, 800);
+                            setState('loop');
+                        } else {
+                            onCloseStart?.();
+                            setState('out');
+                        }
+                    }}
+                />
+            ) : state === 'loop' ? (
+                <Lottie
+                    animationData={vivinhoPulseLottie}
+                    onLoopComplete={() => {
+                        if (isLoading) {
+                            setTimeout(() => {
+                                addWave();
+                            }, 800);
+                        } else {
+                            onCloseStart?.();
+                            setState('out');
+                        }
+                    }}
+                />
+            ) : (
+                <Lottie
+                    animationData={vivinhoOutLottie}
+                    loop={false}
+                    onComplete={() => {
+                        onCloseEnd?.();
+                    }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default VivinhoLoadingAnimation;