refactor(naming): use @xxx for local import

Author: mydearxym

.babelrc

@@ -1,5 +1,29 @@
 {
+  "presets": [
+    ["next/babel"]
+  ],
+  "env": {
+     "development": {
+       "plugins": ["inline-dotenv"]
+    },
+    "production": {
+      "presets": [
+        ["next/babel", {
+          "preset-env": {
+            "targets": {
+              "ie": "11"
+            },
+            "debug": false
+          }
+        }]
+      ]
+    },
+    "test": {
+      "plugins": ["inline-dotenv"]
+    }
+  },
   "plugins": [
+    "add-react-displayname",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "transform-inline-environment-variables",
     [
@@ -26,31 +50,16 @@
     ["module-resolver", {
       "root": ["./"],
       "alias": {
-        "containers":"./containers",
-        "components":"./components",
-        "config":"./config",
-        "stores":"./stores",
-        "schemas":"./containers/schemas",
-        "utils":"./utils",
-        "Img": "./components/Img",
-        "SvgIcons": "./components/SvgIcons"
+        "@containers":"./containers",
+        "@components":"./components",
+        "@config":"./config",
+        "@stores":"./stores",
+        "@model":"./stores/SharedModel",
+        "@utils":"./utils",
+        "@schemas":"./containers/schemas",
+        "@Img": "./components/Img",
+        "@SvgIcons": "./components/SvgIcons"
       }
     }]
-  ],
-  "env": {
-     "development": {
-       "presets": ["next/babel"],
-       "plugins": ["inline-dotenv"]
-    },
-    "local": {
-       "presets": ["next/babel"],
-    },
-    "production": {
-      "presets": ["next/babel"]
-    },
-    "test": {
-      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]],
-      "plugins": ["inline-dotenv"]
-    }
-  }
+  ]
 }

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['airbnb', 'plugin:react/recommended', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'react', 'cypress'],
+  plugins: ['prettier', 'react', 'cypress', 'react-hooks'],
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2016,
@@ -21,6 +21,8 @@ module.exports = {
     },
   },
   rules: {
+    // import/resolver 暂时识别不了 @xxx, 暂时关闭该检测
+    'import/no-extraneous-dependencies': 0,
     'arrow-body-style': 0,
     // need for _store init
     'no-underscore-dangle': 0,
@@ -57,5 +59,7 @@ module.exports = {
         trailingComma: 'es5',
       },
     ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
   },
 }

components/AdderCell/index.js

@@ -7,9 +7,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ICON_CMD } from 'config'
+import { ICON_CMD } from '@config'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 import { AddWrapper, AddIcon, AddText } from './styles'
 
 /* eslint-disable no-unused-vars */

components/AdderCell/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { animate } from 'utils'
+import { animate } from '@utils'
 import Img from '../../Img'
 
 export const AddWrapper = styled.div`

components/AvatarsRow/index.js

@@ -11,7 +11,7 @@ import { Tooltip } from 'antd'
 
 import { ATATARS_LIST_LENGTH } from 'config/general'
 
-import { makeDebugger, prettyNum } from 'utils'
+import { makeDebugger, prettyNum } from '@utils'
 import { Avatars, AvatarsItem, AvatarsImg, AvatarsMore } from './styles'
 
 /* eslint-disable no-unused-vars */

components/AvatarsRow/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme, cs } from 'utils'
+import { theme, cs } from '@utils'
 
 export const Avatars = styled.ul`
   ${cs.flex()};

components/BannerCountBrief/index.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { makeDebugger, toPercentNum } from 'utils'
+import { makeDebugger, toPercentNum } from '@utils'
 
 import {
   Result,

components/BaseStyled/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { theme } from 'utils'
+import { theme } from '@utils'
 
 export const Center = styled.div`
   /* display: flex;*/

components/CategoriesCell/index.js

@@ -9,9 +9,9 @@ import PropTypes from 'prop-types'
 import R from 'ramda'
 import { Icon } from 'antd'
 
-import { ICON_CMD } from 'config'
+import { ICON_CMD } from '@config'
 
-import { uid, Trans } from 'utils'
+import { uid, Trans } from '@utils'
 import AdderCell from '../AdderCell'
 
 import {

components/CategoriesCell/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { animate } from 'utils'
+import { animate } from '@utils'
 import Img from '../../Img'
 
 export const UnsetText = styled.div`

components/ColorCell/index.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 
 import { ColorCell, ColorDot /* ColorTitle */ } from './styles'
 /* eslint-disable no-unused-vars */

components/CommunityCell/CommunitiesLogoList.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
-// import { ICON_CMD } from 'config'
-import { uid } from 'utils'
+// import { ICON_CMD } from '@config'
+import { uid } from '@utils'
 import { Wrapper, CommunityLogo } from './styles/communities_logo_list'
 
 const tooltipOffset = JSON.stringify({ top: 1 })

components/CommunityCell/index.js

@@ -9,9 +9,9 @@ import R from 'ramda'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
-import { ICON_CMD } from 'config'
+import { ICON_CMD } from '@config'
 
-import { uid, makeDebugger } from 'utils'
+import { uid, makeDebugger } from '@utils'
 import AdderCell from '../AdderCell'
 import CommunitiesLogoList from './CommunitiesLogoList'
 

components/CommunityCell/styles/communities_logo_list.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme } from 'utils'
+import { theme } from '@utils'
 import Img from '../../Img'
 
 export const Wrapper = styled.div`

components/CommunityCell/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { animate } from 'utils'
+import { animate } from '@utils'
 import Img from '../../Img'
 
 export const Wrapper = styled.div`

