@unisphere/nx 2.2.2 → 3.2.3

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

@@ -1,123 +0,0 @@
-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 %> Dev
-          </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/local-dev-playground/src/app/components/settings-buttons.tsx

@@ -1,57 +0,0 @@
-import React, { useContext, PropsWithChildren } 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<PropsWithChildren> = ({ 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/local-dev-playground/src/app/components/settings-form.tsx

@@ -1,108 +0,0 @@
-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: `To pass empty settings, type "{}". Otherwise: (1) manually type valid JSON. (2) `,
-            }),
-          }}
-          label={'Unisphere 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/dist/generators/add-application/templates/local-dev-playground/src/app/components/settings.tsx

@@ -1,74 +0,0 @@
-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/local-dev-playground/src/app/configuration-provider.tsx

@@ -1,163 +0,0 @@
-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/local-dev-playground/src/app/definitions.ts

@@ -1,25 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-export const inProduction = process.env.NODE_ENV === 'production';
-
-// todo update the configuration and default values
-export interface Configuration {
-  _schemaVersion: string;
-  unisphereServerUrl: string;
-  language: string;
-  theme: 'light' | 'dark';
-  settings: string;
-}
-
-export const getDefaultConfiguration = (): Configuration => ({
-  unisphereServerUrl: 'https://unisphere.nvq2.ovp.kaltura.com/v1',
-  language: 'en',
-  _schemaVersion: '1',
-  theme: 'light',
-  settings: '',
-});
-
-// todo set here the logic needed to validate configuration
-export const isConfigurationValid = (config: any): config is Configuration => {
-  return config?.unisphereServerUrl && config?.settings;
-};

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

@@ -1,31 +0,0 @@
-/**
- * Simple object check.
- * @param item
- * @returns {boolean}
- */
-export function isObject(item: any) {
-  return item && typeof item === 'object' && !Array.isArray(item);
-}
-
-/**
- * Deep merge two objects.
- * @param target
- * @param ...sources
- */
-export function mergeDeep(target: any, ...sources: any[]): any {
-  if (!sources.length) return target;
-  const source = sources.shift();
-
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        mergeDeep(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
-  }
-
-  return mergeDeep(target, ...sources);
-}

package/dist/generators/add-application/templates/local-dev-playground/src/index.html

@@ -1,17 +0,0 @@
-<!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/local-dev-playground/src/main.tsx

@@ -1,13 +0,0 @@
-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/local-dev-playground/tsconfig.app.json

@@ -1,24 +0,0 @@
-{
-  "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/local-dev-playground/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "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/local-dev-playground/tsconfig.spec.json

@@ -1,25 +0,0 @@
-{
-  "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"
-  ]
-}