@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.8

package/dist/components/page-kits/DashboardPageKit.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { ActivityFeedBlock } from "../blocks/ActivityFeedBlock";
+import { type MetricCardProps } from "../ui/MetricCard";
+import { type NavigationShellPageKitProps } from "./NavigationShellPageKit";
+export type DashboardPageKitRegionState = "loading" | "empty" | "error" | "has-data" | "partial-data";
+export interface DashboardPageKitChartRegion {
+    id: string;
+    title: string;
+    description?: string;
+    data: unknown[];
+    chart: React.ReactNode;
+    state?: DashboardPageKitRegionState;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    errorMessage?: string;
+    className?: string;
+}
+type ActivityFeedItems = React.ComponentProps<typeof ActivityFeedBlock>["activities"];
+export interface DashboardPageKitActivityRegion {
+    title?: string;
+    items?: ActivityFeedItems;
+    state?: DashboardPageKitRegionState;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    errorMessage?: string;
+}
+export interface DashboardPageKitProps {
+    shell: Omit<NavigationShellPageKitProps, "children">;
+    title?: string;
+    description?: string;
+    kpis?: MetricCardProps[];
+    kpiState?: DashboardPageKitRegionState;
+    chartRegions?: DashboardPageKitChartRegion[];
+    activityRegion?: DashboardPageKitActivityRegion;
+    lastUpdated?: Date;
+    className?: string;
+}
+export declare function DashboardPageKit({ shell, title, description, kpis, kpiState, chartRegions, activityRegion, lastUpdated, className, }: DashboardPageKitProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/page-kits/DashboardPageKit.js

@@ -0,0 +1,284 @@
+import { NavigationShellPageKit } from '../../chunk-ZKLB5N3Q.js';
+import { ActivityFeedBlock } from '../../chunk-ZM2NODUK.js';
+import { Typography } from '../../chunk-N53OMWW2.js';
+import '../../chunk-YQIABLDO.js';
+import '../../chunk-J2DCQDXO.js';
+import '../../chunk-C4SNHMYC.js';
+import '../../chunk-B5QL76GA.js';
+import '../../chunk-HOWTYZL5.js';
+import { MetricCard } from '../../chunk-BRXNGF5W.js';
+import '../../chunk-ULLTRLBD.js';
+import '../../chunk-RHEF3WH6.js';
+import '../../chunk-3R2VLZUR.js';
+import '../../chunk-4O6L5YWT.js';
+import { Heading } from '../../chunk-WI547C47.js';
+import { DataFreshness } from '../../chunk-WST5NLLC.js';
+import '../../chunk-CUZJIDU7.js';
+import '../../chunk-AP3XXYAY.js';
+import '../../chunk-LIBXYD5Q.js';
+import { ChartCard } from '../../chunk-HJZRSPWB.js';
+import '../../chunk-RASEB2XI.js';
+import { Empty, EmptyTitle, EmptyDescription } from '../../chunk-55HD4L6G.js';
+import '../../chunk-MJ4CB6ZL.js';
+import '../../chunk-I23DDSU7.js';
+import '../../chunk-35EX5FP5.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../../chunk-AH6YSYYT.js';
+import '../../chunk-NAAU5IWU.js';
+import '../../chunk-7KIDDF3I.js';
+import '../../chunk-6FOHUNXR.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import '../../chunk-GO35FTNJ.js';
+import '../../chunk-WUO7OONN.js';
+import '../../chunk-FLF5AMNO.js';
+import '../../chunk-3CLXYQKB.js';
+import '../../chunk-S4GKGKON.js';
+import '../../chunk-LCDDAE7J.js';
+import '../../chunk-R674XI7C.js';
+import '../../chunk-HNY45VUQ.js';
+import '../../chunk-BPCCTJSK.js';
+import '../../chunk-CGUCH322.js';
+import '../../chunk-ELKIUARM.js';
+import '../../chunk-KSHJQ2VT.js';
+import '../../chunk-GAKU7DFY.js';
+import '../../chunk-T6BRD7TS.js';
+import '../../chunk-TXGANOAX.js';
+import '../../chunk-OITJWGFV.js';
+import '../../chunk-Z74D6D2W.js';
+import '../../chunk-7WDT2PRI.js';
+import '../../chunk-IJJI4RQU.js';
+import '../../chunk-E7RBK6ML.js';
+import '../../chunk-UBIGDGOP.js';
+import '../../chunk-ALMGJVMT.js';
+import '../../chunk-QPXTBZWN.js';
+import '../../chunk-4NXZIMYZ.js';
+import '../../chunk-R5XP45PD.js';
+import '../../chunk-G5EO5FWC.js';
+import '../../chunk-NCULQXJE.js';
+import '../../chunk-VDYPDMYR.js';
+import '../../chunk-WDGIQDQG.js';
+import '../../chunk-RYOTIXZO.js';
+import '../../chunk-JZ4G2SJH.js';
+import '../../chunk-KYGKJ553.js';
+import '../../chunk-M7YSMMAC.js';
+import '../../chunk-XQ2UDMPO.js';
+import '../../chunk-JMCSAGZ3.js';
+import '../../chunk-QUKDUSHD.js';
+import '../../chunk-O74AEVHW.js';
+import '../../chunk-ZUHIWALK.js';
+import '../../chunk-2IZC7HSV.js';
+import '../../chunk-2SDZMTB2.js';
+import '../../chunk-IQEBXXB5.js';
+import '../../chunk-AZUJNRQU.js';
+import '../../chunk-W3B3UOEG.js';
+import '../../chunk-ACRVOD7W.js';
+import '../../chunk-QSU23VYZ.js';
+import '../../chunk-BJYCQ2NV.js';
+import '../../chunk-VM462WZC.js';
+import '../../chunk-5UZDOF6V.js';
+import '../../chunk-PKVTEDKO.js';
+import '../../chunk-I3TH7PIB.js';
+import '../../chunk-WGPK3FQ7.js';
+import '../../chunk-JL4MVVFH.js';
+import '../../chunk-4FEAWXJD.js';
+import '../../chunk-JHQTKMKG.js';
+import '../../chunk-WA45EC4Y.js';
+import '../../chunk-2MOEOEOI.js';
+import '../../chunk-5LCXASRW.js';
+import '../../chunk-2ZJVU7NV.js';
+import '../../chunk-5ESF6N36.js';
+import '../../chunk-RBPLOM3A.js';
+import '../../chunk-6BAV4TZ5.js';
+import '../../chunk-SW6QPJM4.js';
+import '../../chunk-2NT57K4U.js';
+import '../../chunk-JRJGSNI4.js';
+import '../../chunk-RF6ECFS5.js';
+import '../../chunk-KYZT3RNW.js';
+import '../../chunk-UEG2LI7Z.js';
+import '../../chunk-CI7GPGCJ.js';
+import '../../chunk-226EBOTK.js';
+import '../../chunk-74RKVIBV.js';
+import '../../chunk-V6WNRZT3.js';
+import '../../chunk-JBK2LA6U.js';
+import '../../chunk-55U27XY4.js';
+import '../../chunk-LSPO6OBI.js';
+import '../../chunk-Y56WBNCY.js';
+import '../../chunk-JJTQOH7J.js';
+import '../../chunk-72X6SXOX.js';
+import '../../chunk-SR5U52V3.js';
+import '../../chunk-AWIJHDNK.js';
+import '../../chunk-MAUTIHQG.js';
+import '../../chunk-S733NAYS.js';
+import '../../chunk-666N6OTL.js';
+import '../../chunk-FMH55OKV.js';
+import '../../chunk-WXVNTJIB.js';
+import '../../chunk-T7H53CK2.js';
+import '../../chunk-TBKJ34BB.js';
+import '../../chunk-BRP6D56U.js';
+import '../../chunk-6G3RRWJT.js';
+import '../../chunk-ZU2GYVAP.js';
+import '../../chunk-CRZ2JE24.js';
+import '../../chunk-PSVQ7ZNX.js';
+import '../../chunk-WKRIKCJC.js';
+import '../../chunk-JHQ5NMLZ.js';
+import '../../chunk-WFJQ43SM.js';
+import '../../chunk-AP5Y5M3R.js';
+import '../../chunk-Q7LVUGFL.js';
+import '../../chunk-G5YLGJXR.js';
+import '../../chunk-G24VV5NO.js';
+import '../../chunk-R3AO6AZM.js';
+import '../../chunk-GCUTJI7M.js';
+import '../../chunk-CXACRCZ4.js';
+import '../../chunk-P6IRHPFM.js';
+import '../../chunk-SXHYB7JB.js';
+import '../../chunk-BFLN54VR.js';
+import '../../chunk-ONGJ7AC2.js';
+import '../../chunk-UHXGBV5N.js';
+import '../../chunk-UIUMTURU.js';
+import '../../chunk-PRUXIDBD.js';
+import '../../chunk-NURPUVUV.js';
+import '../../chunk-S4JAHKOP.js';
+import '../../chunk-TV4RSQH4.js';
+import '../../chunk-HJBXUXTD.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var EMPTY_KPIS = [];
+var EMPTY_CHART_REGIONS = [];
+var EMPTY_ACTIVITY_ITEMS = [];
+function deriveRegionState(state, data) {
+  if (state) {
+    return state;
+  }
+  if (!data || data.length === 0) {
+    return "empty";
+  }
+  return "has-data";
+}
+function renderChartRegion(region) {
+  const state = deriveRegionState(region.state, region.data);
+  const isPartialDataState = state === "partial-data";
+  if (state === "error") {
+    return /* @__PURE__ */ jsxs(Card, { className: region.className, children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: region.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: region.errorMessage ?? "Chart region is unavailable."
+        }
+      ) })
+    ] }, region.id);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", region.className), children: [
+    isPartialDataState ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Some chart points are still loading, available data remains visible." }) : null,
+    /* @__PURE__ */ jsx(
+      ChartCard,
+      {
+        title: region.title,
+        description: region.description,
+        chart: region.chart,
+        data: state === "empty" ? [] : region.data,
+        loading: state === "loading",
+        emptyTitle: region.emptyTitle ?? "No chart data",
+        emptyDescription: region.emptyDescription ?? "This chart will populate once data is available."
+      }
+    )
+  ] }, region.id);
+}
+function DashboardPageKit({
+  shell,
+  title = "Dashboard overview",
+  description = "Track KPI performance, chart health, and recent activity from one route-level contract.",
+  kpis = EMPTY_KPIS,
+  kpiState,
+  chartRegions = EMPTY_CHART_REGIONS,
+  activityRegion,
+  lastUpdated,
+  className
+}) {
+  const freshnessTimestamp = lastUpdated ?? /* @__PURE__ */ new Date();
+  const resolvedKpiState = deriveRegionState(kpiState, kpis);
+  const resolvedActivityState = deriveRegionState(activityRegion?.state, activityRegion?.items ?? EMPTY_ACTIVITY_ITEMS);
+  const hasLoadingCharts = chartRegions.some((region) => deriveRegionState(region.state, region.data) === "loading");
+  const loadingKpis = Array.from({ length: Math.max(kpis.length, 4) }, (_, index) => /* @__PURE__ */ jsx(
+    MetricCard,
+    {
+      label: `Loading metric ${index + 1}`,
+      value: 0,
+      loading: true
+    },
+    `loading-kpi-${index}`
+  ));
+  return /* @__PURE__ */ jsx(NavigationShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(DataFreshness, { lastUpdated: freshnessTimestamp, isLive: true })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard KPI region", className: "space-y-3", children: [
+      resolvedKpiState === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading KPI metrics" }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: loadingKpis })
+      ] }) : null,
+      resolvedKpiState === "error" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: "KPI metrics are currently unavailable."
+        }
+      ) : null,
+      resolvedKpiState === "empty" ? /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: "No KPI data" }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: "Connect your data source to populate KPI cards." })
+      ] }) : null,
+      resolvedKpiState === "partial-data" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Some KPI metrics are temporarily unavailable." }) : null,
+      resolvedKpiState === "has-data" || resolvedKpiState === "partial-data" ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: kpis.map((kpi) => /* @__PURE__ */ jsx(
+        MetricCard,
+        {
+          ...kpi
+        },
+        `${kpi.label}-${String(kpi.value)}`
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard chart regions", className: "grid gap-4 xl:grid-cols-2", children: [
+      hasLoadingCharts ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary xl:col-span-2", children: "Loading chart data" }) : null,
+      chartRegions.map((region) => renderChartRegion(region))
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard activity region", children: [
+      resolvedActivityState === "loading" ? /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: activityRegion?.title ?? "Recent activity" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading activity feed" }) })
+      ] }) : null,
+      resolvedActivityState === "error" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: activityRegion?.errorMessage ?? "Activity feed is unavailable."
+        }
+      ) : null,
+      resolvedActivityState === "empty" ? /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: activityRegion?.emptyTitle ?? "No activity yet" }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: activityRegion?.emptyDescription ?? "Recent updates will appear once your team starts making changes." })
+      ] }) : null,
+      resolvedActivityState === "partial-data" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Recent activity is partially available while remaining events sync." }) : null,
+      resolvedActivityState === "has-data" || resolvedActivityState === "partial-data" ? /* @__PURE__ */ jsx(
+        ActivityFeedBlock,
+        {
+          title: activityRegion?.title ?? "Recent activity",
+          activities: activityRegion?.items,
+          className: "py-4 md:py-6"
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+
+export { DashboardPageKit };

package/dist/components/page-kits/ErrorPageKit.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ErrorPageKitVariant = "not-found" | "server-error" | "generic-fallback";
+export interface ErrorPageKitAction {
+    label: string;
+    onAction: () => void;
+}
+export interface ErrorPageKitMetadata {
+    statusCode?: number;
+    errorCode?: string;
+    incidentId?: string;
+}
+export interface ErrorPageKitProps {
+    variant: ErrorPageKitVariant;
+    title: string;
+    description: string;
+    metadata?: ErrorPageKitMetadata;
+    primaryAction?: ErrorPageKitAction;
+    secondaryAction?: ErrorPageKitAction;
+    supportContent?: React.ReactNode;
+    className?: string;
+}
+export declare function ErrorPageKit({ variant, title, description, metadata, primaryAction, secondaryAction, supportContent, className, }: ErrorPageKitProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/page-kits/ErrorPageKit.js

@@ -0,0 +1,55 @@
+import { Typography } from '../../chunk-N53OMWW2.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../../chunk-AH6YSYYT.js';
+import { Button } from '../../chunk-7KIDDF3I.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function variantLabel(variant) {
+  switch (variant) {
+    case "not-found":
+      return "Not found";
+    case "server-error":
+      return "Server error";
+    case "generic-fallback":
+      return "Fallback";
+  }
+}
+function ErrorPageKit({
+  variant,
+  title,
+  description,
+  metadata,
+  primaryAction,
+  secondaryAction,
+  supportContent,
+  className
+}) {
+  const metadataEntries = [
+    ...metadata?.statusCode ? [["Status", metadata.statusCode]] : [],
+    ...metadata?.errorCode ? [["Error code", metadata.errorCode]] : [],
+    ...metadata?.incidentId ? [["Incident", metadata.incidentId]] : []
+  ];
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-[70dvh] bg-background px-6 py-12 text-text-primary", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-2xl flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "uppercase tracking-[0.18em] text-text-tertiary", children: variantLabel(variant) }),
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-5", children: [
+      metadataEntries.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-2 rounded-md border border-border/70 bg-surface/40 p-3 text-sm", children: metadataEntries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: value })
+      ] }, label)) }) : null,
+      supportContent ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border/60 bg-surface/30 px-3 py-2 text-sm text-text-secondary", children: supportContent }) : null,
+      primaryAction || secondaryAction ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        primaryAction ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: primaryAction.onAction, children: primaryAction.label }) : null,
+        secondaryAction ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onAction, children: secondaryAction.label }) : null
+      ] }) : null
+    ] })
+  ] }) }) });
+}
+
+export { ErrorPageKit };

