impact-nova 2.0.8 → 2.1.0-alpha.1

package/dist/components/data-display/calendar/use-calendar-state.d.ts

@@ -0,0 +1,65 @@
+import { DateRange } from 'react-day-picker';
+import { FiscalMode, FiscalMonthPattern } from '../../../lib/fiscal-calendar';
+import { CalendarApplyValue, MonthRange, MonthSelection, WeekRange, WeekSelection } from './calendar.types';
+export interface UseCalendarStateOptions {
+    showFooter: boolean;
+    selected?: Date | Date[] | DateRange;
+    onSelect?: (date: Date | Date[] | DateRange | undefined) => void;
+    pickerType: "date" | "week" | "month";
+    weekMode: "single" | "multiple" | "range";
+    selectedWeeks?: WeekSelection | WeekSelection[] | WeekRange;
+    onWeekSelect?: (weeks: WeekSelection | WeekSelection[] | WeekRange | undefined) => void;
+    calendarType: "calendar" | "fiscal";
+    fiscalMode: FiscalMode;
+    selectionMode: "week" | "fiscalMonth";
+    resolvedFiscalPattern?: FiscalMonthPattern;
+    fiscalYearStartMonth: number;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    monthMode: "single" | "multiple" | "range";
+    selectedMonths?: MonthSelection | MonthSelection[] | MonthRange;
+    onMonthSelect?: (months: MonthSelection | MonthSelection[] | MonthRange | undefined) => void;
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    resolvedStartMonth: Date;
+    resolvedEndMonth: Date;
+    disabled?: unknown;
+    onApply?: (value: CalendarApplyValue) => void;
+    onCancel?: () => void;
+    onClear?: () => void;
+}
+export declare function useCalendarState({ showFooter, selected, onSelect, pickerType, weekMode, selectedWeeks, onWeekSelect, calendarType, fiscalMode, selectionMode, resolvedFiscalPattern, fiscalYearStartMonth, weekStartsOn, monthMode, selectedMonths, onMonthSelect, month, defaultMonth, onMonthChange, resolvedStartMonth, resolvedEndMonth, disabled, onApply, onCancel, onClear, }: UseCalendarStateOptions): {
+    pendingSelection: Date | DateRange | Date[] | undefined;
+    currentMonth: Date;
+    pendingWeekSelection: WeekSelection | WeekRange | WeekSelection[] | undefined;
+    pendingMonthSelection: MonthSelection | MonthRange | MonthSelection[] | undefined;
+    monthPickerYear: number;
+    handleMonthChangeInternal: (newMonth: Date) => void;
+    resolveWeekFromInput: (weekOrDate: Date | {
+        days: Array<{
+            date: Date;
+            outside?: boolean;
+        }>;
+    }) => WeekSelection;
+    handleWeekClick: (week: WeekSelection) => void;
+    handleMonthClick: (year: number, monthIndex: number) => void;
+    availableYears: import('../../..').Option[];
+    selectedDaysFromWeeks: Date[] | undefined;
+    weekRangeModifiers: {
+        range_start: Date[];
+        range_middle: Date[];
+        range_end: Date[];
+    };
+    handleInternalSelect: (date: Date | Date[] | DateRange | undefined) => void;
+    handleApply: () => void;
+    handleCancel: () => void;
+    handleClear: () => void;
+    isMonthSelected: (year: number, monthIndex: number) => boolean;
+    getMonthRangeProps: (year: number, monthIndex: number) => {
+        isStart: boolean;
+        isEnd: boolean;
+        isMiddle: boolean;
+    };
+    isMonthDisabled: (year: number, monthIndex: number) => boolean;
+    isApplyDisabledInternal: boolean;
+};

package/dist/components/data-display/calendar/use-calendar-state.js

