@unisphere/nx 3.14.0 → 3.16.0

package/dist/generators/add-documentation/templates/src/components/homepage-modules/index.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const ExternalLink = require('@site/static/homepage/icons/ExternalLink.svg').default;
+
+type ModuleItem = {
+  title: string;
+  previewImage: string;
+  documentationUrl: string;
+  showcaseUrl: string;
+};
+
+const ModulesList: ModuleItem[] = [
+  {
+    title: 'Reactions Module',
+    previewImage: 'https://placehold.co/504x260?text=Reactions+Module',
+    documentationUrl: '/docs/overview/experiences/reactions',
+    showcaseUrl: '/docs/overview/experiences/reactions#showcase',
+  },
+];
+
+function Module({
+  title,
+  previewImage,
+  documentationUrl,
+  showcaseUrl,
+}: ModuleItem) {
+  return (
+    <div className={clsx(styles.module)}>
+      <a
+        href={showcaseUrl}
+        className={clsx(styles.moduleShowcasePreviewContainer)}
+      >
+        <img
+          src={previewImage}
+          className={clsx(styles.modulePreviewImage)}
+          alt={`${title} module preview image`}
+        />
+
+        <div className={clsx(styles.moduleShowcasePreviewOverlay)}>
+          <ExternalLink className={clsx(styles.moduleShowcasePreviewIcon)} />
+        </div>
+      </a>
+      <div>
+        <Heading as="h3" className={clsx(styles.moduleTitle)}>
+          {title}
+        </Heading>
+        <div className={clsx(styles.moduleNavigation)}>
+          <a href={documentationUrl} className={clsx(styles.moduleLink)}>
+            Documentation
+          </a>
+          <span>•</span>
+          <a href={showcaseUrl} className={clsx(styles.moduleLink)}>
+            Showcase
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageModules(): JSX.Element {
+  return (
+    <section className={styles.modules}>
+      <Heading as="h2" className={clsx('text--center', styles.heading)}>
+        Modules catalog
+      </Heading>
+      <div className={clsx('container', styles.modulesContainer)}>
+        {ModulesList.map((props, idx) => (
+          <Module key={idx} {...props} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/dist/generators/add-documentation/templates/src/components/homepage-modules/styles.module.css

@@ -0,0 +1,120 @@
+.modules {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 2rem 0;
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
+  margin-bottom: 3rem;
+}
+
+.modulesContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .modulesContainer {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.modulesContainer > :nth-child(2n) {
+  grid-column: span 1;
+}
+
+.modulesContainer > :nth-child(2n+1):only-child {
+  justify-self: center;
+  grid-column: span 2;
+}
+
+.heading {
+  font-size: 3.5rem;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 4.375rem;
+}
+
+@media screen and (max-width: 489px) {
+  .heading {
+    font-size: 2.5rem;
+  }
+}
+
+@media screen and (max-width: 369px) {
+  .heading {
+    font-size: 1.5rem;
+  }
+}
+
+.module {
+  max-width: 31.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  justify-self: center;
+}
+
+.moduleShowcasePreviewContainer {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+}
+
+.moduleShowcasePreviewContainer:hover .moduleShowcasePreviewIcon,
+.moduleShowcasePreviewContainer:hover .moduleShowcasePreviewOverlay {
+  opacity: 1;
+}
+
+.moduleShowcasePreviewOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+}
+
+.moduleShowcasePreviewIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: #FFFFFF;
+  width: 4rem;
+  height: 4rem;
+}
+
+.modulePreviewImage {
+  border-radius: 0.5rem;
+  border: thin solid var(--uc-border-color);
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.moduleTitle {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.35rem;
+  margin: 0;
+}
+
+.moduleNavigation {
+  display: flex;
+  gap: 0.5rem;
+}

package/dist/generators/add-documentation/templates/src/components/homepage-start-now/index.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const Divider = require('@site/static/homepage/divider.svg').default;
+
+export default function HomepageStartNow(): JSX.Element {
+  return (
+    <section className={styles.startNow}>
+      <Heading as="h2" className={clsx('text--center', styles.heading)}>
+        Ready to integrate Unisphere into your application
+      </Heading>
+      <a
+        className={clsx('uc-button', styles.startNowBtn)}
+        href="/docs/documentation/overview"
+      >
+        Start now
+      </a>
+      <Divider className={clsx(styles.divider)} alt="Divider image"/>
+    </section>
+  );
+}

package/dist/generators/add-documentation/templates/src/components/homepage-start-now/styles.module.css

@@ -0,0 +1,38 @@
+.startNow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3rem;
+}
+
+.heading {
+  font-size: 3.5rem;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 4.375rem;
+  max-width: 53.875rem;
+}
+
+@media screen and (max-width: 489px) {
+  .heading {
+    font-size: 2.5rem;
+  }
+}
+
+@media screen and (max-width: 369px) {
+  .heading {
+    font-size: 1.5rem;
+  }
+}
+
+.startNowBtn {
+  padding: 1.5rem;
+  font-size: 3.5rem;
+  line-height: 3rem;
+}
+
+.divider {
+  height: 6.25rem;
+  width: 100%;
+  margin: 3rem auto;
+}

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

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

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