@unisphere/nx 1.0.1

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

@@ -0,0 +1,122 @@
+import { useContext, useState } from 'react';
+import { HostThemeProvider } from '@kaltura/ds-react-theme';
+import { Box } from '@mui/material';
+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 { UnisphereWorkspaceConfig } from '@unisphere/runtime';
+import { UnisphereWorkspaceType } from '@unisphere/runtime';
+import { <%= runtimeName__pascalCase %>Runtime } from '@kaltura/unisphere-<%= widgetName__lowerDashCase %>-core';
+
+export function AppContent() {
+  const { configuration } = useContext(ConfigurationContext);
+
+  const [workspace, setWorkspace] = useState<UnisphereWorkspaceType | null>(
+    null
+  );
+  const [runtime, setRuntime] = useState<<%= runtimeName__pascalCase %>Runtime | null>(null);
+
+  const [initialConfiguration] = useState<UnisphereWorkspaceConfig | null>(
+    () => {
+      /*
+      Developer Note:
+      • You don’t need to touch the code to enable runtime configuration.
+
+      • 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 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.
+      */
+
+      try {
+        if (!isConfigurationValid(configuration)) {
+          return null;
+        }
+
+        return {
+          appId: '<%= runtimeName__lowerDashCase %>-expo',
+          appVersion: '1.0.0',
+          serverUrl: configuration.unisphereServerUrl,
+          ui: {
+            theme: configuration.theme,
+            language: configuration.language,
+          },
+          runtimes: [
+            {
+              widgetName: 'unisphere.widget.<%= widgetName__lowerDashCase %>',
+              runtimeName: '<%= runtimeName__lowerDashCase %>',
+              settings: JSON.parse(configuration.settings),
+              visuals: [],
+            },
+          ],
+        };
+      } catch (e) {
+        console.error('Failed to parse settings', e);
+        return null;
+      }
+    }
+  );
+
+  const onWorkspaceLoaded = (workspace: UnisphereWorkspaceType) => {
+    setWorkspace(workspace);
+    const runtime = workspace.getRuntime<<%= runtimeName__pascalCase %>Runtime>(
+      'unisphere.widget.<%= widgetName__lowerDashCase %>',
+      '<%= runtimeName__lowerDashCase %>'
+    );
+    setRuntime(runtime);
+  };
+
+  return (
+    <Box
+      sx={{
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        padding: '12px 24px',
+      }}
+    >
+      <HostThemeProvider
+        overrides={{
+          mode: configuration.theme,
+        }}
+      >
+        <Box sx={{ height: '100vh', width: '100vw', pt: '64px' }}>
+          <Header />
+          {initialConfiguration && (
+            <UnisphereProvider
+              onWorkspaceLoaded={onWorkspaceLoaded}
+              initialConfiguration={initialConfiguration}
+            >
+              {/* <UnisphereRuntimeVisual
+                widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
+                runtimeName="<%= runtimeName__lowerDashCase %>"
+                visualType="-- provide here the visual name --"
+                visualSettings={{
+                  -- provide here the visual settings --
+                }}
+              /> */}
+            </UnisphereProvider>
+          )}
+        </Box>
+      </HostThemeProvider>
+    </Box>
+  );
+}
+
+const App = () => {
+  return (
+    <ConfigurationProvider configurationKey="unisphere-<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-expo">
+      <AppContent />
+    </ConfigurationProvider>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,123 @@
+import React, { useContext, useState } from 'react';
+import {
+  AppBar,
+  Box,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import { ConfigurationContext } from '../configuration-provider';
+import { isConfigurationValid } from '../definitions';
+import {
+  DeveloperBoard as DeveloperBoardIcon,
+  Settings as SettingsIcon,
+  Storage as StorageIcon,
+} from '@mui/icons-material';
+import { Settings } from './settings';
+
+export const Header: React.FC = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const { configuration: Configuration, createSharedUrl } =
+    useContext(ConfigurationContext);
+
+  const open = Boolean(anchorEl);
+  const replaceBaseUrlInNewTab = () => {
+    const baseUrl = prompt('please provide the new base url');
+    if (!baseUrl) {
+      return;
+    }
+
+    const filteredUrl = baseUrl.replace(/\/configuration$/, '');
+    window.open(
+      createSharedUrl({
+        baseUrl: `${filteredUrl}`,
+      })
+    );
+    return;
+  };
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const [settingsOpen, setSettingsOpen] = useState(() => {
+    return !isConfigurationValid(Configuration);
+  });
+
+  const handleSettingsClosed = () => {
+    setSettingsOpen(false);
+  };
+
+  return (
+    <AppBar position="fixed" sx={{ zIndex: 1000 }}>
+      <Toolbar style={{ justifyContent: 'space-between' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
+            <%= widgetName__pascalCase %> - <%= runtimeName__pascalCase %> Expo
+          </Typography>
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Tooltip title="Menu">
+            <IconButton onClick={handleMenu} color="inherit" aria-label="menu">
+              <SettingsIcon />
+            </IconButton>
+          </Tooltip>
+
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorEl}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            open={open}
+            onClose={handleClose}
+          >
+            <MenuItem
+              onClick={() => {
+                handleClose();
+                setSettingsOpen(true);
+              }}
+            >
+              <ListItemIcon>
+                <StorageIcon fontSize="small" />
+              </ListItemIcon>
+              <Typography variant="inherit">Configuration</Typography>
+            </MenuItem>
+            <MenuItem onClick={replaceBaseUrlInNewTab}>
+              <ListItemIcon>
+                <DeveloperBoardIcon fontSize="small" />
+              </ListItemIcon>
+              <Typography variant="inherit">Change Base URL</Typography>
+            </MenuItem>
+          </Menu>
+        </Box>
+      </Toolbar>
+      {settingsOpen && <Settings onClose={handleSettingsClosed} />}
+    </AppBar>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import { Box, Button } from '@mui/material';
+import {
+  ConfigurationContext,
+  ConfigurationTypes,
+} from '../configuration-provider';
+
+export interface SettingsButtonsProps {
+  onReset: () => void;
+  customSave?: React.ReactElement;
+}
+
+export const ButtonsContainer: React.FC<{
+  children?: React.ReactChild;
+}> = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginTop: '20px',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export const SettingsButtons: React.FC<SettingsButtonsProps> = ({
+  customSave,
+  onReset,
+}) => {
+  const { ConfigurationType } = useContext(ConfigurationContext);
+
+  return (
+    <ButtonsContainer>
+      <>
+        {ConfigurationType === ConfigurationTypes.Localstorage && (
+          <Button
+            onClick={onReset}
+            variant="contained"
+            color="secondary"
+            style={{ marginRight: '8px' }}
+          >
+            Clear All
+          </Button>
+        )}
+        {customSave ? (
+          customSave
+        ) : (
+          <Button variant="contained" color="primary" type={'submit'}>
+            Save & Close
+          </Button>
+        )}
+      </>
+    </ButtonsContainer>
+  );
+};

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

@@ -0,0 +1,104 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import React, { MouseEvent } from 'react';
+import { MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
+import { Configuration } from '../definitions';
+import { UseFormReturn } from 'react-hook-form/dist/types';
+
+const FormCard: React.FC<React.PropsWithChildren<{ title: string }>> = ({
+  title,
+  children,
+}) => {
+  return (
+    <Stack
+      sx={{
+        padding: '8px',
+        border: '1px solid grey',
+        borderRadius: '8px',
+        gap: '16px',
+      }}
+    >
+      <Typography variant="body1" sx={{ fontWeight: 700 }}>
+        {title}
+      </Typography>
+      {children}
+    </Stack>
+  );
+};
+
+const FormItem: React.FC<React.PropsWithChildren<{ title: string }>> = ({
+  title,
+  children,
+}) => {
+  return (
+    <Stack
+      sx={{
+        padding: '4px',
+        gap: '8px',
+      }}
+    >
+      <Typography variant="body1">{title}</Typography>
+      {children}
+    </Stack>
+  );
+};
+
+export const SettingsForm: React.FC = () => {
+  const context = useFormContext<Configuration>();
+
+  const {
+    register,
+    reset,
+    formState: { errors },
+    control,
+    watch,
+  } = context;
+
+  return (
+    <Stack gap="16px">
+      <FormCard title="Host Settings">
+        <TextField
+          name={'unisphereServerUrl'}
+          fullWidth
+          inputProps={{
+            ...register('unisphereServerUrl', { required: true }),
+          }}
+          label={'Service URL'}
+          helperText={errors?.unisphereServerUrl ? 'required' : ''}
+          error={!!errors?.unisphereServerUrl}
+        />
+
+        <TextField
+          name={'language'}
+          fullWidth
+          inputProps={{ ...register('language') }}
+          label={'Language code'}
+        />
+
+        <FormItem title="Theme">
+          <Controller
+            control={control}
+            name="theme"
+            render={({ field }) => (
+              <Select {...field}>
+                <MenuItem value="light">Light</MenuItem>
+                <MenuItem value="dark">Dark</MenuItem>
+              </Select>
+            )}
+          />
+        </FormItem>
+      </FormCard>
+      <FormCard title="Unisphere Settings">
+        <TextField
+          name={'settings'}
+          fullWidth
+          inputProps={{
+            ...register('settings', { required: true }),
+          }}
+          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}
+        />
+      </FormCard>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react';
+import { Dialog, DialogActions, DialogContent } from '@mui/material';
+import { FormProvider, useForm } from 'react-hook-form';
+import { ConfigurationContext } from '../configuration-provider';
+import { getDefaultConfiguration, Configuration } from '../definitions';
+import { SettingsButtons } from './settings-buttons';
+import { SettingsForm } from './settings-form';
+
+export const Settings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  const {
+    clearConfiguration,
+    configuration: Configuration,
+    updateConfiguration,
+  } = useContext(ConfigurationContext);
+
+  const formMethods = useForm<Configuration>({
+    defaultValues: Configuration,
+  });
+
+  const onSubmit = (data: any) => {
+    const updatedData = {
+      ...data,
+    };
+    updateConfiguration(updatedData);
+
+    onClose();
+
+    window.location.reload();
+  };
+
+  const handleClose = (event: any, reason: string) => {
+    if (reason === 'backdropClick') {
+      return;
+    }
+    onClose();
+  };
+
+  const handleReset = () => {
+    // eslint-disable-next-line  no-restricted-globals
+    const accepted = confirm('Do you want to clear all values?');
+    if (!accepted) {
+      return;
+    }
+    clearConfiguration();
+    formMethods.reset(getDefaultConfiguration());
+  };
+  return (
+    <div>
+      <Dialog open={true} onClose={handleClose} disableEscapeKeyDown={true}>
+        <FormProvider {...formMethods}>
+          <form
+            noValidate
+            autoComplete="off"
+            onSubmit={formMethods.handleSubmit(onSubmit)}
+          >
+            <DialogContent
+              sx={{
+                display: 'flex',
+                width: '500px',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              <SettingsForm />
+              <DialogActions sx={{ padding: 0 }}>
+                <SettingsButtons onReset={handleReset} />
+              </DialogActions>
+            </DialogContent>
+          </form>
+        </FormProvider>
+      </Dialog>
+    </div>
+  );
+};

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

@@ -0,0 +1,163 @@
+import React, { useMemo, useState } from 'react';
+import {
+  getDefaultConfiguration,
+  isConfigurationValid,
+  Configuration,
+} from './definitions';
+import { mergeDeep } from './utils/merge-deep';
+
+export const ConfigurationContext = React.createContext<{
+  configuration: Configuration;
+  sharedUrl: string;
+  clearConfiguration: () => void;
+  updateConfiguration: (configuration: Configuration) => void;
+  createSharedUrl: (options?: {
+    baseUrl?: string;
+    customConfiguration?: Configuration;
+  }) => string;
+  ConfigurationType: ConfigurationTypes;
+  refreshConfiguration: () => void;
+}>(null as any);
+
+export const getConfigurationFromQueryParams = (
+  configurationKey: string
+): Configuration | null => {
+  const search = window.location.search;
+  const params = new URLSearchParams(search);
+
+  if (!params || !configurationKey || !params.get(configurationKey))
+    return null;
+
+  const configuration = window.atob(params.get(configurationKey) || '');
+  try {
+    return JSON.parse(configuration);
+  } catch (e: any) {
+    console.warn(`Failed to parse login query string ${e.message} ${e.stack}`);
+    return null;
+  }
+};
+
+export enum ConfigurationTypes {
+  None,
+  Querystring,
+  Localstorage,
+}
+
+const { hostname, port, protocol } = window.location;
+export const hosterAppUrl = `${protocol}//${hostname}${port ? `:${port}` : ''}`;
+
+const getConfigurationFromLocalStorage = (
+  configurationKey: string
+): Configuration | null => {
+  const data = localStorage.getItem(configurationKey);
+  return data ? JSON.parse(data) : null;
+};
+
+const loginParamsToBase64 = (configuration: Configuration | null): string => {
+  if (!configuration) {
+    return '';
+  }
+  try {
+    return window.btoa(JSON.stringify(configuration));
+  } catch (e) {
+    return '';
+  }
+};
+
+export const ConfigurationProvider: React.FC<
+  React.PropsWithChildren<{
+    configurationKey: string;
+  }>
+> = (props) => {
+  const { configurationKey } = props;
+  const [ConfigurationType] = useState<ConfigurationTypes>(() => {
+    return getConfigurationFromQueryParams(configurationKey)
+      ? ConfigurationTypes.Querystring
+      : ConfigurationTypes.Localstorage;
+  });
+  const [configuration, setConfiguration] = useState<Configuration | null>(
+    () => {
+      const configuration = mergeDeep(
+        {},
+        getDefaultConfiguration(),
+        ConfigurationType === ConfigurationTypes.Querystring
+          ? getConfigurationFromQueryParams(configurationKey)
+          : getConfigurationFromLocalStorage(configurationKey)
+      );
+
+      return configuration && isConfigurationValid(configuration)
+        ? configuration
+        : getDefaultConfiguration();
+    }
+  );
+
+  const providerValue = useMemo(() => {
+    const createSharedUrl = (options?: {
+      baseUrl?: string;
+      customConfiguration?: Configuration;
+    }) => {
+      const { baseUrl = '', customConfiguration } = options || {};
+
+      if (!options?.customConfiguration && !configuration) {
+        return '';
+      }
+
+      return `${
+        baseUrl || hosterAppUrl
+      }/configuration?${configurationKey}=${loginParamsToBase64(
+        customConfiguration || configuration
+      )}`;
+    };
+
+    const saveToLocalStorage = (params: Configuration) => {
+      if (ConfigurationType === ConfigurationTypes.Querystring) {
+        const sharedUrl = createSharedUrl({
+          customConfiguration: params,
+        });
+
+        if (sharedUrl) {
+          window.location.href = sharedUrl;
+        }
+
+        return;
+      }
+
+      localStorage.setItem(
+        configurationKey,
+        params ? JSON.stringify(params) : ''
+      );
+      setConfiguration(params || null);
+    };
+
+    const clearLocalStorage = () => {
+      localStorage.removeItem(configurationKey);
+      setConfiguration(null);
+    };
+
+    const refreshConfiguration = () => {
+      setConfiguration((prev) => {
+        if (!prev) {
+          return prev;
+        }
+        return {
+          ...prev,
+        };
+      });
+    };
+    return {
+      configuration: configuration || getDefaultConfiguration(),
+      ConfigurationType,
+      refreshConfiguration,
+      updateConfiguration: saveToLocalStorage,
+      clearConfiguration: clearLocalStorage,
+      createSharedUrl,
+      sharedUrl: createSharedUrl(),
+    };
+  }, [configuration]);
+
+  return (
+    <ConfigurationContext.Provider value={providerValue}>
+      {props.children}
+    </ConfigurationContext.Provider>
+  );
+};

package/dist/generators/add-application/templates/interactive-playground/src/app/definitions.d.ts

@@ -0,0 +1,11 @@
+export declare const inProduction: boolean;
+export interface Configuration {
+    _schemaVersion: string;
+    unisphereServerUrl: string;
+    language: string;
+    theme: 'light' | 'dark';
+    settings: string;
+}
+export declare const getDefaultConfiguration: () => Configuration;
+export declare const isConfigurationValid: (config: any) => config is Configuration;
+//# sourceMappingURL=definitions.d.ts.map

package/dist/generators/add-application/templates/interactive-playground/src/app/definitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../../../../../../src/generators/add-application/templates/interactive-playground/src/app/definitions.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,SAAwC,CAAC;AAGlE,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,uBAAuB,QAAO,aAMzC,CAAC;AAGH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,KAAG,MAAM,IAAI,aAE5D,CAAC"}

package/dist/generators/add-application/templates/interactive-playground/src/app/definitions.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isConfigurationValid = exports.getDefaultConfiguration = exports.inProduction = void 0;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+exports.inProduction = process.env.NODE_ENV === 'production';
+const getDefaultConfiguration = () => ({
+    unisphereServerUrl: 'https://unisphere.nvq2.ovp.kaltura.com/v1',
+    language: 'en',
+    _schemaVersion: '1',
+    theme: 'light',
+    settings: '',
+});
+exports.getDefaultConfiguration = getDefaultConfiguration;
+// todo set here the logic needed to validate configuration
+const isConfigurationValid = (config) => {
+    return config?.unisphereServerUrl && config?.settings;
+};
+exports.isConfigurationValid = isConfigurationValid;

package/dist/generators/add-application/templates/interactive-playground/src/app/utils/merge-deep.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isObject(item: any): any;
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export declare function mergeDeep(target: any, ...sources: any[]): any;
+//# sourceMappingURL=merge-deep.d.ts.map