refactor(imports): switched to absolute paths import

Author: rbiedrawa

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
  },
  'import/resolver': {
  node: {
+ paths: ['src'],
  extensions: ['.tsx', '.ts', '.js', '.json'],
  },
  alias: [

.storybook/preview.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable */
 
 import { Provider } from 'react-redux'
-import { history, store } from '../src/store/store'
+import { history, store } from 'store/store'
 import { HistoryRouter as Router } from 'redux-first-history/rr6'
 import React from 'react'
 
-import i18n from '../src/config/i18n'
+import i18n from 'config/i18n'
 
 export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },

README.md

@@ -97,6 +97,12 @@ To enforce conventional commit format on git messages, run below command to use
 npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
 ```
 
+## Intelij
+
+### Absolute imports
+
+In Settings | Editor | Code Style | TypeScript | Imports, enable Use paths relative to tsconfig.json.
+
 ## Release
 
 [//]: # 'TODO: add readme for release via Standard Version'

src/App.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { HistoryRouter as Router } from 'redux-first-history/rr6'
 
-import './App.css'
-import AppRoutes from './routes'
-import { history, store } from './store/store'
+import 'App.css'
+import AppRoutes from 'routes'
+import { history, store } from 'store/store'
 
 const App = () => (
  <>

src/components/Layout/index.tsx

@@ -5,11 +5,10 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Outlet } from 'react-router-dom'
 
-import Header from '../Header/Header'
+import Header from 'components/Header/Header'
 
 const Layout = () => {
  const [mode, setMode] = React.useState<'light' | 'dark'>('light')
-
  const { i18n } = useTranslation()
 
  // TODO: move state to redux

src/config/i18n/index.ts

@@ -1,8 +1,8 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 
-import en from './locales/en.translation.json'
-import pl from './locales/pl.translation.json'
+import en from 'config/i18n/locales/en.translation.json'
+import pl from 'config/i18n/locales/pl.translation.json'
 
 i18n.use(initReactI18next).init({
  lng: 'en',

src/features/posts/api/__tests__/post.api.test.ts

@@ -1,5 +1,5 @@
-import fixture from '../../../../test/server/db.initial.data.json'
-import { getPosts } from '../index'
+import { getPosts } from 'features/posts/api/index'
+import fixture from 'test/server/db.initial.data.json'
 
 describe('Post API test - MSW example', () => {
  it('should fetch all Posts', async () => {

src/features/posts/api/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Env } from '../../../config/Env'
-import { Post } from '../types'
+import { Env } from 'config/Env'
+import { Post } from 'features/posts/types'
 
 const POSTS_BASE_URL = `${Env.API_BASE_URL}/posts`
 

src/features/posts/components/PostCardView.stories.tsx

@@ -2,7 +2,7 @@ import { Container } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
-import { PostCardView } from '../index'
+import { PostCardView } from 'features/posts/components/PostCardView'
 
 export default {
  title: 'features/components/posts/PostCardView',

src/features/posts/components/PostCardView.tsx

@@ -3,8 +3,8 @@ import Typography from '@mui/material/Typography'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import logoImage from '../assets/imgs/logo192.png'
-import { Post } from '../types'
+import logoImage from 'features/posts/assets/imgs/logo192.png'
+import { Post } from 'features/posts/types'
 
 export type PostCardViewProps = {
  post: Post