refactor(ts-js): more ts day3

.eslintrc.js

@@ -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'],
       },

package.json

@@ -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",
@@ -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",

src/components/AlertBar/styles/index.ts

@@ -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;

src/components/ArticleActionsPanel/styles/index.ts

@@ -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;
@@ -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;

src/components/ArticleEditToolbar/styles/copyright_selector.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 
+import { TActive } from '@/spec'
 import { theme, css } from '@/utils'
 import Img from '@/Img'
 
@@ -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')};

src/components/ArticleItemPrefixLabel/styles/index.ts

@@ -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;

src/components/AvatarsRow/styles/index.ts

@@ -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;
@@ -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;
@@ -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;
@@ -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;

src/components/AvatarsRow/styles/more_item.ts

@@ -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;
@@ -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;

src/components/Buttons/OrButton/HorizontalButton.js → src/components/Buttons/OrButton/HorizontalButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import T from 'prop-types'
 
 import { SIZE } from '@/constant'
+import { TButtonSize } from '@/spec'
 
 import {
   Wrapper,
@@ -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
@@ -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

src/components/Buttons/styles/arrow_button.ts

@@ -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};
@@ -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)};
 
@@ -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)};
 

src/components/Buttons/styles/arrow_link.ts

@@ -12,7 +12,8 @@ export const Wrapper = styled.a`
 
   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)};
 
@@ -21,15 +22,16 @@ export const Text = styled.div`
     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;

src/components/Buttons/styles/button.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { lighten } from 'polished'
 
 import { css, theme } from '@/utils'
+import { TButtonSize, TButton } from '@/spec'
 
 import {
   getColor,
@@ -12,7 +13,7 @@ import {
   getFontSize,
 } from './metircs/button'
 
-export const Wrapper = styled.button`
+export const Wrapper = styled.button<TButton>`
   ${css.flex('align-both')};
   -webkit-appearance: button;
   outline: none;
@@ -66,21 +67,21 @@ export const Wrapper = styled.button`
     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%;

src/components/Buttons/styles/dropdown_button/option_panel.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 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};
@@ -34,12 +34,12 @@ export const IconWrapper = styled.div`
   ${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)};

src/components/Buttons/styles/follow_button/index.ts

@@ -23,7 +23,7 @@ export const Popinfo = styled.div`
   padding: 5px 8px;
 `
 
-export const LoadingIcon = styled(BtnIcon)`
+export const LoadingIcon = styled(BtnIcon)<{ light: boolean }>`
   fill: ${({ light }) =>
     light ? theme('button.fg') : theme('thread.articleTitle')};
 

src/components/Buttons/styles/metircs/button.ts

@@ -1,7 +1,7 @@
 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) {