@cashub/ui-elv 1.0.0

package/wizard/Wizard.js

@@ -0,0 +1,251 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _fa = require("react-icons/fa");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("@cashub/utils");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Wizard = props => {
+  const {
+    navNames = [],
+    defaultStep = 1,
+    children,
+    beforeNext,
+    beforePrevious,
+    clickableSteps = true
+  } = props;
+  const [currentStep, setCurrentStep] = (0, _react.useState)(defaultStep);
+  const goToStep = (0, _react.useCallback)(async step => {
+    if (step > currentStep) {
+      if (!beforeNext) {
+        setCurrentStep(step);
+      } else {
+        beforeNext({
+          current: currentStep,
+          next: step
+        }).then(() => {
+          setCurrentStep(step);
+        }).catch(error => {});
+      }
+    }
+    if (step < currentStep) {
+      if (!beforePrevious) {
+        setCurrentStep(step);
+      } else {
+        beforePrevious({
+          current: currentStep
+        }).then(() => {
+          setCurrentStep(step);
+        }).catch(error => {});
+      }
+    }
+  }, [currentStep, beforeNext, beforePrevious]);
+  const nextStep = (0, _react.useCallback)(() => {
+    let next = currentStep + 1;
+    if (next > navNames.length) {
+      next = navNames.length;
+    }
+    if (!beforeNext) {
+      setCurrentStep(next);
+    } else {
+      beforeNext({
+        current: currentStep
+      }).then(() => {
+        setCurrentStep(next);
+      }).catch(error => {});
+    }
+  }, [navNames.length, beforeNext, currentStep]);
+  const previousStep = (0, _react.useCallback)(() => {
+    let previous = currentStep - 1;
+    if (previous < 1) {
+      previous = 1;
+    }
+    if (!beforePrevious) {
+      setCurrentStep(previous);
+    } else {
+      beforePrevious({
+        current: currentStep
+      }).then(() => {
+        setCurrentStep(previous);
+      }).catch(error => {});
+    }
+  }, [beforePrevious, currentStep]);
+  const isLastStep = (0, _react.useCallback)(() => {
+    return currentStep === navNames.length;
+  }, [currentStep, navNames.length]);
+  const api = (0, _react.useMemo)(() => {
+    return {
+      goToStep,
+      nextStep,
+      previousStep,
+      isLastStep
+    };
+  }, [goToStep, isLastStep, nextStep, previousStep]);
+  const childrenWithProps = (0, _react.useMemo)(() => {
+    const validChildren = _react.Children.toArray(children).filter(child => !!child);
+    return _react.Children.map(validChildren, (child, index) => {
+      if (!child) return null;
+      const className = index + 1 === currentStep && 'active';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Step, {
+        className: className,
+        "data-testid": "step",
+        children: (0, _utils.isReactComponent)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, api) : child
+      });
+    });
+  }, [api, children, currentStep]);
+  (0, _react.useEffect)(() => {
+    setCurrentStep(defaultStep);
+  }, [defaultStep]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Nav, {
+      children: navNames.map((name, index, arr) => {
+        const step = index + 1;
+        const arrow = step === currentStep && step !== arr.length ? 'arrow' : undefined;
+        let className = '';
+        if (step === currentStep) {
+          className += 'current';
+        } else if (step < currentStep) {
+          className += 'done';
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItem, {
+          className: className,
+          onClick: () => clickableSteps === true && goToStep(step),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavTitle, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: step
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: arrow,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaCaretRight, {})
+            })]
+          })
+        }, step);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: childrenWithProps
+    })]
+  });
+};
+const Nav = _styledComponents.default.ul`
+  display: flex;
+  background: var(--color-background2);
+  border-radius: var(--border-radius-l);
+  margin-bottom: var(--spacing);
+
+  ${_media.default.mobile`
+      display: block;
+    `}
+`;
+const NavItem = _styledComponents.default.li`
+  color: var(--font-on-mute);
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  padding: 0 var(--spacing-xs);
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  transition: 0.3s;
+  overflow: hidden;
+  flex: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+
+    > div > span:first-of-type {
+      color: var(--font-on-primary);
+      background: var(--font-on-background);
+    }
+  }
+
+  &.current,
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    > div > span:first-of-type {
+      color: var(--color-primary);
+      background: var(--font-on-primary);
+    }
+  }
+
+  &.current {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
+
+    &:first-child {
+      border-radius: var(--border-radius-l);
+    }
+
+    ${_media.default.mobile`
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      `}
+  }
+
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    &:first-child {
+      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
+
+      ${_media.default.mobile`
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+    }
+  }
+`;
+const NavTitle = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > span:first-of-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing-xs);
+    color: var(--font-on-mute);
+    flex: 0 0;
+    flex-basis: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-l);
+    background: var(--font-on-mute);
+  }
+
+  > p {
+    margin-right: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > span:last-of-type {
+    display: none;
+
+    &.arrow {
+      display: flex;
+      align-self: center;
+    }
+
+    ${_media.default.mobile`
+        transform: rotate(90deg);
+      `}
+  }
+`;
+const Step = _styledComponents.default.div`
+  display: none;
+
+  &.active {
+    display: block;
+  }
+`;
+var _default = exports.default = Wizard;

package/wizard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Wizard", {
+  enumerable: true,
+  get: function () {
+    return _Wizard.default;
+  }
+});
+var _Wizard = _interopRequireDefault(require("./Wizard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }