@envisiongroup/porygon 0.1.0-rc.1

package/dist/react-components/hooks/useDrawer/useDrawer.js

@@ -0,0 +1,158 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as t from "react";
+import { createPortal as _ } from "react-dom";
+import { EFWDrawerLoader as y } from "./component/EFWDrawerLoader/EFWDrawerLoader.js";
+import { EFWDrawer as M } from "./component/EFWDrawer/EFWDrawer.js";
+const v = (r, c) => {
+  switch (c.type) {
+    case "OPEN":
+      return {
+        ...r,
+        isOpen: !0,
+        isMounted: !0,
+        isClosing: !1,
+        isContentReady: !1,
+        wasContentShown: !1,
+        ...c.payload || {}
+      };
+    case "START_CLOSE":
+      return {
+        ...r,
+        isOpen: !1,
+        isClosing: !0,
+        // Mantener el estado de qué se estaba mostrando
+        wasContentShown: r.isContentReady
+      };
+    case "FINISH_CLOSE":
+      return {
+        ...r,
+        isClosing: !1,
+        isMounted: !1,
+        isContentReady: !1,
+        wasContentShown: !1
+      };
+    case "CONTENT_READY":
+      return {
+        ...r,
+        isContentReady: !0,
+        wasContentShown: !0
+      };
+    case "UPDATE_CONTENT":
+      return {
+        ...r,
+        ...c.payload
+      };
+    default:
+      return r;
+  }
+};
+function z({
+  title: r = "",
+  content: c,
+  buttons: w = [],
+  size: E = "small",
+  position: O = "end",
+  modalType: h = "modal",
+  drawerOnOpen: p,
+  drawerOnClose: C,
+  deferContentRendering: l = !1,
+  contentRenderDelay: i = 500
+}) {
+  const n = t.useRef(null), o = t.useRef(), u = t.useRef(), [e, a] = t.useReducer(v, {
+    isOpen: !1,
+    isMounted: !1,
+    isClosing: !1,
+    isContentReady: !1,
+    wasContentShown: !1,
+    title: r,
+    content: c,
+    buttons: w,
+    size: E,
+    position: O,
+    modalType: h
+  });
+  t.useEffect(() => (n.current || (n.current = document.createElement("div"), n.current.className = "drawer-portal-container", document.body.appendChild(n.current)), () => {
+    n.current && document.body.contains(n.current) && (document.body.removeChild(n.current), n.current = null), o.current && clearTimeout(o.current), u.current && clearTimeout(u.current);
+  }), []), t.useEffect(() => (e.isOpen && !e.isContentReady && !e.isClosing && (o.current && clearTimeout(o.current), l && i > 0 ? o.current = setTimeout(() => {
+    a({ type: "CONTENT_READY" });
+  }, i) : a({ type: "CONTENT_READY" })), () => {
+    o.current && clearTimeout(o.current);
+  }), [e.isOpen, e.isContentReady, e.isClosing, l, i]);
+  const R = t.useCallback(
+    (f) => {
+      u.current && (clearTimeout(u.current), u.current = void 0), a({ type: "OPEN", payload: f }), p && Promise.resolve(p()).catch(console.error);
+    },
+    [p]
+  ), s = t.useCallback(() => {
+    o.current && (clearTimeout(o.current), o.current = void 0), a({ type: "START_CLOSE" }), C && Promise.resolve(C()).catch(console.error);
+  }, [C]), S = t.useCallback((f) => {
+    a({ type: "UPDATE_CONTENT", payload: f });
+  }, []), m = t.useCallback(
+    (f, b) => {
+      !b.open && e.isOpen && (s(), u.current = setTimeout(() => {
+        a({ type: "FINISH_CLOSE" });
+      }, 600));
+    },
+    [s, e.isOpen]
+  ), T = t.useMemo(() => {
+    if (!e.isMounted || !e.content)
+      return null;
+    if (e.isClosing)
+      return e.wasContentShown ? typeof e.content == "function" ? e.content(s) : e.content : l && !e.wasContentShown ? /* @__PURE__ */ d(y, { delay: i }) : null;
+    if (e.isOpen) {
+      if (l && !e.isContentReady)
+        return /* @__PURE__ */ d(y, { delay: i });
+      if (e.isContentReady)
+        return typeof e.content == "function" ? e.content(s) : e.content;
+    }
+    return null;
+  }, [
+    e.isMounted,
+    e.isOpen,
+    e.isClosing,
+    e.content,
+    e.isContentReady,
+    e.wasContentShown,
+    l,
+    i,
+    s
+  ]), N = t.useMemo(() => !e.isMounted || !n.current ? null : _(
+    /* @__PURE__ */ d(
+      M,
+      {
+        isOpen: e.isOpen,
+        onClose: s,
+        onOpenChange: m,
+        title: e.title,
+        content: T,
+        buttons: e.buttons,
+        size: e.size,
+        position: e.position,
+        modalType: e.modalType
+      }
+    ),
+    n.current
+  ), [
+    e.isMounted,
+    e.isOpen,
+    e.title,
+    e.buttons,
+    e.size,
+    e.position,
+    e.modalType,
+    T,
+    s,
+    m
+  ]);
+  return {
+    openDrawer: R,
+    closeDrawer: s,
+    updateDrawer: S,
+    isOpen: e.isOpen,
+    isContentReady: e.isContentReady,
+    DrawerElement: N
+  };
+}
+export {
+  z as useDrawer
+};

