@fluxo-dev/shell 0.0.8 → 0.0.12

package/src/lib/pages/settings/ui/ui.tsx

@@ -1,149 +0,0 @@
-import {DataCard} from "@fluxo-dev/ui-components";
-import {
-  Alert,
-  Box,
-  Button,
-  ColorInput,
-  ColorSwatch,
-  Divider,
-  FileButton,
-  Group,
-  NumberInput,
-  Stack,
-  Text, useMantineTheme
-} from "@mantine/core";
-import AppBar from "../../../layouts/main/app-bar";
-import {IconDeviceFloppy, IconInfoSquare, IconUpload} from '@tabler/icons-react';
-import {useEffect, useState} from "react";
-import {IFluxoRootState, useAppSelector} from "@fluxo-dev/state";
-import {showNotification} from "@mantine/notifications";
-import {FluxoClientSys} from "@fluxo-dev/api-client-base";
-
-export function Ui() {
-
-  const {configuration} = useAppSelector((state: IFluxoRootState) => state.layout);
-  const theme = useMantineTheme();
-
-  const [newLogo, setNewLogo] = useState<File | null>(null);
-  const [newLogoBase64, setNewLogoBase64] = useState<string | undefined>(configuration.logo);
-  const [newLogoHeight, setNewLogoHeight] = useState<number>(configuration.logoHeight);
-  const [newBrandColors, setNewBrandColors] = useState(configuration.colors);
-
-  const swatches = Object.keys(theme.colors).map((color) => (
-    <ColorSwatch
-      key={color}
-      color={theme.colors[color][6]}
-      onClick={() => {
-        setNewBrandColors(theme.colors[color])
-      }}
-    />
-  ));
-
-  const saveClientUIConfiguration = () => {
-    if(newLogoBase64 && newLogoHeight && newLogoHeight > 0 && newBrandColors && newBrandColors.length === 10) {
-
-      FluxoClientSys.Instance.configuration.updateClientUi({
-        colors: newBrandColors,
-        logo: newLogoBase64,
-        logoHeight: newLogoHeight
-      })
-        .then((res) => {
-          showNotification({
-            title: 'Salvataggio completato',
-            message: 'La configurazione è stata salvata correttamente.',
-            color: 'green',
-          })
-        })
-        .catch((err) => {
-          showNotification({
-            title: 'Errore',
-            message: err.message,
-            color: 'red',
-          })
-        })
-
-    } else {
-      showNotification({
-        title: 'Errore',
-        message: 'Compilare tutti i campi richiesti',
-        color: 'red',
-      })
-    }
-  }
-
-  const toBase64 = (file: File) => new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result?.toString() ?? '');
-    reader.onerror = error => reject(error);
-  });
-
-  const elaborateColorsArray = (colors: any, position: number, value: string) => {
-    const tmpColors = [...colors];
-    tmpColors[position] = value;
-    return tmpColors;
-  }
-
-  useEffect(() => {
-    if(newLogo) {
-      toBase64(newLogo)
-        .then((res) => {
-          setNewLogoBase64(res);
-        })
-    }
-  }, [newLogo])
-
-  return (
-    <Stack align={'stretch'} >
-
-      <div>
-        <DataCard title={'Anteprima'}>
-          <Stack>
-            <Box style={{border: '0px solid #888'}} p={0}>
-              <AppBar previewMode={{logo: newLogoBase64, logoHeight: newLogoHeight, headerColor: newBrandColors[6]}} />
-            </Box>
-          </Stack>
-        </DataCard>
-      </div>
-
-      <div>
-        <DataCard title={'Logo'} actions={[{icon: <IconDeviceFloppy />, onClick: () => console.log}]}>
-          <Stack align={'end'}>
-            <FileButton onChange={setNewLogo} accept="image/png,image/jpeg">
-              {(props) => <Button w={'100%'} leftSection={<IconUpload />} {...props}>Carica nuovo logo</Button>}
-            </FileButton>
-            <NumberInput max={50} min={10} w={'100%'} label={'Altezza del logo'} defaultValue={newLogoHeight} onChange={(v) => setNewLogoHeight(v !== '' ? +v! : 10)} />
-            <Divider color={'#e9ecef'} w={'100%'} />
-            <Button onClick={() => saveClientUIConfiguration()} leftSection={<IconDeviceFloppy />}>Salva</Button>
-          </Stack>
-        </DataCard>
-      </div>
-
-      <div>
-        <DataCard title={'Colori del brand'}>
-          <Stack align={'end'}>
-            <Alert w={'100%'} icon={<IconInfoSquare size={18} />} title="Informazioni">
-              Nota che tutti i colori dovrebbero sempre avere 10 sfumature. <a href={'https://smart-swatch.netlify.app/'} target={'_blank'}>Clicca qui</a> per generare la tua palette personalizzata.
-            </Alert>
-            <Text w={'100%'}>Preset</Text>
-            <Group w={'100%'} justify="left" gap="xs">
-              {swatches}
-            </Group>
-            <ColorInput w={'100%'} placeholder="Colore 1" label="Colore 1" value={newBrandColors[0]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 0, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 2" label="Colore 2" format={'hex'} value={newBrandColors[1]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 1, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 3" label="Colore 3" format={'hex'} value={newBrandColors[2]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 2, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 4" label="Colore 4" format={'hex'} value={newBrandColors[3]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 3, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 5" label="Colore 5" format={'hex'} value={newBrandColors[4]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 4, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 6" label="Colore 6" format={'hex'} value={newBrandColors[5]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 5, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 7" label="Colore 7" format={'hex'} value={newBrandColors[6]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 6, v)])} description={'Primario, headerbar'} />
-            <ColorInput w={'100%'} placeholder="Colore 8" label="Colore 8" format={'hex'} value={newBrandColors[7]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 7, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 9" label="Colore 9" format={'hex'} value={newBrandColors[8]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 8, v)])} />
-            <ColorInput w={'100%'} placeholder="Colore 10" label="Colore 10" format={'hex'} value={newBrandColors[9]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 9, v)])} />
-            <Divider color={'#e9ecef'} w={'100%'} />
-            <Button onClick={() => saveClientUIConfiguration()} leftSection={<IconDeviceFloppy />}>Salva</Button>
-          </Stack>
-        </DataCard>
-      </div>
-    </Stack>
-  )
-}

