feat(global): try TS workflow

.eslintignore

@@ -0,0 +1,5 @@
+!.eslintrc.js
+.gitignore
+*.json
+*.lock
+*.hbs

.eslintrc.js

@@ -1,8 +1,20 @@
 // see details:
 // https://github.com/groupher/eslint-config-web/blob/master/index.js
 module.exports = {
-  extends: ['@groupher/eslint-config-web'],
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    '@groupher/eslint-config-web',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  // extends: ['@groupher/eslint-config-web'],
   settings: {
+    // see if the import lib exsit or not
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
     'import/resolver': {
       'babel-module': {},
       'eslint-import-resolver-custom-alias': {
@@ -14,20 +26,35 @@ module.exports = {
           '@/constant': 'utils/constant',
           '@/hooks': 'src/hooks',
           '@/hoc': 'src/hoc',
-          '@/config': 'config',
           '@/stores': 'src/stores',
           '@/model': 'src/stores/SharedModel',
           '@/utils': 'utils',
           '@/schemas': 'src/schemas',
           '@/Img': 'src/components/Img',
           '@/SvgIcons': 'src/components/SvgIcons',
           '@/i18n': 'i18n',
+          '@/types': 'src/types',
         },
-        extensions: ['.js', '.jsx'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
   },
   rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+    'react/jsx-filename-extension': [
+      2,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
     'import/no-named-as-default': 0,
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
   },
 }

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
           repository: 'coderplanets/coderplanets_server'
           path: 'backend_server'
       - name: (Backend) Setup Elixir and OTP
-        uses: actions/setup-elixir@v1
+        uses: erlef/setup-elixir@v1
         with:
           elixir-version: '1.10.3' # Define the elixir version [required]
           otp-version: '22.3' # Define the OTP version [required]

.gitignore

@@ -13,3 +13,4 @@ cypress/videos/
 .vscode/
 .DS_Store
 report.*
+.eslintcache

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -22,8 +22,8 @@
     "clean": "shjs ./utils/scripts/clean.js",
     "gen": "plop --plopfile ./utils/scripts/generators/index.js",
     "analyze": "cross-env ANALYZE=true next build",
-    "lint": "./node_modules/.bin/eslint --ext .js --fix src/ utils/",
-    "lint:staged": "git diff --cached --name-only --diff-filter=ACRM | grep \".js$\" | xargs ./node_modules/.bin/eslint --ext .js",
+    "lint": "./node_modules/.bin/eslint --ext .js,.ts,.tsx --fix src/ utils/",
+    "lint:staged": "git diff --cached --name-only --diff-filter=ACRM | xargs ./node_modules/.bin/eslint --cache --ext .js,.ts,.tsx && tsc --noemit",
     "test": "cross-env NODE_ENV=test jest --config .jest.config.js",
     "test:dev": "cross-env NODE_ENV=test jest --config .jest.config.js",
     "test:watch": "npm run test -- --watch",
@@ -140,6 +140,9 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@groupher/eslint-config-web": "2.0.9",
+    "@types/ramda": "^0.27.38",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^23.6.0",
     "bundlewatch": "^0.2.7",
@@ -160,6 +163,7 @@
     "react-test-renderer": "16.10.0",
     "shelljs": "0.8.4",
     "standard-version": "^8.0.1",
-    "start-server-and-test": "1.10.1"
+    "start-server-and-test": "1.10.1",
+    "typescript": "^4.2.3"
   }
 }

src/components/AlertBar/index.js

@@ -15,7 +15,7 @@ import { Wrapper } from './styles'
 const log = buildLog('c:AlertBar:index')
 
 const AlertBar = ({ children }) => {
-  return <Wrapper testId="alertBar">{children}</Wrapper>
+  return <Wrapper testid="alertBar">{children}</Wrapper>
 }
 
 AlertBar.propTypes = {

src/components/AlertBar/styles/index.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 // import { theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   font-size: 14px;
   font-variant: tabular-nums;

src/components/Buttons/NotifyButton/index.js

@@ -25,9 +25,9 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:NotifyButton:index')
 
-const NotifyButton = ({ testId, subscribed }) => {
+const NotifyButton = ({ testid, subscribed }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {subscribed ? (
         <Main>
           <NotifyOnIcon src={`${ICON}/article/notify-on.svg`} />
@@ -68,12 +68,12 @@ const NotifyButton = ({ testId, subscribed }) => {
 }
 
 NotifyButton.propTypes = {
-  testId: T.string,
+  testid: T.string,
   subscribed: T.bool,
 }
 
 NotifyButton.defaultProps = {
-  testId: 'notify-button',
+  testid: 'notify-button',
   subscribed: false,
 }
 

src/components/Buttons/styles/notify_button/index.js

@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn()};
 `

src/components/Charger/index.js

@@ -19,7 +19,7 @@ const log = buildLog('c:Charger:index')
 // bubbles effect: https://codepen.io/Johnm__/pen/qZqgGJ
 const Charger = () => {
   return (
-    <Wrapper testId="charger">
+    <Wrapper testid="charger">
       <Battery>
         <Liquid />
         <MoneySign src={`${ICON_CMD}/battery_heart.svg`} />

src/components/Charger/styles/index.js

@@ -106,7 +106,7 @@ const liquid2Rule = styledCss`
 `
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   text-align: center;
   position: relative;

src/components/CollapseMenu/Group.js

@@ -81,7 +81,7 @@ const Group = ({
               key={item.id}
               item={item}
               active={activeItem.id === item.id}
-              activeId={activeItem.id}
+              activeid={activeItem.id}
               onSelect={onSelect}
             />
           ))}

src/components/CollapseMenu/Item.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Wrapper, Title } from './styles/item'
 
-// const Item = ({ item, active, activeId, onSelect }) => {
+// const Item = ({ item, active, activeid, onSelect }) => {
 const Item = ({ item, active, onSelect }) => {
   return (
     <Wrapper active={active}>

src/components/CollapseMenu/index.js

@@ -76,7 +76,7 @@ const defaultItems = [
 ]
 
 const CollapseMenu = ({
-  testId,
+  testid,
   items,
   activeItem,
   onSelect,
@@ -87,7 +87,7 @@ const CollapseMenu = ({
   const groupsKeys = keys(groupedItems)
 
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {groupsKeys.map((groupKey) => (
         <Group
           key={groupKey}
@@ -105,7 +105,7 @@ const CollapseMenu = ({
 }
 
 CollapseMenu.propTypes = {
-  testId: T.string,
+  testid: T.string,
   items: T.arrayOf(
     T.shape({
       id: T.number,
@@ -124,7 +124,7 @@ CollapseMenu.propTypes = {
 }
 
 CollapseMenu.defaultProps = {
-  testId: 'collapse-menu',
+  testid: 'collapse-menu',
   items: defaultItems,
   activeItem: defaultActiveItem,
   // default display count in each group, the remaining part will be folded

src/components/CrashErrorHint/index.js

@@ -60,7 +60,7 @@ const CrashErrorHint = ({ onReport }) => {
   }, [executeIndex])
 
   return (
-    <Wrapper testId="crashErrorHint" t={themeName}>
+    <Wrapper testid="crashErrorHint" t={themeName}>
       <div />
       <div>
         <Header index={executeIndex} themeName={themeName} />

src/components/CrashErrorHint/styles/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css, theme, themeSkins } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('align-center', 'justify-between')};
   height: 100vh;

src/components/DigestSentence/index.js

@@ -16,7 +16,7 @@ import { Wrapper, PreviewWrapper, PreviewText, PreviewIcon } from './styles'
 const log = buildLog('c:DigestSentence:index')
 
 const DigestSentence = ({
-  testId,
+  testid,
   children,
   onPreview,
   top,
@@ -26,7 +26,7 @@ const DigestSentence = ({
 }) => {
   return (
     <Wrapper
-      testId={testId}
+      testid={testid}
       onClick={onPreview}
       top={top}
       bottom={bottom}
@@ -43,7 +43,7 @@ const DigestSentence = ({
 }
 
 DigestSentence.propTypes = {
-  testId: T.string,
+  testid: T.string,
   children: T.oneOfType([T.string, T.node]),
   onPreview: T.func,
   top: T.number,
@@ -53,7 +53,7 @@ DigestSentence.propTypes = {
 }
 
 DigestSentence.defaultProps = {
-  testId: 'digest-sentence',
+  testid: 'digest-sentence',
   children: '可能是最性感的开发者社区，来为你心爱的作品建立...',
   onPreview: log,
   top: 0,

src/components/DigestSentence/styles/index.js

@@ -4,7 +4,7 @@ import Img from '@/Img'
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   color: ${theme('thread.articleDigest')};
   font-size: 13px;

src/components/DivideText/index.js

@@ -14,9 +14,9 @@ import { Wrapper, Content, LeftLine, RightLine } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:DivideText:index')
 
-const DivideText = ({ testId, children }) => {
+const DivideText = ({ testid, children }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       <LeftLine />
       <Content>{children}</Content>
       <RightLine />
@@ -25,12 +25,12 @@ const DivideText = ({ testId, children }) => {
 }
 
 DivideText.propTypes = {
-  testId: T.string,
+  testid: T.string,
   children: T.oneOfType([T.string, T.node]).isRequired,
 }
 
 DivideText.defaultProps = {
-  testId: 'divide-text',
+  testid: 'divide-text',
 }
 
 export default React.memo(DivideText)

src/components/DivideText/styles/index.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flex('align-center')};
   width: 100%;

src/components/EmailSubscriber/DefaultLayout/index.js

@@ -10,11 +10,11 @@ import { Wrapper, InnerWrapper } from '../styles/default_layout/index'
 /* eslint-disable-next-line */
 const log = buildLog('c:DefaultLayout:index')
 
-const DefaultLayout = ({ testId, activeByDefault, title, desc }) => {
+const DefaultLayout = ({ testid, activeByDefault, title, desc }) => {
   const [active, setActive] = useState(activeByDefault)
 
   return (
-    <Wrapper testId={testId} active={active}>
+    <Wrapper testid={testid} active={active}>
       <InnerWrapper>
         {!active ? (
           <InActiveView onOpen={() => setActive(true)} />

src/components/EmailSubscriber/index.js

@@ -13,15 +13,15 @@ import SimpleLayout from './SimpleLayout'
 import { Wrapper } from './styles'
 
 const EmailSubscriber = ({
-  testId,
+  testid,
   title,
   desc,
   type,
   placeholder,
   activeByDefault,
 }) => {
   return (
-    <Wrapper testId={testId}>
+    <Wrapper testid={testid}>
       {type === 'default' ? (
         <DefaultLayout
           activeByDefault={activeByDefault}
@@ -36,7 +36,7 @@ const EmailSubscriber = ({
 }
 
 EmailSubscriber.propTypes = {
-  testId: T.string,
+  testid: T.string,
   title: T.string,
   desc: T.string,
   placeholder: T.string,
@@ -48,7 +48,7 @@ EmailSubscriber.propTypes = {
 }
 
 EmailSubscriber.defaultProps = {
-  testId: 'emailSubscriber',
+  testid: 'emailSubscriber',
   title: '邮件订阅',
   desc: '可随时取消',
   placeholder: '邮件订阅',

src/components/EmailSubscriber/styles/default_layout/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { css } from '@/utils'
 
 export const Wrapper = styled.div.attrs((props) => ({
-  'data-test-id': props.testId,
+  'data-test-id': props.testid,
 }))`
   ${css.flexColumn('justify-center')};
   position: relative;