@unisphere/nx 3.14.0 → 3.16.0

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

@@ -0,0 +1,117 @@
+
+import React from 'react';
+import { getUnisphereInstance } from '@unisphere/runtime-js'
+import { useEffect } from 'react'
+import { useState } from 'react';
+import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';
+
+export const ReactionsExperience = ({ preload }: { preload?: boolean }) => {
+
+    const [loaded, setLoaded] = useState(false);
+
+    const loadReactionsExperience = async () => {
+        try {
+            setLoaded(true);
+            const workspace = await getUnisphereInstance('')
+            const runtime = await workspace.loadRuntime('unisphere.widget.reactions', 'showcase', {
+                autoStart: true
+            });
+            (runtime?.runtime as any).assignArea('reactions-experience-container');
+
+        } catch (e) {
+            console.error(e)
+        }
+    }
+
+    useEffect(() => {
+        if (preload) {
+            loadReactionsExperience();
+        }
+    }, [preload])
+
+    const playIcon = (
+        <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            style={{
+                color: 'var(--ifm-color-content-secondary)',
+                opacity: 0.7
+            }}
+        >
+            <circle cx="12" cy="12" r="10" />
+            <polygon points="10,8 16,12 10,16 10,8" />
+        </svg>
+    );
+
+    return (
+        <PlaygroundCard
+            title="Playground - Loading Experience"
+            icon={!loaded ? playIcon : undefined}
+        >
+            <div style={{ marginBottom: '1rem' }}>
+                {loaded ? (
+                    <div style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem', marginBottom: '0.5rem' }}>
+                        This reactions experience is {preload ? 'preloaded' : 'dynamically loaded at runtime'} with just about five lines of code.
+                        <br />
+                        <strong style={{ color: 'var(--ifm-color-content)' }}>Try hovering over the reactions below!</strong>
+                    </div>
+                ) : (
+                    <div style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem' }}>
+                        Lazy load the reactions experience in demo mode (backend connection disabled)
+                    </div>
+                )}
+            </div>
+
+            <div
+                style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    padding: '12px 24px',
+                    backgroundColor: 'var(--ifm-background-surface-color)',
+                    borderRadius: 'var(--ifm-code-border-radius)',
+                    border: '1px solid var(--uc-border-color)',
+                    boxShadow: 'var(--ifm-global-shadow-lw)',
+                    flexWrap: 'wrap',
+                    justifyContent: 'center',
+                    minHeight: '48px',
+                }}
+            >
+                <div id="reactions-experience-container"></div>
+                {!loaded && (
+                    <button
+                        onClick={loadReactionsExperience}
+                        style={{
+                            padding: '8px 16px',
+                            background: 'var(--ifm-color-primary)',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: 'var(--ifm-code-border-radius)',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            boxShadow: 'var(--ifm-global-shadow-lw)',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor = 'var(--ifm-color-primary-dark)';
+                            e.currentTarget.style.transform = 'translateY(-1px)';
+                            e.currentTarget.style.boxShadow = 'var(--ifm-global-shadow-md)';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor = 'var(--ifm-color-primary)';
+                            e.currentTarget.style.transform = 'translateY(0)';
+                            e.currentTarget.style.boxShadow = 'var(--ifm-global-shadow-lw)';
+                        }}
+                    >
+                        Load Reactions Experience
+                    </button>
+                )}
+            </div>
+        </PlaygroundCard>
+    );
+}

