@m4l/layouts 0.1.22 → 0.1.25

package/dist/layouts/MasterDetailLayout/index.3da0ffda.js

@@ -0,0 +1,104 @@
+import { createContext as D, useState as p, useRef as A, useCallback as $, useMemo as g } from "react";
+import { voidFunction as k, useEnvironment as w } from "@m4l/core";
+import { SplitLayout as P } from "@m4l/components";
+import { a as z, g as I } from "../ModuleLayout/index.a76397df.js";
+import { jsx as c } from "react/jsx-runtime";
+import { useResponsiveDesktop as L } from "@m4l/graphics";
+const F = {
+  masterSelection: void 0,
+  onChangeMasterSelection: k
+}, N = D(F);
+function x(o) {
+  const {
+    children: e
+  } = o, [s, t] = p(void 0);
+  return /* @__PURE__ */ c(N.Provider, {
+    value: {
+      masterSelection: s,
+      onChangeMasterSelection: t
+    },
+    children: e
+  });
+}
+function R(o, e, s, t) {
+  let i = t !== void 0 && t ? [...o] : [s];
+  return i = e.concat(i), i;
+}
+function G(o) {
+  const {
+    moduleId: e,
+    masterComponent: s,
+    detailComponent: t,
+    moduleActions: i
+  } = o, {
+    host_static_assets: r,
+    environment_assets: n
+  } = w(), [C, h] = p("vertical"), d = L(), M = A(null), u = (m) => {
+    const a = [...y];
+    for (let l = 0; l < a.length; l++)
+      a[l].disabled = !1, a[l].tag === m && (a[l].disabled = !0);
+    S(a), h(m);
+  }, y = [{
+    urlIcon: `${r}/${n}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+    onClick: () => u("vertical"),
+    disabled: !0,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_vertical",
+    tag: "vertical",
+    className: "splitactions"
+  }, {
+    urlIcon: `${r}/${n}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+    onClick: () => u("horizontal"),
+    disabled: !1,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.split_horizontal",
+    tag: "horizontal",
+    className: "splitactions"
+  }, {
+    urlIcon: `${r}/${n}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+    onClick: () => u("none"),
+    disabled: !1,
+    visibility: "main",
+    dictionaryField: "master_detail_layout.no_split",
+    tag: "none",
+    className: "splitactions"
+  }], v = $(() => {
+  }, [t]), _ = g(() => ({
+    urlIcon: `${r}/${n}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+    onClick: v,
+    disabled: !1,
+    visibility: "allways",
+    dictionaryField: "master_detail_layout.view_detail",
+    tag: "none",
+    className: ""
+  }), [n, v]), [f, S] = p(y), b = g(() => R(f, i, _, d), [f, i, d, _]);
+  return /* @__PURE__ */ c(x, {
+    children: /* @__PURE__ */ c(z, {
+      ref: M,
+      moduleId: e,
+      moduleActions: b,
+      children: /* @__PURE__ */ c(P, {
+        splitPosition: d ? C : "none",
+        firstPart: s,
+        secondPart: t
+      })
+    })
+  });
+}
+function H() {
+  return ["master_detail_layout"].concat(I());
+}
+const J = {
+  master_detail_layout: {
+    split_vertical: "Split vertically",
+    split_horizontal: "Split horizontally",
+    no_split: "No split",
+    view_detail: "View detail"
+  }
+};
+export {
+  N as M,
+  G as a,
+  J as d,
+  H as g
+};

package/{layouts → dist/layouts}/ModuleLayout/contexts/ModuleContext/types.d.ts

@@ -1,18 +1,13 @@
-import type { TLink } from '@m4l/components';
+import { ModuleAction } from '@m4l/components';
 import type { ReactNode } from 'react';
-import { ModuleAction } from '../../types';
 export interface ModuleLayoutContextStateProps {
-    urlIcon: string;
     moduleId: string;
-    moduleNameField: string;
-    breadcrumbLinks: TLink[];
 }
 export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
     children: ReactNode;
-    initialModuleActions: ModuleAction[];
+    moduleActions: ModuleAction[];
 }
 export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
     moduleActions: ModuleAction[];
-    dynamicActions: ModuleAction[];
     setDynamicActions: (dynamicActions: ModuleAction[]) => void;
 }

package/dist/layouts/ModuleLayout/index.a76397df.js

@@ -0,0 +1,101 @@
+import { useModal as y, useDynamicMFParameters as x, ModalProvider as v, getModalDialogComponentsDictionary as g } from "@m4l/components";
+import { forwardRef as a, useRef as m, useImperativeHandle as p, createContext as h, useState as s, useMemo as I, useEffect as A } from "react";
+import { styled as f } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+const C = f("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  margin: "0px 12px 12px 12px",
+  left: "0px",
+  right: "0px",
+  top: "0px",
+  bottom: "0px",
+  overflow: "hidden"
+})), D = f("div")(({
+  theme: o
+}) => ({
+  display: "flex",
+  position: "relative",
+  marginTop: o.spacing(1),
+  justifyContent: "center",
+  flexGrow: "1",
+  overflow: "hidden"
+})), M = a((o, l) => {
+  const {
+    children: e
+  } = o, {
+    openModal: r
+  } = y(), n = m(null);
+  return p(l, () => ({
+    openModal: r,
+    current: n.current
+  })), /* @__PURE__ */ t(C, {
+    id: "WrapperInnerModule",
+    className: "m4l_module_layout",
+    ref: n,
+    children: /* @__PURE__ */ t(D, {
+      id: "ModuleContent",
+      children: e
+    })
+  });
+});
+M.displayName = "InnerModule";
+const P = h(null);
+function w(o) {
+  const {
+    children: l,
+    moduleActions: e,
+    moduleId: r
+  } = o, [n] = s(() => ({
+    moduleId: r,
+    dictionary: void 0
+  })), {
+    setModuleActions: d
+  } = x(), [i, c] = s([]), u = I(() => e.concat(i), [e, i]);
+  return A(() => {
+    console.log("useEffect ModuleProvider", u), d(u);
+  }, [u]), /* @__PURE__ */ t(P.Provider, {
+    value: {
+      moduleActions: u,
+      setDynamicActions: c,
+      moduleId: n.moduleId
+    },
+    children: l
+  });
+}
+const L = a((o, l) => {
+  const {
+    moduleId: e,
+    moduleActions: r,
+    children: n
+  } = o, d = m(null), i = (c) => {
+    d.current?.openModal(c);
+  };
+  return p(l, () => ({
+    openModal: i,
+    current: d.current
+  })), /* @__PURE__ */ t(w, {
+    moduleId: e,
+    moduleActions: r,
+    children: /* @__PURE__ */ t(v, {
+      children: /* @__PURE__ */ t(M, {
+        ref: d,
+        children: n
+      })
+    })
+  });
+});
+L.displayName = "ModuleLayout";
+function j() {
+  return ["module_layout"].concat(g());
+}
+const E = {
+  module_layout: {}
+};
+export {
+  P as M,
+  L as a,
+  E as d,
+  j as g
+};

package/dist/layouts/ModuleLayout/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { ModalOpenOptions, ModuleAction } from '@m4l/components';
+import type { ModuleRef } from './subcomponents/InnerModule/types';
+export interface ContainerProps {
+    vertical: boolean;
+}
+export declare type ModuleLayoutRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: ModuleRef | null;
+};
+export interface ModuleLayoutProps {
+    moduleId: string;
+    moduleActions: ModuleAction[];
+    children: ReactNode;
+}

package/dist/layouts/index.014e41ba.js

@@ -0,0 +1,8 @@
+import "./ModuleLayout/index.a76397df.js";
+import "@m4l/components";
+import "react";
+import "@m4l/core";
+import "./MasterDetailLayout/index.3da0ffda.js";
+import "@m4l/graphics";
+import "react/jsx-runtime";
+import "./NoAuthModuleLayout/index.5d1098ef.js";

package/{layouts → dist/layouts}/index.d.ts

@@ -4,4 +4,3 @@ export { MasterDetailLayout } from './MasterDetailLayout';
 export * from './MasterDetailLayout/dicctionary';
 export { NoAuthModuleLayout } from './NoAuthModuleLayout';
 export * from './NoAuthModuleLayout/dicctionary';
