@majoo-ui/react 2.0.0 → 2.1.0-rc.0

package/components/stepWizard/StepWizard.esm.js

@@ -0,0 +1,451 @@
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import React__default, { useEffect } from 'react';
+import StepWizard from 'react-step-wizard';
+import { styled, css, colors, keyframes } from '../../config/stitches.config.esm.js';
+import { CheckFilled, CircleInfoOutline } from '@majoo-ui/icons';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { Card } from '../card/Card.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Tooltip from '../tooltip/Tooltip.esm.js';
+import { Tag } from '../tag/Tag.esm.js';
+
+const StepWizardContext = /*#__PURE__*/React__default.createContext({});
+const Stepper = StepWizard;
+Stepper.displayName = 'Stepper';
+const StepperList = styled(Flex, {
+  minWidth: 264,
+  margin: 24
+});
+const StepperItem = styled(Flex, {
+  userSelect: 'none',
+  height: '$spacing-06',
+  fontWeight: 600
+});
+const Span = styled('span', {
+  margin: '0 16px 0 -4px',
+  width: 4,
+  height: 24,
+  borderRadius: 2
+});
+const StyledCircleInfoOutline = styled(CircleInfoOutline, {});
+const WrapperDiv = styled('div', {
+  '& .stepperInstance': {
+    display: 'flex',
+    gap: 25,
+    '& .rsw_2Y': {
+      width: '100%',
+      maxWidth: 982,
+      '& .rsw_2f': {
+        display: 'none'
+      },
+      '& .rsw_3G': {
+        display: 'block !important',
+        zIndex: 'unset'
+      }
+    }
+  }
+});
+const MobileContainer = styled(Flex, {
+  position: 'absolute',
+  margin: '0px -$spacing-06',
+  padding: '$spacing-08 $spacing-05 10px',
+  left: 0,
+  right: 0,
+  top: -40,
+  backgroundColor: '$bgWhite'
+});
+const Line = styled('span', {
+  width: '100%',
+  height: 2,
+  alignSelf: 'center',
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$bgBrand'
+      },
+      false: {
+        backgroundColor: '$gray150'
+      }
+    }
+  }
+});
+const animated = css({
+  animationDuration: '.552s',
+  animationFillMode: 'both',
+  transformStyle: 'preserve-3d'
+});
+const enter = keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '50%': {
+    opacity: 0.5
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const intro = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const animationIntro = css({
+  animation: `${intro} .6s ease-out`
+});
+const animationEnter = css({
+  animationName: enter
+});
+const transitions = {
+  enterRight: `${animated} ${animationEnter}`,
+  enterLeft: `${animated} ${animationEnter}`,
+  intro: `${animated} ${animationIntro}`
+};
+const Navigation = props => {
+  const {
+    isMobile,
+    data,
+    cssNav,
+    isHide,
+    forbidClickNav,
+    hideCheckedIcon
+  } = React__default.useContext(StepWizardContext);
+  const mobileHidden = isMobile && isHide && {
+    height: 'unset',
+    margin: 'unset'
+  };
+  const stepItems = [];
+  const totalNavItems = data.filter(i => !i.hidden).length;
+  const navMobileItems = data.filter(i => !i.hidden && !i.disabled);
+  const height = totalNavItems * 24 + (totalNavItems - 1) * 16;
+  for (let i = 1; i <= totalNavItems; i += 1) {
+    const isActive = props.currentStep === i;
+    const isComplete = props.isComplete[i - 1];
+    const isAdditional = data[i - 1]?.additional;
+    const lastItem = navMobileItems.indexOf(data[i - 1]) + 1 === navMobileItems.length;
+    // eslint-disable-next-line no-lone-blocks
+    {
+      !isMobile ? stepItems.push(/*#__PURE__*/jsxs(StepperItem, {
+        css: {
+          opacity: data[i - 1].hidden ? 0 : undefined,
+          color: isActive ? '$textBrand' : isComplete ? '$gray900' : isAdditional ? '$textPrimary' : '$textDisable',
+          cursor: props.totalSteps !== props.currentStep ? 'pointer' : 'auto'
+        },
+        align: "center",
+        onClick: () => {
+          if (props.onNavClicked && !data[i - 1]?.disabled || isAdditional) props.onNavClicked(i);
+          if (!forbidClickNav && isComplete && !isHide || isAdditional) {
+            props.goToStep(i);
+          }
+        },
+        children: [/*#__PURE__*/jsx(Span, {
+          css: {
+            backgroundColor: isActive ? '$bgBrand' : '$bgBorder'
+          }
+        }), isComplete && !hideCheckedIcon && /*#__PURE__*/jsx(Box, {
+          css: {
+            margin: '$spacing-01 $spacing-03 0 0'
+          },
+          children: /*#__PURE__*/jsx(CheckFilled, {
+            color: colors.iconBrand
+          })
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : data[i - 1].title?.(), data[i - 1]?.withTolltip && /*#__PURE__*/jsx(Tooltip, {
+          align: "center",
+          label: data[i - 1]?.tooltipsContents,
+          children: /*#__PURE__*/jsx(StyledCircleInfoOutline, {
+            css: {
+              margin: '0 9px'
+            },
+            size: "20",
+            color: colors.iconSecondary
+          })
+        }), data[i - 1]?.comingSoon && /*#__PURE__*/jsx(Flex, {
+          css: {
+            marginLeft: data[i - 1]?.withTolltip ? 0 : '$spacing-03'
+          },
+          align: "center",
+          children: /*#__PURE__*/jsx(Tag, {
+            size: "lg",
+            type: "error",
+            children: "Coming Soon"
+          })
+        })]
+      }, `step-${i}`)) : stepItems.push(/*#__PURE__*/jsxs(Fragment, {
+        children: [isActive && /*#__PURE__*/jsx(Box, {
+          css: {
+            position: 'absolute',
+            top: 40,
+            left: 16
+          },
+          children: /*#__PURE__*/jsxs(Flex, {
+            align: "center",
+            gap: 2,
+            children: [/*#__PURE__*/jsx(Box, {
+              css: {
+                width: 'max-content',
+                color: '$textBrand',
+                fontWeight: 600
+              },
+              children: typeof data[i - 1].title === 'string' ? data[i - 1].title : data[i - 1].title?.()
+            }), data[i - 1]?.withTolltip && /*#__PURE__*/jsx(Tooltip, {
+              align: "center",
+              withClick: true,
+              label: data[i - 1]?.tooltipsContents,
+              children: /*#__PURE__*/jsx(StyledCircleInfoOutline, {
+                size: "20",
+                color: colors.iconPrimary
+              })
+            }), data[i - 1]?.comingSoon && /*#__PURE__*/jsx(Flex, {
+              align: "center",
+              justify: "center",
+              css: {
+                marginTop: data[i - 1]?.withTolltip ? 0 : '$spacing-03'
+              },
+              children: /*#__PURE__*/jsx(Tag, {
+                size: "lg",
+                type: "error",
+                children: "Coming Soon"
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsxs(Flex, {
+          align: "center",
+          css: {
+            position: 'relative',
+            userSelect: 'none',
+            fontSize: '12px',
+            textAlign: '-webkit-center',
+            display: data[i - 1]?.disabled && 'none',
+            marginTop: '$spacing-07',
+            flex: 1,
+            maxWidth: lastItem && 26
+          },
+          onClick: () => {
+            if (props.onNavClicked) props.onNavClicked(i);
+            if (!forbidClickNav && isComplete && !isHide) {
+              props.goToStep(i);
+            }
+          },
+          children: [isComplete && !hideCheckedIcon && /*#__PURE__*/jsxs(Flex, {
+            css: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsx(Flex, {
+              css: {
+                flex: 1
+              },
+              children: /*#__PURE__*/jsx(CheckFilled, {
+                size: 32,
+                color: colors.iconBrand
+              })
+            }), !lastItem && /*#__PURE__*/jsx(Line, {
+              active: true
+            })]
+          }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/jsxs(Flex, {
+            css: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsx(Flex, {
+              css: {
+                flex: 1
+              },
+              children: /*#__PURE__*/jsx(Flex, {
+                justify: "center",
+                align: "center",
+                css: {
+                  width: 24,
+                  height: 24,
+                  borderRadius: '$round',
+                  border: `4px solid ${isActive ? '$bgBrand' : '$bgInactive'}`,
+                  backgroundColor: data[i - 1]?.disabled ? '$gray200' : '$white'
+                }
+              })
+            }), isActive && !lastItem && /*#__PURE__*/jsx(Line, {
+              active: false
+            })]
+          }), !lastItem && !isActive && /*#__PURE__*/jsx(Line, {
+            active: isComplete && !hideCheckedIcon
+          })]
+        })]
+      }));
+    }
+  }
+  return /*#__PURE__*/jsx(ConditionalWrapper, {
+    condition: !isMobile,
+    wrapper: child => /*#__PURE__*/jsx(Box, {
+      css: {
+        opacity: isHide ? 0 : undefined,
+        maxWidth: 311
+      },
+      children: /*#__PURE__*/jsxs(Flex, {
+        css: {
+          position: !isMobile && 'sticky',
+          top: !isMobile ? 44 : 40
+        },
+        direction: "column",
+        gap: 7,
+        children: [/*#__PURE__*/jsx(Card, {
+          css: {
+            height: 'fit-content',
+            padding: 0
+          },
+          showBottomLine: false,
+          children: child
+        }), /*#__PURE__*/jsx(Box, {
+          children: typeof props?.appendContent === 'function' ? props?.appendContent?.() : props?.appendContent
+        })]
+      })
+    }),
+    children: /*#__PURE__*/jsx(StepperList, {
+      css: {
+        borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
+        marginBottom: isMobile ? 60 : undefined,
+        height: !isMobile ? height : undefined,
+        opacity: isHide ? 0 : undefined,
+        position: 'sticky',
+        top: !isMobile ? 44 : 40,
+        zIndex: 10,
+        ...cssNav,
+        ...mobileHidden
+      },
+      gap: 5,
+      justify: isMobile ? 'center' : undefined,
+      direction: isMobile ? 'row' : 'column',
+      children: isMobile ? /*#__PURE__*/jsx(Box, {
+        css: {
+          position: 'relative',
+          width: '100vw',
+          backgroundColor: '$bgBorder'
+        },
+        children: /*#__PURE__*/jsx(MobileContainer, {
+          direction: "row",
+          justify: "between",
+          children: stepItems
+        })
+      }) : stepItems
+    })
+  });
+};
+const Default = props => {
+  const [state, updateState] = React__default.useState({
+    isComplete: [],
+    hide: props.hide || false,
+    ...props.state
+  });
+  useEffect(() => {
+    updateState(current => ({
+      ...current,
+      isComplete: props.completedSteps || []
+    }));
+  }, [props.completedSteps]);
+  useEffect(() => {
+    updateState(prev => ({
+      ...prev,
+      hide: props.hide
+    }));
+  }, [props.hide]);
+  useEffect(() => {
+    props?.onChangeVisibility?.(state.hide);
+  }, [state.hide]);
+  const toogleVisibility = value => {
+    updateState(prev => ({
+      ...prev,
+      hide: !prev.hide
+    }));
+  };
+  const getIsComplete = currentStep => {
+    return state?.isComplete?.[currentStep - 1];
+  };
+  const getTitleStep = currentStep => {
+    return props?.navContents?.[currentStep - 1]?.title;
+  };
+  const setState = value => {
+    updateState({
+      ...state,
+      ...value
+    });
+  };
+  const setComplete = (value, index) => {
+    const {
+      isComplete
+    } = state;
+    let arrIsComplete = [...isComplete];
+    arrIsComplete[index - 1] = value;
+    updateState({
+      ...state,
+      isComplete: arrIsComplete
+    });
+  };
+  const setInstance = SW => {
+    let completeArr = [];
+    for (let i = 0; i < SW.totalSteps; i++) {
+      completeArr.push(false);
+    }
+    if (props.setSw) props.setSw(SW);
+    updateState({
+      ...state,
+      isComplete: completeArr,
+      SW
+    });
+  };
+  const handleStepChange = e => {
+    const target = window.document.getElementById('container');
+    props.scrollTop && target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+    props.onStepChange && props.onStepChange(e);
+    if (props?.navContents?.[e?.activeStep - 1]?.disabled) {
+      if (e?.activeStep > e?.previousStep) {
+        state?.SW?.nextStep();
+      } else {
+        state?.SW?.previousStep();
+      }
+    }
+  };
+  return /*#__PURE__*/jsx(WrapperDiv, {
+    id: "container",
+    children: /*#__PURE__*/jsx(StepWizardContext.Provider, {
+      value: {
+        toogleVisibility,
+        isHide: state?.hide,
+        setComplete,
+        setState,
+        state,
+        SW: state?.SW,
+        forbidClickNav: props.forbidClickNav,
+        titles: props.titles,
+        isMobile: props.isMobile,
+        data: props.navContents,
+        cssNav: props.cssNav,
+        getIsComplete,
+        getTitleStep,
+        hideCheckedIcon: props.hideCheckedIcon
+      },
+      children: /*#__PURE__*/jsx(Stepper, {
+        ...props,
+        transitions: transitions,
+        className: !props.isMobile && 'stepperInstance',
+        instance: setInstance,
+        nav: /*#__PURE__*/jsx(Navigation, {
+          onNavClicked: props.onNavClicked,
+          isComplete: state.isComplete,
+          appendContent: props?.appendContent
+        }),
+        initialStep: props.initialStep,
+        onStepChange: handleStepChange,
+        isLazyMount: props?.isLazyMount,
+        children: props.children
+      })
+    })
+  });
+};
+
+export { Default, Navigation, StepWizardContext };

package/components/stepWizard/index.esm.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { Default } from './StepWizard.esm.js';
+export { StepWizardContext } from './StepWizard.esm.js';
+
+const StepWizard = props => {
+  return jsx(Default, Object.assign({}, props, {
+    children: props.children
+  }));
+};
+StepWizard.defaultProps = {
+  isLazyMount: true
+};
+
+export { StepWizard };