@unisphere/nx 4.15.7 → 5.0.0

package/dist/generators/add-documentation/templates/plugins/discover-typedoc-plugins.mjs

@@ -1,156 +0,0 @@
-#!/usr/bin/env node
-/**
- * Auto-discovers publishable packages from .unisphere config and regenerates
- * plugins/typedoc-plugins.ts with updated docusaurus-plugin-typedoc entries.
- *
- * Run: npm run discover-plugins
- *
- * - Reads  <workspace-root>/.unisphere        for packages list
- * - Reads  <workspace-root>/tsconfig.base.json for npm package names
- * - Writes plugins/typedoc-plugins.ts
- *
- * Packages under the "local" scope are excluded (internal-only packages).
- */
-
-import { readFileSync, writeFileSync, existsSync } from 'fs';
-import { join, relative, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const DOCUMENTED_SCOPES = [
-  'kaltura-corp',
-  'kaltura-apps',
-  'kaltura-ui',
-  'kaltura-sdk',
-  'unisphere',
-];
-
-// This script lives at <docs-site>/plugins/discover-typedoc-plugins.mjs
-const pluginsDir = dirname(fileURLToPath(import.meta.url));
-const docsSiteRoot = join(pluginsDir, '..');
-
-// Walk up from docs site to find workspace root (where .unisphere lives)
-function findWorkspaceRoot(startDir) {
-  let dir = startDir;
-  while (true) {
-    if (existsSync(join(dir, '.unisphere'))) return dir;
-    const parent = dirname(dir);
-    if (parent === dir) {
-      throw new Error(
-        'Could not find .unisphere — are you inside a Unisphere workspace?'
-      );
-    }
-    dir = parent;
-  }
-}
-
-const workspaceRoot = findWorkspaceRoot(docsSiteRoot);
-
-// Parse workspace configs
-const unisphere = JSON.parse(
-  readFileSync(join(workspaceRoot, '.unisphere'), 'utf-8')
-);
-const tsconfig = JSON.parse(
-  readFileSync(join(workspaceRoot, 'tsconfig.base.json'), 'utf-8')
-);
-const tsconfigPaths = tsconfig?.compilerOptions?.paths ?? {};
-const packages = unisphere?.elements?.packages ?? {};
-
-// Build reverse lookup: "sourceRoot/src/index.ts" → npm package name
-const pathToPackageName = {};
-for (const [pkgName, paths] of Object.entries(tsconfigPaths)) {
-  if (Array.isArray(paths)) {
-    for (const p of paths) {
-      pathToPackageName[p] = pkgName;
-    }
-  }
-}
-
-function findPackageName(sourceRoot) {
-  return pathToPackageName[`${sourceRoot}/src/index.ts`] ?? null;
-}
-
-function shortName(pkgName) {
-  return pkgName.split('/').pop();
-}
-
-// Discover plugins
-const discovered = [];
-for (const [, pkgConfig] of Object.entries(packages)) {
-  const sourceRoot = pkgConfig?.sourceRoot;
-  if (!sourceRoot) continue;
-
-  // Expected sourceRoot format: unisphere/packages/<scope>/<name>
-  const parts = sourceRoot.split('/');
-  if (parts.length < 4) continue;
-  const scope = parts[2];
-
-  if (!DOCUMENTED_SCOPES.includes(scope)) continue;
-
-  const pkgName = findPackageName(sourceRoot);
-  if (!pkgName) {
-    console.warn(`⚠️  No tsconfig path found for ${sourceRoot} — skipping`);
-    continue;
-  }
-
-  const short = shortName(pkgName);
-  // Relative path from docs site root to the package folder
-  const relBase = relative(
-    docsSiteRoot,
-    join(workspaceRoot, sourceRoot)
-  ).replace(/\\/g, '/');
-
-  discovered.push({
-    id: `api-${short}`,
-    packageName: pkgName,
-    entryPoints: `${relBase}/src/index.ts`,
-    tsconfig: `${relBase}/tsconfig.json`,
-    out: `docs/api/${short}/v1`,
-  });
-}
-
-// Serialise to TypeScript
-function pluginsToTs(plugins) {
-  if (plugins.length === 0) return '[]';
-
-  const entries = plugins
-    .map(
-      (p) =>
-        `  // ${p.packageName}\n` +
-        `  [\n` +
-        `    'docusaurus-plugin-typedoc',\n` +
-        `    {\n` +
-        `      id: '${p.id}',\n` +
-        `      entryPoints: ['${p.entryPoints}'],\n` +
-        `      tsconfig: '${p.tsconfig}',\n` +
-        `      out: '${p.out}',\n` +
-        `      readme: 'none',\n` +
-        `      excludePrivate: true,\n` +
-        `      excludeProtected: true,\n` +
-        `      excludeInternal: true,\n` +
-        `      disableSources: true,\n` +
-        `    },\n` +
-        `  ]`
-    )
-    .join(',\n');
-
-  return `[\n${entries},\n]`;
-}
-
-const content =
-  `// Auto-generated by plugins/discover-typedoc-plugins.mjs\n` +
-  `// Run "npm run discover-plugins" to regenerate\n` +
-  `\n` +
-  `// eslint-disable-next-line @typescript-eslint/no-explicit-any\n` +
-  `const typedocPlugins: any[] = ${pluginsToTs(discovered)};\n` +
-  `\n` +
-  `export default typedocPlugins;\n`;
-
-const outPath = join(pluginsDir, 'typedoc-plugins.ts');
-writeFileSync(outPath, content, 'utf-8');
-
-console.log(
-  `✅ Discovered ${discovered.length} package(s) → plugins/typedoc-plugins.ts`
-);
-for (const p of discovered) {
-  console.log(`   • ${p.packageName} → ${p.out}`);
-}

package/dist/generators/add-documentation/templates/plugins/typedoc-plugins.ts.template

@@ -1,7 +0,0 @@
-// Auto-generated by plugins/discover-typedoc-plugins.mjs
-// Run "npm run discover-plugins" to regenerate
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const typedocPlugins: any[] = <%- typedocPluginsConfig %>;
-
-export default typedocPlugins;

package/dist/generators/add-documentation/templates/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/dist/generators/add-documentation/templates/sidebars.ts

@@ -1,9 +0,0 @@
-import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
-
-const sidebars: SidebarsConfig = {
-  documentations: [{ type: 'autogenerated', dirName: '.' }],
-  reference: [{ type: 'autogenerated', dirName: '.' }],
-  changelog: [{ type: 'autogenerated', dirName: '.' }],
-};
-
-export default sidebars;

package/dist/generators/add-documentation/templates/src/components/demo-placeholder-card.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';
-
-const DemoPlaceholderCard: React.FC = () => {
-  const playIcon = (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      style={{
-        color: '#94a3b8',
-        opacity: 0.7
-      }}
-    >
-      <circle cx="12" cy="12" r="10" />
-      <polygon points="10,8 16,12 10,16 10,8" />
-    </svg>
-  );
-
-  return (
-    <PlaygroundCard
-      title="Live Demonstration"
-      icon={playIcon}
-    >
-      A live demonstration will be added here soon
-    </PlaygroundCard>
-  );
-};
-
-export default DemoPlaceholderCard;

package/dist/generators/add-documentation/templates/src/components/guides/experiences/genie/integrate-genie-guide.tsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import { Tab, InteractiveCodePanel } from '../../../interactive-code-panel';
-
-export const IntegrateGenieGuide: React.FC = () => {
-    const tabs: Tab[] = [
-        {
-            id: 'verify-setup',
-            title: '1. Verify Setup',
-            icon: '✅',
-            language: 'bash',
-            content: ``,
-            description: `Ensure your Unisphere workspace is properly set up before integrating Genie.`
-        },
-        {
-            id: 'install-genie',
-            title: '2. Install Genie Types',
-            icon: '📦',
-            language: 'bash',
-            content: `npm i @unisphere/genie-core`,
-            description: `Install the Genie core package to access Genie functionality.`
-        },
-        {
-            id: 'configure-genie',
-            title: '3. Load Genie',
-            icon: '⚙️',
-            language: 'typescript',
-            content: `import { GenieSettings } from '@unisphere/genie-core';
-
-// Extract settings to a const using the Genie type
-const genieSettings: GenieSettings = {
-  getSourceUrl: ({ entryId, startTime }) => {
-    return ""; // return your entry URL
-  },
-  kalturaServerURI: "https://www.kaltura.com",
-  ks: "",
-  partnerId: "",
-  uiconfId: "",
-};
-
-// Genie experience configuration
-const genieExperience = {
-  widgetName: "unisphere.widget.genie",
-  runtimeName: "chat",
-  settings: genieSettings,
-  visuals: [
-    {
-      type: "page",
-      target: "class-genie-container",
-      settings: {},
-    },
-  ],
-};`,
-            description: `The settings are extracted to a const using the GenieSettings type for better type safety. Copy it to your workspace configuration.`
-        },
-        {
-            id: 'render-genie',
-            title: '4. Render Genie',
-            icon: '🚀',
-            language: 'html',
-            content: `
-<style>
-    :root {
-      --host-header-height: 4rem;
-    }
-
-    body {
-    margin: 0;
-    }
-
-    .host-root-container {
-    width: 100vw;
-    height: calc(100vh - var(--host-header-height));
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding-top: var(--host-header-height);
-    }
-
-    .host-root-header {
-    z-index: 10;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: var(--host-header-height);
-    width: 100%;
-    background: navy;
-    color: white;
-    display: flex;
-    align-items: center;
-    padding: 0 2rem;
-    }
-
-    .host-root-content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    }
-
-    #class-genie-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    min-height: calc(100vh - var(--host-header-height));
-    }
-</style>
-
-
-<body>
-    <div class="host-root-container">
-        <header class="host-root-header">Genie Expo</header>
-        <main class="host-root-content">
-            <div id="class-genie-container"></div>
-        </main>
-    </div>
-</body>
-`,
-            description: `Copy the HTML code to your application. Make sure you style as shown above`
-        },
-    ];
-
-    return (
-        <>
-            <style>{`
-        @media (max-width: 768px) {
-          .tab-navigation {
-            flex-direction: column !important;
-          }
-          .tab-navigation button {
-            flex: none !important;
-            border-bottom: 1px solid var(--ifm-color-emphasis-300) !important;
-            border-right: none !important;
-          }
-          .tab-navigation button:last-child {
-            border-bottom: none !important;
-          }
-        }
-      `}</style>
-            <InteractiveCodePanel
-                title="🧞 Integrate Genie Experience"
-                description="Complete guide for integrating Genie AI assistant into your Unisphere application"
-                tabs={tabs}
-                defaultTab="verify-setup"
-                defaultExpanded={false}
-                showCopyButton={true}
-            />
-        </>
-    );
-};

package/dist/generators/add-documentation/templates/src/components/guides/experiences/notifications/notifications-react-guide.tsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import { Tab, InteractiveCodePanel } from '../../../interactive-code-panel';
-
-export const NotificationsReactGuide: React.FC = () => {
-  const tabs: Tab[] = [
-    {
-      id: 'verify-setup',
-      title: '1. Verify Setup',
-      icon: '✅',
-      language: 'bash',
-      content: ``,
-      description: `Ensure your Unisphere workspace is properly set up before integrating notifications.`
-    },
-    {
-      id: 'install-runtime',
-      title: '2. Install Runtime',
-      icon: '📦',
-      language: 'bash',
-      content: `npm install @unisphere/runtime-react`,
-      description: `Install the React-optimized Unisphere runtime package for host applications.`
-    },
-    {
-      id: 'configure-provider',
-      title: '3. Configure Provider',
-      icon: '⚙️',
-      language: 'tsx',
-      content: `import React from 'react';
-import { UnisphereProvider } from '@unisphere/runtime-react';
-
-function HostAppComponent() {
-  const unisphereConfiguration = React.useMemo(() => ({
-    serverUrl: process.env.REACT_APP_UNISPHERE_SERVER_URL,
-    runtimes: [{
-      widgetName: 'unisphere.widget.notifications',
-      runtimeName: 'notifications',
-      settings: {},
-      runtimeArea: { target: 'body' }
-    }]
-  }), []);
-
-  return (
-    <UnisphereProvider initialConfiguration={unisphereConfiguration}>
-      <MyApplication />
-    </UnisphereProvider>
-  );
-}
-
-export default HostAppComponent;`,
-      description: `Configure the UnisphereProvider with notifications runtime. Replace serverUrl with your actual Unisphere server URL.`
-    },
-    {
-      id: 'install-notifications',
-      title: '4. Install Notifications',
-      icon: '🔔',
-      language: 'bash',
-      content: `npm install @unisphere/notifications-runtime-react @unisphere/notifications-core`,
-      description: `Install the React notifications runtime and core packages.`
-    },
-    {
-      id: 'setup-notifications-provider',
-      title: '5. Setup Provider',
-      icon: '🔧',
-      language: 'tsx',
-      content: `import React from 'react';
-import { UnisphereProvider } from '@unisphere/runtime-react';
-import { UnisphereNotificationsProvider } from '@unisphere/notifications-runtime-react';
-
-function App() {
-  const unisphereConfiguration = React.useMemo(() => ({
-    serverUrl: process.env.REACT_APP_UNISPHERE_SERVER_URL,
-    runtimes: [{
-      widgetName: 'unisphere.widget.notifications',
-      runtimeName: 'notifications',
-      settings: {},
-      runtimeArea: { target: 'body' }
-    }]
-  }), []);
-
-  return (
-    <UnisphereProvider initialConfiguration={unisphereConfiguration}>
-      <UnisphereNotificationsProvider>
-        <MyApplication />
-      </UnisphereNotificationsProvider>
-    </UnisphereProvider>
-  );
-}
-
-export default App;`,
-      description: `Wrap your app with both UnisphereProvider and UnisphereNotificationsProvider for complete setup.`
-    },
-    {
-      id: 'show-notifications',
-      title: '6. Show Notifications',
-      icon: '✨',
-      language: 'tsx',
-      content: `import React, { useContext } from 'react';
-import { UnisphereNotificationsContext, NotificationTypes } from '@unisphere/notifications-runtime-react';
-
-function MyComponent() {
-  const { addNotification } = useContext(UnisphereNotificationsContext);
-
-  const showNotification = () => {
-    addNotification({
-      type: NotificationTypes.Toast,
-      content: { message: "Hello everyone!" },
-      author: {
-        name: "Brian Dennis",
-        position: "Director of Brand, Kaltura",
-        url: "https://avatar.com",
-      },
-      buttons: [{ 
-        id: 'btn-1', 
-        type: 'link', 
-        label: 'Read Post', 
-        url: 'www.example.com' 
-      }]
-    });
-  };
-
-  return (
-    <button onClick={showNotification}>
-      Show Notification
-    </button>
-  );
-}`,
-      description: `Use the notifications context to display toast notifications with author information and action buttons.`
-    },
-    {
-      id: 'custom-hook',
-      title: '7. Custom Hook',
-      icon: '🎣',
-      language: 'tsx',
-      content: `import { useContext, useCallback } from 'react';
-import { UnisphereNotificationsContext, NotificationTypes } from '@unisphere/notifications-runtime-react';
-
-// Custom hook for common notification patterns
-export const useNotifications = () => {
-  const { addNotification } = useContext(UnisphereNotificationsContext);
-
-  const showSuccess = useCallback((message: string, options?: any) => {
-    addNotification({
-      type: NotificationTypes.Toast,
-      content: { message, title: "Success" },
-      author: { name: "System", position: "Success Handler" },
-      duration: 3000,
-      priority: 'normal',
-      ...options
-    });
-  }, [addNotification]);
-
-  const showError = useCallback((message: string, options?: any) => {
-    addNotification({
-      type: NotificationTypes.Toast,
-      content: { message, title: "Error" },
-      author: { name: "System", position: "Error Handler" },
-      persistent: true,
-      priority: 'urgent',
-      ...options
-    });
-  }, [addNotification]);
-
-  return { showSuccess, showError, addNotification };
-};
-
-// Usage in component
-function MyComponent() {
-  const { showSuccess, showError } = useNotifications();
-
-  const handleSave = async () => {
-    try {
-      await saveData();
-      showSuccess("Data saved successfully!");
-    } catch (error) {
-      showError("Failed to save data. Please try again.");
-    }
-  };
-
-  return <button onClick={handleSave}>Save Data</button>;
-}`,
-      description: `Create reusable custom hooks for common notification patterns with success, error, and info helpers.`
-    }
-  ];
-
-  return (
-    <>
-      <style>{`
-        @media (max-width: 768px) {
-          .tab-navigation {
-            flex-direction: column !important;
-          }
-          .tab-navigation button {
-            flex: none !important;
-            border-bottom: 1px solid var(--ifm-color-emphasis-300) !important;
-            border-right: none !important;
-          }
-          .tab-navigation button:last-child {
-            border-bottom: none !important;
-          }
-        }
-      `}</style>
-      <InteractiveCodePanel
-        title="Integrate Notifications Experience - React"
-        description="Complete guide for integrating Unisphere notifications into your React application"
-        tabs={tabs}
-        defaultTab="verify-setup"
-        defaultExpanded={false}
-        showCopyButton={true}
-      />
-    </>
-  );
-};