@fluxo-dev/shell 0.0.8

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# libs/shell/shell
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test libs/shell/shell` to execute the unit tests via [Jest](https://jestjs.io).

package/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'libs/shell/shell',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/libs/shell/shell',
+};

package/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@fluxo-dev/shell",
+  "version": "0.0.8"
+}

package/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "libs/shell/shell",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shell/shell/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/shell/shell/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/shell/shell",
+        "tsConfig": "libs/shell/shell/tsconfig.lib.json",
+        "project": "libs/shell/shell/package.json",
+        "entryFile": "libs/shell/shell/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/shell/shell/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/shell/shell/jest.config.ts"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export {FluxoShell, FluxoShellProps} from './lib/app';

package/src/lib/app.module.css

@@ -0,0 +1 @@
+/* Your styles goes here. */

package/src/lib/app.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+
+import App from './app';
+
+describe('App', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<App />);
+
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(<App />);
+
+    expect(getByText(/Welcome shell/gi)).toBeTruthy();
+  });
+});

package/src/lib/app.tsx

@@ -0,0 +1,374 @@
+import React, {useEffect, useState} from "react";
+import {Provider} from "react-redux";
+import {createBrowserRouter, RouteObject, RouterProvider} from "react-router-dom";
+import ErrorPage from "./components/error-page/404";
+import ProtectedRoute from "./utils/security/protected-route";
+
+import FluxoPluginLoader from "./pages/general/fluxo-plugin-loader";
+import OnlyNotLoggedRoute from "./utils/security/only-not-logged-route";
+import BlankLayout from "./layouts/blank/blank-layout";
+import AppLayout from "./layouts/main/app-layout";
+import LoginPage from "./pages/login/login-page";
+
+import {store} from "@fluxo-dev/state";
+import {MantineProvider} from "@mantine/core";
+import {Notifications} from "@mantine/notifications";
+import {MainRoutes} from "./components/routes/main-routes";
+import {
+  AppState,
+  EmbeddedModule,
+  FeatureList,
+  FluxoApp,
+  FluxoClientSys,
+  FluxoStateDispatcher
+} from "@fluxo-dev/api-client-base";
+import {WaitData} from "@fluxo-dev/ui-components";
+import ForgotPassword from "./pages/login/forgot-password";
+import ResetPassword from "./pages/login/reset-password";
+import AccountConfirmation from "./pages/login/account-confirmation";
+import {AppJitManager} from "./services/app-jit-manager";
+import {DatesProvider} from "@mantine/dates";
+import {reportsModule} from "@fluxo-fe/shell/reporting";
+import {workflowModule} from "@fluxo-fe/shell/workflow";
+import './app.module.css';
+import 'dayjs/locale/it';
+
+export interface FluxoShellProps {
+  pluginEndpoint: string,
+  appVersion: string,
+  dashboardComponent: React.ReactNode,
+  modules: EmbeddedModule[]
+}
+
+export function FluxoShell(props: FluxoShellProps) {
+
+
+  const [initialOperationsFinished, setInitialOperationsFinished] = useState<boolean>(false);
+  const [router, setRouter] = useState<any>();
+  const [brandColors, setBrandColors] = useState<any>(["#e9f4ff","#c2d8ef","#9bbae1","#749ad6","#4d7aca","#355db2","#29458a","#1d2e63","#101b3d","#030a18"]);
+
+  const generateRoutesFromEmbeddedModules = (): RouteObject[] => {
+    const embeddedModules: EmbeddedModule[] = [
+      ...props.modules,
+      reportsModule,
+      workflowModule
+    ];
+
+    const rObjs: RouteObject[] = [];
+
+    embeddedModules.forEach((eModule) => {
+      rObjs.push({
+        path: `/${eModule.scope}/${eModule.name}/*`,
+        children: eModule.getRouteObject()
+      });
+    })
+
+    return rObjs;
+  }
+
+  const generateRoutesFromJitApps = (): RouteObject[] => {
+    const jitAppManager = new AppJitManager();
+
+    const jitApps = jitAppManager.loadAppConfigurations();
+
+    const rObjs: RouteObject[] = [];
+
+    jitApps.filter(a => a.state == AppState.Active).map((app) => {
+      rObjs.push({
+        path: `/${app.developmentRoute}`,
+        children: [
+          {
+            path: `*`,
+            element: <FluxoPluginLoader module={`./${app.scope}`} scope={app.name} url={`${app.developmentUrl}/remoteEntry.js`} />
+          }
+        ]
+      });
+    });
+
+    const jitAppsFeatures: FeatureList = {
+      features: [],
+      modules: []
+    };
+
+    jitApps.filter(a => a.state == AppState.Active).map((app) => {
+
+      jitAppsFeatures.modules.push(
+        {key: app.scope, name: app.name, description: app.description}
+      );
+
+      app.menu.map((f) => {
+
+        f.items?.map((ff) => {
+          jitAppsFeatures.features.push({
+            name: ff.name,
+            description: ff.name,
+            routerLink: `${app.developmentRoute}/${ff.route}`,
+            identifier: app.scope + '.' + f.name + '.' + ff.name,
+            groupName: f.name,
+            groupKey: f.name,
+            moduleKey: app.scope,
+            moduleName: app.name
+          });
+        });
+
+      });
+    });
+
+    FluxoStateDispatcher.dispatchSetJitAppsFeatures(jitAppsFeatures);
+
+    return rObjs;
+  }
+
+  const generateRoutesFromDeployedApps = (apps: FluxoApp[]): RouteObject[] => {
+
+    const rObjs: RouteObject[] = [];
+
+    apps.map((app) => {
+      rObjs.push({
+        path: `/${app.scope}/${app.name}`,
+        children: [
+          {
+            path: `*`,
+            element: <FluxoPluginLoader module={`./${app.scope}`} scope={app.name} url={`${props.pluginEndpoint}/${app.scope}/${app.name}/remoteEntry.js`} />
+          }
+        ]
+      });
+    });
+
+    return rObjs;
+  }
+
+  const generateAuthRoutes = (): RouteObject => {
+    return {
+      path: "/auth",
+      element: <OnlyNotLoggedRoute><BlankLayout/></OnlyNotLoggedRoute>,
+      children: [
+        {
+          path: "login",
+          element: <LoginPage/>
+        },
+        {
+          path: "forgot-password",
+          element: <ForgotPassword/>
+        },
+        {
+          path: "reset-password",
+          element: <ResetPassword/>
+        },
+        {
+          path: "account-confirmation",
+          element: <AccountConfirmation/>
+        }
+      ]
+    };
+  }
+
+  useEffect(() => {
+    FluxoClientSys.Instance.configuration.getInitialConfiguration()
+      .then((res) => {
+
+        FluxoStateDispatcher.dispatchSetConfiguration(res.ui);
+        FluxoStateDispatcher.dispatchSetAppMenu(res.menu);
+        FluxoStateDispatcher.dispatchSetSysFeatures(res.features);
+        FluxoStateDispatcher.dispatchSetUserPermissions(res.permissions.map(a => a.fullIdentifier))
+        FluxoStateDispatcher.dispatchSetRouteRules(res.routeRules);
+
+        const rObjs: RouteObject[] = [
+          generateAuthRoutes(),
+          {
+            element: <ProtectedRoute><AppLayout appVersion={props.appVersion} /></ProtectedRoute>,
+            errorElement: <ErrorPage />,
+            children: [
+              {
+                index: true,
+                element: props.dashboardComponent
+              },
+              {
+                path: '/*',
+                element: <MainRoutes pluginEndpoint={props.pluginEndpoint} modules={props.modules} />,
+              },
+              ...generateRoutesFromEmbeddedModules(),
+              ...generateRoutesFromDeployedApps(res.apps),
+              ...generateRoutesFromJitApps(),
+            ],
+          },
+          {
+            path: '*',
+            element: <ErrorPage />,
+          }
+        ];
+
+        const router1 = createBrowserRouter(rObjs, { basename: '/' });
+
+        setRouter(router1);
+        setBrandColors(res.ui.colors);
+      })
+      .finally(() => {
+        setInitialOperationsFinished(true);
+      });
+  }, [])
+
+  return (
+      <MantineProvider theme={{
+        defaultRadius: 0,
+        components: {
+          ActionIcon: {
+            defaultProps: {
+              variant: 'transparent'
+            }
+          },
+          Text: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          Button: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          NumberInput: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          DateInput: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          Select: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          Switch: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            },
+          },
+          DatePickerInput: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt',
+              popoverProps: {withinPortal: true}
+            },
+          },
+          TextInput: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            }
+          },
+          Textarea: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            }
+          },
+          MultiSelect: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            }
+          },
+          Pill: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            }
+          },
+          PillsInput: {
+            defaultProps: {
+              size: 'xs',
+              fontSize: '10.5pt'
+            }
+          },
+          Modal: {
+            defaultProps: {
+              shadow: '0 0 200px rgba(16,16,16,.4)',
+              styles: {
+                close: {color: 'black'},
+                header: {
+                  background: '#fff',
+                  padding: 8,
+                  marginBottom: 16,
+                  color: 'black',
+                  boxShadow: 'rgba(33, 33, 33, 0.1) 2px 1px 1px'
+                }
+              },
+              overlayProps: {
+                color: 'rgba(153,153,153)',
+                opacity: 0.44,
+                blur: 0,
+              }
+            }
+          },
+          Pagination: {
+            styles: {
+              root: {
+                borderRadius: 0,
+              }
+            }
+          },
+          Loader: {
+            defaultProps: {
+              type: 'bars'
+            }
+          }
+        },
+        colors: {
+          darkGreen: ['#dcf6ff','#b3e8fc','#86ddf8','#5ad5f4','#37d1f2','#26bfd8','#1799a8','#077179','#004049','#00151a'],
+          darkBlue: [
+            '#e9f4ff',
+            '#c2d8ef',
+            '#9bbae1',
+            '#749ad6',
+            '#4d7aca',
+            '#355db2',
+            '#29458a',
+            '#1d2e63',
+            '#101b3d',
+            '#030a18',
+          ],
+          //brand: ['#000','#111','#222','#333','#444','#555','#666','#777'],
+          // DIA brand: ['#dcf6ff','#b3e8fc','#86ddf8','#5ad5f4','#37d1f2','#26bfd8','#1799a8','#077179','#004049','#00151a'],
+          brand: brandColors,
+        },
+        fontFamily: 'Roboto', primaryColor: 'brand'
+      }}>
+        <React.Fragment>
+          {initialOperationsFinished && (((router && brandColors))) ?
+            <React.Fragment>
+              <DatesProvider settings={{ locale: 'it', firstDayOfWeek: 1, weekendDays: [0,6] }}>
+                <Provider store={store}>
+                  <Notifications />
+                  <AppInner router={router} />
+                </Provider>
+              </DatesProvider>
+            </React.Fragment> : <WaitData />
+          }
+        </React.Fragment>
+      </MantineProvider>
+  );
+}
+
+export default FluxoShell;
+
+export interface AppInnerProps {
+  router: any;
+}
+export function AppInner(props: AppInnerProps) {
+
+  return (
+    <React.Suspense fallback={<>...</>}>
+      <RouterProvider router={props.router} />
+    </React.Suspense>
+  )
+}

package/src/lib/components/error-page/404.tsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+    //const error: any = useRouteError();
+    //console.error(error);
+
+    return (
+        <div id="error-page">
+            <h1>Oops!</h1>
+            <p>Sorry, an unexpected error has occurred.</p>
+          {/*<p>
+                <i>{error.statusText || error.message}</i>
+            </p>*/}
+        </div>
+    );
+}

