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

package/components/pieChart/PieChart.esm.js

@@ -0,0 +1,287 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState } from 'react';
+import { foundations } from '@majoo-ui/core';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { Separator } from '../separator/Separator.esm.js';
+import Text from '../text/Text.esm.js';
+import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, LabelList, Tooltip, Legend, Sector } from 'recharts';
+
+const {
+  colors
+} = foundations;
+const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
+  const {
+    cx,
+    cy,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
+  const IMG_WIDHT = 75;
+  const IMG_HEIGHT = 75;
+  return jsx(React__default.Fragment, {
+    children: jsxs("g", {
+      children: [jsx("clipPath", {
+        id: "circleAvatar",
+        children: jsx("circle", {
+          cx: cx + 1,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: "#FFFFFF"
+        })
+      }), validAvatar ? jsx("image", {
+        x: cx - IMG_WIDHT / 2,
+        y: cy - IMG_HEIGHT / 2,
+        width: IMG_WIDHT,
+        height: IMG_HEIGHT,
+        href: avatar,
+        clipPath: "url(#circleAvatar)"
+      }) : jsxs(React__default.Fragment, {
+        children: [jsx("circle", {
+          cx: cx,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: foundations.colors.bgBorder
+        }), jsx("text", {
+          x: cx,
+          y: cy,
+          textAnchor: "middle",
+          alignmentBaseline: "middle",
+          fontFamily: "main",
+          fontWeight: "600",
+          children: acronym
+        })]
+      }), jsx(Sector, {
+        cx: cx,
+        cy: cy,
+        innerRadius: innerRadius,
+        outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        fill: fill,
+        style: {
+          outline: 'none'
+        }
+      })]
+    })
+  });
+};
+const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
+  children: [jsx(Flex, {
+    css: {
+      marginTop: '$spacing-05',
+      height: 18
+    },
+    justify: "center",
+    children: subtitle && jsx(Heading, {
+      heading: "sectionTitle",
+      children: subtitle
+    })
+  }), formattedData.length > 0 && jsx(Flex, {
+    css: {
+      marginTop: '$spacing-06'
+    },
+    direction: "column",
+    gap: 5,
+    children: formattedData === null || formattedData === void 0 ? void 0 : formattedData.map((data, index) => {
+      var _a;
+      return jsxs(Box, {
+        children: [jsxs(Flex, {
+          justify: "between",
+          children: [jsxs(Flex, {
+            align: "center",
+            children: [jsx(Box, {
+              css: {
+                backgroundColor: data.color,
+                borderRadius: '50%',
+                height: 12,
+                width: 12,
+                display: 'inline-block',
+                marginRight: '$spacing-03'
+              }
+            }), jsx(Box, {
+              css: {
+                width: 120
+              },
+              children: jsx(Text, {
+                variant: "label",
+                color: "secondary",
+                children: data.name
+              })
+            })]
+          }), (legend === null || legend === void 0 ? void 0 : legend.showTotal) && jsx(Text, {
+            variant: "label",
+            color: "secondary",
+            children: (_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total
+          })]
+        }), jsx(Separator, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        })]
+      }, index);
+    })
+  })]
+});
+const PieChart = ({
+  data,
+  css,
+  avatarURL,
+  avatarAcronym,
+  validAvatar,
+  legend,
+  isMobile,
+  tooltip,
+  title,
+  subtitle,
+  label,
+  outerRadius,
+  innerRadius
+}) => {
+  var _a;
+  const emptyData = [{
+    id: '0',
+    name: '',
+    total: 1,
+    color: foundations.colors.chartLightGray
+  }];
+  const dataChart = data.map(item => Object.assign(Object.assign({}, item), {
+    total: Number(item.total)
+  }));
+  const activeRef = useRef();
+  const formattedData = data.length > 0 ? dataChart : emptyData;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? subtitle ? 420 : 380 : 230;
+  const CONTAINER_WIDTH = isMobile ? 350 : 450;
+  const CHART_HEIGHT = 150;
+  const CHART_WIDTH = 450;
+  const CustomTooltip = ({
+    payload = {},
+    active = false
+  }) => {
+    var _a;
+    if (active) {
+      const {
+        total,
+        name
+      } = payload[0].payload;
+      return jsxs(Box, {
+        css: {
+          backgroundColor: '$textContent',
+          color: '$white',
+          borderRadius: '$sm',
+          padding: '$spacing-02',
+          flexDirection: 'column'
+        },
+        children: [jsx(Text, {
+          variant: "placeholder",
+          color: "disable",
+          css: {
+            fontSize: 11
+          },
+          children: name
+        }), jsx(Paragraph, {
+          paragraph: "shortContentRegular",
+          css: {
+            color: '$white',
+            fontSize: 12
+          },
+          children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) === null || _a === void 0 ? void 0 : _a.call(tooltip, total) : total
+        })]
+      });
+    }
+    return null;
+  };
+  return jsxs(Box, {
+    children: [title && jsx(Heading, {
+      heading: "sectionTitle",
+      children: title
+    }), jsx(Box, {
+      css: Object.assign({
+        position: 'relative',
+        width: CONTAINER_WIDTH,
+        height: CONTAINER_HEIGHT,
+        marginTop: '$spacing-07'
+      }, css),
+      children: jsx(ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        children: jsxs(PieChart$1, {
+          width: CHART_WIDTH,
+          height: CHART_HEIGHT,
+          children: [jsxs(Pie, Object.assign({
+            activeIndex: activeIndex,
+            activeShape: shape => renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef),
+            data: formattedData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: innerRadius,
+            outerRadius: outerRadius,
+            dataKey: "total",
+            onMouseEnter: x => {
+              setActiveIndex(formattedData.findIndex(y => y.name === x.name));
+              activeRef.current = true;
+            },
+            onMouseLeave: () => activeRef.current = false,
+            blendStroke: true
+          }, (label === null || label === void 0 ? void 0 : label.show) && (label === null || label === void 0 ? void 0 : label.render) && {
+            label: e => {
+              var _a;
+              return (_a = label === null || label === void 0 ? void 0 : label.render) === null || _a === void 0 ? void 0 : _a.call(label, e);
+            },
+            labelLine: false
+          }, {
+            children: [formattedData.map(item => jsx(Cell, {
+              fill: item.color || colors.chartGreen
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsx(LabelList, {
+              stroke: "0",
+              fill: colors.textWhite,
+              dataKey: (label === null || label === void 0 ? void 0 : label.dataKey) || 'total',
+              formatter: label === null || label === void 0 ? void 0 : label.formatter,
+              position: label === null || label === void 0 ? void 0 : label.position
+            })]
+          })), data.length > 0 && jsx(Tooltip, {
+            wrapperStyle: {
+              outline: 'none'
+            },
+            cursor: true,
+            content: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) === null || _a === void 0 ? void 0 : _a.call(tooltip) : jsx(CustomTooltip, {})
+          }), Boolean(legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, Object.assign({
+            height: (legend === null || legend === void 0 ? void 0 : legend.height) || 210
+          }, (legend === null || legend === void 0 ? void 0 : legend.position) !== 'bottom' && {
+            verticalAlign: 'middle',
+            align: (legend === null || legend === void 0 ? void 0 : legend.position) || 'right',
+            layout: 'vertical'
+          }, {
+            content: renderLegend(formattedData, legend, subtitle)
+          }))]
+        })
+      })
+    })]
+  });
+};
+PieChart.defaultProps = {
+  data: [],
+  avatarURL: undefined,
+  avatarAcronym: '',
+  validAvatar: false,
+  legend: {
+    show: true,
+    showTotal: true,
+    data: [],
+    position: 'right',
+    height: 210
+  },
+  isMobile: false,
+  outerRadius: 100,
+  innerRadius: 70
+};
+
+export { PieChart as default };

