Mar 13, 2021 · Mar 13, 2021 · Mar 13, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
          '@/Img': 'src/components/Img',
          '@/SvgIcons': 'src/components/SvgIcons',
          '@/i18n': 'i18n',
          '@/types': 'src/types',
          '@/spec': 'src/spec',
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
diff --git a/package.json b/package.json
    "@types/mocha": "^8.2.1",
    "@types/ramda": "^0.27.38",
    "@types/react": "^17.0.3",
    "@types/styled-components": "^5.1.8",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
    "babel-eslint": "^10.0.2",
    "jest": "26.2.2",
    "npm-run-all": "^4.1.1",
    "plop": "2.7.4",
    "prettier": "2.0.5",
    "prettier": "2.2.1",
    "pretty-quick": "^1.10.0",
    "react-test-renderer": "16.10.0",
    "shelljs": "0.8.4",
diff --git a/src/components/AlertBar/styles/index.ts b/src/components/AlertBar/styles/index.ts
 import styled from 'styled-components'

 import { TTestable } from '@/spec'
 // import Img from '@/Img'
 // import { theme } from '@/utils'

 export const Wrapper = styled.div.attrs((props) => ({
  'data-test-id':props.testid,
 }))`
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
  'data-test-id': testid,
 }))<TTestable>`
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
diff --git a/src/components/ArticleActionsPanel/styles/index.ts b/src/components/ArticleActionsPanel/styles/index.ts
  padding-left: 10px;
  padding-bottom: 0;
 `
 export const Option = styled.div`
 export const Option = styled.div<{ red: boolean }>`
  ${css.flex('align-center')};
  color: ${theme('banner.desc')};
  margin-bottom: 8px;
    cursor: pointer;
  }
 `
 export const OptionIcon = styled(Img)`
 type TOptionIcon = {
  red: boolean
  reverse: boolean
 }
 export const OptionIcon = styled(Img)<TOptionIcon>`
  fill: ${theme('banner.desc')};
  ${css.size(18)};
  margin-right: 6px;
diff --git a/src/components/ArticleEditToolbar/styles/copyright_selector.ts b/src/components/ArticleEditToolbar/styles/copyright_selector.ts
 import styled from 'styled-components'

 import { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'

    color: ${theme('editor.title')};
  }
 `
 export const CheckIcon = styled(Img)`
 export const CheckIcon = styled(Img)<TActive>`
  fill: ${theme('editor.content')};
  ${css.size(18)};
  margin-top: 2px;
  margin-left: 3px;
  visibility: ${({ active }) => (active ? 'visiable' : 'hidden')};
  visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
 `
 export const CheckText = styled.div`
  color: ${theme('editor.content')};
diff --git a/src/components/ArticleItemPrefixLabel/styles/index.ts b/src/components/ArticleItemPrefixLabel/styles/index.ts
 import { theme, css, pixelAdd } from '@/utils'
 import PinSVG from '@/SvgIcons/PinSVG'

 export const ReadedLabel = styled.div`
 export const ReadedLabel = styled.div<{ topOffset: string }>`
  background: ${theme('thread.articleDigest')};
  width: 8px;
  height: 3px;
diff --git a/src/components/AvatarsRow/styles/index.ts b/src/components/AvatarsRow/styles/index.ts
 import ImgFallback from '@/components/ImgFallback'
 import { getLiSize, getAvatarSize, getUlMarginRight } from './metric'

 export const Wrapper = styled.ul`
 export const Wrapper = styled.ul<{ total: number }>`
  ${css.flex('align-center')};
  flex-direction: row-reverse;
  list-style-type: none;
  margin-right: ${({ total }) => getUlMarginRight(total)};
 `
 // height: 49px;
 const BaseAvatarItem = styled.li`
 type TBaseAvatarItem = { size: string; noHoverMargin: string }
 const BaseAvatarItem = styled.li<TBaseAvatarItem>`
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
 export const TotalOneOffset = styled.span`
  margin-right: 10px;
 `
 export const AvatarsImg = styled(Img)`
 export const AvatarsImg = styled(Img)<{ size: string }>`
  border: 2px solid;
  border-color: ${theme('thread.commentsUserBorder')};
  border-radius: 100px 100px 100px 100px;

  text-align: center;
 `
 export const AvatarsMore = styled.span`
 type TAvatarsMore = { size: string; total: number }
 export const AvatarsMore = styled.span<TAvatarsMore>`
  ${css.flex('align-both')};
  font-size: 14px;
  border-color: #113744;
diff --git a/src/components/AvatarsRow/styles/more_item.ts b/src/components/AvatarsRow/styles/more_item.ts
 import { Wrapper as BaseWrapper, AvatarsMore } from './index'
 import { getAvatarSize, getMoreTextWidth } from './metric'

 const BaseAvatarItem = styled.li`
 const BaseAvatarItem = styled.li<{ size: string }>`
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
 export const Wrapper = styled(BaseAvatarItem)`
  ${css.media.mobile`display: none`};
 `
 export const NumbersMore = styled(AvatarsMore)`
 type TNumbersMore = { size: string; total: number }
 export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
  height: ${({ size }) => getAvatarSize(size)};
  width: ${({ total }) => getMoreTextWidth(total)};
  font-weight: 400;
