@unisphere/nx 1.0.1

package/README.md

@@ -0,0 +1,32 @@
+# @unisphere/nx
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build unisphere-generator` to build the library.
+
+## Running unit tests
+
+Run `nx test unisphere-generator` to execute the unit tests via [Jest](https://jestjs.io).
+
+
+## Run Add Package
+
+Run `npx nx g @unisphere/nx:add-package` to build the library.
+
+## Run Add Runtime
+
+Run `npx nx g @unisphere/nx:add-runtime` to build the library.
+
+## Run Add Application
+
+Run `npx nx g @unisphere/nx:add-application` to build the library.
+
+
+## Run in another folder with path of current plugin
+
+Run `npx nx g <path-of-current-repo>packages/nx:add-application` to build the library.
+
+
+

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

@@ -0,0 +1,5 @@
+import { Tree } from '@nx/devkit';
+import { AddApplicationGeneratorSchema } from './schema';
+export declare function addApplicationGenerator(tree: Tree, options: AddApplicationGeneratorSchema): Promise<() => void>;
+export default addApplicationGenerator;
+//# sourceMappingURL=add-application.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-application.d.ts","sourceRoot":"","sources":["../../../src/generators/add-application/add-application.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,IAAI,EAGL,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAezD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,6BAA6B,uBAiHvC;AAED,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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.');
+    }
+    // Validate and read .unisphere configuration
+    const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
+    // Validate runtime exists if runtimeName is provided
+    if (options.runtimeName) {
+        if (!(0, utils_1.checkIfRuntimeExists)(tree, options.runtimeName)) {
+            throw new Error(`Runtime "${options.runtimeName}" does not exist`);
+        }
+    }
+    // Extract environment variables
+    const widgetName = unisphereConfig.name;
+    const userInputApplicationName = (0, devkit_1.names)(options.name).fileName;
+    // Prepare template variables
+    const templateVariables = {
+        htmlPageTitle: options.servingType === 'interactive-playground'
+            ? `${options.runtimeName || 'Runtime'} - Interactive Expo`
+            : options.htmlPageTitle,
+        servingType: options.servingType,
+        ...(0, utils_1.createNameTransforms)(userInputApplicationName, 'applicationName'),
+        ...(0, utils_1.createNameTransforms)(widgetName, 'widgetName'),
+        ...(0, utils_1.createNameTransforms)(options.runtimeName || 'runtime', 'runtimeName'),
+        tmpl: '',
+    };
+    const projectRoot = `unisphere/applications/${userInputApplicationName}`;
+    // Check if the application already exists
+    if (tree.exists(projectRoot)) {
+        throw new Error(`Application "${userInputApplicationName}" already exists at ${projectRoot}.\n` +
+            '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'
+        : '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})`);
+        }
+    }
+    // Update .unisphere configuration
+    (0, utils_1.updateUnisphereConfig)(tree, 'applications', userInputApplicationName, {
+        sourceRoot: `unisphere/applications/${userInputApplicationName}`,
+        distributionChannel: 'unisphere',
+    });
+    // Update tsconfig.base.json with path mapping
+    const applicationPathKey = `unisphere-application-${userInputApplicationName}`;
+    const applicationPathValue = `unisphere/applications/${userInputApplicationName}/src/index.ts`;
+    (0, utils_1.updateTsConfigPaths)(tree, applicationPathKey, applicationPathValue);
+    await (0, devkit_1.formatFiles)(tree);
+    // Return a function that will be executed after all file operations are complete
+    return () => {
+        devkit_1.logger.info('');
+        devkit_1.logger.info('✅ Application generated successfully!');
+        devkit_1.logger.info('');
+        devkit_1.logger.info(`🚀 Application Name: ${userInputApplicationName}`);
+        devkit_1.logger.info(`📁 Location: ${projectRoot}`);
+        if (options.servingType === 'interactive-playground') {
+            devkit_1.logger.info(`🎮 Runtime Name: ${options.runtimeName}`);
+            devkit_1.logger.info(`📄 HTML Page Title: ${options.runtimeName} - Interactive Expo`);
+        }
+        else {
+            devkit_1.logger.info(`📄 HTML Page Title: ${options.htmlPageTitle}`);
+        }
+        devkit_1.logger.info(`🔧 Serving Type: ${options.servingType}`);
+        devkit_1.logger.info('');
+    };
+}
+exports.default = addApplicationGenerator;

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

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

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

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "AddApplication",
+  "title": "Add Application Generator",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the application to create",
+      "pattern": "^[a-zA-Z][a-zA-Z0-9\\-\\s]*$",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What is the application name? (letters, numbers, dashes and spaces allowed)"
+    },
+    "servingType": {
+      "type": "string",
+      "description": "How should this app be served?",
+      "enum": [
+        "interactive-playground",
+        "self-hosted",
+        "iframe-with-query-params",
+        "iframe-with-post-messages"
+      ],
+      "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": "self-hosted",
+            "label": "Self-Hosted (standalone, suitible to applications with login pages)"
+          },
+          {
+            "value": "iframe-with-query-params",
+            "label": "Iframe + Query Params (suitible to applications that gets required configuration from URL query parameters)"
+          },
+          {
+            "value": "iframe-with-post-messages",
+            "label": "Iframe + Post Messages (suitible to applications that gets required configuration from post messages)"
+          }
+        ]
+      }
+    },
+    "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'"
+      }
+    },
+    "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'"
+      }
+    }
+  },
+  "required": [
+    "name",
+    "servingType"
+  ],
+  "allOf": [
+    {
+      "if": {
+        "properties": {
+          "servingType": {
+            "const": "interactive-playground"
+          }
+        }
+      },
+      "then": {
+        "required": [
+          "runtimeName"
+        ]
+      },
+      "else": {
+        "required": [
+          "htmlPageTitle"
+        ]
+      }
+    }
+  ]
+}