@@ -0,0 +1,197 @@
+import * as i from "react";
+import { isCalendarApplyDisabled as ln } from "./calendar-apply-validation.js";
+import { nextMonthSelection as y, getAvailableYears as gn, isMonthSelected as mn, getMonthRangeProps as Cn, isMonthDisabled as bn } from "./calendar-month-utils.js";
+import { calculateWeekSelection as Dn, nextWeekSelection as W, weekSelectionsToDates as cn, computeWeekRangeModifiers as vn } from "./calendar-week-utils.js";
+function Rn({
+  showFooter: a,
+  selected: t,
+  onSelect: C,
+  pickerType: r,
+  weekMode: c,
+  selectedWeeks: f,
+  onWeekSelect: l,
+  calendarType: B,
+  fiscalMode: G,
+  selectionMode: H,
+  resolvedFiscalPattern: J,
+  fiscalYearStartMonth: K,
+  weekStartsOn: L,
+  monthMode: P,
+  selectedMonths: g,
+  onMonthSelect: m,
+  month: v,
+  defaultMonth: N,
+  onMonthChange: O,
+  resolvedStartMonth: Q,
+  resolvedEndMonth: S,
+  disabled: x,
+  onApply: R,
+  onCancel: U,
+  onClear: V
+}) {
+  const [A, Y] = i.useState(t), [X, Z] = i.useState(() => {
+    if (v) return v;
+    if (N) return N;
+    if (t) {
+      if (Array.isArray(t))
+        return t[0] || /* @__PURE__ */ new Date();
+      if (t instanceof Date)
+        return t;
+      if ("from" in t && t.from)
+        return t.from;
+    }
+    return /* @__PURE__ */ new Date();
+  }), [s, I] = i.useState(f), [b, _] = i.useState(g), [h, M] = i.useState(
+    X.getFullYear()
+  );
+  i.useEffect(() => {
+    v && (Z(v), M(v.getFullYear()));
+  }, [v]), i.useEffect(() => {
+    Y(t), I(f), _(g);
+  }, [t, f, g]);
+  const F = i.useCallback(
+    (n) => {
+      Z(n), M(n.getFullYear()), O?.(n);
+    },
+    [O]
+  ), k = i.useMemo(
+    () => ({
+      calendarType: B,
+      fiscalMode: G,
+      selectionMode: H,
+      fiscalMonthPattern: J,
+      fiscalYearStartMonth: K,
+      weekStartsOn: L
+    }),
+    [
+      B,
+      G,
+      H,
+      J,
+      K,
+      L
+    ]
+  ), j = i.useCallback(
+    (n) => Dn(n, k),
+    [k]
+  ), q = i.useCallback(
+    (n) => {
+      if (a) {
+        I((E) => {
+          const D = W(n, E, c);
+          return l?.(D), D;
+        });
+        return;
+      }
+      const u = W(n, f, c);
+      l?.(
+        c === "multiple" ? Array.isArray(u) && u.length > 0 ? u : void 0 : u
+      );
+    },
+    [c, a, f, l]
+  ), w = i.useCallback(
+    (n, u) => {
+      const E = { year: n, month: u };
+      if (a) {
+        _((sn) => {
+          const o = y(E, sn, P);
+          return m?.(o), o;
+        });
+        return;
+      }
+      const D = y(E, g, P);
+      m?.(
+        P === "multiple" ? Array.isArray(D) && D.length > 0 ? D : void 0 : D
+      );
+    },
+    [P, a, g, m]
+  ), T = i.useMemo(
+    () => gn(Q, S),
+    [Q, S]
+  ), z = i.useMemo(() => r !== "week" ? void 0 : cn(a ? s : f), [r, a, s, f]), p = i.useMemo(() => r !== "week" ? { range_start: [], range_middle: [], range_end: [] } : vn(z, c, a ? s : f), [
+    r,
+    z,
+    c,
+    a,
+    s,
+    f
+  ]), d = i.useCallback(
+    (n) => {
+      if (r === "week" && n) {
+        const u = Array.isArray(n) ? n[n.length - 1] : n instanceof Date ? n : void 0;
+        if (u) {
+          q(j(u));
+          return;
+        }
+      }
+      a && Y(n), C?.(n);
+    },
+    [a, C, r, j, q]
+  ), e = i.useCallback(() => {
+    r === "week" ? (l?.(s), R?.(s)) : r === "month" ? (m?.(b), R?.(b)) : (C?.(A), R?.(A));
+  }, [
+    A,
+    s,
+    b,
+    C,
+    l,
+    m,
+    R,
+    r
+  ]), nn = i.useCallback(() => {
+    r === "week" ? I(f) : r === "month" ? _(g) : Y(t), U?.();
+  }, [t, f, g, U, r]), an = i.useCallback(() => {
+    r === "week" ? (I(void 0), a || l?.(void 0)) : r === "month" ? (_(void 0), a || m?.(void 0)) : (Y(void 0), a || C?.(void 0)), V?.();
+  }, [a, C, l, m, V, r]), $ = a ? b : g, rn = i.useCallback(
+    (n, u) => mn(n, u, $),
+    [$]
+  ), un = i.useCallback(
+    (n, u) => Cn(n, u, $),
+    [$]
+  ), tn = i.useCallback(
+    (n, u) => bn(n, u, x),
+    [x]
+  ), fn = i.useMemo(
+    () => ln({
+      showFooter: a,
+      pickerType: r,
+      disabled: x,
+      pendingSelection: A,
+      pendingWeekSelection: s,
+      pendingMonthSelection: b
+    }),
+    [
+      a,
+      r,
+      x,
+      A,
+      s,
+      b
+    ]
+  );
+  return {
+    pendingSelection: A,
+    currentMonth: X,
+    pendingWeekSelection: s,
+    pendingMonthSelection: b,
+    monthPickerYear: h,
+    handleMonthChangeInternal: F,
+    resolveWeekFromInput: j,
+    handleWeekClick: q,
+    handleMonthClick: w,
+    availableYears: T,
+    selectedDaysFromWeeks: z,
+    weekRangeModifiers: p,
+    handleInternalSelect: d,
+    handleApply: e,
+    handleCancel: nn,
+    handleClear: an,
+    isMonthSelected: rn,
+    getMonthRangeProps: un,
+    isMonthDisabled: tn,
+    isApplyDisabledInternal: fn
+  };
+}
+export {
+  Rn as useCalendarState
+};

