chore(share): adjust naming & general styles (#1122)

* chore(share): adjust naming & general styles

* style(tooltip): add animation & re-org codebase

* style(tooltip): default delay set to 0

Author: mydearxym

package.json

@@ -122,7 +122,7 @@
     "react-svg": "11.1.2",
     "react-swipeable": "^5.5.1",
     "react-textarea-autosize": "^8.3.0",
-    "react-tooltip": "^3.4.0",
+    "react-tooltip": "^4.2.21",
     "react-trend": "^1.2.4",
     "react-use": "15.1.1",
     "react-useportal": "^1.0.13",

src/components/TheAvatar/ArticleAuthorAvatar.js

@@ -0,0 +1,26 @@
+import { FC, memo } from 'react'
+
+import { TUser, TAccount } from '@/spec'
+// import { ICON } from '@/config'
+import ImgFallback from '@/components/ImgFallback'
+
+import { Wrapper, Avatar } from './styles/article_author_avatar'
+
+type TProps = {
+  user: TUser
+  onSelect: (user: TUser | TAccount) => void
+}
+
+const ArticleAuthorAvatar: FC<TProps> = ({ user, onSelect }) => {
+  return (
+    <Wrapper onClick={() => onSelect(user)}>
+      <Avatar
+        src={user.avatar}
+        fallback={<ImgFallback user={user} size={38} top={2} />}
+      />
+      {/* <Tail src={`${ICON}/shape/tail.svg`} /> */}
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleAuthorAvatar)

src/components/TheAvatar/ArticleAuthorAvatar.tsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import { TUser, TAccount } from '@/spec'
 import { ICON } from '@/config'
 import ImgFallback from '@/components/ImgFallback'
+
 import {
   Wrapper,
   InnerShadow,
@@ -11,18 +13,23 @@ import {
   MaskIcon,
 } from './styles/post_item_avatar'
 
-const PostItemAvatar = ({ user, onSelect }) => {
+type TProps = {
+  user: TUser
+  onSelect: (user: TUser | TAccount) => void
+}
+
+const PostItemAvatar: FC<TProps> = ({ user, onSelect }) => {
   return (
     <Wrapper onClick={() => onSelect(user)}>
       {user.login === 'mydearxym' ? (
         <QuoteAvatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={36} top={2} quote />}
+          fallback={<ImgFallback user={user} size={32} top={2} quote />}
         />
       ) : (
         <Avatar
           src={user.avatar}
-          fallback={<ImgFallback user={user} size={38} top={-1} left={-1} />}
+          fallback={<ImgFallback user={user} size={32} top={-1} left={-1} />}
         />
       )}
       {user.login === 'mydearxym' ? <QuoteShadow /> : <InnerShadow />}
@@ -33,4 +40,4 @@ const PostItemAvatar = ({ user, onSelect }) => {
   )
 }
 
-export default React.memo(PostItemAvatar)
+export default memo(PostItemAvatar)

src/components/TheAvatar/PostItemAvatar.js renamed to src/components/TheAvatar/PostItemAvatar.tsx

@@ -4,22 +4,34 @@
  *
  */
 
-import React from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
+import { FC, memo } from 'react'
 
+import { TAccount, TUser } from '@/spec'
 import { buildLog } from '@/utils'
-import { TYPE } from './constant'
 
 import PostItemAvatar from './PostItemAvatar'
 import ArticleAuthorAvatar from './ArticleAuthorAvatar'
+import { TYPE } from './constant'
+import type { TMetric } from './spec'
 
 import { Wrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:TheAvatar:index')
 
-const TheAvatar = ({ testid, user, metric, onSelect }) => {
+type TProps = {
+  testid?: string
+  metric?: TMetric
+  user: TUser | TAccount
+  onSelect?: (user: TUser | TAccount) => void
+}
+
+const TheAvatar: FC<TProps> = ({
+  testid = 'the-avatar',
+  user,
+  metric = TYPE.POST_ITEM,
+  onSelect = log,
+}) => {
   switch (metric) {
     case TYPE.POST_ITEM: {
       return <PostItemAvatar user={user} onSelect={onSelect} />
@@ -37,21 +49,4 @@ const TheAvatar = ({ testid, user, metric, onSelect }) => {
   }
 }
 
-TheAvatar.propTypes = {
-  testid: T.string,
-  metric: T.oneOf(values(TYPE)),
-  user: T.shape({
-    avatar: T.string,
-    nickname: T.string,
-    bio: T.string,
-  }).isRequired,
-  onSelect: T.func,
-}
-
-TheAvatar.defaultProps = {
-  testid: 'the-avatar',
-  metric: TYPE.POST_ITEM,
-  onSelect: log,
-}
-
-export default React.memo(TheAvatar)
+export default memo(TheAvatar)

src/components/TheAvatar/index.js renamed to src/components/TheAvatar/index.tsx

@@ -0,0 +1,2 @@
+export type TMetric = 'post-item' | 'article-author'
+export const holder = 1

src/components/TheAvatar/spec.ts

@@ -1,14 +1,11 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 import { Tail as TailBase } from './index'
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Wrapper = styled.div`
   cursor: pointer;
   ${css.size(36)};
   position: relative;

src/components/TheAvatar/styles/article_author_avatar.ts

@@ -1,40 +1,37 @@
 import styled from 'styled-components'
 
-import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 import { Tail as TailBase } from './index'
 
-export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
-  'data-test-id': testid,
-}))<TTestable>`
+export const Wrapper = styled.div`
   cursor: pointer;
-  ${css.circle(38)};
+  ${css.circle(32)};
   position: relative;
-  margin-top: 2px;
+  margin-top: 6px;
 `
 export const InnerShadow = styled.div`
   position: absolute;
-  ${css.circle(38)};
+  ${css.circle(33)};
   top: -1px;
   left: -1px;
   box-shadow: ${theme('avatar.shadow')};
   z-index: 2;
 `
 export const QuoteShadow = styled(InnerShadow)`
-  ${css.circle(34)};
+  ${css.circle(32)};
   top: 2px;
   left: 2px;
   box-shadow: ${theme('avatar.quoteShadow')};
 `
 export const Avatar = styled(Img)`
-  ${css.circle(36)};
+  ${css.circle(32)};
   fill: ${theme('thread.articleTitle')};
   opacity: ${theme('avatar.opacity')};
 `
 export const QuoteAvatar = styled(Avatar)`
-  ${css.circle(38)};
+  ${css.circle(34)};
   border: 2px solid;
   border-color: ${theme('avatar.quote')};
 `

src/components/TheAvatar/styles/post_item_avatar.ts

@@ -1,12 +1,12 @@
 /*
- *
  * Tooltip
- *
+
+ * use custom animation Globally at GlobalStyle.ts
  */
 
 import { FC, ReactNode, useState, useRef, memo } from 'react'
 
-import type { TTooltipPlacement, TTooltipAnimation } from '@/spec'
+import type { TTooltipPlacement } from '@/spec'
 import { css, buildLog, isDescendant } from '@/utils'
 import { useOutsideClick } from '@/hooks'
 
@@ -28,7 +28,6 @@ const log = buildLog('c:Tooltip:index')
 type TProps = {
   children: ReactNode
   content: string | ReactNode
-  animation?: TTooltipAnimation
   placement?: TTooltipPlacement
   // more options see: https://atomiks.github.io/tippyjs/all-options/
   delay?: number
@@ -49,7 +48,6 @@ type TProps = {
 
 const Tooltip: FC<TProps> = ({
   children,
-  animation = 'scale',
   noPadding = false,
   onHide,
   onShow,
@@ -116,56 +114,34 @@ const Tooltip: FC<TProps> = ({
     }
   })
 
+  const props = {
+    ref,
+    content: PopoverContent,
+    placement,
+    hideOnClick,
+    zIndex: css.zIndex.popover,
+    interactive: true,
+    delay: [delay, 0] as [number, number],
+    offset: [5, 5] as [number, number],
+    duration,
+    trigger,
+
+    onHide: () => {
+      setInstance(null)
+      setActive(false)
+      onHide?.()
+    },
+    onShow: (instance) => {
+      setInstance(instance)
+      setActive(true)
+      onShow?.()
+    },
+  }
+
   return !noPadding ? (
-    <StyledTippy
-      ref={ref}
-      content={PopoverContent}
-      placement={placement}
-      hideOnClick={hideOnClick}
-      onHide={() => {
-        setInstance(null)
-        setActive(false)
-        onHide?.()
-      }}
-      onShow={(instance) => {
-        setInstance(instance)
-        setActive(true)
-        onShow?.()
-      }}
-      zIndex={css.zIndex.popover}
-      interactive
-      delay={delay}
-      duration={duration}
-      animation={animation}
-      trigger={trigger}
-    >
-      {ContentComp}
-    </StyledTippy>
+    <StyledTippy {...props}>{ContentComp}</StyledTippy>
   ) : (
-    <NoPaddingStyledTippy
-      ref={ref}
-      content={PopoverContent}
-      placement={placement}
-      hideOnClick={hideOnClick}
-      animation={animation}
-      onHide={(instance) => {
-        setInstance(instance)
-        setActive(false)
-        onHide?.()
-      }}
-      onShow={(instance) => {
-        setInstance(instance)
-        setActive(true)
-        onShow?.()
-      }}
-      zIndex={css.zIndex.popover}
-      interactive
-      delay={delay}
-      duration={duration}
-      trigger={trigger}
-    >
-      {ContentComp}
-    </NoPaddingStyledTippy>
+    <NoPaddingStyledTippy {...props}>{ContentComp}</NoPaddingStyledTippy>
   )
 }
 

src/components/Tooltip/index.tsx

@@ -14,7 +14,7 @@ export const StyledTippy = styled(Tippy)`
   border-color: ${theme('popover.borderColor')};
 
   border-radius: 5px;
-  padding: 10px;
+  padding: 5px;
 
   .tippy-arrow {
     display: none;