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

package/src/together/components/molecules/createPostDescription/index.styled.tsx

@@ -1,328 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledCreatePostDescription = styled.div`
-  input:focus,
-  textarea:focus,
-  [contenteditable='true'] {
-    outline: none;
-  }
-
-  .textarea-control {
-    position: relative;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-    border-radius: 6px;
-    &.--focus {
-      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px
-        ${(props: ThemeProps) => props.theme.colors.blue200};
-    }
-
-    .textarea-wrapper {
-      width: 100%;
-      height: 200px;
-    }
-
-    .control-tool {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      width: calc(100% - 2rem);
-      height: 40px;
-      align-items: center;
-      justify-content: flex-end;
-      border-top: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
-      margin: 0 1rem;
-
-      .tool-button {
-        display: flex;
-        width: 2rem;
-        height: 2rem;
-        align-items: center;
-        justify-content: center;
-        background: transparent;
-        cursor: pointer;
-      }
-      .image-icon {
-        vertical-align: middle;
-      }
-    }
-  }
-
-  .link-preview-wrapper {
-    position: relative;
-    .icon-close {
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-    }
-  }
-
-  .image-gallery {
-    margin-bottom: 1rem;
-
-    .image-item {
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      height: 0;
-      padding-top: 67%;
-      margin-top: 1rem;
-      border-radius: 6px;
-
-      & > img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .close-btn {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        left: unset;
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .description-label {
-    margin-bottom: 5px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray600};
-    /* font-family: 'Open Sans', sans-serif; */
-    font-size: 13px;
-    font-weight: bold;
-  }
-
-  .count-string {
-    margin-top: 5px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray500};
-    font-size: 11px;
-    text-align: right;
-  }
-
-  .input-notification {
-    display: flex;
-
-    & > img {
-      width: 16px;
-      height: 16px;
-      margin-top: 1.5px;
-      margin-right: 8px;
-    }
-  }
-`
-
-export const StyledEditorContainer = styled.div`
-  height: 100%;
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  .ql-toolbar.ql-snow {
-    top: 0;
-    width: 100%;
-    position: sticky;
-    z-index: 3;
-    border: none;
-    border-bottom: 1px solid #ccc;
-    background: white;
-    .ql-formats {
-      display: inline-flex;
-      align-items: center;
-      margin-right: 0.5rem;
-      .link-tool-wrapper {
-        .popover-menu__content {
-          padding: 0.5rem;
-          transform: translateX(calc(-50% - 1rem));
-          max-width: calc(100vw - 4rem);
-          ::before {
-            right: calc(50% - 8px);
-          }
-          .link-tool-popover {
-            input {
-              padding-left: 1rem;
-            }
-            .link-input-url {
-              margin-bottom: 0.5rem;
-            }
-            .link-input-text {
-              margin-bottom: 0.5rem;
-            }
-            label {
-              display: inline-block;
-              margin-bottom: 0.2rem;
-            }
-            .link-input-button-wrapper {
-              &[data-is-marrybaby='true'] {
-                .link-input-button {
-                  border: solid 2px
-                    ${(props: ThemeProps) => props.theme.mbColors.pink};
-                  background-color: ${(props: ThemeProps) =>
-                    props.theme.mbColors.pink};
-                  &:hover:not(:disabled) {
-                    border: solid 2px
-                      ${(props: ThemeProps) => props.theme.mbColors.pink};
-                    background-color: ${(props: ThemeProps) =>
-                      props.theme.colors.white};
-                    color: ${(props: ThemeProps) => props.theme.mbColors.pink};
-                  }
-                }
-              }
-            }
-            .link-input-button {
-              width: auto;
-              height: auto;
-              padding: 0.4rem 1rem;
-              background-color: ${(props: ThemeProps) =>
-                props.theme.colors.primaryBase};
-
-              &:disabled {
-                border-color: #bfbfbf;
-                background-color: #bfbfbf;
-                color: #fff;
-                cursor: not-allowed;
-              }
-              &:hover:not(:disabled) {
-                background-color: ${(props: ThemeProps) =>
-                  props.theme.colors.primaryHover};
-              }
-            }
-            .error-text {
-              padding: 0;
-              margin-bottom: 0.5rem;
-              font-weight: 600;
-              color: ${(props: ThemeProps) => props.theme.colors.red700};
-            }
-          }
-        }
-      }
-    }
-    @media (max-width: 450px) {
-      position: relative;
-      .ql-formats {
-        .link-tool-wrapper {
-          position: unset;
-          .popover-menu__content {
-            left: 0;
-            transform: unset;
-            max-width: 100%;
-          }
-        }
-      }
-    }
-  }
-  .quill {
-    flex: 1;
-    overflow-y: hidden;
-    .ql-container {
-      display: inline-block;
-      width: 100%;
-      min-height: 100%;
-      /* padding: 14px 16px; */
-      border: none;
-      border-radius: 6px;
-      color: ${(props: ThemeProps) => props.theme.colors.gray800};
-      font-size: 1rem;
-      line-height: 1.5;
-      resize: none;
-      white-space: break-spaces;
-      .ql-editor {
-        word-break: break-word;
-        overflow-wrap: break-word;
-        /* -ms-overflow-style: none;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        } */
-      }
-      mocka {
-        padding: 2px 6px;
-        border-radius: 1rem;
-        &[data-url='true'] {
-          /* background-color: #eeeeff; */
-          font-style: italic;
-          color: #1890ff;
-          cursor: pointer;
-          outline: none;
-          text-decoration: underline;
-        }
-        &[data-error='true'] {
-          background-color: #ffeeee;
-          color: red;
-          text-decoration: underline;
-          font-style: bold;
-        }
-      }
-      mention {
-        padding: 2px 6px;
-        border-radius: 1rem;
-        background-color: #eeeeff;
-        color: #1890ff;
-        cursor: pointer;
-        outline: none;
-        text-decoration: none;
-      }
-      ol,
-      ul {
-        padding-left: 1rem;
-      }
-    }
-  }
-  .mention-search-container {
-    position: absolute;
-    background: white;
-    border-radius: 6px;
-    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
-      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
-    overflow-y: scroll;
-    z-index: 99;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    ::-webkit-scrollbar:vertical {
-      width: 14px;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 6px;
-      background-color: #d9d9d9;
-      @supports (background-clip: padding-box) {
-        border: 3px solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-      }
-      @supports not (background-clip: padding-box) {
-        border: 3px solid white;
-      }
-    }
-    ::-webkit-scrollbar-track {
-      background-color: #fff;
-      border-radius: 0 6px 6px 0;
-      border-left: 1px solid #f2f2f2;
-    }
-    .mention-search-item {
-      cursor: pointer;
-      padding: 12px 1rem;
-      display: flex;
-      align-items: center;
-      &.item-selected {
-        background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
-      }
-      .search-avatar {
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-        margin-right: 20px;
-      }
-    }
-  }
-`

