@cratis/components 0.1.9 → 0.1.12

package/PivotViewer/utils/selection.ts

@@ -1,292 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { animateZoomAndScroll, calculateCenterScrollPosition, smoothScrollTo } from './animations';
-import { ZOOM_MAX, MIN_ZOOM_ON_SELECT, ZOOM_MULTIPLIER, DETAIL_PANEL_WIDTH } from './constants';
-import type { ViewMode } from '../components/Toolbar';
-
-export interface SelectionState {
-  zoom: number;
-  scrollLeft: number;
-  scrollTop: number;
-}
-
-export interface CardClickHandlerParams<TItem> {
-  item: TItem;
-  itemId: string | number;
-  selectedItemId: string | number | null;
-  container: HTMLElement;
-  cardPosition: { x: number; y: number; width: number; height: number } | null;
-  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
-  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
-  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
-  spacer?: HTMLElement | null;
-  viewMode: ViewMode;
-  zoomLevel: number;
-  totalHeight?: number;
-  preSelectionState: SelectionState | null;
-  startScrollPosition?: { x: number; y: number };
-  setZoomLevel: (zoom: number) => void;
-  setIsZooming: (isZooming: boolean) => void;
-  setSelectedItem: (item: TItem | null) => void;
-  setPreSelectionState: (state: SelectionState | null) => void;
-}
-
-/**
- * Handle card click for selection with zoom and scroll animation
- */
-export function handleCardSelection<TItem>({
-  itemId,
-  selectedItemId,
-  container,
-  cardPosition,
-  targetCardPosition,
-  getCardPositionAtZoom,
-  getLayoutSizeAtZoom,
-  spacer,
-  viewMode,
-  zoomLevel,
-  totalHeight,
-  preSelectionState,
-  startScrollPosition,
-  setZoomLevel,
-  setIsZooming,
-  setSelectedItem,
-  setPreSelectionState,
-  item,
-}: CardClickHandlerParams<TItem>): void {
-  // Clicking the same card - deselect
-  if (selectedItemId === itemId) {
-    deselectCard({
-      container,
-      cardPosition,
-      targetCardPosition,
-      getCardPositionAtZoom,
-      getLayoutSizeAtZoom,
-      spacer,
-      viewMode,
-      zoomLevel,
-      preSelectionState,
-      setZoomLevel,
-      setIsZooming,
-      setSelectedItem,
-      setPreSelectionState,
-    });
-    return;
-  }
-
-  // First selection - save state and zoom in
-  const isFirstSelection = selectedItemId === null;
-
-  if (isFirstSelection) {
-    setPreSelectionState({
-      zoom: zoomLevel,
-      scrollLeft: container.scrollLeft,
-      scrollTop: container.scrollTop,
-    });
-  }
-
-  setSelectedItem(item);
-
-  if (isFirstSelection) {
-    if (viewMode === 'collection') {
-      // Collection mode: just smooth scroll to center, no zoom
-      if (cardPosition) {
-        // In collection mode, we don't have a detail panel width offset because the panel is an overlay or separate
-        // But if we want to center it, we should consider if the detail panel pushes content
-        // For now, assume 0 offset as per original code
-        const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, 0, totalHeight);
-        smoothScrollTo(container, scrollLeft, scrollTop, true);
-      }
-    } else {
-      // Grouped mode: animate zoom and scroll
-      zoomAndCenterCard({
-        container,
-        cardPosition,
-        targetCardPosition,
-        getCardPositionAtZoom,
-        getLayoutSizeAtZoom,
-        spacer,
-        itemId,
-        zoomLevel,
-        totalHeight,
-        startScrollPosition,
-        setZoomLevel,
-        setIsZooming,
-      });
-    }
-  } else {
-    // Subsequent selections: just center the new card
-    if (cardPosition) {
-      // In collection mode, we don't zoom, so we just center.
-      // In grouped mode, we might be zoomed in, so we center with offset.
-      const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
-      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, totalHeight);
-      smoothScrollTo(container, scrollLeft, scrollTop, true);
-    }
-  }
-}
-
-interface DeselectParams {
-  container: HTMLElement;
-  cardPosition: { x: number; y: number; width: number; height: number } | null;
-  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
-  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
-  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
-  spacer?: HTMLElement | null;
-  viewMode: ViewMode;
-  zoomLevel: number;
-  preSelectionState: SelectionState | null;
-  setZoomLevel: (zoom: number) => void;
-  setIsZooming: (isZooming: boolean) => void;
-  setSelectedItem: (item: null) => void;
-  setPreSelectionState: (state: SelectionState | null) => void;
-}
-
-/**
- * Deselect card with zoom-out animation if needed
- */
-function deselectCard({
-  container,
-  cardPosition,
-  targetCardPosition,
-  getCardPositionAtZoom,
-  getLayoutSizeAtZoom,
-  spacer,
-  viewMode,
-  zoomLevel,
-  preSelectionState,
-  setZoomLevel,
-  setIsZooming,
-  setSelectedItem,
-  setPreSelectionState,
-}: DeselectParams): void {
-  if (!preSelectionState) {
-    setSelectedItem(null);
-    return;
-  }
-
-  // Collection mode: just scroll back
-  if (viewMode === 'collection') {
-    setSelectedItem(null);
-    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-    setPreSelectionState(null);
-    return;
-  }
-
-  // Grouped mode: check if zoom changed
-  const zoomChanged = Math.abs(preSelectionState.zoom - zoomLevel) > 0.001;
-
-  if (!zoomChanged || !cardPosition) {
-    setSelectedItem(null);
-    smoothScrollTo(container, preSelectionState.scrollLeft, preSelectionState.scrollTop, true);
-    setPreSelectionState(null);
-    return;
-  }
-
-  // Animate zoom out
-  setIsZooming(true);
-
-  animateZoomAndScroll({
-    container,
-    cardPosition,
-    targetCardPosition,
-    getCardPositionAtZoom,
-    getLayoutSizeAtZoom,
-    spacer,
-    startZoom: zoomLevel,
-    targetZoom: preSelectionState.zoom,
-    targetScrollLeft: preSelectionState.scrollLeft,
-    targetScrollTop: preSelectionState.scrollTop,
-    onUpdate: setZoomLevel,
-    onComplete: () => {
-      setIsZooming(false);
-      setSelectedItem(null);
-      setPreSelectionState(null);
-    },
-  });
-}
-
-interface ZoomAndCenterParams {
-  container: HTMLElement;
-  cardPosition: { x: number; y: number; width: number; height: number } | null;
-  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
-  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
-  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
-  spacer?: HTMLElement | null;
-  itemId: string | number;
-  zoomLevel: number;
-  totalHeight?: number;
-  startScrollPosition?: { x: number; y: number };
-  setZoomLevel: (zoom: number) => void;
-  setIsZooming: (isZooming: boolean) => void;
-}
-
-/**
- * Zoom in and center a card
- */
-function zoomAndCenterCard({
-  container,
-  cardPosition,
-  targetCardPosition,
-  getCardPositionAtZoom,
-  getLayoutSizeAtZoom,
-  spacer,
-  zoomLevel,
-  totalHeight,
-  startScrollPosition,
-  setZoomLevel,
-  setIsZooming,
-}: ZoomAndCenterParams): void {
-  const targetZoom = Math.min(ZOOM_MAX, Math.max(MIN_ZOOM_ON_SELECT, zoomLevel * ZOOM_MULTIPLIER));
-  const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;
-
-  if (!shouldZoom || !cardPosition) {
-    if (cardPosition) {
-      const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, DETAIL_PANEL_WIDTH, totalHeight);
-      smoothScrollTo(container, scrollLeft, scrollTop, true);
-    }
-    return;
-  }
-
-  setIsZooming(true);
-
-  // Use targetCardPosition if available, otherwise fallback to cardPosition
-  const { scrollLeft: targetScrollLeft, scrollTop: targetScrollTop } = calculateCenterScrollPosition(
-    container,
-    targetCardPosition || cardPosition,
-    targetZoom,
-    DETAIL_PANEL_WIDTH,
-    totalHeight
-  );
-
-  animateZoomAndScroll({
-    container,
-    cardPosition,
-    targetCardPosition,
-    getCardPositionAtZoom,
-    getLayoutSizeAtZoom,
-    spacer,
-    startZoom: zoomLevel,
-    targetZoom,
-    targetScrollLeft,
-    targetScrollTop,
-    startScrollLeft: startScrollPosition?.x,
-    startScrollTop: startScrollPosition?.y,
-    onUpdate: setZoomLevel,
-    onComplete: () => {
-      setIsZooming(false);
-    },
-  });
-}
-
-/**
- * Get card element by ID from container
- */
-export function getCardElementById(_container: HTMLElement, _itemId: string | number): HTMLElement | null {
-  // Deprecated: Pixi renderer doesn't use DOM elements for cards
-  // Keep parameter names prefixed to indicate intentional non-use.
-  void _container;
-  void _itemId;
-  return null;
-}

