@hhgtech/hhg-components 1.19.0-beta-6 → 1.19.0-beta-8

package/raw/together/components/atoms/labelSortPin/labelSorting.tsx

@@ -1,127 +0,0 @@
-import React, { CSSProperties, useContext, useState } from 'react'
-
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import MBSortBy from '../../../assets/marrybaby/svg/sortBy.svg'
-import IconSortArrow from '../../../assets/svg/icon-sort-arrow.svg'
-import { TreePopoverMenu } from '../../organisms/popoverMenu/treePopoverMenu'
-import { LabelSortPin } from './index'
-
-export enum LabelSortingValue {
-  latest = 'latest',
-  oldest = 'oldest',
-  popular = 'popular',
-}
-
-export type ChoiceItem = {
-  label: string
-  value: string
-}
-
-export type Props = {
-  onChange?: (v: string) => void
-  color?: 'gray' | 'white'
-  className?: string
-  style?: CSSProperties
-  leftLabel?: string
-  rightLabel?: string
-  value?: LabelSortingValue
-  choices?: ChoiceItem[]
-}
-
-export const LabelSorting = ({
-  onChange,
-  className,
-  style,
-  leftLabel,
-  rightLabel,
-  color,
-  value,
-  choices,
-}: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  return (
-    <LabelSortPin
-      label={leftLabel}
-      rightLabel={
-        <TreePopoverMenu
-          position="bottom"
-          align="end"
-          data={{
-            isShowheader: false,
-            type: 'list',
-            list: choices.map((c) => ({
-              label: c.label,
-              onClick: () => onChange && onChange(String(c.value)),
-              selected: c.value === value,
-              className: 'bold-item',
-            })),
-          }}
-          toggleButtonContent={
-            <div
-              style={{
-                display: 'flex',
-              }}
-            >
-              <Text
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontWeight: 'normal',
-                  marginRight: 12,
-                }}
-                size="p4"
-              >
-                {rightLabel}
-              </Text>
-              <img
-                src={isMarryBaby ? MBSortBy : IconSortArrow}
-                style={{
-                  width: 16,
-                  height: 16,
-                  alignSelf: 'center',
-                }}
-              />
-            </div>
-          }
-        />
-      }
-      color={'gray' || color}
-      className={className}
-      style={style}
-    />
-  )
-}
-
-// HOOKS for use with this component
-export const useSortChoices = (choices: ChoiceItem[]) => {
-  const [selectedValue, setSelectedValue] = useState<LabelSortingValue>(
-    LabelSortingValue.latest,
-  )
-  const selectedChoice = choices?.find((c) => c.value === selectedValue)
-
-  return {
-    setSortChoiceValue: setSelectedValue,
-    selectedSortChoice: selectedChoice,
-    sortedChoices: choices,
-  }
-}
-export const useSortCommentChoices = () => {
-  const { t } = useTranslations()
-  return useSortChoices([
-    {
-      label: t('choicePopover.latest'),
-      value: LabelSortingValue.latest,
-    },
-    {
-      label: t('choicePopover.oldest'),
-      value: LabelSortingValue.oldest,
-    },
-  ])
-}

package/raw/together/components/atoms/loading/index.styled.tsx

@@ -1,42 +0,0 @@
-import styled, { keyframes } from 'styled-components'
-
-export const StyledLoading = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1em;
-  button {
-    position: relative;
-  }
-`
-
-const circle = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`
-export const StyledLoadingCard = styled.div`
-  display: flex;
-  width: fit-content;
-  width: -moz-fit-content;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 2rem;
-  background: white;
-  border-radius: 6px;
-  box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-    -2px 2px 5px rgba(67, 86, 100, 0.123689);
-  .loading-spinner {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 0.5rem;
-    animation: ${circle} 1.2s linear infinite;
-  }
-  &[data-is-marrybaby='true'] {
-    box-shadow: none;
-  }
-`

package/raw/together/components/atoms/loading/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { Button } from 'components/atoms/button'
-import { useTranslations } from 'hooks/useTranslations'
-
-import { StyledLoading } from './index.styled'
-
-export type Props = {
-  size?: 'lg' | 'md' | 'sm'
-  className?: string
-}
-
-const Loading = ({ className, size = 'md' }: Props) => {
-  const { t } = useTranslations()
-
-  return (
-    <StyledLoading className={className}>
-      <Button size={size} color="transparent" isLoading>
-        {t('loading')}
-      </Button>
-    </StyledLoading>
-  )
-}
-
-export { Loading }

package/raw/together/components/atoms/loading/loadingCard.tsx

