@cratis/components 0.1.9

package/TimeMachine/Properties.tsx

@@ -0,0 +1,98 @@
+// 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,143 @@
+// 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

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,244 @@
+// 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

@@ -0,0 +1,8 @@
+// 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

@@ -0,0 +1,23 @@
+// 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/dist/cjs/CommandDialog/CommandDialog.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dialog = require('primereact/dialog');
+var button = require('primereact/button');
+var React = require('react');
+var CommandForm = require('../CommandForm/CommandForm.js');
+
+const CommandDialogContext = React.createContext(undefined);
+const useCommandDialogContext = () => {
+    const context = React.useContext(CommandDialogContext);
+    if (!context) {
+        throw new Error('useCommandDialogContext must be used within a CommandDialog');
+    }
+    return context;
+};
+const CommandDialogFormContent = () => {
+    const command = CommandForm.useCommandInstance();
+    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = CommandForm.useCommandFormContext();
+    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();
+    const handleConfirm = async () => {
+        if (onBeforeExecute) {
+            const transformedValues = onBeforeExecute(command);
+            setCommandValues(transformedValues);
+        }
+        const result = await command.execute();
+        if (result.isSuccess) {
+            await onConfirm(result);
+        }
+        else {
+            setCommandResult(result);
+        }
+    };
+    const handleCancel = () => {
+        onCancel();
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "card flex flex-wrap justify-content-center gap-3 mt-8", children: [jsxRuntime.jsx(button.Button, { label: confirmLabel, icon: confirmIcon, onClick: handleConfirm, disabled: !isValid }), jsxRuntime.jsx(button.Button, { label: cancelLabel, icon: cancelIcon, severity: 'secondary', onClick: handleCancel })] }) }));
+};
+const CommandDialogFieldsWrapper = (props) => {
+    React.Children.forEach(props.children, child => {
+        if (React.isValidElement(child)) {
+            const component = child.type;
+            if (component.displayName !== 'CommandFormField') {
+                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);
+            }
+        }
+    });
+    return (jsxRuntime.jsx(CommandForm.CommandForm.Fields, { children: props.children }));
+};
+const CommandDialogComponent = (props) => {
+    const { command, initialValues, currentValues, visible, header, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmIcon = 'pi pi-check', cancelIcon = 'pi pi-times', onConfirm, onCancel, onFieldValidate, onFieldChange, onBeforeExecute, children, style = { width: '50vw' }, width } = props;
+    const dialogStyle = width ? { ...style, width } : style;
+    const contextValue = {
+        onSuccess: onConfirm,
+        onCancel,
+        confirmLabel,
+        cancelLabel,
+        confirmIcon,
+        cancelIcon,
+        onFieldValidate,
+        onFieldChange,
+        onBeforeExecute
+    };
+    return (jsxRuntime.jsx(dialog.Dialog, { header: header, visible: visible, style: dialogStyle, onHide: onCancel, contentStyle: { overflow: 'visible' }, children: jsxRuntime.jsx(CommandDialogContext.Provider, { value: contextValue, children: jsxRuntime.jsxs(CommandForm.CommandForm, { command: command, initialValues: initialValues, currentValues: currentValues, onFieldValidate: onFieldValidate, onFieldChange: onFieldChange, onBeforeExecute: onBeforeExecute, children: [children, jsxRuntime.jsx(CommandDialogFormContent, {})] }) }) }));
+};
+CommandDialogComponent.Fields = CommandDialogFieldsWrapper;
+const CommandDialog = CommandDialogComponent;
+
+exports.CommandDialog = CommandDialog;
+exports.useCommandDialogContext = useCommandDialogContext;
+//# sourceMappingURL=CommandDialog.js.map