package/dist/components/data-display/card/card.d.ts

@@ -0,0 +1,8 @@
+import { CardProps } from './card.types';
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardTitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardDescription: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardContent: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardFooter: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/data-display/card/card.js

@@ -0,0 +1,47 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createComponent as d } from "../../../lib/primitives/create-component.js";
+import { createCompoundPart as a } from "../../../lib/primitives/create-compound.js";
+import { cn as s } from "../../../lib/utils.js";
+const i = d(
+  "Card",
+  ({ className: e, ...t }, r) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: r,
+      "data-component": "card",
+      className: s(
+        "rounded-xl border bg-canvas-elevated text-canvas-elevated-foreground shadow",
+        e
+      ),
+      ...t
+    }
+  )
+), l = a("card", {
+  part: "header",
+  displayName: "CardHeader",
+  className: "flex flex-col space-y-1.5 p-6"
+}), C = a("card", {
+  part: "title",
+  displayName: "CardTitle",
+  className: "font-semibold leading-none tracking-tight"
+}), N = a("card", {
+  part: "description",
+  displayName: "CardDescription",
+  className: "text-sm text-content-muted"
+}), f = a("card", {
+  part: "content",
+  displayName: "CardContent",
+  className: "p-6 pt-0"
+}), x = a("card", {
+  part: "footer",
+  displayName: "CardFooter",
+  className: "flex items-center p-6 pt-0"
+});
+export {
+  i as Card,
+  f as CardContent,
+  N as CardDescription,
+  x as CardFooter,
+  l as CardHeader,
+  C as CardTitle
+};

package/dist/components/data-display/card/card.types.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+export type CardProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardTitleProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/components/data-display/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, } from './card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from './card.types';

package/dist/components/data-display/card/index.js

@@ -0,0 +1,9 @@
+import { Card as d, CardContent as e, CardDescription as C, CardFooter as o, CardHeader as t, CardTitle as i } from "./card.js";
+export {
+  d as Card,
+  e as CardContent,
+  C as CardDescription,
+  o as CardFooter,
+  t as CardHeader,
+  i as CardTitle
+};

