@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

package/src/ui-kit/components/organisms/Dialog/Dialog.jsx

@@ -0,0 +1,494 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { CSSTransition } from "react-transition-group";
+import AnimateHeight from "react-animate-height";
+import ResizeObserver from "resize-observer-polyfill";
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import animateScrollTo from "animated-scroll-to";
+
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/utils/errorUtils.js";
+
+import s from "./dialog.module.scss";
+import { Close } from "../../atoms/buttons/Close/Close.jsx";
+import { DialogButtons } from "./DialogButtons/DialogButtons.jsx";
+
+export const DIALOG_SIZES = {
+    small: {
+        width: "550px",
+        height: "650px",
+    },
+    regular: {
+        width: "600px",
+        height: "650px",
+    },
+    large: {
+        width: "700px",
+        height: "650px",
+    },
+    largePlus: {
+        width: "750px",
+        height: "650px",
+    },
+    largePlusPlus: {
+        width: "800px",
+        height: "650px",
+    },
+    extraLarge: {
+        width: "1000px",
+        height: "650px",
+    },
+};
+
+export const DIALOG_TRANSITION_STEP_DURATION = 200;
+
+// If changed - update the prop configuration in the stories and related components.
+/**
+ * Flexible modal window component with support for multiple steps. Can be used as an inline component and inserted in regular layouts. Only <DialogStep> components can be passed as children.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} props.showDialog - Step name, specified on the root dialog level, used as an ID for dialog navigation.
+ * @param {string} props.onClose - Handler for when the dialog is closed.
+ * @param {string} props.initControls - State-setting function to initialize the dialog-to-step connection.
+ * @param {string} props.children - Content of the dialog window, supports only dialog step components.
+ * @param {Coin} props.width - Width in pixels, formatted as "1000px" and passed a string. Values should be used from constants.
+ * @param {string} props.dispatchDialogOpened - Dispatch upon the dialog closure.
+ * @param {string} props.dispatchDialogClosed - Dispatch upon the dialog opening.
+ * @param {boolean} props.inline - If false or not set, dialog will be opened as a modal window above the UI. If true, inline mode will be used, making the dialog a regular block, that can be placed inside a regular layout. Default: false.
+ * @returns {JSX.Element} React component
+ */
+export const Dialog = ({
+    showDialog = false,
+    onClose = () => {},
+    initControls = null,
+    children = [],
+    width = "",
+    dispatchDialogOpened = () => {},
+    dispatchDialogClosed = () => {},
+    inline = false,
+}) => {
+    const buttonsConfigurationDefault = {
+        primaryButtonTitle: null,
+        primaryButtonOnClick: null,
+        primaryButtonLoader: false,
+        primaryButtonTo: null,
+        primaryButtonSetClickTrigger: () => {},
+        secondaryButtonTitle: null,
+        secondaryButtonOnClick: null,
+        secondaryButtonTo: null,
+        fixedButtonsEnabled: false,
+    };
+
+    const [showDialogProcessed, setShowDialogProcessed] = useState(false);
+    const [currentStep, setCurrentStep] = useState(0);
+    const [steps, setSteps] = useState(null);
+    const [dialogConfiguration, updateDialogConfiguration] = useState({
+        cornerBackButtonTitle: "",
+        customWidth: width !== "" ? width : DIALOG_SIZES.small.width,
+    });
+    const [animationConfiguration, updateAnimationConfiguration] = useState({
+        animateHeightDelay: DIALOG_TRANSITION_STEP_DURATION * 2,
+        animateHeightTransitionSpeed: DIALOG_TRANSITION_STEP_DURATION,
+        animateHeightTransitionEnabled: false,
+        wrapperWidthAnimationEnabled: false,
+        currentStepAnimationEnabled: false,
+        cornerBackButtonAnimationEnabled: false,
+        triggerAnimationFinishedDispatcher: false,
+        dialogContainerOverflowDisabled: false,
+        hideMobileBottomButtonSection: false,
+    });
+    const [stepAnimationFinishedTrigger, setStepAnimationFinishedTrigger] = useState(0);
+    const [dialogVerticalHeight, setDialogVerticalHeight] = useState(300);
+    const [currentStepRef, setCurrentStepRef] = useState({});
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const [buttonsConfiguration, updateButtonsConfigurationState] = useState(buttonsConfigurationDefault);
+    const [buttonControllingStep, updateButtonControllingStep] = useReferredState("");
+    const [isMultiStep, setIsMultiStep] = useState(false);
+
+    const dialogWrapperRef = useRef();
+    const dialogRef = useRef();
+    const scrollableRef = useRef();
+    const resizeObserverRef = useRef(null);
+
+    const updateButtonsConfiguration = (newConfiguration, stepName) => {
+        if (buttonControllingStep.current === stepName || buttonControllingStep.current === "")
+            updateButtonsConfigurationState(newConfiguration);
+    };
+
+    useEffect(() => {
+        if (showDialog) disableAnimation();
+        setShowDialogProcessed(showDialog);
+        showDialog ? dispatchDialogOpened() : dispatchDialogClosed();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showDialog]);
+
+    const showCornerButtonForStep = (stepName, stepButtonShowParam) => {
+        if (stepName !== "") {
+            let stepNameId = steps.findIndex(step => step.name === stepName);
+            return stepButtonShowParam !== null && typeof stepButtonShowParam === "boolean"
+                ? stepButtonShowParam
+                : stepNameId > steps.findIndex(step => step.hidden === false);
+        } else {
+            return false;
+        }
+    };
+
+    const nextStep = (animationControlEnabled = true) => {
+        const nextStep = steps.find((step, index) => index > currentStep && step.hidden === false);
+        if (nextStep) {
+            goToStep(nextStep.name, animationControlEnabled);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    const previousStep = (animationControlEnabled = true) => {
+        const prevSteps = steps
+            .map((step, index) => {
+                return index < currentStep && step.hidden === false ? step.name : undefined;
+            })
+            .filter(item => typeof item !== "undefined");
+
+        if (prevSteps.length > 0) {
+            goToStep(prevSteps[prevSteps.length - 1], animationControlEnabled);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    const getStepClass = stepName => {
+        if (steps.length > 1) {
+            let stepNameId = steps.findIndex(step => step.name === stepName);
+            let stepClass = currentStep > stepNameId ? "prev" : currentStep === stepNameId ? "current" : "next";
+            return stepClass;
+        } else {
+            return "current";
+        }
+    };
+
+    const isCurrentStep = stepName => {
+        return steps[currentStep].name === stepName;
+    };
+
+    const toFirstStep = (animationControlEnabled = true) => {
+        if (animationControlEnabled) enableAnimation();
+        setCurrentStep(steps.findIndex(step => step.hidden === false));
+    };
+
+    const goToStep = (stepName, animationControlEnabled = true) => {
+        if (animationControlEnabled) enableAnimation();
+        try {
+            let stepNameId = steps.findIndex(step => step.name === stepName);
+            setCurrentStep(stepNameId);
+        } catch (e) {
+            logErrorOrOutputToConsole(e);
+        }
+    };
+
+    const provideCurrentStepRef = ref => {
+        setCurrentStepRef(ref);
+    };
+
+    const disableAnimation = (dispatch = false) => {
+        updateAnimationConfiguration(prev => {
+            return {
+                ...prev,
+                animateHeightTransitionEnabled: false,
+                wrapperWidthAnimationEnabled: false,
+                currentStepAnimationEnabled: false,
+                cornerBackButtonAnimationEnabled: false,
+                dialogContainerOverflowDisabled: false,
+                hideMobileBottomButtonSection: false,
+            };
+        });
+        if (dispatch) {
+            updateAnimationConfiguration(prev => {
+                return {
+                    ...prev,
+                    triggerAnimationFinishedDispatcher: true,
+                };
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (animationConfiguration.triggerAnimationFinishedDispatcher) {
+            setStepAnimationFinishedTrigger(prev => prev + 1);
+            updateAnimationConfiguration(prev => {
+                return {
+                    ...prev,
+                    triggerAnimationFinishedDispatcher: false,
+                };
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationConfiguration]);
+
+    const enableAnimation = () => {
+        updateAnimationConfiguration(prev => {
+            return {
+                ...prev,
+                animateHeightTransitionEnabled: true,
+                wrapperWidthAnimationEnabled: true,
+                currentStepAnimationEnabled: true,
+                cornerBackButtonAnimationEnabled: true,
+                dialogContainerOverflowDisabled: true,
+                hideMobileBottomButtonSection: true,
+            };
+        });
+    };
+
+    const scrollDialogToTop = () => {
+        animateScrollTo(0, {
+            elementToScroll: dialogRef?.current,
+            minDuration: DIALOG_TRANSITION_STEP_DURATION,
+            maxDuration: DIALOG_TRANSITION_STEP_DURATION,
+        });
+        animateScrollTo(0, {
+            elementToScroll: scrollableRef?.current,
+            minDuration: DIALOG_TRANSITION_STEP_DURATION,
+            maxDuration: DIALOG_TRANSITION_STEP_DURATION,
+        });
+    };
+
+    const clearButtonsConfiguration = () => {
+        updateButtonsConfigurationState(buttonsConfigurationDefault);
+    };
+
+    useEffect(() => {
+        initControls &&
+            initControls(prev => {
+                return {
+                    ...prev,
+                    stepAnimationFinishedTrigger: stepAnimationFinishedTrigger,
+                };
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stepAnimationFinishedTrigger]);
+
+    useEffect(() => {
+        initControls &&
+            initControls(prev => {
+                return {
+                    ...prev,
+                    animationConfiguration: animationConfiguration,
+                };
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationConfiguration]);
+
+    useEffect(() => {
+        if (currentStepRef.current) {
+            resizeObserverRef.current = new ResizeObserver((entries = []) => {
+                entries.forEach(entry => {
+                    const { width, height } = entry.contentRect;
+                    setDimensions({ width, height });
+                });
+            });
+            if (currentStepRef.current) resizeObserverRef.current.observe(currentStepRef.current);
+            return () => {
+                if (resizeObserverRef.current) resizeObserverRef.current.disconnect();
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStepRef]);
+
+    useEffect(() => {
+        setDialogVerticalHeight(prev => (prev !== 0 && dimensions.height === 0 ? prev : dimensions.height));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dimensions]);
+
+    useEffect(() => {
+        const childrenFormatted = children.length > 1 ? children : [children];
+
+        let stepsArr = childrenFormatted.map(child => {
+            return {
+                name: child.props.stepName,
+                hidden: !!child.props.hidden,
+            };
+        });
+        setSteps(stepsArr);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        setIsMultiStep(typeof initControls === "function");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initControls]);
+
+    useEffect(() => {
+        if (steps)
+            initControls &&
+                initControls({
+                    nextStep: nextStep,
+                    previousStep: previousStep,
+                    currentStep: currentStep,
+                    isCurrentStep: isCurrentStep,
+                    getStepClass: getStepClass,
+                    updateDialogConfiguration: updateDialogConfiguration,
+                    toFirstStep: toFirstStep,
+                    goToStep: goToStep,
+                    provideCurrentStepRef: provideCurrentStepRef,
+                    animationConfiguration: animationConfiguration,
+                    disableAnimation: disableAnimation,
+                    enableAnimation: enableAnimation,
+                    showCornerButtonForStep: showCornerButtonForStep,
+                    stepAnimationFinishedTrigger: stepAnimationFinishedTrigger,
+                    scrollDialogToTop: scrollDialogToTop,
+                    updateButtonsConfiguration: updateButtonsConfiguration,
+                    clearButtonsConfiguration: clearButtonsConfiguration,
+                    buttonControllingStep: buttonControllingStep.current,
+                    updateButtonControllingStep: updateButtonControllingStep,
+                    updateAnimationConfiguration: updateAnimationConfiguration,
+                    inline: inline,
+                });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentStep, steps]);
+
+    useEffect(() => {
+        return () => {
+            clearAllBodyScrollLocks();
+            updateButtonControllingStep("");
+            clearButtonsConfiguration();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <CSSTransition
+            in={showDialogProcessed}
+            timeout={DIALOG_TRANSITION_STEP_DURATION}
+            classNames={
+                inline
+                    ? undefined
+                    : {
+                          enter: s["dialog-transition-enter"],
+                          enterActive: s["dialog-transition-enter-active"],
+                          exit: s["dialog-transition-exit"],
+                          exitActive: s["dialog-transition-exit-active"],
+                      }
+            }
+            unmountOnExit
+            onExited={() => {
+                disableAnimation(false);
+                clearButtonsConfiguration();
+                updateButtonControllingStep("");
+            }}
+            onExiting={() => {
+                if (inline) return;
+                enableBodyScroll(scrollableRef.current);
+                enableBodyScroll(dialogRef.current);
+            }}
+            onEntered={() => {
+                if (inline) return;
+                disableBodyScroll(scrollableRef.current);
+                disableBodyScroll(dialogRef.current);
+            }}
+        >
+            <div
+                className={
+                    s["dialog"] +
+                    " " +
+                    (dialogVerticalHeight > 1 || !isMultiStep ? "" : " " + s["hidden"]) +
+                    (animationConfiguration.dialogContainerOverflowDisabled
+                        ? " " + s["vertical-overflow-disabled"]
+                        : "") +
+                    (inline ? " " + s["inline"] : "")
+                }
+                ref={dialogRef}
+            >
+                <div className={s["scrollable"] + (inline ? " " + s["inline"] : "")} ref={scrollableRef}>
+                    <div
+                        className={
+                            s["dialog-wrapper"] +
+                            (animationConfiguration.wrapperWidthAnimationEnabled ? "" : " " + s["animation-disabled"]) +
+                            (inline ? " " + s["inline"] : "")
+                        }
+                        ref={dialogWrapperRef}
+                        style={
+                            dialogConfiguration.customWidth !== ""
+                                ? { maxWidth: dialogConfiguration.customWidth }
+                                : width !== ""
+                                  ? { maxWidth: width }
+                                  : null
+                        }
+                    >
+                        <AnimateHeight
+                            duration={
+                                animationConfiguration.animateHeightTransitionEnabled
+                                    ? animationConfiguration.animateHeightTransitionSpeed
+                                    : 0
+                            }
+                            delay={
+                                animationConfiguration.animateHeightTransitionEnabled
+                                    ? animationConfiguration.animateHeightDelay
+                                    : 0
+                            }
+                            height={isMultiStep ? dialogVerticalHeight : "auto"}
+                            contentClassName={s["dialog-wrapper-rah-content"]}
+                        >
+                            {inline ? (
+                                ""
+                            ) : (
+                                <div className={s["dialog-wrapper-close"]}>
+                                    <Close color="dark" onClick={e => onClose()} large />
+                                </div>
+                            )}
+                            {children}
+                        </AnimateHeight>
+                    </div>
+                </div>
+                {
+                    <CSSTransition
+                        in={
+                            (!!buttonsConfiguration.primaryButtonTitle ||
+                                !!buttonsConfiguration.secondaryButtonTitle) &&
+                            !animationConfiguration.hideMobileBottomButtonSection &&
+                            buttonsConfiguration.fixedButtonsEnabled
+                        }
+                        timeout={DIALOG_TRANSITION_STEP_DURATION}
+                        // classNames={s["fixed-buttons-container"]}
+                        classNames={{
+                            enter: s["fixed-buttons-container-enter"],
+                            enterActive: s["fixed-buttons-container-enter-active"],
+                            enterDone: s["fixed-buttons-container-enter-done"],
+                            exit: s["fixed-buttons-container-exit"],
+                            exitActive: s["fixed-buttons-container-exit-active"],
+                            exitDone: s["fixed-buttons-container-exit-done"],
+                        }}
+                        unmountOnExit
+                    >
+                        <div className={s["fixed-buttons-container"]}>
+                            <DialogButtons {...buttonsConfiguration} />
+                        </div>
+                    </CSSTransition>
+                }
+            </div>
+        </CSSTransition>
+    );
+};
+
+Dialog.propTypes = {
+    showDialog: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    initControls: PropTypes.func,
+    children: PropTypes.node,
+    width: PropTypes.oneOf(["550px", "600px", "700px", "750px", "800px", "1000px"]),
+    dispatchDialogOpened: PropTypes.func,
+    dispatchDialogClosed: PropTypes.func,
+    inline: PropTypes.bool,
+};
+
+Dialog.defaultProps = {
+    showDialog: false,
+    onClose: () => {},
+    initControls: null,
+    children: [],
+    dispatchDialogOpened: () => {},
+    dispatchDialogClosed: () => {},
+    inline: false,
+};

package/src/ui-kit/components/organisms/Dialog/DialogButtons/DialogButtons.jsx

@@ -0,0 +1,132 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+import s from "./dialog-buttons.module.scss";
+import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton.jsx";
+import { Button } from "../../../atoms/buttons/Button/Button.jsx";
+
+/**
+ * Renders a dialog component with configurable primary and secondary buttons.
+ * This component allows for a variety of configurations including different button modes,
+ * sizes, and actions. It's designed to handle user interactions effectively with error management.
+ *
+ * @component
+ * @param {Object} props - Props for configuring the DialogButtons.
+ * @param {string} [props.primaryButtonTitle] - The text to display on the primary button.
+ * @param {Function} props.primaryButtonOnClick - Function to call when the primary button is clicked.
+ * @param {boolean} props.primaryButtonEnabled - Determines whether the secondary button is enabled.
+ * @param {boolean} [props.primaryButtonLoader=false] - Whether to show a loader on the primary button.
+ * @param {string} [props.primaryButtonTo] - The URL or route the primary button should navigate to.
+ * @param {Function} [props.primaryButtonSetClickTrigger] - Additional click handling logic for the primary button.
+ * @param {string} [props.secondaryButtonTitle] - The text to display on the secondary button.
+ * @param {Function} props.secondaryButtonOnClick - Function to call when the secondary button is clicked.
+ * @param {boolean} props.secondaryButtonEnabled - Determines whether the primary button is enabled.
+ * @param {string} [props.secondaryButtonTo] - The URL or route the secondary button should navigate to.
+ * @param {boolean} [props.secondaryButtonBig=false] - Makes the secondary button larger for visual emphasis.
+ * @param {boolean} [props.withBackgroundImage=false] - Indicates if the button should adjust its styling for background images.
+ * @param {boolean} [props.hideOnMobiles=false] - Whether to hide the buttons on mobile devices for responsive designs.
+ * @returns {React.Element} The rendered component with two buttons based on provided props.
+ */
+export const DialogButtons = ({
+    primaryButtonTitle,
+    primaryButtonOnClick,
+    primaryButtonEnabled,
+    primaryButtonLoader = false,
+    primaryButtonTo,
+    primaryButtonSetClickTrigger,
+    secondaryButtonTitle,
+    secondaryButtonOnClick,
+    secondaryButtonEnabled,
+    secondaryButtonTo,
+    secondaryButtonBig = false,
+    withBackgroundImage = false,
+    hideOnMobiles = false,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    return (
+        <>
+            <div
+                className={
+                    s["dialog-buttons"] +
+                    (hideOnMobiles ? " " + s["hide-on-mobiles"] : "") +
+                    (secondaryButtonBig ? " " + s["space-between-layout"] : "")
+                }
+            >
+                {secondaryButtonTitle ? (
+                    secondaryButtonTo ? (
+                        <Button
+                            mode="primary-transparent"
+                            to={secondaryButtonTo}
+                            size="lg"
+                            loader={false}
+                            fullWidthOnMobiles
+                            content={secondaryButtonTitle}
+                            onClick={secondaryButtonOnClick}
+                            handleError={callHandlingErrors}
+                            isDisabled={!secondaryButtonEnabled}
+                        />
+                    ) : secondaryButtonBig ? (
+                        <Button
+                            mode="transparent"
+                            size="lg"
+                            loader={false}
+                            fullWidthOnMobiles
+                            content={secondaryButtonTitle}
+                            onClick={secondaryButtonOnClick}
+                            handleError={callHandlingErrors}
+                            isDisabled={!secondaryButtonEnabled}
+                        />
+                    ) : (
+                        <LinkButton
+                            onClick={secondaryButtonOnClick}
+                            content={secondaryButtonTitle}
+                            isColored={!withBackgroundImage}
+                            isDisabled={!secondaryButtonEnabled}
+                        />
+                    )
+                ) : null}
+
+                {primaryButtonTitle ? (
+                    <Button
+                        mode="primary"
+                        size="lg"
+                        onClick={primaryButtonOnClick}
+                        loader={primaryButtonLoader}
+                        to={primaryButtonTo}
+                        fullWidthOnMobiles
+                        content={primaryButtonTitle}
+                        setClickTrigger={primaryButtonSetClickTrigger}
+                        handleError={callHandlingErrors}
+                        isDisabled={!primaryButtonEnabled}
+                    />
+                ) : null}
+            </div>
+        </>
+    );
+};
+
+DialogButtons.propTypes = {
+    primaryButtonTitle: PropTypes.string,
+    primaryButtonOnClick: PropTypes.func,
+    primaryButtonEnabled: PropTypes.bool,
+    primaryButtonLoader: PropTypes.bool,
+    primaryButtonTo: PropTypes.string,
+    primaryButtonSetClickTrigger: PropTypes.func,
+    secondaryButtonTitle: PropTypes.string,
+    secondaryButtonOnClick: PropTypes.func,
+    secondaryButtonEnabled: PropTypes.bool,
+    secondaryButtonTo: PropTypes.string,
+    secondaryButtonBig: PropTypes.bool,
+    withBackgroundImage: PropTypes.bool,
+    hideOnMobiles: PropTypes.bool,
+};
+
+DialogButtons.defaultProps = {
+    primaryButtonLoader: false,
+    secondaryButtonBig: false,
+    withBackgroundImage: false,
+    hideOnMobiles: false,
+};

package/src/ui-kit/components/organisms/Dialog/DialogButtons/dialog-buttons.module.scss

@@ -0,0 +1,25 @@
+@use "../../../../assets/styles/index" as *;
+
+.dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: Margin("5");
+    width: 100%;
+    flex-wrap: wrap-reverse;
+
+    @media (max-width: $phone-width) {
+        flex-direction: column-reverse;
+        gap: Margin("5");
+    }
+
+    &.hide-on-mobiles {
+        @media (max-width: $tablet-width) {
+            display: none;
+        }
+    }
+
+    &.space-between-layout {
+        justify-content: space-between;
+    }
+}