@unisphere/nx 4.15.7 → 5.0.0

package/dist/generators/add-documentation/templates/src/components/interactive-code-panel.tsx

@@ -1,258 +0,0 @@
-import React, { useState, MouseEvent } from 'react';
-import CodeBlock from '@theme/CodeBlock';
-
-// Simple markdown parser for basic markdown support in descriptions
-const parseMarkdown = (text: string): string => {
-  return text
-    // Convert [text](url) to <a href="url">text</a>
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
-    // Convert **text** to <strong>text</strong>
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    // Convert *text* to <em>text</em>
-    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-    // Convert `code` to <code>code</code>
-    .replace(/`([^`]+)`/g, '<code>$1</code>')
-    // Convert line breaks to <br>
-    .replace(/\n/g, '<br>');
-};
-
-// Type definitions
-export interface Tab {
-  id: string;
-  title: string;
-  icon: string;
-  language?: string;
-  content: string;
-  description?: string;
-  custom?: React.ReactNode;
-}
-
-export interface InteractiveCodePanelProps {
-  title: string;
-  description: string;
-  tabs: Tab[];
-  defaultTab?: string;
-  defaultExpanded?: boolean;
-  showCopyButton?: boolean;
-}
-
-// Reusable Interactive Code Demo Component
-const InteractiveCodePanel: React.FC<InteractiveCodePanelProps> = ({
-  title,
-  description,
-  tabs,
-  defaultTab,
-  defaultExpanded = false,
-  showCopyButton = true
-}) => {
-  const [activeTab, setActiveTab] = useState<string>(defaultTab || tabs[0]?.id || '');
-  const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);
-  const [copyStatus, setCopyStatus] = useState<string>('');
-
-  const getCurrentTab = (): Tab => tabs.find(tab => tab.id === activeTab) || tabs[0];
-  const currentTab = getCurrentTab();
-
-  const copyToClipboard = async (text: string): Promise<void> => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopyStatus('✅ Copied!');
-      setTimeout(() => setCopyStatus(''), 2000);
-    } catch (err) {
-      setCopyStatus('❌ Failed to copy');
-      setTimeout(() => setCopyStatus(''), 2000);
-    }
-  };
-
-  const handleMouseEnter = (e: MouseEvent<HTMLButtonElement>, tabId: string): void => {
-    if (activeTab !== tabId) {
-      (e.target as HTMLButtonElement).style.background = 'var(--ifm-color-emphasis-100)';
-    }
-  };
-
-  const handleMouseLeave = (e: MouseEvent<HTMLButtonElement>, tabId: string): void => {
-    if (activeTab !== tabId) {
-      (e.target as HTMLButtonElement).style.background = 'transparent';
-    }
-  };
-
-  const handleCopyButtonMouseEnter = (e: MouseEvent<HTMLButtonElement>): void => {
-    (e.target as HTMLButtonElement).style.background = 'var(--ifm-color-primary-dark)';
-  };
-
-  const handleCopyButtonMouseLeave = (e: MouseEvent<HTMLButtonElement>): void => {
-    (e.target as HTMLButtonElement).style.background = 'var(--ifm-color-primary)';
-  };
-
-  return (
-    <div
-      style={{
-        background: 'var(--ifm-background-surface-color)',
-        border: '1px solid var(--ifm-color-emphasis-300)',
-        borderRadius: '12px',
-        margin: '24px 0',
-        overflow: 'hidden',
-        boxShadow: 'var(--ifm-global-shadow-lw)',
-      }}
-    >
-      {/* Header */}
-      <div
-        style={{
-          padding: '20px 24px',
-          background: 'var(--ifm-color-primary-contrast-background)',
-          borderBottom: '1px solid var(--ifm-color-emphasis-300)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <div>
-          <h3 style={{ margin: '0 0 4px 0', fontSize: '18px', fontWeight: '600', color: 'var(--ifm-heading-color)' }}>
-            {title}
-          </h3>
-          <p style={{ margin: 0, fontSize: '14px', color: 'var(--ifm-color-content-secondary)' }}>
-            {description}
-          </p>
-        </div>
-        <button
-          onClick={() => setIsExpanded(!isExpanded)}
-          style={{
-            padding: '8px 16px',
-            background: 'var(--ifm-color-primary)',
-            color: 'white',
-            border: 'none',
-            borderRadius: '6px',
-            fontSize: '14px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-          }}
-        >
-          {isExpanded ? 'Hide Guide' : 'Show Guide'}
-        </button>
-      </div>
-
-      {/* Content */}
-      {isExpanded && (
-        <div style={{ padding: '0' }}>
-          {/* Tab Navigation */}
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              borderBottom: '1px solid var(--ifm-color-emphasis-300)',
-              background: 'var(--ifm-background-color)',
-            }}
-            className="tab-navigation"
-          >
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                style={{
-                  flex: 1,
-                  padding: '16px 20px',
-                  background: activeTab === tab.id ? 'var(--ifm-background-surface-color)' : 'transparent',
-                  border: 'none',
-                  borderBottom: activeTab === tab.id ? '2px solid var(--ifm-color-primary)' : '2px solid transparent',
-                  color: activeTab === tab.id ? 'var(--ifm-color-primary)' : 'var(--ifm-color-content-secondary)',
-                  fontSize: '14px',
-                  fontWeight: activeTab === tab.id ? '600' : '500',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  gap: '8px',
-                  transition: 'all 0.2s ease',
-                }}
-                onMouseEnter={(e) => handleMouseEnter(e, tab.id)}
-                onMouseLeave={(e) => handleMouseLeave(e, tab.id)}
-              >
-                <span>{tab.icon}</span>
-                {tab.title}
-              </button>
-            ))}
-          </div>
-
-          {/* Code Content */}
-          <div style={{ padding: '24px' }}>
-
-            {/* Tab Description */}
-            {currentTab.description && (
-              <div
-                style={{
-                  marginBottom: '16px',
-                  padding: '16px',
-                  background: 'var(--ifm-color-info-contrast-background)',
-                  borderRadius: '8px',
-                  border: '1px solid var(--ifm-color-info-dark)',
-                }}
-              >
-                <div>
-                  <h4 style={{ margin: '0 0 8px 0', fontSize: '16px', color: 'var(--ifm-heading-color)' }}>
-                    {currentTab.icon} {currentTab.title}
-                  </h4>
-                  <div
-                    style={{
-                      margin: 0,
-                      fontSize: '14px',
-                      color: 'var(--ifm-color-content)',
-                      lineHeight: '1.5'
-                    }}
-                    dangerouslySetInnerHTML={{ __html: parseMarkdown(currentTab.description) }}
-                  />
-                </div>
-              </div>
-            )}
-
-            <div style={{ position: 'relative' }}>
-              {/* Copy Button - only show for code content */}
-              {showCopyButton && currentTab.content && !currentTab.custom && (
-                <button
-                  onClick={() => copyToClipboard(currentTab.content)}
-                  style={{
-                    position: 'absolute',
-                    top: '12px',
-                    right: '12px',
-                    zIndex: 10,
-                    padding: '6px 12px',
-                    background: 'var(--ifm-color-primary)',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    fontSize: '12px',
-                    fontWeight: '500',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    transition: 'all 0.2s ease',
-                  }}
-                  onMouseEnter={handleCopyButtonMouseEnter}
-                  onMouseLeave={handleCopyButtonMouseLeave}
-                >
-                  📋 {copyStatus || 'Copy'}
-                </button>
-              )}
-
-              {/* Custom Content or Code Block */}
-              {currentTab.custom ? (
-                <div>{currentTab.custom}</div>
-              ) : (
-                currentTab.content && <CodeBlock language={currentTab.language || 'text'}>
-                  {currentTab.content}
-                </CodeBlock>
-              )}
-            </div>
-
-
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-// Export both the reusable component and the specific demo
-export { InteractiveCodePanel };

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';
-
-export const DeveloperToolboxExperience: React.FC = () => {
-  const toolboxIcon = (
-    <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
-      }}
-    >
-      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-    </svg>
-  );
-
-  return (
-    <PlaygroundCard
-      title="Playground — Developer Toolbox"
-      icon={toolboxIcon}
-    >
-      <div style={{ marginBottom: '1rem', color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem' }}>
-        Experience Unisphere's powerful developer tools in real time
-      </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',
-        }}
-      >
-        <span style={{ fontSize: '14px', fontWeight: '500', color: 'var(--ifm-color-content)' }}>Press</span>
-        <kbd
-          style={{
-            padding: '4px 8px',
-            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)',
-            fontSize: '12px',
-            fontFamily: 'monospace',
-            color: 'var(--ifm-color-content-secondary)',
-            fontWeight: '500'
-          }}
-        >
-          CMD + K
-        </kbd>
-        <span style={{ fontSize: '14px', color: 'var(--ifm-color-content-secondary)' }}>or</span>
-        <kbd
-          style={{
-            padding: '4px 8px',
-            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)',
-            fontSize: '12px',
-            fontFamily: 'monospace',
-            color: 'var(--ifm-color-content-secondary)',
-            fontWeight: '500'
-          }}
-        >
-          Ctrl + K
-        </kbd>
-        <span style={{ fontSize: '14px', fontWeight: '500', color: 'var(--ifm-color-content)' }}>to open the Developer Toolbox</span>
-      </div>
-    </PlaygroundCard>
-  );
-};
-
-export default DeveloperToolboxExperience;

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

@@ -1,133 +0,0 @@
-import React from 'react';
-import { getUnisphereInstance } from '@unisphere/runtime-js'
-import { useEffect, useRef } from 'react'
-import { useState } from 'react';
-import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';
-
-export const HelloWorldExperience = ({ preload }: { preload?: boolean }) => {
-
-    const [loaded, setLoaded] = useState(false);
-    const unmountRef = useRef<(() => void) | null>(null);
-
-    const loadHelloWorldExperience = async () => {
-        try {
-            setLoaded(true);
-            const workspace = await getUnisphereInstance('')
-            const { runtime, runtimeInfo } = await workspace.loadRuntime('unisphere.widget.hello', 'hello-world', {});
-
-            if (runtime) {
-                const { unsubscribe } = runtime.mountVisual({
-                    type: 'docs',
-                    target: {
-                        type: 'element',
-                        elementId: 'hello-world-experience-container',
-                    },
-                    settings: {}
-                });
-
-                // Store unmount function for cleanup
-                unmountRef.current = unsubscribe;
-
-                console.log('✅ Hello World loaded:', runtimeInfo);
-            }
-        } catch (e) {
-            console.error('Failed to load Hello World experience:', e)
-        }
-    }
-
-    useEffect(() => {
-        if (preload) {
-            loadHelloWorldExperience();
-        }
-
-        // Cleanup on unmount
-        return () => {
-            if (unmountRef.current) {
-                unmountRef.current();
-                unmountRef.current = null;
-            }
-        };
-    }, [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 - Hello World 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 hello-world experience is {preload ? 'preloaded' : 'dynamically loaded at runtime'} to verify your Unisphere integration.
-                        <br />
-                        <strong style={{ color: 'var(--ifm-color-content)' }}>The widget should appear below!</strong>
-                    </div>
-                ) : (
-                    <div style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem' }}>
-                        Click the button below to load the hello-world experience and verify your workspace integration
-                    </div>
-                )}
-            </div>
-
-            <div
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: '12px',
-                    padding: '12px 24px',
-
-                    minHeight: '48px',
-                }}
-            >
-                <div id="hello-world-experience-container"></div>
-                {!loaded && (
-                    <button
-                        onClick={loadHelloWorldExperience}
-                        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 Hello World Experience
-                    </button>
-                )}
-            </div>
-        </PlaygroundCard>
-    );
-}