@unisphere/nx 1.1.2 → 1.1.3

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

@@ -10,6 +10,98 @@ import { UnisphereWorkspaceConfig } from '@unisphere/runtime';
 import { UnisphereWorkspaceType } from '@unisphere/runtime';
 import { <%= runtimeName__pascalCase %>Runtime } from '<%= coreAlias %>';
 
+
+const Hihi: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+        padding: '2rem',
+        backgroundColor: '#f9f9f9',
+        color: '#333',
+        fontFamily: 'sans-serif',
+        textAlign: 'center',
+      }}
+    >
+      <h1
+        style={{
+          fontSize: '1.5rem',
+        }}
+      >
+        Hihi :)
+      </h1>
+
+      <h2
+        style={{
+          fontSize: '1.0rem',
+          marginBottom: '1rem',
+        }}
+      >
+        No visuals are mounted yet
+      </h2>
+
+      <p
+        style={{
+          fontSize: '1rem',
+          maxWidth: '400px',
+          lineHeight: 1.4,
+          marginBottom: '2rem',
+        }}
+      >
+        You haven’t created a runtime visual or just didn't mount it in the Expo
+        application. Once you add one, open{' '}
+        <span
+          style={{
+            backgroundColor: '#eaeaea',
+            padding: '0.2rem 0.4rem',
+            borderRadius: '4px',
+            fontFamily: 'monospace',
+          }}
+        >
+          app.tsx
+        </span>{' '}
+        and uncomment the{' '}
+        <span
+          style={{
+            backgroundColor: '#eaeaea',
+            padding: '0.2rem 0.4rem',
+            borderRadius: '4px',
+            fontFamily: 'monospace',
+          }}
+        >
+          &lt;UnisphereRuntimeVisual /&gt;
+        </span>{' '}
+        component to see it render here.
+      </p>
+
+      <pre
+        style={{
+          backgroundColor: '#fff',
+          padding: '1rem',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          overflowX: 'auto',
+          fontFamily: 'monospace',
+          textAlign: 'left',
+        }}
+      >
+        {`<UnisphereRuntimeVisual
+  widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
+  runtimeName="<%= runtimeName__lowerDashCase %>"
+  visualType="-- provide here the visual name --"
+  visualSettings={{
+    -- provide here the visual settings --
+  }}
+/>`}
+      </pre>
+    </div>
+  );
+};
+
 export function AppContent() {
   const { configuration } = useContext(ConfigurationContext);
 
@@ -22,18 +114,18 @@ export function AppContent() {
     () => {
       /*
       Developer Note:
-      • You don’t need to touch the code to enable runtime configuration.
+      The Expo app lets you provide runtime configuration as a JSON object that matches the same schema used in your production or staging environments.
 
-      • If this runtime is already active in an app:
-	      1.	Open Unisphere, press Cmd + K, then choose Manage Workspace Runtimes.
-	      2.	Find the runtime you want, click … (Action), and select Copy Settings.
-	      3.	Paste into NVQ2 with a valid host—settings will be ready to go.
+      •	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.
+        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 the JSON payload matching the runtime’s schema.
-
-      Once you run the application you will have a button where you can save the configurations. 
-      The application will save it in the local storage and will load it on the next run.
+      •	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.
+        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.
       */
 
       try {
@@ -95,6 +187,8 @@ export function AppContent() {
               onWorkspaceLoaded={onWorkspaceLoaded}
               initialConfiguration={initialConfiguration}
             >
+              <Hihi />
+
               {/* <UnisphereRuntimeVisual
                 widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
                 runtimeName="<%= runtimeName__lowerDashCase %>"

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,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAkBrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAwGnC;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,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAuGrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAyGnC;AAED,eAAe,mBAAmB,CAAC"}

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

@@ -5,6 +5,82 @@ const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = tslib_1.__importStar(require("path"));
 const utils_1 = require("../utils");
+function generateDemoComponent(tree, projectRoot, vars) {
+    // path: packages/<pkg>/src/lib/panel-demo.tsx
+    const targetPath = `${projectRoot}/src/lib/${vars['packageName__lowerDashCase']}-demo.tsx`;
+    // component and logger names
+    const loggerName = `${vars['packageName__lowerDashCase']}-demo`;
+    const demoName = `${vars['packageName__pascalCase']}Demo`;
+    const content = `import { useContext, useEffect } from 'react';
+import {
+  ScopedUnisphereWorkspaceContext,
+  useGetScopedWorkspaceLogger,
+} from '@unisphere/runtime-react';
+
+const Hihi = () => {
+  return (
+    <div
+      style={{
+        border: '2px dashed #888',
+        borderRadius: '8px',
+        padding: '2rem',
+        margin: '2rem auto',
+        maxWidth: '500px',
+        textAlign: 'center',
+        fontFamily: 'sans-serif',
+        color: '#444',
+        backgroundColor: '#fcfcfc',
+      }}
+    >
+      <h2
+        style={{
+          marginBottom: '1rem',
+          fontSize: '1.25rem',
+          fontWeight: 500,
+        }}
+      >
+        Hihi :)
+      </h2>
+      <p
+        style={{
+          lineHeight: 1.5,
+          marginBottom: '1.5rem',
+          fontSize: '1rem',
+        }}
+      >
+        This '${demoName}' component shows you how to connect with the Unisphere workspace and set up a scoped logger.
+      </p>
+    </div>
+  );
+};
+
+export const ${demoName} = () => {
+  const { unisphereWorkspace } = useContext(ScopedUnisphereWorkspaceContext);
+  const logger = useGetScopedWorkspaceLogger({
+    type: 'react',
+    name: '${loggerName}',
+  });
+
+  useEffect(() => {
+    // example only - feel free to remove
+    logger.log('${loggerName} mounted');
+    return () => {
+      logger.log('${loggerName} unmounted');
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!unisphereWorkspace) return;
+    
+    // you can access the unisphere workspace that renders the runtime this component is mounted in
+  }, [unisphereWorkspace]);
+
+  // render your visual
+  return <Hihi />;
+};
+`;
+    tree.write(targetPath, content);
+}
 async function addPackageGenerator(tree, options) {
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
@@ -68,6 +144,7 @@ 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);
     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.json

@@ -15,23 +15,23 @@
       "description": "The distribution scope of the package",      
       "default": "none",
       "x-prompt": {
-        "message": "What scope should this package have? If you are not sure what to choose, choose None.",
-        "type": "list",
-        "items": [
-          {
-            "value": "none",
-            "label": "None (no scope) - Used only internally by the experience runtimes."
-          },          
-          {
-            "value": "internal",
-            "label": "Internal - Published to GitHub packages (@kaltura/unisphere-<experience-name>-<package-name>)"
-          },
-          {
-            "value": "public",
-            "label": "Public - Published to npm (@unisphere/<experience-name>-<package-name>)"
-          }
-        ]
+    "message": "What scope should this package have? If you’re unsure, choose Private.",
+    "type": "list",
+    "items": [
+      {
+        "value": "none",
+        "label": "Private – only for this Unisphere experience (not published externally)"
+      },
+      {
+        "value": "internal",
+        "label": "Kaltura – published as a GitHub package (@kaltura/unisphere-… for Kaltura teams)"
+      },
+      {
+        "value": "public",
+        "label": "Public – published to npm (@unisphere/… available to everyone)"
       }
+    ]
+  }   
     }
   },
   "required": [

package/dist/generators/add-package/templates/new-package/src/index.ts.template

@@ -0,0 +1 @@
+export * from './lib/<%= packageName__lowerDashCase %>-demo';

package/dist/generators/add-package/templates/new-package/tsconfig.lib.json

@@ -19,5 +19,5 @@
     "**/*.spec.jsx",
     "**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "src/index.ts.template"]
 }

package/dist/generators/add-runtime/templates/new-runtime/src/lib/runtime.tsx.template

@@ -31,6 +31,9 @@ export class Runtime
   }
 
   constructor(options: CreateElementOptions<<%= runtimeName__pascalCase %>RuntimeSettings>) {
+    /*
+    Developer Note: to generate a visual run `npx nx g @unisphere/nx:add-visual`
+    */
     super({
       ...options,
       settingsSchema: <%= runtimeName__camelCase %>RuntimeSettingsSchema,

package/dist/generators/add-visual/templates/new-visual/render-method.template

@@ -9,7 +9,7 @@
   this._logger.log('rendering <%= visualName__humanReadable %>');
 
   visual.htmlContainer?.render(
-    <ScopedUnisphereWorkspaceProvider unisphereWorkspace={this._workspace}>
+    <ScopedUnisphereWorkspaceProvider unisphereWorkspace={this._workspace} runtimeLogger={this._logger}>
       <ThemeProvider
         cssPrefix={'<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-<%= visualName__lowerDashCase %>'}
         mode={typeof this._theme === 'string' ? this._theme : this._theme.mode}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unisphere/nx",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/generators/add-package/templates/new-package/src/index.ts

@@ -1 +0,0 @@
-export {};