package/dist/components/data-display/chart/chart.d.ts

@@ -0,0 +1,29 @@
+import { default as HighchartsReact } from 'highcharts-react-official';
+import { ChartProps } from './chart.types';
+import * as React from 'react';
+declare global {
+    interface Document {
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: () => Promise<void>;
+        msFullscreenElement?: Element;
+        msExitFullscreen?: () => Promise<void>;
+    }
+    interface HTMLElement {
+        webkitRequestFullscreen?: () => Promise<void>;
+        msRequestFullscreen?: () => Promise<void>;
+    }
+}
+interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isLoading?: boolean;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChartHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ChartActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartFullScreen: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+interface ChartContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    loader?: React.ReactNode;
+}
+declare const ChartContent: React.ForwardRefExoticComponent<ChartContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<HighchartsReact.RefObject>>;
+export { Chart, ChartContainer, ChartHeader, ChartTitle, ChartActions, ChartFullScreen, ChartContent };

package/dist/components/data-display/chart/chart.js

@@ -0,0 +1,199 @@
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import * as t from "react";
+import x from "highcharts-react-official";
+import { cn as h } from "../../../lib/utils.js";
+import { Skeleton as k } from "../skeleton/skeleton.js";
+import { Collapse as A, Expand as I } from "impact-nova-icons";
+import { Button as H } from "../../primitives/button/button.js";
+import { getInitializedHighcharts as j } from "./initializeHighcharts.js";
+import { getBaseChartOptions as B } from "./chart.utils.js";
+import { useImpactNovaI18n as P } from "../../../i18n/use-impact-nova-i18n.js";
+const v = j(), E = t.createContext(null), z = () => {
+  const n = t.useContext(E);
+  if (!n)
+    throw new Error("Chart components must be used within a ChartContainer");
+  return n;
+}, S = t.forwardRef(
+  ({ className: n, children: s, isLoading: l = !1, ...i }, m) => {
+    const a = t.useRef(null), o = t.useRef(null), [c, u] = t.useState(!1), [R, d] = t.useState(!1);
+    t.useImperativeHandle(m, () => a.current);
+    const w = () => {
+      const e = a.current;
+      e && (d(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
+        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), u(!0), e.classList.remove("fullscreen-animating");
+      }, 200));
+    }, g = () => {
+      const e = a.current;
+      e && (d(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
+        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), u(!1), e.classList.remove("fullscreen-animating-out");
+      }, 200));
+    }, p = () => {
+      c ? g() : w();
+    };
+    return t.useEffect(() => {
+      const e = () => {
+        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || u(!1);
+      };
+      return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
+        document.removeEventListener("fullscreenchange", e), document.removeEventListener(
+          "webkitfullscreenchange",
+          e
+        );
+      };
+    }, []), t.useEffect(() => {
+      if (!o?.current?.chart) return;
+      const e = o.current.chart;
+      let f = null;
+      const N = () => {
+        c && a.current ? (f && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
+          const C = a.current;
+          if (!C) return;
+          const b = C.getBoundingClientRect(), y = C.querySelector('[class*="ChartContent"]');
+          if (y) {
+            const L = y.getBoundingClientRect();
+            e.setSize(L.width, L.height, !1);
+          } else
+            e.setSize(b.width, b.height, !1);
+          f = null;
+        })) : (e.setSize(null, null, !1), e.reflow());
+      };
+      return window.addEventListener("resize", N), () => {
+        f && cancelAnimationFrame(f), window.removeEventListener("resize", N);
+      };
+    }, [c]), /* @__PURE__ */ r(
+      E.Provider,
+      {
+        value: {
+          isExpanded: c,
+          toggleFullscreen: p,
+          isLoading: l,
+          containerRef: a,
+          chartComponentRef: o
+        },
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: a,
+            "data-component": "chart",
+            className: h(
+              n,
+              "w-full relative bg-canvas-elevated transition-all duration-200 ease-in-out",
+              c && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
+              R && "overflow-hidden"
+            ),
+            ...i,
+            children: s
+          }
+        )
+      }
+    );
+  }
+);
+S.displayName = "ChartContainer";
+const T = t.forwardRef(
+  ({ className: n, children: s, ...l }, i) => /* @__PURE__ */ r("div", { ref: i, className: h("flex items-center justify-between mb-4", n), ...l, children: s })
+);
+T.displayName = "ChartHeader";
+const M = t.forwardRef(
+  ({ className: n, ...s }, l) => /* @__PURE__ */ r("h3", { ref: l, className: h("text-lg font-semibold leading-none tracking-tight", n), ...s })
+);
+M.displayName = "ChartTitle";
+const O = t.forwardRef(
+  ({ className: n, ...s }, l) => /* @__PURE__ */ r("div", { ref: l, className: h("flex items-center gap-2", n), ...s })
+);
+O.displayName = "ChartActions";
+const V = t.forwardRef(
+  ({ className: n, ...s }, l) => {
+    const { t: i } = P(), { toggleFullscreen: m, isExpanded: a } = z(), o = i("aria.toggleFullscreen");
+    return /* @__PURE__ */ F(
+      H,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: m,
+        ref: l,
+        className: h("h-8 w-8", n),
+        "aria-label": o,
+        ...s,
+        children: [
+          a ? /* @__PURE__ */ r(A, { className: "h-4 w-4" }) : /* @__PURE__ */ r(I, { className: "h-4 w-4" }),
+          /* @__PURE__ */ r("span", { className: "sr-only", children: o })
+        ]
+      }
+    );
+  }
+);
+V.displayName = "ChartFullScreen";
+const q = t.forwardRef(
+  ({ className: n, children: s, loader: l, ...i }, m) => {
+    const { isLoading: a, chartComponentRef: o, isExpanded: c } = z();
+    return a && l ? /* @__PURE__ */ r("div", { ref: m, className: h(n, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", c && "min-h-0"), ...i, children: l }) : /* @__PURE__ */ F("div", { ref: m, className: h(n, "w-full relative flex-1 min-h-[300px]", c && "min-h-0"), ...i, children: [
+      a && /* @__PURE__ */ F("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
+        /* @__PURE__ */ r(k, { className: "h-8 w-1/3" }),
+        /* @__PURE__ */ r(k, { className: "flex-1 w-full" })
+      ] }),
+      t.Children.map(s, (u) => t.isValidElement(u) ? t.cloneElement(u, { ref: o }) : u)
+    ] });
+  }
+);
+q.displayName = "ChartContent";
+const W = t.forwardRef(
+  (n, s) => {
+    const {
+      height: l,
+      width: i,
+      className: m,
+      isLoading: a,
+      loader: o,
+      title: c,
+      noWrapper: u,
+      children: R,
+      ...d
+    } = n, w = t.useContext(E), g = t.useMemo(() => {
+      const p = B({ title: c, ...d });
+      return {
+        ...p,
+        chart: {
+          ...p.chart,
+          height: l ?? null,
+          width: i ?? null
+        }
+      };
+    }, [c, l, i, d]);
+    return u ? /* @__PURE__ */ r(
+      x,
+      {
+        highcharts: v,
+        options: g,
+        ref: s,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) : w ? /* @__PURE__ */ r(
+      x,
+      {
+        highcharts: v,
+        options: g,
+        ref: s,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) : /* @__PURE__ */ r(S, { className: m, isLoading: a, children: /* @__PURE__ */ r(q, { loader: o, children: /* @__PURE__ */ r(
+      x,
+      {
+        highcharts: v,
+        options: g,
+        ref: s,
+        containerProps: { style: { height: "100%", width: "100%" } }
+      }
+    ) }) });
+  }
+);
+W.displayName = "Chart";
+export {
+  W as Chart,
+  O as ChartActions,
+  S as ChartContainer,
+  q as ChartContent,
+  V as ChartFullScreen,
+  T as ChartHeader,
+  M as ChartTitle
+};

package/dist/components/data-display/chart/chart.utils.d.ts

@@ -0,0 +1,3 @@
+import { ChartProps } from './chart.types';
+import type * as Highcharts from 'highcharts';
+export declare const getBaseChartOptions: (props: ChartProps) => Highcharts.Options;