chore: now all import declarations are consistent, also added stricte…

…r rules for boundaries (#2479)

.eslintrc.js

@@ -8,6 +8,7 @@ const boundaryTypes = ['app', 'shared', 'domains', 'entities', 'processes', 'fea
 const boundaries = boundaryTypes.map((type) => ({
   type,
   pattern: `src/renderer/${type}/*`,
+  capture: ['package'],
 }));
 
 module.exports = {
@@ -29,6 +30,8 @@ module.exports = {
   },
   rules: {
     'sort-imports': ['error', { ignoreDeclarationSort: true }],
+    // For debugging purpose, too slow for every day usage
+    // 'import-x/no-cycle': ['error', { maxDepth: Number.Infinity }],
     'import-x/no-unresolved': 'off',
     'import-x/named': 'off',
     'import-x/namespace': 'off',
@@ -41,7 +44,7 @@ module.exports = {
         groups: ['builtin', 'external', 'parent', ['sibling', 'index']],
         pathGroups: boundaryTypes.map((type) => ({
           group: 'parent',
-          pattern: `@{/${type},${type}}/**`,
+          pattern: `@/${type}/**`,
           position: 'before',
         })),
         'newlines-between': 'always',
@@ -182,6 +185,13 @@ module.exports = {
             message: 'Use cnTw instead.',
           },
         ],
+        'import-x/max-dependencies': [
+          'warn',
+          {
+            max: 15,
+            ignoreTypeImports: true,
+          },
+        ],
 
         // Validated by typescript
         '@typescript-eslint/no-empty-interface': 'off',
@@ -206,6 +216,58 @@ module.exports = {
         'effector/enforce-store-naming-convention': 'off',
 
         // Boundaries setup
+        'boundaries/entry-point': [
+          'error',
+          {
+            default: 'disallow',
+            rules: [
+              {
+                target: boundaryTypes,
+                allow: ['index.ts', 'index.tsx'],
+              },
+              {
+                target: ['shared'],
+                allow: ['**/*'],
+              },
+              {
+                target: ['pages'],
+                allow: ['**/*'],
+              },
+              // TODO fix this packages
+              {
+                target: [
+                  ['features', { package: 'operations' }],
+                  ['features', { package: 'governance' }],
+                  ['features', { package: 'wallets' }],
+                ],
+                allow: ['**/*.ts', '**/*.tsx'],
+              },
+            ],
+          },
+        ],
+
+        'boundaries/external': [
+          'error',
+          {
+            default: 'allow',
+            rules: [
+              {
+                from: ['domains'],
+                disallow: ['react', 'effector-react'],
+                message: 'Domain should contain only logic, not views.',
+              },
+              {
+                from: [
+                  ['shared', { package: 'ui-kit' }],
+                  ['shared', { package: 'ui-entities' }],
+                ],
+                disallow: ['effector', 'effector-react'],
+                message: 'Data bindings are forbidden in ui library components.',
+              },
+            ],
+          },
+        ],
+
         'boundaries/element-types': [
           'error',
           {

jest.config.ts

@@ -43,14 +43,6 @@ const config: Config = {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '^raptorq$': '<rootDir>/node_modules/raptorq/raptorq.js',
     '^@/(.*)$': '<rootDir>/src/renderer/$1',
-    '^@renderer(.*)$': '<rootDir>/src/renderer/$1',
-    '^@app(.*)$': '<rootDir>/src/renderer/app/$1',
-    '^@pages(.*)$': '<rootDir>/src/renderer/pages/$1',
-    '^@processes(.*)$': '<rootDir>/src/renderer/processes/$1',
-    '^@widgets(.*)$': '<rootDir>/src/renderer/widgets/$1',
-    '^@features(.*)$': '<rootDir>/src/renderer/features/$1',
-    '^@entities(.*)$': '<rootDir>/src/renderer/entities/$1',
-    '^@shared(.*)$': '<rootDir>/src/renderer/shared/$1',
     '^dexie$': '<rootDir>/node_modules/dexie/dist/dexie.js',
     '^lottie': 'lottie-react',
   },

src/renderer/app/App.tsx

@@ -2,24 +2,25 @@ import { useGate, useUnit } from 'effector-react';
 import { useEffect } from 'react';
 import { useNavigate, useRoutes } from 'react-router-dom';
 
-import { logger } from '@shared/config/utils';
-import { kernelModel } from '@shared/core';
-import { Paths } from '@shared/routes';
-import { basketModel } from '@entities/basket';
-import { governanceModel } from '@entities/governance';
-import { networkModel } from '@entities/network';
-import { notificationModel } from '@entities/notification';
-import { proxyModel } from '@entities/proxy';
-import { walletModel } from '@entities/wallet';
-import { multisigsModel } from '@processes/multisigs';
-import { assetsSettingsModel } from '@features/assets';
-import { navigationModel } from '@features/navigation';
-import { proxiesModel } from '@features/proxies';
-import { CreateWalletProvider } from '@widgets/CreateWallet';
-import { WalletDetailsProvider } from '@widgets/WalletDetails';
-import { ROUTES_CONFIG } from '@pages/index';
+import { logger } from '@/shared/config/utils';
+import { kernelModel } from '@/shared/core';
+import { ConfirmDialogProvider } from '@/shared/providers';
+import { Paths } from '@/shared/routes';
+import { basketModel } from '@/entities/basket';
+import { governanceModel } from '@/entities/governance';
+import { networkModel } from '@/entities/network';
+import { notificationModel } from '@/entities/notification';
+import { proxyModel } from '@/entities/proxy';
+import { walletModel } from '@/entities/wallet';
+import { multisigsModel } from '@/processes/multisigs';
+import { assetsSettingsModel } from '@/features/assets';
+import { navigationModel } from '@/features/navigation';
+import { proxiesModel } from '@/features/proxies';
+import { CreateWalletProvider } from '@/widgets/CreateWallet';
+import { WalletDetailsProvider } from '@/widgets/WalletDetails';
+import { ROUTES_CONFIG } from '@/pages/index';
 
-import { ConfirmDialogProvider, GraphqlProvider, MultisigChainProvider, StatusModalProvider } from './providers';
+import { GraphqlProvider, MultisigChainProvider, StatusModalProvider } from './providers';
 
 logger.init();
 

src/renderer/app/components/WebSplashScreen/WebSplashScreen.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
+import { useI18n } from '@/shared/i18n';
 import { Animation } from '@/shared/ui';
-import { useI18n } from '../../providers';
 
 import promo1 from './assets/promo-1.png';
 import promo2 from './assets/promo-2.png';

src/renderer/app/index.html

@@ -38,6 +38,6 @@
     <title>Nova Spektr</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="text-body"></div>
   </body>
 </html>

src/renderer/app/index.tsx

@@ -6,14 +6,14 @@ import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { HashRouter } from 'react-router-dom';
 
+import { I18Provider } from '@/shared/i18n';
 import { isElectron } from '@/shared/lib/utils';
 import { FallbackScreen } from '@/shared/ui';
 import { APP_CONFIG } from '../../../app.config';
 
 import { LoadingDelay, controlledLazy, suspenseDelay } from './DelayedSuspense';
 import { ElectronSplashScreen } from './components/ElectronSplashScreen/ElectronSplashScreen';
 import { WebSplashScreen } from './components/WebSplashScreen/WebSplashScreen';
-import { I18Provider } from './providers/context/I18nContext';
 
 const CLEAR_LOADING_TIMEOUT = 700;
 const DIRTY_LOADING_TIMEOUT = 2000;

src/renderer/app/providers/context/GraphqlContext/GraphqlContext.tsx

@@ -18,9 +18,9 @@ import {
   useState,
 } from 'react';
 
-import { chainsService } from '@shared/api/network';
-import { type ChainId, ExternalType } from '@shared/core';
-import { settingsStorage } from '@entities/settings';
+import { chainsService } from '@/shared/api/network';
+import { type ChainId, ExternalType } from '@/shared/core';
+import { settingsStorage } from '@/entities/settings';
 
 type GraphqlContextProps = {
   changeClient: (chainId: ChainId) => void;

src/renderer/app/providers/context/MultisigChainContext/MultisigChainContext.tsx

@@ -3,15 +3,15 @@ import { type Event } from '@polkadot/types/interfaces';
 import { useGate, useUnit } from 'effector-react';
 import { type PropsWithChildren, createContext, useContext, useEffect } from 'react';
 
-import { type ChainId, type MultisigAccount, MultisigTxFinalStatus, type SigningStatus } from '@shared/core';
-import { useDebounce, useTaskQueue } from '@shared/lib/hooks';
-import { type Task } from '@shared/lib/hooks/useTaskQueue';
-import { getCreatedDateFromApi, toAddress } from '@shared/lib/utils';
+import { type ChainId, type MultisigAccount, MultisigTxFinalStatus, type SigningStatus } from '@/shared/core';
+import { useDebounce, useTaskQueue } from '@/shared/lib/hooks';
+import { type Task } from '@/shared/lib/hooks/useTaskQueue';
+import { getCreatedDateFromApi, toAddress } from '@/shared/lib/utils';
+import { subscriptionService } from '@/entities/chain';
+import { useMultisigEvent, useMultisigTx } from '@/entities/multisig';
+import { networkModel, networkUtils } from '@/entities/network';
 import { operationsModel } from '@/entities/operations';
-import { subscriptionService } from '@entities/chain';
-import { useMultisigEvent, useMultisigTx } from '@entities/multisig';
-import { networkModel, networkUtils } from '@entities/network';
-import { accountUtils, walletModel } from '@entities/wallet';
+import { accountUtils, walletModel } from '@/entities/wallet';
 
 type MultisigChainContextProps = {
   addTask: (task: Task) => void;

src/renderer/app/providers/context/StatusContext/StatusContext.tsx

@@ -9,9 +9,9 @@ import {
   useState,
 } from 'react';
 
-import { useToggle } from '@shared/lib/hooks';
-import { DEFAULT_TRANSITION } from '@shared/lib/utils';
-import { StatusModal } from '@shared/ui';
+import { useToggle } from '@/shared/lib/hooks';
+import { DEFAULT_TRANSITION } from '@/shared/lib/utils';
+import { StatusModal } from '@/shared/ui';
 
 export type StatusModalProps = {
   title: string;

src/renderer/app/providers/context/index.ts

@@ -1,5 +1,3 @@
-export { ConfirmDialogProvider, useConfirmContext } from './ConfirmContext';
 export { GraphqlProvider, useGraphql } from './GraphqlContext';
-export { I18Provider, useI18n } from './I18nContext';
 export { MultisigChainProvider, useMultisigChainContext } from './MultisigChainContext';
 export { StatusModalProvider, useStatusContext } from './StatusContext';

src/renderer/entities/asset/ui/AssetBalance/AssetBalance.tsx

@@ -1,9 +1,9 @@
 import { type BN } from '@polkadot/util';
 
-import { useI18n } from '@app/providers';
-import { type Asset, type AssetByChains } from '@shared/core';
-import { cnTw, formatBalance } from '@shared/lib/utils';
-import { AssetIcon } from '@entities/asset';
+import { type Asset, type AssetByChains } from '@/shared/core';
+import { useI18n } from '@/shared/i18n';
+import { cnTw, formatBalance } from '@/shared/lib/utils';
+import { AssetIcon } from '../AssetIcon/AssetIcon';
 
 type Props = {
   value: BN | string;
@@ -49,9 +49,9 @@ export const AssetBalance = ({
   }
 
   return (
-    <span className={cnTw('flex items-center gap-x-2', wrapperClassName)}>
+    <p className={cnTw('flex items-center gap-x-2', wrapperClassName)}>
       <AssetIcon src={icon} size={28} name={name} className={imgClassName} />
       {balance}
-    </span>
+    </p>
   );
 };

src/renderer/entities/asset/ui/AssetDetails/AssetDetails.tsx

@@ -1,6 +1,7 @@
-import { type Asset } from '@shared/core';
-import { HelpText, Shimmering } from '@shared/ui';
-import { AssetFiatBalance } from '@entities/price';
+import { type Asset } from '@/shared/core';
+import { Shimmering } from '@/shared/ui/Shimmering/Shimmering';
+import { HelpText } from '@/shared/ui/Typography/index';
+import { AssetFiatBalance } from '@/entities/price';
 import { AssetBalance } from '../AssetBalance/AssetBalance';
 
 type Props = {

src/renderer/entities/asset/ui/AssetIcon/AssetIcon.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 
-import { TEST_CHAIN_ICON } from '@shared/lib/utils';
+import { TEST_CHAIN_ICON } from '@/shared/lib/utils';
 
 import { AssetIcon } from './AssetIcon';
 

src/renderer/entities/asset/ui/AssetIcon/AssetIcon.tsx

@@ -1,5 +1,5 @@
-import { useToggle } from '@shared/lib/hooks';
-import { cnTw } from '@shared/lib/utils';
+import { useToggle } from '@/shared/lib/hooks';
+import { cnTw } from '@/shared/lib/utils';
 
 type Props = {
   src?: string;

src/renderer/entities/asset/ui/AssetLinks/AssetLinks.tsx

@@ -1,10 +1,10 @@
 import { useUnit } from 'effector-react';
 import { Link } from 'react-router-dom';
 
-import { type ChainId } from '@shared/core';
-import { Paths, createLink } from '@shared/routes';
-import { Icon } from '@shared/ui';
-import { CheckPermission, OperationType, walletModel } from '@entities/wallet';
+import { type ChainId } from '@/shared/core';
+import { Paths, createLink } from '@/shared/routes';
+import { Icon } from '@/shared/ui';
+import { CheckPermission, OperationType, walletModel } from '@/entities/wallet';
 
 type Props = {
   assetId: number;

src/renderer/entities/asset/ui/EmptyAssetsState/EmptyAssetsState.tsx

@@ -1,5 +1,5 @@
-import { useI18n } from '@app/providers';
-import { BodyText, Icon } from '@shared/ui';
+import { useI18n } from '@/shared/i18n';
+import { BodyText, Icon } from '@/shared/ui';
 
 export const EmptyAssetsState = () => {
   const { t } = useI18n();

src/renderer/entities/balance/hooks/useAssetBalances.ts

@@ -1,6 +1,6 @@
 import { useUnit } from 'effector-react';
 
-import { type AccountId, type Balance, type ChainId } from '@shared/core';
+import { type AccountId, type Balance, type ChainId } from '@/shared/core';
 import { balanceUtils } from '../lib/balance-utils';
 import { balanceModel } from '../model/balance-model';
 

src/renderer/entities/balance/hooks/useBalance.ts

@@ -1,4 +1,4 @@
-import { type AccountId, type Balance, type ChainId } from '@shared/core';
+import { type AccountId, type Balance, type ChainId } from '@/shared/core';
 
 import { useAssetBalances } from './useAssetBalances';
 

src/renderer/entities/balance/lib/balance-utils.ts

@@ -1,6 +1,6 @@
 import keyBy from 'lodash/keyBy';
 
-import { type AccountId, type Balance, type ChainId, type OmitFirstArg } from '@shared/core';
+import { type AccountId, type Balance, type ChainId, type OmitFirstArg } from '@/shared/core';
 
 export const balanceUtils = {
   getAssetBalances,

src/renderer/entities/balance/model/balance-model.ts

@@ -1,8 +1,8 @@
 import { createEffect, createEvent, createStore, sample } from 'effector';
 import { throttle } from 'patronum';
 
-import { storageService } from '@shared/api/storage';
-import { type Balance, type ID } from '@shared/core';
+import { storageService } from '@/shared/api/storage';
+import { type Balance, type ID } from '@/shared/core';
 import { balanceUtils } from '../lib/balance-utils';
 import { BUFFER_DELAY, SAVE_TIMEOUT } from '../lib/constants';
 

src/renderer/entities/basket/model/basket-model.ts

@@ -1,7 +1,7 @@
 import { createEffect, createEvent, createStore, sample } from 'effector';
 
-import { storageService } from '@shared/api/storage';
-import { type BasketTransaction } from '@shared/core';
+import { storageService } from '@/shared/api/storage';
+import { type BasketTransaction } from '@/shared/core';
 
 const basketStarted = createEvent();
 const transactionsCreated = createEvent<BasketTransaction[]>();

src/renderer/entities/chain/ui/ChainIcon/ChainIcon.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 
-import { TEST_CHAIN_ICON } from '@shared/lib/utils';
+import { TEST_CHAIN_ICON } from '@/shared/lib/utils';
 
 import { ChainIcon } from './ChainIcon';
 

src/renderer/entities/chain/ui/ChainIcon/ChainIcon.tsx

@@ -1,6 +1,6 @@
-import { useToggle } from '@shared/lib/hooks';
-import { cnTw } from '@shared/lib/utils';
-import { Shimmering } from '@shared/ui';
+import { useToggle } from '@/shared/lib/hooks';
+import { cnTw } from '@/shared/lib/utils';
+import { Shimmering } from '@/shared/ui';
 
 type Props = {
   src?: string;

src/renderer/entities/chain/ui/ChainTitle/ChainTitle.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, type StoryFn } from '@storybook/react';
 
-import { TEST_CHAIN_ID } from '@shared/lib/utils';
+import { TEST_CHAIN_ID } from '@/shared/lib/utils';
 
 import { ChainTitle } from './ChainTitle';