package/dist/react-components/hooks/useDrawer/useDrawer.types.d.ts

@@ -0,0 +1,72 @@
+import { EFWGroupButtonConfig } from '../../buttons/EFWGroupButton';
+import * as React from 'react';
+/**
+ * Interfaz que define las propiedades base para el componente Drawer.
+ * @interface DrawerBase
+ * @property {React.ReactNode} [title] - Título del drawer.
+ * @property {React.ReactNode | ((closeDrawer: DrawerCloseHandler) => React.ReactNode)} [content] - Contenido del drawer, puede ser un nodo React o una función que recibe el manejador de cierre.
+ * @property {EFWGroupButtonConfig<DrawerCloseHandler>[]} [buttons] - Configuración de los botones del footer.
+ * @property {'modal' | 'non-modal' | 'alert'} [modalType] - Tipo de modalidad del drawer.
+ * @property {'start' | 'end' | 'bottom'} position - Posición del drawer en la pantalla.
+ * @property {'small' | 'medium' | 'large' | 'full'} size - Tamaño del drawer.
+ */
+export interface DrawerBase {
+    title?: React.ReactNode;
+    content?: React.ReactNode | ((closeDrawer: DrawerCloseHandler) => React.ReactNode);
+    buttons?: EFWGroupButtonConfig<DrawerCloseHandler>[];
+    modalType?: 'modal' | 'non-modal' | 'alert';
+    position?: 'start' | 'end' | 'bottom';
+    size?: 'small' | 'medium' | 'large' | 'full';
+    deferContentRendering?: boolean;
+    contentRenderDelay?: number;
+}
+/**
+ * Interfaz para las opciones de apertura del drawer.
+ * @interface DrawerOpenOptions
+ * @extends DrawerBase
+ */
+export interface DrawerOpenOptions extends DrawerBase {
+}
+/**
+ * Interfaz para las opciones de configuración del hook useDrawer.
+ * @interface UseDrawerProps
+ * @extends DrawerBase
+ * @property {() => void | Promise<void>} [drawerOnOpen] - Callback ejecutado al abrir el drawer.
+ * @property {() => void | Promise<void>} [drawerOnClose] - Callback ejecutado al cerrar el drawer.
+ */
+export interface UseDrawerProps extends DrawerBase {
+    readonly drawerOnOpen?: () => void | Promise<void>;
+    readonly drawerOnClose?: () => void | Promise<void>;
+}
+/**
+ * Tipo para la función que abre el drawer.
+ * @typedef {function} DrawerOpenHandler
+ * @param {DrawerOpenOptions} [options] - Opciones para abrir el drawer.
+ */
+export type DrawerOpenHandler = (options?: DrawerOpenOptions) => void;
+/**
+ * Tipo para la función que cierra el drawer.
+ * @typedef {function} DrawerCloseHandler
+ */
+export type DrawerCloseHandler = () => void;
+/**
+ * Interfaz que define el estado interno del drawer.
+ * @interface DrawerState
+ * @property {boolean} isOpen - Indica si el drawer está abierto.
+ * @property {React.ReactNode} title - Título del drawer.
+ * @property {React.ReactNode | ((closeDrawer: DrawerCloseHandler) => React.ReactNode)} [content] - Contenido del drawer.
+ * @property {EFWGroupButtonConfig<DrawerCloseHandler>[]} buttons - Botones del footer.
+ * @property {'small' | 'medium' | 'large' | 'full'} size - Tamaño del drawer.
+ * @property {'start' | 'end' | 'bottom'} position - Posición del drawer.
+ * @property {'modal' | 'non-modal' | 'alert'} modalType - Tipo de modalidad.
+ */
+export interface DrawerState {
+    isOpen: boolean;
+    title: React.ReactNode;
+    content?: React.ReactNode | ((closeDrawer: DrawerCloseHandler) => React.ReactNode);
+    buttons: EFWGroupButtonConfig<DrawerCloseHandler>[];
+    size: 'small' | 'medium' | 'large' | 'full';
+    position: 'start' | 'end' | 'bottom';
+    modalType: 'modal' | 'non-modal' | 'alert';
+    isContentReady: boolean;
+}

