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

package/components/progressIndicator/ProgressIndicator.esm.js

@@ -0,0 +1,287 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cloneElement } from 'react';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+
+const Container = styled(Flex, {
+  gap: '$spacing-05'
+});
+const Status = styled('div', {
+  width: 16,
+  height: 16,
+  background: '$bgWhite',
+  borderWidth: 4,
+  borderStyle: 'solid',
+  borderColor: '$primary500',
+  borderRadius: 50,
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: {
+    state: {
+      active: {
+        borderColor: '$primary500'
+      },
+      inActive: {
+        borderColor: '$gray150'
+      },
+      error: {
+        borderColor: '$red400'
+      }
+    },
+    completed: {
+      true: {
+        backgroundColor: '$primary500'
+      }
+    },
+    withIcon: {
+      true: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 40,
+        height: 40,
+        borderWidth: 2
+      }
+    }
+  }
+});
+const Title = styled('p', {
+  fontStyle: 'normal',
+  fontSize: 14,
+  color: '$textPrimary',
+  margin: 0,
+  zIndex: 10,
+  variants: {
+    state: {
+      active: {
+        fontWeight: 600
+      },
+      inActive: {
+        fontWeight: 400
+      },
+      error: {
+        fontWeight: 400
+      }
+    }
+  }
+});
+const Line = styled('span', {
+  width: '100%',
+  height: 2,
+  backgroundColor: '$primary500',
+  variants: {
+    state: {
+      active: {
+        backgroundColor: '$primary500'
+      },
+      inActive: {
+        backgroundColor: '$gray150'
+      },
+      error: {
+        backgroundColor: '$red400'
+      }
+    },
+    withIcon: {
+      true: {
+        width: 'calc(100% - 40px)'
+      }
+    }
+  }
+});
+const SvgCheckFilled = () => jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: jsx("path", {
+    d: "M5 11.5L10 16.5L19 7.5",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+function ProgressIndicator(props) {
+  var _a;
+  const {
+    progressList,
+    progress,
+    progressError,
+    direction = 'horizontal',
+    width,
+    gap = 80
+  } = props;
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  const isIcon = Boolean((_a = progressList === null || progressList === void 0 ? void 0 : progressList[0]) === null || _a === void 0 ? void 0 : _a.icon);
+  function getState(itemProgress) {
+    if (itemProgress === progressError) {
+      return 'error';
+    } else {
+      if (itemProgress <= progress) {
+        return 'active';
+      } else {
+        return 'inActive';
+      }
+    }
+  }
+  function renderIcon(item) {
+    const isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
+    const state = getState(item === null || item === void 0 ? void 0 : item.progress);
+    const getColor = state => {
+      switch (state) {
+        case 'error':
+          return colors.red400;
+        case 'active':
+          return colors.primary500;
+        default:
+          return colors.gray150;
+      }
+    };
+    const iconProps = {
+      size: 24,
+      color: getColor(state)
+    };
+    return isCompleted ? jsx(SvgCheckFilled, {}) : /*#__PURE__*/cloneElement(item === null || item === void 0 ? void 0 : item.icon, iconProps);
+  }
+  function renderHorizontalIndicator() {
+    return jsx(Container, {
+      direction: "column",
+      children: jsx(Flex, {
+        css: {
+          margin: '0px 8px',
+          '@md': {
+            margin: '0px 4px'
+          },
+          '& > div:not(:first-child):not(:last-child)': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'center'
+            }
+          },
+          '& > div:first-child': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'start',
+              left: '-10%',
+              right: `-${isIcon ? 500 : 3000}%`
+            }
+          },
+          '& > div:last-child': {
+            '.title-progress': {
+              display: 'flex',
+              justifyContent: 'end',
+              right: '-10%',
+              left: `-${isIcon ? 500 : 3000}%`
+            }
+          }
+        },
+        justify: "between",
+        children: progressList === null || progressList === void 0 ? void 0 : progressList.map((item, index) => {
+          var _a;
+          const isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
+          return jsxs(Flex, {
+            align: "center",
+            css: {
+              flex: (progressList === null || progressList === void 0 ? void 0 : progressList.length) !== index + 1 ? 1 : 0,
+              paddingTop: 45
+            },
+            children: [jsxs(Status, {
+              state: getState(item === null || item === void 0 ? void 0 : item.progress),
+              withIcon: isIcon,
+              completed: isCompleted,
+              children: [isIcon && renderIcon(item), jsx(Box, {
+                className: "title-progress",
+                css: {
+                  position: 'absolute',
+                  top: -45,
+                  left: `-${isIcon ? 250 : 2000}%`,
+                  right: `-${isIcon ? 250 : 2000}%`
+                },
+                children: jsx(Title, {
+                  css: {
+                    opacity: isMobile && (item === null || item === void 0 ? void 0 : item.progress) !== progress ? 0 : 1
+                  },
+                  state: getState(item === null || item === void 0 ? void 0 : item.progress),
+                  children: typeof (item === null || item === void 0 ? void 0 : item.title) === 'function' ? (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.call(item) : item === null || item === void 0 ? void 0 : item.title
+                }, index)
+              })]
+            }), jsx(Line, {
+              state: getState((item === null || item === void 0 ? void 0 : item.progress) + 1),
+              withIcon: isIcon,
+              css: {
+                display: (progressList === null || progressList === void 0 ? void 0 : progressList.length) === index + 1 ? 'none' : 'unset'
+              }
+            })]
+          }, index);
+        })
+      })
+    });
+  }
+  function renderVerticalIndicator() {
+    return jsx(Container, {
+      direction: "column",
+      children: jsx(Flex, {
+        align: "start",
+        direction: "column",
+        css: {
+          margin: '$spacing-01'
+        },
+        justify: "between",
+        children: progressList === null || progressList === void 0 ? void 0 : progressList.map((item, index) => {
+          var _a;
+          const isCompleted = (item === null || item === void 0 ? void 0 : item.progress) < progress && (item === null || item === void 0 ? void 0 : item.progress) !== progressError;
+          return jsxs(Flex, {
+            direction: "column",
+            align: "center",
+            css: {
+              flex: (progressList === null || progressList === void 0 ? void 0 : progressList.length) !== index + 1 ? 1 : 0
+            },
+            children: [jsxs(Status, {
+              css: {
+                borderWidth: 1,
+                height: 8,
+                width: 8
+              },
+              state: getState(item === null || item === void 0 ? void 0 : item.progress),
+              withIcon: isIcon,
+              completed: isCompleted,
+              children: [isIcon && renderIcon(item), jsx(Box, {
+                className: "title-progress",
+                css: {
+                  position: 'absolute',
+                  top: isIcon ? 10 : -5,
+                  left: isIcon ? 40 : 20,
+                  right: width ? `-${width}px` : -300
+                },
+                children: item.render ? jsx(Fragment, {
+                  children: typeof (item === null || item === void 0 ? void 0 : item.render) === 'function' ? item === null || item === void 0 ? void 0 : item.render() : item === null || item === void 0 ? void 0 : item.render
+                }) : jsx(Title, {
+                  css: {
+                    opacity: isMobile && (item === null || item === void 0 ? void 0 : item.progress) !== progress ? 0 : 1
+                  },
+                  state: getState((item === null || item === void 0 ? void 0 : item.progress) + 1),
+                  children: typeof (item === null || item === void 0 ? void 0 : item.title) === 'function' ? (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.call(item) : item === null || item === void 0 ? void 0 : item.title
+                }, index)
+              })]
+            }), jsx(Line, {
+              state: getState(item === null || item === void 0 ? void 0 : item.progress),
+              withIcon: isIcon,
+              css: {
+                width: 2,
+                height: gap
+              }
+            })]
+          }, index + 'vertical');
+        })
+      })
+    });
+  }
+  return direction === 'horizontal' ? renderHorizontalIndicator() : renderVerticalIndicator();
+}
+
+export { ProgressIndicator as default };