-export type { ModuleAction } from '../layouts/ModuleLayout/types';

package/dist/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@m4l/layouts",
+  "version": "0.1.25",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@m4l/components": "*",
+    "@m4l/core": "*",
+    "@m4l/graphics": "*"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "eventemitter3": "^4.0.7",
+    "history": "5.3.0",
+    "nprogress": "^0.2.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-toastify": "9.0.5"
+  },
+  "files": [
+    "*"
+  ],
+  "source": "src/index.ts",
+  "main": "./index.js",
+  "module": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "private": false
+}

package/package.json

@@ -1,35 +1,80 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.22",
+  "version": "0.1.25",
   "license": "UNLICENSED",
+  "scripts": {
+    "typescript": "tsc",
+    "build:package": "node ../../scripts/buildpackage.js",
+    "build": "tsc && vite build",
+    "build:monorepo": "tsc && vite build && yarn build:package",
+    "release:monorepo": "yarn build:monorepo && npm publish ./dist",
+    "lint": "npx eslint src",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix",
+    "coverage": "vitest run --coverage"
+  },
   "dependencies": {
     "@m4l/components": "*",
     "@m4l/core": "*",
-    "@m4l/graphics": "*",
-    "react-router-dom": "6.3.0",
-    "react-toastify": "9.0.5",
-    "simplebar": "5.3.8"
+    "@m4l/graphics": "*"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "eventemitter3": "^4.0.7",
+    "history": "5.3.0",
+    "nprogress": "^0.2.0",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-toastify": "9.0.5"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/node": "^16.7.10",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "5.27.1",
+    "@typescript-eslint/parser": "5.27.1",
+    "@vitejs/plugin-react": "1.3.2",
+    "eslint": "8.17.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-react-hooks": "4.5.0",
+    "eslint-plugin-unused-imports": "2.0.0",
+    "eventemitter3": "^4.0.7",
+    "history": "5.3.0",
+    "nprogress": "^0.2.0",
+    "prettier": "2.6.2",
+    "react": "^18.0.0",
+    "rollup": "2.79.0",
+    "typescript": "4.6.3",
+    "vite": "3.1.0",
+    "vite-plugin-dts": "1.2.0",
+    "vitest": "^0.23.4"
   },
   "files": [
     "*"
   ],
   "source": "src/index.ts",
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "type": "module",
-  "types": "./index.d.ts",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=12.0.0"
-  },
-  "private": false
-}
+  }
+}

package/src/@types/index.ts

@@ -0,0 +1,8 @@
+import { NewWindow } from '@m4l/components';
+import { EmitEvents } from '@m4l/core';
+
+declare module '@m4l/core' {
+    interface EmmitEventsGuard {
+        [EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW]: NewWindow;
+    }
+}

package/src/components/BaseModule/index.tsx

@@ -0,0 +1,59 @@
+// react
+
+//m4l
+
+import { ModalProvider } from '@m4l/components';
+import {
+    FlagsProvider,
+    ModuleDictionaryProvider,
+    ModulePrivilegesProvider,
+    ModuleSkeletonProvider,
+} from '@m4l/core';
+// external components
+
+// mui
+// internal components
+// hooks /providers
+
+// sub comoponents
+
+// types
+import { BaseModuleProps } from './types';
+// network
+
+// config
+
+// utils
+
+// css
+
+export function BaseModule(props: BaseModuleProps) {
+    const {
+        children,
+
+        moduleId,
+        moduleNameField,
+        skeletonFlags,
+        privileges,
+        componentsDictionary,
+    } = props;
+
+    return (
+        <FlagsProvider>
+            <ModuleDictionaryProvider
+                isAuth={true}
+                moduleId={moduleId}
+                moduleNameField={moduleNameField}
+                componentsDictionary={componentsDictionary}
+            >
+                <ModuleSkeletonProvider flags={skeletonFlags}>
+                    <ModulePrivilegesProvider queryPrivileges={privileges}>
+                        <ModalProvider>{children}</ModalProvider>
+                    </ModulePrivilegesProvider>
+                </ModuleSkeletonProvider>
+            </ModuleDictionaryProvider>
+        </FlagsProvider>
+    );
+}
+
+export default BaseModule;

