@unisphere/nx 2.2.2 → 3.2.4

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

@@ -1,212 +0,0 @@
-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, UnisphereRuntimeVisual } from '@unisphere/runtime-react';
-import { UnisphereWorkspaceConfig } from '@unisphere/runtime';
-import { UnisphereWorkspaceType } from '@unisphere/runtime';
-import { <%= runtimeName__pascalCase %>Runtime } from '<%= typesAlias %>';
-
-
-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 Dev
-        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={{  }}
-/>`}
-      </pre>
-    </div>
-  );
-};
-
-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:
-      The Dev app lets you provide runtime configuration as a JSON object that matches the same schema used in your production or staging environments.
-
-      •	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 Dev 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 a JSON payload that conforms to your runtime’s schema.
-        2. Open the Dev 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 {
-        if (!isConfigurationValid(configuration)) {
-          return null;
-        }
-
-        return {
-          appId: '<%= runtimeName__lowerDashCase %>',
-          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}
-            >
-              <Hihi />
-
-              {/* <UnisphereRuntimeVisual
-                widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
-                runtimeName="<%= runtimeName__lowerDashCase %>"
-                visualType="-- provide here the visual name --"
-                visualSettings={{ }}
-              /> */}
-            </UnisphereProvider>
-          )}
-        </Box>
-      </HostThemeProvider>
-    </Box>
-  );
-}
-
-const App = () => {
-  return (
-    <ConfigurationProvider configurationKey="unisphere-<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-dev">
-      <AppContent />
-    </ConfigurationProvider>
-  );
-};
-
-export default App;

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>
-  );
-};