@envisiongroup/porygon 1.0.0-rc.9 → 1.0.1

package/dist/react-components/fields/DatePicker/EFWDatePicker.utils.js

@@ -0,0 +1,179 @@
+import { defaultDatePickerStrings as c } from "@fluentui/react-datepicker-compat";
+const i = (t) => ({
+  ...c,
+  ...t
+}), l = {
+  ...i({
+    days: [
+      "Domingo",
+      "Lunes",
+      "Martes",
+      "Miercoles",
+      "Jueves",
+      "Viernes",
+      "Sabado"
+    ],
+    shortDays: ["D", "L", "M", "M", "J", "V", "S"],
+    months: [
+      "Enero",
+      "Febrero",
+      "Marzo",
+      "Abril",
+      "Mayo",
+      "Junio",
+      "Julio",
+      "Agosto",
+      "Septiembre",
+      "Octubre",
+      "Noviembre",
+      "Diciembre"
+    ],
+    shortMonths: [
+      "Ene",
+      "Feb",
+      "Mar",
+      "Abr",
+      "May",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dic"
+    ],
+    goToToday: "Ir a hoy"
+  })
+}, f = {
+  ...i({
+    days: [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ],
+    shortDays: ["S", "M", "T", "W", "T", "F", "S"],
+    months: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    shortMonths: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    goToToday: "Go to today"
+  })
+}, m = {
+  ...i({
+    days: [
+      "Domingo",
+      "Segunda-feira",
+      "Terca-feira",
+      "Quarta-feira",
+      "Quinta-feira",
+      "Sexta-feira",
+      "Sabado"
+    ],
+    shortDays: ["D", "S", "T", "Q", "Q", "S", "S"],
+    months: [
+      "Janeiro",
+      "Fevereiro",
+      "Marco",
+      "Abril",
+      "Maio",
+      "Junho",
+      "Julho",
+      "Agosto",
+      "Setembro",
+      "Outubro",
+      "Novembro",
+      "Dezembro"
+    ],
+    shortMonths: [
+      "Jan",
+      "Fev",
+      "Mar",
+      "Abr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Set",
+      "Out",
+      "Nov",
+      "Dez"
+    ],
+    goToToday: "Ir para hoje"
+  })
+}, y = (t, e = !1) => {
+  if (!t) return "";
+  const r = t.getDate(), o = t.getMonth(), n = t.getFullYear();
+  if (e)
+    return `${l.months[o]} ${r}, ${n}`;
+  {
+    const a = r < 10 ? `0${r}` : r, u = o + 1 < 10 ? `0${o + 1}` : o + 1;
+    return `${a}/${u}/${n}`;
+  }
+}, d = (t) => {
+  if (t instanceof Date) return s(t) ? t : null;
+  if (typeof t == "string")
+    try {
+      const e = new Date(t);
+      return isNaN(e.getTime()) ? null : e;
+    } catch {
+      return null;
+    }
+  return null;
+}, D = (t = []) => t.map((e) => {
+  if (e instanceof Date)
+    return s(e) ? e : null;
+  if (typeof e == "string") {
+    const r = new Date(e);
+    return s(r) ? r : null;
+  }
+  if (typeof e == "number") {
+    const r = new Date(e);
+    return s(r) ? r : null;
+  }
+  return null;
+}).filter((e) => e !== null), s = (t) => t instanceof Date && !isNaN(t.getTime()), h = (t, e) => {
+  if (!t) return "";
+  const r = d(t);
+  if (!r) return "";
+  let o = y(r);
+  if (e?.includeTime) {
+    const n = e.timeValue, a = n && n.length === 4 ? `${n.substring(0, 2)}:${n.substring(2, 4)}` : "00:00";
+    o += ` ${a}`;
+  }
+  return o;
+};
+export {
+  f as enLocalizedStrings,
+  l as esLocalizedStrings,
+  h as getDatePickerFormattedValue,
+  D as mapToValidDates,
+  m as ptLocalizedStrings
+};