package/components/popover/Popover.esm.js

@@ -0,0 +1,142 @@
+import { useFloating, offset, shift, flip, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import PropTypes from 'prop-types';
+import { useState, useEffect, useContext, cloneElement, createContext } from 'react';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { foundations } from '@majoo-ui/core';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const {
+  zIndices
+} = foundations;
+const PopoverContext = /*#__PURE__*/createContext();
+const Popover = ({
+  children,
+  open = false,
+  onOpenChange,
+  placement,
+  sideOffset = 5,
+  hideOnScroll = false,
+  flip: flip$1 = true,
+  onClose
+}) => {
+  const [openState, setOpenState] = useState(false);
+  useEffect(() => {
+    setOpenState(open);
+  }, [open]);
+  useEffect(() => {
+    if (onOpenChange) onOpenChange(openState);
+  }, [openState, onOpenChange]);
+  const floatingHook = useFloating({
+    open: openState,
+    middleware: [offset(sideOffset), shift(), flip$1 && flip()],
+    onOpenChange: isOpen => {
+      setOpenState(isOpen);
+      !isOpen && onClose?.();
+    },
+    placement
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useClick(floatingHook.context, {
+    keyboardHandlers: false
+  }), useDismiss(floatingHook.context, {
+    ancestorScroll: hideOnScroll
+  })]);
+  const value = {
+    openState,
+    setOpenState,
+    floatingHook,
+    getReferenceProps,
+    getFloatingProps
+  };
+  return /*#__PURE__*/jsx(PopoverContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const PopoverTrigger = ({
+  children,
+  disabled
+}) => {
+  const {
+    floatingHook: {
+      refs
+    },
+    getReferenceProps
+  } = useContext(PopoverContext);
+  return disabled ? children : /*#__PURE__*/cloneElement(children, getReferenceProps({
+    ref: refs.setReference,
+    ...children.props
+  }));
+};
+const PopoverContent = ({
+  children,
+  isMobile,
+  style,
+  portalled
+}) => {
+  const {
+    openState,
+    floatingHook: {
+      x,
+      y,
+      strategy,
+      context,
+      refs
+    },
+    getFloatingProps
+  } = useContext(PopoverContext);
+  return openState ? /*#__PURE__*/jsx(ConditionalWrapper, {
+    condition: portalled,
+    wrapper: child => /*#__PURE__*/jsx(FloatingPortal, {
+      children: child
+    }),
+    children: /*#__PURE__*/jsx(FloatingFocusManager, {
+      context: context,
+      modal: false,
+      order: ['reference', 'content'],
+      returnFocus: false,
+      children: /*#__PURE__*/jsx("div", {
+        ...getFloatingProps({
+          ref: refs.setFloating,
+          style: {
+            position: strategy,
+            top: isMobile ? 0 : y ?? '',
+            left: isMobile ? 0 : x ?? '',
+            zIndex: zIndices.popover,
+            ...style
+          }
+        }),
+        children: children
+      })
+    })
+  }) : /*#__PURE__*/jsx(Fragment, {});
+};
+const PopoverClose = ({
+  children,
+  ...props
+}) => {
+  const {
+    setOpenState
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Flex, {
+    ...props,
+    onClick: () => {
+      if (props.onClick) props.onClick();
+      setOpenState(false);
+    },
+    children: children
+  });
+};
+Popover.propTypes = {
+  open: PropTypes.bool,
+  onOpenChange: PropTypes.func,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+  sideOffset: PropTypes.number,
+  hideOnScroll: PropTypes.bool
+};
+Popover.displayName = 'Popover';
+
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/components/progress/Progress.esm.js

@@ -0,0 +1,170 @@
+import 'react';
+import { styled } from '@stitches/react';
+import PropTypes from 'prop-types';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledProgress = styled(ProgressPrimitive.Root, {
+  position: 'relative',
+  overflow: 'hidden',
+  background: '$chartLightBrand',
+  width: 'auto',
+  height: '12px',
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '100px'
+      }
+    },
+    color: {
+      green: {
+        backgroundColor: '$chartLightGreen'
+      },
+      orange: {
+        backgroundColor: '$chartLightOrange'
+      },
+      blue: {
+        backgroundColor: '$chartLightBlue'
+      },
+      purple: {
+        backgroundColor: '$chartLightPurple'
+      },
+      yellow: {
+        backgroundColor: '$chartLightYellow'
+      },
+      red: {
+        backgroundColor: '$chartLightRed'
+      },
+      dark: {
+        backgroundColor: '$chartLightGray'
+      },
+      brand: {
+        backgroundColor: '$chartLightBrand'
+      }
+    },
+    size: {
+      xs: {
+        height: '4px'
+      },
+      sm: {
+        height: '8px'
+      },
+      m: {
+        height: '12px'
+      },
+      l: {
+        height: '16px'
+      },
+      xl: {
+        height: '20px'
+      }
+    }
+  }
+});
+const StyledIndicator = styled(ProgressPrimitive.Indicator, {
+  backgroundColor: '$chartBrand',
+  height: '60%',
+  transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',
+  variants: {
+    rounded: {
+      true: {
+        borderRadius: '100px'
+      }
+    },
+    color: {
+      green: {
+        backgroundColor: '$chartGreen'
+      },
+      orange: {
+        backgroundColor: '$chartOrange'
+      },
+      blue: {
+        backgroundColor: '$chartBlue'
+      },
+      purple: {
+        backgroundColor: '$chartPurple'
+      },
+      yellow: {
+        backgroundColor: '$chartYellow'
+      },
+      red: {
+        backgroundColor: '$chartRed'
+      },
+      dark: {
+        backgroundColor: '$chartDark'
+      },
+      brand: {
+        backgroundColor: '$chartBrand'
+      }
+    },
+    size: {
+      xs: {
+        height: '100%'
+      },
+      sm: {
+        height: '100%'
+      },
+      m: {
+        margin: "2px 2px 0"
+      },
+      l: {
+        margin: "3px 3px 0"
+      },
+      xl: {
+        margin: "4px 4px 0"
+      }
+    }
+  }
+});
+function Progress({
+  className,
+  value,
+  max,
+  getValueLabel,
+  color,
+  size,
+  rounded,
+  width,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(StyledProgress, {
+    className: className,
+    value: value,
+    max: max,
+    getValueLabel: getValueLabel,
+    color: color,
+    size: size,
+    rounded: rounded,
+    css: {
+      width: width,
+      ...props.css
+    },
+    ...props,
+    children: /*#__PURE__*/jsx(StyledIndicator, {
+      color: color,
+      size: size,
+      rounded: rounded,
+      css: {
+        width: `${value}%`
+      }
+    })
+  });
+}
+Progress.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.number,
+  max: PropTypes.number,
+  getValueLabel: PropTypes.func,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  rounded: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Progress.defaultProps = {
+  max: 100,
+  color: 'brand',
+  size: 'm',
+  rounded: true
+};
+
+export { Progress, Progress as default };