components/CommunityMatrix/index.js

@@ -9,9 +9,9 @@ import R from 'ramda'
 import PropTypes from 'prop-types'
 import ReactTooltip from 'react-tooltip'
 
-import { ICON_CMD } from 'config'
+import { ICON_CMD } from '@config'
 
-import { makeDebugger, uid } from 'utils'
+import { makeDebugger, uid } from '@utils'
 import {
   MatrixWrapper,
   CommunityLogo,

components/CommunityMatrix/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { cs } from 'utils'
+import { cs } from '@utils'
 import Img from '../../Img'
 
 export const MatrixWrapper = styled.div`

components/ContentFilter/index.js

@@ -7,8 +7,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Button, Row, Col, Tag } from 'antd'
-import { ICON_CMD } from 'config'
-import { makeDebugger, isEmptyValue } from 'utils'
+import { ICON_CMD } from '@config'
+import { makeDebugger, isEmptyValue } from '@utils'
 import Popover from '../Popover'
 
 import {

components/ContentFilter/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme } from 'utils'
+import { theme } from '@utils'
 import Img from '../../Img'
 
 export const Wrapper = styled.div`

components/ContentsCountCell/index.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 import { Wrapper, Content, Label, Count } from './styles'
 
 /* eslint-disable no-unused-vars */

components/ContentsCountCell/styles/index.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 // import Img from '../../Img'
-// import { theme } from 'utils'
+// import { theme } from '@utils'
 
 export const Wrapper = styled.div`
   display: flex;

components/FileUploader/index.js

@@ -7,8 +7,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { ASSETS_ENDPOINT } from 'config'
-import { makeDebugger } from 'utils'
+import { ASSETS_ENDPOINT } from '@config'
+import { makeDebugger } from '@utils'
 import { FileUploaderWrapper, InputFile } from './styles'
 
 /* eslint-disable no-unused-vars */

components/FocusLine/index.js

@@ -8,7 +8,7 @@ import React from 'react'
 import R from 'ramda'
 import PropTypes from 'prop-types'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 import { Wrapper, Icon, TextWrapper, Text, Focus } from './styles'
 
 /* eslint-disable no-unused-vars */

components/FocusLine/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme, cs } from 'utils'
+import { theme, cs } from '@utils'
 import Img from '../../Img'
 
 export const Wrapper = styled.div`

components/Footer/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 import {
   Container,
   BaseInfo,

components/Footer/styles/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { cs, theme } from 'utils'
+import { cs, theme } from '@utils'
 
 const Link = styled.a`
   text-decoration: none;

components/FormInputer/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 import { Input, InputNumber } from 'antd'
 import R from 'ramda'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 import FormItem from '../FormItem'
 import { FormInput, Note } from './styles'
 

components/FormInputer/styles/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-// import { Img } from 'components'
+// import { Img } from '@components'
 
 export const FormInput = styled.div`
   width: 250px;

components/FormItem/index.js

@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { makeDebugger } from 'utils'
+import { makeDebugger } from '@utils'
 
 import { FormItemWrapper, FormLable, ChildWrapper } from './styles'
 

components/FormItem/styles/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-// import { Img } from 'components'
+// import { Img } from '@components'
 
 export const FormItemWrapper = styled.div`
   display: flex;

components/FormSelector/index.js

@@ -9,7 +9,7 @@ import R from 'ramda'
 import PropTypes from 'prop-types'
 import { Select } from 'antd'
 
-import { uid, makeDebugger } from 'utils'
+import { uid, makeDebugger } from '@utils'
 import FormItem from '../FormItem'
 import { Note } from './styles'
 

components/FormSelector/styles/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-// import { Img } from 'components'
+// import { Img } from '@components'
 
 export const SelectorWrapper = styled.div`
   display: flex;

components/GAWraper/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Router from 'next/router'
 
-import { GA } from 'utils'
+import { GA } from '@utils'
 
 Router.onRouteChangeComplete = url => {
   GA.pageview(url)

components/JobsTable/index.js

@@ -8,7 +8,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Button } from 'antd'
 
-import { makeDebugger, cutFrom } from 'utils'
+import { makeDebugger, cutFrom } from '@utils'
 import Pagi from '../Pagi'
 import { TableLoading } from '../LoadingEffects'
 import { Space } from '../BaseStyled'

components/JobsTable/styles/index.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { theme } from 'utils'
+import { theme } from '@utils'
 import { Img } from '../..'
 
 export const Wrapper = styled.div`