@capillarytech/blaze-ui 5.2.2 → 5.2.4

package/CapLevelGraphRenderer/tests/TEST_COVERAGE.md

@@ -0,0 +1,119 @@
+# Test Coverage: CapLevelGraphRenderer
+
+## Test Files Created
+
+1. **CapLevelGraphRenderer.test.tsx** - Main test file with comprehensive coverage
+2. **CapLevelGraphRenderer.mockData.ts** - Mock data and test fixtures
+
+## Test Coverage Summary
+
+### ✅ Default Rendering (4 tests)
+- Renders graph container and pagination controls
+- Renders with nodes and connections
+- Renders empty state without errors
+- Renders single node without connections
+
+### ✅ Graph Initialization (4 tests)
+- Initializes graph with correct container
+- Registers tooltip tool when showToolTip is true
+- Does not register tooltip tool when showToolTip is false
+- Handles missing container gracefully
+
+### ✅ Node Rendering (3 tests)
+- Renders multiple nodes
+- Renders nodes with custom components and props
+- Handles nodes with toolTip property
+
+### ✅ Connections (4 tests)
+- Renders forward connections between adjacent nodes
+- Renders reverse connections
+- Handles complex connection scenarios
+- Handles invalid connections gracefully
+
+### ✅ Pagination (5 tests)
+- Disables previous button at start position
+- Enables next button when content exceeds viewport
+- Disables both buttons when all content fits
+- Scrolls left when previous button is clicked
+- Scrolls right when next button is clicked
+
+### ✅ Props Variations (9 tests)
+- Applies className and scrollClassName props
+- Applies graphStyles prop
+- Applies containerStyles prop
+- Applies graphWidth and graphHeight props
+- Applies layout props (offsetHeight, defaultStartX, defaultStartY, etc.)
+- Applies lineStrokeColor prop
+- Applies forwardConnProps
+- Applies reverseConnProps
+
+### ✅ Tooltip Functionality (3 tests)
+- Registers edge events when showToolTip is true
+- Does not register edge events when showToolTip is false
+- Registers node events for input focus
+
+### ✅ Scroller Props (1 test)
+- Applies scrollerProps to graph
+
+### ✅ Edge Cases (3 tests)
+- Handles empty nodes array
+- Handles empty connections array
+- Updates scroll position when nodes change
+
+## Total Test Count
+
+**36 test cases** covering all major functionality areas.
+
+## Test Patterns Used
+
+- ✅ `it.each` for repetitive prop variations
+- ✅ Reusable helper functions (`renderWithProps`)
+- ✅ Mock data in separate file (`CapLevelGraphRenderer.mockData.ts`)
+- ✅ Focus on functional behavior (not styling)
+- ✅ User interaction testing with `@testing-library/user-event`
+- ✅ Edge case coverage
+- ✅ Proper mocking of @antv/x6 Graph library
+
+## Mocking Strategy
+
+- **@antv/x6 Graph**: Mocked constructor and instance methods (addNode, addEdge, on, setScrollbarPosition)
+- **Graph.registerEdgeTool**: Mocked static method
+- **TooltipTool**: Mocked module
+- **DOM Containers**: Created and cleaned up in beforeEach/afterEach
+
+## Notes
+
+- Tests focus on functional behavior and user interactions
+- No Cap UI components are mocked (CapButton, CapIcon render normally)
+- Tests verify graph initialization, node rendering, connection drawing, and pagination
+- Edge cases like empty states and invalid data are covered
+- Tooltip functionality is tested through event registration verification
+
+## Use Cases Coverage
+
+Based on `CapLevelGraphRenderer-test-cases.md`:
+
+| Use Case ID | Status | Test Coverage |
+|-------------|--------|---------------|
+| UC-001 | ✅ | Basic rendering test |
+| UC-002 | ✅ | Empty state test |
+| UC-003 | ✅ | Single node test |
+| UC-004 | ✅ | Forward connections test |
+| UC-005 | ✅ | Reverse connections test |
+| UC-006 | ✅ | Styling props test |
+| UC-007 | ✅ | Layout props test |
+| UC-008 | ✅ | Connection styling test |
+| UC-009 | ✅ | Tooltip registration test |
+| UC-010 | ✅ | Tooltip registration test |
+| UC-011 | ✅ | Tooltip disabled test |
+| UC-012 | ✅ | Pagination previous test |
+| UC-013 | ✅ | Pagination next test |
+| UC-014 | ✅ | Pagination states test |
+| UC-015 | ✅ | Scroller props test |
+| UC-016 | ✅ | Node component rendering test |
+| UC-017 | ✅ | Complex connections test |
+| UC-018 | ✅ | Missing container test |
+| UC-019 | ✅ | Invalid connections test |
+| UC-020 | ✅ | Graph API integration test |
+
+**Coverage**: 20/20 use cases covered ✅

package/CapLevelGraphRenderer/types.d.ts

