npm - @unisphere/nx - Versions diffs - 3.13.0 → 3.16.0 - Mend

@unisphere/nx 3.13.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

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

@@ -0,0 +1,149 @@
+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 ADDED Viewed

@@ -0,0 +1,211 @@
+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}
+      />
+    </>
+  );
+};

package/dist/generators/add-documentation/templates/src/components/homepage-features/index.tsx ADDED Viewed

@@ -0,0 +1,239 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+type FeatureItem = {
+  title: string;
+  target: string;
+  description: JSX.Element;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+};
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Robust Documentation',
+    target: 'Everyone',
+    Svg: require('@site/static/homepage/icons/Infra.svg').default,
+    description: (
+      <>
+        Access detailed guides, tutorials, and examples to get started quickly,
+        whether you're new to web development or an experienced developer.
+      </>
+    ),
+  },
+  {
+    title: 'Compliance and Standards',
+    target: 'Product managers',
+    Svg: require('@site/static/homepage/icons/Standards.svg').default,
+    description: (
+      <>
+        Ensure all modules adhere to essential standards and regulations,
+        including accessibility, terms of conditions, theming, language support,
+        and recovery handling, providing a robust and compliant platform
+        experience.
+      </>
+    ),
+  },
+  {
+    title: 'Reusable Experiences',
+    target: 'Product managers & developers',
+    Svg: require('@site/static/homepage/icons/Infra.svg').default,
+    description: (
+      <>
+        Benefit from highly reusable components and modules designed to ensure
+        consistency and reduce development time.
+      </>
+    ),
+  },
+  {
+    title: 'Kaltura Player Integration',
+    target: 'Product managers',
+    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
+    description: (
+      <>
+        Leverage deep integration with the Kaltura player, allowing seamless
+        synchronization between the player’s current time and Unisphere modules.
+        This enables displaying visual elements on the player area, player seek
+        bar, and content modules based on the current playback time.
+      </>
+    ),
+  },
+  {
+    title: 'Dynamic Workspaces',
+    target: 'Product managers & professional services',
+    Svg: require('@site/static/homepage/icons/Redundancies.svg').default,
+    description: (
+      <>
+        Effortlessly create and configure an Unisphere workspace at runtime in
+        the application, allowing you to adapt to changes and updates without
+        significant code modifications.
+      </>
+    ),
+  },
+  {
+    title: 'Enhanced Developer Experience',
+    target: 'Developers',
+    Svg: require('@site/static/homepage/icons/Unified.svg').default,
+    description: (
+      <>
+        Take advantage of a robust suite of tools tailored to streamline your
+        development workflow. This includes generators, boilerplates, CLI,
+        playground applications, Storybook integration, and runtime features
+        like theming and translation infrastructure.
+      </>
+    ),
+  },
+  {
+    title: 'Advanced Customization',
+    target: 'Developers',
+    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
+    description: (
+      <>
+        For more advanced needs, directly consume components and modules from
+        NPM or Yarn. Customize these elements to perfectly suit your specific
+        requirements.
+      </>
+    ),
+  },
+  {
+    title: 'Version Control',
+    target: 'Developers',
+    Svg: require('@site/static/homepage/icons/Architecture.svg').default,
+    description: (
+      <>
+        Grow confidently with versioned components and modules that effectively
+        manage dependencies and ensure backward compatibility.
+      </>
+    ),
+  },
+  {
+    title: 'Dynamic Workspaces',
+    target: 'Professional services',
+    Svg: require('@site/static/homepage/icons/Infra.svg').default,
+    description: (
+      <>
+        Effortlessly create and configure an Unisphere workspace at runtime in
+        the application, allowing you to adapt to changes and updates without
+        significant code modifications.
+      </>
+    ),
+  },
+  {
+    title: 'Streamlined Delivery',
+    target: 'Professional services',
+    Svg: require('@site/static/homepage/icons/Speed.svg').default,
+    description: (
+      <>
+        Leverage our platform to accelerate project delivery, minimize risks,
+        and ensure successful implementations.
+      </>
+    ),
+  },
+  {
+    title: 'Enhanced Client Value',
+    target: 'Professional services',
+    Svg: require('@site/static/homepage/icons/Cost.svg').default,
+    description: (
+      <>
+        Deliver exceptional value to your clients by creating tailored,
+        innovative solutions that exceed their expectations.
+      </>
+    ),
+  },
+];
+function Feature({ title, target, Svg, description }: FeatureItem) {
+  return (
+    <div className="group relative bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-sm hover:shadow-xl border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:-translate-y-1">
+      {/* Gradient background on hover */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-purple-100/50 dark:from-blue-900/20 dark:to-purple-800/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+      <div className="relative z-10">
+        {/* Icon with modern styling */}
+        <div className="w-16 h-16 mb-6 bg-gradient-to-br from-blue-500 to-purple-400 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-300">
+          <Svg className="w-8 h-8 text-white" role="img" />
+        </div>
+        {/* Content */}
+        <div className="space-y-4">
+          <div>
+            <Heading as="h3" className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
+              {title}
+            </Heading>
+            <div className="inline-flex items-center px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm font-medium rounded-full">
+              <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+              {target} love this
+            </div>
+          </div>
+          <div className="text-gray-600 dark:text-gray-300 leading-relaxed">
+            {description}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className="py-20 px-4 max-w-7xl mx-auto">
+      {/* Modern section header */}
+      <div className="text-center mb-16">
+        <Heading as="h2" className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-400 dark:from-blue-400 dark:to-purple-300">
+            The Unisphere
+          </span>
+          {' '}
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">
+            Advantage
+          </span>
+        </Heading>
+        <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
+          Discover the powerful features that make Unisphere the perfect choice for modern development teams
+        </p>
+      </div>
+      {/* Features grid with modern responsive design */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
+      </div>
+      {/* Call-to-action section */}
+      <div className="mt-16 text-center">
+        <div className="bg-gradient-to-r from-blue-50 to-purple-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8">
+          <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            Ready to get started?
+          </h3>
+          <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
+            Join thousands of developers who are already building amazing applications with Unisphere
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="/docs/documentation/overview"
+              className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5"
+            >
+              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              Get Started
+            </a>
+            <a
+              href="/docs/documentation/overview"
+              className="inline-flex items-center px-6 py-3 bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200 font-semibold rounded-lg border border-gray-200 dark:border-gray-500 hover:border-gray-300 dark:hover:border-gray-400 shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5"
+            >
+              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              Learn About Unisphere
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/generators/add-documentation/templates/src/components/homepage-features/styles.module.css ADDED Viewed

@@ -0,0 +1,87 @@
+.features {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 2.5rem;
+  padding: 2rem 0;
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
+}
+.featuresContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+@media screen and (max-width: 1023px) {
+  .featuresContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (max-width: 768px) {
+  .featuresContainer {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+.featuresContainer :last-child:nth-last-child(1):nth-child(3n + 1) {
+  grid-column: 2;
+}
+.featureText {
+  font-size: 1.125rem;
+  line-height: 1.35rem;
+  font-weight: 500;
+}
+.featureCard {
+  gap: 1.5rem;
+  padding: 1.5rem;
+  border: thin solid var(--uc-border-color);
+  box-shadow: none;
+}
+.featureHeader, .featureBody {
+  padding: 0;
+}
+.featureTarget {
+  color: #888888;
+  font-style: italic;
+}
+.featureTitle {
+  font-size: 1.125rem;
+  line-height: 1.35rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+.featureIcon {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.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;
+  }
+}