diff --git a/...ents/Buttons/OrButton/HorizontalButton.js → ...nts/Buttons/OrButton/HorizontalButton.tsx b/...ents/Buttons/OrButton/HorizontalButton.js → ...nts/Buttons/OrButton/HorizontalButton.tsx
 import React from 'react'
 import T from 'prop-types'

 import { SIZE } from '@/constant'
 import { TButtonSize } from '@/spec'

 import {
  Wrapper,
  RightButton,
 } from '../styles/or_button/horizontal_button'

 // const OrButton = ({ children, onClick, size }) => {
 const HorizontalButton = ({ onClick, size, activeKey, group }) => {
 type TProps = {
  activeKey: string
  size?: TButtonSize
  onClick: (key: string) => void
  group: {
    key: string
    title: string
  }[]
 }

 const HorizontalButton: React.FC<TProps> = ({
  onClick,
  size = SIZE.SMALL as TButtonSize,
  activeKey,
  group,
 }) => {
  return (
    <Wrapper size={size}>
      <LeftButton
  )
 }

 HorizontalButton.propTypes = {
  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
  onClick: T.func,
  activeKey: T.string,
  group: T.arrayOf(
    T.shape({
      key: T.string,
      title: T.string,
    }),
  ),
 }

 HorizontalButton.defaultProps = {
  // children: 'Button',
  size: SIZE.MEDIUM,
  // eslint-disable-next-line no-console
  onClick: console.log,
  activeKey: 'hello',
  group: [
    {
      key: 'hello',
      title: 'hello',
    },
    {
      key: 'cps',
      title: 'cps',
    },
  ],
 }

 export default HorizontalButton
diff --git a/src/components/Buttons/styles/arrow_button.ts b/src/components/Buttons/styles/arrow_button.ts
  getSimpleMargin,
 } from './metircs/arrow_button'

 export const Wrapper = styled.div`
 type TWrapper = {
  disabled: boolean
  dimWhenIdle: boolean
  size: string
  width: number
 }
 export const Wrapper = styled.div<TWrapper>`
  ${css.flex('align-center')};
  opacity: ${({ dimWhenIdle, disabled }) =>
    dimWhenIdle || disabled ? '0.65' : 1};
  }
  transition: all 0.25s;
 `
 export const Text = styled.div`
 export const Text = styled.div<{ size: string }>`
  font-size: ${({ size }) => getFontSize(size)};
  color: #327ca1;
 `
 export const Icon = styled(Img)`
 export const Icon = styled(Img)<{ size: string }>`
  fill: #327ca1;
  width: ${({ size }) => getIconSize(size)};
  height: ${({ size }) => getIconSize(size)};
  display: block;
  transition: all 0.2s;
 `
 export const LeftIcon = styled(Icon)`
 type TIcon = { size: string; arrowStyle: string; disabled: boolean }
 export const LeftIcon = styled(Icon)<TIcon>`
  margin-right: ${({ size, arrowStyle }) =>
    arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};

    fill: #327ca1;
  }
 `
 export const RightIcon = styled(Icon)`
 export const RightIcon = styled(Icon)<TIcon>`
  margin-left: ${({ size, arrowStyle }) =>
    arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};

