Mar 11, 2021 · Mar 9, 2021 · Mar 9, 2021 · Mar 9, 2021 · Mar 9, 2021 · Mar 10, 2021
diff --git a/config/index.js → config/index.ts b/config/index.js → config/index.ts
diff --git a/config/label_pool.js → config/label_pool.ts b/config/label_pool.js → config/label_pool.ts
diff --git a/config/next_offline.js b/config/next_offline.js
 // Cache strategies
 // By default next-offline will precache all the Next.js webpack emitted files and the user-defined static ones (inside /static)
 // By default next-offline will precache all the Next.js webpack emitted
 // files and the user-defined static ones (inside /static)
 // see more: https://github.com/hanford/next-offline

 module.exports = {
diff --git a/config/next_seo.js → config/next_seo.ts b/config/next_seo.js → config/next_seo.ts
diff --git a/package.json b/package.json
    "@commitlint/cli": "^8.2.0",
    "@commitlint/config-conventional": "^8.2.0",
    "@groupher/eslint-config-web": "2.0.9",
    "@types/jest": "^26.0.20",
    "@types/mocha": "^8.2.1",
    "@types/ramda": "^0.27.38",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
diff --git a/src/components/AlertBar/index.js → src/components/AlertBar/index.tsx b/src/components/AlertBar/index.js → src/components/AlertBar/index.tsx
 */

 import React from 'react'
 import T from 'prop-types'

 import { buildLog } from '@/utils'

 /* eslint-disable-next-line */
 const log = buildLog('c:AlertBar:index')

 const AlertBar = ({ children }) => {
 return <Wrapper testid="alertBar">{children}</Wrapper>
 type IProps = {
  children: React.ReactNode
 }

 AlertBar.propTypes = {
 children: T.oneOfType([T.string, T.node]).isRequired,
 constAlertBar: React.FC<IProps> = ({ children }) => {
 return <Wrapper testid="alertBar">{children}</Wrapper>
 }

 AlertBar.defaultProps = {}

 export default React.memo(AlertBar)
diff --git a/src/components/AlertBar/styles/index.js → src/components/AlertBar/styles/index.ts b/src/components/AlertBar/styles/index.js → src/components/AlertBar/styles/index.ts
diff --git a/src/components/AlertBar/tests/index.test.js → src/components/AlertBar/tests/index.test.ts b/src/components/AlertBar/tests/index.test.js → src/components/AlertBar/tests/index.test.ts
diff --git a/...nents/ArticleActionsPanel/styles/index.js → ...nents/ArticleActionsPanel/styles/index.ts b/...nents/ArticleActionsPanel/styles/index.js → ...nents/ArticleActionsPanel/styles/index.ts
diff --git a/...s/ArticleActionsPanel/tests/index.test.js → ...s/ArticleActionsPanel/tests/index.test.ts b/...s/ArticleActionsPanel/tests/index.test.js → ...s/ArticleActionsPanel/tests/index.test.ts
diff --git a/...ponents/ArticleEditFooter/styles/index.js → ...ponents/ArticleEditFooter/styles/index.ts b/...ponents/ArticleEditFooter/styles/index.js → ...ponents/ArticleEditFooter/styles/index.ts
diff --git a/...nts/ArticleEditFooter/tests/index.test.js → ...nts/ArticleEditFooter/tests/index.test.ts b/...nts/ArticleEditFooter/tests/index.test.js → ...nts/ArticleEditFooter/tests/index.test.ts
diff --git a/...eEditToolbar/styles/copyright_selector.js → ...eEditToolbar/styles/copyright_selector.ts b/...eEditToolbar/styles/copyright_selector.js → ...eEditToolbar/styles/copyright_selector.ts
diff --git a/...onents/ArticleEditToolbar/styles/index.js → ...onents/ArticleEditToolbar/styles/index.ts b/...onents/ArticleEditToolbar/styles/index.js → ...onents/ArticleEditToolbar/styles/index.ts
diff --git a/...ts/ArticleEditToolbar/tests/index.test.js → ...ts/ArticleEditToolbar/tests/index.test.ts b/...ts/ArticleEditToolbar/tests/index.test.js → ...ts/ArticleEditToolbar/tests/index.test.ts
diff --git a/...ts/ArticleItemPrefixLabel/styles/index.js → ...ts/ArticleItemPrefixLabel/styles/index.ts b/...ts/ArticleItemPrefixLabel/styles/index.js → ...ts/ArticleItemPrefixLabel/styles/index.ts
diff --git a/...rticleItemPrefixLabel/tests/index.test.js → ...rticleItemPrefixLabel/tests/index.test.ts b/...rticleItemPrefixLabel/tests/index.test.js → ...rticleItemPrefixLabel/tests/index.test.ts
diff --git a/src/components/AvatarsRow/styles/index.js → src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.js → src/components/AvatarsRow/styles/index.ts
diff --git a/src/components/AvatarsRow/styles/metric.js → src/components/AvatarsRow/styles/metric.ts b/src/components/AvatarsRow/styles/metric.js → src/components/AvatarsRow/styles/metric.ts
 * NOTE:  Li size should always smaller than the avatar size
 */

 export const getLiSize = (size) => {
 export const getLiSize = (size: string): string => {
  switch (size) {
    case SIZE.SMALL: {
      return '15px'
  }
 }

 export const getAvatarSize = (size, fmt = 'string') => {
 export const getAvatarSize = (
  size: string,
  fmt = 'string',
 ): string | number => {
  switch (size) {
    case SIZE.SMALL: {
      return fmt === 'string' ? '24px' : 24
  }
 }

 export const getTotalCountSize = (total) => {
 export const getTotalCountSize = (total: number): string => {
  if (total < 99) return '13px'
  if (total >= 100 && total <= 999) return '12px'
  return '10px'
 }

 export const getMoreTextWidth = (total) => {
 export const getMoreTextWidth = (total: number): string => {
  if (total < 10) return '23px'
  if (total >= 10 && total <= 99) return '32px'
  if (total >= 100 && total <= 999) return '44px'

  return '52px'
 }

 export const getUlMarginRight = (total) => {
 export const getUlMarginRight = (total: number): string => {
  if (total < 10) return '-8px'
  if (total >= 10 && total <= 99) return '-2px'
  if (total >= 100 && total <= 999) return '10px'
diff --git a/...components/AvatarsRow/styles/more_item.js → ...components/AvatarsRow/styles/more_item.ts b/...components/AvatarsRow/styles/more_item.js → ...components/AvatarsRow/styles/more_item.ts
diff --git a/...components/AvatarsRow/tests/index.test.js → ...components/AvatarsRow/tests/index.test.ts b/...components/AvatarsRow/tests/index.test.js → ...components/AvatarsRow/tests/index.test.ts
diff --git a/...components/Buttons/styles/arrow_button.js → ...components/Buttons/styles/arrow_button.ts b/...components/Buttons/styles/arrow_button.js → ...components/Buttons/styles/arrow_button.ts
diff --git a/src/components/Buttons/styles/arrow_link.js → src/components/Buttons/styles/arrow_link.ts b/src/components/Buttons/styles/arrow_link.js → src/components/Buttons/styles/arrow_link.ts
diff --git a/src/components/Buttons/styles/button.js → src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.js → src/components/Buttons/styles/button.ts
  opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};

  &:hover {
    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
    border-color: ${({ noBorder, disabled }) =>
      getBorderColor(noBorder, disabled, true)};
    background-color: ${({ ghost, disabled }) =>
  }

  &:focus {
    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
    border-color: ${({ noBorder, disabled }) =>
      getBorderColor(noBorder, disabled, true)};
    background-color: ${({ ghost, disabled }) =>
  }

  &:active {
    color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
    color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
    background-color: ${({ ghost, disabled }) =>
      getBackgroundColor(ghost, disabled, true)};
    opacity: 1;
diff --git a/...s/Buttons/styles/dropdown_button/index.js → ...s/Buttons/styles/dropdown_button/index.ts b/...s/Buttons/styles/dropdown_button/index.js → ...s/Buttons/styles/dropdown_button/index.ts
diff --git a/...ns/styles/dropdown_button/option_panel.js → ...ns/styles/dropdown_button/option_panel.ts b/...ns/styles/dropdown_button/option_panel.js → ...ns/styles/dropdown_button/option_panel.ts
diff --git a/...nts/Buttons/styles/follow_button/index.js → ...nts/Buttons/styles/follow_button/index.ts b/...nts/Buttons/styles/follow_button/index.js → ...nts/Buttons/styles/follow_button/index.ts
diff --git a/...ts/Buttons/styles/metircs/arrow_button.js → ...ts/Buttons/styles/metircs/arrow_button.ts b/...ts/Buttons/styles/metircs/arrow_button.js → ...ts/Buttons/styles/metircs/arrow_button.ts

 // arrow button should have width
 // otherwise the arrow will jump
 export const getWidth = (size, width = 30) => {
 export const getWidth = (size: string, width = 30): string => {
  switch (size) {
    case SIZE.TINY: {
      return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
  }
 }

 export const getIconSize = (size) => {
 export const getIconSize = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return `${TINY_SIZE}px`
  }
 }

 export const getFontSize = (size) => {
 export const getFontSize = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return `${TINY_SIZE}px`
  }
 }

 export const getMargin = (size, hover = false) => {
 export const getMargin = (size: string, hover = false): string => {
  switch (size) {
    case SIZE.TINY: {
      return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`
  }
 }

 export const getSimpleMargin = (size, hover = false) => {
 export const getSimpleMargin = (size: string, hover = false): string => {
  switch (size) {
    case SIZE.TINY: {
      return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`
diff --git a/...ents/Buttons/styles/metircs/arrow_link.js → ...ents/Buttons/styles/metircs/arrow_link.ts b/...ents/Buttons/styles/metircs/arrow_link.js → ...ents/Buttons/styles/metircs/arrow_link.ts
 import { SIZE } from '@/constant'

 export const getTextSize = (size) => {
 export const getTextSize = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return '12px'
  }
 }

 export const getIconSize = (size) => getTextSize(size)
 export const getIconSize = (size: string): string => getTextSize(size)
diff --git a/...mponents/Buttons/styles/metircs/button.js → ...mponents/Buttons/styles/metircs/button.ts b/...mponents/Buttons/styles/metircs/button.js → ...mponents/Buttons/styles/metircs/button.ts
 import { SIZE } from '@/constant'
 import { theme } from '@/utils'

 export const getColor = (ghost, disabled) => {
 import { TTheme } from '@/types'

 export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
  if (ghost) {
    return theme('button.primary')
  }
  return theme('button.fg')
 }

 export const getBackgroundColor = (ghost, disabled, hover = false) => {
 export const getBackgroundColor = (
  ghost: boolean,
  disabled: boolean,
  hover = false,
 ): TTheme => {
  if (ghost) {
    return 'transparent'
  }
  return hover ? theme('button.hoverBg') : theme('button.primary')
 }

 export const getBorderColor = (noBorder, disabled, hover = false) => {
 export const getBorderColor = (
  noBorder: boolean,
  disabled: boolean,
  hover = false,
 ): TTheme => {
  if (noBorder) {
    return 'transparent'
  }
  return hover ? theme('button.hoverBg') : theme('button.primary')
 }

 export const getHeight = (size) => {
 export const getHeight = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return '18px'
  }
 }

 export const getPadding = (size) => {
 export const getPadding = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return '1px 5px'
  }
 }

 export const getFontSize = (size) => {
 export const getFontSize = (size: string): string => {
  switch (size) {
    case SIZE.TINY: {
      return '11px'
diff --git a/...nts/Buttons/styles/notify_button/index.js → ...nts/Buttons/styles/notify_button/index.ts b/...nts/Buttons/styles/notify_button/index.js → ...nts/Buttons/styles/notify_button/index.ts
diff --git a/...ons/styles/or_button/horizontal_button.js → ...ons/styles/or_button/horizontal_button.ts b/...ons/styles/or_button/horizontal_button.js → ...ons/styles/or_button/horizontal_button.ts
diff --git a/...ponents/Buttons/styles/or_button/index.js → ...ponents/Buttons/styles/or_button/index.ts b/...ponents/Buttons/styles/or_button/index.js → ...ponents/Buttons/styles/or_button/index.ts
diff --git a/...ttons/styles/or_button/vertical_button.js → ...ttons/styles/or_button/vertical_button.ts b/...ttons/styles/or_button/vertical_button.js → ...ttons/styles/or_button/vertical_button.ts
diff --git a/...mponents/Buttons/styles/publish_button.js → ...mponents/Buttons/styles/publish_button.ts b/...mponents/Buttons/styles/publish_button.js → ...mponents/Buttons/styles/publish_button.ts
diff --git a/src/components/Buttons/tests/index.test.js → src/components/Buttons/tests/index.test.ts b/src/components/Buttons/tests/index.test.js → src/components/Buttons/tests/index.test.ts
diff --git a/.../BuyMeChuanChuan/styles/chuan_selector.js → .../BuyMeChuanChuan/styles/chuan_selector.ts b/.../BuyMeChuanChuan/styles/chuan_selector.js → .../BuyMeChuanChuan/styles/chuan_selector.ts
diff --git a/...omponents/BuyMeChuanChuan/styles/index.js → ...omponents/BuyMeChuanChuan/styles/index.ts b/...omponents/BuyMeChuanChuan/styles/index.js → ...omponents/BuyMeChuanChuan/styles/index.ts
diff --git a/.../BuyMeChuanChuan/styles/payment_footer.js → .../BuyMeChuanChuan/styles/payment_footer.ts b/.../BuyMeChuanChuan/styles/payment_footer.js → .../BuyMeChuanChuan/styles/payment_footer.ts
diff --git a/...ts/BuyMeChuanChuan/styles/unlogin_note.js → ...ts/BuyMeChuanChuan/styles/unlogin_note.ts b/...ts/BuyMeChuanChuan/styles/unlogin_note.js → ...ts/BuyMeChuanChuan/styles/unlogin_note.ts
diff --git a/...nents/BuyMeChuanChuan/tests/index.test.js → ...nents/BuyMeChuanChuan/tests/index.test.ts b/...nents/BuyMeChuanChuan/tests/index.test.js → ...nents/BuyMeChuanChuan/tests/index.test.ts
diff --git a/src/components/Charger/styles/index.js → src/components/Charger/styles/index.ts b/src/components/Charger/styles/index.js → src/components/Charger/styles/index.ts
diff --git a/src/components/Charger/tests/index.test.js → src/components/Charger/tests/index.test.ts b/src/components/Charger/tests/index.test.js → src/components/Charger/tests/index.test.ts
diff --git a/src/components/Checker/styles/index.js → src/components/Checker/styles/index.ts b/src/components/Checker/styles/index.js → src/components/Checker/styles/index.ts
diff --git a/src/components/Checker/styles/metric.js → src/components/Checker/styles/metric.ts b/src/components/Checker/styles/metric.js → src/components/Checker/styles/metric.ts
 import { SIZE } from '@/constant'

 export const getIconSize = (size) => {
 export const getIconSize = (size: string): string => {
  switch (size) {
    case SIZE.SMALL: {
      return '14px'
  }
 }

 export const getFontSize = (size) => {
 export const getFontSize = (size: string): string => {
  switch (size) {
    case SIZE.SMALL: {
      return '12px'
  }
 }

 export const getBorderRadius = (size) => {
 export const getBorderRadius = (size: string): string => {
  switch (size) {
    case SIZE.SMALL: {
      return '4px'
diff --git a/src/components/Checker/tests/index.test.js → src/components/Checker/tests/index.test.ts b/src/components/Checker/tests/index.test.js → src/components/Checker/tests/index.test.ts
diff --git a/src/components/CollapseMenu/styles/group.js → src/components/CollapseMenu/styles/group.ts b/src/components/CollapseMenu/styles/group.js → src/components/CollapseMenu/styles/group.ts
diff --git a/src/components/CollapseMenu/styles/index.js → src/components/CollapseMenu/styles/index.ts b/src/components/CollapseMenu/styles/index.js → src/components/CollapseMenu/styles/index.ts
diff --git a/src/components/CollapseMenu/styles/item.js → src/components/CollapseMenu/styles/item.ts b/src/components/CollapseMenu/styles/item.js → src/components/CollapseMenu/styles/item.ts
diff --git a/...mponents/CollapseMenu/tests/index.test.js → ...mponents/CollapseMenu/tests/index.test.ts b/...mponents/CollapseMenu/tests/index.test.js → ...mponents/CollapseMenu/tests/index.test.ts
diff --git a/src/components/Common/index.js → src/components/Common/index.ts b/src/components/Common/index.js → src/components/Common/index.ts
diff --git a/...ponents/CommunityFaceLogo/styles/index.js → ...ponents/CommunityFaceLogo/styles/index.ts b/...ponents/CommunityFaceLogo/styles/index.js → ...ponents/CommunityFaceLogo/styles/index.ts
diff --git a/...nts/CommunityFaceLogo/tests/index.test.js → ...nts/CommunityFaceLogo/tests/index.test.ts b/...nts/CommunityFaceLogo/tests/index.test.js → ...nts/CommunityFaceLogo/tests/index.test.ts
diff --git a/src/components/CommunityList/styles/index.js → src/components/CommunityList/styles/index.ts b/src/components/CommunityList/styles/index.js → src/components/CommunityList/styles/index.ts
diff --git a/...ponents/CommunityList/tests/index.test.js → ...ponents/CommunityList/tests/index.test.ts b/...ponents/CommunityList/tests/index.test.js → ...ponents/CommunityList/tests/index.test.ts
diff --git a/...onents/CommunityStatesPad/styles/index.js → ...onents/CommunityStatesPad/styles/index.ts b/...onents/CommunityStatesPad/styles/index.js → ...onents/CommunityStatesPad/styles/index.ts
diff --git a/...CommunityStatesPad/styles/number_group.js → ...CommunityStatesPad/styles/number_group.ts b/...CommunityStatesPad/styles/number_group.js → ...CommunityStatesPad/styles/number_group.ts
diff --git a/...unityStatesPad/styles/subscribed_title.js → ...unityStatesPad/styles/subscribed_title.ts b/...unityStatesPad/styles/subscribed_title.js → ...unityStatesPad/styles/subscribed_title.ts
diff --git a/...ts/CommunityStatesPad/tests/index.test.js → ...ts/CommunityStatesPad/tests/index.test.ts b/...ts/CommunityStatesPad/tests/index.test.js → ...ts/CommunityStatesPad/tests/index.test.ts
diff --git a/...onents/ConstructingThread/styles/index.js → ...onents/ConstructingThread/styles/index.ts b/...onents/ConstructingThread/styles/index.js → ...onents/ConstructingThread/styles/index.ts
diff --git a/...ts/ConstructingThread/tests/index.test.js → ...ts/ConstructingThread/tests/index.test.ts b/...ts/ConstructingThread/tests/index.test.js → ...ts/ConstructingThread/tests/index.test.ts
diff --git a/src/components/ContentBanner/styles/index.js → src/components/ContentBanner/styles/index.ts b/src/components/ContentBanner/styles/index.js → src/components/ContentBanner/styles/index.ts
diff --git a/.../ContentBanner/styles/reaction_numbers.js → .../ContentBanner/styles/reaction_numbers.ts b/.../ContentBanner/styles/reaction_numbers.js → .../ContentBanner/styles/reaction_numbers.ts
diff --git a/...ponents/ContentBanner/tests/index.test.js → ...ponents/ContentBanner/tests/index.test.ts b/...ponents/ContentBanner/tests/index.test.js → ...ponents/ContentBanner/tests/index.test.ts
diff --git a/...nts/ContentFilter/styles/filter_button.js → ...nts/ContentFilter/styles/filter_button.ts b/...nts/ContentFilter/styles/filter_button.js → ...nts/ContentFilter/styles/filter_button.ts
diff --git a/...nts/ContentFilter/styles/filter_result.js → ...nts/ContentFilter/styles/filter_result.ts b/...nts/ContentFilter/styles/filter_result.js → ...nts/ContentFilter/styles/filter_result.ts
diff --git a/src/components/ContentFilter/styles/index.js → src/components/ContentFilter/styles/index.ts b/src/components/ContentFilter/styles/index.js → src/components/ContentFilter/styles/index.ts
diff --git a/...nts/ContentFilter/styles/selected_tags.js → ...nts/ContentFilter/styles/selected_tags.ts b/...nts/ContentFilter/styles/selected_tags.js → ...nts/ContentFilter/styles/selected_tags.ts
diff --git a/...ponents/ContentFilter/tests/index.test.js → ...ponents/ContentFilter/tests/index.test.ts b/...ponents/ContentFilter/tests/index.test.js → ...ponents/ContentFilter/tests/index.test.ts
diff --git a/.../ContentSourceCard/styles/desktop_view.js → .../ContentSourceCard/styles/desktop_view.ts b/.../ContentSourceCard/styles/desktop_view.js → .../ContentSourceCard/styles/desktop_view.ts
diff --git a/...s/ContentSourceCard/styles/mobile_view.js → ...s/ContentSourceCard/styles/mobile_view.ts b/...s/ContentSourceCard/styles/mobile_view.js → ...s/ContentSourceCard/styles/mobile_view.ts
diff --git a/...ents/ContentSourceCard/styles/tag_list.js → ...ents/ContentSourceCard/styles/tag_list.ts b/...ents/ContentSourceCard/styles/tag_list.js → ...ents/ContentSourceCard/styles/tag_list.ts
diff --git a/...nts/ContentSourceCard/styles/user_list.js → ...nts/ContentSourceCard/styles/user_list.ts b/...nts/ContentSourceCard/styles/user_list.js → ...nts/ContentSourceCard/styles/user_list.ts
diff --git a/...nts/ContentSourceCard/tests/index.test.js → ...nts/ContentSourceCard/tests/index.test.ts b/...nts/ContentSourceCard/tests/index.test.js → ...nts/ContentSourceCard/tests/index.test.ts
diff --git a/...omponents/ContributorList/styles/index.js → ...omponents/ContributorList/styles/index.ts b/...omponents/ContributorList/styles/index.js → ...omponents/ContributorList/styles/index.ts
diff --git a/...nents/ContributorList/tests/index.test.js → ...nents/ContributorList/tests/index.test.ts b/...nents/ContributorList/tests/index.test.js → ...nents/ContributorList/tests/index.test.ts
diff --git a/...components/CrashErrorHint/styles/index.js → ...components/CrashErrorHint/styles/index.ts b/...components/CrashErrorHint/styles/index.js → ...components/CrashErrorHint/styles/index.ts
diff --git a/...onents/CrashErrorHint/tests/index.test.js → ...onents/CrashErrorHint/tests/index.test.ts b/...onents/CrashErrorHint/tests/index.test.js → ...onents/CrashErrorHint/tests/index.test.ts
diff --git a/...tomScroller/styles/horizontal_scroller.js → ...tomScroller/styles/horizontal_scroller.ts b/...tomScroller/styles/horizontal_scroller.js → ...tomScroller/styles/horizontal_scroller.ts
diff --git a/...components/CustomScroller/styles/index.js → ...components/CustomScroller/styles/index.ts b/...components/CustomScroller/styles/index.js → ...components/CustomScroller/styles/index.ts
diff --git a/...mponents/CustomScroller/styles/metrics.js → ...mponents/CustomScroller/styles/metrics.ts b/...mponents/CustomScroller/styles/metrics.js → ...mponents/CustomScroller/styles/metrics.ts

 const ShadowBgColor = '#022029'

 const horizontalShadowBg = (type) => {
 const horizontalShadowBg = (type: string): string => {
  switch (type) {
    case SIZE.SMALL: {
      return `-webkit-radial-gradient(
    }
  }
 }
 const verticalShadowBg = (type) => {
 const verticalShadowBg = (type: string): string => {
  switch (type) {
    case SIZE.SMALL: {
      return `
 }

 // horizontal getShadowBackground
 export const getShadowBackground = (type, direction = 'horizontal') => {
 export const getShadowBackground = (
  type: string,
  direction = 'horizontal',
 ): string => {
  return direction === 'horizontal'
    ? horizontalShadowBg(type)
    : verticalShadowBg(type)
 }

 // horizontal getShadowWidth
 export const getShadowSize = (type) => {
 export const getShadowSize = (type: string): string => {
  switch (type) {
    case SIZE.SMALL: {
      return '30px'
 }

 // vertical getShadowWidth
 export const getShadowHeight = (type) => {
 export const getShadowHeight = (type: string): string => {
  switch (type) {
    case SIZE.SMALL: {
      return '20px'
  }
 }

 const horizontalScrollbarHeight = (type) => {
 const horizontalScrollbarHeight = (type: string): string => {
  switch (type) {
    case SIZE.TINY: {
      return '3px'
  }
 }

 const verticalScrollbarWidth = (type) => {
 const verticalScrollbarWidth = (type: string): string => {
  switch (type) {
    case SIZE.TINY: {
      return '6px'

 // horizontal ScrollbarHeight
 // see https://kingsora.github.io/OverlayScrollbars/#!documentation/classnames
 export const getScrollbarThin = (type, direction) => {
 export const getScrollbarThin = (
  type: string,
  direction = 'horizontal',
 ): string => {
  return direction === 'horizontal'
    ? horizontalScrollbarHeight(type)
    : verticalScrollbarWidth(type)
diff --git a/...ustomScroller/styles/vertical_scroller.js → ...ustomScroller/styles/vertical_scroller.ts b/...ustomScroller/styles/vertical_scroller.js → ...ustomScroller/styles/vertical_scroller.ts
diff --git a/...onents/CustomScroller/tests/index.test.js → ...onents/CustomScroller/tests/index.test.ts b/...onents/CustomScroller/tests/index.test.js → ...onents/CustomScroller/tests/index.test.ts
diff --git a/...components/DigestSentence/styles/index.js → ...components/DigestSentence/styles/index.ts b/...components/DigestSentence/styles/index.js → ...components/DigestSentence/styles/index.ts
diff --git a/...onents/DigestSentence/tests/index.test.js → ...onents/DigestSentence/tests/index.test.ts b/...onents/DigestSentence/tests/index.test.js → ...onents/DigestSentence/tests/index.test.ts
diff --git a/src/components/DiscussLinker/styles/index.js → src/components/DiscussLinker/styles/index.ts b/src/components/DiscussLinker/styles/index.js → src/components/DiscussLinker/styles/index.ts
diff --git a/...ponents/DiscussLinker/tests/index.test.js → ...ponents/DiscussLinker/tests/index.test.ts b/...ponents/DiscussLinker/tests/index.test.js → ...ponents/DiscussLinker/tests/index.test.ts
diff --git a/src/components/DivideText/styles/index.js → src/components/DivideText/styles/index.ts b/src/components/DivideText/styles/index.js → src/components/DivideText/styles/index.ts
diff --git a/...components/DivideText/tests/index.test.js → ...components/DivideText/tests/index.test.ts b/...components/DivideText/tests/index.test.js → ...components/DivideText/tests/index.test.ts
diff --git a/src/components/DotDivider/styles/index.js → src/components/DotDivider/styles/index.ts b/src/components/DotDivider/styles/index.js → src/components/DotDivider/styles/index.ts
diff --git a/...components/DotDivider/tests/index.test.js → ...components/DotDivider/tests/index.test.ts b/...components/DotDivider/tests/index.test.js → ...components/DotDivider/tests/index.test.ts
diff --git a/src/components/Dropdown/styles/index.js → src/components/Dropdown/styles/index.ts b/src/components/Dropdown/styles/index.js → src/components/Dropdown/styles/index.ts
diff --git a/src/components/Dropdown/tests/index.test.js → src/components/Dropdown/tests/index.test.ts b/src/components/Dropdown/tests/index.test.js → src/components/Dropdown/tests/index.test.ts
diff --git a/...iber/styles/default_layout/active_view.js → ...iber/styles/default_layout/active_view.ts b/...iber/styles/default_layout/active_view.js → ...iber/styles/default_layout/active_view.ts
diff --git a/...er/styles/default_layout/inactive_view.js → ...er/styles/default_layout/inactive_view.ts b/...er/styles/default_layout/inactive_view.js → ...er/styles/default_layout/inactive_view.ts
diff --git a/...Subscriber/styles/default_layout/index.js → ...Subscriber/styles/default_layout/index.ts b/...Subscriber/styles/default_layout/index.js → ...Subscriber/styles/default_layout/index.ts
diff --git a/...EmailSubscriber/styles/email_hint_icon.js → ...EmailSubscriber/styles/email_hint_icon.ts b/...EmailSubscriber/styles/email_hint_icon.js → ...EmailSubscriber/styles/email_hint_icon.ts
diff --git a/...omponents/EmailSubscriber/styles/index.js → ...omponents/EmailSubscriber/styles/index.ts b/...omponents/EmailSubscriber/styles/index.js → ...omponents/EmailSubscriber/styles/index.ts
diff --git a/...s/EmailSubscriber/styles/simple_layout.js → ...s/EmailSubscriber/styles/simple_layout.ts b/...s/EmailSubscriber/styles/simple_layout.js → ...s/EmailSubscriber/styles/simple_layout.ts
diff --git a/...nents/EmailSubscriber/tests/index.test.js → ...nents/EmailSubscriber/tests/index.test.ts b/...nents/EmailSubscriber/tests/index.test.js → ...nents/EmailSubscriber/tests/index.test.ts
diff --git a/src/components/EmptyLabel/styles/index.js → src/components/EmptyLabel/styles/index.ts b/src/components/EmptyLabel/styles/index.js → src/components/EmptyLabel/styles/index.ts
diff --git a/...components/EmptyLabel/tests/index.test.js → ...components/EmptyLabel/tests/index.test.ts b/...components/EmptyLabel/tests/index.test.js → ...components/EmptyLabel/tests/index.test.ts
diff --git a/src/components/EmptyThread/styles/index.js → src/components/EmptyThread/styles/index.ts b/src/components/EmptyThread/styles/index.js → src/components/EmptyThread/styles/index.ts
diff --git a/...omponents/EmptyThread/tests/index.test.js → ...omponents/EmptyThread/tests/index.test.ts b/...omponents/EmptyThread/tests/index.test.js → ...omponents/EmptyThread/tests/index.test.ts
diff --git a/...ponents/ErrorPage/styles/code_snippets.js → ...ponents/ErrorPage/styles/code_snippets.ts b/...ponents/ErrorPage/styles/code_snippets.js → ...ponents/ErrorPage/styles/code_snippets.ts
diff --git a/src/components/ErrorPage/styles/index.js → src/components/ErrorPage/styles/index.ts b/src/components/ErrorPage/styles/index.js → src/components/ErrorPage/styles/index.ts
diff --git a/...omponents/ErrorPage/styles/spin_planet.js → ...omponents/ErrorPage/styles/spin_planet.ts b/...omponents/ErrorPage/styles/spin_planet.js → ...omponents/ErrorPage/styles/spin_planet.ts
diff --git a/src/components/ErrorPage/tests/index.test.js → src/components/ErrorPage/tests/index.test.ts b/src/components/ErrorPage/tests/index.test.js → src/components/ErrorPage/tests/index.test.ts
diff --git a/src/components/ExpandIcon/styles/index.js → src/components/ExpandIcon/styles/index.ts b/src/components/ExpandIcon/styles/index.js → src/components/ExpandIcon/styles/index.ts
diff --git a/src/components/ExpandIcon/styles/metric.js → src/components/ExpandIcon/styles/metric.ts b/src/components/ExpandIcon/styles/metric.js → src/components/ExpandIcon/styles/metric.ts
 import { theme } from '@/utils'
 import { SIZE } from '@/constant'

 export const getNormalColor = (type) => {
 import { TTheme } from '@/types'

 export const getNormalColor = (type: string): TTheme => {
  switch (type) {
    case 'green':
      return theme('baseColor.green')
  }
 }

 export const getActiveColor = (type) => {
 export const getActiveColor = (type: string): TTheme => {
  switch (type) {
    case 'green':
      return theme('baseColor.green')
  }
 }

 export const getNormalIconSize = (size) => {
 export const getNormalIconSize = (size: string): TTheme => {
  switch (size) {
    case SIZE.SMALL:
      return '11px'
  }
 }

 export const getActiveIconSize = (size) => {
 export const getActiveIconSize = (size: string): TTheme => {
  switch (size) {
    case SIZE.SMALL:
      return '12px'
  }
 }

 export const getNormalTextSize = (size) => {
 export const getNormalTextSize = (size: string): TTheme => {
  switch (size) {
    case SIZE.SMALL:
      return '11px'
diff --git a/...components/ExpandIcon/tests/index.test.js → ...components/ExpandIcon/tests/index.test.ts b/...components/ExpandIcon/tests/index.test.js → ...components/ExpandIcon/tests/index.test.ts
diff --git a/src/components/FaqPeekList/styles/index.js → src/components/FaqPeekList/styles/index.ts b/src/components/FaqPeekList/styles/index.js → src/components/FaqPeekList/styles/index.ts
diff --git a/...omponents/FaqPeekList/tests/index.test.js → ...omponents/FaqPeekList/tests/index.test.ts b/...omponents/FaqPeekList/tests/index.test.js → ...omponents/FaqPeekList/tests/index.test.ts
diff --git a/src/components/FeedsBar/styles/index.js → src/components/FeedsBar/styles/index.ts b/src/components/FeedsBar/styles/index.js → src/components/FeedsBar/styles/index.ts
diff --git a/src/components/FeedsBar/styles/list.js → src/components/FeedsBar/styles/list.ts b/src/components/FeedsBar/styles/list.js → src/components/FeedsBar/styles/list.ts
diff --git a/...onents/FeedsBar/styles/source_selector.js → ...onents/FeedsBar/styles/source_selector.ts b/...onents/FeedsBar/styles/source_selector.js → ...onents/FeedsBar/styles/source_selector.ts
diff --git a/src/components/FeedsBar/tests/index.test.js → src/components/FeedsBar/tests/index.test.ts b/src/components/FeedsBar/tests/index.test.js → src/components/FeedsBar/tests/index.test.ts
diff --git a/...onents/FiltersMenu/styles/filter/index.js → ...onents/FiltersMenu/styles/filter/index.ts b/...onents/FiltersMenu/styles/filter/index.js → ...onents/FiltersMenu/styles/filter/index.ts
diff --git a/src/components/FiltersMenu/styles/header.js → src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.js → src/components/FiltersMenu/styles/header.ts
diff --git a/src/components/FiltersMenu/styles/index.js → src/components/FiltersMenu/styles/index.ts b/src/components/FiltersMenu/styles/index.js → src/components/FiltersMenu/styles/index.ts
diff --git a/...omponents/FiltersMenu/tests/index.test.js → ...omponents/FiltersMenu/tests/index.test.ts b/...omponents/FiltersMenu/tests/index.test.js → ...omponents/FiltersMenu/tests/index.test.ts
diff --git a/src/components/FocusLine/styles/index.js → src/components/FocusLine/styles/index.ts b/src/components/FocusLine/styles/index.js → src/components/FocusLine/styles/index.ts
diff --git a/src/components/FocusLine/tests/index.test.js → src/components/FocusLine/tests/index.test.ts b/src/components/FocusLine/tests/index.test.js → src/components/FocusLine/tests/index.test.ts
diff --git a/src/components/Folder/styles/content.js → src/components/Folder/styles/content.ts b/src/components/Folder/styles/content.js → src/components/Folder/styles/content.ts
diff --git a/src/components/Folder/styles/footer.js → src/components/Folder/styles/footer.ts b/src/components/Folder/styles/footer.js → src/components/Folder/styles/footer.ts
diff --git a/src/components/Folder/styles/index.js → src/components/Folder/styles/index.ts b/src/components/Folder/styles/index.js → src/components/Folder/styles/index.ts
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		// Cache strategies
		// By default next-offline will precache all the Next.js webpack emitted files and the user-defined static ones (inside /static)
		// By default next-offline will precache all the Next.js webpack emitted
		// files and the user-defined static ones (inside /static)
		// see more: https://github.com/hanford/next-offline

		module.exports = {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -140,6 +140,8 @@
		"@commitlint/cli": "^8.2.0",
		"@commitlint/config-conventional": "^8.2.0",
		"@groupher/eslint-config-web": "2.0.9",
		"@types/jest": "^26.0.20",
		"@types/mocha": "^8.2.1",
		"@types/ramda": "^0.27.38",
		"@typescript-eslint/eslint-plugin": "^4.17.0",
		"@typescript-eslint/parser": "^4.17.0",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,7 +5,6 @@
		*/

		import React from 'react'
		import T from 'prop-types'

		import { buildLog } from '@/utils'

Expand All		@@ -14,14 +13,12 @@ import { Wrapper } from './styles'
		/* eslint-disable-next-line */
		const log = buildLog('c:AlertBar:index')

		const AlertBar = ({ children }) => {
		return <Wrapper testid="alertBar">{children}</Wrapper>
		type IProps = {
		children: React.ReactNode
		}

		AlertBar.propTypes = {
		children: T.oneOfType([T.string, T.node]).isRequired,
		constAlertBar: React.FC<IProps> = ({ children }) => {
		return <Wrapper testid="alertBar">{children}</Wrapper>
		}

		AlertBar.defaultProps = {}

		export default React.memo(AlertBar)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import { SIZE } from '@/constant'
		* NOTE: Li size should always smaller than the avatar size
		*/

		export const getLiSize = (size) => {
		export const getLiSize = (size: string): string => {
		switch (size) {
		case SIZE.SMALL: {
		return '15px'
Expand All		@@ -19,7 +19,10 @@ export const getLiSize = (size) => {
		}
		}

		export const getAvatarSize = (size, fmt = 'string') => {
		export const getAvatarSize = (
		size: string,
		fmt = 'string',
		): string \| number => {
		switch (size) {
		case SIZE.SMALL: {
		return fmt === 'string' ? '24px' : 24
Expand All		@@ -35,21 +38,21 @@ export const getAvatarSize = (size, fmt = 'string') => {
		}
		}

		export const getTotalCountSize = (total) => {
		export const getTotalCountSize = (total: number): string => {
		if (total < 99) return '13px'
		if (total >= 100 && total <= 999) return '12px'
		return '10px'
		}

		export const getMoreTextWidth = (total) => {
		export const getMoreTextWidth = (total: number): string => {
		if (total < 10) return '23px'
		if (total >= 10 && total <= 99) return '32px'
		if (total >= 100 && total <= 999) return '44px'

		return '52px'
		}

		export const getUlMarginRight = (total) => {
		export const getUlMarginRight = (total: number): string => {
		if (total < 10) return '-8px'
		if (total >= 10 && total <= 99) return '-2px'
		if (total >= 100 && total <= 999) return '10px'
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,7 +41,7 @@ export const Wrapper = styled.button`
		opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};

		&:hover {
		color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
		color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
		border-color: ${({ noBorder, disabled }) =>
		getBorderColor(noBorder, disabled, true)};
		background-color: ${({ ghost, disabled }) =>
Expand All		@@ -51,7 +51,7 @@ export const Wrapper = styled.button`
		}

		&:focus {
		color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
		color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
		border-color: ${({ noBorder, disabled }) =>
		getBorderColor(noBorder, disabled, true)};
		background-color: ${({ ghost, disabled }) =>
Expand All		@@ -60,7 +60,7 @@ export const Wrapper = styled.button`
		}

		&:active {
		color: ${({ ghost, disabled }) => getColor(ghost, disabled, true)};
		color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
		background-color: ${({ ghost, disabled }) =>
		getBackgroundColor(ghost, disabled, true)};
		opacity: 1;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,7 +19,7 @@ const LARGE_MARGIN_HOVER = 10

		// arrow button should have width
		// otherwise the arrow will jump
		export const getWidth = (size, width = 30) => {
		export const getWidth = (size: string, width = 30): string => {
		switch (size) {
		case SIZE.TINY: {
		return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
Expand All		@@ -36,7 +36,7 @@ export const getWidth = (size, width = 30) => {
		}
		}

		export const getIconSize = (size) => {
		export const getIconSize = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return `${TINY_SIZE}px`
Expand All		@@ -53,7 +53,7 @@ export const getIconSize = (size) => {
		}
		}

		export const getFontSize = (size) => {
		export const getFontSize = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return `${TINY_SIZE}px`
Expand All		@@ -70,7 +70,7 @@ export const getFontSize = (size) => {
		}
		}

		export const getMargin = (size, hover = false) => {
		export const getMargin = (size: string, hover = false): string => {
		switch (size) {
		case SIZE.TINY: {
		return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`
Expand All		@@ -87,7 +87,7 @@ export const getMargin = (size, hover = false) => {
		}
		}

		export const getSimpleMargin = (size, hover = false) => {
		export const getSimpleMargin = (size: string, hover = false): string => {
		switch (size) {
		case SIZE.TINY: {
		return !hover ? `${TINY_MARGIN}px` : `${TINY_MARGIN_HOVER}px`
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import { SIZE } from '@/constant'

		export const getTextSize = (size) => {
		export const getTextSize = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return '12px'
Expand All		@@ -20,4 +20,4 @@ export const getTextSize = (size) => {
		}
		}

		export const getIconSize = (size) => getTextSize(size)
		export const getIconSize = (size: string): string => getTextSize(size)
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,9 @@
		import { SIZE } from '@/constant'
		import { theme } from '@/utils'

		export const getColor = (ghost, disabled) => {
		import { TTheme } from '@/types'

		export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
		if (ghost) {
		return theme('button.primary')
		}
Expand All		@@ -12,7 +14,11 @@ export const getColor = (ghost, disabled) => {
		return theme('button.fg')
		}

		export const getBackgroundColor = (ghost, disabled, hover = false) => {
		export const getBackgroundColor = (
		ghost: boolean,
		disabled: boolean,
		hover = false,
		): TTheme => {
		if (ghost) {
		return 'transparent'
		}
Expand All		@@ -23,7 +29,11 @@ export const getBackgroundColor = (ghost, disabled, hover = false) => {
		return hover ? theme('button.hoverBg') : theme('button.primary')
		}

		export const getBorderColor = (noBorder, disabled, hover = false) => {
		export const getBorderColor = (
		noBorder: boolean,
		disabled: boolean,
		hover = false,
		): TTheme => {
		if (noBorder) {
		return 'transparent'
		}
Expand All		@@ -34,7 +44,7 @@ export const getBorderColor = (noBorder, disabled, hover = false) => {
		return hover ? theme('button.hoverBg') : theme('button.primary')
		}

		export const getHeight = (size) => {
		export const getHeight = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return '18px'
Expand All		@@ -50,7 +60,7 @@ export const getHeight = (size) => {
		}
		}

		export const getPadding = (size) => {
		export const getPadding = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return '1px 5px'
Expand All		@@ -66,7 +76,7 @@ export const getPadding = (size) => {
		}
		}

		export const getFontSize = (size) => {
		export const getFontSize = (size: string): string => {
		switch (size) {
		case SIZE.TINY: {
		return '11px'
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,7 +2,7 @@ import { SIZE } from '@/constant'

		const ShadowBgColor = '#022029'

		const horizontalShadowBg = (type) => {
		const horizontalShadowBg = (type: string): string => {
		switch (type) {
		case SIZE.SMALL: {
		return `-webkit-radial-gradient(
Expand All		@@ -26,7 +26,7 @@ const horizontalShadowBg = (type) => {
		}
		}
		}
		const verticalShadowBg = (type) => {
		const verticalShadowBg = (type: string): string => {
		switch (type) {
		case SIZE.SMALL: {
		return `
Expand All		@@ -44,14 +44,17 @@ const verticalShadowBg = (type) => {
		}

		// horizontal getShadowBackground
		export const getShadowBackground = (type, direction = 'horizontal') => {
		export const getShadowBackground = (
		type: string,
		direction = 'horizontal',
		): string => {
		return direction === 'horizontal'
		? horizontalShadowBg(type)
		: verticalShadowBg(type)
		}

		// horizontal getShadowWidth
		export const getShadowSize = (type) => {
		export const getShadowSize = (type: string): string => {
		switch (type) {
		case SIZE.SMALL: {
		return '30px'
Expand All		@@ -67,7 +70,7 @@ export const getShadowSize = (type) => {
		}

		// vertical getShadowWidth
		export const getShadowHeight = (type) => {
		export const getShadowHeight = (type: string): string => {
		switch (type) {
		case SIZE.SMALL: {
		return '20px'
Expand All		@@ -82,7 +85,7 @@ export const getShadowHeight = (type) => {
		}
		}

		const horizontalScrollbarHeight = (type) => {
		const horizontalScrollbarHeight = (type: string): string => {
		switch (type) {
		case SIZE.TINY: {
		return '3px'
Expand All		@@ -100,7 +103,7 @@ const horizontalScrollbarHeight = (type) => {
		}
		}

		const verticalScrollbarWidth = (type) => {
		const verticalScrollbarWidth = (type: string): string => {
		switch (type) {
		case SIZE.TINY: {
		return '6px'
Expand All		@@ -120,7 +123,10 @@ const verticalScrollbarWidth = (type) => {

		// horizontal ScrollbarHeight
		// see https://kingsora.github.io/OverlayScrollbars/#!documentation/classnames
		export const getScrollbarThin = (type, direction) => {
		export const getScrollbarThin = (
		type: string,
		direction = 'horizontal',
		): string => {
		return direction === 'horizontal'
		? horizontalScrollbarHeight(type)
		: verticalScrollbarWidth(type)
Expand Down