@cratis/components 1.4.2 → 1.5.0

package/dist/cjs/CommandDialog/StepperCommandDialog.css

@@ -0,0 +1,14 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Step validation colors ─────────────────────────────────────────────── */
+/* The circle background colour for error/valid states is applied via inline
+   style on the number span through PrimeReact's passthrough API, so no CSS
+   class rules are needed here for those states.
+
+   Non-active steps are dimmed using PrimeReact's own data-p-active attribute
+   so no extra passthrough class injection is required. */
+
+.p-stepper [data-pc-section="header"][data-p-active="false"] {
+    opacity: 0.5;
+}

package/dist/cjs/CommandDialog/StepperCommandDialog.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dialogs = require('@cratis/arc.react/dialogs');
+var dialog = require('primereact/dialog');
+var stepper = require('primereact/stepper');
+var button = require('primereact/button');
+var React = require('react');
+var commands = require('@cratis/arc.react/commands');
+require('./StepperCommandDialog.css');
+
+const getPropertyName = (accessor) => {
+    if (typeof accessor !== 'function')
+        return '';
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+};
+const extractFieldNamesFromNode = (nodes) => {
+    const names = [];
+    React.Children.forEach(nodes, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        const component = child.type;
+        if (component.displayName === 'CommandFormField') {
+            const fieldProps = child.props;
+            const name = getPropertyName(fieldProps.value);
+            if (name)
+                names.push(name);
+        }
+        const childProps = child.props;
+        if (childProps.children != null) {
+            names.push(...extractFieldNamesFromNode(childProps.children));
+        }
+    });
+    return names;
+};
+const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, resizable = false, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, children }) => {
+    const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = commands.useCommandFormContext();
+    const commandInstance = commands.useCommandInstance();
+    const [isBusy, setIsBusy] = React.useState(false);
+    const [activeStep, setActiveStep] = React.useState(0);
+    const [visitedSteps, setVisitedSteps] = React.useState(new Set([0]));
+    let contextCloseDialog;
+    try {
+        const context = dialogs.useDialogContext();
+        contextCloseDialog = context?.closeDialog;
+    }
+    catch {
+        contextCloseDialog = undefined;
+    }
+    const stepCount = React.Children.count(children);
+    const isLastStep = activeStep === stepCount - 1;
+    const isFirstStep = activeStep === 0;
+    const isDialogValid = isValid !== false && isCommandFormValid;
+    const stepFieldNames = React.useMemo(() => React.Children.toArray(children).map((step) => {
+        if (!React.isValidElement(step))
+            return [];
+        const stepProps = step.props;
+        return extractFieldNamesFromNode(stepProps.children);
+    }), [children]);
+    const stepHasError = (stepIndex) => stepFieldNames[stepIndex]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
+    const handleClose = async (result) => {
+        let shouldCloseThroughContext = true;
+        if (result === dialogs.DialogResult.Ok || result === dialogs.DialogResult.Yes) {
+            if (onConfirm) {
+                const closeResult = await onConfirm();
+                shouldCloseThroughContext = closeResult === true;
+            }
+            else if (onClose) {
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
+            }
+        }
+        else {
+            if (onCancel) {
+                const closeResult = await onCancel();
+                shouldCloseThroughContext = closeResult === true;
+            }
+            else if (onClose) {
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
+            }
+        }
+        if (shouldCloseThroughContext) {
+            contextCloseDialog?.(result);
+        }
+    };
+    const handleSubmit = async () => {
+        if (onBeforeExecute) {
+            const transformedValues = onBeforeExecute(commandInstance);
+            setCommandValues(transformedValues);
+        }
+        setIsBusy(true);
+        let result;
+        try {
+            result = await commandInstance.execute();
+        }
+        finally {
+            setIsBusy(false);
+        }
+        if (!result.isSuccess) {
+            setCommandResult(result);
+            return;
+        }
+        await handleClose(dialogs.DialogResult.Ok);
+    };
+    const processChildren = (nodes) => {
+        return React.Children.map(nodes, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            const component = child.type;
+            if (component.displayName === 'CommandFormField') {
+                return jsxRuntime.jsx(commands.CommandFormFieldWrapper, { field: child });
+            }
+            const childProps = child.props;
+            if (childProps.children != null) {
+                return React.cloneElement(child, {
+                    children: processChildren(childProps.children)
+                });
+            }
+            return child;
+        });
+    };
+    const stepperPt = React.useMemo(() => {
+        const userPt = pt;
+        const userStepperPanelPt = userPt?.stepperpanel;
+        const userNumberPt = userStepperPanelPt?.number;
+        return {
+            ...userPt,
+            stepperpanel: {
+                ...userStepperPanelPt,
+                number: (opts) => {
+                    const existing = typeof userNumberPt === 'function'
+                        ? userNumberPt(opts)
+                        : userNumberPt ?? {};
+                    const idx = opts.context.index;
+                    const hasError = stepFieldNames[idx]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
+                    const isVisited = visitedSteps.has(idx);
+                    const bgColor = hasError
+                        ? 'var(--red-500, #ef4444)'
+                        : isVisited
+                            ? 'var(--green-500, #22c55e)'
+                            : null;
+                    if (!bgColor)
+                        return existing;
+                    const existingStyle = existing.style;
+                    return {
+                        ...existing,
+                        style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
+                    };
+                }
+            }
+        };
+    }, [pt, stepFieldNames, getFieldError, visitedSteps]);
+    const headerElement = (jsxRuntime.jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsxRuntime.jsx("span", { className: "font-bold white-space-nowrap", children: title }) }));
+    const footer = (jsxRuntime.jsxs("div", { className: "flex align-items-center w-full gap-3", children: [!isFirstStep && (jsxRuntime.jsx(button.Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(s => s - 1), disabled: isBusy, outlined: true })), jsxRuntime.jsx("div", { className: "flex-1" }), !isLastStep && (jsxRuntime.jsx(button.Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
+                    setVisitedSteps(prev => new Set(prev).add(activeStep));
+                    setActiveStep(s => s + 1);
+                }, disabled: isBusy || stepHasError(activeStep) })), isLastStep && isDialogValid && (jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: handleSubmit, loading: isBusy, disabled: isBusy, autoFocus: true }))] }));
+    return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(dialogs.DialogResult.Cancelled), visible: visible, style: { width, ...style }, resizable: resizable, closable: true, children: jsxRuntime.jsx(stepper.Stepper, { activeStep: activeStep, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: onChangeStep, start: start, end: end, pt: stepperPt, ptOptions: ptOptions, unstyled: unstyled, children: processChildren(children) }) }));
+};
+const StepperCommandDialogComponent = (props) => {
+    const { title, visible, width, style, resizable, isValid, onClose, onConfirm, onCancel, okLabel, nextLabel, previousLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
+    return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
+};
+const StepperCommandDialog = StepperCommandDialogComponent;
+
+exports.StepperCommandDialog = StepperCommandDialog;
+//# sourceMappingURL=StepperCommandDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.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 { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { Dialog as PrimeDialog } from 'primereact/dialog';\nimport { Stepper as PrimeStepper, type StepperProps } from 'primereact/stepper';\nimport { Button } from 'primereact/button';\nimport React, { useMemo, useState } from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\nimport type { CloseDialog, ConfirmCallback, CancelCallback } from '../Dialogs/Dialog';\nimport { CSSProperties } from 'react';\nimport './StepperCommandDialog.css';\n\n/** Extracts the property name from an accessor function like `c => c.name`. */\nconst getPropertyName = (accessor: ((obj: unknown) => unknown) | unknown): string => {\n    if (typeof accessor !== 'function') return '';\n    const fnStr = accessor.toString();\n    const match = fnStr.match(/\\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);\n    return match ? match[1] : '';\n};\n\n/** Recursively collects all CommandFormField property names from a React node tree. */\nconst extractFieldNamesFromNode = (nodes: React.ReactNode): string[] => {\n    const names: string[] = [];\n    React.Children.forEach(nodes, (child) => {\n        if (!React.isValidElement(child)) return;\n        const component = child.type as React.ComponentType<unknown>;\n        if ((component as { displayName?: string }).displayName === 'CommandFormField') {\n            const fieldProps = child.props as { value?: (obj: unknown) => unknown };\n            const name = getPropertyName(fieldProps.value);\n            if (name) names.push(name);\n        }\n        const childProps = child.props as Record<string, unknown>;\n        if (childProps.children != null) {\n            names.push(...extractFieldNamesFromNode(childProps.children as React.ReactNode));\n        }\n    });\n    return names;\n};\n\n/**\n * Stepper-specific customization props forwarded directly to PrimeReact Stepper.\n * `activeStep` and `children` are managed internally and are excluded.\n */\ntype StepperCustomizationProps = Pick<StepperProps,\n    'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'\n>;\n\nexport interface StepperCommandDialogProps<TCommand extends object>\n    extends Omit<CommandFormProps<TCommand>, 'children'>,\n        StepperCustomizationProps {\n    /** Dialog title text. */\n    title: string;\n    /** Controls dialog visibility. Defaults to `true`. */\n    visible?: boolean;\n    /** Dialog width. */\n    width?: string;\n    /** Custom CSS styles applied to the dialog. */\n    style?: CSSProperties;\n    /** Whether the dialog can be resized. Defaults to `false`. */\n    resizable?: boolean;\n    /** Additional validity gate combined with command form validity. */\n    isValid?: boolean;\n    /** Fallback close callback. */\n    onClose?: CloseDialog;\n    /** Confirm callback — called only after successful command execution. */\n    onConfirm?: ConfirmCallback;\n    /** Cancel callback — invoked when the dialog X button is clicked. */\n    onCancel?: CancelCallback;\n    /** Label for the submit button shown on the last step when valid. Defaults to `'Submit'`. */\n    okLabel?: string;\n    /** Label for the next step button. Defaults to `'Next'`. */\n    nextLabel?: string;\n    /** Label for the previous step button. Defaults to `'Previous'`. */\n    previousLabel?: string;\n    /** StepperPanel children defining each wizard step. */\n    children?: React.ReactNode;\n}\n\nconst StepperCommandDialogWrapper = <TCommand extends object>({\n    title,\n    visible = true,\n    width = '600px',\n    style,\n    resizable = false,\n    isValid,\n    onClose,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    okLabel = 'Submit',\n    nextLabel = 'Next',\n    previousLabel = 'Previous',\n    orientation = 'horizontal',\n    headerPosition,\n    linear = true,\n    onChangeStep,\n    start,\n    end,\n    pt,\n    ptOptions,\n    unstyled,\n    children\n}: {\n    title: string;\n    visible?: boolean;\n    width?: string;\n    style?: CSSProperties;\n    resizable?: boolean;\n    isValid?: boolean;\n    onClose?: CloseDialog;\n    onConfirm?: ConfirmCallback;\n    onCancel?: CancelCallback;\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    okLabel?: string;\n    nextLabel?: string;\n    previousLabel?: string;\n    children?: React.ReactNode;\n} & StepperCustomizationProps) => {\n    const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n    const [isBusy, setIsBusy] = useState(false);\n    const [activeStep, setActiveStep] = useState(0);\n    const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set([0]));\n\n    let contextCloseDialog: ((result: DialogResult) => void) | undefined;\n    try {\n        const context = useDialogContext();\n        contextCloseDialog = context?.closeDialog;\n    } catch {\n        contextCloseDialog = undefined;\n    }\n\n    const stepCount = React.Children.count(children);\n    const isLastStep = activeStep === stepCount - 1;\n    const isFirstStep = activeStep === 0;\n    const isDialogValid = isValid !== false && isCommandFormValid;\n\n    // Pre-compute the command property names for each StepperPanel step.\n    // Used to determine whether a step has validation errors for the indicator badge.\n    const stepFieldNames = useMemo(\n        () => React.Children.toArray(children).map((step) => {\n            if (!React.isValidElement(step)) return [] as string[];\n            const stepProps = step.props as Record<string, unknown>;\n            return extractFieldNamesFromNode(stepProps.children as React.ReactNode);\n        }),\n        [children]\n    );\n\n    const stepHasError = (stepIndex: number): boolean =>\n        stepFieldNames[stepIndex]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;\n\n    const handleClose = async (result: DialogResult) => {\n        let shouldCloseThroughContext = true;\n\n        if (result === DialogResult.Ok || result === DialogResult.Yes) {\n            if (onConfirm) {\n                const closeResult = await onConfirm();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        } else {\n            if (onCancel) {\n                const closeResult = await onCancel();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        }\n\n        if (shouldCloseThroughContext) {\n            contextCloseDialog?.(result);\n        }\n    };\n\n    const handleSubmit = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n\n        setIsBusy(true);\n        let result: ICommandResult<unknown>;\n\n        try {\n            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        } finally {\n            setIsBusy(false);\n        }\n\n        if (!result.isSuccess) {\n            setCommandResult(result);\n            return;\n        }\n\n        await handleClose(DialogResult.Ok);\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    /**\n     * Builds the passthrough `pt` object for PrimeStepper, injecting an inline\n     * style onto the step *number* span to colour it red (errors) or green (visited\n     * and valid). Targeting the number span — rather than the header `<li>` — means\n     * PrimeReact's default `p-stepper-header` class and all its layout/separator\n     * CSS are never disturbed.\n     * Merges with any user-supplied `pt` prop.\n     */\n    const stepperPt = useMemo(() => {\n        type StepContext = { context: { index: number } };\n        type NumberPtFn = (opts: StepContext) => Record<string, unknown>;\n\n        const userPt = pt as Record<string, unknown> | undefined;\n        const userStepperPanelPt = userPt?.stepperpanel as Record<string, unknown> | undefined;\n        const userNumberPt = userStepperPanelPt?.number;\n\n        return {\n            ...userPt,\n            stepperpanel: {\n                ...userStepperPanelPt,\n                number: (opts: StepContext) => {\n                    const existing: Record<string, unknown> =\n                        typeof userNumberPt === 'function'\n                            ? (userNumberPt as NumberPtFn)(opts)\n                            : (userNumberPt as Record<string, unknown> | undefined) ?? {};\n                    const idx = opts.context.index;\n                    const hasError = stepFieldNames[idx]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;\n                    const isVisited = visitedSteps.has(idx);\n\n                    const bgColor = hasError\n                        ? 'var(--red-500, #ef4444)'\n                        : isVisited\n                            ? 'var(--green-500, #22c55e)'\n                            : null;\n\n                    if (!bgColor) return existing;\n                    const existingStyle = existing.style as Record<string, unknown> | undefined;\n                    return {\n                        ...existing,\n                        style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }\n                    };\n                }\n            }\n        };\n    }, [pt, stepFieldNames, getFieldError, visitedSteps]);\n\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{title}</span>\n        </div>\n    );\n\n    const footer = (\n        <div className=\"flex align-items-center w-full gap-3\">\n            {!isFirstStep && (\n                <Button\n                    label={previousLabel}\n                    icon=\"pi pi-arrow-left\"\n                    onClick={() => setActiveStep(s => s - 1)}\n                    disabled={isBusy}\n                    outlined\n                />\n            )}\n            <div className=\"flex-1\" />\n            {!isLastStep && (\n                <Button\n                    label={nextLabel}\n                    icon=\"pi pi-arrow-right\"\n                    iconPos=\"right\"\n                    onClick={() => {\n                        setVisitedSteps(prev => new Set(prev).add(activeStep));\n                        setActiveStep(s => s + 1);\n                    }}\n                    disabled={isBusy || stepHasError(activeStep)}\n                />\n            )}\n            {isLastStep && isDialogValid && (\n                <Button\n                    label={okLabel}\n                    icon=\"pi pi-check\"\n                    onClick={handleSubmit}\n                    loading={isBusy}\n                    disabled={isBusy}\n                    autoFocus\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <PrimeDialog\n            header={headerElement}\n            modal\n            footer={footer}\n            onHide={() => handleClose(DialogResult.Cancelled)}\n            visible={visible}\n            style={{ width, ...style }}\n            resizable={resizable}\n            closable\n        >\n            <PrimeStepper\n                activeStep={activeStep}\n                linear={linear}\n                orientation={orientation}\n                headerPosition={headerPosition}\n                onChangeStep={onChangeStep}\n                start={start}\n                end={end}\n                pt={stepperPt as StepperProps['pt']}\n                ptOptions={ptOptions}\n                unstyled={unstyled}\n            >\n                {processChildren(children)}\n            </PrimeStepper>\n        </PrimeDialog>\n    );\n};\n\nconst StepperCommandDialogComponent = <TCommand extends object = object>(\n    props: StepperCommandDialogProps<TCommand>\n) => {\n    const {\n        title,\n        visible,\n        width,\n        style,\n        resizable,\n        isValid,\n        onClose,\n        onConfirm,\n        onCancel,\n        okLabel,\n        nextLabel,\n        previousLabel,\n        orientation,\n        headerPosition,\n        linear,\n        onChangeStep,\n        start,\n        end,\n        pt,\n        ptOptions,\n        unstyled,\n        children,\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <StepperCommandDialogWrapper<TCommand>\n                title={title}\n                visible={visible}\n                width={width}\n                style={style}\n                resizable={resizable}\n                isValid={isValid}\n                onClose={onClose}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n                okLabel={okLabel}\n                nextLabel={nextLabel}\n                previousLabel={previousLabel}\n                orientation={orientation}\n                headerPosition={headerPosition}\n                linear={linear}\n                onChangeStep={onChangeStep}\n                start={start}\n                end={end}\n                pt={pt}\n                ptOptions={ptOptions}\n                unstyled={unstyled}\n            >\n                {children}\n            </StepperCommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nexport const StepperCommandDialog = StepperCommandDialogComponent;\n"],"names":["useCommandFormContext","useCommandInstance","useState","useDialogContext","useMemo","DialogResult","_jsx","CommandFormFieldWrapper","_jsxs","Button","PrimeDialog","PrimeStepper","CommandForm"],"mappings":"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"}

package/dist/cjs/CommandDialog/index.js

@@ -1,8 +1,10 @@
 'use strict';
 
 var CommandDialog = require('./CommandDialog.js');
+var StepperCommandDialog = require('./StepperCommandDialog.js');
 
 
 
 exports.CommandDialog = CommandDialog.CommandDialog;
+exports.StepperCommandDialog = StepperCommandDialog.StepperCommandDialog;
 //# sourceMappingURL=index.js.map

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

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

package/dist/cjs/Common/Page.js

@@ -2,8 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 
-const Page = ({ title, children, panel, ...rest }) => {
-    return (jsxRuntime.jsxs("div", { className: 'flex flex-col h-full flex-1', ...rest, children: [jsxRuntime.jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsxRuntime.jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
+const Page = ({ title, showTitle = false, children, panel, ...rest }) => {
+    return (jsxRuntime.jsxs("div", { className: 'flex flex-col h-full flex-1', ...rest, children: [showTitle && jsxRuntime.jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsxRuntime.jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
 };
 
 exports.Page = Page;

package/dist/cjs/Common/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../Common/Page.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 { HTMLAttributes, ReactNode } from 'react';\n\nexport interface PageProps extends HTMLAttributes<HTMLDivElement> {\n    title: string;\n    children?: ReactNode;\n    panel?: boolean\n}\n\nexport const Page = ({ title, children, panel, ...rest }: PageProps) => {\n    return (\n        <div className='flex flex-col h-full flex-1' {...rest}>\n            <h1 className='text-3xl mt-3 mb-4'>{title}</h1>\n            <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>\n                {children}\n            </main>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAWO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACnE,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,GAAK,IAAI,EAAA,QAAA,EAAA,CACjDC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,GAAM,EAC/CA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,+CAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}
+{"version":3,"file":"Page.js","sources":["../../../Common/Page.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 { HTMLAttributes, ReactNode } from 'react';\n\nexport interface PageProps extends HTMLAttributes<HTMLDivElement> {\n    title: string;\n    showTitle?: boolean;\n    children?: ReactNode;\n    panel?: boolean\n}\n\nexport const Page = ({ title, showTitle = false, children, panel, ...rest }: PageProps) => {\n    return (\n        <div className='flex flex-col h-full flex-1' {...rest}>\n            {showTitle && <h1 className='text-3xl mt-3 mb-4'>{title}</h1>}\n            <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>\n                {children}\n            </main>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;MAYa,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,uBAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}

package/dist/cjs/tailwind-utilities.css

@@ -328,6 +328,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
   .block {
     display: block;
   }

package/dist/esm/CommandDialog/StepperCommandDialog.css

@@ -0,0 +1,14 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/* ── Step validation colors ─────────────────────────────────────────────── */
+/* The circle background colour for error/valid states is applied via inline
+   style on the number span through PrimeReact's passthrough API, so no CSS
+   class rules are needed here for those states.
+
+   Non-active steps are dimmed using PrimeReact's own data-p-active attribute
+   so no extra passthrough class injection is required. */
+
+.p-stepper [data-pc-section="header"][data-p-active="false"] {
+    opacity: 0.5;
+}

package/dist/esm/CommandDialog/StepperCommandDialog.d.ts

@@ -0,0 +1,25 @@
+import { type StepperProps } from 'primereact/stepper';
+import React from 'react';
+import { type CommandFormProps } from '@cratis/arc.react/commands';
+import type { CloseDialog, ConfirmCallback, CancelCallback } from '../Dialogs/Dialog';
+import { CSSProperties } from 'react';
+import './StepperCommandDialog.css';
+type StepperCustomizationProps = Pick<StepperProps, 'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'>;
+export interface StepperCommandDialogProps<TCommand extends object> extends Omit<CommandFormProps<TCommand>, 'children'>, StepperCustomizationProps {
+    title: string;
+    visible?: boolean;
+    width?: string;
+    style?: CSSProperties;
+    resizable?: boolean;
+    isValid?: boolean;
+    onClose?: CloseDialog;
+    onConfirm?: ConfirmCallback;
+    onCancel?: CancelCallback;
+    okLabel?: string;
+    nextLabel?: string;
+    previousLabel?: string;
+    children?: React.ReactNode;
+}
+export declare const StepperCommandDialog: <TCommand extends object = object>(props: StepperCommandDialogProps<TCommand>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StepperCommandDialog.d.ts.map

package/dist/esm/CommandDialog/StepperCommandDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCommandDialog.d.ts","sourceRoot":"","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEhF,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,4BAA4B,CAAC;AAiCpC,KAAK,yBAAyB,GAAG,IAAI,CAAC,YAAY,EAC9C,aAAa,GAAG,gBAAgB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACnH,CAAC;AAEF,MAAM,WAAW,yBAAyB,CAAC,QAAQ,SAAS,MAAM,CAC9D,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,EAChD,yBAAyB;IAE7B,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoUD,eAAO,MAAM,oBAAoB,GA7DM,QAAQ,SAAS,MAAM,kBACnD,yBAAyB,CAAC,QAAQ,CAAC,4CA4DmB,CAAC"}

package/dist/esm/CommandDialog/StepperCommandDialog.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useDialogContext, DialogResult } from '@cratis/arc.react/dialogs';
+import { Dialog } from 'primereact/dialog';
+import { Stepper } from 'primereact/stepper';
+import { Button } from 'primereact/button';
+import React, { useState, useMemo } from 'react';
+import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
+import './StepperCommandDialog.css';
+
+const getPropertyName = (accessor) => {
+    if (typeof accessor !== 'function')
+        return '';
+    const fnStr = accessor.toString();
+    const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+    return match ? match[1] : '';
+};
+const extractFieldNamesFromNode = (nodes) => {
+    const names = [];
+    React.Children.forEach(nodes, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        const component = child.type;
+        if (component.displayName === 'CommandFormField') {
+            const fieldProps = child.props;
+            const name = getPropertyName(fieldProps.value);
+            if (name)
+                names.push(name);
+        }
+        const childProps = child.props;
+        if (childProps.children != null) {
+            names.push(...extractFieldNamesFromNode(childProps.children));
+        }
+    });
+    return names;
+};
+const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, resizable = false, isValid, onClose, onConfirm, onCancel, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, children }) => {
+    const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext();
+    const commandInstance = useCommandInstance();
+    const [isBusy, setIsBusy] = useState(false);
+    const [activeStep, setActiveStep] = useState(0);
+    const [visitedSteps, setVisitedSteps] = useState(new Set([0]));
+    let contextCloseDialog;
+    try {
+        const context = useDialogContext();
+        contextCloseDialog = context?.closeDialog;
+    }
+    catch {
+        contextCloseDialog = undefined;
+    }
+    const stepCount = React.Children.count(children);
+    const isLastStep = activeStep === stepCount - 1;
+    const isFirstStep = activeStep === 0;
+    const isDialogValid = isValid !== false && isCommandFormValid;
+    const stepFieldNames = useMemo(() => React.Children.toArray(children).map((step) => {
+        if (!React.isValidElement(step))
+            return [];
+        const stepProps = step.props;
+        return extractFieldNamesFromNode(stepProps.children);
+    }), [children]);
+    const stepHasError = (stepIndex) => stepFieldNames[stepIndex]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
+    const handleClose = async (result) => {
+        let shouldCloseThroughContext = true;
+        if (result === DialogResult.Ok || result === DialogResult.Yes) {
+            if (onConfirm) {
+                const closeResult = await onConfirm();
+                shouldCloseThroughContext = closeResult === true;
+            }
+            else if (onClose) {
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
+            }
+        }
+        else {
+            if (onCancel) {
+                const closeResult = await onCancel();
+                shouldCloseThroughContext = closeResult === true;
+            }
+            else if (onClose) {
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
+            }
+        }
+        if (shouldCloseThroughContext) {
+            contextCloseDialog?.(result);
+        }
+    };
+    const handleSubmit = async () => {
+        if (onBeforeExecute) {
+            const transformedValues = onBeforeExecute(commandInstance);
+            setCommandValues(transformedValues);
+        }
+        setIsBusy(true);
+        let result;
+        try {
+            result = await commandInstance.execute();
+        }
+        finally {
+            setIsBusy(false);
+        }
+        if (!result.isSuccess) {
+            setCommandResult(result);
+            return;
+        }
+        await handleClose(DialogResult.Ok);
+    };
+    const processChildren = (nodes) => {
+        return React.Children.map(nodes, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            const component = child.type;
+            if (component.displayName === 'CommandFormField') {
+                return jsx(CommandFormFieldWrapper, { field: child });
+            }
+            const childProps = child.props;
+            if (childProps.children != null) {
+                return React.cloneElement(child, {
+                    children: processChildren(childProps.children)
+                });
+            }
+            return child;
+        });
+    };
+    const stepperPt = useMemo(() => {
+        const userPt = pt;
+        const userStepperPanelPt = userPt?.stepperpanel;
+        const userNumberPt = userStepperPanelPt?.number;
+        return {
+            ...userPt,
+            stepperpanel: {
+                ...userStepperPanelPt,
+                number: (opts) => {
+                    const existing = typeof userNumberPt === 'function'
+                        ? userNumberPt(opts)
+                        : userNumberPt ?? {};
+                    const idx = opts.context.index;
+                    const hasError = stepFieldNames[idx]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
+                    const isVisited = visitedSteps.has(idx);
+                    const bgColor = hasError
+                        ? 'var(--red-500, #ef4444)'
+                        : isVisited
+                            ? 'var(--green-500, #22c55e)'
+                            : null;
+                    if (!bgColor)
+                        return existing;
+                    const existingStyle = existing.style;
+                    return {
+                        ...existing,
+                        style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
+                    };
+                }
+            }
+        };
+    }, [pt, stepFieldNames, getFieldError, visitedSteps]);
+    const headerElement = (jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsx("span", { className: "font-bold white-space-nowrap", children: title }) }));
+    const footer = (jsxs("div", { className: "flex align-items-center w-full gap-3", children: [!isFirstStep && (jsx(Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(s => s - 1), disabled: isBusy, outlined: true })), jsx("div", { className: "flex-1" }), !isLastStep && (jsx(Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
+                    setVisitedSteps(prev => new Set(prev).add(activeStep));
+                    setActiveStep(s => s + 1);
+                }, disabled: isBusy || stepHasError(activeStep) })), isLastStep && isDialogValid && (jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: handleSubmit, loading: isBusy, disabled: isBusy, autoFocus: true }))] }));
+    return (jsx(Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(DialogResult.Cancelled), visible: visible, style: { width, ...style }, resizable: resizable, closable: true, children: jsx(Stepper, { activeStep: activeStep, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: onChangeStep, start: start, end: end, pt: stepperPt, ptOptions: ptOptions, unstyled: unstyled, children: processChildren(children) }) }));
+};
+const StepperCommandDialogComponent = (props) => {
+    const { title, visible, width, style, resizable, isValid, onClose, onConfirm, onCancel, okLabel, nextLabel, previousLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
+    return (jsx(CommandForm, { ...commandFormProps, children: jsx(StepperCommandDialogWrapper, { title: title, visible: visible, width: width, style: style, resizable: resizable, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onBeforeExecute: commandFormProps.onBeforeExecute, okLabel: okLabel, nextLabel: nextLabel, previousLabel: previousLabel, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
+};
+const StepperCommandDialog = StepperCommandDialogComponent;
+
+export { StepperCommandDialog };
+//# sourceMappingURL=StepperCommandDialog.js.map

package/dist/esm/CommandDialog/StepperCommandDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.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 { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';\nimport { Dialog as PrimeDialog } from 'primereact/dialog';\nimport { Stepper as PrimeStepper, type StepperProps } from 'primereact/stepper';\nimport { Button } from 'primereact/button';\nimport React, { useMemo, useState } from 'react';\nimport {\n    CommandForm,\n    CommandFormFieldWrapper,\n    useCommandFormContext,\n    useCommandInstance,\n    type CommandFormProps\n} from '@cratis/arc.react/commands';\nimport type { CloseDialog, ConfirmCallback, CancelCallback } from '../Dialogs/Dialog';\nimport { CSSProperties } from 'react';\nimport './StepperCommandDialog.css';\n\n/** Extracts the property name from an accessor function like `c => c.name`. */\nconst getPropertyName = (accessor: ((obj: unknown) => unknown) | unknown): string => {\n    if (typeof accessor !== 'function') return '';\n    const fnStr = accessor.toString();\n    const match = fnStr.match(/\\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);\n    return match ? match[1] : '';\n};\n\n/** Recursively collects all CommandFormField property names from a React node tree. */\nconst extractFieldNamesFromNode = (nodes: React.ReactNode): string[] => {\n    const names: string[] = [];\n    React.Children.forEach(nodes, (child) => {\n        if (!React.isValidElement(child)) return;\n        const component = child.type as React.ComponentType<unknown>;\n        if ((component as { displayName?: string }).displayName === 'CommandFormField') {\n            const fieldProps = child.props as { value?: (obj: unknown) => unknown };\n            const name = getPropertyName(fieldProps.value);\n            if (name) names.push(name);\n        }\n        const childProps = child.props as Record<string, unknown>;\n        if (childProps.children != null) {\n            names.push(...extractFieldNamesFromNode(childProps.children as React.ReactNode));\n        }\n    });\n    return names;\n};\n\n/**\n * Stepper-specific customization props forwarded directly to PrimeReact Stepper.\n * `activeStep` and `children` are managed internally and are excluded.\n */\ntype StepperCustomizationProps = Pick<StepperProps,\n    'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'\n>;\n\nexport interface StepperCommandDialogProps<TCommand extends object>\n    extends Omit<CommandFormProps<TCommand>, 'children'>,\n        StepperCustomizationProps {\n    /** Dialog title text. */\n    title: string;\n    /** Controls dialog visibility. Defaults to `true`. */\n    visible?: boolean;\n    /** Dialog width. */\n    width?: string;\n    /** Custom CSS styles applied to the dialog. */\n    style?: CSSProperties;\n    /** Whether the dialog can be resized. Defaults to `false`. */\n    resizable?: boolean;\n    /** Additional validity gate combined with command form validity. */\n    isValid?: boolean;\n    /** Fallback close callback. */\n    onClose?: CloseDialog;\n    /** Confirm callback — called only after successful command execution. */\n    onConfirm?: ConfirmCallback;\n    /** Cancel callback — invoked when the dialog X button is clicked. */\n    onCancel?: CancelCallback;\n    /** Label for the submit button shown on the last step when valid. Defaults to `'Submit'`. */\n    okLabel?: string;\n    /** Label for the next step button. Defaults to `'Next'`. */\n    nextLabel?: string;\n    /** Label for the previous step button. Defaults to `'Previous'`. */\n    previousLabel?: string;\n    /** StepperPanel children defining each wizard step. */\n    children?: React.ReactNode;\n}\n\nconst StepperCommandDialogWrapper = <TCommand extends object>({\n    title,\n    visible = true,\n    width = '600px',\n    style,\n    resizable = false,\n    isValid,\n    onClose,\n    onConfirm,\n    onCancel,\n    onBeforeExecute,\n    okLabel = 'Submit',\n    nextLabel = 'Next',\n    previousLabel = 'Previous',\n    orientation = 'horizontal',\n    headerPosition,\n    linear = true,\n    onChangeStep,\n    start,\n    end,\n    pt,\n    ptOptions,\n    unstyled,\n    children\n}: {\n    title: string;\n    visible?: boolean;\n    width?: string;\n    style?: CSSProperties;\n    resizable?: boolean;\n    isValid?: boolean;\n    onClose?: CloseDialog;\n    onConfirm?: ConfirmCallback;\n    onCancel?: CancelCallback;\n    onBeforeExecute?: (values: TCommand) => TCommand;\n    okLabel?: string;\n    nextLabel?: string;\n    previousLabel?: string;\n    children?: React.ReactNode;\n} & StepperCustomizationProps) => {\n    const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = useCommandFormContext<TCommand>();\n    const commandInstance = useCommandInstance<TCommand>();\n    const [isBusy, setIsBusy] = useState(false);\n    const [activeStep, setActiveStep] = useState(0);\n    const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set([0]));\n\n    let contextCloseDialog: ((result: DialogResult) => void) | undefined;\n    try {\n        const context = useDialogContext();\n        contextCloseDialog = context?.closeDialog;\n    } catch {\n        contextCloseDialog = undefined;\n    }\n\n    const stepCount = React.Children.count(children);\n    const isLastStep = activeStep === stepCount - 1;\n    const isFirstStep = activeStep === 0;\n    const isDialogValid = isValid !== false && isCommandFormValid;\n\n    // Pre-compute the command property names for each StepperPanel step.\n    // Used to determine whether a step has validation errors for the indicator badge.\n    const stepFieldNames = useMemo(\n        () => React.Children.toArray(children).map((step) => {\n            if (!React.isValidElement(step)) return [] as string[];\n            const stepProps = step.props as Record<string, unknown>;\n            return extractFieldNamesFromNode(stepProps.children as React.ReactNode);\n        }),\n        [children]\n    );\n\n    const stepHasError = (stepIndex: number): boolean =>\n        stepFieldNames[stepIndex]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;\n\n    const handleClose = async (result: DialogResult) => {\n        let shouldCloseThroughContext = true;\n\n        if (result === DialogResult.Ok || result === DialogResult.Yes) {\n            if (onConfirm) {\n                const closeResult = await onConfirm();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        } else {\n            if (onCancel) {\n                const closeResult = await onCancel();\n                shouldCloseThroughContext = closeResult === true;\n            } else if (onClose) {\n                const closeResult = await onClose(result);\n                shouldCloseThroughContext = closeResult !== false;\n            }\n        }\n\n        if (shouldCloseThroughContext) {\n            contextCloseDialog?.(result);\n        }\n    };\n\n    const handleSubmit = async () => {\n        if (onBeforeExecute) {\n            const transformedValues = onBeforeExecute(commandInstance);\n            setCommandValues(transformedValues);\n        }\n\n        setIsBusy(true);\n        let result: ICommandResult<unknown>;\n\n        try {\n            result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();\n        } finally {\n            setIsBusy(false);\n        }\n\n        if (!result.isSuccess) {\n            setCommandResult(result);\n            return;\n        }\n\n        await handleClose(DialogResult.Ok);\n    };\n\n    const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n        return React.Children.map(nodes, (child) => {\n            if (!React.isValidElement(child)) return child;\n\n            const component = child.type as React.ComponentType<unknown>;\n            if (component.displayName === 'CommandFormField') {\n                type FieldElement = Parameters<typeof CommandFormFieldWrapper>[0]['field'];\n                return <CommandFormFieldWrapper field={child as unknown as FieldElement} />;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n            if (childProps.children != null) {\n                return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                    children: processChildren(childProps.children as React.ReactNode)\n                });\n            }\n\n            return child;\n        });\n    };\n\n    /**\n     * Builds the passthrough `pt` object for PrimeStepper, injecting an inline\n     * style onto the step *number* span to colour it red (errors) or green (visited\n     * and valid). Targeting the number span — rather than the header `<li>` — means\n     * PrimeReact's default `p-stepper-header` class and all its layout/separator\n     * CSS are never disturbed.\n     * Merges with any user-supplied `pt` prop.\n     */\n    const stepperPt = useMemo(() => {\n        type StepContext = { context: { index: number } };\n        type NumberPtFn = (opts: StepContext) => Record<string, unknown>;\n\n        const userPt = pt as Record<string, unknown> | undefined;\n        const userStepperPanelPt = userPt?.stepperpanel as Record<string, unknown> | undefined;\n        const userNumberPt = userStepperPanelPt?.number;\n\n        return {\n            ...userPt,\n            stepperpanel: {\n                ...userStepperPanelPt,\n                number: (opts: StepContext) => {\n                    const existing: Record<string, unknown> =\n                        typeof userNumberPt === 'function'\n                            ? (userNumberPt as NumberPtFn)(opts)\n                            : (userNumberPt as Record<string, unknown> | undefined) ?? {};\n                    const idx = opts.context.index;\n                    const hasError = stepFieldNames[idx]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;\n                    const isVisited = visitedSteps.has(idx);\n\n                    const bgColor = hasError\n                        ? 'var(--red-500, #ef4444)'\n                        : isVisited\n                            ? 'var(--green-500, #22c55e)'\n                            : null;\n\n                    if (!bgColor) return existing;\n                    const existingStyle = existing.style as Record<string, unknown> | undefined;\n                    return {\n                        ...existing,\n                        style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }\n                    };\n                }\n            }\n        };\n    }, [pt, stepFieldNames, getFieldError, visitedSteps]);\n\n    const headerElement = (\n        <div className=\"inline-flex align-items-center justify-content-center gap-2\">\n            <span className=\"font-bold white-space-nowrap\">{title}</span>\n        </div>\n    );\n\n    const footer = (\n        <div className=\"flex align-items-center w-full gap-3\">\n            {!isFirstStep && (\n                <Button\n                    label={previousLabel}\n                    icon=\"pi pi-arrow-left\"\n                    onClick={() => setActiveStep(s => s - 1)}\n                    disabled={isBusy}\n                    outlined\n                />\n            )}\n            <div className=\"flex-1\" />\n            {!isLastStep && (\n                <Button\n                    label={nextLabel}\n                    icon=\"pi pi-arrow-right\"\n                    iconPos=\"right\"\n                    onClick={() => {\n                        setVisitedSteps(prev => new Set(prev).add(activeStep));\n                        setActiveStep(s => s + 1);\n                    }}\n                    disabled={isBusy || stepHasError(activeStep)}\n                />\n            )}\n            {isLastStep && isDialogValid && (\n                <Button\n                    label={okLabel}\n                    icon=\"pi pi-check\"\n                    onClick={handleSubmit}\n                    loading={isBusy}\n                    disabled={isBusy}\n                    autoFocus\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <PrimeDialog\n            header={headerElement}\n            modal\n            footer={footer}\n            onHide={() => handleClose(DialogResult.Cancelled)}\n            visible={visible}\n            style={{ width, ...style }}\n            resizable={resizable}\n            closable\n        >\n            <PrimeStepper\n                activeStep={activeStep}\n                linear={linear}\n                orientation={orientation}\n                headerPosition={headerPosition}\n                onChangeStep={onChangeStep}\n                start={start}\n                end={end}\n                pt={stepperPt as StepperProps['pt']}\n                ptOptions={ptOptions}\n                unstyled={unstyled}\n            >\n                {processChildren(children)}\n            </PrimeStepper>\n        </PrimeDialog>\n    );\n};\n\nconst StepperCommandDialogComponent = <TCommand extends object = object>(\n    props: StepperCommandDialogProps<TCommand>\n) => {\n    const {\n        title,\n        visible,\n        width,\n        style,\n        resizable,\n        isValid,\n        onClose,\n        onConfirm,\n        onCancel,\n        okLabel,\n        nextLabel,\n        previousLabel,\n        orientation,\n        headerPosition,\n        linear,\n        onChangeStep,\n        start,\n        end,\n        pt,\n        ptOptions,\n        unstyled,\n        children,\n        ...commandFormProps\n    } = props;\n\n    return (\n        <CommandForm<TCommand> {...commandFormProps}>\n            <StepperCommandDialogWrapper<TCommand>\n                title={title}\n                visible={visible}\n                width={width}\n                style={style}\n                resizable={resizable}\n                isValid={isValid}\n                onClose={onClose}\n                onConfirm={onConfirm}\n                onCancel={onCancel}\n                onBeforeExecute={commandFormProps.onBeforeExecute}\n                okLabel={okLabel}\n                nextLabel={nextLabel}\n                previousLabel={previousLabel}\n                orientation={orientation}\n                headerPosition={headerPosition}\n                linear={linear}\n                onChangeStep={onChangeStep}\n                start={start}\n                end={end}\n                pt={pt}\n                ptOptions={ptOptions}\n                unstyled={unstyled}\n            >\n                {children}\n            </StepperCommandDialogWrapper>\n        </CommandForm>\n    );\n};\n\nexport const StepperCommandDialog = StepperCommandDialogComponent;\n"],"names":["_jsx","_jsxs","PrimeDialog","PrimeStepper"],"mappings":"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"}

package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StepperCommandDialog } from './StepperCommandDialog';
+import '@cratis/arc/validation';
+declare const meta: Meta<typeof StepperCommandDialog>;
+export default meta;
+type Story = StoryObj<typeof StepperCommandDialog>;
+export declare const Default: Story;
+export declare const ThreeSteps: Story;
+export declare const WithValidationIndicators: Story;
+export declare const WithBusyState: Story;
+//# sourceMappingURL=StepperCommandDialog.stories.d.ts.map

package/dist/esm/CommandDialog/StepperCommandDialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCommandDialog.stories.d.ts","sourceRoot":"","sources":["../../../CommandDialog/StepperCommandDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAG3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAwDnD,eAAO,MAAM,OAAO,EAAE,KA0ErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmExB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAyDtC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuD3B,CAAC"}