package/dist/components/page-kits/KanbanBoardPageKit.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { NavigationShellPageKitProps } from "./NavigationShellPageKit";
+import { type KanbanColumnState, type KanbanMoveMeta } from "../ui/KanbanBoard";
+export type KanbanBoardPageKitState = "loading" | "empty" | "dragging" | "move-failed" | "has-data";
+export interface KanbanBoardPageKitItem {
+    id: string;
+    title: string;
+    description?: string;
+    badgeLabel?: string;
+    assigneeLabel?: string;
+}
+export interface KanbanBoardPageKitColumn<TItem extends KanbanBoardPageKitItem = KanbanBoardPageKitItem> {
+    id: string;
+    title: string;
+    items: TItem[];
+    disabled?: boolean;
+}
+export interface KanbanBoardPageKitProps<TItem extends KanbanBoardPageKitItem = KanbanBoardPageKitItem> {
+    shell: Omit<NavigationShellPageKitProps, "children">;
+    state?: KanbanBoardPageKitState;
+    columns: KanbanBoardPageKitColumn<TItem>[];
+    getItemId: (item: TItem) => string | number;
+    onMove: (next: readonly KanbanColumnState<TItem, string>[], meta: KanbanMoveMeta<TItem, string>) => void;
+    readOnly?: boolean;
+    title?: string;
+    description?: string;
+    moveErrorMessage?: string;
+    activityRegion?: React.ReactNode;
+    className?: string;
+}
+export declare function KanbanBoardPageKit<TItem extends KanbanBoardPageKitItem = KanbanBoardPageKitItem>({ shell, state, columns, getItemId, onMove, readOnly, title, description, moveErrorMessage, activityRegion, className, }: KanbanBoardPageKitProps<TItem>): import("react/jsx-runtime").JSX.Element;