diff --git a/src/components/Buttons/styles/arrow_link.ts b/src/components/Buttons/styles/arrow_link.ts

  transition: all 0.25s;
 `
 export const Text = styled.div`
 type TText = { hoverColor: string; size: string }
 export const Text = styled.div<TText>`
  color: ${({ color }) => color || theme('thread.articleDigest')};
  font-size: ${({ size }) => getTextSize(size)};

    visibility: visible;
  }
 `
 const Icon = styled(Img)`
 type TIcon = { color: string; size: string }
 const Icon = styled(Img)<TIcon>`
  fill: ${({ color }) => color || theme('thread.articleDigest')};
  width: ${({ size }) => getIconSize(size)};
  height: ${({ size }) => getIconSize(size)};
  display: block;
  transition: all 0.2s;
  opacity: 0.8;
 `
 export const RightIcon = styled(Icon)`
 export const RightIcon = styled(Icon)<{ hoverColor: string }>`
  transform: rotate(180deg);
  margin-left: 6px;
  visibility: hidden;
diff --git a/src/components/Buttons/styles/button.ts b/src/components/Buttons/styles/button.ts
 import { lighten } from 'polished'

 import { css, theme } from '@/utils'
 import { TButtonSize, TButton } from '@/spec'

 import {
  getColor,
  getFontSize,
 } from './metircs/button'

 export const Wrapper = styled.button`
 export const Wrapper = styled.button<TButton>`
  ${css.flex('align-both')};
  -webkit-appearance: button;
  outline: none;
    opacity: 1;
  }
 `
 export const ChildrenWrapper = styled.div`
 export const ChildrenWrapper = styled.div<{ size: TButtonSize }>`
  ${css.flex('align-both')};
  font-size: ${({ size }) => getFontSize(size)};
  position: relative;
  z-index: 2;
 `
 export const RealChildren = styled.div`
 export const RealChildren = styled.div<{ loading: boolean }>`
  ${css.flex('align-both')};
  opacity: ${({ loading }) => (loading ? 0 : 1)};
 `
 export const LoadingText = styled.div`
 export const LoadingText = styled.div<{ loading: boolean }>`
  opacity: ${({ loading }) => (!loading ? 0 : 1)};
  position: absolute;
 `
 export const LoadingMask = styled.div`
 export const LoadingMask = styled.div<{ width: string }>`
  position: absolute;
  width: ${({ width }) => width};
  height: 100%;
diff --git a/src/components/Buttons/styles/dropdown_button/option_panel.ts b/src/components/Buttons/styles/dropdown_button/option_panel.ts
 import Img from '@/Img'
 import { css, theme } from '@/utils'

 export const Wrapper = styled.div`
 export const Wrapper = styled.div<{ panelMinWidth: string }>`
  ${css.flexColumn()};
  width: 100%;
  min-width: ${({ panelMinWidth }) => panelMinWidth};
  ${css.flex('justify-center')};
  width: 28px;
 `
 export const Icon = styled(Img)`
 /* width: ${({ bigger }) => (bigger ? '24px' : '18px')};
  height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */
 export const Icon = styled(Img)<{ index: number }>`
  fill: ${theme('button.primary')};
  ${css.size(16)};
  margin-top: 4px;
  /* width: ${({ bigger }) => (bigger ? '24px' : '18px')};
  height: ${({ bigger }) => (bigger ? '24px' : '18px')}; */
  display: block;

  opacity: ${({ index }) => (index === 0 ? 1 : 0)};
