funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Stepper/index.scss

@@ -0,0 +1,315 @@
+
+/* ======================================================
+   <!-- Stepper -->
+/* ====================================================== */
+
+.stepper-container {
+
+    --stepper-color-default: #333;
+    --stepper-color-active: white;
+    --stepper-color-complete: #2563eb;
+    --stepper-indicator-default: white;
+    --stepper-indicator-active: #2563eb;
+    --stepper-indicator-complete: #22c55e;
+    --stepper-border-default: #ccc;
+    --stepper-border-active: #2563eb;
+    --stepper-border-complete: #22c55e;
+    --stepper-line-default: #dfdfdf;
+    --stepper-line-active: #2563eb;
+    --stepper-line-complete: #22c55e;
+    --stepper-indicator-font-size: 0.875rem;
+    --stepper-indicator-offset: 60px;
+    --stepper-title-size: 0.875rem;
+    --stepper-indicator-size: 32px;
+    
+
+
+    position: relative;
+
+    /* Navigation Header (only horizontal) */
+    .stepper-header {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+        position: relative;
+        max-width: calc(100% - var(--stepper-indicator-size));
+
+        /* background line */
+        &::before {
+            content: '';
+            position: absolute;
+            top: 16px;  /* Subtract the height of the title */
+            left: 0;
+            right: 0;
+            height: 2px;
+            background-color: var(--stepper-line-default);
+            z-index: 1;
+            width: 100%;
+            
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 16px; /* Subtract the height of the title */
+            left: 0;
+            height: 2px;
+            background-color: var(--stepper-line-complete);
+            z-index: 2;
+            transition: width 0.3s ease-in-out;
+            width: 0;
+        }
+
+        &::after {
+            width: var(--stepper-progress-width, 0%);
+            max-width: 100%;
+        }
+    }
+
+    /* Main Navigation - Each step item (with circle + title) */
+    .step-item {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        max-width: 0;
+        position: relative;
+        z-index: 3;
+
+        &.step-item--clickable {
+            cursor: pointer;
+        }
+        
+    }
+
+
+    /* Line */
+    .step-line {
+        flex: 1;
+        height: 2px;
+        background-color:  var(--stepper-line-default);
+        margin: 0 4px;
+        position: relative;
+        top: -10px;
+        z-index: 0;
+        overflow: hidden;
+        opacity: 0;
+
+        &--active {
+            background-color: var(--stepper-line-default);
+        }
+
+        &--complete {
+            background-color: var(--stepper-line-default);
+        }
+              
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--stepper-line-complete);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.3s ease-in-out;
+        }   
+        
+        &--active::after,
+        &--complete::after {
+            transform: scaleX(1);
+        }
+    }
+
+
+
+    /* Indicator */
+    .step-indicator {
+        width: var(--stepper-indicator-size);
+        height: var(--stepper-indicator-size);
+        margin: 0 auto 0.25rem;
+        border-radius: 9999px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #ccc;
+        font-size: var(--stepper-indicator-font-size);
+
+        /* default */
+        background-color: var(--stepper-indicator-default);
+        color: var(--stepper-color-default);
+        border-color: var(--stepper-border-default);
+
+        &--active {
+            background-color: var(--stepper-indicator-active);
+            color: var(--stepper-color-active);
+            border-color: var(--stepper-border-active);
+        } 
+
+        &--complete {
+            background-color: var(--stepper-indicator-complete);
+            color: var(--stepper-color-active);
+            border-color: var(--stepper-border-complete);
+        }
+
+    }
+
+
+    /* Title */
+    .step-title {
+        white-space: nowrap;
+        font-size: var(--stepper-title-size);
+        margin-left: calc(var(--stepper-indicator-offset) / 2);
+
+        /* default */
+        color: var(--stepper-color-default);
+
+        &--active {
+            color: var(--stepper-indicator-active);
+        }
+
+        &--complete {
+            color: var(--stepper-indicator-complete);
+        }
+    }
+
+
+
+    /* Panels Area */
+    .stepper-panels {
+
+    }
+
+    /* Buttons */
+    .stepper-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+    }
+
+    /* Panel */
+    .stepper-panel {
+        width: 100%;
+    }
+    .stepper-panel-header {
+        font-size: 1.25rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+        display: none;
+    }
+    .stepper-panel-content {
+        width: 100%;
+    }
+
+
+
+}
+
+
+/*------ Verticle ------*/
+.stepper-container.stepper-container--vertical {
+
+
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem; /* line length */
+    max-height: calc(100% - var(--stepper-indicator-size));
+
+    /* background line */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: calc(var(--stepper-indicator-size) / 2);
+        width: 2px;
+        height: 100%;
+        background-color: var(--stepper-line-default);
+        z-index: 1;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: calc(var(--stepper-indicator-size) / 2);
+        width: 2px;
+        background-color: var(--stepper-line-complete);
+        z-index: 2;
+        transition: height 0.3s ease-in-out;
+        height: 0;
+    }
+
+    &::after {
+        height: var(--stepper-progress-height, 0%);
+        max-height: 100%;
+    }
+
+
+    /* Layout */
+    .vertical-step-row {
+        display: flex;
+        align-items: flex-start;
+    }
+    .vertical-step-left {
+        flex-shrink: 0;
+        width: var(--stepper-indicator-size);
+        height: var(--stepper-indicator-size);
+        position: relative;
+        
+        /* Main Navigation - Each step item (with circle + title) */
+        .step-item {
+            margin-top: 0;
+        }
+
+        /* Line */
+        .step-line {
+            position: absolute;
+            left: 20px;
+            opacity: 0;
+        }
+
+    }
+    
+    .vertical-step-right {
+        flex: 1;
+        left: 70px;
+        width: calc(100% - 70px);
+        position: absolute;
+        top: 0; /* required */
+    }
+
+    /* Title */
+    .step-title {
+        display: none;
+        margin-left: .3rem;
+    }
+    
+    /* Panel */
+    .stepper-panel-header {
+        display: block;
+    }
+
+
+
+    /* Line */
+    .step-line {
+        flex: auto;
+        width: 2px;
+        height: 40px;
+        margin-top: 4px;
+        top: auto;
+        left: -24px;
+
+        &::after {
+            transform-origin: top;
+            transform: scaleY(0);
+        }   
+        
+        &--active::after,
+        &--complete::after {
+            transform: scaleY(1);
+        }
+
+    }
+}

package/publish/lib/esm/Stepper/index.tsx

@@ -0,0 +1,325 @@
+import React, { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+interface StepperPanelProps {
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+
+interface StepperProps {
+    wrapperClassName?: string;
+    indicatorClickAllowed?: boolean;
+    style?: React.CSSProperties;
+    initialStep?: number;
+    layout?: 'horizontal' | 'vertical';
+    completeIcon?: React.ReactNode;
+    disableCompleteIcon?: boolean;
+    onChange?: (index: number, isLastStepComplete: boolean) => void;
+    children: React.ReactElement<StepperPanelProps>[];
+}
+
+interface StepperRef {
+    goto: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+}
+
+const StepperPanel: React.FC<StepperPanelProps> = (props) => {
+    const {
+        header = <><svg width="1rem" height="1rem"><rect fill="none"/></svg></>, 
+        children, 
+        style
+    } = props;
+
+    return (
+        <div className="stepper-panel" style={style}>
+            <div className="stepper-panel-header">{header}</div>
+            <div className="stepper-panel-content">{children}</div>
+        </div>
+    );
+};
+
+const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
+    const {
+        wrapperClassName,
+        indicatorClickAllowed = false,
+        style,
+        initialStep = 0,
+        layout = 'horizontal',
+        completeIcon = <><svg width="20px" height="20px" viewBox="0 0 20 20" fill="none"><path d="M15.3742 5.98559L10.3742 14.9856C9.72664 16.1511 7.97832 15.1798 8.62585 14.0143L13.6258 5.01431C14.2734 3.84876 16.0217 4.82005 15.3742 5.98559Z" fill="#fff"/><path d="M5.1247 9.71907L10.1247 13.7191C11.1659 14.552 9.91646 16.1137 8.87531 15.2808L3.87531 11.2808C2.83415 10.4479 4.08354 8.88615 5.1247 9.71907Z" fill="#fff"/></svg></>,
+        disableCompleteIcon = true,
+        onChange,
+        children
+    } = props;
+
+
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [isLastStepComplete, setIsLastStepComplete] = useState<boolean>(false);
+    const [activeIndex, setActiveIndex] = useState<number>(initialStep);
+    const panels = React.Children.toArray(children) as React.ReactElement<StepperPanelProps>[];
+    const isVertical: boolean = layout === 'vertical';
+    const prevActiveIndexRef = useRef<number>(activeIndex);
+    const prevIsLastStepCompleteRef = useRef<boolean>(isLastStepComplete);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            goto: (index: number) => {
+                if (index >= 0 && index < panels.length) {
+                    setActiveIndex(index);
+                }
+            },
+            next: () => {
+                setActiveIndex((prevState) => {
+                    const _val = Math.min(prevState + 1, panels.length - 1);
+                    return _val;
+                });
+            },
+            prev: () => {
+                setActiveIndex((prevState) => {
+                    const _val = Math.max(prevState - 1, 0);
+                    return _val;
+                });
+
+                setIsLastStepComplete(false);
+            },
+            setLastStepComplete: (val: boolean) => {
+                setIsLastStepComplete(val);
+            },
+        }),
+        [panels.length],
+    );
+
+    const horizontalPanelsGenerator = (): JSX.Element => {
+        return <>
+            <div className="stepper-header">
+                {panels.map((panel, index) => {
+                    const { header } = panel.props;
+                    const isActive = index === activeIndex;
+                    const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete); 
+
+                    return (
+                        <React.Fragment key={index}>
+                            <div 
+                                data-step-index={index}
+                                className={combinedCls(
+                                    'step-item',
+                                    {
+                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
+                                    }
+                                )} 
+                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
+                                    setActiveIndex(index);
+                                    setIsLastStepComplete(false);
+                                } : undefined}
+                            >
+                                <div
+                                    className={combinedCls(
+                                        'step-indicator',
+                                        {
+                                            'step-indicator--active': isActive,
+                                            'step-indicator--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {isCompleted ? <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
+                                </div>
+                                <div
+                                    className={combinedCls(
+                                        'step-title',
+                                        {
+                                            'step-title--active': isActive,
+                                            'step-title--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {header}
+                                </div>
+                            </div>
+                            {index < panels.length - 1 && (
+                                <div
+                                    className={combinedCls(
+                                        'step-line',
+                                        {
+                                            'step-line--active': index === activeIndex - 1,
+                                            'step-line--complete': index < activeIndex - 1
+                                        }
+                                    )} 
+                                />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+
+            <div className="stepper-panels">
+                {panels[activeIndex]}
+            </div>
+        </>;
+    };
+
+    const verticalPanelsGenerator = (): JSX.Element => {
+        return <>
+            {panels.map((panel, index) => {
+                const { header } = panel.props;
+                const isActive = index === activeIndex;
+                const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete);
+
+                return (
+                    <div 
+                        key={index} 
+                        className={combinedCls(
+                            'vertical-step-row',
+                            {
+                                'vertical-step-row--active': isActive,
+                                'vertical-step-row--complete': isCompleted
+                            }
+                        )} 
+                    >
+                        {/* Left */}
+                        <div className="vertical-step-left">
+                            <div
+                                data-step-index={index}
+                                className={combinedCls(
+                                    'step-item',
+                                    {
+                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
+                                    }
+                                )} 
+                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
+                                    setActiveIndex(index);
+                                    setIsLastStepComplete(false);
+                                } : undefined}
+                            >
+                                <div
+                                    className={combinedCls(
+                                        'step-indicator',
+                                        {
+                                            'step-indicator--active': isActive,
+                                            'step-indicator--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {isCompleted ?  <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
+                                </div>
+                                <div
+                                    className={combinedCls(
+                                        'step-title',
+                                        {
+                                            'step-title--active': isActive,
+                                            'step-title--complete': isCompleted
+                                        }
+                                    )} 
+                                >
+                                    {header}
+                                </div>
+                            </div>
+
+                            {index < panels.length - 1 && (
+                                <div
+                                    className={combinedCls(
+                                        'step-line',
+                                        {
+                                            'step-line--active': index === activeIndex - 1,
+                                            'step-line--complete': index < activeIndex - 1
+                                        }
+                                    )} 
+                                />
+                            )}
+                        </div>
+
+                        {/* Right */}
+                        {isActive && (
+                            <div className="vertical-step-right">
+                                {panels[activeIndex]}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </>;
+    };
+
+    // Calculate the width/height of the progress line
+    const calculateProgressStyle = () => {
+        if (!panels.length || rootRef.current === null) return {};
+        
+        const stepItems = rootRef.current.querySelectorAll('.step-item');
+        if (!stepItems.length) return {};
+
+        if (isVertical) {
+            const totalHeight = stepItems[0].clientHeight * (panels.length - 1);
+            const progress = (activeIndex / (panels.length - 1)) * 100;
+            return {
+                '--stepper-progress-height': `${progress}%`
+            } as React.CSSProperties;
+        } else {
+            
+            const defaultProgress = (activeIndex / (panels.length - 1)) * 100;
+            const firstItem = stepItems[0] as HTMLDivElement;
+            const lastItem = stepItems[stepItems.length - 1] as HTMLDivElement;
+            if (!firstItem || !lastItem) return {};
+
+            const firstCenter = firstItem.offsetLeft + (firstItem.clientWidth / 2);
+            const lastCenter = lastItem.offsetLeft + (lastItem.clientWidth / 2);
+            const totalWidth = lastCenter - firstCenter;
+
+            const currentItem = stepItems[activeIndex] as HTMLDivElement;
+            if (!currentItem) return {};
+
+            const currentCenter = currentItem.offsetLeft + (currentItem.clientWidth / 2);
+            const progress = defaultProgress !== 0 && activeIndex > 0 ? defaultProgress : ((currentCenter - firstCenter) / totalWidth) * 100;
+
+            return {
+                '--stepper-progress-width': `${isNaN(progress) ? 0 : progress}%`
+            } as React.CSSProperties;
+        }
+    };
+
+    useEffect(() => {
+        // Only trigger onChange if values actually changed from previous values
+        if (prevActiveIndexRef.current !== activeIndex || 
+            prevIsLastStepCompleteRef.current !== isLastStepComplete) {
+            
+            prevActiveIndexRef.current = activeIndex;
+            prevIsLastStepCompleteRef.current = isLastStepComplete;
+            
+            onChange?.(activeIndex, isLastStepComplete);
+        }
+    }, [activeIndex, isLastStepComplete]);
+
+
+    useEffect(() => {
+        // Force a recalculation of the progress line
+        const timer = setTimeout(() => {
+            setActiveIndex(prev => prev);
+        }, 0);
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <div 
+            ref={rootRef}
+            className={combinedCls(
+                'stepper-container',
+                clsWrite(wrapperClassName, ''),
+                {
+                    'stepper-container--vertical': isVertical
+                }
+            )} 
+            style={{
+                ...style,
+                ...calculateProgressStyle()
+            }}
+        >
+            {!isVertical && horizontalPanelsGenerator()}
+            {isVertical && verticalPanelsGenerator()}
+        </div>
+    );
+});
+
+export { Stepper, StepperPanel };
+export type { StepperProps, StepperPanelProps, StepperRef };