@unisphere/nx 1.18.0 → 1.19.0

package/README.md

@@ -68,7 +68,7 @@ npx nx g @unisphere/nx:add-runtime
 
 - **How will this runtime be used?**
 
-  - **Loaded by External Host**
+  - **Loaded by External Host**u
 
     - Deployed independently and loaded at runtime
 
@@ -79,13 +79,13 @@ npx nx g @unisphere/nx:add-runtime
 
   - **Independent experience used as an entry point (loaded by host or another experience)**
 
-    - Includes an Expo playground expo application for developing and simulating a host environment
+    - Includes an Dev playground application for developing and simulating a host environment
 
   - **Composed into another runtime of this experience (not used as an entry point)**
 
     - Composed by another runtime within the same experience
 
-    - Assume it is developed using a playground expo application of another runtime in the project
+    - Assume it is developed using a playground dev application of another runtime in the project
 
 ### 🎨 `add-visual`
 
@@ -116,7 +116,7 @@ npx nx g @unisphere/nx:add-application
 
 - **Serving type**
 
-  - **Interactive Playground** – Local development using Expo (used mostly for development and testing)
+  - **Local Dev Playground** – Local development playground (for development and testing)
   - **Self-Hosted** – Standalone deployment with routing/auth (used for publically available applications)
   - **Iframe + Query Params** – Embedded apps with config in URL (used for embedding into other applications like Kaltura Admin or KMC)
   - **Iframe + Post Messages** – Embedded apps using `postMessage` API (used for embedding into other applications like Kaltura Admin or KMC) - this will replace eventually the query param method to be more secure and reliable but is not yet available.

package/dist/generators/add-application/add-application.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-application.d.ts","sourceRoot":"","sources":["../../../src/generators/add-application/add-application.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAG7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAgBzD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,6BAA6B,uBAuHvC;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"add-application.d.ts","sourceRoot":"","sources":["../../../src/generators/add-application/add-application.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA0EzD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,6BAA6B,uBA6HvC;AAED,eAAe,uBAAuB,CAAC"}

package/dist/generators/add-application/add-application.js

@@ -4,15 +4,74 @@ exports.addApplicationGenerator = addApplicationGenerator;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = tslib_1.__importStar(require("path"));
-const child_process_1 = require("child_process");
 const utils_1 = require("../utils");
