@newtonschool/grauity 0.0.14 → 0.1.11

package/ui/elements/Modal/MultiStepModal/index.tsx

@@ -0,0 +1,184 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import useClickAway from '../../../../hooks/useClickAway';
+import useDisableBodyScroll from '../../../../hooks/useDisableBodyScroll';
+import Button from '../../Button';
+import Modal from '../Modal';
+import {
+    StyledModalPaginatedActions,
+    StyledModalPagination,
+    StyledModalPaginationItem,
+} from '../Modal.styles';
+import { MultiStepModalProps } from '../types';
+
+/**
+ * A multi-step modal is a modal that has multiple steps.
+ */
+const MultiStepModal = ({
+    modalSteps,
+    showModalStepsPagination,
+    hideOnClickAway,
+    blurBackground,
+    onHide,
+    onFinalStep,
+    mobileBottomFullWidth,
+    onStepChange,
+    modalPadding,
+    modalBodyMargin,
+    width,
+    height,
+    minHeight,
+    showCloseButton,
+}: MultiStepModalProps) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const hasMounted = useRef(false);
+    const modalRef = useRef(null);
+
+    const {
+        banner,
+        title,
+        description,
+        body,
+        nextButtonText,
+        showBackButton,
+        buttonVariant,
+    } = modalSteps[currentStep] || {};
+
+    const isLastStep = currentStep === modalSteps.length - 1;
+    const isFirstStep = currentStep === 0;
+
+    useDisableBodyScroll();
+
+    useClickAway(modalRef, () => {
+        if (hideOnClickAway) {
+            onHide();
+        }
+    });
+
+    useEffect(() => {
+        if (
+            hasMounted.current &&
+            onStepChange &&
+            typeof onStepChange === 'function'
+        ) {
+            onStepChange();
+        } else {
+            hasMounted.current = true;
+        }
+    }, [currentStep]);
+
+    if (modalSteps.length === 0) {
+        return null;
+    }
+
+    return (
+        <Modal
+            banner={banner}
+            title={title}
+            description={description}
+            body={body}
+            hideOnClickAway={hideOnClickAway}
+            blurBackground={blurBackground}
+            onHide={onHide}
+            mobileBottomFullWidth={mobileBottomFullWidth}
+            modalPadding={modalPadding}
+            modalBodyMargin={modalBodyMargin}
+            width={width}
+            height={height}
+            minHeight={minHeight}
+            showCloseButton={showCloseButton}
+            action={
+                <StyledModalPaginatedActions>
+                    {showModalStepsPagination && modalSteps.length > 1 && (
+                        <StyledModalPagination>
+                            {modalSteps.map((item, index) => (
+                                <StyledModalPaginationItem
+                                    key={`modal-pagination-item-${index + 1}`}
+                                    active={index === currentStep}
+                                    onClick={() => setCurrentStep(index)}
+                                />
+                            ))}
+                        </StyledModalPagination>
+                    )}
+
+                    <Modal.Action>
+                        {showBackButton && !isFirstStep && (
+                            <Button
+                                variant="secondary-outlined"
+                                onClick={() => {
+                                    setCurrentStep(currentStep - 1);
+                                }}
+                                icon="arrow-right"
+                                iconPosition="left"
+                            >
+                                Back
+                            </Button>
+                        )}
+
+                        {nextButtonText && (
+                            <Button
+                                variant={buttonVariant || 'secondary'}
+                                fullWidth
+                                onClick={() => {
+                                    if (isLastStep) {
+                                        onFinalStep();
+                                        onHide();
+                                    } else {
+                                        setCurrentStep(currentStep + 1);
+                                    }
+                                }}
+                                icon={isLastStep ? null : 'arrow-left'}
+                                iconPosition="right"
+                            >
+                                {nextButtonText}
+                            </Button>
+                        )}
+                    </Modal.Action>
+                </StyledModalPaginatedActions>
+            }
+        />
+    );
+};
+
+MultiStepModal.propTypes = {
+    modalSteps: PropTypes.array,
+    showModalStepsPagination: PropTypes.bool,
+    hideOnClickAway: PropTypes.bool,
+    blurBackground: PropTypes.bool,
+    onHide: PropTypes.func,
+    onFinalStep: PropTypes.func,
+    mobileBottomFullWidth: PropTypes.bool,
+    onStepChange: PropTypes.func,
+    modalPadding: PropTypes.string,
+    modalBodyMargin: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    minHeight: PropTypes.string,
+    showCloseButton: PropTypes.bool,
+};
+
+MultiStepModal.defaultProps = {
+    modalSteps: [],
+    showModalStepsPagination: true,
+    hideOnClickAway: false,
+    blurBackground: false,
+    onHide: () => {},
+    onFinalStep: () => {},
+    mobileBottomFullWidth: false,
+    onStepChange: () => {},
+    modalPadding: '20px',
+    modalBodyMargin: '12px 0 0 0',
+    width: null,
+    height: null,
+    minHeight: null,
+    showCloseButton: false,
+};
+
+MultiStepModal.PaginatedActions = StyledModalPaginatedActions;
+MultiStepModal.Pagination = StyledModalPagination;
+MultiStepModal.PaginationItem = StyledModalPaginationItem;
+
+export { MultiStepModalProps };
+
+export default MultiStepModal;

package/ui/elements/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as ConfirmationDialog } from './ConfirmationDialog';
+export { default } from './Modal';
+export { default as MultiStepModal } from './MultiStepModal';
+export type { ConfirmationDialogProps, ModalProps } from './types';

package/ui/elements/Modal/types.ts

@@ -0,0 +1,379 @@
+import React from 'react';
+
+import { ButtonVariants } from '../Button/types';
+
+type ModalContentType = React.ReactNode;
+
+interface ModalStep {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string | null;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Text for the next button
+     * */
+    nextButtonText?: string;
+
+    /**
+     * Determines if the back button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showBackButton?: boolean;
+
+    /**
+     * Variant for the button
+     * */
+    buttonVariant?: ButtonVariants | null;
+}
+
+export interface ModalProps {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Action for the modal, can be a valid React node
+     * */
+    action?: ModalContentType;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+
+export interface MultiStepModalProps {
+    /**
+     * Modal steps
+     * */
+    modalSteps: ModalStep[];
+
+    /**
+     * Determines if the modal should show pagination if there are multiple modal steps
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalStepsPagination?: boolean;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+
+    /**
+     * Callback function to be called when the final step is reached
+     * */
+    onFinalStep?: () => void;
+
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+
+    /**
+     * Callback function to be called when the step changes
+     * */
+    onStepChange?: () => void;
+
+    /**
+     * Determines if the modal buttons should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalButtons?: boolean;
+
+    /**
+     * Determines if the modal header should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showHeader?: boolean;
+
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: true, false
+     *
+     * NOTE: If Modal has a banner, the close button will be hidden by default
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+
+export interface StyleData {
+    position?: string;
+    backgroundColor?: string;
+}
+
+// Components interface for ModalWrapper
+export interface ModalWrapperProps {
+    blurBackground?: boolean;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalContainer
+export interface ModalContainerProps {
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    mobileBottomFullWidth?: boolean;
+    modalPadding?: string;
+    onClick?: (e: Event) => void;
+    ref?: React.MutableRefObject<any>;
+    children: React.ReactNode;
+    role: string;
+}
+
+// Components interface for ModalTitle
+export interface ModalTitleProps {
+    id: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalDescription
+export interface ModalDescriptionProps {
+    id: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalBody
+export interface ModalBodyProps {
+    modalBodyMargin?: string;
+    children: React.ReactNode;
+}
+
+// Components interface for ModalBodyMain
+export interface ModalBodyMainProps {
+    children: React.ReactNode;
+}
+
+// Components interface for ModalPaginationItemProps
+export interface ModalPaginationItemProps {
+    key: string | number;
+    active: boolean;
+    onClick: () => void;
+}
+
+export interface ConfirmationDialogProps {
+    /**
+     * Text for the cancel button
+     * */
+    cancelText?: string;
+
+    /**
+     * Text for the confirm button
+     * */
+    confirmText?: string;
+
+    /**
+     * Callback function to be called when the cancel button is clicked
+     * */
+    onCancel: () => void;
+
+    /**
+     * Callback function to be called when the confirm button is clicked
+     * */
+    onConfirm: () => void;
+
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+
+    /**
+     * Variant for the cancel button
+     * */
+    cancelButtonVariant?: ButtonVariants;
+
+    /**
+     * Variant for the confirm button
+     * */
+    confirmButtonVariant?: ButtonVariants;
+
+    /**
+     * Determines if the close button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+
+    /**
+     * Determines if the modal should be at bottom with full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+}

package/ui/elements/MultiSelectDropdown/DropdownListItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Icon } from '../Icon';
+import {
+    StyledDropdownItemCheckbox,
+    StyledDropdownItemText,
+    StyledDropdownListItem,
+} from './MultiSelectDropdown.styles';
+import { DropdownListItemProps } from './types';
+
+const DropdownListItem = ({
+    displayText,
+    onClickFn,
+    isSelected,
+}: DropdownListItemProps) => (
+    <StyledDropdownListItem onClick={onClickFn}>
+        <StyledDropdownItemCheckbox>
+            <Icon
+                name={isSelected ? 'check-square-filled' : 'square'}
+                color={
+                    isSelected
+                        ? 'var(--text-brand, #0673F9)'
+                        : 'var(--text-disabled, #8C95A6)'
+                }
+            />
+        </StyledDropdownItemCheckbox>
+        <StyledDropdownItemText $selected={isSelected}>
+            {displayText}
+        </StyledDropdownItemText>
+    </StyledDropdownListItem>
+);
+
+export default DropdownListItem;