@unisphere/nx 1.1.3 → 1.1.4

package/README.md

@@ -2,13 +2,16 @@
 
 > This is a temporary documentation to the @unisphere/nx plugin until the official documentation is available.
 
+> ⚠️ **This generator is currently available only to Kaltura developers.**
+> It depends on internal resources such as CI/CD templates, design systems, and private NPM packages. External support for Kaltura customers is on our roadmap.
+
 Unisphere is Kaltura’s frontend framework for building dynamic, composable experiences. A **Unisphere project** is a structured repository that allows developers to create and organize **applications**, **runtimes**, and **packages** under a single cohesive experience. This setup encourages healthy module separation, runtime decoupling, reusability, and clean ownership boundaries — all key ingredients for scaling product development in a multi-team environment.
 
 Whether you're building a full application like _Content Lab_ or a lightweight widget like _Chat_, Unisphere gives you the tooling and conventions to do it the right way from the start.
 
----
+## Step 1 - Create a New Unisphere Project
 
-## Create a New Unisphere Project
+Before creating a new Unisphere project, make sure you have a valid `GITHUB_TOKEN` exported in your environment. This is required for GitHub operations during setup.
 
 To scaffold a new project you can use [create-unisphere-project](https://www.npmjs.com/package/create-unisphere-project) npm package with all necessary tooling and structure, run:
 
@@ -16,13 +19,6 @@ To scaffold a new project you can use [create-unisphere-project](https://www.npm
 npm create unisphere-project@latest
 ```
 
-> ⚠️ **This generator is currently available only to Kaltura developers.**
-> It depends on internal resources such as CI/CD templates, design systems, and private NPM packages. External support for Kaltura customers is on our roadmap.
-
-**Before running the command**, make sure you have a valid `GITHUB_TOKEN` exported in your environment. This is required for GitHub operations during setup.
-
----
-
 ### Set Up the GitHub Repository
 
 Once the project is generated locally, you’ll need to create a new GitHub repository so that CI/CD can operate correctly and your team has proper access.
@@ -36,7 +32,7 @@ Please contact **Eran Sakal** or **Omri Ceisler** to provision the repository. T
    unisphere-{friendly-experience-name}
    ```
 
-   > The friendly name is derived from your declared experience name (e.g., `unisphere.widget.reactions` → `reactions` → `unisphere-reactions` as the repository name).
+   The friendly name is derived from your declared experience name (e.g., `unisphere.widget.reactions` → `reactions` → `unisphere-reactions` as the repository name).
 
 2. **Team Access Configuration**
    The appropriate GitHub teams will be granted access to the repository to match the experience's ownership and collaboration needs.
@@ -48,7 +44,7 @@ Once created, you can push your local project into the new repository and begin
 
 ---
 
-## Use the `@unisphere/nx` Plugin
+## Step 2 - Use the `@unisphere/nx` Plugin
 
 After your project is set up, you’ll use the `@unisphere/nx` plugin to generate and manage your project’s core elements. All generators are interactive and designed to enforce Unisphere best practices and conventions.
 
@@ -91,8 +87,6 @@ npx nx g @unisphere/nx:add-runtime
 
     - Assume it is developed using a playground expo application of another runtime in the project
 
----
-
 ### 🎨 `add-visual`
 
 Creates a **visual component** within a runtime — the building blocks of your UI.
@@ -108,8 +102,6 @@ npx nx g @unisphere/nx:add-visual
 - **Is this visual limited to a single occurrence?**
   Choose `Yes` for singleton visuals (e.g., when the visual represent a container that can only have one instance), otherwise `No`.
 
----
-
 ### 📱 `add-application`
 
 Creates an **application** that acts as a host for your runtime(s). These apps can be used for development, standalone deployments, or iframe integrations. The application can be used as a playground for developing and simulating a host environment without the need to deploy the experience to a customer, or it can be an additional entry point for the experience and use the Unisphere ci/cd to be publically available in multi region environments.
@@ -133,8 +125,6 @@ npx nx g @unisphere/nx:add-application
 
 - **HTML page title** (if not using Playground)
 
----
-
 ### 📦 `add-package`
 
 Creates a shared **package** for separating concerns within an experience. Most of the actual code in a Unisphere project lives in packages — not in runtimes — making it easier to reuse components, services, and logic across multiple entry points. These packages are usually not distributed externally but serve as internal modules consumed by runtimes.
@@ -161,8 +151,6 @@ npx nx g @unisphere/nx:add-package
   - **Internal** - Published to GitHub packages (`@kaltura/unisphere-<experience-name>-<package-name>`)
   - **Public** - Published to npm (`@unisphere/<experience-name>-<package-name>`)
 
----
-
 ## Best Practices
 
 🧠 Use descriptive names that reflect the purpose of the runtime or visual. For example, use `player-plugin` for a runtime that integrates into a video player, or `container` for visual that represent a container that can only have one instance, or `drawer` if it is a drawer runtime.
@@ -173,8 +161,6 @@ npx nx g @unisphere/nx:add-package
 
 🔍 Use the interactive CLI mode to generate all project elements. This ensures naming consistency, correct scaffolding, and alignment with Unisphere conventions.
 
----
-
 ## What’s Next?
 
 Stay tuned for full documentation on each concept and tool at

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

@@ -5,7 +5,7 @@ import { ConfigurationContext } from './configuration-provider';
 import { isConfigurationValid } from './definitions';
 import { Header } from './components/header';
 import { ConfigurationProvider } from './configuration-provider';
-import { UnisphereProvider } from '@unisphere/runtime-react';
+import { UnisphereProvider, UnisphereRuntimeVisual } from '@unisphere/runtime-react';
 import { UnisphereWorkspaceConfig } from '@unisphere/runtime';
 import { UnisphereWorkspaceType } from '@unisphere/runtime';
 import { <%= runtimeName__pascalCase %>Runtime } from '<%= coreAlias %>';

package/dist/generators/add-application/templates/interactive-playground/src/app/components/settings-form.tsx

@@ -92,11 +92,15 @@ export const SettingsForm: React.FC = () => {
           name={'settings'}
           fullWidth
           inputProps={{
-            ...register('settings', { required: true }),
+            ...register('settings', {
+              required: `To pass empty settings, type "{}". Otherwise: (1) manually type valid JSON. (2) `,
+            }),
           }}
           label={'Unisphere Settings'}
-          helperText={`Easily copy settings from Unisphere by entering a workable host in NVQ2 and then do: Unisphere cmd+k > Manage Workspace Runtimes > show ... (actions) of desired runtime > copy settings`}
-          error={!!errors?.settings}
+          helperText={`${
+            errors?.settings?.message || ''
+          }Easily copy settings from Unisphere by entering a workable host in NVQ2 and then do: Unisphere cmd+k > Manage Workspace Runtimes > show ... (actions) of desired runtime > copy settings`}
+          error={!!errors?.settings?.message}
         />
       </FormCard>
     </Stack>

package/package.json

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