package/PivotViewer/utils/utils.ts

@@ -1,259 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import type {
-  PivotDimension,
-  PivotFilter,
-  PivotFilterOption,
-  PivotGroup,
-  PivotPrimitive,
-} from '../types';
-
-export type FilterState = Record<string, Set<string>>;
-export type RangeFilterState = Record<string, [number, number] | null>;
-
-// Zoom configuration
-export const ZOOM_MIN = 0.1;
-export const ZOOM_MAX = 3;
-export const ZOOM_STEP = 0.05;
-export const CARDS_PER_COLUMN = 5;
-export const BASE_CARD_WIDTH = 180;
-export const BASE_CARD_HEIGHT = 140;
-
-export const toKey = (value: PivotPrimitive): string => {
-  if (value === undefined) return 'undefined';
-  if (value === null) return 'null';
-  if (value instanceof Date) return value.toISOString();
-  if (typeof value === 'number' && Number.isNaN(value)) return 'nan';
-  return String(value);
-};
-
-export const defaultFormat = (value: PivotPrimitive): string => {
-  if (value === undefined) return 'Unknown';
-  if (value === null) return 'None';
-  if (value instanceof Date) return value.toLocaleString();
-  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-  return String(value);
-};
-
-export const buildFilterState = <TItem extends object>(
-  filters: PivotFilter<TItem>[] | undefined,
-): FilterState => {
-  const state: FilterState = {};
-  filters?.forEach((filter) => {
-    state[filter.key] = new Set<string>();
-  });
-  return state;
-};
-
-export const buildRangeFilterState = <TItem extends object>(
-  filters: PivotFilter<TItem>[] | undefined,
-): RangeFilterState => {
-  const state: RangeFilterState = {};
-  filters?.forEach((filter) => {
-    if (filter.type === 'number') {
-      state[filter.key] = null;
-    }
-  });
-  return state;
-};
-
-export const applyFilters = <TItem extends object>(
-  data: TItem[],
-  filters: PivotFilter<TItem>[] | undefined,
-  state: FilterState,
-  rangeState: RangeFilterState,
-  skipKey?: string,
-): TItem[] => {
-  if (!filters?.length) {
-    return data;
-  }
-
-  // Pre-compute active filters to avoid checking empty Sets repeatedly
-  const activeFilters: Array<{
-    filter: PivotFilter<TItem>;
-    selections?: Set<string>;
-    range?: [number, number];
-  }> = [];
-
-  for (const filter of filters) {
-    if (filter.key === skipKey) {
-      continue;
-    }
-
-    if (filter.type === 'number') {
-      const range = rangeState[filter.key];
-      if (range) {
-        activeFilters.push({ filter, range });
-      }
-    } else {
-      const selections = state[filter.key];
-      if (selections && selections.size > 0) {
-        activeFilters.push({ filter, selections });
-      }
-    }
-  }
-
-  // Early exit if no active filters
-  if (activeFilters.length === 0) {
-    return data;
-  }
-
-  return data.filter((item) => {
-    for (const { filter, selections, range } of activeFilters) {
-      if (range) {
-        const value = filter.getValue(item);
-        const numValue = typeof value === 'number' ? value : Number(value);
-        if (!Number.isNaN(numValue) && (numValue < range[0] || numValue > range[1])) {
-          return false;
-        }
-      } else if (selections) {
-        const valueKey = toKey(filter.getValue(item));
-        if (!selections.has(valueKey)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  });
-};
-
-export const computeFilterOptions = <TItem extends object>(
-  data: TItem[],
-  filter: PivotFilter<TItem>,
-): PivotFilterOption[] => {
-  if (filter.options?.length) {
-    return filter.options;
-  }
-
-  const counts = new Map<string, { option: PivotFilterOption; count: number }>();
-
-  data.forEach((item) => {
-    const value = filter.getValue(item);
-    const key = toKey(value);
-    const existing = counts.get(key);
-    if (existing) {
-      existing.count += 1;
-    } else {
-      counts.set(key, {
-        option: {
-          key,
-          label: defaultFormat(value),
-          value,
-          count: 1,
-        },
-        count: 1,
-      });
-    }
-  });
-
-  const options = Array.from(counts.values()).map(({ option, count }) => ({
-    ...option,
-    count,
-  }));
-
-  return filter.sort ? options.sort(filter.sort) : options.sort((a, b) => b.count - a.count);
-};
-
-export const renderOptionCount = (count: number | undefined): string | number =>
-  typeof count === 'number' ? count : '';
-
-export const computeNumericRange = <TItem extends object>(
-  data: TItem[],
-  filter: PivotFilter<TItem>,
-): { min: number; max: number; values: PivotPrimitive[] } => {
-  const values: PivotPrimitive[] = [];
-  let min = Infinity;
-  let max = -Infinity;
-
-  data.forEach((item) => {
-    const value = filter.getValue(item);
-    values.push(value);
-    const numValue = typeof value === 'number' ? value : Number(value);
-    if (!Number.isNaN(numValue)) {
-      min = Math.min(min, numValue);
-      max = Math.max(max, numValue);
-    }
-  });
-
-  return {
-    min: min === Infinity ? 0 : min,
-    max: max === -Infinity ? 100 : max,
-    values,
-  };
-};
-
-export const groupData = <TItem extends object>(
-  data: TItem[],
-  dimension: PivotDimension<TItem>,
-): PivotGroup<TItem>[] => {
-  const groups = new Map<string, PivotGroup<TItem>>();
-
-  // Cache the formatValue function if it exists
-  const formatValue = dimension.formatValue;
-
-  data.forEach((item) => {
-    const rawValue = dimension.getValue(item);
-    const key = toKey(rawValue) || 'default';
-    const group = groups.get(key);
-
-    if (group) {
-      group.items.push(item);
-    } else {
-      const label = formatValue ? formatValue(rawValue) : defaultFormat(rawValue);
-      groups.set(key, {
-        key,
-        label,
-        value: rawValue,
-        items: [item],
-      });
-    }
-  });
-
-  const result = Array.from(groups.values());
-  return dimension.sort ? result.sort(dimension.sort) : result.sort((a, b) => a.label.localeCompare(b.label));
-};
-
-/**
- * Reorder items for a CSS Grid that displays bottom-up, left-to-right.
- * CSS Grid fills top-to-bottom, left-to-right by default.
- *
- * Visual goal (items fill bottom row first, then row above, etc.):
- *   Grid Row 0 (top):    [4] [5] [6] [ ] [ ]   <- partial top row, empties on RIGHT
- *   Grid Row 1 (bottom): [0] [1] [2] [3] [4]   <- full bottom row
- *
- * Returns array with nulls for empty cells that need placeholder rendering.
- */
-export const reorderForBottomUpGrid = <TItem,>(items: TItem[], columns: number): (TItem | null)[] => {
-  if (items.length === 0) return [];
-
-  const totalRows = Math.ceil(items.length / columns);
-  const itemsInTopRow = items.length % columns || columns;
-
-  const result: (TItem | null)[] = [];
-
-  // Top row: items from the "overflow" portion, plus empty cells on the right
-  const topRowStartIndex = items.length - itemsInTopRow;
-  for (let col = 0; col < columns; col++) {
-    if (col < itemsInTopRow) {
-      result.push(items[topRowStartIndex + col]);
-    } else {
-      result.push(null); // Empty cell on right side of top row
-    }
-  }
-
-  // Remaining rows (from second-to-top down to bottom)
-  // These are full rows, containing items 0 to (items.length - itemsInTopRow - 1)
-  for (let row = 1; row < totalRows; row++) {
-    // This grid row corresponds to visual row (totalRows - 1 - row) from bottom
-    // Visual row 0 = bottom, visual row (totalRows-1) = top
-    const visualRowFromBottom = totalRows - 1 - row;
-    const rowStartIndex = visualRowFromBottom * columns;
-
-    for (let col = 0; col < columns; col++) {
-      result.push(items[rowStartIndex + col]);
-    }
-  }
-
-  return result;
-};

package/TimeMachine/EventsView.stories.tsx

@@ -1,10 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-import * as Comp from './EventsView';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'TimeMachine/EventsView', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/TimeMachine/EventsView.tsx

@@ -1,119 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React, { useEffect, useRef, useState } from 'react';
-import { Timeline } from 'primereact/timeline';
-import type { Event } from './types';
-import { Properties } from './Properties';
-import './EventsView.css';
-
-interface EventsViewProps {
-    events: Event[];
-}
-
-export const EventsView: React.FC<EventsViewProps> = ({ events }) => {
-    // Use test data if no events provided
-    const displayEvents = events.length > 0 ? events : [];
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [canScrollUp, setCanScrollUp] = useState(false);
-    const [canScrollDown, setCanScrollDown] = useState(false);
-
-    const updateScrollState = () => {
-        const container = containerRef.current;
-        if (!container) {
-            setCanScrollUp(false);
-            setCanScrollDown(false);
-            return;
-        }
-
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const epsilon = 1;
-        setCanScrollUp(scrollTop > epsilon);
-        setCanScrollDown(scrollTop + clientHeight < scrollHeight - epsilon);
-    };
-
-    useEffect(() => {
-        updateScrollState();
-        const container = containerRef.current;
-        if (!container) return;
-
-        const handleScroll = () => updateScrollState();
-        container.addEventListener('scroll', handleScroll);
-        return () => container.removeEventListener('scroll', handleScroll);
-    }, [displayEvents.length]);
-
-    const renderEventCard = (event: Event, position: 'left' | 'right') => {
-        const isLeft = position === 'left';
-
-        return (
-            <div className={`events-view-event-card events-view-event-card--${position}`}>
-                <div className={`events-view-event-header ${isLeft ? 'events-view-event-header--right' : ''}`}>
-                    <h3 className={`events-view-event-name ${isLeft ? 'events-view-event-name--right' : ''}`}>{event.type}</h3>
-                    <div className={`events-view-event-timestamp ${isLeft ? 'events-view-event-timestamp--right' : ''}`}>
-                        {event.occurred.toLocaleString()}
-                    </div>
-                </div>
-                <div className="events-view-event-properties">
-                    <Properties data={event.content || {}} align="left" />
-                </div>
-            </div>
-        );
-    };
-
-    const customContent = (event: Event, index: number) => {
-        // PrimeReact places even indices (0,2,4,...) on the right, odd on the left
-        const position = index % 2 === 0 ? 'right' : 'left';
-        return renderEventCard(event, position);
-    };
-
-    const customMarker = () => {
-        return (
-            <div className="events-view-marker">
-                <div className="events-view-marker-dot"></div>
-            </div>
-        );
-    };
-
-    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
-    const scrollToBottom = () => {
-        const container = containerRef.current;
-        if (!container) return;
-        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
-    };
-
-    return (
-        <div className="events-view-container" ref={containerRef}>
-            {canScrollUp && (
-                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--top">
-                    <button
-                        type="button"
-                        className="events-view-scroll-button events-view-scroll-button--top"
-                        onClick={scrollToTop}
-                        aria-label="Scroll to top"
-                    >
-                        <i className="pi pi-arrow-up" />
-                    </button>
-                </div>
-            )}
-            <Timeline
-                value={displayEvents}
-                align="alternate"
-                content={customContent}
-                marker={customMarker}
-                className="events-view-timeline"
-            />
-            {canScrollDown && (
-                <div className="events-view-scroll-button-wrapper events-view-scroll-button-wrapper--bottom">
-                    <button
-                        type="button"
-                        className="events-view-scroll-button events-view-scroll-button--bottom"
-                        onClick={scrollToBottom}
-                        aria-label="Scroll to bottom"
-                    >
-                        <i className="pi pi-arrow-down" />
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-};

package/TimeMachine/Properties.stories.tsx

@@ -1,10 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import React from 'react';
-import * as Comp from './Properties';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'TimeMachine/Properties', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);