@envisiongroup/porygon 0.1.0-rc.1

package/LICENSE

@@ -0,0 +1,11 @@
+Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
+
+El paquete de software "Porygon" es desarrollado y mantenido por Envision (https://envision.cl/).
+
+Al utilizar este software, debe:
+- Dar crédito apropiado mencionando que utiliza el paquete Porygon
+- Incluir una atribución visible a Envision como autor original
+
+No se permiten modificaciones ni la creación de obras derivadas basadas en este software.
+
+Para más información sobre los términos de esta licencia, visite https://creativecommons.org/licenses/by-nd/4.0/

package/README.md

@@ -0,0 +1,69 @@
+# Porygon
+Porygon es un paquete desarrollado por Envision, en el que se incluye varios componentes React diseñados inicialmente para gestionar la lógica y el manejo de formularios y tablas. Esto nos permite trabajar con un stack tecnológico moderno y sencillo.
+Estos componentes cumplen con los siguientes criterios:
+
+- **Personalizables**: Vienen con un estilo predeterminado, pero se pueden integrar fácilmente con otros estilos visuales. Esto se puede lograr mediante el uso de tokens, que permiten una customización flexible de colores, tamaños y otros atributos visuales sin alterar el código base.
+
+- **Rendimiento**: Están optimizados para un renderizado eficiente y de alto rendimiento, lo que minimiza el tiempo de carga y el consumo de recursos en aplicaciones grandes. Por ejemplo, incorporan técnicas como la virtualización en tablas para manejar grandes conjuntos de datos sin ralentizar la interfaz, y evitan re-renderizados innecesarios mediante memoización y optimizaciones internas.
+
+- **Accesibilidad**: Cumplen con las directrices **WCAG 2.1** (Web Content Accessibility Guidelines 2.1), que son un conjunto de estándares internacionales desarrollados por el W3C para hacer que el contenido web sea más accesible para personas con discapacidades. Un ejemplo es el soporte para lectores de pantalla, donde los componentes incluyen atributos ARIA adecuados para describir elementos como botones o campos de formulario, permitiendo una navegación por teclado intuitiva y alternativas textuales para imágenes.
+
+## Instalación
+
+Porygon es compatible con **React 17**, **18** y **19**. Instala el paquete con npm:
+
+```bash
+npm install @grupoenvision/porygon
+```
+
+## Configuración inicial
+
+Los componentes de Porygon utilizan CSS-in-JS. Esta técnica requiere un renderizador de estilos que inserte CSS en el DOM cuando sea necesario. Se utiliza el contexto de React para proporcionar este renderizador de estilos.
+Como los componentes se encuentran basados en Fluent 2, se debe utilzar el componente `<FluentProvider />` en la raíz de tu aplicación y pasar un tema al prop `theme`:
+
+```jsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <FluentProvider theme={webLightTheme}>
+    <App />
+  </FluentProvider>
+);
+```
+
+Listo, ahora puedes utilizar cualquier componete de `@envisiongroup/porygon` dentro de tu componente `App`. Revisa la sección **react-components** del menú lateral de esta página.
+Los componentes se encuentran organizados siguiendo la estructura jerárquica especificada.
+
+### Opciones de tema y customización
+
+Porygon soporta los temas que Fluent tiene por defecto:
+
+- `webLightTheme` - Tema claro para aplicaciones web
+- `webDarkTheme` - Tema oscuro para aplicaciones web
+- `teamsLightTheme` - Tema claro compatible con Microsoft Teams
+- `teamsDarkTheme` - Tema oscuro compatible with Microsoft Teams
+
+Sin embargo, es probable que prefieras usar un tema personalizado. Para esto, puedes crear uno mediante el [generador de temas de Fluent](/docs/diseñador-de-temas--docs). 
+Una vez que lo hayas creado, se guarda en un archivo JSON, que luego puedes importar y utilizar en tu aplicación.
+
+```jsx
+import { 
+  FluentProvider, 
+  webLightTheme, 
+  webDarkTheme 
+} from '@fluentui/react-components';
+import customTheme from '../themes/customTheme.json';
+
+// Ejemplo con tema customizado
+root.render(
+  <FluentProvider theme={customTheme}>
+    <App />
+  </FluentProvider>
+);
+```

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export * from './react-components/buttons/EFWButton';
+export * from './react-components/buttons/EFWDrawerButton';
+export * from './react-components/buttons/EFWGroupButton';
+export * from './react-components/commons/utils';
+export * from './react-components/fields/EFWAttachments';
+export * from './react-components/fields/EFWAttachmentsField';
+export * from './react-components/fields/EFWDatePicker';
+export * from './react-components/fields/EFWDatePickerField';
+export * from './react-components/fields/EFWField';
+export * from './react-components/fields/EFWInput';
+export * from './react-components/fields/EFWInputField';
+export * from './react-components/fields/EFWNumberInput';
+export * from './react-components/fields/EFWNumberInputField';
+export * from './react-components/fields/EFWSwitch';
+export * from './react-components/fields/EFWSwitchField';
+export * from './react-components/fields/EFWTagPicker';
+export * from './react-components/fields/EFWTagPickerField';
+export * from './react-components/fields/EFWTextArea';
+export * from './react-components/fields/EFWTextAreaField';
+export * from './react-components/forms/EFWForm';
+export * from './react-components/forms/EFWFormMessageBarGroup';
+export * from './react-components/forms/EFWMessageBarManager/EFWMessageBarManager';
+export * from './react-components/hooks/useDrawer';
+export * from './react-components/tables/EFWTable';

package/dist/index.js

@@ -0,0 +1,60 @@
+import { formatFileSize as o, getErrorMessage as t, getFileIconUrl as F } from "./react-components/commons/utils.js";
+import { EFWMessageBarManager as p } from "./react-components/forms/EFWMessageBarManager/EFWMessageBarManager.js";
+import { EFWButton as f } from "./react-components/buttons/EFWButton/EFWButton.js";
+import { useEFWButton as W } from "./react-components/buttons/EFWButton/EFWButton.hooks.js";
+import { EFWDrawerButton as i } from "./react-components/buttons/EFWDrawerButton/EFWDrawerButton.js";
+import { EFWGroupButton as u } from "./react-components/buttons/EFWGroupButton/EFWGroupButton.js";
+import { EFWAttachment as s } from "./react-components/fields/EFWAttachments/EFWAttachments.js";
+import { EFWAttachmentsField as d } from "./react-components/fields/EFWAttachmentsField/EFWAttachmentsField.js";
+import { EFWDatePicker as T } from "./react-components/fields/EFWDatePicker/EFWDatePicker.js";
+import { EFWDatePickerField as D } from "./react-components/fields/EFWDatePickerField/EFWDatePickerField.js";
+import { EFWField as b } from "./react-components/fields/EFWField/EFWField.js";
+import { EFWInput as k } from "./react-components/fields/EFWInput/EFWInput.js";
+import { EFWInputField as A } from "./react-components/fields/EFWInputField/EFWInputField.js";
+import { EFWNumberInput as P } from "./react-components/fields/EFWNumberInput/EFWNumberInput.js";
+import { EFWNumberInputField as C } from "./react-components/fields/EFWNumberInputField/EFWNumberInputField.js";
+import { EFWSwitch as N } from "./react-components/fields/EFWSwitch/EFWSwitch.js";
+import { EFWSwitchField as z } from "./react-components/fields/EFWSwitchField/EFWSwitchField.js";
+import { EFWTagPicker as j } from "./react-components/fields/EFWTagPicker/EFWTagPicker.js";
+import { EFWTagPickerField as v } from "./react-components/fields/EFWTagPickerField/EFWTagPickerField.js";
+import { EFWTextArea as J } from "./react-components/fields/EFWTextArea/EFWTextArea.js";
+import { EFWTextAreaField as L } from "./react-components/fields/EFWTextAreaField/EFWTextAreaField.js";
+import { getEFWFormFieldDisplayText as Q } from "./react-components/forms/EFWForm/EFWForm.converter.js";
+import { useFormController as V } from "./react-components/forms/EFWForm/EFWForm.hooks.js";
+import { EFWForm as Y } from "./react-components/forms/EFWForm/EFWForm.js";
+import { EFWFormMessageBarGroup as _ } from "./react-components/forms/EFWFormMessageBarGroup/EFWFormMessageBarGroup.js";
+import { useDrawer as rr } from "./react-components/hooks/useDrawer/useDrawer.js";
+import { EFWTable as or } from "./react-components/tables/EFWTable/EFWTable.js";
+import { useTableController as Fr } from "./react-components/tables/EFWTable/hooks/useTableController/useTableController.js";
+export {
+  s as EFWAttachment,
+  d as EFWAttachmentsField,
+  f as EFWButton,
+  T as EFWDatePicker,
+  D as EFWDatePickerField,
+  i as EFWDrawerButton,
+  b as EFWField,
+  Y as EFWForm,
+  _ as EFWFormMessageBarGroup,
+  u as EFWGroupButton,
+  k as EFWInput,
+  A as EFWInputField,
+  p as EFWMessageBarManager,
+  P as EFWNumberInput,
+  C as EFWNumberInputField,
+  N as EFWSwitch,
+  z as EFWSwitchField,
+  or as EFWTable,
+  j as EFWTagPicker,
+  v as EFWTagPickerField,
+  J as EFWTextArea,
+  L as EFWTextAreaField,
+  o as formatFileSize,
+  Q as getEFWFormFieldDisplayText,
+  t as getErrorMessage,
+  F as getFileIconUrl,
+  rr as useDrawer,
+  W as useEFWButton,
+  V as useFormController,
+  Fr as useTableController
+};

package/dist/react-components/buttons/EFWButton/EFWButton.d.ts

@@ -0,0 +1,59 @@
+import { EFWButtonProps } from './EFWButton.types';
+import * as React from "react";
+/**
+ * Componente de botón mejorado con estados de carga, éxito y error.
+ *
+ * EFWButton extiende el componente Button de Fluent UI agregando:
+ * - Manejo automático de estados de carga
+ * - Visualización de estados de éxito y error
+ * - Iconos de estado opcionales
+ * - Tooltips configurables
+ * - Manejo robusto de errores
+ * - Callbacks personalizables
+ *
+ * @component
+ * @param {EFWButtonProps} props - Propiedades del componente
+ * @returns {React.ReactElement} Elemento JSX del botón con estados mejorados
+ *
+ * @example
+ * // Uso básico
+ * <EFWButton onClick={async () => await saveData()}>
+ *   Guardar
+ * </EFWButton>
+ *
+ * @example
+ * // Uso avanzado con configuración completa
+ * <EFWButton
+ *   onClick={async () => {
+ *     try {
+ *       await complexOperation();
+ *       return { success: true };
+ *     } catch (error) {
+ *       return { success: false, error: error.message };
+ *     }
+ *   }}
+ *   loadingText="Procesando datos..."
+ *   autoLoading={true}
+ *   successConfig={{
+ *     text: "¡Completado!",
+ *     timeout: 3000,
+ *     onSuccess: () => showNotification("Operación exitosa")
+ *   }}
+ *   errorConfig={{
+ *     text: "Error",
+ *     timeout: 5000,
+ *     onError: (error) => logError(error)
+ *   }}
+ *   tooltips={{
+ *     idle: "Haz clic para procesar",
+ *     loading: "Procesando...",
+ *     success: "Operación completada",
+ *     error: "Ocurrió un error"
+ *   }}
+ *   showStatusIcons={true}
+ *   appearance="primary"
+ * >
+ *   Procesar Datos
+ * </EFWButton>
+ */
+export declare const EFWButton: React.FC<EFWButtonProps>;

package/dist/react-components/buttons/EFWButton/EFWButton.hooks.d.ts

@@ -0,0 +1,45 @@
+import { EFWButtonHandle, UseEFWButtonOptions } from './EFWButton.types';
+
+/**
+ * Hook personalizado para manejar el estado y comportamiento de EFWButton.
+ *
+ * Proporciona un conjunto completo de funcionalidades para manejar estados de carga,
+ * éxito y error en botones con operaciones asíncronas. Incluye manejo automático
+ * de timeouts, callbacks y transiciones de estado.
+ *
+ * @param {UseEFWButtonOptions} options - Opciones de configuración para el hook
+ * @param {Function} [options.onError] - Callback ejecutado cuando ocurre un error
+ * @param {Function} [options.onSuccess] - Callback ejecutado en operación exitosa
+ * @param {number} [options.successTimeout=2000] - Timeout para estado de éxito (ms)
+ * @param {number} [options.errorTimeout=2000] - Timeout para estado de error (ms)
+ * @param {boolean} [options.autoReset=true] - Auto-reseteo después de éxito/error
+ *
+ * @returns {EFWButtonHandle} Objeto con estado actual y métodos de control
+ *
+ * @example
+ * // Uso básico
+ * const buttonHandle = useEFWButton();
+ *
+ * @example
+ * // Configuración avanzada
+ * const buttonHandle = useEFWButton({
+ *   onSuccess: () => showNotification('¡Éxito!'),
+ *   onError: (error) => logError(error),
+ *   successTimeout: 3000,
+ *   errorTimeout: 5000,
+ *   autoReset: true
+ * });
+ *
+ * @example
+ * // Uso con executeAsync
+ * const handleSave = async () => {
+ *   await buttonHandle.executeAsync(async () => {
+ *     await saveData();
+ *     return { success: true };
+ *   });
+ * };
+ *
+ * @hook
+ * @since 1.0.0
+ */
+export declare const useEFWButton: (options?: UseEFWButtonOptions) => EFWButtonHandle;

package/dist/react-components/buttons/EFWButton/EFWButton.hooks.js

@@ -0,0 +1,75 @@
+import * as t from "react";
+const w = (T = {}) => {
+  const {
+    onError: k,
+    onSuccess: m,
+    successTimeout: i = 2e3,
+    errorTimeout: f = 2e3,
+    autoReset: a = !0
+  } = T, [E, s] = t.useState("idle"), [p, l] = t.useState(null), c = t.useRef(null), r = t.useCallback(() => {
+    c.current && (clearTimeout(c.current), c.current = null);
+  }, []), n = t.useCallback(() => {
+    s("idle"), l(null), r();
+  }, [r]), b = t.useCallback(() => {
+    s("loading"), l(null), r();
+  }, [r]), d = t.useCallback(() => {
+    s((e) => e === "loading" ? "idle" : e), r();
+  }, [r]), C = t.useCallback(() => {
+    s("success"), l(null), m?.(), a && i > 0 && (r(), c.current = setTimeout(n, i));
+  }, [m, a, i, n, r]), u = t.useCallback(
+    (e) => {
+      l(e), s("error"), k?.(e), a && f > 0 && (r(), c.current = setTimeout(n, f));
+    },
+    [k, a, f, n, r]
+  ), S = t.useCallback(
+    (e) => {
+      if (!e)
+        d();
+      else if (typeof e == "object")
+        if (e.success)
+          C();
+        else {
+          const o = e.error instanceof Error ? e.error : new Error(String(e.error || "Operation failed"));
+          u(o);
+        }
+    },
+    [C, u, d]
+  ), R = t.useCallback(
+    async (e) => {
+      try {
+        b();
+        const o = await e();
+        S(o);
+      } catch (o) {
+        const g = o instanceof Error ? o : new Error(String(o));
+        throw u(g), g;
+      }
+    },
+    [b, S, u]
+  );
+  return t.useEffect(() => () => {
+    r();
+  }, [r]), {
+    /** Estado actual del botón */
+    currentState: E,
+    /** Indica si el botón está en estado de carga */
+    isLoading: E === "loading",
+    /** Error actual o null */
+    error: p,
+    /** Función para resetear el estado */
+    reset: n,
+    /** Función para iniciar estado de carga */
+    setLoading: b,
+    /** Función para detener estado de carga */
+    stopLoading: d,
+    /** Función para establecer estado de éxito */
+    setSuccess: C,
+    /** Función para establecer estado de error */
+    setError: u,
+    /** Función para ejecutar operaciones asíncronas */
+    executeAsync: R
+  };
+};
+export {
+  w as useEFWButton
+};

package/dist/react-components/buttons/EFWButton/EFWButton.js

@@ -0,0 +1,164 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as C from "react";
+import { makeStyles as q, tokens as t, Tooltip as v, Spinner as K, Button as Q } from "@fluentui/react-components";
+import { ErrorCircleRegular as U, CheckmarkRegular as V } from "@fluentui/react-icons";
+import { useEFWButton as X } from "./EFWButton.hooks.js";
+const Y = q({
+  /**
+   * Estilo para botón no interactivo (estado de carga con deshabilitación).
+   * Aplica opacidad reducida y deshabilita eventos de puntero.
+   */
+  buttonNonInteractive: {
+    backgroundColor: t.colorNeutralBackground1,
+    border: `${t.strokeWidthThin} solid ${t.colorNeutralStroke1}`,
+    color: t.colorNeutralForeground1,
+    cursor: "default",
+    pointerEvents: "none",
+    opacity: 0.5,
+    "& .ms-Button-icon": {
+      color: t.colorStatusSuccessForeground1
+    }
+  },
+  /**
+   * Estilo para el estado de error del botón.
+   * Utiliza la paleta de colores rojos de Fluent UI.
+   */
+  buttonError: {
+    backgroundColor: `${t.colorPaletteRedBackground1} !important`,
+    border: `${t.strokeWidthThin} solid ${t.colorPaletteRedBorder1} !important`,
+    color: `${t.colorPaletteRedForeground1} !important`
+  },
+  /**
+   * Estilo para el estado de éxito del botón.
+   * Utiliza la paleta de colores verdes de Fluent UI.
+   */
+  buttonSuccess: {
+    backgroundColor: `${t.colorPaletteGreenBackground1} !important`,
+    border: `${t.strokeWidthThin} solid ${t.colorPaletteGreenBorder1} !important`,
+    color: `${t.colorPaletteGreenForeground1} !important`,
+    "& .ms-Button-icon": {
+      color: `${t.colorStatusSuccessForeground1} !important`
+    }
+  }
+});
+function Z(r) {
+  return r instanceof Error ? r : _(r) ? r === void 0 ? new Error("Operación fallida sin detalles (void)") : r.success ? new Error("Operación reportada como exitosa en un error") : r.error instanceof Error ? r.error : new Error(r.error || "Operación fallida sin mensaje") : new Error(String(r) || "Error desconocido");
+}
+function _(r) {
+  return r === void 0 ? !0 : typeof r == "object" && r !== null && "success" in r && typeof r.success == "boolean" && (r.error === void 0 || typeof r.error == "string" || r.error instanceof Error);
+}
+const L = (r) => {
+  if (!r) return "Ha ocurrido un error";
+  if (r instanceof Error) return r.message;
+  if (typeof r == "string") return r;
+  if (typeof r == "object" && r !== null) {
+    const n = r;
+    if (typeof n.message == "string") return n.message;
+    if (typeof n.error == "string") return n.error;
+    try {
+      return JSON.stringify(r);
+    } catch {
+      return "Error: No es posible parsear error";
+    }
+  }
+  return String(r) || "Ha ocurrido un error";
+}, sr = ({
+  onClick: r,
+  loadingText: n = "Procesando...",
+  disableOnLoading: u = !0,
+  autoLoading: l = !1,
+  successConfig: $ = {},
+  errorConfig: h = {},
+  tooltips: c,
+  showStatusIcons: d = !0,
+  autoReset: R = !0,
+  children: f,
+  disabled: m,
+  className: F,
+  appearance: P = "secondary",
+  icon: i,
+  ...T
+}) => {
+  const p = Y(), { onSuccess: x, timeout: w = 2e3, text: O } = $, { onError: W, timeout: G = 2e3, text: D } = h, { currentState: y, isLoading: g, error: H, setLoading: k, stopLoading: S, setSuccess: N, setError: a } = X({
+    onError: W,
+    onSuccess: x,
+    successTimeout: w,
+    errorTimeout: G,
+    autoReset: R
+  }), b = C.useCallback(
+    (o) => {
+      if (!o)
+        S();
+      else if (typeof o == "object")
+        if (o.success)
+          N();
+        else {
+          const e = o.error instanceof Error ? o.error : new Error(String(o.error || "Operación fallida"));
+          a(e);
+        }
+    },
+    [S, N, a]
+  ), z = C.useCallback(async (o) => {
+    if (!(!r || g || m))
+      try {
+        const e = r(o);
+        if (e instanceof Promise) {
+          l && k();
+          const E = await e;
+          l && b(E);
+        } else
+          b(e);
+      } catch (e) {
+        const E = Z(e);
+        a(E);
+      }
+  }, [r, g, m, l, k, b, a]), A = () => {
+    const o = [F].filter(Boolean);
+    switch (y) {
+      case "loading":
+        return {
+          content: n,
+          icon: d ? /* @__PURE__ */ s(K, { size: "tiny" }) : i,
+          className: u ? [...o, p.buttonNonInteractive].join(" ") : o.join(" "),
+          tooltip: c?.loading
+        };
+      case "success":
+        return {
+          content: O ?? f,
+          icon: d ? /* @__PURE__ */ s(V, {}) : i,
+          className: [...o, p.buttonSuccess].join(" "),
+          tooltip: c?.success
+        };
+      case "error":
+        return {
+          content: D ?? f,
+          icon: d ? /* @__PURE__ */ s(U, {}) : i,
+          className: [...o, p.buttonError].join(" "),
+          tooltip: c?.error ?? L(H)
+        };
+      default:
+        return {
+          content: f,
+          icon: i,
+          className: o.join(" "),
+          tooltip: c?.idle
+        };
+    }
+  }, { content: I, icon: J, className: M, tooltip: B } = A(), j = /* @__PURE__ */ s(
+    Q,
+    {
+      ...T,
+      appearance: P,
+      className: M,
+      disabled: m || u && g,
+      disabledFocusable: y === "loading" && u,
+      icon: J,
+      onClick: z,
+      children: I
+    }
+  );
+  return B ? /* @__PURE__ */ s(v, { content: B, relationship: "label", children: j }) : j;
+};
+export {
+  sr as EFWButton
+};