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

package/components/avatar/Avatar.esm.js

@@ -0,0 +1,83 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { UserFilled } from '@majoo-ui/icons';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const StyledAvatar = styled(AvatarPrimitive.Root, {
+  width: '32px',
+  height: '32px',
+  borderRadius: '100%',
+  backgroundColor: '$bgGray',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  userSelect: 'none'
+});
+const StyledImage = styled(AvatarPrimitive.Image, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'inherit'
+});
+const StyledFallback = styled(AvatarPrimitive.Fallback, {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: '$bgBorder',
+  color: '$textPrimary',
+  fontSize: '$label',
+  lineHeight: 1,
+  fontWeight: 600
+});
+const StyledIcon = styled('div', {
+  fontSize: '20px'
+});
+function Avatar({
+  className,
+  img,
+  children,
+  onLoadingStatusChange,
+  delayMs,
+  onClick,
+  css,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(StyledAvatar, {
+    className: className,
+    onClick: onClick,
+    css: {
+      ...css
+    },
+    ...props,
+    children: [img !== '' ? /*#__PURE__*/jsx(StyledImage, {
+      src: img,
+      alt: "pic-profile",
+      onLoadingStatusChange: onLoadingStatusChange
+    }) : null, /*#__PURE__*/jsx(StyledFallback, {
+      delayMs: delayMs,
+      children: children !== undefined ? /*#__PURE__*/jsx(Fragment, {
+        children: children
+      }) : /*#__PURE__*/jsx(StyledIcon, {
+        children: /*#__PURE__*/jsx(UserFilled, {})
+      })
+    })]
+  });
+}
+Avatar.propTypes = {
+  className: PropTypes.string,
+  img: PropTypes.string,
+  onLoadingStatusChange: PropTypes.func,
+  delayMs: PropTypes.number,
+  onClick: PropTypes.func
+};
+Avatar.defaultProps = {
+  delayMs: 0
+};
+
+export { Avatar, Avatar as default };

package/components/badge/Badge.esm.js

@@ -0,0 +1,255 @@
+import 'react';
+import { styled } from '../../config/stitches.config.esm.js';
+import Text from '../text/Text.esm.js';
+
+const Badge = styled(Text, {
+  // Reset
+  alignItems: 'center',
+  appearance: 'none',
+  borderWidth: '0',
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  flexShrink: 0,
+  fontFamily: 'inherit',
+  fontSize: '$caption',
+  fontWeight: 600,
+  justifyContent: 'center',
+  lineHeight: '1',
+  verticalAlign: 'middle',
+  outline: 'none',
+  padding: '$spacing-01 $spacing-02',
+  textDecoration: 'none',
+  userSelect: 'none',
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    pointerEvents: 'none',
+    color: '$textDisable'
+  },
+  // Custom
+  borderRadius: '$md',
+  color: '$textPrimary',
+  whiteSpace: 'nowrap',
+  fontVariantNumeric: 'tabular-nums',
+  backgroundColor: '$btnDisable',
+  variants: {
+    colorScheme: {
+      gray: {
+        subtleColor: 'gray'
+      },
+      primary: {
+        subtleColor: 'primary'
+      },
+      secondary: {
+        subtleColor: 'secondary'
+      },
+      blue: {
+        subtleColor: 'blue'
+      },
+      orange: {
+        subtleColor: 'orange'
+      },
+      red: {
+        subtleColor: 'red'
+      },
+      purple: {
+        subtleColor: 'purple'
+      },
+      green: {
+        subtleColor: 'green'
+      }
+    },
+    badgeVariant: {
+      outline: {
+        backgroundColor: 'transparent',
+        border: '1px solid CurrentColor'
+      },
+      solid: {
+        color: '$white'
+      },
+      subtle: {},
+      alpha: {}
+    }
+  },
+  compoundVariants: [{
+    badgeVariant: 'outline',
+    css: {
+      backgroundColor: 'transparent',
+      border: '1px solid CurrentColor'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'outline',
+    css: {
+      color: '$gray500'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'outline',
+    css: {
+      color: '$bgBrand'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'outline',
+    css: {
+      color: '$secondary500'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'outline',
+    css: {
+      color: '$blue500'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'outline',
+    css: {
+      color: '$orange500'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'outline',
+    css: {
+      color: '$red500'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'outline',
+    css: {
+      color: '$purple500'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'outline',
+    css: {
+      color: '$green500'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'outline',
+    css: {
+      color: '$borderActive'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$gray500'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$bgBrand'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$secondary500'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$blue500'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$orange500'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$red500'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$purple500'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$green500'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$borderActive'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-gray500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-bgBrand) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-secondary500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-blue500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-orange500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-red500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-purple500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-green500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-borderActive) 50%, transparent)'
+    }
+  }],
+  defaultVariants: {
+    colorScheme: 'grey',
+    badgeVariant: 'subtle'
+  }
+});
+Badge.defaultProps = {
+  as: 'span',
+  colorScheme: 'grey',
+  badgeVariant: 'subtle'
+};
+Badge.displayName = 'Badge';
+
+export { Badge as default };

package/components/banner/Banner.esm.js

@@ -0,0 +1,341 @@
+import * as React from 'react';
+import { CloseOutline } from '@majoo-ui/icons';
+import PropTypes from 'prop-types';
+import { colors, styled } from '../../config/stitches.config.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 { Link } from '../link/Link.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const Context = /*#__PURE__*/React.createContext();
+const StyledBanner = styled(Flex, {
+  maxWidth: '100%',
+  padding: '$spacing-03 $spacing-05',
+  textAlign: 'left',
+  borderRadius: 8,
+  pointer: 'default',
+  variants: {
+    bannerBlock: {
+      true: {
+        width: '100%'
+      },
+      false: {
+        width: 'fit-content'
+      }
+    },
+    variant: {
+      info: {
+        backgroundColor: '$bgNew',
+        border: '1px solid $hlNews'
+      },
+      warning: {
+        backgroundColor: '$bgProcess',
+        border: '1px solid $hlPending'
+      },
+      success: {
+        backgroundColor: '$bgSuccess',
+        border: '1px solid $hlSuccess'
+      },
+      failed: {
+        backgroundColor: '$bgFailed',
+        border: '1px solid $hlFailed'
+      },
+      pending: {
+        backgroundColor: '$bgProcess',
+        border: '1px solid $hlPending'
+      }
+    },
+    hasAction: {
+      true: {
+        cursor: 'pointer'
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  }
+});
+const Title = styled(Heading, {
+  lineHeight: '$long-content-regular',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '956px',
+  marginInlineEnd: 12,
+  color: '$textPrimary !important'
+});
+const Description = styled(Paragraph, {
+  lineHeight: '$long-content-regular',
+  flex: 1,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '956px',
+  marginInlineEnd: 12
+});
+const CloseButton = styled(Flex, {
+  cursor: 'pointer',
+  size: '20px',
+  borderRadius: '$round',
+  '&:hover': {
+    backgroundColor: 'rgba(0, 0, 0, .05)'
+  },
+  alignSelf: 'start',
+  alignItems: 'center',
+  justifyContent: 'center',
+  variants: {
+    closeCenter: {
+      true: {
+        alignSelf: 'center'
+      }
+    }
+  }
+});
+const BannerTitle = props => /*#__PURE__*/jsx(Title, {
+  heading: "sectionTitle",
+  ...props,
+  children: props.children
+});
+BannerTitle.propTypes = {
+  /**
+   Additional styles of title
+  */
+  css: PropTypes.object,
+  /**
+   Title of the Banner to be displayed
+  */
+  children: PropTypes.string
+};
+const BannerDescription = props => /*#__PURE__*/jsx(Description, {
+  paragraph: "longContentRegular",
+  color: "secondary",
+  ...props,
+  children: props.children
+});
+BannerDescription.propTypes = {
+  /**
+   Additional styles of description
+  */
+  css: PropTypes.object,
+  /**
+   Description of the Banner to be displayed
+  */
+  children: PropTypes.string
+};
+const BannerLink = ({
+  css,
+  link,
+  children,
+  variant
+}) => {
+  function generateVariant(params) {
+    switch (params) {
+      case 'warning':
+        return 'primary';
+      case 'pending':
+        return 'primary';
+      case 'failed':
+        return 'failed';
+      default:
+        return 'success';
+    }
+  }
+  return /*#__PURE__*/jsx(Context.Consumer, {
+    children: value => /*#__PURE__*/jsx(Link, {
+      css: {
+        marginInlineEnd: '$spacing-04',
+        ...css
+      },
+      href: link,
+      color: variant ? generateVariant(variant) : generateVariant(value.variant),
+      children: children
+    })
+  });
+};
+BannerLink.propTypes = {
+  /**
+   The purpose of a clickable link, presented in url
+  */
+  link: PropTypes.string,
+  /**
+   Text of BannerLink to be displayed
+  */
+  children: PropTypes.string,
+  /**
+   Additional theme of BannerLink is presented by color variants
+  */
+  variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed'])
+};
+BannerLink.defaultProps = {
+  children: 'Learn more'
+};
+const BannerClose = () => /*#__PURE__*/jsx(Context.Consumer, {
+  children: value => /*#__PURE__*/jsx(CloseButton, {
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      value?.onRemove();
+    },
+    children: /*#__PURE__*/jsx(CloseOutline, {
+      color: colors.iconSecondary,
+      size: "16px"
+    })
+  })
+});
+const SingleTagBanner = props => {
+  return /*#__PURE__*/jsxs(Flex, {
+    gap: 2,
+    direction: "column",
+    children: [/*#__PURE__*/jsxs(Flex, {
+      children: [/*#__PURE__*/jsxs(Flex, {
+        gap: 3,
+        direction: "row",
+        children: [props?.icon && /*#__PURE__*/jsx(Flex, {
+          css: {
+            marginTop: '-2px'
+          },
+          children: props?.icon?.()
+        }), /*#__PURE__*/jsxs(Flex, {
+          gap: 2,
+          direction: "column",
+          css: {
+            flex: 1,
+            marginRight: '$spacing-04'
+          },
+          children: [props.title && /*#__PURE__*/jsx(BannerTitle, {
+            children: props.title
+          }), props.description && /*#__PURE__*/jsx(BannerDescription, {
+            children: props.description
+          })]
+        })]
+      }), props?.onRemove && /*#__PURE__*/jsx(CloseButton, {
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          props?.onRemove();
+        },
+        closeCenter: !props.title && !props.link,
+        children: /*#__PURE__*/jsx(CloseOutline, {
+          color: colors.iconSecondary,
+          size: "16px"
+        })
+      })]
+    }), props.link && /*#__PURE__*/jsx(BannerLink, {
+      css: {
+        alignSelf: 'end',
+        marginInlineEnd: 'unset'
+      },
+      link: props.link,
+      variant: props.variant,
+      children: props.linkText
+    })]
+  });
+};
+const Banner = ({
+  title,
+  description,
+  variant,
+  link,
+  linkText,
+  onClick,
+  onRemove,
+  children,
+  bannerBlock,
+  icon,
+  ...rest
+}) => {
+  return /*#__PURE__*/jsx(StyledBanner, {
+    variant: variant,
+    hasAction: !!onClick,
+    onClick: onClick,
+    bannerBlock: bannerBlock,
+    ...rest,
+    children: children ? /*#__PURE__*/jsx(Flex, {
+      direction: "row",
+      gap: 3,
+      align: "center",
+      wrap: "wrap",
+      css: {
+        maxWidth: '100vw',
+        position: 'relative',
+        flex: 1,
+        overflowX: 'hidden'
+      },
+      children: /*#__PURE__*/jsx(Context.Provider, {
+        value: {
+          onRemove,
+          variant
+        },
+        children: children
+      })
+    }) : /*#__PURE__*/jsx(SingleTagBanner, {
+      title: title,
+      description: description,
+      variant: variant,
+      icon: icon,
+      link: link,
+      linkText: linkText,
+      onClick: onClick,
+      onRemove: onRemove
+    })
+  });
+};
+Banner.displayName = 'Banner';
+BannerTitle.displayName = 'BannerTitle';
+BannerDescription.displayName = 'BannerDescription';
+Banner.propTypes = {
+  /**
+   Title of banner to be displayed
+  */
+  title: PropTypes.string,
+  /**
+   Description of banner to be displayed
+  */
+  description: PropTypes.string,
+  /**
+   The banner theme is presented in color variants
+  */
+  variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed']),
+  /**
+   The purpose of a clickable link, presented in url
+  */
+  link: PropTypes.string,
+  /**
+   Text of button link to be displayed
+  */
+  linkText: PropTypes.string,
+  /**
+  Icon of banner to be displayed
+  */
+  icon: PropTypes.func,
+  /**
+   Clickable event handler
+  */
+  onClick: PropTypes.func,
+  /**
+   Closable event handler
+  */
+  onRemove: PropTypes.func,
+  /**
+  Block type banner to display in full width
+  */
+  bannerBlock: PropTypes.bool
+};
+Banner.defaultProps = {
+  variant: 'info'
+};
+
+export { BannerClose, BannerDescription, BannerLink, BannerTitle, Banner as default };