diff --git a/src/components/Buttons/styles/follow_button/index.ts b/src/components/Buttons/styles/follow_button/index.ts
  padding: 5px 8px;
 `

 export const LoadingIcon = styled(BtnIcon)`
 export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>`
  fill: ${({ light }) =>
    light ? theme('button.fg') : theme('thread.articleTitle')};

diff --git a/src/components/Buttons/styles/metircs/button.ts b/src/components/Buttons/styles/metircs/button.ts
 import { SIZE } from '@/constant'
 import { theme } from '@/utils'

 import { TTheme } from '@/types'
 import { TTheme } from '@/spec'

 export const getColor = (ghost: boolean, disabled: boolean): TTheme => {
  if (ghost) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,7 +33,7 @@ module.exports = {
		'@/Img': 'src/components/Img',
		'@/SvgIcons': 'src/components/SvgIcons',
		'@/i18n': 'i18n',
		'@/types': 'src/types',
		'@/spec': 'src/spec',
		},
		extensions: ['.js', '.jsx', '.ts', '.tsx'],
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -144,6 +144,7 @@
		"@types/mocha": "^8.2.1",
		"@types/ramda": "^0.27.38",
		"@types/react": "^17.0.3",
		"@types/styled-components": "^5.1.8",
		"@typescript-eslint/eslint-plugin": "^4.17.0",
		"@typescript-eslint/parser": "^4.17.0",
		"babel-eslint": "^10.0.2",
Expand All		@@ -161,7 +162,7 @@
		"jest": "26.2.2",
		"npm-run-all": "^4.1.1",
		"plop": "2.7.4",
		"prettier": "2.0.5",
		"prettier": "2.2.1",
		"pretty-quick": "^1.10.0",
		"react-test-renderer": "16.10.0",
		"shelljs": "0.8.4",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,12 @@
		import styled from 'styled-components'

		import { TTestable } from '@/spec'
		// import Img from '@/Img'
		// import { theme } from '@/utils'

		export const Wrapper = styled.div.attrs((props) => ({
		'data-test-id':props.testid,
		}))`
		export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
		'data-test-id': testid,
		}))<TTestable>`
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ export const Wrapper = styled.div`
		padding-left: 10px;
		padding-bottom: 0;
		`
		export const Option = styled.div`
		export const Option = styled.div<{ red: boolean }>`
		${css.flex('align-center')};
		color: ${theme('banner.desc')};
		margin-bottom: 8px;
Expand All		@@ -20,7 +20,11 @@ export const Option = styled.div`
		cursor: pointer;
		}
		`
		export const OptionIcon = styled(Img)`
		type TOptionIcon = {
		red: boolean
		reverse: boolean
		}
		export const OptionIcon = styled(Img)<TOptionIcon>`
		fill: ${theme('banner.desc')};
		${css.size(18)};
		margin-right: 6px;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import styled from 'styled-components'

		import { TActive } from '@/spec'
		import { theme, css } from '@/utils'
		import Img from '@/Img'

Expand All		@@ -14,12 +15,12 @@ export const Selector = styled.div`
		color: ${theme('editor.title')};
		}
		`
		export const CheckIcon = styled(Img)`
		export const CheckIcon = styled(Img)<TActive>`
		fill: ${theme('editor.content')};
		${css.size(18)};
		margin-top: 2px;
		margin-left: 3px;
		visibility: ${({ active }) => (active ? 'visiable' : 'hidden')};
		visibility: ${({ active }) => (active ? 'visible' : 'hidden')};
		`
		export const CheckText = styled.div`
		color: ${theme('editor.content')};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import styled from 'styled-components'
		import { theme, css, pixelAdd } from '@/utils'
		import PinSVG from '@/SvgIcons/PinSVG'

		export const ReadedLabel = styled.div`
		export const ReadedLabel = styled.div<{ topOffset: string }>`
		background: ${theme('thread.articleDigest')};
		width: 8px;
		height: 3px;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,7 +6,7 @@ import { theme, css } from '@/utils'
		import ImgFallback from '@/components/ImgFallback'
		import { getLiSize, getAvatarSize, getUlMarginRight } from './metric'

		export const Wrapper = styled.ul`
		export const Wrapper = styled.ul<{ total: number }>`
		${css.flex('align-center')};
		flex-direction: row-reverse;
		list-style-type: none;
Expand All		@@ -15,7 +15,8 @@ export const Wrapper = styled.ul`
		margin-right: ${({ total }) => getUlMarginRight(total)};
		`
		// height: 49px;
		const BaseAvatarItem = styled.li`
		type TBaseAvatarItem = { size: string; noHoverMargin: string }
		const BaseAvatarItem = styled.li<TBaseAvatarItem>`
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
Expand DownExpand Up		@@ -44,7 +45,7 @@ export const AvatarsItem = styled(BaseAvatarItem)`
		export const TotalOneOffset = styled.span`
		margin-right: 10px;
		`
		export const AvatarsImg = styled(Img)`
		export const AvatarsImg = styled(Img)<{ size: string }>`
		border: 2px solid;
		border-color: ${theme('thread.commentsUserBorder')};
		border-radius: 100px 100px 100px 100px;
