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

package/components/tableOfContent/TableOfContent.esm.js

@@ -0,0 +1,267 @@
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import { useState, forwardRef } 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 { Card } from '../card/Card.esm.js';
+import Collapse from './transition.esm.js';
+import PropTypes from 'prop-types';
+import ScrollSpy from 'react-ui-scrollspy';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const DesktopContainer = styled(Flex, {
+  display: 'none',
+  '& .active-scroll-spy': {
+    borderLeft: `4px solid ${colors.primary500} !important`
+  },
+  '& .active-scroll-spy .link-title': {
+    color: `${colors.primary500} !important`
+  },
+  '@md': {
+    display: 'unset'
+  }
+});
+const MobileContainer = styled(Flex, {
+  backgroundColor: '$white',
+  border: `1px solid ${colors.gray150}`,
+  borderRadius: 8,
+  padding: '8px 8px',
+  width: '100%',
+  transition: '0.4s max-height',
+  position: 'relative',
+  '@md': {
+    display: 'none'
+  }
+});
+const ListWrap = styled('ul', {
+  listStyleType: 'none',
+  margin: 0,
+  padding: 0,
+  transitionDuration: '0.4s'
+});
+const List = styled('li', {
+  '&:not(:last-child)': {
+    marginBottom: 20
+  }
+});
+const Title = styled('a', {
+  fontWeight: '600',
+  fontSize: '$short-content-bold',
+  color: '$textSecondary !important',
+  paddingRight: 2,
+  transitionDuration: '0.1s',
+  userSelect: 'none',
+  textDecoration: 'none !important',
+  '&:hover': {
+    color: '$gray300 !important'
+  },
+  variants: {
+    active: {
+      true: {
+        color: '$textBrand !important'
+      }
+    }
+  }
+});
+const Separator = styled('div', {
+  width: 4,
+  borderRadius: 2,
+  backgroundColor: '$gray150 !important',
+  transitionDuration: '0.2s',
+  padding: '4px 0px',
+  variants: {
+    isCollapse: {
+      false: {
+        backgroundColor: '$primary500 !important'
+      }
+    }
+  }
+});
+const StyledCard = styled(Card, {
+  height: 'fit-content',
+  maxWidth: 311,
+  padding: '24px !important',
+  boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+});
+function Content({
+  content,
+  activeId,
+  isCollapse,
+  isDialog,
+  onNavClick
+}) {
+  function getDatasets(content, activeId, isCollapse) {
+    const datasets = [];
+    for (let i = 0; i < content?.length; i++) {
+      if (content[i]?.id === activeId) {
+        datasets.unshift(content[i]);
+      } else {
+        datasets.push(content[i]);
+      }
+    }
+    if (isCollapse) {
+      return content;
+    } else {
+      return datasets;
+    }
+  }
+  return /*#__PURE__*/jsxs(Collapse, {
+    isOpen: isCollapse,
+    children: [/*#__PURE__*/jsx(Separator, {
+      isCollapse: isCollapse
+    }), /*#__PURE__*/jsx(ListWrap, {
+      css: {
+        position: 'relative'
+      },
+      children: getDatasets(content, activeId, isCollapse)?.map((item, index) => {
+        return /*#__PURE__*/jsx(List, {
+          children: /*#__PURE__*/jsxs(Flex, {
+            direction: "row",
+            gap: 5,
+            align: "center",
+            css: {
+              marginLeft: '-4px !important',
+              borderLeftWidth: '4px !important',
+              borderLeftStyle: 'solid !important',
+              borderLeftColor: `${item?.id === activeId ? colors.primary500 : 'transparent'} !important`,
+              paddingLeft: '16px !important',
+              minHeight: 25
+            },
+            "data-to-scrollspy-id": item?.id,
+            children: [/*#__PURE__*/jsx(Title, {
+              className: "link-title",
+              active: item?.id === activeId,
+              href: `#${item?.id}`,
+              onClick: e => {
+                e.preventDefault();
+                onNavClick?.(e?.currentTarget?.href?.split('#')?.[1]);
+                const target = window.document.getElementById(e?.currentTarget?.href?.split('#')?.[1]);
+                if (target) {
+                  var headerOffset = 20;
+                  var elementPosition = target.getBoundingClientRect().top;
+                  var offsetPosition = elementPosition - headerOffset;
+                  if (!isDialog) {
+                    window.scrollBy({
+                      top: offsetPosition,
+                      behavior: 'smooth'
+                    });
+                  } else {
+                    target.scrollIntoView({
+                      behavior: 'smooth',
+                      block: 'start'
+                    });
+                  }
+                }
+              },
+              children: item?.title
+            }), item?.icon]
+          })
+        }, index);
+      })
+    })]
+  });
+}
+function TableOfContent({
+  content,
+  css,
+  isMobile,
+  isDialog,
+  activeId,
+  onNavClick
+}) {
+  const [mobileCollapse, setMobileCollapse] = useState(false);
+  function toggleCollapse() {
+    setMobileCollapse(!mobileCollapse);
+  }
+  return isMobile ? /*#__PURE__*/jsx(Box, {
+    css: {
+      background: '$white',
+      padding: '$spacing-05',
+      position: 'sticky',
+      top: 0
+    },
+    children: /*#__PURE__*/jsxs(MobileContainer, {
+      direction: "row",
+      justify: "between",
+      align: "center",
+      css: css,
+      onClick: toggleCollapse,
+      children: [/*#__PURE__*/jsx(Content, {
+        activeId: activeId,
+        isCollapse: mobileCollapse,
+        isDialog: isDialog,
+        content: content,
+        onNavClick: onNavClick
+      }), /*#__PURE__*/jsx(Box, {
+        css: {
+          position: 'absolute',
+          top: 8,
+          right: 8
+        },
+        children: mobileCollapse ? /*#__PURE__*/jsx(ChevronUpOutline, {
+          style: {
+            cursor: 'pointer'
+          }
+        }) : /*#__PURE__*/jsx(ChevronDownOutline, {
+          style: {
+            cursor: 'pointer'
+          }
+        })
+      })]
+    })
+  }) : /*#__PURE__*/jsx(DesktopContainer, {
+    direction: "row",
+    css: css,
+    children: /*#__PURE__*/jsx(StyledCard, {
+      showBottomLine: false,
+      children: /*#__PURE__*/jsx(Content, {
+        isCollapse: true,
+        isDialog: isDialog,
+        content: content,
+        onNavClick: onNavClick
+      })
+    })
+  });
+}
+const StyledPage = styled(Box, {
+  maxWidth: 982
+});
+const Page = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/jsx(StyledPage, {
+  ref: ref,
+  children: /*#__PURE__*/jsx(ScrollSpy, {
+    ...props
+  })
+}));
+Page.displayName = 'TableOfContent.Page';
+TableOfContent.Page = Page;
+TableOfContent.defaultProps = {
+  isMobile: false,
+  isDialog: false
+};
+TableOfContent.propTypes = {
+  /**
+   List of contents containing the title and id of a content.
+   */
+  content: PropTypes.array,
+  /**
+   Components devoted to mobile viewing only.
+   */
+  isMobile: PropTypes.bool,
+  /**
+   Condition when table of content is inside a component dialog.
+   */
+  isDialog: PropTypes.bool,
+  /**
+   The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
+   */
+  activeId: PropTypes.string,
+  /**
+   Event Callback on navigation click.
+   */
+  onNavClick: PropTypes.func
+};
+
+export { TableOfContent as default };