package/dist/react-components/layout/MainNavBar/MainNavBar.js

@@ -0,0 +1,81 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { makeStyles as x, tokens as u, NavDrawer as v, NavDrawerHeader as S, Link as w, Image as N, NavDrawerBody as C } from "@fluentui/react-components";
+import { useState as a } from "react";
+import { MainNavItems as I } from "../MainNavItems/MainNavItems.js";
+const V = x({
+  root: {
+    overflow: "hidden",
+    display: "flex",
+    height: "100%"
+  },
+  content: {
+    flex: "1",
+    padding: "16px",
+    display: "grid",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  },
+  field: {
+    display: "flex",
+    marginTop: "4px",
+    marginLeft: "8px",
+    flexDirection: "column",
+    gridRowGap: u.spacingVerticalS
+  }
+}), L = (i) => {
+  const {
+    type: l = "inline",
+    open: n = !0,
+    density: o = "medium",
+    navSections: r,
+    logoImageExpanded: s
+  } = i, d = V(), c = !1, [m, p] = a(""), [g, h] = a(""), y = (k, t) => {
+    p(t.categoryValue), h(t.value);
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: "100%"
+      },
+      children: /* @__PURE__ */ f(
+        v,
+        {
+          style: { ...d, width: "100%", height: "100%" },
+          onNavItemSelect: y,
+          tabbable: !0,
+          selectedValue: g,
+          selectedCategoryValue: m,
+          type: l,
+          open: n,
+          density: o,
+          children: [
+            /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(w, { onClick: () => {
+            }, children: /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  margin: "10px 0 15px",
+                  width: 140,
+                  height: void 0
+                },
+                children: /* @__PURE__ */ e(
+                  N,
+                  {
+                    src: s,
+                    alt: "Company logo",
+                    fit: "contain"
+                  }
+                )
+              }
+            ) }) }),
+            /* @__PURE__ */ e(C, { children: I(r, c) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  L as MainNavBar
+};

package/dist/react-components/layout/MainNavBar/index.js

@@ -0,0 +1,4 @@
+import { MainNavBar as o } from "./MainNavBar.js";
+export {
+  o as MainNavBar
+};

package/dist/react-components/layout/MainNavItems/MainNavItems.js

@@ -0,0 +1,35 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { NavSectionHeader as h, NavItem as s, NavCategory as y, NavCategoryItem as S, NavSubItemGroup as _, NavSubItem as j, NavDivider as k } from "@fluentui/react-components";
+import i from "react";
+const G = (p, t = !1) => p.map((e, c) => /* @__PURE__ */ u("div", { children: [
+  e.title && !t && /* @__PURE__ */ r(h, { children: e.title }),
+  e.items.map(({ type: a, label: m, icon: n, value: d, categoryValue: N, subItems: g, href: o, openInNewTab: C, onClick: f }, l) => {
+    if (a === "navItem") {
+      const v = () => {
+        f ? f() : o && C && window.open(o, "_blank", "noopener,noreferrer");
+      };
+      return /* @__PURE__ */ r(
+        s,
+        {
+          icon: n && i.createElement(n, {
+            // Esto es necesario debido a un aparente error en el 'icon'
+            // dentro NavItem. Evita que el ícono interfiera con el clic en la opción del menú
+            style: { pointerEvents: "none" }
+          }),
+          value: d || o || "",
+          onClick: v,
+          children: !t && m
+        },
+        l
+      );
+    }
+    return a === "navCategory" ? /* @__PURE__ */ u(y, { value: N || "", children: [
+      /* @__PURE__ */ r(S, { icon: n && i.createElement(n), children: !t && m }),
+      /* @__PURE__ */ r(_, { children: g?.map(({ value: v, label: E }, I) => /* @__PURE__ */ r(j, { value: v, children: !t && E }, I)) })
+    ] }, l) : a === "navDivider" ? /* @__PURE__ */ r(k, {}, l) : null;
+  }),
+  e.footer && !t && (typeof e.footer == "string" ? /* @__PURE__ */ r("span", { children: e.footer }) : i.createElement(e.footer))
+] }, c));
+export {
+  G as MainNavItems
+};

package/dist/react-components/layout/MainNavItems/index.js

@@ -0,0 +1,4 @@
+import { MainNavItems as m } from "./MainNavItems.js";
+export {
+  m as MainNavItems
+};

package/dist/react-components/layout/NavBarContext/NavBarContext.js

@@ -0,0 +1,24 @@
+import { jsx as v } from "react/jsx-runtime";
+import { createContext as l, useState as c, useEffect as u, useContext as N } from "react";
+const o = l(void 0), a = "isNavBarCollapsed", B = ({ children: e }) => {
+  const [r, s] = c(() => {
+    const t = localStorage.getItem(a);
+    return t !== null ? JSON.parse(t) : !0;
+  });
+  u(() => {
+    localStorage.setItem(a, JSON.stringify(r));
+  }, [r]);
+  const n = () => {
+    s((t) => !t);
+  };
+  return /* @__PURE__ */ v(o.Provider, { value: { isNavBarCollapsed: r, toggleNavBar: n }, children: e });
+}, p = () => {
+  const e = N(o);
+  if (!e)
+    throw new Error("useNavBar debe usarse dentro de un NavBarProvider");
+  return e;
+};
+export {
+  B as NavBarProvider,
+  p as useNavBar
+};

package/dist/react-components/tables/EFWTable/EFWTable.d.ts

@@ -0,0 +1,8 @@
+import { EFWTableProps } from './EFWTable.types';
+
+export declare const COLS_DEF_WIDTH = 120;
+export declare const COLS_MIN_WIDTH = 80;
+export declare const COLS_MAX_WIDTH = 500;
+export declare const SELECTOR_CELL_WIDTH = 48;
+export declare const SELECTOR_CELL_HEIGHT = 48;
+export declare const EFWTable: ({ appearance, style, className, fields, items: initialItems, height, itemSize, enableSelection, enableCommandBar, defaultSelectedItems, onSelectionChange, onRowClick, resizableColumns, columnSizing: columnSizingOptions, useVirtualization, autoSizeColumns, tableRef: externalTableRef, onItemsChange, onScroll, addButtonConfig, updateButtonConfig, deleteButtonConfig, alwaysButtons, noSelectionButtons, singleSelectionButtons, multiSelectionButtons, beforeAddItems, beforeUpdateItems, beforeDeleteItems, columnRenderers, useDefaultRendererAsFallback, }: EFWTableProps) => import("react/jsx-runtime").JSX.Element;