@@ -1,38 +0,0 @@
-import React, { CSSProperties, useContext } from 'react'
-
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import MBLoading from '../../../assets/marrybaby/svg/loading.svg'
-import Loading from '../../../assets/svg/loading.svg'
-import { StyledLoadingCard } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-}
-
-const LoadingCard = ({ className, style }: Props) => {
-  const { t } = useTranslations()
-  const {
-    data: {
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  return (
-    <StyledLoadingCard
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-    >
-      <img
-        className="loading-spinner"
-        src={isMarryBaby ? MBLoading : Loading}
-      />
-      <Text size="c2">{t('loading')}</Text>
-    </StyledLoadingCard>
-  )
-}
-
-export { LoadingCard }

package/raw/together/components/atoms/tagTopic/index.styled.tsx

@@ -1,33 +0,0 @@
-import styled from 'styled-components'
-
-export const StyledTagTopic = styled.div`
-  display: flex;
-  width: 100%;
-  padding: 0.5rem 0;
-  cursor: grab;
-  overflow-x: auto;
-  .tag-link-item {
-    white-space: nowrap;
-    padding: 5px 12px;
-    border: 1px solid #e4e8ec;
-    background: white;
-    border-radius: 2rem;
-    cursor: pointer;
-    -webkit-user-drag: none;
-    user-select: none;
-  }
-  .tag-link-item:not(:first-child) {
-    margin-left: 0.5rem;
-  }
-
-  ::-webkit-scrollbar {
-    width: 0;
-  }
-  &.sliding {
-    cursor: grabbing;
-    user-select: none;
-    a {
-      pointer-events: none;
-    }
-  }
-`

package/raw/together/components/atoms/tagTopic/index.tsx

@@ -1,57 +0,0 @@
-import React, { CSSProperties, useContext } from 'react'
-
-import { Text } from 'components/atoms/text'
-import { useDragScroll } from 'hooks/useDragScroll'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { Topic } from '../../../interfaces/types'
-import { StyledTagTopic } from './index.styled'
-
-export type Props = {
-  onClick?: () => void
-  className?: string
-  style?: CSSProperties
-  topics: Topic[]
-}
-
-const TagTopic = ({ topics, onClick, className, style }: Props) => {
-  const { sliding, mouseDownHandler, sliderRef: slider } = useDragScroll()
-  const {
-    data: {
-      env: { togetherBasePath },
-    },
-    action: { sanitizeFunction },
-  } = useContext(TogetherComponentGlobalContext)
-
-  return (
-    <StyledTagTopic
-      ref={slider}
-      onClick={onClick}
-      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => mouseDownHandler(e)}
-      className={`${className} ${sliding ? 'sliding' : ''}`}
-      style={style}
-    >
-      {topics.map((topic, index) => (
-        <a
-          className="tag-link-item"
-          key={index}
-          href={
-            topic.isActive && !topic.isHidden
-              ? `${togetherBasePath}${topic.url}`
-              : undefined
-          }
-        >
-          <Text size="p3">
-            <span
-              dangerouslySetInnerHTML={{
-                __html: sanitizeFunction?.(topic.name) || topic.name,
-              }}
-            ></span>
-          </Text>
-        </a>
-      ))}
-    </StyledTagTopic>
-  )
-}
-
-export { TagTopic }

package/raw/together/components/atoms/userAvatar/index.styled.tsx

@@ -1,39 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledUserAvatar = styled.div`
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-  cursor: pointer;
-  font-size: 20px;
-
-  img {
-    border-radius: 50%;
-  }
-
-  .avatar {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .avatar-default {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props: ThemeProps) =>
-      props.theme.colors.secondaryBase};
-    border-radius: 50%;
-    color: white;
-    font-size: 1em;
-    font-weight: bold;
-    line-height: 1;
-  }
-
-  &[data-is-marrybaby='true'] {
-    .avatar-default {
-      background-color: ${(props: ThemeProps) => props.theme.mbColors.pink};
-    }
-  }
-`

package/raw/together/components/atoms/userAvatar/index.tsx

@@ -1,62 +0,0 @@
-import React, { CSSProperties, useState, useEffect, useContext } from 'react'
-
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { StyledUserAvatar } from './index.styled'
-
-export type Props = {
-  style?: CSSProperties
-  className?: string
-  avatar?: string
-  username?: string
-  isMarryBaby?: boolean
-}
-
-const UserAvatar = ({
-  className,
-  isMarryBaby: isMarryBabyProp,
-  style,
-  avatar,
-  username,
-}: Props) => {
-  const {
-    data: {
-      env: { isMarryBaby: isMarryBabyContext },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const isMarryBaby =
-    typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext
-  const [tempAvatar, setTempAvatar] = useState(false)
-  useEffect(() => {
-    const img = new Image()
-    img.onerror = () => {
-      setTempAvatar(true)
-    }
-    img.src = avatar
-  }, [])
-  return (
-    <StyledUserAvatar
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-    >
-      {avatar && !tempAvatar ? (
-        <img
-          src={avatar}
-          className="avatar"
-          alt="avatar"
-          onError={() => {
-            // e.currentTarget.onerror = null
-            setTempAvatar(true)
-          }}
-        />
-      ) : (
-        <div className="avatar avatar-default">
-          {username && username?.length > 0 ? username[0].toUpperCase() : 'A'}
-        </div>
-      )}
-    </StyledUserAvatar>
-  )
-}
-
-export { UserAvatar }

package/raw/together/components/molecules/cardAuthor/customMMLocale/formatDistance.ts

@@ -1,112 +0,0 @@
-import { FormatDistanceFn, FormatDistanceLocale } from './types'
-
-type FormatDistanceTokenValue =
-  | string
-  | {
-      one: string
-      other: string
-    }
-
-const formatDistanceLocale: FormatDistanceLocale<FormatDistanceTokenValue> = {
-  lessThanXSeconds: {
-    one: 'တစ်စက္ကန့်အောက်',
-    other: '{{count}} စက္ကန့်အောက်',
-  },
-
-  xSeconds: {
-    one: 'တစ်စက္ကန့်',
-    other: '{{count}} စက္ကန့်',
-  },
-
-  halfAMinute: 'မိနစ်ဝက်',
-
-  lessThanXMinutes: {
-    one: 'တစ်မိနစ်အောက်',
-    other: '{{count}} မိနစ်အောက်',
-  },
-
-  xMinutes: {
-    one: 'တစ်မိနစ်',
-    other: '{{count}}နာရီခန့်',
-  },
-
-  aboutXHours: {
-    one: 'တစ်နာရီခန့်',
-    other: '{{count}}နာရီခန့်',
-  },
-
-  xHours: {
-    one: 'တစ်နာရီ',
-    other: '{{count}}နာရီ',
-  },
-
-  xDays: {
-    one: 'တစ်ရက်',
-    other: '{{count}}ရက်',
-  },
-
-  aboutXWeeks: {
-    one: 'တစ်ပတ်ခန့်',
-    other: '{{count}}ပတ်ခန့်',
-  },
-
-  xWeeks: {
-    one: 'တစ်ပတ်',
-    other: '{{count}}ပတ်',
-  },
-
-  aboutXMonths: {
-    one: 'တစ်လခန့်',
-    other: '{{count}} လခန့်',
-  },
-
-  xMonths: {
-    one: 'တစ်လ',
-    other: '{{count}}လ',
-  },
-
-  aboutXYears: {
-    one: 'တစ်နှစ်ခန့်',
-    other: '{{count}}နှစ်',
-  },
-
-  xYears: {
-    one: 'တစ်နှစ်',
-    other: '{{count}}နှစ်',
-  },
-
-  overXYears: {
-    one: 'တစ်နှစ်ကျော်',
-    other: '{{count}}နှစ်ကျော်',
-  },
-
-  almostXYears: {
-    one: 'တစ်နှစ်နီးပါး',
-    other: '{{count}}နှစ်နီးပါး',
-  },
-}
-
-const formatDistance: FormatDistanceFn = (token, count, options) => {
-  let result
-
-  const tokenValue = formatDistanceLocale[token]
-  if (typeof tokenValue === 'string') {
-    result = tokenValue
-  } else if (count === 1) {
-    result = tokenValue.one
-  } else {
-    result = tokenValue.other.replace('{{count}}', count.toString())
-  }
-
-  if (options?.addSuffix) {
-    if (options.comparison && options.comparison > 0) {
-      return result + 'အတွင်း'
-    } else {
-      return 'လွန်ခဲ့သော ' + result
-      //  + 'က'
-    }
-  }
-
-  return result
-}
-export default formatDistance

package/raw/together/components/molecules/cardAuthor/customMMLocale/index.ts

@@ -1,16 +0,0 @@
-import { Locale } from 'date-fns'
-
-import formatDistance from './formatDistance'
-
-export default {
-  code: 'my',
-  formatDistance: formatDistance,
-  // formatLong: formatLong,
-  // formatRelative: formatRelative,
-  // localize: localize,
-  // match: match,
-  options: {
-    weekStartsOn: 0 /* Sunday */,
-    firstWeekContainsDate: 1,
-  },
-} as Locale

package/raw/together/components/molecules/cardAuthor/customMMLocale/types.ts

@@ -1,37 +0,0 @@
-export type FormatDistanceToken =
-  | 'lessThanXSeconds'
-  | 'xSeconds'
-  | 'halfAMinute'
-  | 'lessThanXMinutes'
-  | 'xMinutes'
-  | 'aboutXHours'
-  | 'xHours'
-  | 'xDays'
-  | 'aboutXWeeks'
-  | 'xWeeks'
-  | 'aboutXMonths'
-  | 'xMonths'
-  | 'aboutXYears'
-  | 'xYears'
-  | 'overXYears'
-  | 'almostXYears'
-
-export type FormatDistanceLocale<Value> = {
-  [token in FormatDistanceToken]: Value
-}
-
-export type FormatDistanceTokenFn = (
-  count: number,
-  options?: FormatDistanceFnOptions,
-) => string
-
-export interface FormatDistanceFnOptions {
-  addSuffix?: boolean
-  comparison?: -1 | 0 | 1
-}
-
-export type FormatDistanceFn = (
-  token: FormatDistanceToken,
-  count: number,
-  options?: FormatDistanceFnOptions,
-) => string