feat(global): try TS workflow (#1013)

* chore(ts-workflow): basic setup

* chore(ts-workflow): testId -> testid to avoid warning

* chore(ts-workflow): resolve type warnings

* chore(ts-workflow): rename _app

* chore(ts-workflow): basic lint & rules setup

* chore(ts-workflow): logic & store with ts support && rules adjust

* chore(ts-workflow): tsx test

* chore(ts-workflow): add tsc check, resolve errors

* chore(ts-workflow): add tsc check, resolve errors

* fix(ts-workflow): rootStore TS hint

* refactor(ts-workflow): generator container store.js -> store.ts

* refactor(ts-workflow): cycle import issue doc

* refactor(ts-workflow): generator logic.js -> logic.ts

* refactor(ts-workflow): generator index.js && styles.js to ts version

* chore(ts-workflow): styles/*.js -> ts && resolve error/warning

* chore(ts-workflow): more styles/*.js -> ts && resolve error/warning

* chore(ts-workflow): more styles/*.js -> ts && resolve error/warning

* chore(ts-workflow): resolve type warning

* chore(ts-workflow): more js -> ts

* ci(actions): use offical elixir action

* fix(build): missing style error

* chore(ts-workflow): utils js -> ts

* fix(ts-workflow): type warnings

Author: mydearxym

.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()};
 `