package/dist/react-components/fields/DatePicker/EFWDatePickerField.js

@@ -0,0 +1,251 @@
+import { jsx as l, Fragment as ce, jsxs as me } from "react/jsx-runtime";
+import { EFWField as ue } from "../_shared/EFWField/EFWField.js";
+import { EFWDatePicker as Z } from "./EFWDatePicker.js";
+import { mapToValidDates as q, getDatePickerFormattedValue as fe } from "./EFWDatePicker.utils.js";
+import { EFWInput as he } from "../Input/EFWInput.js";
+import { useMemo as x, useState as De, useRef as Se, useEffect as U, useCallback as J } from "react";
+import { makeStyles as ge, mergeClasses as w, Text as K } from "@fluentui/react-components";
+import { normalizeArrayValue as Q } from "../../commons/valueNormalization.js";
+import { useFieldsLocaleText as Te } from "../../i18n/PorygonI18nProvider.js";
+const be = ge({
+  dateTimeContainer: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    width: "100%",
+    overflow: "hidden"
+  },
+  datePickerWrapper: {
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden",
+    "& > *": {
+      width: "100%",
+      minWidth: 0,
+      display: "flex"
+    },
+    "& .fui-Input": {
+      width: "100%",
+      minWidth: 0
+    }
+  },
+  timeInputWrapper: {
+    flex: "0 0 75px",
+    width: "75px",
+    "& .fui-Input": {
+      width: "75px"
+    }
+  }
+}), ye = {}, Ce = [];
+function X(e, t) {
+  const a = new Date(e.getTime());
+  if (t && t.length === 4) {
+    const n = parseInt(t.substring(0, 2), 10), o = parseInt(t.substring(2, 4), 10);
+    if (!isNaN(n) && !isNaN(o) && n >= 0 && n <= 23 && o >= 0 && o <= 59)
+      return a.setHours(n, o, 0, 0), a;
+  }
+  return a.setHours(0, 0, 0, 0), a;
+}
+function xe(e) {
+  const t = e.getHours().toString().padStart(2, "0"), a = e.getMinutes().toString().padStart(2, "0");
+  return `${t}${a}`;
+}
+const we = (e) => {
+  const t = be(), a = x(
+    () => ({ placeholder: e.timePlaceholder }),
+    [e.timePlaceholder]
+  );
+  if (!e.editable) {
+    const n = fe(e.currentDate, {
+      includeTime: !0,
+      timeValue: e.currentTime
+    }), o = n || e.labels?.emptyState || "", D = e.selectedDates ?? e.defaultSelectedDates ?? [], c = e.readOnlyRenderer?.(
+      D,
+      o,
+      !0,
+      e.currentTime
+    );
+    return c != null ? /* @__PURE__ */ l(ce, { children: c }) : n ? /* @__PURE__ */ l(K, { children: n }) : /* @__PURE__ */ l(K, { style: { opacity: 0.7 }, children: e.labels?.emptyState ?? "" });
+  }
+  return /* @__PURE__ */ me("div", { className: t.dateTimeContainer, children: [
+    /* @__PURE__ */ l("div", { className: w("efw-date-picker", t.datePickerWrapper), children: /* @__PURE__ */ l(
+      Z,
+      {
+        editable: e.editable,
+        selectedDates: e.selectedDates,
+        defaultSelectedDates: e.defaultSelectedDates,
+        minDate: e.minDate,
+        maxDate: e.maxDate,
+        onChange: e.onDateChange,
+        allowTextInput: e.allowTextInput,
+        disabled: e.disabled,
+        restrictedDates: e.restrictedDates,
+        allowRangeSelection: e.allowRangeSelection,
+        showGoToToday: e.showGoToToday,
+        showCloseButton: e.showCloseButton,
+        localizedStrings: e.localizedStrings,
+        friendlyDateFormat: e.friendlyDateFormat,
+        onSelectDate: e.onSelectDate,
+        onFormatDate: e.onFormatDate,
+        labels: e.labels,
+        setParentComponentState: e.setParentComponentState,
+        validationState: e.validationState
+      }
+    ) }),
+    /* @__PURE__ */ l("div", { className: w("efw-time-input", t.timeInputWrapper), children: /* @__PURE__ */ l(
+      he,
+      {
+        value: e.currentTime,
+        formatType: "time",
+        labels: a,
+        editable: e.editable,
+        disabled: e.disabled,
+        onChange: e.onTimeChange,
+        setParentComponentState: e.setParentComponentState,
+        validationState: e.validationState
+      }
+    ) })
+  ] });
+}, Re = (e) => {
+  const {
+    title: t,
+    infoLabel: a,
+    hint: n,
+    className: o,
+    style: D = ye,
+    required: c = !1,
+    validationState: p,
+    validationMessage: ee,
+    validationMessageIcon: te,
+    disabled: P = !1,
+    editable: S = !0,
+    hidden: ae = !1,
+    onChange: m,
+    selectedDates: r,
+    defaultSelectedDates: h,
+    allowRangeSelection: I = !1,
+    restrictedDates: v = Ce,
+    allowTextInput: F = !0,
+    minDate: E,
+    maxDate: N,
+    showGoToToday: W,
+    showCloseButton: k,
+    localizedStrings: V,
+    friendlyDateFormat: L = !1,
+    onSelectDate: R,
+    onFormatDate: M,
+    labels: O,
+    readOnlyRenderer: H,
+    onValidationChange: ne,
+    // Props de tiempo
+    includeTime: u = !1,
+    timeValue: z,
+    defaultTimeValue: le = "",
+    timePlaceholder: ie = "HH:MM",
+    ...oe
+  } = e, j = Te().datePicker.labels, A = j.placeholder, B = j.emptyState, G = O?.placeholder, Y = O?.emptyState, _ = x(() => ({
+    placeholder: G ?? A,
+    emptyState: Y ?? B
+  }), [
+    G,
+    Y,
+    A,
+    B
+  ]), d = z !== void 0, [re, g] = De(le), T = d ? z : re, b = Se(null), y = x(() => q(Q(r ?? h))[0] ?? null, [r, h]);
+  U(() => {
+    b.current = y;
+  }, [y]), U(() => {
+    if (!u) return;
+    if (!r || r.length === 0) {
+      d || g("");
+      return;
+    }
+    const i = q(Q(r))[0];
+    i && (isNaN(i.getTime()) || d || g(xe(i)));
+  }, [r, u, d]);
+  const $ = J((i) => {
+    const f = (s) => s instanceof Date ? s.toISOString() : s;
+    if (!u) {
+      m?.(i.map(f));
+      return;
+    }
+    const C = i.map((s) => s instanceof Date ? X(s, T).toISOString() : s);
+    m?.(C);
+  }, [u, T, m]), se = J((i) => {
+    const f = i ?? "";
+    if (d || g(f), b.current && f.length === 4) {
+      const C = X(b.current, f);
+      m?.([C.toISOString()]);
+    }
+  }, [d, m]), de = w(o, "efw-datePicker-field");
+  return /* @__PURE__ */ l(
+    ue,
+    {
+      className: de,
+      style: D,
+      title: t,
+      infoLabel: a,
+      weightLabel: S ? "regular" : "semibold",
+      hint: n,
+      hidden: ae,
+      required: c,
+      validationState: p,
+      validationMessage: ee,
+      validationMessageIcon: te,
+      onValidationChange: ne,
+      ...oe,
+      children: u ? /* @__PURE__ */ l(
+        we,
+        {
+          editable: S,
+          disabled: P,
+          selectedDates: r,
+          defaultSelectedDates: h,
+          minDate: E,
+          maxDate: N,
+          onDateChange: $,
+          allowTextInput: F,
+          restrictedDates: v,
+          allowRangeSelection: I,
+          showGoToToday: W,
+          showCloseButton: k,
+          localizedStrings: V,
+          friendlyDateFormat: L,
+          onSelectDate: R,
+          onFormatDate: M,
+          labels: _,
+          currentTime: T,
+          onTimeChange: se,
+          timePlaceholder: ie,
+          currentDate: y,
+          readOnlyRenderer: H
+        }
+      ) : /* @__PURE__ */ l(
+        Z,
+        {
+          editable: S,
+          readOnlyRenderer: H,
+          selectedDates: r,
+          defaultSelectedDates: h,
+          minDate: E,
+          maxDate: N,
+          onChange: $,
+          allowTextInput: F,
+          disabled: P,
+          restrictedDates: v,
+          allowRangeSelection: I,
+          showGoToToday: W,
+          showCloseButton: k,
+          localizedStrings: V,
+          friendlyDateFormat: L,
+          onSelectDate: R,
+          onFormatDate: M,
+          labels: _
+        }
+      )
+    }
+  );
+};
+export {
+  Re as EFWDatePickerField
+};