package/dist/generators/add-documentation/templates/src/components/ui-shared/introduction-card.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { invertHex } from '@site/src/components/ui-shared/utils';
+import { useColorMode } from '@site/src/components/ui-shared/use-color-mode';
+
+interface IntroductionCardProps {
+  title: string;
+  header?: string;
+  content: string;
+  backgroundColor: string;
+  className?: string;
+}
+
+export const IntroductionCard: React.FC<IntroductionCardProps> = ({ 
+  title, 
+  header, 
+  content, 
+  backgroundColor,
+  className = '' 
+}) => {
+  const colorMode = useColorMode();
+  
+  // More subtle background colors with better contrast
+  const cardBgColor = colorMode === 'dark' 
+    ? `${invertHex(backgroundColor)}15` // Very subtle tint
+    : `${backgroundColor}40`; // Reduced opacity for subtlety
+  const textColor = colorMode === 'dark' ? '#f1f5f9' : '#0f172a';
+  const headerColor = colorMode === 'dark' ? '#94a3b8' : '#475569';
+
+  return (
+    <article
+      className={`group relative flex-1 min-w-0 transition-all duration-200 ease-out hover:scale-[1.01] focus-within:scale-[1.01] ${className}`}
+      style={{
+        minWidth: '280px',
+      }}
+      role="article"
+      aria-labelledby={`card-title-${title.toLowerCase().replace(/\s+/g, '-')}`}
+    >
+      {/* Card container with modern styling */}
+      <div
+        className="relative h-full overflow-hidden"
+        style={{
+          backgroundColor: cardBgColor,
+          borderRadius: '12px',
+          border: colorMode === 'dark' 
+            ? '1px solid rgba(255, 255, 255, 0.08)' 
+            : '1px solid rgba(0, 0, 0, 0.08)',
+          boxShadow: colorMode === 'dark'
+            ? '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
+            : '0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04)',
+        }}
+      >
+        {/* Subtle gradient overlay for depth */}
+        <div 
+          className="absolute inset-0 opacity-30"
+          style={{
+            background: colorMode === 'dark'
+              ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%)'
+              : 'linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%)',
+          }}
+        />
+        
+        {/* Content container */}
+        <div className="relative z-10 p-4 sm:p-5 h-full flex flex-col">
+          {/* Title */}
+          <h2
+            id={`card-title-${title.toLowerCase().replace(/\s+/g, '-')}`}
+            className="text-base sm:text-lg font-semibold leading-tight mb-2 text-center"
+            style={{ 
+              color: textColor,
+              fontWeight: '600',
+              letterSpacing: '-0.015em',
+            }}
+          >
+            {title}
+          </h2>
+          
+          {/* Header/Subtitle */}
+          {header && (
+            <div className="mb-3">
+              <h3
+                className="text-xs sm:text-sm font-medium italic text-center leading-snug"
+                style={{ 
+                  color: headerColor,
+                  fontWeight: '500',
+                }}
+              >
+                {header}
+              </h3>
+            </div>
+          )}
+          
+          {/* Content */}
+          <div className="flex-1 flex items-center justify-center">
+            <p
+              className="text-xs sm:text-sm leading-relaxed text-center max-w-none"
+              style={{ 
+                color: textColor,
+                lineHeight: '1.5',
+                opacity: 0.85,
+              }}
+            >
+              {content}
+            </p>
+          </div>
+        </div>
+        
+        {/* Hover effect border */}
+        <div 
+          className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-60 transition-opacity duration-200 pointer-events-none"
+          style={{
+            border: '1px solid rgba(59, 130, 246, 0.2)',
+          }}
+        />
+      </div>
+    </article>
+  );
+};

package/dist/generators/add-documentation/templates/src/components/ui-shared/playground-card.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode, useState } from 'react';
+
+interface PlaygroundCardProps {
+  title: string;
+  children: ReactNode;
+  icon?: ReactNode;
+  maxWidth?: string;
+}
+
+export const PlaygroundCard: React.FC<PlaygroundCardProps> = ({ 
+  title, 
+  children, 
+  icon,
+  maxWidth = '600px'
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="playground-card"
+      style={{
+        maxWidth,
+        margin: '2rem auto',
+        backgroundColor: isHovered ? 'var(--ifm-background-surface-color)' : 'var(--ifm-background-color)',
+        border: `1px solid ${isHovered ? 'var(--ifm-color-primary)' : 'var(--uc-border-color)'}`,
+        borderRadius: 'var(--ifm-card-border-radius)',
+        padding: '2rem',
+        textAlign: 'center',
+        transition: 'all 0.2s ease-in-out',
+        boxShadow: isHovered ? 'var(--ifm-global-shadow-md)' : 'var(--ifm-global-shadow-lw)',
+        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {icon && (
+        <div style={{ marginBottom: '1rem' }}>
+          {icon}
+        </div>
+      )}
+      
+      <h3
+        style={{
+          color: 'var(--ifm-heading-color)',
+          fontWeight: 'var(--ifm-heading-font-weight)',
+          marginBottom: '1rem',
+          fontSize: '1.25rem',
+          margin: '0 0 1rem 0'
+        }}
+      >
+        {title}
+      </h3>
+      
+      <div
+        style={{
+          color: 'var(--ifm-color-content-secondary)',
+          lineHeight: 'var(--ifm-line-height-base)',
+          fontSize: '0.9rem'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default PlaygroundCard;

package/dist/generators/add-documentation/templates/src/components/ui-shared/use-color-mode.ts

@@ -0,0 +1,20 @@
+import { useMemo, useRef } from 'react';
+import { useColorMode as useDocuColorMode } from '@docusaurus/theme-common';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+export const useColorMode = () => {
+  const { colorMode } = useDocuColorMode();
+  const isBrowser = useIsBrowser();
+  const renderCount = useRef(0);
+
+  return useMemo(() => {
+    if (!isBrowser) {
+      return;
+    }
+    renderCount.current += 1;
+    if (renderCount.current === 1) {
+      return document.documentElement.getAttribute('data-theme');
+    }
+    return colorMode;
+  }, [colorMode, isBrowser]);
+};

package/dist/generators/add-documentation/templates/src/components/ui-shared/utils.ts

@@ -0,0 +1,8 @@
+export function invertHex(hex: string) {
+  const invertedHex = (Number(`0x1${hex.replace('#', '')}`) ^ 0xffffff)
+    .toString(16)
+    .substring(1)
+    .toUpperCase();
+
+  return `#${invertedHex}`;
+}