package/components/scrollSync/ScrollSync.esm.js

@@ -0,0 +1,172 @@
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.find.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+
+/**
+ * ScrollingSyncerContext is the context to be handling scrolled nodes
+ */
+const ScrollingSyncerContext = /*#__PURE__*/React__default.createContext({
+  registerNode: (_node, _group) => {},
+  unregisterNode: (_node, _group) => {},
+  onScroll: (_e, _groups) => {}
+});
+/**
+ * ScrollSync component is a context based component,
+ * that wrappes children to be .Provided with context utils and eventsHandlers
+ * @param props ScrollSyncProps
+ */
+const ScrollSync = props => {
+  /**
+   * a map of group: and it's nodes
+   * {
+   *  groupA: [node1, node2, node3],
+   *  groupB: [node4, node5],
+   *  groupC: [node1, node4],
+   * }
+   */
+  const nodesRef = useRef({});
+  const elements = nodesRef.current;
+  /**
+   * A simple trick to avoid calling `requestAnimationFrame` before the frame is painted, to enhance performance!
+   */
+  const shouldPaintFrameRef = useRef(true);
+  let shouldPaintFrame = shouldPaintFrameRef.current;
+  /**
+   * return boolean if the group exists
+   * @param group to be found
+   */
+  const findGroup = group => {
+    return !!elements[group];
+  };
+  /**
+   * returns found node or undefined
+   * @param node to be found
+   * @param group to be searched in
+   */
+  const doesNodeExists = (node, group) => {
+    const groupExists = findGroup(group);
+    if (!groupExists) return false;
+    const foundNode = elements[group].find(element => element.node === node);
+    if (!foundNode) return false;
+    return !!foundNode;
+  };
+  /**
+   * this function will delightly register your node (that uses ScrollSyncNode)
+   * to be scroll-synced with it's cool other registerd nodes
+   *
+   * @param node to be registred
+   * @param groups to wich groups the node should be registered
+   */
+  const registerNode = (element, groups) => {
+    groups.forEach(group => {
+      const groupExists = findGroup(group);
+      if (!groupExists) {
+        elements[group] = [];
+      }
+      elements[group].push(Object.assign({}, element));
+    });
+  };
+  /**
+   * this function will delightly UNregister your node (that uses ScrollSyncNode)
+   * to stop it's scroll-sync with other cool registerd nodes
+   *
+   * used now when unmounting nodes
+   *
+   * @param element to be registred
+   * @param groups to wich groups the node should be registered
+   */
+  const unregisterNode = (element, groups) => {
+    groups.forEach(group => {
+      const doesNodeExist = doesNodeExists(element.node, group);
+      if (doesNodeExist) {
+        elements[group].splice(elements[group].findIndex(e => element.node === e.node), 1);
+      }
+    });
+  };
+  /**
+   * calculate scrolling percentage of the scrolledNode to be synced with other nodes
+   * @param scrolledNode !!
+   * @param node other node to be scroll-synced
+   */
+  const syncScrollPosition = (scrolledNode, node, config) => {
+    if (!scrolledNode || !node) return;
+    const {
+      scrollTop,
+      scrollHeight,
+      offsetHeight,
+      scrollLeft,
+      scrollWidth,
+      offsetLeft,
+      offsetWidth
+    } = scrolledNode;
+    if (!props.proportional) {
+      if (config !== 'vertical-only') {
+        node.scrollLeft = scrollLeft;
+      }
+      if (config !== 'horizontal-only') {
+        node.scrollTop = scrollTop;
+      }
+      return;
+    }
+    //calculate percentage of scrolling of the scrolledNode
+    const percentagePerHeight = scrollTop / (scrollHeight - offsetHeight);
+    //calculate percentage of scrolling of the scrolledNode
+    const percentagePerWidth = scrollLeft / (scrollWidth - offsetWidth);
+    //Apply calculated scrolling
+    if (config !== 'vertical-only') {
+      node.scrollLeft = Math.round(percentagePerWidth * (node.scrollWidth - node.offsetWidth));
+    }
+    if (config !== 'horizontal-only') {
+      node.scrollTop = Math.round(percentagePerHeight * (node.scrollHeight - node.offsetHeight));
+    }
+  };
+  /**
+   * We sync all other nodes in the registered groups
+   * @param scrolledNode !!
+   * @param groups groups to be scroll-synced
+   */
+  const syncScrollPositions = (scrolledNode, groups) => {
+    groups.forEach(group => {
+      elements[group].forEach(element => {
+        /* For all nodes other than the currently scrolled one */
+        if (scrolledNode !== element.node) {
+          syncScrollPosition(scrolledNode, element.node, element.scroll);
+        }
+      });
+    });
+  };
+  /**
+   * check if previous frame was painted and we should paint next
+   * if we should, then we call `requestAnimationFrame` again
+   * and then clear the shouldPaintFrame flag till next animation frame
+   *
+   * @param node node to be scrolled
+   * @param groups groups to be scroll-synced
+   */
+  const handleNodeScroll = (node, groups) => {
+    if (shouldPaintFrame) {
+      window.requestAnimationFrame(() => {
+        syncScrollPositions(node, groups);
+        shouldPaintFrame = true;
+      });
+      shouldPaintFrame = false;
+    }
+  };
+  return jsx(ScrollingSyncerContext.Provider, {
+    value: {
+      registerNode,
+      unregisterNode,
+      onScroll: (e, groups) => !props.disabled && handleNodeScroll(e.currentTarget, groups)
+    },
+    children: React__default.Children.only(props.children)
+  });
+};
+ScrollSync.defaultProps = {
+  disabled: false,
+  proportional: true
+};
+
+export { ScrollSync, ScrollingSyncerContext, ScrollSync as default };