+const dependency_config_1 = require("../dependency-config");
+async function getEnquirerPrompt() {
+    const enquirer = await import('enquirer');
+    // Handle both CommonJS and ESM exports
+    return enquirer.prompt || enquirer.default?.prompt || enquirer;
+}
+async function promptForRuntimeName() {
+    const prompt = await getEnquirerPrompt();
+    const response = await prompt({
+        type: 'input',
+        name: 'runtimeName',
+        message: 'Enter the runtime name to load in the playground:',
+    });
+    return response.runtimeName;
+}
+async function promptForHtmlPageTitle() {
+    const prompt = await getEnquirerPrompt();
+    const response = await prompt({
+        type: 'input',
+        name: 'htmlPageTitle',
+        message: 'What should the HTML page title be?',
+    });
+    return response.htmlPageTitle;
+}
+async function promptForDependencies(isPlayground) {
+    const prompt = await getEnquirerPrompt();
+    const choices = [
+        { value: 'ds', label: 'Kaltura DS - Design System (requires GIT_TOKEN)' },
+        { value: 'react-hook-form', label: 'React Hook Form - Form management' },
+    ];
+    // Only show mui option for local-dev-playground
+    if (isPlayground) {
+        choices.splice(1, 0, { value: 'mui', label: 'Material UI - Component library' });
+    }
+    const response = await prompt({
+        type: 'multiselect',
+        name: 'dependencies',
+        message: 'Select dependencies to install (use space to select, enter to confirm):',
+        choices: choices.map(c => ({ name: c.value, message: c.label })),
+    });
+    return response.dependencies;
+}
 async function addApplicationGenerator(tree, options) {
     // Validate iframe-with-post-messages is not supported
     if (options.servingType === 'iframe-with-post-messages') {
         throw new Error('iframe-with-post-messages serving type is not currently supported. Please choose a different serving type.');
     }
+    const isPlayground = options.servingType === 'local-dev-playground';
+    // Handle dynamic prompts based on servingType
+    if (isPlayground && !options.runtimeName) {
+        options.runtimeName = await promptForRuntimeName();
+    }
+    if (!isPlayground && !options.htmlPageTitle) {
+        options.htmlPageTitle = await promptForHtmlPageTitle();
+    }
+    if (options.dependencies === undefined) {
+        options.dependencies = await promptForDependencies(isPlayground);
+    }
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
+    // Validate dependencies - always include react, add mui and react-hook-form for local-dev-playground
+    const baseDependencies = ['react'];
+    if (options.servingType === 'local-dev-playground') {
+        baseDependencies.push('mui', 'react-hook-form');
+    }
+    const selectedDependencies = [...baseDependencies, ...(options.dependencies || [])];
+    (0, dependency_config_1.validateGitToken)(selectedDependencies);
     // Validate runtime exists if runtimeName is provided
     if (options.runtimeName) {
         if (!(0, utils_1.checkIfRuntimeExists)(tree, options.runtimeName)) {
@@ -23,11 +82,15 @@ async function addApplicationGenerator(tree, options) {
     const widgetName = unisphereConfig.name;
     const userInputApplicationName = (0, devkit_1.names)(options.name).fileName;
     // Prepare template variables
+    const hasDs = selectedDependencies.includes('ds');
+    const hasMui = selectedDependencies.includes('mui') || hasDs;
     const templateVariables = {
-        htmlPageTitle: options.servingType === 'interactive-playground'
-            ? `${options.runtimeName || 'Runtime'} - Interactive Expo`
+        htmlPageTitle: options.servingType === 'local-dev-playground'
+            ? `${options.runtimeName || 'Runtime'} - Local Dev Application`
             : options.htmlPageTitle,
         servingType: options.servingType,
+        hasDs,
+        hasMui,
         ...(0, utils_1.createNameTransforms)(userInputApplicationName, 'applicationName'),
         ...(0, utils_1.createNameTransforms)(widgetName, 'widgetName'),
         ...(0, utils_1.createNameTransforms)(options.runtimeName || 'runtime', 'runtimeName'),
@@ -41,37 +104,18 @@ async function addApplicationGenerator(tree, options) {
             'Please choose a different application name or remove the existing application first.');
     }
     // Choose template based on serving type
-    const templatePath = options.servingType === 'interactive-playground'
-        ? 'templates/interactive-playground'
+    const templatePath = options.servingType === 'local-dev-playground'
+        ? 'templates/local-dev-playground'
         : 'templates/default';
     // Generate files from templates
     (0, devkit_1.generateFiles)(tree, path.join(__dirname, templatePath), projectRoot, templateVariables);
-    // For interactive-playground, ensure react-hook-form is installed
-    if (options.servingType === 'interactive-playground') {
-        const installedVersion = (0, utils_1.isPackageInstalled)(tree, 'react-hook-form');
-        if (!installedVersion) {
-            const version = '^7.60';
-            const installCommand = `npm install react-hook-form@${version}`;
-            devkit_1.logger.info(`📦 Installing react-hook-form@${version}...`);
-            try {
-                (0, child_process_1.execSync)(installCommand, {
-                    cwd: process.cwd(),
-                    stdio: 'inherit',
-                });
-                devkit_1.logger.info('✅ react-hook-form installed successfully');
-            }
-            catch (error) {
-                devkit_1.logger.error(`❌ Failed to install react-hook-form: ${error}`);
-            }
-        }
-        else {
-            devkit_1.logger.info(`✅ react-hook-form is already installed (version: ${installedVersion})`);
-        }
-    }
+    // Install selected dependencies
+    (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
+    const distributionChannel = options.servingType !== 'local-dev-playground' ? 'none' : 'unisphere';
     // Update .unisphere configuration
     (0, utils_1.updateUnisphereConfig)(tree, 'applications', userInputApplicationName, {
         sourceRoot: `unisphere/applications/${userInputApplicationName}`,
-        distributionChannel: 'unisphere',
+        distributionChannel: distributionChannel,
     });
     // Update tsconfig.base.json with path mapping
     const applicationPathKey = `unisphere-application-${userInputApplicationName}`;
@@ -85,9 +129,9 @@ async function addApplicationGenerator(tree, options) {
         devkit_1.logger.info('');
         devkit_1.logger.info(`🚀 Application Name: ${userInputApplicationName}`);
         devkit_1.logger.info(`📁 Location: ${projectRoot}`);
-        if (options.servingType === 'interactive-playground') {
+        if (options.servingType === 'local-dev-playground') {
             devkit_1.logger.info(`🎮 Runtime Name: ${options.runtimeName}`);
-            devkit_1.logger.info(`📄 HTML Page Title: ${options.runtimeName} - Interactive Expo`);
+            devkit_1.logger.info(`📄 HTML Page Title: ${options.runtimeName} - Local Dev Application`);
         }
         else {
             devkit_1.logger.info(`📄 HTML Page Title: ${options.htmlPageTitle}`);

package/dist/generators/add-application/schema.d.ts

@@ -1,6 +1,7 @@
 export interface AddApplicationGeneratorSchema {
   name: string;
   htmlPageTitle?: string;
-  servingType: 'interactive-playground' | 'self-hosted' | 'iframe-with-query-params' | 'iframe-with-post-messages';
+  servingType: 'local-dev-playground' | 'self-hosted' | 'iframe-with-query-params' | 'iframe-with-post-messages';
   runtimeName?: string;
+  dependencies?: string[];
 }

package/dist/generators/add-application/schema.json

@@ -16,15 +16,15 @@
     },
     "servingType": {
       "type": "string",
-      "description": "How should this app be served?",    
+      "description": "How should this app be served?",
       "default": "self-hosted",
       "x-prompt": {
         "message": "Which serving type do you want?",
         "type": "list",
         "items": [
           {
-            "value": "interactive-playground",
-            "label": "Interactive Playground (Expo demo app for development purposes)"
+            "value": "local-dev-playground",
+            "label": "Local Dev Playground (for development purposes)"
           },
           {
             "value": "self-hosted",
@@ -43,44 +43,27 @@
     },
     "runtimeName": {
       "type": "string",
-      "description": "Which runtime should the playground load?",
-      "x-prompt": {
-        "message": "Enter the runtime name to load in the playground:",
-        "when": "servingType === 'interactive-playground'"
-      }
+      "description": "Which runtime should the playground load?"
     },
     "htmlPageTitle": {
       "type": "string",
-      "description": "The HTML page title for your app",
-      "x-prompt": {
-        "message": "What should the HTML page title be?",
-        "when": "servingType !== 'interactive-playground'"
+      "description": "The HTML page title for your app"
+    },
+    "dependencies": {
+      "type": "array",
+      "description": "Select packages to install (use space to select, enter to confirm)",
+      "items": {
+        "type": "string",
+        "enum": [
+          "ds",
+          "mui",
+          "react-hook-form"
+        ]
       }
     }
   },
   "required": [
     "name",
     "servingType"
-  ],
-  "allOf": [
-    {
-      "if": {
-        "properties": {
-          "servingType": {
-            "const": "interactive-playground"
-          }
-        }
-      },
-      "then": {
-        "required": [
-          "runtimeName"
-        ]
-      },
-      "else": {
-        "required": [
-          "htmlPageTitle"
-        ]
-      }
-    }
   ]
 }

package/dist/generators/add-application/templates/default/package.json.template

@@ -1,7 +1,8 @@
 {
   "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
   "version": "1.0.0",
+  "private": true,
   "dependencies": {
-    "@nextgis/cancelable-promise": "^3.0.0-alpha.22"
+
   }
 }

package/dist/generators/add-application/templates/default/src/app/app.tsx.template

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { HostThemeProvider } from '@kaltura/ds-react-theme';
-import { Box } from '@mui/material';
-
+<% if (hasDs) { %>import { HostThemeProvider } from '@kaltura/ds-react-theme';
+<% } %><% if (hasMui) { %>import { Box } from '@mui/material';
+<% } %>
 export function App() {
   const [adapter] = useState(() => {
 <% if (servingType === 'iframe-with-query-params') { %>
@@ -49,11 +49,14 @@ export function App() {
   // TODO self hosted logic if needed
 <% } %>
 
+<% if (hasDs) { %>
   const [themeMode] = useState(() => {
     return 'light' as const
   });
+<% } %>
 
   return (
+<% if (hasMui) { %>
     <Box
       sx={{
         width: '100vw',
@@ -62,6 +65,17 @@ export function App() {
         padding: '12px 24px',
       }}
     >
+<% } else { %>
+    <div
+      style={{
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        padding: '12px 24px',
+      }}
+    >
+<% } %>
+<% if (hasDs) { %>
       <HostThemeProvider
         overrides={{
           mode: themeMode,
@@ -69,7 +83,14 @@ export function App() {
       >
         {adapter ? <div> <%= applicationName__lowerDashCase %> </div> : <div></div>}
       </HostThemeProvider>
+<% } else { %>
+      {adapter ? <div> <%= applicationName__lowerDashCase %> </div> : <div></div>}
+<% } %>
+<% if (hasMui) { %>
     </Box>
+<% } else { %>
+    </div>
+<% } %>
   );
 }
 

package/dist/generators/add-application/templates/{interactive-playground → local-dev-playground}/package.json

@@ -1,7 +1,5 @@
 {
   "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
   "version": "1.0.0",
-  "dependencies": {
-    "@nextgis/cancelable-promise": "^3.0.0-alpha.22"
-  }
-}
+  "dependencies": {}
+}

package/dist/generators/add-application/templates/{interactive-playground → local-dev-playground}/src/app/app.tsx.template

@@ -52,7 +52,7 @@ const Hihi: React.FC = () => {
           marginBottom: '2rem',
         }}
       >
-        You haven’t created a runtime visual or just didn't mount it in the Expo
+        You haven’t created a runtime visual or just didn't mount it in the Dev
         application. Once you add one, open{' '}
         <span
           style={{
@@ -93,9 +93,7 @@ const Hihi: React.FC = () => {
   widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
   runtimeName="<%= runtimeName__lowerDashCase %>"
   visualType="-- provide here the visual name --"
-  visualSettings={{
-    -- provide here the visual settings --
-  }}
+  visualSettings={{  }}
 />`}
       </pre>
     </div>
@@ -114,17 +112,17 @@ export function AppContent() {
     () => {
       /*
       Developer Note:
-      The Expo app lets you provide runtime configuration as a JSON object that matches the same schema used in your production or staging environments.
+      The Dev app lets you provide runtime configuration as a JSON object that matches the same schema used in your production or staging environments.
 
       •	If the runtime is already active in production or staging:
         1.	Open Unisphere (Cmd + K) and choose Manage Workspace Runtimes.
         2.	Locate your runtime, click the ••• (Actions) menu, and select Copy Settings.
-        3. Open the Expo app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
+        3. Open the Dev app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
         4. Use the Save button to persist your settings. They’ll be stored in local storage and automatically loaded the next time the app runs.
 
       •	If the runtime isn’t yet in use:
         1.	Manually create a JSON payload that conforms to your runtime’s schema.
-        2. Open the Expo app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
+        2. Open the Dev app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
         3. Use the Save button to persist your settings. They’ll be stored in local storage and automatically loaded the next time the app runs.
       */
 
@@ -134,7 +132,7 @@ export function AppContent() {
         }
 
         return {
-          appId: '<%= runtimeName__lowerDashCase %>-expo',
+          appId: '<%= runtimeName__lowerDashCase %>-dev',
           appVersion: '1.0.0',
           serverUrl: configuration.unisphereServerUrl,
           ui: {
@@ -193,9 +191,7 @@ export function AppContent() {
                 widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
                 runtimeName="<%= runtimeName__lowerDashCase %>"
                 visualType="-- provide here the visual name --"
-                visualSettings={{
-                  -- provide here the visual settings --
-                }}
+                visualSettings={{ }}
               /> */}
             </UnisphereProvider>
           )}
@@ -207,7 +203,7 @@ export function AppContent() {
 
 const App = () => {
   return (
-    <ConfigurationProvider configurationKey="unisphere-<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-expo">
+    <ConfigurationProvider configurationKey="unisphere-<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-dev">
       <AppContent />
     </ConfigurationProvider>
   );

package/dist/generators/add-application/templates/{interactive-playground → local-dev-playground}/src/app/components/header.tsx.template

@@ -66,7 +66,7 @@ export const Header: React.FC = () => {
           }}
         >
           <Typography variant="h6" sx={{ flexGrow: 1 }}>
-            <%= widgetName__pascalCase %> - <%= runtimeName__pascalCase %> Expo
+            <%= widgetName__pascalCase %> - <%= runtimeName__pascalCase %> Dev
           </Typography>
         </Box>
 

package/dist/generators/add-package/add-package.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-package.d.ts","sourceRoot":"","sources":["../../../src/generators/add-package/add-package.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAA2B,MAAM,YAAY,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAoJrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBA6GnC;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"add-package.d.ts","sourceRoot":"","sources":["../../../src/generators/add-package/add-package.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAA2B,MAAM,YAAY,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAyJrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBA0HnC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/generators/add-package/add-package.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = tslib_1.__importStar(require("path"));
 const utils_1 = require("../utils");
+const dependency_config_1 = require("../dependency-config");
 /**
  * Resolves the @unisphere/runtime version from the workspace's root package.json
  * Falls back to a default version if not found
@@ -120,12 +121,17 @@ export const ${demoName} = () => {
 async function addPackageGenerator(tree, options) {
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
+    // Validate dependencies
+    const selectedDependencies = options.dependencies || [];
+    (0, dependency_config_1.validateGitToken)(selectedDependencies);
+    // Validate and correct package naming for React/DS dependencies
+    let userInputPackageName = (0, devkit_1.names)(options.packageName).fileName;
+    userInputPackageName = (0, dependency_config_1.validateReactNaming)(userInputPackageName, selectedDependencies);
     // Extract environment variables
     const companyName = unisphereConfig.company;
     const experienceName = unisphereConfig.name;
     // Calculate packageJsonName based on scope and names
     let packageJsonName;
-    const userInputPackageName = (0, devkit_1.names)(options.packageName).fileName;
     if (experienceName === userInputPackageName) {
         packageJsonName = userInputPackageName;
     }
@@ -184,6 +190,8 @@ async function addPackageGenerator(tree, options) {
     // Update tsconfig.base.json with path mapping
     (0, utils_1.updateTsConfigPaths)(tree, packageJsonName, `unisphere/packages/${userInputPackageName}/src/index.ts`);
     generateDemoComponent(tree, projectRoot, templateVariables);
+    // Install selected dependencies
+    (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
     await (0, devkit_1.formatFiles)(tree);
     // Return a function that will be executed after all file operations are complete
     return () => {

package/dist/generators/add-package/schema.d.ts

@@ -1,4 +1,5 @@
 export interface AddPackageGeneratorSchema {
   packageName: string;
   scope: 'public' | 'internal' | 'none';
+  dependencies?: string[];
 }

package/dist/generators/add-package/schema.json

@@ -31,7 +31,35 @@
         "label": "Public – published to npm (@unisphere/… available to everyone)"
       }
     ]
-  }   
+  }
+    },
+    "dependencies": {
+      "type": "array",
+      "description": "Select packages to install (use space to select, enter to confirm)",
+      "items": {
+        "type": "string",
+        "enum": ["react", "ds", "mui"]
+      },
+      "default": [],
+      "x-prompt": {
+        "message": "Select dependencies to install (use space to select, enter to confirm):",
+        "type": "list",
+        "multiselect": true,
+        "items": [
+          {
+            "value": "react",
+            "label": "React - UI library for building components"
+          },
+          {
+            "value": "ds",
+            "label": "Kaltura DS - Design System (requires GIT_TOKEN)"
+          },
+          {
+            "value": "mui",
+            "label": "Material UI - Component library"
+          }
+        ]
+      }
     }
   },
   "required": [

package/dist/generators/add-runtime/add-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-runtime.d.ts","sourceRoot":"","sources":["../../../src/generators/add-runtime/add-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAwCrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAqHnC;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"add-runtime.d.ts","sourceRoot":"","sources":["../../../src/generators/add-runtime/add-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA6CrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAiInC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/generators/add-runtime/add-runtime.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = tslib_1.__importStar(require("path"));
 const utils_1 = require("../utils");
+const dependency_config_1 = require("../dependency-config");
 const add_application_1 = require("../add-application/add-application");
 function updateCoreIndexExport(tree, runtimeName) {
     const coreIndexPath = 'unisphere/packages/core/src/index.ts';
@@ -27,10 +28,15 @@ function updateCoreIndexExport(tree, runtimeName) {
 async function addRuntimeGenerator(tree, options) {
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
+    // Validate dependencies
+    const selectedDependencies = options.dependencies || [];
+    (0, dependency_config_1.validateGitToken)(selectedDependencies);
     // Extract environment variables
     const companyName = unisphereConfig.company;
     const widgetName = unisphereConfig.name;
-    const userInputRuntimeName = (0, devkit_1.names)(options.name).fileName;
+    // Validate and correct runtime naming for React/DS dependencies
+    let userInputRuntimeName = (0, devkit_1.names)(options.name).fileName;
+    userInputRuntimeName = (0, dependency_config_1.validateReactNaming)(userInputRuntimeName, selectedDependencies);
     const coreAlias = (0, utils_1.findCorePackageAlias)(tree);
     // Prepare template variables
     const templateVariables = {
@@ -77,12 +83,12 @@ async function addRuntimeGenerator(tree, options) {
     // if (packageResult && typeof packageResult === 'function') {
     //   packageResult();
     // }
-    // Handle loadedByExternalHost usage - create package and expo application
+    // Handle loadedByExternalHost usage - create package and dev application
     if (options.standalone === true) {
-        // Create an expo application without prompts
+        // Create an dev application without prompts
         const applicationResult = await (0, add_application_1.addApplicationGenerator)(tree, {
-            name: `${userInputRuntimeName}-expo`,
-            servingType: 'interactive-playground',
+            name: `${userInputRuntimeName}-dev`,
+            servingType: 'local-dev-playground',
             runtimeName: userInputRuntimeName,
         });
         // Execute the application generation callback if it exists
@@ -90,6 +96,8 @@ async function addRuntimeGenerator(tree, options) {
             applicationResult();
         }
     }
+    // Install selected dependencies
+    (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
     await (0, devkit_1.formatFiles)(tree);
     // Return a function that will be executed after all file operations are complete
     return () => {
@@ -102,7 +110,7 @@ async function addRuntimeGenerator(tree, options) {
         if (options.standalone === true) {
             devkit_1.logger.info('');
             devkit_1.logger.info('📦 Additional components created:');
-            devkit_1.logger.info(`   • Expo Application: ${userInputRuntimeName}-expo`);
+            devkit_1.logger.info(`   • Dev Application: ${userInputRuntimeName}-dev`);
         }
         devkit_1.logger.info('');
     };

package/dist/generators/add-runtime/schema.d.ts

@@ -1,4 +1,5 @@
 export interface AddRuntimeGeneratorSchema {
   name: string;
   standalone: boolean;
+  dependencies?: string[];
 }

package/dist/generators/add-runtime/schema.json

@@ -15,7 +15,49 @@
       "description": "Is this experience being loaded by the host application, or by another experience (not this one)?",
       "x-prompt": {
         "message": "Is this experience being loaded by the host application, or by another experience (not this one)?",
-        "type": "confirmation"
+        "type": "list",
+        "items": [
+          {
+            "value": true,
+            "label": "Yes -loaded by host application"
+          },
+          {
+            "value": false,
+            "label": "No - loaded by another experience"
+          }
+        ]
+      }
+    },
+    "dependencies": {
+      "type": "array",
+      "description": "Select packages to install (use space to select, enter to confirm)",
+      "items": {
+        "type": "string",
+        "enum": [
+          "react",
+          "ds",
+          "mui"
+        ]
+      },
+      "default": [],
+      "x-prompt": {
+        "message": "Select dependencies to install (use space to select, enter to confirm):",
+        "type": "list",
+        "multiselect": true,
+        "items": [
+          {
+            "value": "react",
+            "label": "React - UI library for building components"
+          },
+          {
+            "value": "ds",
+            "label": "Kaltura DS - Design System (requires GIT_TOKEN)"
+          },
+          {
+            "value": "mui",
+            "label": "Material UI - Component library"
+          }
+        ]
       }
     }
   },
@@ -23,4 +65,4 @@
     "name",
     "standalone"
   ]
-}
+}