package/dist/cjs/CommandDialog/CommandDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ICommandResult } from '@cratis/arc/commands';\nimport { Constructor } from '@cratis/fundamentals';\nimport { Dialog } from 'primereact/dialog';\nimport { Button } from 'primereact/button';\nimport React, { createContext, useContext } from 'react';\nimport { CommandForm, useCommandFormContext, BeforeExecuteCallback } from '../CommandForm/CommandForm';\nimport { useCommandInstance } from '../CommandForm/CommandForm';\n\nexport type FieldValidator<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => string | undefined;\nexport type FieldChangeCallback<TCommand> = (command: TCommand, fieldName: string, oldValue: unknown, newValue: unknown) => void;\n\nexport interface CommandDialogProps<TCommand, TResponse = object> {\n    command: Constructor<TCommand>;\n    initialValues?: Partial<TCommand>;\n    currentValues?: Partial<TCommand> | undefined;\n    visible: boolean;\n    header: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmIcon?: string;\n    cancelIcon?: string;\n    onConfirm: (result: ICommandResult<TResponse>) => void | Promise<void>;\n    onCancel: () => void;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n    children?: React.ReactNode;\n    style?: React.CSSProperties;\n    width?: string;\n}\n\ninterface CommandDialogContextValue<TCommand = unknown> {\n    onSuccess: (result: ICommandResult<any>) => void | Promise<void>;\n    onCancel: () => void;\n    confirmLabel: string;\n    cancelLabel: string;\n    confirmIcon: string;\n    cancelIcon: string;\n    onFieldValidate?: FieldValidator<TCommand>;\n    onFieldChange?: FieldChangeCallback<TCommand>;\n    onBeforeExecute?: BeforeExecuteCallback<TCommand>;\n}\n\nconst CommandDialogContext = createContext<CommandDialogContextValue<unknown> | undefined>(undefined);\n\nexport const useCommandDialogContext = <TCommand = unknown,>() => {\n    const context = useContext(CommandDialogContext);\n    if (!context) {\n        throw new Error('useCommandDialogContext must be used within a CommandDialog');\n    }\n    return context as CommandDialogContextValue<TCommand>;\n};\n\nconst CommandDialogFormContent = () => {\n    const command = useCommandInstance();\n    const { setCommandResult, setCommandValues, isValid, onBeforeExecute } = useCommandFormContext();\n    const { onSuccess: onConfirm, onCancel, confirmLabel, cancelLabel, confirmIcon, cancelIcon } = useCommandDialogContext();\n\n    const handleConfirm = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(command);\n            setCommandValues(transformedValues);\n        }\n        const result = await command.execute();\n        if (result.isSuccess) {\n            await onConfirm(result);\n        } else {\n            setCommandResult(result);\n        }\n    };\n\n    const handleCancel = () => {\n        onCancel();\n    };\n\n    return (\n        <>\n            <div className=\"card flex flex-wrap justify-content-center gap-3 mt-8\">\n                <Button label={confirmLabel} icon={confirmIcon} onClick={handleConfirm} disabled={!isValid} />\n                <Button label={cancelLabel} icon={cancelIcon} severity='secondary' onClick={handleCancel} />\n            </div>\n        </>\n    );\n};\n\nconst CommandDialogFieldsWrapper = (props: { children: React.ReactNode }) => {\n    React.Children.forEach(props.children, child => {\n        if (React.isValidElement(child)) {\n            const component = child.type as any;\n            if (component.displayName !== 'CommandFormField') {\n                throw new Error(`Only CommandFormField components are allowed as children of CommandDialog.Fields. Got: ${component.displayName || component.name || 'Unknown'}`);\n            }\n        }\n    });\n\n    return (\n        <CommandForm.Fields>\n            {props.children}\n        </CommandForm.Fields>\n    );\n};\n\nconst CommandDialogComponent = <TCommand extends object = any, TResponse = object>(props: CommandDialogProps<TCommand, TResponse>) => {\n    const {\n        command,\n        initialValues,\n        currentValues,\n        visible,\n        header,\n        confirmLabel = 'Confirm',\n        cancelLabel = 'Cancel',\n        confirmIcon = 'pi pi-check',\n        cancelIcon = 'pi pi-times',\n        onConfirm,\n        onCancel,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute,\n        children,\n        style = { width: '50vw' },\n        width\n    } = props;\n\n    const dialogStyle = width ? { ...style, width } : style;\n\n    const contextValue: CommandDialogContextValue<TCommand> = {\n        onSuccess: onConfirm,\n        onCancel,\n        confirmLabel,\n        cancelLabel,\n        confirmIcon,\n        cancelIcon,\n        onFieldValidate,\n        onFieldChange,\n        onBeforeExecute\n    };\n\n    return (\n        <Dialog\n            header={header}\n            visible={visible}\n            style={dialogStyle}\n            onHide={onCancel}\n            contentStyle={{ overflow: 'visible' }}\n        >\n            <CommandDialogContext.Provider value={contextValue}>\n                <CommandForm command={command} initialValues={initialValues} currentValues={currentValues} onFieldValidate={onFieldValidate} onFieldChange={onFieldChange} onBeforeExecute={onBeforeExecute}>\n                    {children}\n                    <CommandDialogFormContent />\n                </CommandForm>\n            </CommandDialogContext.Provider>\n        </Dialog>\n    );\n};\n\nCommandDialogComponent.Fields = CommandDialogFieldsWrapper;\n\nexport const CommandDialog = CommandDialogComponent;\n"],"names":["createContext","useContext","useCommandInstance","useCommandFormContext","_jsx","_jsxs","Button","CommandForm","Dialog"],"mappings":"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"}

package/dist/cjs/CommandDialog/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var CommandDialog = require('./CommandDialog.js');
+
+
+
+exports.CommandDialog = CommandDialog.CommandDialog;
+exports.useCommandDialogContext = CommandDialog.useCommandDialogContext;
+//# sourceMappingURL=index.js.map

package/dist/cjs/CommandDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}