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

package/components/tag/Tag.esm.js

@@ -0,0 +1,161 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { colors, styled } from '../../config/stitches.config.esm.js';
+import { CloseOutline } from '@majoo-ui/icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TagWrapper = styled('div', {
+  boxSizing: 'border-box',
+  listStyle: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: 'auto',
+  width: 'auto',
+  justifyContent: 'center',
+  fontSize: '12px',
+  fontWeight: 500,
+  lineHeight: '16px',
+  borderRadius: '$sm',
+  background: '$bgGray',
+  color: '$textPrimary',
+  variants: {
+    size: {
+      sm: {
+        minWidth: '45px',
+        maxWidth: '118px',
+        height: '20px',
+        padding: '2px 4px'
+      },
+      lg: {
+        minWidth: '53px',
+        maxWidth: '126px',
+        height: '24px',
+        padding: '4px 8px'
+      }
+    },
+    disabled: {
+      true: {
+        background: '$bgInactive',
+        cursor: 'not-allowed',
+        color: '$textDisable'
+      }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    },
+    type: {
+      success: {
+        background: '$bgSuccess',
+        color: '$textGreen'
+      },
+      error: {
+        background: '$bgFailed',
+        color: '$textRed'
+      },
+      primary: {
+        background: '$bgAccent',
+        color: '$textBrand'
+      },
+      varian: {
+        background: '$bgWhite',
+        color: '$textBrand',
+        border: '1px solid $bgBorder'
+      }
+    }
+  }
+});
+const TagComponent = styled('span', {
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+const StyledIconRight = styled('div', {
+  marginLeft: '6px',
+  display: 'flex',
+  verticalAlign: 'middle',
+  alignItems: 'center',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        background: '$bgInactive',
+        cursor: 'not-allowed'
+      }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const StyledIconLeft = styled('div', {
+  margin: '0 3px',
+  display: 'flex',
+  verticalAlign: 'middle',
+  alignItems: 'center',
+  color: 'inherit'
+});
+const Tag = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  children,
+  onClick,
+  size,
+  icon,
+  isRemovable,
+  disabled,
+  type,
+  onRemove,
+  readOnly,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(TagWrapper, {
+    ref: ref,
+    onClick: onClick,
+    size: size,
+    disabled: disabled,
+    type: type,
+    readOnly: readOnly,
+    css: {
+      ...props.css
+    },
+    ...props,
+    children: [icon !== undefined ? /*#__PURE__*/jsx(StyledIconLeft, {
+      children: icon
+    }) : null, /*#__PURE__*/jsx(TagComponent, {
+      children: children
+    }), isRemovable ? /*#__PURE__*/jsx(StyledIconRight, {
+      disabled: disabled,
+      onClick: onRemove,
+      readOnly: readOnly,
+      children: /*#__PURE__*/jsx(CloseOutline, {
+        size: 16,
+        color: colors.iconSecondary,
+        style: {
+          verticalAlign: 'middle'
+        }
+      })
+    }) : null]
+  });
+});
+Tag.propTypes = {
+  size: PropTypes.string,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  icon: PropTypes.element,
+  isRemovable: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  readOnly: PropTypes.bool
+};
+Tag.defaultProps = {
+  size: 'sm',
+  isRemovable: false,
+  disabled: false,
+  readOnly: false
+};
+
+export { Tag, Tag as default };

package/components/tagList/TagList.esm.js

@@ -0,0 +1,90 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import { Separator } from '../separator/Separator.esm.js';
+import Text from '../text/Text.esm.js';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '../tag/Tag.esm.js';
+
+const TagWrapper = styled(Box, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  padding: '$spacing-03 0 $spacing-02 0',
+  gap: '5px'
+});
+function TagList({
+  selectedItems,
+  onRemoveItem,
+  counterLabel
+}) {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
+  const [showAllTags, setShowAllTags] = useState(false);
+  return jsxs(React__default.Fragment, {
+    children: [jsx(TagWrapper, {
+      children: selectedItems.filter(item => item.id !== '!all').filter((_, idx) => {
+        if (showAllTags) {
+          return true;
+        }
+        return idx < 5;
+      }).map((selectedItem, index) => jsx(Tag, {
+        isRemovable: true,
+        size: "lg",
+        onRemove: e => {
+          e.stopPropagation();
+          return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(selectedItem);
+        },
+        children: selectedItem.name
+      }, `selected-item-${index}`))
+    }), selectedItems.length > 5 && jsxs(Flex, {
+      align: "center",
+      justify: "center",
+      onClick: () => setShowAllTags(current => !current),
+      css: {
+        padding: '$spacing-04 0 $spacing-02'
+      },
+      children: [jsx(Separator, {}), jsxs(Flex, {
+        align: "center",
+        justify: "center",
+        gap: 3,
+        css: {
+          cursor: 'pointer',
+          userSelect: 'none',
+          padding: '$spacing-02 $spacing-04',
+          boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
+        },
+        children: [showAllTags ? jsx(ChevronUpOutline, {
+          color: colors.iconSecondary
+        }) : jsx(ChevronDownOutline, {
+          color: colors.iconSecondary
+        }), jsx(Paragraph, {
+          css: {
+            fontWeight: 600,
+            whiteSpace: 'nowrap'
+          },
+          color: "secondary",
+          children: showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua')
+        })]
+      }), jsx(Separator, {})]
+    }), jsxs(Text, {
+      variant: "helper",
+      color: "brand",
+      css: {
+        marginTop: '$spacing-03 !important'
+      },
+      children: [selectedItems.length, " ", counterLabel || t('labelCounterText', 'Item terpilih')]
+    })]
+  });
+}
+
+export { TagList as default };