package/dist/generators/add-application/templates/default/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

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

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/dist/generators/add-application/templates/default/jest.config.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    displayName: string;
+    preset: string;
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': string;
+        '^.+\\.[tj]sx?$': (string | {
+            presets: string[];
+        })[];
+    };
+    moduleFileExtensions: string[];
+    coverageDirectory: string;
+};
+export default _default;
+//# sourceMappingURL=jest.config.d.ts.map

package/dist/generators/add-application/templates/default/jest.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest.config.d.ts","sourceRoot":"","sources":["../../../../../src/generators/add-application/templates/default/jest.config.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,wBASE"}

package/dist/generators/add-application/templates/default/jest.config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable */
+exports.default = {
+    displayName: 'admin',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+        '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/unisphere/applications/admin',
+};

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

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

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

@@ -0,0 +1,9 @@
+{
+  "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "unisphere/applications/<%= applicationName__lowerDashCase %>/src",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project unisphere-application-<%= applicationName__lowerDashCase %> --web",
+  "targets": {}
+}

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

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { HostThemeProvider } from '@kaltura/ds-react-theme';
+import { Box } from '@mui/material';
+
+export function App() {
+  const [adapter] = useState(() => {
+<% if (servingType === 'iframe-with-query-params') { %>
+
+    const ks = new URLSearchParams(window.location.search).get('ks') || '';
+    const isDev =
+      new URLSearchParams(window.location.search).get('isDev') || '';
+    const envMatch = window.location.hostname.match(/unisphere\.(.+?)\.ovp\./);
+    let env = '';
+
+    if (envMatch) {
+      console.log('extracting env from hostname', envMatch[1]);
+      env = envMatch[1];
+    } else if (isDev) {
+      console.log(
+        'no env match found in hostname and got isDev query param, assuming nvq2'
+      );
+      env = 'nvq2';
+    } else {
+      console.log('no env match found in hostname, assuming nvp1');
+      env = 'nvp1';
+    }
+
+    if (ks === 'demo') {
+      return null; // TODO initialize here the mock adapter
+    }
+    if (ks && env) {
+      return null; // TODO initiate here the actual adapter
+    }
+
+    console.warn('Missing required query params: ks');
+    return null;
+<% } else  { %>
+
+    return null;
+<% } %>
+
+  });
+
+<% if (servingType === 'iframe-with-post-messages') { %>
+  // TODO should get the configuration from post message event
+<% } %>
+
+<% if (servingType === 'self-hosted') { %>
+  // TODO self hosted logic if needed
+<% } %>
+
+  const [themeMode] = useState(() => {
+    return 'light' as const
+  });
+
+  return (
+    <Box
+      sx={{
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        padding: '12px 24px',
+      }}
+    >
+      <HostThemeProvider
+        overrides={{
+          mode: themeMode,
+        }}
+      >
+        {adapter ? <div> <%= applicationName__lowerDashCase %> </div> : <div></div>}
+      </HostThemeProvider>
+    </Box>
+  );
+}
+
+export default App;

package/dist/generators/add-application/templates/default/src/index.html.template

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>
+    <%= htmlPageTitle %>
+  </title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

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

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import App from './app/app';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/dist/generators/add-application/templates/default/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

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

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/dist/generators/add-application/templates/default/tsconfig.spec.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": [
+      "jest",
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/dist/generators/add-application/templates/default/webpack.config.js.template

@@ -0,0 +1,33 @@
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
+const { join } = require('path');
+
+const baseHref = process.env.UNISPHERE_BASE_HREF || '/';
+
+module.exports = {
+  output: {
+    path: join(__dirname, '../../../dist/unisphere/applications/<%= applicationName__lowerDashCase %>'),
+    publicPath: baseHref
+  },
+  devServer: {
+    port: 4200,
+  },
+  plugins: [
+    new NxAppWebpackPlugin({
+      tsConfig: './tsconfig.app.json',
+      compiler: 'babel',
+      main: './src/main.tsx',
+      index: './src/index.html',
+      baseHref,
+      assets: ['./src/favicon.ico'],
+      styles: ['./src/styles.css'],
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactWebpackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};

package/dist/generators/add-application/templates/interactive-playground/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/dist/generators/add-application/templates/interactive-playground/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/dist/generators/add-application/templates/interactive-playground/jest.config.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    displayName: string;
+    preset: string;
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': string;
+        '^.+\\.[tj]sx?$': (string | {
+            presets: string[];
+        })[];
+    };
+    moduleFileExtensions: string[];
+    coverageDirectory: string;
+};
+export default _default;
+//# sourceMappingURL=jest.config.d.ts.map

package/dist/generators/add-application/templates/interactive-playground/jest.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jest.config.d.ts","sourceRoot":"","sources":["../../../../../src/generators/add-application/templates/interactive-playground/jest.config.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,wBASE"}

package/dist/generators/add-application/templates/interactive-playground/jest.config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable */
+exports.default = {
+    displayName: 'admin',
+    preset: '../../../jest.preset.js',
+    transform: {
+        '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+        '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    coverageDirectory: '../../../coverage/unisphere/applications/admin',
+};

package/dist/generators/add-application/templates/interactive-playground/package.json

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

package/dist/generators/add-application/templates/interactive-playground/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "unisphere/applications/<%= applicationName__lowerDashCase %>/src",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project unisphere-application-<%= applicationName__lowerDashCase %> --web",
+  "targets": {}
+}