@cratis/components 0.1.9 → 0.1.12

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/dist/cjs/CommandForm/DatePickerField.js

@@ -1,31 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var inputtext = require('primereact/inputtext');
-var CommandForm = require('./CommandForm.js');
-
-const DatePickerField = (props) => {
-    const [localValue, setLocalValue] = React.useState(props.currentValue || '');
-    const required = props.required ?? true;
-    const isValid = !required || localValue.trim().length > 0;
-    const { setFieldValidity } = CommandForm.useCommandFormContext();
-    React.useEffect(() => {
-        setLocalValue(props.currentValue || '');
-    }, [props.currentValue]);
-    React.useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-    return (jsxRuntime.jsx(inputtext.InputText, { type: "date", value: localValue, onChange: handleChange, required: required, invalid: !isValid, placeholder: props.title }));
-};
-DatePickerField.displayName = 'CommandFormField';
-
-exports.DatePickerField = DatePickerField;
-//# sourceMappingURL=DatePickerField.js.map

package/dist/cjs/CommandForm/DatePickerField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePickerField.js","sources":["../../../CommandForm/DatePickerField.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 { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface DatePickerFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    onChange?: (value: unknown) => void;\n    currentValue?: string;\n    onValueChange?: (value: string) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const DatePickerField = <TCommand,>(props: DatePickerFieldProps<TCommand>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue || '');\n    const required = props.required ?? true;\n    const isValid = !required || localValue.trim().length > 0;\n    const { setFieldValidity } = useCommandFormContext();\n\n    useEffect(() => {\n        setLocalValue(props.currentValue || '');\n    }, [props.currentValue]);\n\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <InputText\n            type=\"date\"\n            value={localValue}\n            onChange={handleChange}\n            required={required}\n            invalid={!isValid}\n            placeholder={props.title}\n        />\n    );\n};\n\nDatePickerField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","InputText"],"mappings":";;;;;;;AAsBO,MAAM,eAAe,GAAG,CAAY,KAAqC,KAAI;AAChF,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AACzD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;IAEpDC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AAC3C,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAExBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC5D,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC/B,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,mBAAS,EAAA,EACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,WAAW,EAAE,KAAK,CAAC,KAAK,EAAA,CAC1B;AAEV;AAEA,eAAe,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/DropdownField.js

@@ -1,31 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var Dropdown = require('../Dropdown/Dropdown.js');
-var CommandForm = require('./CommandForm.js');
-
-const DropdownField = (props) => {
-    const [localValue, setLocalValue] = React.useState(props.currentValue);
-    const required = props.required ?? true;
-    const isValid = !required || localValue !== null && localValue !== undefined;
-    const { setFieldValidity } = CommandForm.useCommandFormContext();
-    React.useEffect(() => {
-        setLocalValue(props.currentValue);
-    }, [props.currentValue]);
-    React.useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-    const handleChange = (e) => {
-        const newValue = e.value;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-    return (jsxRuntime.jsx(Dropdown.Dropdown, { value: localValue, onChange: handleChange, options: props.options, optionLabel: props.optionLabelField, optionValue: props.optionIdField, placeholder: props.placeholder || props.title, required: required, invalid: !isValid, className: "w-full" }));
-};
-DropdownField.displayName = 'CommandFormField';
-
-exports.DropdownField = DropdownField;
-//# sourceMappingURL=DropdownField.js.map

package/dist/cjs/CommandForm/DropdownField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../CommandForm/DropdownField.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 { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { DropdownChangeEvent } from 'primereact/dropdown';\nimport { Dropdown } from '../Dropdown';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface DropdownFieldProps<TCommand, TOption> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    options: TOption[];\n    optionIdField: keyof TOption;\n    optionLabelField: keyof TOption;\n    placeholder?: string;\n    onChange?: (value: unknown) => void;\n    currentValue?: unknown;\n    onValueChange?: (value: unknown) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const DropdownField = <TCommand, TOption>(props: DropdownFieldProps<TCommand, TOption>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue);\n    const required = props.required ?? true;\n    const isValid = !required || localValue !== null && localValue !== undefined;\n    const { setFieldValidity } = useCommandFormContext();\n\n    useEffect(() => {\n        setLocalValue(props.currentValue);\n    }, [props.currentValue]);\n\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: DropdownChangeEvent) => {\n        const newValue = e.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <Dropdown\n            value={localValue}\n            onChange={handleChange}\n            options={props.options}\n            optionLabel={props.optionLabelField as string}\n            optionValue={props.optionIdField as string}\n            placeholder={props.placeholder || props.title}\n            required={required}\n            invalid={!isValid}\n            className=\"w-full\"\n        />\n    );\n};\n\nDropdownField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","Dropdown"],"mappings":";;;;;;;AA2BO,MAAM,aAAa,GAAG,CAAoB,KAA4C,KAAI;AAC7F,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,CAAC;AAChE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,SAAS;AAC5E,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;IAEpDC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAExBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsB,KAAI;AAC5C,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK;QACxB,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;IAED,QACIC,cAAA,CAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,gBAA0B,EAC7C,WAAW,EAAE,KAAK,CAAC,aAAuB,EAC1C,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,KAAK,EAC7C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,SAAS,EAAC,QAAQ,EAAA,CACpB;AAEV;AAEA,aAAa,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/cjs/CommandForm/InputTextField.js

@@ -1,32 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var inputtext = require('primereact/inputtext');
-var CommandForm = require('./CommandForm.js');
-
-const InputTextField = (props) => {
-    const [localValue, setLocalValue] = React.useState(props.currentValue || '');
-    const required = props.required ?? true;
-    const isValid = !required || localValue.trim().length > 0;
-    const { setFieldValidity } = CommandForm.useCommandFormContext();
-    const inputType = props.propertyDescriptor?.type === Number ? 'number' : 'text';
-    React.useEffect(() => {
-        setLocalValue(props.currentValue || '');
-    }, [props.currentValue]);
-    React.useEffect(() => {
-        if (props.fieldName) {
-            setFieldValidity(props.fieldName, isValid);
-        }
-    }, [isValid, props.fieldName, setFieldValidity]);
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        setLocalValue(newValue);
-        props.onValueChange?.(newValue);
-    };
-    return (jsxRuntime.jsx(inputtext.InputText, { type: inputType, value: localValue, onChange: handleChange, required: required, invalid: !isValid, placeholder: props.title }));
-};
-InputTextField.displayName = 'CommandFormField';
-
-exports.InputTextField = InputTextField;
-//# sourceMappingURL=InputTextField.js.map