package/components/tagStatus/TagStatus.esm.js

@@ -0,0 +1,134 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '../../config/stitches.config.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TagWrapper = styled('div', {
+  boxSizing: 'border-box',
+  fontSize: '12px',
+  listStyle: 'none',
+  display: 'inline-flex',
+  height: 'auto',
+  width: 'auto',
+  justifyContent: 'center',
+  lineHeight: '16px',
+  borderRadius: '33px',
+  color: '$textPrimary',
+  fontWeight: 600,
+  variants: {
+    size: {
+      sm: {
+        minWidth: '49px',
+        maxWidth: '109px',
+        height: '22px',
+        padding: '2px 4px'
+      },
+      lg: {
+        minWidth: '57px',
+        maxWidth: '117px',
+        height: '26px',
+        padding: '4px 8px'
+      }
+    },
+    type: {
+      default: {
+        background: '$bgInactive'
+      },
+      new: {
+        background: '$bgNew'
+      },
+      process: {
+        background: '$bgProcess'
+      },
+      success: {
+        background: '$bgSuccess'
+      },
+      error: {
+        background: '$bgFailed'
+      },
+      inactive: {
+        background: '$bgInactive'
+      },
+      pending: {
+        background: '$bgPending'
+      }
+    }
+  }
+});
+const TagComponent = styled('span', {
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+const StyledIconLeft = styled('div', {
+  margin: '5px 3px 5px 0px',
+  display: 'inline-flex',
+  verticalAlign: 'middle',
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  variants: {
+    type: {
+      default: {
+        background: '$iconPrimary'
+      },
+      new: {
+        background: '$hlNews'
+      },
+      process: {
+        background: '$hlProcess'
+      },
+      success: {
+        background: '$hlSuccess'
+      },
+      error: {
+        background: '$hlFailed'
+      },
+      inactive: {
+        background: '$iconDisable'
+      },
+      pending: {
+        background: '$hlPending'
+      }
+    }
+  }
+});
+const TagStatus = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  children,
+  onClick,
+  type,
+  size,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(TagWrapper, {
+    ref: ref,
+    className: className,
+    onClick: onClick,
+    type: type,
+    size: size,
+    css: {
+      ...props.css
+    },
+    ...props,
+    children: [/*#__PURE__*/jsx(StyledIconLeft, {
+      type: type
+    }), /*#__PURE__*/jsx(TagComponent, {
+      children: children
+    })]
+  });
+});
+TagStatus.propTypes = {
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  size: PropTypes.string,
+  type: PropTypes.string
+  // leftIcon: PropTypes.element,
+};
+TagStatus.defaultProps = {
+  size: 'sm',
+  type: 'default'
+};
+
+export { TagStatus, TagStatus as default };

package/components/text/Text.esm.js

@@ -0,0 +1,140 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+
+const Text = styled('p', {
+  margin: 0,
+  // padding: 0,
+  variants: {
+    variant: {
+      link: {
+        fontSize: '$link',
+        lineHeight: '$link',
+        letterSpacing: '$link',
+        fontWeight: '400'
+      },
+      contentButton: {
+        fontSize: '$content-button',
+        lineHeight: '$content-button',
+        letterSpacing: '$content-button',
+        fontWeight: '600'
+      },
+      placeholder: {
+        fontSize: '$placeholder',
+        lineHeight: '$placeholder',
+        letterSpacing: '$placeholder',
+        fontWeight: '400'
+      },
+      breadcrumb: {
+        fontSize: '$breadcrumb',
+        lineHeight: '$breadcrumb',
+        letterSpacing: '$breadcrumb',
+        fontWeight: '500'
+      },
+      label: {
+        fontSize: '$label',
+        lineHeight: '$label',
+        letterSpacing: '$label',
+        fontWeight: '500'
+      },
+      status: {
+        fontSize: '$status',
+        lineHeight: '$status',
+        letterSpacing: '$status',
+        fontWeight: '600'
+      },
+      helper: {
+        fontSize: '$helper',
+        lineHeight: '$helper',
+        letterSpacing: '$helper',
+        fontWeight: '400'
+      },
+      caption: {
+        fontSize: '$caption',
+        lineHeight: '$caption',
+        letterSpacing: '$caption',
+        fontWeight: '400'
+      }
+    },
+    color: {
+      primary: {
+        color: '$textPrimary'
+      },
+      secondary: {
+        color: '$textSecondary'
+      },
+      disable: {
+        color: '$textDisable'
+      },
+      green: {
+        color: '$textGreen'
+      },
+      red: {
+        color: '$textRed'
+      },
+      white: {
+        color: '$textWhite'
+      },
+      brand: {
+        color: '$textBrand'
+      }
+    },
+    uppercase: {
+      true: {
+        textTransform: 'uppercase'
+      }
+    },
+    isTruncated: {
+      true: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+      }
+    },
+    align: {
+      justify: {
+        textAlign: 'justify'
+      },
+      center: {
+        textAlign: 'center'
+      },
+      right: {
+        textAlign: 'right'
+      },
+      left: {
+        textAlign: 'left'
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    as: 'p',
+    align: 'left'
+  }
+});
+const TextVariantsEnum = ['link', 'contentButton', 'placeholder', 'breadcrumb', 'label', 'status', 'helper', 'caption'];
+Text.propTypes = {
+  variant: PropTypes.oneOf(TextVariantsEnum),
+  uppercase: PropTypes.bool,
+  isTruncated: PropTypes.bool
+};
+Text.defaultProps = {
+  as: 'p'
+};
+Text.displayName = 'Text';
+
+export { TextVariantsEnum, Text as default };