package/src/lib/services/app-jit-manager.ts

@@ -1,92 +0,0 @@
-import {AppJit} from "../models/app-jit";
-import {AppState, AppType, FluxoFrontendAppConfiguration} from "@fluxo-dev/api-client-base";
-
-export class AppJitManager {
-
-  public loadAppConfigurations(): AppJit[] {
-    const apps = localStorage.getItem('fluxo-jit-apps');
-
-    if (apps) {
-      const parsedApps: AppJit[] = JSON.parse(apps);
-      return parsedApps;
-    }
-
-    return [];
-  }
-
-  public refreshApp(app: AppJit): Promise<boolean> {
-    return fetch(`${app.developmentUrl}/fluxo-fe-app-configuration.json`)
-      .then((response) => {
-        return response.json()
-          .then((json) => {
-
-            this.removeAppConfiguration(json.scope, json.name);
-            this.addAppConfiguration(json, app.developmentUrl, app.developmentRoute);
-
-            return true;
-          });
-      })
-      .catch((error) => {
-
-        return false;
-      });
-  }
-
-  public checkIfAppExists(app: AppJit): boolean {
-    const apps = this.loadAppConfigurations();
-    return !!apps.find(x => x.scope === app.scope);
-  }
-
-  public addAppConfiguration(app: FluxoFrontendAppConfiguration, devUrl: string, devRoute: string) {
-    const apps = this.loadAppConfigurations();
-
-    if(apps.find(x => x.scope === app.scope && x.name === app.name)) {
-      return;
-    }
-
-    const a: AppJit = {
-      name: app?.name || '',
-      type: AppType.Frontend,
-      version: app?.version || '',
-      author: app?.author || '',
-      scope: app?.scope || '',
-      state: AppState.Active,
-      description: app?.description || '',
-      developmentRoute: devRoute,
-      installationDate: new Date(),
-      installationDirectory: '',
-      developmentUrl: devUrl,
-      id: 0,
-      menu: app?.menu || [],
-      isEmbedded: false
-    }
-
-    apps.push(a);
-    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
-  }
-
-  public setAppEnabled(appScope: string, appName: string, enabled: boolean) {
-    const apps = this.loadAppConfigurations();
-    const app = apps.find(x => x.scope === appScope && x.name === appName);
-
-    if(!app) {
-      return;
-    }
-
-    app.state = enabled ? AppState.Active : AppState.Inactive;
-    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
-  }
-
-  public removeAppConfiguration(appScope: string, appName: string) {
-    const apps = this.loadAppConfigurations();
-    const app = apps.find(x => x.scope === appScope && x.name === appName);
-
-    if(!app) {
-      return;
-    }
-
-    const index = apps.indexOf(app);
-    apps.splice(index, 1);
-    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
-  }
-}