Expand All		@@ -59,7 +60,8 @@ export const AvatarsImg = styled(Img)`

		text-align: center;
		`
		export const AvatarsMore = styled.span`
		type TAvatarsMore = { size: string; total: number }
		export const AvatarsMore = styled.span<TAvatarsMore>`
		${css.flex('align-both')};
		font-size: 14px;
		border-color: #113744;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,7 +5,7 @@ import { css, theme } from '@/utils'
		import { Wrapper as BaseWrapper, AvatarsMore } from './index'
		import { getAvatarSize, getMoreTextWidth } from './metric'

		const BaseAvatarItem = styled.li`
		const BaseAvatarItem = styled.li<{ size: string }>`
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
Expand All		@@ -21,7 +21,8 @@ const BaseAvatarItem = styled.li`
		export const Wrapper = styled(BaseAvatarItem)`
		${css.media.mobile`display: none`};
		`
		export const NumbersMore = styled(AvatarsMore)`
		type TNumbersMore = { size: string; total: number }
		export const NumbersMore = styled(AvatarsMore)<TNumbersMore>`
		height: ${({ size }) => getAvatarSize(size)};
		width: ${({ total }) => getMoreTextWidth(total)};
		font-weight: 400;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import React from 'react'
		import T from 'prop-types'

		import { SIZE } from '@/constant'
		import { TButtonSize } from '@/spec'

		import {
		Wrapper,
Expand All		@@ -10,8 +10,22 @@ import {
		RightButton,
		} from '../styles/or_button/horizontal_button'

		// const OrButton = ({ children, onClick, size }) => {
		const HorizontalButton = ({ onClick, size, activeKey, group }) => {
		type TProps = {
		activeKey: string
		size?: TButtonSize
		onClick: (key: string) => void
		group: {
		key: string
		title: string
		}[]
		}

		const HorizontalButton: React.FC<TProps> = ({
		onClick,
		size = SIZE.SMALL as TButtonSize,
		activeKey,
		group,
		}) => {
		return (
		<Wrapper size={size}>
		<LeftButton
Expand All		@@ -33,34 +47,4 @@ const HorizontalButton = ({ onClick, size, activeKey, group }) => {
		)
		}

		HorizontalButton.propTypes = {
		size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
		onClick: T.func,
		activeKey: T.string,
		group: T.arrayOf(
		T.shape({
		key: T.string,
		title: T.string,
		}),
		),
		}

		HorizontalButton.defaultProps = {
		// children: 'Button',
		size: SIZE.MEDIUM,
		// eslint-disable-next-line no-console
		onClick: console.log,
		activeKey: 'hello',
		group: [
		{
		key: 'hello',
		title: 'hello',
		},
		{
		key: 'cps',
		title: 'cps',
		},
		],
		}

		export default HorizontalButton
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,7 +11,13 @@ import {
		getSimpleMargin,
		} from './metircs/arrow_button'

		export const Wrapper = styled.div`
		type TWrapper = {
		disabled: boolean
		dimWhenIdle: boolean
		size: string
		width: number
		}
		export const Wrapper = styled.div<TWrapper>`
		${css.flex('align-center')};
		opacity: ${({ dimWhenIdle, disabled }) =>
		dimWhenIdle \|\| disabled ? '0.65' : 1};
Expand All		@@ -23,18 +29,19 @@ export const Wrapper = styled.div`
		}
		transition: all 0.25s;
		`
		export const Text = styled.div`
		export const Text = styled.div<{ size: string }>`
		font-size: ${({ size }) => getFontSize(size)};
		color: #327ca1;
		`
		export const Icon = styled(Img)`
		export const Icon = styled(Img)<{ size: string }>`
		fill: #327ca1;
		width: ${({ size }) => getIconSize(size)};
		height: ${({ size }) => getIconSize(size)};
		display: block;
		transition: all 0.2s;
		`
		export const LeftIcon = styled(Icon)`
		type TIcon = { size: string; arrowStyle: string; disabled: boolean }
		export const LeftIcon = styled(Icon)<TIcon>`
		margin-right: ${({ size, arrowStyle }) =>
		arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};

Expand All		@@ -51,7 +58,7 @@ export const LeftIcon = styled(Icon)`
		fill: #327ca1;
		}
		`
		export const RightIcon = styled(Icon)`
		export const RightIcon = styled(Icon)<TIcon>`
		margin-left: ${({ size, arrowStyle }) =>
		arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};

Expand Down