@@ -0,0 +1,139 @@
+import { Graph } from '@antv/x6';
+import React from 'react';
+/**
+ * Node data structure for graph rendering
+ */
+export interface GraphNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** React component to render inside the node */
+    component: React.ComponentType<Record<string, unknown>>;
+    /** Height of the node in pixels */
+    height: number;
+    /** Props to pass to the component */
+    props?: Record<string, unknown>;
+    /** Tooltip text for the node */
+    toolTip?: string;
+}
+/**
+ * Connection data structure for graph edges
+ */
+export interface GraphConnection {
+    /** Source node ID */
+    sourceId: string;
+    /** Target node ID */
+    targetId: string;
+}
+/**
+ * Node position tracking object
+ */
+export interface NodePosition {
+    /** X coordinate */
+    x: number;
+    /** Y coordinate */
+    y: number;
+    /** End X coordinate */
+    x1: number;
+    /** End Y coordinate */
+    y1: number;
+    /** Node height */
+    height: number;
+    /** Node width */
+    width: number;
+    /** Tooltip text */
+    toolTip: string;
+}
+/**
+ * Edge tracking object
+ */
+export interface EdgeObj {
+    forward?: boolean;
+    reverse?: boolean;
+}
+/**
+ * Connection object for internal tracking
+ */
+export interface ConnectionObj {
+    in: string[];
+    out: string[];
+}
+/**
+ * Props for CapLevelGraphRenderer component
+ */
+export interface CapLevelGraphRendererProps {
+    /** Array of nodes to render in the graph */
+    nodes?: GraphNode[];
+    /** Unique identifier for the graph container DOM element (required) */
+    graphId: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Width of the graph container (number in pixels or string like '500px') */
+    graphWidth?: number | string;
+    /** Height of the graph container (number in pixels or string like '500px') */
+    graphHeight?: number | string;
+    /** Whether to show tooltips on edges */
+    showToolTip?: boolean;
+    /** Array of connections between nodes */
+    connections?: GraphConnection[];
+    /** Inline styles for the graph container */
+    graphStyles?: React.CSSProperties;
+    /** Offset height for connection lines from node top */
+    offsetHeight?: number;
+    /** Default starting X coordinate */
+    defaultStartX?: number;
+    /** Default starting Y coordinate */
+    defaultStartY?: number;
+    /** Props to pass to the x6 scroller */
+    scrollerProps?: Record<string, unknown>;
+    /** CSS class name for the scroller */
+    scrollClassName?: string;
+    /** Inline styles for the container wrapper */
+    containerStyles?: React.CSSProperties;
+    /** Color for connection lines */
+    lineStrokeColor?: string;
+    /** Default width for each node element */
+    defaultEleWidth?: number;
+    /** Default distance between node elements */
+    defaultEleDistance?: number;
+    /** Offset distance for reverse connection lines */
+    offsetLineDistance?: number;
+    /** Props to apply to forward connections */
+    forwardConnProps?: Record<string, unknown>;
+    /** Props to apply to reverse connections */
+    reverseConnProps?: Record<string, unknown>;
+    /** Whether to allow tooltips on forward arrows */
+    allowForwardArrowTooltip?: boolean;
+    /** Whether to allow tooltips on reverse arrows */
+    allowReverseArrowTooltip?: boolean;
+}
+/**
+ * Reference type for the graph instance
+ */
+export type GraphRef = React.MutableRefObject<Graph | null>;
+/**
+ * Options for TooltipTool
+ */
+export interface TooltipToolOptions {
+    /** Tooltip text content */
+    tooltip?: string;
+}
+/**
+ * Type for x6 Graph instance methods used by TooltipTool
+ */
+export interface GraphInstance {
+    /** Convert client coordinates to graph coordinates */
+    clientToGraph: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Type for x6 CellView instance methods used by TooltipTool
+ */
+export interface CellViewInstance {
+    /** Register event handler */
+    on: (event: string, handler: () => void, context: unknown) => void;
+    /** Unregister event handler */
+    off: (event: string, handler: () => void) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapLevelGraphRenderer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapLevelGraphRenderer/types.ts"],"names":[],"mappings":"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"}

package/CapNotificationDropdown/index.js

@@ -4226,7 +4226,7 @@ var _default = exports["default"] = SvgFile;
 
 
 exports.__esModule = true;
-exports.TIME_UNITS = exports.FORMAT_TOKENS = void 0;
+exports.TIME_UNITS = exports.FORMAT_TOKENS = exports.DEFAULT_TIMEZONE = void 0;
 exports.dayjsToMoment = dayjsToMoment;
 exports["default"] = void 0;
 exports.hasMomentTimezoneSupport = hasMomentTimezoneSupport;
@@ -4234,6 +4234,7 @@ exports.isDayjsObject = isDayjsObject;
 exports.isMomentObject = isMomentObject;
 exports.momentToDayjs = momentToDayjs;
 exports.normalizeDateValue = normalizeDateValue;
+exports.toDayjsInTimezone = toDayjsInTimezone;
 var _dayjs = _interopRequireDefault(__webpack_require__(87695));
 var _advancedFormat = _interopRequireDefault(__webpack_require__(96833));
 var _customParseFormat = _interopRequireDefault(__webpack_require__(2825));
@@ -4345,7 +4346,23 @@ if (!tzIsCallable) {
       if (_dayjs.default.isDayjs(date)) {
         return date.tz(tzName);
       }
-      return (0, _dayjs.default)(date).tz(tzName);
+      // For strings/Dates: interpret the date/time values as being IN the target timezone
+      // (matching moment.tz(string, tz) semantics). dayjs(date).tz(tz) is wrong because
+      // dayjs(date) anchors to the system local timezone, so .tz() converts FROM local TO tz.
+      // Instead: parse as UTC to get raw date/time values, compute the target timezone's offset,
+      // then adjust the UTC timestamp so .tz() produces the intended local time.
+      try {
+        // Validate timezone is a real IANA timezone before applying the offset correction
+        Intl.DateTimeFormat(undefined, {
+          timeZone: tzName
+        });
+      } catch (_unused) {
+        // Invalid timezone — fall back to local time
+        return (0, _dayjs.default)(date);
+      }
+      const asUtc = _dayjs.default.utc(date);
+      const tzOffset = asUtc.tz(tzName).utcOffset(); // target tz offset in minutes
+      return _dayjs.default.utc(asUtc.valueOf() - tzOffset * 60000).tz(tzName);
     } catch (error) {
       // If timezone is invalid, log error and fall back to local time
       logDevError("dayjs.tz: Invalid timezone \"" + tzName + "\"", error);
@@ -4422,6 +4439,8 @@ const FORMAT_TOKENS = exports.FORMAT_TOKENS = {
   MONTH_FULL: 'MMMM',
   YEAR: 'YYYY',
   YEAR_SHORT: 'YY',
+  // Cap UI datetime picker format (DD-MM-YYYY | HH:mm)
+  DATE_TIME: 'DD-MM-YYYY | HH:mm',
   // Localized formats
   DATE_LOCALIZED_SHORT: 'l',
   DATETIME_LOCALIZED_SHORT: 'll',
@@ -4432,6 +4451,7 @@ const FORMAT_TOKENS = exports.FORMAT_TOKENS = {
   DATETIME_LOCALIZED_LONG_TIME: 'LLL',
   DATETIME_LOCALIZED_LONG_TIME_WEEKDAY: 'LLLL'
 };
+const DEFAULT_TIMEZONE = exports.DEFAULT_TIMEZONE = 'Asia/Kolkata';
 function logDevError(message, error) {
   if (false) // removed by dead control flow
 {}
@@ -4512,7 +4532,10 @@ function momentToDayjs(value) {
         const tz = value.tz();
         if (tz) {
           // Has a named timezone - preserve it
-          dayjsObj = (0, _dayjs.default)(date).tz(tz);
+          // dayjs.utc(date) is required here: dayjs(date) anchors to the system local timezone,
+          // causing .tz() to only re-label without converting hours. dayjs.utc(date) creates a
+          // UTC-mode dayjs, which .tz() correctly converts to the target timezone for display.
+          dayjsObj = _dayjs.default.utc(date).tz(tz);
 
           // WORKAROUND: dayjs-timezone-iana-plugin doesn't persist timezone name in standard way
           // Store it manually in $x for round-trip conversion fidelity
@@ -4565,6 +4588,35 @@ function momentToDayjs(value) {
   return null;
 }
 
+/**
+ * Converts any supported date value (Moment, Day.js, string, Date) to a Day.js object
+ * in the specified timezone. This is the recommended single entry point for timezone-safe
+ * date conversion — it handles moment-to-dayjs conversion and timezone application in one step,
+ * avoiding the double-offset bug in dayjs-timezone-iana-plugin.
+ *
+ * @param value - Moment, Day.js, string, Date, or null/undefined
+ * @param timezone - Target IANA timezone (e.g., 'Asia/Kolkata', 'America/New_York')
+ * @returns Day.js object in the target timezone, or null if invalid
+ *
+ * @example
+ * toDayjsInTimezone(moment.tz('2025-04-21 00:00', 'Asia/Kolkata'), 'Asia/Kolkata');
+ * // Returns dayjs representing 2025-04-21 00:00 IST
+ *
+ * @example
+ * toDayjsInTimezone(moment.tz('2025-04-21 00:00', 'UTC'), 'Asia/Kolkata');
+ * // Returns dayjs representing 2025-04-21 05:30 IST
+ */
+function toDayjsInTimezone(value, timezone) {
+  const dayjsValue = momentToDayjs(value);
+  if (!dayjsValue) return null;
+
+  // Convert via UTC to avoid the double-offset bug in dayjs-timezone-iana-plugin:
+  // calling .tz() on a dayjs that already has a non-zero utcOffset corrupts the value.
+  // Going through .toDate() → dayjs.utc() gives us a clean UTC-mode dayjs that .tz()
+  // correctly converts to the target timezone.
+  return _dayjs.default.utc(dayjsValue.toDate()).tz(timezone);
+}
+
 /**
  * Converts a Day.js object to Moment.js, preserving timezone and locale information.
  *