package/components/tableOfContent/index.esm.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import TableOfContent from './TableOfContent.esm.js';
+
+const TableOfContentPage = props => {
+  return jsx(TableOfContent.Page, Object.assign({}, props, {
+    children: props.children
+  }));
+};
+TableOfContentPage.defaultProps = {
+  scrollThrottle: 300,
+  offsetTop: 0,
+  offsetBottom: 0,
+  useDataAttribute: 'to-scrollspy-id',
+  activeClass: 'active-scroll-spy',
+  useBoxMethod: true
+};
+
+export { TableOfContent, TableOfContentPage };

package/components/tableOfContent/transition.esm.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from 'react';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+function Collapse({
+  children,
+  isOpen
+}) {
+  const [height, setHeight] = useState(0);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(el => {
+      setHeight(el[0].contentRect.height);
+    });
+    resizeObserver.observe(contentRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/jsx(Box, {
+    css: {
+      maxHeight: isOpen ? height : 25,
+      overflow: 'hidden',
+      transition: '0.4s max-height'
+    },
+    children: /*#__PURE__*/jsx(Flex, {
+      direction: "row",
+      ref: contentRef,
+      children: children
+    })
+  });
+}
+Collapse.defaultProps = {
+  isOpen: false
+};
+
+export { Collapse as default };

package/components/tabs/Tabs.esm.js

@@ -0,0 +1,282 @@
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { colors, styled } from '../../config/stitches.config.esm.js';
+import { addPropsToChildren } from '../../utils/element.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { ChevronLgLeftOutline, ChevronLgRightOutline } from '@majoo-ui/icons';
+import { Button } from '../button/Button.esm.js';
+import PropTypes from 'prop-types';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Tooltip from '../tooltip/Tooltip.esm.js';
+
+const StyledTabs = styled(TabsPrimitive.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  variants: {
+    gapped: {
+      true: {
+        gap: '$spacing-03',
+        boxShadow: 'none'
+      },
+      false: {
+        gap: 0,
+        boxShadow: '$medium'
+      }
+    }
+  },
+  defaultVariants: {
+    gapped: 'false'
+  }
+});
+const StyledList = styled(TabsPrimitive.List, {
+  flexShrink: 0,
+  display: 'flex',
+  borderBottom: '$medium',
+  boxShadow: '$medium',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  scrollBehavior: 'smooth',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
+});
+const StyledTrigger = styled(TabsPrimitive.Trigger, {
+  all: 'unset',
+  fontFamily: 'inherit',
+  backgroundColor: '$bgWhite ',
+  padding: '0 20px',
+  height: 60,
+  flex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '$header-tabs',
+  lineHeight: '$short-content-bold',
+  letterSpacing: '$header-tabs',
+  fontWeight: 500,
+  color: '$textSecondary',
+  userSelect: 'none',
+  cursor: 'pointer',
+  position: 'relative',
+  '&:hover': {
+    backgroundColor: '$btnHoverSecondary'
+  },
+  '&[data-state="active"]': {
+    color: '$textBrand',
+    '&::after': {
+      content: '',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      background: '$bgBrand',
+      height: '4px',
+      borderRadius: '1px'
+    }
+  },
+  '&:first-child': {
+    borderTopLeftRadius: '$lg',
+    borderBottomLeftRadius: '$lg',
+    '&::after': {
+      borderRadius: '1px 1px 1px 8px'
+    }
+  },
+  '&:last-child': {
+    borderTopRightRadius: '$lg',
+    borderBottomRightRadius: '$lg',
+    '&::after': {
+      borderRadius: '1px 1px 8px 1px'
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        height: '44px'
+      },
+      lg: {
+        height: '60px'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const StyledContent = styled(TabsPrimitive.Content, {
+  flexGrow: 1,
+  borderRadius: '$lg',
+  backgroundColor: '$bgWhite ',
+  outline: 'none',
+  boxShadow: '$medium'
+});
+const ScrollButton = styled(Button, {
+  width: '28px',
+  '&:hover': {
+    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+  },
+  variants: {
+    position: {
+      left: {
+        '& svg': {
+          marginTop: '-1px',
+          marginLeft: '-2px'
+        }
+      },
+      right: {
+        '& svg': {
+          marginTop: 0,
+          marginLeft: 0
+        }
+      }
+    }
+  }
+});
+const ScrollButtonContainer = styled(Box, {
+  size: '28px',
+  position: 'absolute',
+  zIndex: '$sticky',
+  borderRadius: '$md',
+  top: '8px',
+  variants: {
+    position: {
+      left: {
+        left: '8px',
+        boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+      },
+      right: {
+        right: '8px',
+        boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+      }
+    }
+  }
+});
+const Tabs = ({
+  children,
+  ...props
+}) => {
+  const [activeTabs, setActiveTabs] = useState(props.defaultValue || '');
+  return /*#__PURE__*/jsx(StyledTabs, {
+    ...props,
+    onValueChange: value => {
+      setActiveTabs(value);
+      if (props.onValueChange) props.onValueChange(value);
+    },
+    children: addPropsToChildren(children, {
+      activeTabs
+    })
+  });
+};
+Tabs.propTypes = {
+  asChild: PropTypes.bool,
+  defaultValue: PropTypes.string,
+  value: PropTypes.string,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  activationMode: PropTypes.oneOf(['automatic', 'manual'])
+};
+const TabsList = ({
+  children,
+  activeTabs,
+  ...props
+}) => {
+  const [listContainerScrollPosition, setlistContainerScrollPosition] = useState(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const listContainerRef = useRef();
+  useLayoutEffect(() => {
+    if (listContainerRef && listContainerRef.current) {
+      setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+    }
+  }, [listContainerRef, activeTabs]);
+  return /*#__PURE__*/jsxs(Box, {
+    css: {
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/jsx(StyledList, {
+      ...props,
+      ref: listContainerRef,
+      onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+      children: addPropsToChildren(children, {
+        activeTabs
+      })
+    }), listContainerScrollPosition > 10 && /*#__PURE__*/jsx(ScrollButtonContainer, {
+      position: "left",
+      children: /*#__PURE__*/jsx(ScrollButton, {
+        position: "left",
+        type: "button",
+        buttonType: "ghost",
+        size: "xs",
+        icon: true,
+        onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+        children: /*#__PURE__*/jsx(ChevronLgLeftOutline, {
+          color: colors.iconBrand
+        })
+      })
+    }), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/jsx(ScrollButtonContainer, {
+      position: "right",
+      children: /*#__PURE__*/jsx(ScrollButton, {
+        position: "right",
+        type: "button",
+        buttonType: "ghost",
+        size: "xs",
+        icon: true,
+        onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+        children: /*#__PURE__*/jsx(ChevronLgRightOutline, {
+          color: colors.iconBrand
+        })
+      })
+    })]
+  });
+};
+const TabsTrigger = ({
+  children,
+  icon,
+  activeTabs,
+  value,
+  ...props
+}) => {
+  const [isIconHovered, setIsIconHovered] = useState(false);
+  return /*#__PURE__*/jsx(StyledTrigger, {
+    value: value,
+    ...props,
+    children: /*#__PURE__*/jsx(ConditionalWrapper, {
+      condition: icon && activeTabs !== value,
+      wrapper: wrappedChildren => /*#__PURE__*/jsx(Tooltip, {
+        color: 'dark',
+        label: children,
+        side: "top",
+        onOpenChange: setIsIconHovered,
+        children: wrappedChildren
+      }),
+      children: /*#__PURE__*/jsxs(Flex, {
+        align: "center",
+        gap: 3,
+        css: {
+          whiteSpace: 'nowrap'
+        },
+        children: [icon && /*#__PURE__*/React__default.cloneElement(icon, {
+          color: activeTabs === value || isIconHovered ? colors.iconBrand : colors.iconDisable
+        }), (!icon || activeTabs === value) && children]
+      })
+    })
+  });
+};
+TabsTrigger.propTypes = {
+  value: PropTypes.string,
+  icon: PropTypes.func,
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+const TabsContent = ({
+  activeTabs,
+  ...props
+}) => /*#__PURE__*/jsx(StyledContent, {
+  ...props
+});
+TabsContent.propTypes = {
+  value: PropTypes.string
+};
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };