@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

package/src/together/components/atoms/cardLink/index.tsx

@@ -1,149 +0,0 @@
-import React, {
-  CSSProperties,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import { Heading } from 'components/atoms/heading'
-import { Text } from 'components/atoms/text'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { PATHS } from '../../../api/paths'
-import { callApi, getApiPath } from '../../../api/utils'
-import { DEFAULT_IMG } from '../../../interfaces/constants'
-import { StyledCardLink } from './index.styled'
-
-export type Props = {
-  title?: string
-  url: string
-  image?: string
-  logo?: string
-  className?: string
-  noRefetch?: boolean
-  style?: CSSProperties
-}
-
-const CardLink = ({
-  title,
-  url,
-  image,
-  logo,
-  className,
-  style,
-  noRefetch,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const [hideLogo, setHideLogo] = useState(false)
-
-  const noRefetchRef = useRef(noRefetch)
-  noRefetchRef.current = noRefetch
-  const [previewData, setPreviewData] = useState<{
-    title?: string
-    url?: string
-    image?: string
-    isFetching?: boolean
-    logo?: string
-  } | null>(null)
-  useEffect(() => {
-    ;(async () => {
-      if (noRefetchRef.current) return
-      if (!url) return setPreviewData(null)
-      setPreviewData((_data) => ({
-        ..._data,
-        isFetching: true,
-      }))
-      callApi(
-        getApiPath(PATHS.FETCH_PREVIEW, {
-          _locale: locale,
-        }),
-        'POST',
-        {
-          data: {
-            link: url,
-          },
-        },
-      )
-        .then((res) => {
-          setHideLogo(false)
-          setPreviewData({
-            title: res?.data?.title,
-            url,
-            image: res?.data?.image || res?.data?.logo,
-            // logo: meta.logo,
-          })
-        })
-        .catch(() => {
-          setPreviewData(null)
-        })
-    })()
-  }, [url])
-
-  const displayImage = previewData?.image || image
-  const displayTitle = previewData?.title || title
-  const displayLogo = previewData?.logo || logo
-  const displayUrl = previewData?.url || url
-  const urlParts = displayUrl
-    .replace('http://', '')
-    .replace('https://', '')
-    .split(/[/?#]/)
-  const domain = urlParts[0]
-  const showDefaultRef = useRef(false)
-  return (
-    <StyledCardLink
-      data-is-marrybaby={isMarryBaby}
-      className={`${className} no-replace-click`}
-      style={style}
-    >
-      <a href={displayUrl} target="_blank" rel="noreferrer">
-        {displayImage && (
-          <div className="link-image-wrapper">
-            {!isMarryBaby && (
-              <img
-                className="link-image-blur"
-                src={displayImage}
-                onError={(e) => {
-                  if (!showDefaultRef.current) {
-                    showDefaultRef.current = true
-                    e.currentTarget.src = DEFAULT_IMG
-                  }
-                }}
-              />
-            )}
-            <img
-              className="link-image"
-              src={displayImage}
-              onError={(e) => {
-                if (!showDefaultRef.current) {
-                  showDefaultRef.current = true
-                  e.currentTarget.src = DEFAULT_IMG
-                }
-              }}
-            />
-          </div>
-        )}
-        <div className="link-info-container">
-          <Text size="n1">
-            {isMarryBaby && displayLogo && !hideLogo && (
-              <img
-                className="link-logo"
-                src={displayLogo}
-                onError={(e) => setHideLogo(true)}
-              />
-            )}
-            {domain}
-          </Text>
-          <Heading tag="h6">{displayTitle}</Heading>
-        </div>
-      </a>
-    </StyledCardLink>
-  )
-}
-
-export { CardLink }

package/src/together/components/atoms/cardReactions/index.styled.tsx

@@ -1,96 +0,0 @@
-import { Text } from 'components/atoms/text'
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledCardReactions = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  cursor: pointer;
-  &[data-type='post'] {
-    border-top: 1px solid #f2f2f2;
-    &[data-show-most-engaging='true'] {
-      border-bottom: 1px solid #f2f2f2;
-    }
-  }
-  &[data-type='reply'] {
-    &[data-reply-padding='true'] {
-      padding-left: 2.5rem;
-    }
-  }
-  .reaction-icon-container {
-    display: flex;
-  }
-  .child-no-click {
-    * {
-      pointer-events: none;
-    }
-  }
-  [data-is-marrybaby='true'] {
-    border-top: none;
-    &[data-type='post'] {
-      border-top: none;
-    }
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      width: calc(100% - 2rem);
-      height: 1px;
-      background: ${(props: ThemeProps) => props.theme.mbColors.lightGray};
-      content: ' ';
-      transform: translateX(-50%);
-    }
-    .reaction-icon-container {
-      width: 100%;
-      justify-content: space-between;
-      p {
-        color: #9495a0;
-      }
-      .reaction-reply {
-        color: #2661ad;
-      }
-    }
-    &[data-type='reply'] {
-      .reaction-icon-container {
-        justify-content: start;
-        > div {
-          &:not(:last-child) {
-            position: relative;
-            margin-right: 22px;
-            &::after {
-              position: absolute;
-              top: 50%;
-              left: calc(100% + 0.5rem);
-              color: #9495a0;
-              content: '•';
-              font-size: 14px;
-              transform: translateY(-50%);
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-export const StyledLeftIcon = styled.img`
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 2px;
-
-  [data-is-marrybaby='true'] {
-    margin-right: 5px;
-  }
-`
-export const StyledRightIcon = styled.img`
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.5rem;
-`
-export const StyledText = styled(Text)`
-  display: flex;
-  align-items: center;
-`

package/src/together/components/atoms/cardReactions/index.tsx

@@ -1,221 +0,0 @@
-import React, { CSSProperties, useContext } from 'react'
-
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { abbreviateNumber } from 'misc/number'
-
-import { getCurrentHref } from '../../../api/utils'
-import MBComment from '../../../assets/marrybaby/svg/comment.svg'
-import MBCommentSolid from '../../../assets/marrybaby/svg/commentSolid.svg'
-import MBHeart from '../../../assets/marrybaby/svg/heart.svg'
-import MBHeartSolid from '../../../assets/marrybaby/svg/heartSolid.svg'
-import MBShare from '../../../assets/marrybaby/svg/share.svg'
-import IconEdit from '../../../assets/svg/icon-edit.svg'
-import IconHeartEmpty from '../../../assets/svg/icon-heart-empty.svg'
-import IconHeartFillRed from '../../../assets/svg/icon-heart-fill-red.svg'
-import IconReplyArrow from '../../../assets/svg/icon-reply-arrow.svg'
-import IconReplyCircleEmpty from '../../../assets/svg/icon-reply-circle-empty.svg'
-import IconReplyCircleFill from '../../../assets/svg/icon-reply-circle-fill.svg'
-import { TogetherComponentGlobalContext } from '../../../togetherComponentGlobalContext'
-import {
-  StyledCardReactions,
-  StyledLeftIcon,
-  StyledRightIcon,
-  StyledText,
-} from './index.styled'
-
-export enum CardReactionType {
-  post = 1,
-  reply = 2,
-}
-
-export type Props = {
-  type: CardReactionType
-  loveCount?: number
-  replyCount?: number
-  replyPadding?: boolean
-  liked?: boolean
-  isReplied?: boolean
-  hideCommentIcon?: boolean
-  className?: string
-  onCommentClick?: () => void
-  onLikeClick?: () => void
-  onCommentCountClick?: () => void
-  onShareClick?: () => void
-  style?: CSSProperties
-  showingMostEngaging?: boolean
-}
-
-const CardReactions = ({
-  type,
-  loveCount,
-  replyCount,
-  replyPadding,
-  liked,
-  isReplied,
-  onCommentClick,
-  onLikeClick,
-  onCommentCountClick,
-  onShareClick,
-  className,
-  style,
-  hideCommentIcon,
-  showingMostEngaging,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      router,
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const { asPath, basePath } = router || {}
-  const { t } = useTranslations()
-  const isMarryBabyReply = type === CardReactionType.reply && isMarryBaby
-
-  // /api/v1/auth/post?post_slug=test-post-title-3607&website_url={{website_url}}
-  return (
-    <StyledCardReactions
-      data-show-most-engaging={showingMostEngaging}
-      data-type={type === CardReactionType.post ? 'post' : 'reply'}
-      data-reply-padding={type === CardReactionType.reply && replyPadding}
-      className={className}
-      style={style}
-    >
-      <div className="reaction-icon-container">
-        <div
-          onClick={() => {
-            onLikeClick && onLikeClick()
-          }}
-          className="child-no-click"
-          data-event-category="Together"
-          data-event-action="Like Click"
-          data-event-label={getCurrentHref(locale || 'vi-VN', basePath, asPath)}
-        >
-          <StyledText
-            style={{
-              marginRight: isMarryBaby ? 0 : '1rem',
-            }}
-            size="p3"
-          >
-            <StyledLeftIcon
-              src={
-                isMarryBaby
-                  ? liked
-                    ? MBHeartSolid
-                    : MBHeart
-                  : liked
-                  ? IconHeartFillRed
-                  : IconHeartEmpty
-              }
-            />
-            {isMarryBaby
-              ? t('post.likesCount', {
-                  count: loveCount || 0,
-                })
-              : loveCount && loveCount > 0
-              ? abbreviateNumber(loveCount)
-              : ''}
-          </StyledText>
-        </div>
-        {!isMarryBabyReply ? (
-          <>
-            {!hideCommentIcon && (
-              <div
-                onClick={() => {
-                  onCommentCountClick && onCommentCountClick()
-                }}
-                className="child-no-click"
-                data-event-category="Together"
-                data-event-action="Comment Click"
-                data-event-label={getCurrentHref(
-                  locale || 'vi-VN',
-                  basePath,
-                  asPath,
-                )}
-              >
-                <StyledText size="p3">
-                  <StyledLeftIcon
-                    src={
-                      isMarryBaby
-                        ? isReplied
-                          ? MBCommentSolid
-                          : MBComment
-                        : isReplied
-                        ? IconReplyCircleFill
-                        : IconReplyCircleEmpty
-                    }
-                  />
-                  {isMarryBaby
-                    ? t('post.commentCount', {
-                        count: replyCount || 0,
-                      })
-                    : replyCount && replyCount > 0
-                    ? abbreviateNumber(replyCount)
-                    : ''}
-                </StyledText>
-              </div>
-            )}
-            {isMarryBaby && (
-              <div
-                onClick={() => {
-                  onShareClick && onShareClick()
-                }}
-                className="child-no-click"
-                data-event-category="Together"
-                data-event-action="Share Click"
-                data-event-label={getCurrentHref(
-                  locale || 'vi-VN',
-                  basePath,
-                  asPath,
-                )}
-              >
-                <StyledText size="p3">
-                  <StyledLeftIcon src={MBShare} />
-                  {isMarryBaby
-                    ? t('post.shareCount', {
-                        count: 0,
-                      })
-                    : ''}
-                </StyledText>
-              </div>
-            )}
-          </>
-        ) : (
-          <div onClick={onCommentClick} className="child-no-click">
-            <Text className="reaction-reply" size="p3">
-              {t('cardReactions.reply')}
-            </Text>
-          </div>
-        )}
-      </div>
-
-      {!isMarryBaby && (
-        <div
-          className="reaction-comment-button child-no-click"
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            onCommentClick && onCommentClick()
-          }}
-        >
-          <StyledText size="p3" type="bold" color="#2D87F3">
-            {type === CardReactionType.post ? (
-              <>
-                <StyledRightIcon src={IconEdit} />
-                {t('cardReactions.comment')}
-              </>
-            ) : (
-              <>
-                <StyledRightIcon src={IconReplyArrow} />
-                {t('cardReactions.reply')}
-              </>
-            )}
-          </StyledText>
-        </div>
-      )}
-    </StyledCardReactions>
-  )
-}
-
-export { CardReactions }

package/src/together/components/atoms/index.tsx

@@ -1,8 +0,0 @@
-export { Loading } from './loading'
-export { UserAvatar } from './userAvatar'
-export { CardLink } from './cardLink'
-export { CardReactions } from './cardReactions'
-export { TagTopic } from './tagTopic'
-export { LabelSortPin } from './labelSortPin'
-export { LabelPin } from './labelSortPin/labelPin'
-export { LabelSorting } from './labelSortPin/labelSorting'

package/src/together/components/atoms/labelSortPin/index.styled.tsx

@@ -1,78 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledLabelSortPin = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  cursor: pointer;
-  &[data-color='gray'] {
-    background: ${(props: ThemeProps) => props.theme.colors.neutral50};
-  }
-  &[data-color='white'] {
-    border-bottom: 1px solid #e4e8ec;
-    background: ${(props: ThemeProps) => props.theme.colors.white};
-  }
-
-  .popover-menu__btn {
-    display: flex;
-    min-width: 2rem;
-    height: 2rem;
-    align-items: center;
-    padding: 8px 0 !important;
-    border: none;
-    margin-left: 0.5rem;
-    background: transparent;
-    > span {
-      display: flex;
-      align-items: center;
-    }
-
-    &:hover {
-      background: transparent !important;
-    }
-  }
-
-  &.label-pinned {
-    border-radius: 6px 6px 0 0;
-    .label-sort-pin-icon {
-      width: 16px;
-      height: 16px;
-      vertical-align: middle;
-    }
-  }
-
-  &[data-is-marrybaby='true'] {
-    padding: 0.75rem 1rem;
-    border-radius: 16px 16px 0px 0px;
-    &[data-color='white'] {
-      border-bottom: none;
-    }
-    &[data-color='gray'] {
-      background: #f3f3f3;
-    }
-    .popover-menu__btn {
-      width: unset;
-    }
-
-    &.label-pinned {
-      border-bottom: none;
-      background: #fff9eb;
-      border-radius: 1rem 1rem 0 0;
-      .label-sort-pin-icon {
-        margin-right: 8px;
-      }
-      .label-sort-pin-heading {
-        color: #fb8c00;
-      }
-    }
-    &.label-sorting {
-      ${MediaQueries.tdUp} {
-        padding-bottom: 1.5rem;
-        margin-bottom: -0.75rem;
-      }
-    }
-  }
-`

package/src/together/components/atoms/labelSortPin/index.tsx

@@ -1,50 +0,0 @@
-import React, { CSSProperties, ReactNode, useContext } from 'react'
-
-import { Text } from 'components/atoms/text'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { StyledLabelSortPin } from './index.styled'
-
-export type Props = {
-  label: ReactNode
-  rightLabel?: ReactNode
-  onClick?: () => unknown
-  color?: 'gray' | 'white'
-  className?: string
-  style?: CSSProperties
-}
-
-const LabelSortPin = ({
-  label,
-  rightLabel,
-  onClick,
-  color,
-  className,
-  style,
-}: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  return (
-    <StyledLabelSortPin
-      data-is-marrybaby={isMarryBaby}
-      data-color={color}
-      onClick={onClick}
-      className={className}
-      style={style}
-    >
-      <Text
-        className="label-sort-pin-heading"
-        size={isMarryBaby ? 'p4' : 'p3'}
-        type="bold"
-      >
-        {label}
-      </Text>
-      {rightLabel}
-    </StyledLabelSortPin>
-  )
-}
-
-export { LabelSortPin }

package/src/together/components/atoms/labelSortPin/labelPin.tsx

@@ -1,47 +0,0 @@
-import React, { CSSProperties, useContext } from 'react'
-
-import { useTranslations } from 'hooks/useTranslations'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import MBPinOrange from '../../../assets/marrybaby/svg/pinOrange.svg'
-import IconPinYellow from '../../../assets/svg/icon-pin-yellow.svg'
-import { LabelSortPin } from './index'
-
-export type Props = {
-  onClick?: () => void
-  color?: 'gray' | 'white'
-  className?: string
-  style?: CSSProperties
-}
-
-const LabelPin = ({ onClick, color, className, style }: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  return (
-    <LabelSortPin
-      label={
-        <>
-          {isMarryBaby && (
-            <img className="label-sort-pin-icon" src={MBPinOrange} />
-          )}{' '}
-          {t('label.pinnedPost')}
-        </>
-      }
-      rightLabel={
-        !isMarryBaby && (
-          <img className="label-sort-pin-icon" src={IconPinYellow} />
-        )
-      }
-      onClick={onClick}
-      color={'white' || color}
-      className={`label-pinned ${className}`}
-      style={style}
-    />
-  )
-}
-
-export { LabelPin }