package/src/lib/components/routes/main-routes.tsx

@@ -0,0 +1,26 @@
+import { FlxRoutes } from "@fluxo-dev/ui-components";
+import { Route } from "react-router-dom";
+import ChangePassword from "../../pages/login/change-password";
+import { Settings } from "../../pages/settings/settings";
+import React, {lazy, Suspense} from "react";
+import {EmbeddedModule, UserService} from "@fluxo-dev/api-client-base";
+
+export interface MainRoutesProps {
+  pluginEndpoint: string;
+  modules: EmbeddedModule[];
+}
+export function MainRoutes(props: MainRoutesProps) {
+
+  const KIde = lazy(() => import('@fluxo-fe/shell/korebi').then(({KorebiIde}) => ({default: KorebiIde})));
+  const user = new UserService();
+
+
+
+  return (
+    <FlxRoutes>
+      <Route path={'settings'} element={<Settings pluginEndpoint={props.pluginEndpoint} modules={props.modules} />} />
+      <Route path={'change-password'} element={<ChangePassword />} />
+      <Route path={'korebi-ide'} element={<Suspense><KIde /></Suspense>} />
+    </FlxRoutes>
+  )
+}

package/src/lib/layouts/blank/blank-layout.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {Outlet} from "react-router-dom";
+
+function BlankLayout() {
+    return (
+        <Outlet />
+    )
+}
+
+export default BlankLayout;