package/src/components/BaseModule/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export type BaseModuleProps = {
+    //Parametros del modulo
+    moduleId: string;
+    skeletonFlags: string[];
+    moduleNameField?: string;
+    privileges: string[];
+    componentsDictionary: string[];
+
+    children: ReactNode;
+};

package/src/components/MFHostApp/index.tsx

@@ -0,0 +1,95 @@
+// react
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
+
+//m4l
+import {
+    DomainCountryProvider,
+    EnvironmentProvider,
+    HostToolsProvider,
+    NetworkProvider,
+} from '@m4l/core';
+import { FormatterProvider, HostThemeProvider, LocalesProvider } from '@m4l/graphics';
+
+// external components
+
+// mui
+
+// internal components
+
+// hooks /providers
+
+// sub comoponents
+
+// types
+
+// network
+
+// config
+
+// utils
+
+// css
+
+import { MFHostAppProps } from './types';
+
+import BaseModule from '../BaseModule';
+import { DynamicMFParmsProvider } from '@m4l/components';
+
+export function MFHostApp(props: MFHostAppProps) {
+    const {
+        children,
+        currentLocale,
+        hostTheme,
+        environment,
+        hostTools,
+        axiosOperation,
+        formatters,
+        dynamicMFParameters,
+        moduleId,
+        moduleNameField,
+        skeletonFlags,
+        privileges,
+        componentsDictionary,
+    } = props;
+
+    return (
+        <EnvironmentProvider {...environment}>
+            <HostToolsProvider {...hostTools}>
+                <NetworkProvider axiosOperation={axiosOperation}>
+                    <LocalesProvider isMicroFrontEnd localeHost={currentLocale}>
+                        <HostThemeProvider isMicroFrontEnd={true} {...hostTheme}>
+                            <HistoryRouter history={hostTools.history}>
+                                <DomainCountryProvider
+                                    isMicroFrontEnd
+                                    id={dynamicMFParameters?.id || 1}
+                                    currency={formatters.currencyFormatter.code}
+                                    currency_decimal_digits={
+                                        formatters.currencyFormatter.decimalDigits
+                                    }
+                                    decimal_symbol={formatters.numberFormatter.decimalSymbol}
+                                    thousands_symbol={formatters.numberFormatter.thousandsSymbol}
+                                >
+                                    <BaseModule
+                                        moduleId={moduleId}
+                                        moduleNameField={moduleNameField}
+                                        componentsDictionary={componentsDictionary}
+                                        skeletonFlags={skeletonFlags}
+                                        privileges={privileges}
+                                    >
+                                        <FormatterProvider isMicroFrontEnd {...formatters}>
+                                            <DynamicMFParmsProvider {...dynamicMFParameters}>
+                                                {children}
+                                            </DynamicMFParmsProvider>
+                                        </FormatterProvider>
+                                    </BaseModule>
+                                </DomainCountryProvider>
+                            </HistoryRouter>
+                        </HostThemeProvider>
+                    </LocalesProvider>
+                </NetworkProvider>
+            </HostToolsProvider>
+        </EnvironmentProvider>
+    );
+}
+
+export default MFHostApp;

package/src/components/MFHostApp/types.ts

@@ -0,0 +1,16 @@
+import type { AxiosOperation, EnvironmentType, HostToolsType } from '@m4l/core';
+import { Formatters, HostThemeType, LocaleType } from '@m4l/graphics';
+import { DynamicMFParameters } from '@m4l/components';
+import { BaseModuleProps } from '../BaseModule/types';
+
+export interface ByHostProps {
+    environment: EnvironmentType;
+    hostTools: HostToolsType;
+    hostTheme: HostThemeType;
+    currentLocale: LocaleType;
+    axiosOperation: AxiosOperation;
+    formatters: Formatters;
+    dynamicMFParameters: DynamicMFParameters;
+}
+
+export type MFHostAppProps = ByHostProps & BaseModuleProps;