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

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

@@ -0,0 +1,127 @@
+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/src/together/components/atoms/loading/index.styled.tsx

@@ -0,0 +1,42 @@
+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/src/together/components/atoms/loading/index.tsx

@@ -0,0 +1,25 @@
+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/src/together/components/atoms/loading/loadingCard.tsx

@@ -0,0 +1,38 @@
+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/src/together/components/atoms/tagTopic/index.styled.tsx

@@ -0,0 +1,33 @@
+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/src/together/components/atoms/tagTopic/index.tsx

@@ -0,0 +1,57 @@
+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/src/together/components/atoms/userAvatar/index.styled.tsx

@@ -0,0 +1,39 @@
+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/src/together/components/atoms/userAvatar/index.tsx

@@ -0,0 +1,62 @@
+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/src/together/components/molecules/cardAuthor/customMMLocale/formatDistance.ts

@@ -0,0 +1,112 @@
+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/src/together/components/molecules/cardAuthor/customMMLocale/index.ts

@@ -0,0 +1,16 @@
+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/src/together/components/molecules/cardAuthor/customMMLocale/types.ts

@@ -0,0 +1,37 @@
+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