package/dist/react-components/fields/DatePicker/EFWDatePickerField.types.d.ts

@@ -0,0 +1,15 @@
+import { EFWFieldProps } from '../_shared/EFWField/EFWField.types';
+import { EFWDatePickerProps, EFWDatePickerValue, EFWDatePickerOnChange } from './EFWDatePicker.types';
+
+export type EFWDatePickerFieldValue = EFWDatePickerValue;
+export type EFWDatePickerFieldOnChange = EFWDatePickerOnChange;
+export interface EFWDatePickerFieldProps extends Omit<EFWFieldProps, 'children'>, EFWDatePickerProps {
+    /** Renderiza un input de hora (HH:MM) junto al date picker. @default false */
+    includeTime?: boolean;
+    /** Valor de hora controlado, 4 dígitos raw (ej: "1430" = 14:30). Solo aplica cuando includeTime es true. */
+    timeValue?: string;
+    /** Valor inicial de hora para modo no controlado (ej: "0800"). Solo aplica cuando includeTime es true. */
+    defaultTimeValue?: string;
+    /** Placeholder del input de hora. @default "HH:MM" */
+    timePlaceholder?: string;
+}

package/dist/react-components/fields/DatePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { EFWDatePicker } from './EFWDatePicker';
+export { getDatePickerFormattedValue } from './EFWDatePicker.utils';
+export { esLocalizedStrings, enLocalizedStrings, ptLocalizedStrings } from './EFWDatePicker.utils';
+export type { EFWDatePickerProps, EFWDatePickerValue, EFWDatePickerOnChange, EFWDatePickerNonEditableRenderer } from './EFWDatePicker.types';
+export { EFWDatePickerField } from './EFWDatePickerField';
+export type { EFWDatePickerFieldProps, EFWDatePickerFieldValue, EFWDatePickerFieldOnChange } from './EFWDatePickerField.types';

package/dist/react-components/fields/DatePicker/index.js

@@ -0,0 +1,11 @@
+import { EFWDatePicker as t } from "./EFWDatePicker.js";
+import { enLocalizedStrings as o, esLocalizedStrings as a, getDatePickerFormattedValue as c, ptLocalizedStrings as d } from "./EFWDatePicker.utils.js";
+import { EFWDatePickerField as g } from "./EFWDatePickerField.js";
+export {
+  t as EFWDatePicker,
+  g as EFWDatePickerField,
+  o as enLocalizedStrings,
+  a as esLocalizedStrings,
+  c as getDatePickerFormattedValue,
+  d as ptLocalizedStrings
+};

package/dist/react-components/fields/Input/EFWInput.d.ts

@@ -0,0 +1,10 @@
+import { EFWInputProps } from './EFWInput.types';
+
+/**
+ * Campo de texto con soporte para modo controlled/uncontrolled, formato visual,
+ * normalización de valor crudo, validación y render de solo lectura.
+ *
+ * Los contratos públicos viven en `EFWInput.types.tsx`; este componente se
+ * encarga de orquestar estado, callbacks y render.
+ */
+export declare const EFWInput: (props: EFWInputProps) => import("react/jsx-runtime").JSX.Element;