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

package/components/barChart/BarChart.esm.js

@@ -0,0 +1,212 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, Cell, LabelList } from 'recharts';
+import { foundations } from '@majoo-ui/core';
+
+const {
+  colors
+} = foundations;
+const renderLegend = (formattedData, legend, subtitle, tickFormatter) => jsxs(Box, {
+  css: {
+    marginTop: '$spacing-09'
+  },
+  children: [subtitle && jsx(Flex, {
+    justify: "center",
+    children: jsx(Heading, {
+      css: {
+        marginBottom: '$spacing-06'
+      },
+      heading: "sectionTitle",
+      children: subtitle
+    })
+  }), formattedData.length > 0 && jsx(Flex, {
+    direction: "column",
+    gap: 5,
+    children: formattedData.map((data, index) => {
+      var _a, _b;
+      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.showTotal && jsx(Text, {
+            variant: "label",
+            color: "secondary",
+            children: tickFormatter ? tickFormatter === null || tickFormatter === void 0 ? void 0 : tickFormatter((_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total) : (_b = formattedData[index]) === null || _b === void 0 ? void 0 : _b.total
+          })]
+        }), jsx(Separator, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        })]
+      }, index);
+    })
+  })]
+});
+const DEFAULT_DATA = [{
+  name: 'none',
+  total: 0,
+  color: colors.chartGreen
+}];
+function BarChartComponent({
+  css,
+  data,
+  legend,
+  title,
+  subtitle,
+  tooltip,
+  direction,
+  tickFormatter,
+  label,
+  yAxis
+}) {
+  var _a, _b;
+  const isHorizontal = direction === 'horizontal';
+  const MIN_HEIGHT = 350;
+  const MIN_WIDTH = 500;
+  const formattedData = data.length ? data : DEFAULT_DATA;
+  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({
+        width: MIN_WIDTH,
+        height: MIN_HEIGHT,
+        marginTop: '$spacing-07'
+      }, css),
+      children: jsx(ResponsiveContainer, {
+        children: jsxs(BarChart, {
+          width: MIN_WIDTH,
+          height: MIN_HEIGHT,
+          data: formattedData,
+          layout: isHorizontal ? 'vertical' : 'horizontal',
+          children: [jsx(CartesianGrid, {
+            stroke: colors.gray150,
+            vertical: isHorizontal,
+            horizontal: !isHorizontal
+          }), isHorizontal && jsx(XAxis, Object.assign({
+            type: "number",
+            stroke: colors.textSecondary,
+            fontSize: 12,
+            axisLine: false
+          }, isHorizontal && {
+            tickFormatter
+          })), jsx(YAxis, Object.assign({
+            axisLine: false,
+            type: isHorizontal ? 'category' : 'number',
+            dataKey: isHorizontal ? 'name' : 'total',
+            width: isHorizontal ? 100 : 50,
+            hide: !(yAxis === null || yAxis === void 0 ? void 0 : yAxis.show),
+            stroke: colors.textSecondary,
+            fontSize: 12
+          }, !isHorizontal && {
+            tickFormatter
+          })), data.length > 0 && jsx(Tooltip, {
+            wrapperStyle: {
+              outline: 'none'
+            },
+            cursor: {
+              fill: 'transparent'
+            },
+            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, {})
+          }), (legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, {
+            content: renderLegend(formattedData, legend, subtitle, tickFormatter)
+          }), jsxs(Bar, {
+            dataKey: "total",
+            barSize: 12,
+            radius: 50,
+            children: [formattedData.map(item => jsx(Cell, {
+              fill: item.color || colors.chartGreen
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && jsx(LabelList, {
+              style: {
+                marginLeft: '-8px'
+              },
+              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) || 'top',
+              content: (_b = label === null || label === void 0 ? void 0 : label.render) === null || _b === void 0 ? void 0 : _b.call(label),
+              fill: colors.textDisable,
+              fontSize: 12
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+BarChartComponent.defaultProps = {
+  data: [],
+  legend: {
+    show: true,
+    showTotal: true
+  },
+  yAxis: {
+    show: true
+  }
+};
+
+export { BarChartComponent as default };

package/components/breadcrumb/Breadcrumb.esm.js

@@ -0,0 +1,65 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Text from '../text/Text.esm.js';
+import { jsx } from 'react/jsx-runtime';
+
+const BreadcrumbStyle = styled('nav', {
+  wordWrap: 'break-word',
+  '& li+li:before': {
+    marginInline: '0.5rem',
+    content: '/',
+    fontSize: 12,
+    color: '$textBrand'
+  },
+  '& li:last-child:before': {
+    color: '$textSecondary'
+  }
+});
+const Ol = styled('ol', {
+  margin: 0,
+  padding: 0
+});
+const BreadcrumbItem = styled('li', {
+  display: 'inline-flex',
+  alignItems: 'center'
+});
+const BreadcrumbLinkStyle = styled(Text, {
+  '&:hover': {
+    textDecoration: 'underline'
+  },
+  color: '$textBrand',
+  variants: {
+    isCurrentPage: {
+      true: {
+        color: '$textSecondary'
+      }
+    }
+  }
+});
+BreadcrumbLinkStyle.defaultProps = {
+  variant: 'breadcrumb',
+  as: 'a'
+};
+const BreadcrumbLinkBase = props => {
+  const aria = props.isCurrentPage && {
+    'aria-current': 'page'
+  };
+  return /*#__PURE__*/jsx(BreadcrumbLinkStyle, {
+    ...props,
+    ...aria
+  });
+};
+const BreadcrumbBase = ({
+  children,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(BreadcrumbStyle, {
+    ...rest,
+    "aria-label": "breadcrumb",
+    children: /*#__PURE__*/jsx(Ol, {
+      children: children
+    })
+  });
+};
+
+export { BreadcrumbBase, BreadcrumbItem, BreadcrumbLinkBase, BreadcrumbLinkStyle, BreadcrumbStyle };

package/components/breadcrumb/index.esm.js

@@ -0,0 +1,19 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { BreadcrumbBase, BreadcrumbLinkBase } from './Breadcrumb.esm.js';
+export { BreadcrumbItem } from './Breadcrumb.esm.js';
+
+const Breadcrumb = _a => {
+  var {
+      children
+    } = _a,
+    rest = __rest(_a, ["children"]);
+  return jsx(BreadcrumbBase, Object.assign({}, rest, {
+    children: children
+  }));
+};
+const BreadcrumbLink = props => {
+  return jsx(BreadcrumbLinkBase, Object.assign({}, props));
+};
+
+export { Breadcrumb, BreadcrumbLink };

package/components/button/Button.esm.js

@@ -0,0 +1,331 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+
+const ButtonPrimary = {
+  backgroundColor: '$btnPrimary',
+  color: '$textWhite',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$btnHoverPrimary'
+  },
+  '&:active': {
+    backgroundColor: '$btnActivePrimary'
+  }
+};
+const PrimarySecondary = {
+  backgroundColor: '$btnSecondary',
+  border: '1px solid $btnPrimary',
+  color: '$textBrand',
+  '&:hover': {
+    backgroundColor: '$btnHoverSecondary',
+    border: '1px solid $btnPrimary',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$btnActiveSecondary',
+    border: '1px solid $btnPrimary'
+  }
+};
+const GhostButton = {
+  backgroundColor: '$btnSecondary',
+  color: '$textBrand',
+  border: 'none',
+  '&:focus': {
+    outline: 'none'
+  },
+  '&:hover': {
+    backgroundColor: '$btnHoverSecondary',
+    outline: '1px solid $btnHoverSecondary',
+    color: '$textBrand'
+  },
+  '&:active': {
+    backgroundColor: '$btnActiveSecondary',
+    outline: '1px solid $btnPrimary'
+  }
+};
+const ButtonNegative = {
+  backgroundColor: '$btnNegative',
+  color: '$textWhite',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$btnHoverNegative'
+  },
+  '&:active': {
+    backgroundColor: '$btnActiveNegative'
+  }
+};
+const ButtonNegativeSecondary = {
+  backgroundColor: '$bgWhite',
+  border: '1px solid $btnNegative',
+  color: '$textRed',
+  '&:hover': {
+    backgroundColor: '$btnHoverNegativeSecondary',
+    border: '1px solid $textRed'
+  },
+  '&:active': {
+    backgroundColor: '$btnActiveNegativeSecondary',
+    border: '1px solid $textRed'
+  }
+};
+const ButtonNegativeGhost = {
+  backgroundColor: '$btnSecondary',
+  color: '$textRed',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$btnHoverNegativeSecondary',
+    outline: '1px solid $btnHoverNegativeSecondary',
+    color: '$textRed'
+  },
+  '&:active': {
+    backgroundColor: '$btnActiveNegativeSecondary',
+    outline: '1px solid $btnNegative'
+  }
+};
+const ButtonGhostSecondary = {
+  backgroundColor: '$btnSecondary',
+  color: '$textSecondary',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$gray100',
+    outline: '1px solid $gray100',
+    color: '$textSecondary'
+  },
+  '&:active': {
+    backgroundColor: '$gray150',
+    outline: '1px solid $gray150'
+  }
+};
+const ButtonHeaderMenu = {
+  backgroundColor: '$bgWhite',
+  border: '1px solid $bgBorder',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$gray50',
+    border: '1px solid $bgBorder',
+    color: '$textPrimary'
+  },
+  '&:active': {
+    backgroundColor: '$gray50'
+  }
+};
+const ButtonTableMenu = {
+  backgroundColor: '$bgWhite',
+  color: '$textPrimary',
+  padding: '$spacing-04 $spacing-05',
+  width: '180px',
+  textAlign: 'left',
+  border: 'none',
+  borderRadius: 0,
+  '&:focus': {
+    outline: 'none'
+  },
+  '&:hover': {
+    backgroundColor: '$gray50'
+  },
+  '&:active': {
+    backgroundColor: '$gray100'
+  }
+};
+const StyledIcon = styled('div', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '& svg': {
+    verticalAlign: 'middle'
+  }
+});
+const StyledIconLeft = styled('div', {
+  marginRight: '$spacing-03',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const StyledIconRight = styled('div', {
+  marginLeft: '$spacing-03',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const ButtonPrimitive = styled('button', {
+  margin: 0,
+  display: 'block',
+  verticalAlign: 'middle',
+  fontWeight: 600,
+  width: 'auto',
+  height: '40px',
+  userSelect: 'none',
+  borderRadius: '$md',
+  cursor: 'pointer',
+  fontSize: '14px',
+  textAlign: 'center',
+  lineHeight: '20px',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  '&:focus': {
+    outline: '2px solid $borderFocus'
+  },
+  '&:disabled': {
+    border: '1px solid $btnDisable',
+    backgroundColor: '$btnDisable',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&:hover': {
+      backgroundColor: '$btnDisable',
+      border: '1px solid $btnDisable',
+      color: '$textDisable'
+    },
+    '&:active': {
+      backgroundColor: '$btnDisable',
+      border: '1px solid $btnDisable'
+    }
+  },
+  variants: {
+    /**
+     * Specify the button type
+     */
+    buttonType: {
+      primary: Object.assign({}, ButtonPrimary),
+      secondary: Object.assign({}, PrimarySecondary),
+      ghost: Object.assign({}, GhostButton),
+      'ghost-secondary': Object.assign({}, ButtonGhostSecondary),
+      negative: Object.assign({}, ButtonNegative),
+      'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
+      'negative-ghost': Object.assign({}, ButtonNegativeGhost),
+      headerMenu: Object.assign({}, ButtonHeaderMenu),
+      tableMenu: Object.assign({}, ButtonTableMenu)
+    },
+    /**
+     * Specify the button size
+     */
+    size: {
+      xs: {
+        minWidth: '70px',
+        height: '28px',
+        padding: '1px 12px'
+        // padding: '4px 12px',
+      },
+      sm: {
+        minWidth: '70px',
+        height: '32px',
+        padding: '3px 12px'
+        // padding: '6px 12px',
+      },
+      md: {
+        minWidth: '70px',
+        height: '40px',
+        padding: '7px 12px'
+        // padding: '10px 12px',
+      },
+      lg: {
+        minWidth: '84px',
+        height: '48px',
+        padding: '11px 16px'
+        // padding: '14px 16px',
+      }
+    },
+    /**
+     * Specify the button icon size
+     */
+    iconSize: {
+      xs: {
+        minWidth: '28px',
+        height: '28px',
+        padding: '3px',
+        borderRadius: '$md'
+      },
+      sm: {
+        minWidth: '32px',
+        height: '32px',
+        padding: '5px',
+        borderRadius: '$md'
+      },
+      md: {
+        minWidth: '40px',
+        height: '40px',
+        padding: '7px',
+        borderRadius: '$md'
+      },
+      lg: {
+        minWidth: '48px',
+        height: '48px',
+        padding: '11px',
+        borderRadius: '$md'
+      }
+    },
+    /**
+     * Hidden the button
+     */
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    },
+    withIcon: {
+      true: {
+        display: 'inline-flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@md': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@md': {
+          display: 'inherit !important'
+        }
+      }
+    }
+  }
+});
+const Button = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      children,
+      type,
+      buttonType = 'primary',
+      size = 'md',
+      disabled = false,
+      block = false,
+      width,
+      leftIcon,
+      rightIcon,
+      icon = false,
+      iconSize,
+      mobileOnly,
+      desktopOnly
+    } = _a,
+    props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize", "mobileOnly", "desktopOnly"]);
+  return jsxs(ButtonPrimitive, Object.assign({
+    type: type,
+    buttonType: buttonType,
+    size: size,
+    withIcon: Boolean(icon || leftIcon || rightIcon),
+    iconSize: icon ? size : undefined,
+    disabled: disabled,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    css: Object.assign(Object.assign({}, props.css), {
+      width: block ? '100%' : width
+    }),
+    ref: forwardedRef
+  }, props, {
+    children: [leftIcon && jsx(StyledIconLeft, {
+      children: leftIcon
+    }), icon ? jsx(StyledIcon, {
+      children: children
+    }) : children, rightIcon && jsx(StyledIconRight, {
+      children: rightIcon
+    })]
+  }));
+});
+
+export { Button, ButtonPrimitive, Button as default };