package/components/scrollSync/ScrollSyncNode.esm.js

@@ -0,0 +1,87 @@
+import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
+import { ScrollingSyncerContext } from './ScrollSync.esm.js';
+import { toArray, getMovingAxis } from './utils.esm.js';
+
+const ScrollSyncNode = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    group = 'default',
+    scroll = 'all',
+    selfLockAxis = null,
+    onScroll: onNodeScroll = () => undefined
+  } = props;
+  const {
+    registerNode,
+    unregisterNode,
+    onScroll
+  } = useContext(ScrollingSyncerContext);
+  const childRef = children.ref;
+  const hasDoubleRef = childRef != null && forwardedRef != null;
+  if (hasDoubleRef) {
+    console.warn('scroll-sync-react:\nWARNING: ref used on both ScrollSyncNode and its direct child.\nUsing the ref from the ScrollSyncNode component.');
+  }
+  const innerRef = useRef(null);
+  const ref = childRef && !forwardedRef ? childRef : innerRef;
+  useEffect(() => {
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(ref.current);
+    }
+  }, []);
+  const applySelfLockAxis = event => {
+    const movingAxis = getMovingAxis(event);
+    if (selfLockAxis === 'X' && movingAxis === 'X') {
+      event.preventDefault();
+    } else if (selfLockAxis === 'Y' && movingAxis === 'Y') {
+      event.preventDefault();
+    } else if (selfLockAxis === 'XY' && (movingAxis === 'XY' || movingAxis === 'X' || movingAxis === 'Y')) {
+      event.preventDefault();
+    }
+  };
+  useEffect(() => {
+    var _a;
+    const syncableElement = {
+      node: ref.current,
+      scroll
+    };
+    if (syncableElement) registerNode(syncableElement, toArray(group));
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', applySelfLockAxis, {
+      passive: false
+    });
+    return () => {
+      var _a;
+      unregisterNode(syncableElement, toArray(group));
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', applySelfLockAxis);
+    };
+  }, []);
+  useEffect(() => {
+    const syncableElement = {
+      node: ref.current,
+      scroll
+    };
+    unregisterNode(syncableElement, toArray(group));
+    registerNode(syncableElement, toArray(group));
+    return () => unregisterNode(syncableElement, toArray(group));
+  }, [scroll, group]);
+  return /*#__PURE__*/React__default.cloneElement(children, {
+    ref,
+    onScroll: e => {
+      if (typeof children.props.onScroll === 'function') {
+        children.props.onScroll(e);
+      }
+      e.persist();
+      onScroll(e, toArray(group));
+      onNodeScroll(e);
+    },
+    onWheel: e => {
+      if (typeof children.props.onWheel === 'function') {
+        children.props.onWheel(e);
+      }
+      e.persist();
+      onScroll(e, toArray(group));
+      onNodeScroll(e);
+    }
+  });
+});
+ScrollSyncNode.displayName = 'ScrollSyncNode';
+
+export { ScrollSyncNode, ScrollSyncNode as default };

package/components/scrollSync/utils.esm.js

@@ -0,0 +1,9 @@
+const toArray = groups => [].concat(groups);
+const getMovingAxis = e => {
+  if (e.deltaX > 0 || e.deltaX < 0) return "X";
+  if (e.deltaY > 0 || e.deltaY < 0) return "Y";
+  if ((e.deltaY > 0 || e.deltaY < 0) && (e.deltaX > 0 || e.deltaX < 0)) return "XY";
+  return null;
+};
+
+export { getMovingAxis, toArray };

package/components/separator/Separator.esm.js

@@ -0,0 +1,43 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+const StyledSeparator = styled(SeparatorPrimitive.Root, {
+  backgroundColor: '$gray150',
+  '&[data-orientation=horizontal]': {
+    height: 1,
+    width: '100%'
+  },
+  '&[data-orientation=vertical]': {
+    width: 1
+  },
+  variants: {
+    responsive: {
+      true: {
+        display: 'none',
+        '@md': {
+          display: 'block'
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const Separator = StyledSeparator;
+Separator.displayName = 'Separator';
+
+export { Separator, Separator as default };