@unisphere/nx 3.14.0 → 3.16.0

package/dist/generators/add-documentation/templates/src/components/introductions/notificaitons-experience.tsx

@@ -0,0 +1,635 @@
+
+import React from 'react';
+import { getUnisphereInstance } from '@unisphere/runtime-js'
+import { useEffect } from 'react'
+import { useState } from 'react';
+import { NotificationsRuntime, NotificationTypes, AlertIconEnum } from '@unisphere/notifications-core';
+import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';
+
+export const NotificationsExperience = ({ preload }: { preload?: boolean }) => {
+
+    const [runtime, setRuntime] = useState<NotificationsRuntime | null>(null);
+
+    useEffect(() => {
+        getUnisphereInstance('').then(workspace => {
+            const runtime = workspace.getRuntime<NotificationsRuntime>('unisphere.widget.notifications', 'notifications');
+            setRuntime(runtime);
+        }).catch(e => {
+            console.error(e)
+        })
+    }, [preload])
+
+
+    return (
+        <PlaygroundCard
+            title="Playground - Notifications"
+        >
+            <div style={{ marginBottom: '1rem', color: '#64748b', fontSize: '0.9rem' }}>
+                Experience Unisphere's notification system with different types and styles. Each button demonstrates a different notification approach.
+            </div>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                    gap: '12px',
+                    marginBottom: '1rem'
+                }}
+            >
+                {/* Toast Notification */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Toast,
+                        content: {
+                            title: 'Toast Alert! 🍞',
+                            message: 'This toast is more reliable than your morning bread. Unlike your code, it actually pops up when expected!',
+                        },
+
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#3b82f6' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#2563eb';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#3b82f6';
+                        }
+                    }}
+                >
+                    🍞 Toast
+                </button>
+
+                {/* Overlay Notification
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Overlay,
+                        content: {
+                            title: 'Welcome to Unisphere',
+                            message: 'This overlay demonstrates how important announcements can be displayed prominently.',
+                            actions: [
+                                { label: 'Get Started', action: () => console.log('Get Started clicked') },
+                                { label: 'Learn More', action: () => console.log('Learn More clicked') }
+                            ]
+                        }
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#10b981' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#059669';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#10b981';
+                        }
+                    }}
+                >
+                    📋 Overlay
+                </button> */}
+
+                {/* Custom Toast */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.CustomToast,
+                        callbacks: {
+                            onMounted: (div: HTMLDivElement) => {
+                                // Create custom toast content with funny documentation-relevant message
+                                div.innerHTML = `
+                                    <div style="
+                                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                                        color: white;
+                                        padding: 16px 20px;
+                                        border-radius: 12px;
+                                        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+                                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                                        max-width: 350px;
+                                        position: relative;
+                                        overflow: hidden;
+                                    ">
+                                        <div style="
+                                            position: absolute;
+                                            top: 0;
+                                            left: 0;
+                                            right: 0;
+                                            height: 3px;
+                                            background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
+                                            animation: shimmer 2s infinite;
+                                        "></div>
+                                        <div style="display: flex; align-items: center; gap: 12px;">
+                                            <div style="font-size: 24px;">🎉</div>
+                                            <div>
+                                                <div style="font-weight: 600; margin-bottom: 4px;">
+                                                    Documentation Ninja Achievement Unlocked!
+                                                </div>
+                                                <div style="font-size: 14px; opacity: 0.9; line-height: 1.4;">
+                                                    You've successfully triggered a custom toast! Your developer skills are 
+                                                    <strong>over 9000</strong> 🚀. The docs are proud of you.
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div style="
+                                            margin-top: 12px;
+                                            padding-top: 12px;
+                                            border-top: 1px solid rgba(255,255,255,0.2);
+                                            font-size: 12px;
+                                            opacity: 0.8;
+                                            text-align: center;
+                                        ">
+                                            💡 Pro tip: Custom toasts can contain any HTML content!
+                                        </div>
+                                    </div>
+                                    <style>
+                                        @keyframes shimmer {
+                                            0% { transform: translateX(-100%); }
+                                            100% { transform: translateX(100%); }
+                                        }
+                                    </style>
+                                `;
+                            },
+                            onUnmounted: (id: string) => {
+                                console.log('🎉 Custom toast with ID', id, 'has been dismissed. Thanks for playing!');
+                            }
+                        }
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#8b5cf6' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#7c3aed';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#8b5cf6';
+                        }
+                    }}
+                >
+                    🎨 Custom Toast
+                </button>
+
+                {/* Borderless Toast */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.BorderlessToast,
+                        callbacks: {
+                            onMounted: (div: HTMLDivElement) => {
+                                // Create a funny borderless toast with coffee theme
+                                div.innerHTML = `
+                                    <div style="
+                                        background: linear-gradient(45deg, #8B4513, #D2691E, #CD853F);
+                                        color: white;
+                                        padding: 16px 24px;
+                                        border-radius: 50px;
+                                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                                        box-shadow: 0 4px 20px rgba(139, 69, 19, 0.3);
+                                        display: flex;
+                                        align-items: center;
+                                        gap: 12px;
+                                        max-width: 400px;
+                                        position: relative;
+                                        overflow: hidden;
+                                        animation: float 3s ease-in-out infinite;
+                                    ">
+                                        <div style="
+                                            position: absolute;
+                                            top: 0;
+                                            left: -100%;
+                                            width: 100%;
+                                            height: 100%;
+                                            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+                                            animation: shimmer 2s infinite;
+                                        "></div>
+                                        <div style="font-size: 24px; z-index: 1;">☕</div>
+                                        <div style="z-index: 1;">
+                                            <div style="font-weight: 600; font-size: 14px; margin-bottom: 2px;">
+                                                Borderless Achievement Unlocked! 🏆
+                                            </div>
+                                            <div style="font-size: 13px; opacity: 0.9; line-height: 1.3;">
+                                                Like your code after 3 cups of coffee - no boundaries, just pure magic! ✨
+                                            </div>
+                                        </div>
+                                        <div style="
+                                            font-size: 20px; 
+                                            z-index: 1;
+                                            animation: bounce 1s ease-in-out infinite alternate;
+                                        ">🚀</div>
+                                    </div>
+                                    <style>
+                                        @keyframes float {
+                                            0%, 100% { transform: translateY(0px); }
+                                            50% { transform: translateY(-5px); }
+                                        }
+                                        @keyframes shimmer {
+                                            0% { left: -100%; }
+                                            100% { left: 100%; }
+                                        }
+                                        @keyframes bounce {
+                                            0% { transform: scale(1); }
+                                            100% { transform: scale(1.1); }
+                                        }
+                                    </style>
+                                `;
+                            },
+                            onUnmounted: (id: string) => {
+                                console.log('☕ Borderless toast with ID', id, 'has floated away like steam from your coffee cup! Keep coding! 🚀');
+                            }
+                        }
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#f59e0b' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#d97706';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#f59e0b';
+                        }
+                    }}
+                >
+                    ✨ Borderless
+                </button>
+
+                {/* Custom Overlay */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.CustomOverlay,
+                        options: {
+                            duration: 3000
+                        },
+                        callbacks: {
+                            onMounted: (div: HTMLDivElement) => {
+                                // Create a hilarious developer-themed custom overlay (no backdrop since one exists)
+                                div.innerHTML = `
+<div style="
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    animation: slideInRight 0.3s ease-out;
+">
+
+    <div style="
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        max-width: 280px;
+      
+      
+    ">
+
+        <div style="display: flex; align-items: flex-start; gap: 12px;">
+            <div style="font-size: 20px; margin-top: 2px;">🤖</div>
+
+            <div style="flex: 1;">
+                <div style="
+                    font-weight: 600; 
+                    font-size: 14px; 
+                    color: #f3f4f6;
+                    margin-bottom: 4px;
+                ">
+                    Custom Overlay Active
+                </div>
+
+                <div style="
+                    font-size: 13px; 
+                    color: #d1d5db;
+                    line-height: 1.4; 
+                    margin-bottom: 12px;
+                ">
+                    You've unlocked advanced notification powers! ✨
+                </div>
+
+                <div style="display: flex; gap: 8px;">
+                    <button 
+                        style="
+                            background: #3b82f6;
+                            color: white;
+                            border: none;
+                            padding: 6px 12px;
+                            border-radius: 6px;
+                            font-size: 12px;
+                            font-weight: 500;
+                            cursor: pointer;
+                            transition: all 0.2s ease;
+                        "
+                        onmouseover="this.style.background='#2563eb'"
+                        onmouseout="this.style.background='#3b82f6'"
+                    >
+                        Got it!
+                    </button>
+
+                    <button                         
+                        style="
+                            background: rgba(255,255,255,0.06);
+                            color: #e5e7eb;
+                            border: 1px solid rgba(255,255,255,0.15);
+                            padding: 6px 12px;
+                            border-radius: 6px;
+                            font-size: 12px;
+                            font-weight: 500;
+                            cursor: pointer;
+                            transition: all 0.2s ease;
+                        "
+                        onmouseover="this.style.background='rgba(255,255,255,0.12)'"
+                        onmouseout="this.style.background='rgba(255,255,255,0.06)'"
+                    >
+                        ☕ Later
+                    </button>
+                </div>
+            </div>
+
+            <button 
+                onclick="this.closest('[style*=fixed]').style.display='none';"
+                style="
+                    background: transparent;
+                    border: none;
+                    color: #9ca3af;
+                    font-size: 16px;
+                    cursor: pointer;
+                    padding: 2px;
+                    line-height: 1;
+                    transition: color 0.2s ease;
+                "
+                onmouseover="this.style.color='#f3f4f6'"
+                onmouseout="this.style.color='#9ca3af'"
+            >
+                ×
+            </button>
+        </div>
+    </div>
+</div>
+
+<style>
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to   { transform: translateX(0); opacity: 1; }
+}
+</style>
+`;
+                            },
+                            onUnmounted: (id: string) => {
+                                console.log('🤖 Custom overlay with ID', id, 'has completed its mission! Developer productivity levels: MAXIMUM! 🚀☕');
+                            }
+                        }
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#ef4444' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#dc2626';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#ef4444';
+                        }
+                    }}
+                >
+                    🚀 Custom Overlay
+                </button>
+
+                {/* Information Alert */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Alert,
+                        text: 'Did you know? Unisphere can load experiences faster than you can say "JavaScript framework fatigue"! 🚀',
+                        variant: AlertIconEnum.Information,
+                        showIcon: true
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#3b82f6' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#2563eb';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#3b82f6';
+                        }
+                    }}
+                >
+                    ℹ️ Info Alert
+                </button>
+
+                {/* Success Alert */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Alert,
+                        text: 'Congratulations! You\'ve successfully mastered the art of clicking buttons. Your developer level has increased! 🎉',
+                        variant: AlertIconEnum.Success,
+                        showIcon: true
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#10b981' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#059669';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#10b981';
+                        }
+                    }}
+                >
+                    ✅ Success Alert
+                </button>
+
+                {/* Warning Alert */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Alert,
+                        text: 'Warning: Your coffee levels are dangerously low! Productivity may decrease by 73%. Please refuel immediately! ☕',
+                        variant: AlertIconEnum.Warning,
+                        showIcon: true
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#f59e0b' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#d97706';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#f59e0b';
+                        }
+                    }}
+                >
+                    ⚠️ Warning Alert
+                </button>
+
+                {/* Error Alert */}
+                <button
+                    onClick={() => runtime?.addNotification({
+                        type: NotificationTypes.Alert,
+                        text: 'Error 404: Your motivation not found. Have you tried turning your coffee machine off and on again? 🤖',
+                        variant: AlertIconEnum.Error,
+                        showIcon: true
+                    })}
+                    disabled={!runtime}
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: runtime ? '#dc2626' : '#94a3b8',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        cursor: runtime ? 'pointer' : 'not-allowed',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '8px'
+                    }}
+                    onMouseEnter={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#b91c1c';
+                        }
+                    }}
+                    onMouseLeave={(e) => {
+                        if (runtime) {
+                            (e.target as HTMLButtonElement).style.backgroundColor = '#dc2626';
+                        }
+                    }}
+                >
+                    ❌ Error Alert
+                </button>
+            </div>
+
+            {!runtime && (
+                <div
+                    style={{
+                        padding: '12px 16px',
+                        backgroundColor: '#fef3c7',
+                        border: '1px solid #f59e0b',
+                        borderRadius: '8px',
+                        fontSize: '14px',
+                        color: '#92400e',
+                        textAlign: 'center'
+                    }}
+                >
+                    💡 Notifications runtime is loading... Buttons will be enabled once ready.
+                </div>
+            )}
+        </PlaygroundCard>
+    );
+}