@unisphere/nx 4.15.8 → 5.0.0

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

@@ -1,117 +0,0 @@
-
-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

@@ -1,117 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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