@cratis/components 0.1.9 → 0.1.10

package/TimeMachine/Properties.tsx

@@ -1,98 +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';
-
-interface PropertiesProps {
-    data: Record<string, unknown>;
-    /** CSS class name for the container */
-    className?: string;
-    /** Text alignment for the table */
-    align?: 'left' | 'right';
-}
-
-export const Properties: React.FC<PropertiesProps> = ({ data, className, align = 'left' }) => {
-    const tableStyle: React.CSSProperties = {
-        width: '100%',
-        borderCollapse: 'collapse',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Mono", monospace',
-        fontSize: '13px',
-    };
-
-    const rowStyle: React.CSSProperties = {
-        borderBottom: '1px solid rgba(255,255,255,0.1)',
-    };
-
-    const labelStyle: React.CSSProperties = {
-        padding: '8px 12px',
-        color: 'rgba(255,255,255,0.6)',
-        textAlign: align,
-        fontWeight: 500,
-        width: '40%',
-    };
-
-    const valueStyle: React.CSSProperties = {
-        padding: '8px 12px',
-        color: '#fff',
-        textAlign: align,
-    };
-
-    const renderValue = (value: unknown): React.ReactNode => {
-        if (value === null || value === undefined) {
-            return <span style={{ color: 'rgba(255,255,255,0.4)' }}>null</span>;
-        }
-
-        if (typeof value === 'boolean') {
-            return <span style={{ color: value ? '#4ade80' : '#f87171' }}>{value.toString()}</span>;
-        }
-
-        if (typeof value === 'number') {
-            return <span style={{ color: '#fbbf24' }}>{value}</span>;
-        }
-
-        if (value instanceof Date) {
-            return <span style={{ color: '#60a5fa' }}>{value.toLocaleString()}</span>;
-        }
-
-        if (Array.isArray(value)) {
-            return (
-                <span style={{ color: 'rgba(255,255,255,0.7)' }}>
-                    Array[{value.length}]
-                </span>
-            );
-        }
-
-        if (typeof value === 'object') {
-            return (
-                <span style={{ color: 'rgba(255,255,255,0.7)' }}>
-                    {'{'}...{'}'}
-                </span>
-            );
-        }
-
-        return <span>{String(value)}</span>;
-    };
-
-    const formatPropertyName = (key: string): string => {
-        // Convert camelCase to Title Case with spaces
-        return key
-            .replace(/([A-Z])/g, ' $1')
-            .replace(/^./, str => str.toUpperCase())
-            .trim();
-    };
-
-    return (
-        <div className={className}>
-            <table style={tableStyle}>
-                <tbody>
-                    {data && Object.entries(data).map(([key, value], index) => (
-                        <tr key={`${key}-${index}`} style={rowStyle}>
-                            <td style={labelStyle}>{formatPropertyName(key)}</td>
-                            <td style={valueStyle}>{renderValue(value)}</td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    );
-};

package/TimeMachine/ReadModelView.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 './ReadModelView';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'TimeMachine/ReadModelView', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/TimeMachine/ReadModelView.tsx

@@ -1,143 +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, { useState } from 'react';
-import type { Version } from './types';
-import { Properties } from './Properties';
-
-interface ReadModelViewProps {
-    versions: Version[];
-    selectedIndex: number;
-    hoveredIndex: number | null;
-    onVersionSelect: (index: number) => void;
-    onHoveringCardChange: (isHovering: boolean) => void;
-}
-
-export const ReadModelView: React.FC<ReadModelViewProps> = ({
-    versions,
-    selectedIndex,
-    hoveredIndex,
-    onVersionSelect,
-    onHoveringCardChange,
-}) => {
-    const displayIndex = hoveredIndex ?? selectedIndex;
-    const [flippedMap, setFlippedMap] = useState<Record<string, boolean>>({});
-
-    const toggleFlip = (id: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.stopPropagation();
-        setFlippedMap(previous => ({
-            ...previous,
-            [id]: !previous[id]
-        }));
-    };
-
-    return (
-        <>
-            {/* Starfield background */}
-            <div className="time-machine-background">
-                <div className="stars"></div>
-                <div className="stars stars-2"></div>
-                <div className="stars stars-3"></div>
-            </div>
-
-            {/* 3D Stacked Windows */}
-            <div className="time-machine-viewport">
-                <div className="windows-container">
-                    {versions.map((version, index) => {
-                        const depth = index - displayIndex;
-                        const isActive = index === displayIndex;
-                        const isVisible = depth >= 0 && depth < 10;
-                        const isFlipped = flippedMap[version.id] ?? false;
-
-                        if (!isVisible) return null;
-
-                        // Only prepare events for the active version to avoid showing all events at once
-                        const events = isActive && version.events?.length
-                            ? version.events.map(event => ({
-                                ...event,
-                                occurred: new Date(event.occurred)
-                            }))
-                            : [];
-
-                        return (
-                            <div
-                                key={version.id}
-                                className={`version-window ${isActive ? 'active' : ''} ${isFlipped ? 'flipped' : ''}`}
-                                style={{
-                                    '--depth': depth,
-                                    '--z-offset': -depth * 150,
-                                    '--scale': 1 - depth * 0.05,
-                                    '--opacity': 1 - depth * 0.12,
-                                } as React.CSSProperties}
-                                onClick={() => onVersionSelect(index)}
-                                onMouseEnter={() => onHoveringCardChange(true)}
-                                onMouseLeave={() => onHoveringCardChange(false)}
-                            >
-                                <div className="version-window-inner">
-                                    <div className="version-window-face version-window-face--front">
-                                        <div className="window-chrome">
-                                            <div className="window-controls">
-                                                <span className="control close"></span>
-                                                <span className="control minimize"></span>
-                                                <span className="control maximize"></span>
-                                            </div>
-                                            <div className="window-title">{version.label}</div>
-                                            <div className="window-actions">
-                                                <button
-                                                    type="button"
-                                                    className="window-flip-button"
-                                                    onClick={toggleFlip(version.id)}
-                                                    aria-label="Show related events"
-                                                    aria-pressed={isFlipped}
-                                                >
-                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div className="window-content">
-                                            {version.content}
-                                        </div>
-                                    </div>
-                                    <div className="version-window-face version-window-face--back">
-                                        <div className="window-chrome window-chrome--back">
-                                            <div className="window-controls">
-                                                <span className="control close"></span>
-                                                <span className="control minimize"></span>
-                                                <span className="control maximize"></span>
-                                            </div>
-                                            <div className="window-title">Related Events</div>
-                                            <div className="window-actions">
-                                                <button
-                                                    type="button"
-                                                    className="window-flip-button"
-                                                    onClick={toggleFlip(version.id)}
-                                                    aria-label="Show read model snapshot"
-                                                    aria-pressed={isFlipped}
-                                                >
-                                                    <i className={`pi ${isFlipped ? 'pi-undo' : 'pi-refresh'}`} />
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div className="window-content window-content--events">
-                                            <div className="snapshot-event-list">
-                                                {events.map((event, eventIndex) => (
-                                                    <div key={`${version.id}-${event.sequenceNumber ?? eventIndex}`} className="snapshot-event">
-                                                        <div className="snapshot-event-header">
-                                                            <span className="snapshot-event-name">{event.type}</span>
-                                                            <span className="snapshot-event-timestamp">{event.occurred.toLocaleString()}</span>
-                                                        </div>
-                                                        <Properties data={event.content} align="left" />
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </>
-    );
-};

package/TimeMachine/TimeMachine.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 './TimeMachine';
-const Component: React.ComponentType<any> | undefined = (Comp as any).default || (Object.values(Comp)[0] as any);
-
-export default { title: 'TimeMachine/TimeMachine', component: Component };
-
-export const Default = () => (Component ? <Component /> : <div>Unable to render component</div>);

package/TimeMachine/TimeMachine.tsx

@@ -1,244 +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, { useState, useCallback, useRef, useEffect } from 'react';
-import type { Version } from './types';
-import { ReadModelView } from './ReadModelView';
-import { EventsView } from './EventsView';
-import './TimeMachine.css';
-
-type ViewMode = 'readmodel' | 'events';
-
-interface TimeMachineProps {
-  versions: Version[];
-  currentVersionIndex?: number;
-  onVersionChange?: (index: number) => void;
-  /** Scroll sensitivity - higher values require more scrolling to change versions */
-  scrollSensitivity?: number;
-}
-
-export const TimeMachine: React.FC<TimeMachineProps> = ({
-  versions,
-  currentVersionIndex = 0,
-  onVersionChange,
-  scrollSensitivity = 50,
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(currentVersionIndex);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const [isHoveringCard, setIsHoveringCard] = useState(false);
-  const [viewMode, setViewMode] = useState<ViewMode>('readmodel');
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollAccumulatorRef = useRef(0);
-
-  const handleVersionSelect = useCallback((index: number) => {
-    setSelectedIndex(index);
-    onVersionChange?.(index);
-  }, [onVersionChange]);
-
-  const handleTimelineHover = useCallback((index: number | null) => {
-    setHoveredIndex(index);
-  }, []);
-
-  // Handle trackpad two-finger scroll gesture
-  useEffect(() => {
-    if (viewMode !== 'readmodel') {
-      return;
-    }
-
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      // Only handle navigation when not hovering over a card
-      if (isHoveringCard) {
-        return; // Allow normal scrolling within cards
-      }
-
-      // Prevent default scrolling behavior
-      e.preventDefault();
-
-      // Use deltaX for horizontal scroll, fallback to deltaY for vertical
-      // Most trackpads send horizontal delta for two-finger swipe
-      const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-
-      // Accumulate scroll delta
-      scrollAccumulatorRef.current += delta;
-
-      // Check if we've accumulated enough scroll to change version
-      if (Math.abs(scrollAccumulatorRef.current) >= scrollSensitivity) {
-        const direction = scrollAccumulatorRef.current > 0 ? 1 : -1;
-        const newIndex = Math.max(0, Math.min(versions.length - 1, selectedIndex + direction));
-
-        if (newIndex !== selectedIndex) {
-          setSelectedIndex(newIndex);
-          onVersionChange?.(newIndex);
-        }
-
-        // Reset accumulator after version change
-        scrollAccumulatorRef.current = 0;
-      }
-    };
-
-    container.addEventListener('wheel', handleWheel, { passive: false });
-
-    return () => {
-      container.removeEventListener('wheel', handleWheel);
-    };
-  }, [versions.length, selectedIndex, onVersionChange, scrollSensitivity, isHoveringCard, viewMode]);
-
-  // Calculate the display index - either hovered or selected
-  // (not used in this component; ReadModelView computes its own display index)
-  void hoveredIndex;
-  void selectedIndex;
-
-  // Get all events from all versions
-  const allEvents = versions.flatMap(version => version.events || []);
-
-  return (
-    <div className="time-machine" ref={containerRef}>
-      {/* View Switcher */}
-      <div className="view-switcher">
-        <button
-          className={`view-button ${viewMode === 'readmodel' ? 'active' : ''}`}
-          onClick={() => setViewMode('readmodel')}
-          aria-label="Read Model View"
-          title="Read Model View"
-        >
-          <i className="pi pi-box" />
-        </button>
-        <button
-          className={`view-button ${viewMode === 'events' ? 'active' : ''}`}
-          onClick={() => setViewMode('events')}
-          aria-label="Events View"
-          title="Events View"
-        >
-          <i className="pi pi-list" />
-        </button>
-      </div>
-
-      {/* Render the appropriate view */}
-      {viewMode === 'readmodel' ? (
-        <ReadModelView
-          versions={versions}
-          selectedIndex={selectedIndex}
-          hoveredIndex={hoveredIndex}
-          onVersionSelect={handleVersionSelect}
-          onHoveringCardChange={setIsHoveringCard}
-        />
-      ) : (
-        <EventsView events={allEvents} />
-      )}
-
-      {/* Timeline - only show in ReadModel view */}
-      {viewMode === 'readmodel' && (
-        <Timeline
-          versions={versions}
-          selectedIndex={selectedIndex}
-          hoveredIndex={hoveredIndex}
-          onSelect={handleVersionSelect}
-          onHover={handleTimelineHover}
-        />
-      )}
-
-      {/* Navigation arrows - only show in ReadModel view */}
-      {viewMode === 'readmodel' && (
-        <div className="navigation-controls">
-          <button
-            className="nav-button prev"
-            disabled={selectedIndex === 0}
-            onClick={() => handleVersionSelect(Math.max(0, selectedIndex - 1))}
-            aria-label="Previous version"
-          >
-            ‹
-          </button>
-          <button
-            className="nav-button next"
-            disabled={selectedIndex === versions.length - 1}
-            onClick={() => handleVersionSelect(Math.min(versions.length - 1, selectedIndex + 1))}
-            aria-label="Next version"
-          >
-            ›
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-interface TimelineProps {
-  versions: Version[];
-  selectedIndex: number;
-  hoveredIndex: number | null;
-  onSelect: (index: number) => void;
-  onHover: (index: number | null) => void;
-}
-
-const Timeline: React.FC<TimelineProps> = ({
-  versions,
-  selectedIndex,
-  hoveredIndex,
-  onSelect,
-  onHover,
-}) => {
-  const getMagnification = (index: number, hoverIdx: number | null): number => {
-    if (hoverIdx === null) return 1;
-    const distance = Math.abs(index - hoverIdx);
-    // Fish-eye effect: items close to hover get magnified
-    if (distance === 0) return 2.0;
-    if (distance === 1) return 1.6;
-    if (distance === 2) return 1.3;
-    if (distance === 3) return 1.1;
-    return 1;
-  };
-
-  const formatDate = (date: Date): string => {
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  const formatTime = (date: Date): string => {
-    return date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true,
-    });
-  };
-
-  return (
-    <div
-      className="timeline"
-      onMouseLeave={() => onHover(null)}
-    >
-      <div className="timeline-track">
-        {versions.map((version, index) => {
-          const magnification = getMagnification(index, hoveredIndex);
-          const isSelected = index === selectedIndex;
-          const isHovered = index === hoveredIndex;
-
-          return (
-            <div
-              key={version.id}
-              className={`timeline-entry ${isSelected ? 'selected' : ''} ${isHovered ? 'hovered' : ''}`}
-              style={{
-                '--magnification': magnification,
-              } as React.CSSProperties}
-              onMouseEnter={() => onHover(index)}
-              onClick={() => onSelect(index)}
-            >
-              <div className="timeline-tick"></div>
-              <div className="timeline-label">
-                <span className="timeline-date">{formatDate(version.timestamp)}</span>
-                <span className="timeline-time">{formatTime(version.timestamp)}</span>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default TimeMachine;

package/TimeMachine/index.ts

@@ -1,8 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export { TimeMachine } from './TimeMachine';
-export { ReadModelView } from './ReadModelView';
-export { EventsView } from './EventsView';
-export { Properties } from './Properties';
-export * from './types';

package/TimeMachine/types.ts

@@ -1,23 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export interface Version {
-  id: string;
-  timestamp: Date;
-  label: string;
-  content: React.ReactNode;
-  events?: Event[];
-}
-
-export interface Event {
-  sequenceNumber: number;
-  type: string;
-  occurred: Date;
-  content: Record<string, unknown>;
-}
-
-export interface TimelineEntry {
-  id: string;
-  timestamp: Date;
-  label: string;
-}

package/global.d.ts

@@ -1,11 +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 * as React from 'react';
-
-declare global {
-  namespace JSX {
-    interface Element extends React.ReactElement {}
-    // Add additional JSX-related overrides if necessary.
-  }
-}

package/index.ts

@@ -1,22 +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 * as CommandDialog from './CommandDialog';
-import * as CommandForm from './CommandForm';
-import * as DataPage from './DataPage';
-import * as dataTables from './DataTables';
-import * as dialogs from './Dialogs';
-import * as Dropdown from './Dropdown';
-import * as PivotViewer from './PivotViewer';
-import * as TimeMachine from './TimeMachine';
-
-export {
-    CommandDialog,
-    CommandForm,
-    DataPage,
-    dataTables,
-    dialogs,
-    Dropdown,
-    PivotViewer,
-    TimeMachine,
-};

package/useOverlayZIndex.ts

@@ -1,32 +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 { useEffect } from 'react';
-
-/**
- * Hook to force a specific z-index on PrimeReact overlay components.
- * This is a workaround for PrimeReact's automatic z-index calculation
- * which can cause overlays to appear behind dialogs.
- *
- * @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')
- * @param zIndex - The desired z-index value (default: 10000)
- */
-export function useOverlayZIndex(className: string, zIndex: number = 10000): void {
-    useEffect(() => {
-        const observer = new MutationObserver(() => {
-            const panel = document.querySelector(`.${className}`);
-            if (panel instanceof HTMLElement && panel.style.zIndex !== zIndex.toString()) {
-                panel.style.zIndex = zIndex.toString();
-            }
-        });
-
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['style']
-        });
-
-        return () => observer.disconnect();
-    }, [className, zIndex]);
-}