package/src/lib/services/app-menu.service.ts

@@ -1,35 +0,0 @@
-import {AppMenuItem} from "@fluxo-dev/api-client-base";
-import {SpotlightActionData, SpotlightActionGroupData} from "@mantine/spotlight";
-
-export class AppMenuService {
-
-  async getSpotlightMenu(menu: AppMenuItem[], parentTitle?: string): Promise<(SpotlightActionGroupData)[]> {
-
-    const result: SpotlightActionGroupData[] = [];
-
-    const currentGroup: SpotlightActionGroupData = {
-      group: parentTitle ?? 'Generale',
-      actions: []
-    };
-
-    menu.forEach((m) => {
-      if(m.hasIndex) {
-        currentGroup.actions.push({
-          label: m.label,
-          description: parentTitle ? `${parentTitle} -> ${m.label}` : m.label,
-          id: '/' + m.routerLink
-        })
-      }
-
-      if(m.children && m.children.length > 0) {
-        this.getSpotlightMenu(m.children, m.label).then((res) => {
-          const aaa = res;
-          result.push(...aaa);
-        })
-      }
-    })
-
-    result.push(currentGroup);
-    return Promise.resolve(result)
-  }
-}

package/src/lib/utils/icon-factory.tsx

@@ -1,25 +0,0 @@
-import {IconDashboard, IconPlus} from '@tabler/icons-react';
-
-export class IconFactory {
-
-  static icons = [
-    {value: 'dashboard', element: <IconDashboard size={18} />},
-    {value: 'plus', element: <IconPlus size={18} />},
-  ]
-
-  static getIconIdentifiers(): string[] {
-    return IconFactory.icons.map((e) => e.value);
-  }
-
-  static getIcon(iconName: string): JSX.Element {
-
-    let iconFound = <IconDashboard size={18} />;
-
-    IconFactory.icons.forEach((icon) => {
-      if(icon.value === iconName)
-        iconFound = icon.element;
-    })
-
-    return iconFound;
-  }
-}

package/src/lib/utils/security/only-not-logged-route.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {Navigate} from "react-router-dom";
-import {useSelector} from "react-redux";
-import {IFluxoRootState} from "@fluxo-dev/state";
-
-function OnlyNotLoggedRoute({children, ...props}: any) {
-
-  const { loggedIn } = useSelector((state: IFluxoRootState) => state.user)
-
-    if (loggedIn) {
-        return <Navigate to="/" replace />;
-    }
-
-    return children;
-}
-
-export default OnlyNotLoggedRoute;

package/src/lib/utils/security/protected-route.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import {matchPath, Navigate, useLocation} from "react-router-dom";
-import {useSelector} from "react-redux";
-import {IFluxoRootState} from "@fluxo-dev/state";
-import {FluxoClientSys, RouteRuleWithPermissions} from "@fluxo-dev/api-client-base";
-import {AccessDenied} from "@fluxo-dev/ui-components";
-
-function ProtectedRoute({children, ...props}: any) {
-  const { loggedIn } = useSelector((state: IFluxoRootState) => state.user)
-  const { routeRules } = useSelector((state: IFluxoRootState) => state.routeRules);
-
-  const navigation = useLocation();
-
-  if (!loggedIn) {
-    return <Navigate to="/auth/login" replace />;
-  }
-
-  let accessDenied = false;
-  let requiredPermissions: string[] = [];
-
-  (routeRules as RouteRuleWithPermissions[]).forEach((routeRule) => {
-    const match = matchPath(`${routeRule.route}`, navigation.pathname);
-
-    if (match) {
-      if (routeRule.permissions.length === 0) {
-        return;
-      } else {
-
-        const res = FluxoClientSys.Instance.security.user.currentUserHasPermissions(routeRule.permissions);
-
-        if(!res) {
-          accessDenied = true;
-          requiredPermissions = routeRule.permissions;
-          return;
-        }
-      }
-    }
-
-  });
-
-  if(accessDenied)
-    return <AccessDenied requiredPermissions={requiredPermissions} />;
-
-  return children;
-}
-
-export default ProtectedRoute;

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../../tsconfig.base.json"
-}

package/tsconfig.lib.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/tsconfig.spec.json

@@ -1,20 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "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"
-  ]
-}