package/src/together/components/molecules/createPostDescription/index.tsx

@@ -1,163 +0,0 @@
-import React, { CSSProperties, useEffect, useRef, useState } from 'react'
-
-import { Text } from 'components/atoms'
-import { useImagePicker } from 'hooks/useImagesPicker'
-import { useTranslations } from 'hooks/useTranslations'
-import innertext from 'innertext'
-import { theme } from 'misc/theme'
-import { MAX_IMAGE_UPLOADS } from 'together/interfaces/constants'
-
-import IconAlertCircleWarning from '../../../assets/svg/icon-alert-circle-warning.svg'
-import IconCloseCircle from '../../../assets/svg/icon-close-circle.svg'
-import { CardLink } from '../../atoms/cardLink'
-import { Loading } from '../../atoms/loading'
-import { RichTextEditor } from './editor'
-import { StyledCreatePostDescription } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  bannedWords?: string[]
-  value?: string
-  onChange?: (v: string) => void
-  onPreviewUrlChange?: (
-    v: {
-      title: string
-      url: string
-      image: string
-      description: string
-    } | null,
-  ) => void
-  onInvalidUrlsChange?: (v: string[]) => void
-  imageFiles?: (File | string)[]
-  onImageFilesChange?: (v: (File | string)[]) => void
-  isReplying?: boolean
-}
-
-export const CreatePostDescription = ({
-  className,
-  style,
-  bannedWords = [],
-  value,
-  onChange,
-  onPreviewUrlChange,
-  onInvalidUrlsChange,
-  onImageFilesChange,
-  imageFiles: imageFilesProp,
-  isReplying,
-}: Props) => {
-  const { t } = useTranslations()
-  const [previewUrl, setPreviewUrl] = useState<{
-    title?: string
-    url?: string
-    image?: string
-    rawUrl?: string
-    description?: string
-    isFetching?: boolean
-  } | null>(null)
-  const imagePicker = useRef<HTMLInputElement>(null)
-
-  const {
-    onSelectImages,
-    onRemoveImage,
-    imageSrcs,
-    // imageFiles,
-  } = useImagePicker(imageFilesProp, onImageFilesChange)
-
-  useEffect(() => {
-    if (onPreviewUrlChange) {
-      if (previewUrl?.url)
-        onPreviewUrlChange({
-          title: previewUrl.title || '',
-          url: previewUrl.url || '',
-          image: previewUrl.image || '',
-          description: previewUrl.description || '',
-        })
-      else onPreviewUrlChange(null)
-    }
-  }, [previewUrl])
-
-  return (
-    <StyledCreatePostDescription className={className} style={style}>
-      <Text size="p4" className="description-label">
-        {t('createPost.popup.description')}
-      </Text>
-      <div className={`textarea-control`}>
-        <div className="textarea-wrapper">
-          <RichTextEditor
-            html={value || ''} // innerHTML of the editable div
-            onChange={onChange}
-            bannedWords={bannedWords}
-            onImagePickerClick={() => imagePicker.current?.click()}
-            onPreviewUrlChange={setPreviewUrl}
-            onInvalidUrlsChange={onInvalidUrlsChange}
-            isReplying={isReplying}
-          />
-        </div>
-        {/* <div className="control-tool">
-          <div
-            className="tool-button"
-            color="transparent"
-            onClick={() => imagePicker.current?.click()}
-          >
-            <img className="image-icon" src="./svg/icon-image-input.svg" />
-          </div>
-        </div> */}
-      </div>
-      <Text size="p4" className="count-string">
-        {t('character')}: {innertext(value || '').length}
-      </Text>
-      {(!imageSrcs || imageSrcs.length === 0) && previewUrl && (
-        <div className="link-preview-wrapper">
-          {previewUrl.isFetching ? (
-            <Loading />
-          ) : (
-            <>
-              <CardLink
-                title={previewUrl.title}
-                url={previewUrl.url || '#'}
-                image={previewUrl.image}
-                noRefetch
-              />
-              <img
-                src={IconCloseCircle}
-                className="icon-close"
-                onClick={() => setPreviewUrl(null)}
-              />
-            </>
-          )}
-        </div>
-      )}
-      <input
-        ref={imagePicker}
-        type="file"
-        accept="image/png, image/gif, image/jpeg"
-        multiple={true}
-        style={{ display: 'none' }}
-        onChange={onSelectImages}
-      />
-      {imageSrcs.length > MAX_IMAGE_UPLOADS ? (
-        <div className="input-notification">
-          <img src={IconAlertCircleWarning} />
-          <Text size="p4" color={theme.colors.alertWarning}>
-            {t(`createPost.popup.warningImage`)}
-          </Text>
-        </div>
-      ) : null}
-      {imageSrcs.length > 0 && (
-        <div className="image-gallery">
-          {imageSrcs.map((src, i) => (
-            <div key={i} className="image-item">
-              <img src={src} />
-              <img
-                className="close-btn"
-                src={IconCloseCircle}
-                onClick={() => onRemoveImage(i)}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </StyledCreatePostDescription>
-  )
-}

package/src/together/components/molecules/createPostTitle/index.styled.tsx

@@ -1,62 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledCreatePostTitle = styled.div`
-  input:focus,
-  textarea:focus,
-  [contenteditable='true'] {
-    outline: none;
-  }
-
-  .title-input {
-    overflow: hidden;
-    width: 100%;
-    padding: 12px 16px;
-    border: solid 1px #d9d9d9;
-    border-radius: 6px;
-    font-size: 16px;
-    line-height: 1.2;
-    white-space: nowrap;
-    :focus {
-      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-      box-shadow: 0px 0px 2px 2px
-        ${(props: ThemeProps) => props.theme.colors.blue200};
-    }
-    br {
-      display: none;
-    }
-    * {
-      display: inline;
-      white-space: nowrap;
-    }
-    mocka {
-      padding: 2px 6px;
-      border-radius: 1rem;
-      &[data-error='true'] {
-        background-color: #ffeeee;
-        color: red;
-        text-decoration: underline;
-        font-style: bold;
-      }
-    }
-    ol,
-    ul {
-      padding-left: 1rem;
-    }
-  }
-
-  label {
-    display: block;
-    margin-bottom: 5px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray600};
-    font-size: 13px;
-    font-weight: bold;
-  }
-
-  .count-string {
-    margin-top: 5px;
-    color: ${(props: ThemeProps) => props.theme.colors.gray500};
-    font-size: 11px;
-    text-align: right;
-  }
-`

package/src/together/components/molecules/createPostTitle/index.tsx

@@ -1,133 +0,0 @@
-import React, {
-  CSSProperties,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import { Input } from 'components/atoms/input'
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import debounce from 'lodash/debounce'
-import ContentEditable from 'react-contenteditable'
-
-import { highlightBadWords } from '../../../utils/post'
-import { StyledCreatePostTitle } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  bannedWords?: string[]
-  value?: string
-  onChange?: (v: string) => void
-}
-
-const TITLE_LIMIT = 120
-
-const inputModify = (
-  value: string,
-  opts?: { limit?: number; bannedWords?: string[] },
-) => {
-  if (!opts) return value
-  const { limit, bannedWords = [] } = opts
-  const shorten =
-    typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value
-  const processedValue = highlightBadWords(shorten, bannedWords)
-  return processedValue
-}
-export const CreatePostTitle = ({
-  className,
-  style,
-  bannedWords = [],
-  value,
-  onChange,
-}: Props) => {
-  const { t } = useTranslations()
-  const [titleValue, setTitleValue] = useState('')
-  const titleRef = useRef<HTMLElement>(null)
-
-  useEffect(() => {
-    if (titleRef.current) {
-      const pasteHandler = (e: ClipboardEvent) => {
-        e.preventDefault()
-        const text = e.clipboardData?.getData('text/plain')
-        document.execCommand('insertHTML', false, text)
-      }
-      const contentDiv = titleRef.current
-      contentDiv.addEventListener('paste', pasteHandler)
-      return () => contentDiv.removeEventListener('paste', pasteHandler)
-    }
-  }, [titleRef])
-  const bannedString = bannedWords?.join(',') || ''
-
-  useEffect(() => {
-    if (bannedString) {
-      const titleText = titleRef.current?.innerText
-      if (titleText) {
-        const titleValueWithBanned = highlightBadWords(titleText, bannedWords)
-        if (titleValueWithBanned !== titleText) {
-          onChange && onChange(titleValueWithBanned)
-          setTitleValue(titleValueWithBanned)
-        }
-      }
-    }
-  }, [bannedString])
-
-  const debounceInputModify = useCallback(
-    debounce((v: string) => {
-      if (titleRef.current) {
-        const shortenString = inputModify(titleRef.current.innerText, {
-          limit: TITLE_LIMIT,
-          bannedWords,
-        })
-        onChange && onChange(shortenString)
-        setTitleValue(shortenString)
-      }
-    }, 300),
-    [],
-  )
-
-  useEffect(() => {
-    setTimeout(() => {
-      titleRef.current?.focus()
-    }, 500)
-  }, [])
-
-  return (
-    <StyledCreatePostTitle className={className} style={style}>
-      <Input
-        name="title"
-        value={value || titleValue}
-        size="md"
-        label={t('createPost.title')}
-        CustomInput={
-          <ContentEditable
-            innerRef={titleRef}
-            html={value || titleValue} // innerHTML of the editable div
-            onChange={(evt) => {
-              if (
-                titleRef.current &&
-                titleRef.current.innerText !== (value || titleValue)
-              ) {
-                const initialValue = inputModify(titleRef.current.innerText, {
-                  bannedWords,
-                })
-                onChange && onChange(initialValue)
-                setTitleValue(initialValue)
-                debounceInputModify(titleRef.current.innerText)
-              }
-            }} // handle innerHTML change
-            className="title-input"
-          />
-        }
-      />
-      <Text size="p4" className="count-string">
-        {t('createPost.popup.wordCount', {
-          count: titleRef.current?.innerText.length || 0,
-          max: TITLE_LIMIT,
-        })}
-      </Text>
-    </StyledCreatePostTitle>
-  )
-}

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

@@ -1,18 +0,0 @@
-export { CardAuthor } from './cardAuthor'
-export { CreateNewPostContent } from './createNewPostContent'
-export { CreatePostDescription } from './createPostDescription'
-export { CreatePostTitle } from './createPostTitle'
-export { PopupDanger } from './popupDanger'
-export { PopupExpert } from './popupExpert'
-export { PopupDoctor } from './popupDoctor'
-export { PopupHospital } from './popupHospital'
-export { TopicSelectList } from './topicSelectList'
-export { InputCommentBar } from './inputCommentBar'
-export { PopupFrame } from './popupFrame'
-export { SharePopup } from './popupFrame/popupShare'
-export { SubmitReportForm } from './submitReportForm'
-export { ShareBox } from './shareBox'
-export { PostContent } from './postContent'
-export { ImagePreviewPopup } from './postImagePreview/imagePreviewPopup'
-export { PostSingleImageViewPopup } from './postImagePreview/postSingleImageViewPopup'
-export { PostImagePreview } from './postImagePreview'