package/dist/cjs/CommandForm/InputTextField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputTextField.js","sources":["../../../CommandForm/InputTextField.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 { PropertyAccessor } from '@cratis/fundamentals';\nimport { PropertyDescriptor } from '@cratis/arc/reflection';\nimport React, { useState, useEffect } from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { useCommandFormContext } from './CommandForm';\n\nexport interface InputTextFieldProps<TCommand> {\n    icon?: React.ReactElement;\n    value: PropertyAccessor<TCommand>;\n    onChange?: (value: unknown) => void;\n    currentValue?: string;\n    onValueChange?: (value: string) => void;\n    required?: boolean;\n    title?: string;\n    description?: string;\n    propertyDescriptor?: PropertyDescriptor;\n    fieldName?: string;\n}\n\nexport const InputTextField = <TCommand,>(props: InputTextFieldProps<TCommand>) => {\n    const [localValue, setLocalValue] = useState(props.currentValue || '');\n    const required = props.required ?? true;\n    const isValid = !required || localValue.trim().length > 0;\n    const { setFieldValidity } = useCommandFormContext();\n\n    // Determine input type based on property descriptor\n    const inputType = props.propertyDescriptor?.type === Number ? 'number' : 'text';\n\n    // Update local value when prop changes from outside\n    useEffect(() => {\n        setLocalValue(props.currentValue || '');\n    }, [props.currentValue]);\n\n    // Report validity changes\n    useEffect(() => {\n        if (props.fieldName) {\n            setFieldValidity(props.fieldName, isValid);\n        }\n    }, [isValid, props.fieldName, setFieldValidity]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        setLocalValue(newValue);\n        props.onValueChange?.(newValue);\n    };\n\n    return (\n        <InputText\n            type={inputType}\n            value={localValue}\n            onChange={handleChange}\n            required={required}\n            invalid={!isValid}\n            placeholder={props.title}\n        />\n    );\n};\n\nInputTextField.displayName = 'CommandFormField';\n"],"names":["useState","useCommandFormContext","useEffect","_jsx","InputText"],"mappings":";;;;;;;AAsBO,MAAM,cAAc,GAAG,CAAY,KAAoC,KAAI;AAC9E,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AACtE,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI;AACvC,IAAA,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;AACzD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAGC,iCAAqB,EAAE;AAGpD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,kBAAkB,EAAE,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;IAG/EC,eAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;AAC3C,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAGxBA,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,CAAC,SAAS,EAAE;AACjB,YAAA,gBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;QAC9C;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC5D,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC/B,aAAa,CAAC,QAAQ,CAAC;AACvB,QAAA,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;AACnC,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,mBAAS,EAAA,EACN,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,OAAO,EACjB,WAAW,EAAE,KAAK,CAAC,KAAK,EAAA,CAC1B;AAEV;AAEA,cAAc,CAAC,WAAW,GAAG,kBAAkB;;;;"}