Skip to content

Commit 4d1dc45

Browse files
rsanterirsanteri
authored
refactor: add craco and import aliases (#166)
* refactor: Add craco and update imports to use aliases * chore: Add prettier import sorting rules * chore: Remove unnecessary config
1 parent adef77f commit 4d1dc45

File tree

200 files changed

+1885
-1292
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

200 files changed

+1885
-1292
lines changed

‎.prettierrc.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,14 @@ module.exports = {
55
printWidth: 120,
66
tabWidth: 2,
77
endOfLine: 'auto',
8+
importOrder: [
9+
'^@/(.*)$',
10+
'^@pages/(.*)$',
11+
'^@components/(.*)$',
12+
'^@hooks/(.*)$',
13+
'^@utils/(.*)$',
14+
'^@assets/(.*)$',
15+
'^[./]',
16+
],
17+
plugins: ['@trivago/prettier-plugin-sort-imports'],
818
};

‎craco.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const importPaths = require('./import-alias.config');
2+
3+
module.exports = {
4+
webpack: {
5+
alias: importPaths,
6+
},
7+
};

‎cypress.config.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
1-
import { defineConfig } from "cypress";
1+
import { defineConfig } from 'cypress';
2+
import importPaths from './import-alias.config';
23

34
export default defineConfig({
45
component: {
56
devServer: {
6-
framework: "create-react-app",
7-
bundler: "webpack",
7+
framework: 'create-react-app',
8+
bundler: 'webpack',
9+
webpackConfig: (config) => ({
10+
...config,
11+
resolve: {
12+
alias: {
13+
...importPaths,
14+
},
15+
},
16+
}),
817
},
9-
specPattern: "**/*.test.cypress.{js,ts,jsx,tsx}",
10-
excludeSpecPattern: "**/*.plugin-dev.*",
18+
specPattern: '**/*.test.cypress.{js,ts,jsx,tsx}',
19+
excludeSpecPattern: '**/*.plugin-dev.*',
1120
},
1221

1322
e2e: {

‎import-alias.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const path = require('path');
2+
3+
const importAliasPaths = {
4+
'@': path.resolve(__dirname, 'src'),
5+
'@assets': path.resolve(__dirname, 'src/assets'),
6+
'@theme': path.resolve(__dirname, 'src/theme'),
7+
'@translations': path.resolve(__dirname, 'src/translations'),
8+
'@components': path.resolve(__dirname, 'src/components'),
9+
'@hooks': path.resolve(__dirname, 'src/hooks'),
10+
'@pages': path.resolve(__dirname, 'src/pages'),
11+
'@utils': path.resolve(__dirname, 'src/utils'),
12+
};
13+
14+
module.exports = importAliasPaths;

‎package.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
"uuid": "^9.0.0"
2828
},
2929
"scripts": {
30-
"start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
31-
"start-with-mocks": "cross-env DISABLE_NEW_JSX_TRANSFORM=true REACT_APP_ENABLE_MOCKS=true react-scripts start",
32-
"build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build",
30+
"start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true craco start",
31+
"start-with-mocks": "cross-env DISABLE_NEW_JSX_TRANSFORM=true REACT_APP_ENABLE_MOCKS=true craco start",
32+
"build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true craco build",
3333
"cypress:open": "cypress open",
3434
"cypress:run": "cypress run",
3535
"test": "cypress open --component",
@@ -58,7 +58,10 @@
5858
},
5959
"devDependencies": {
6060
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
61+
"@craco/craco": "^7.1.0",
62+
"@craco/types": "^7.1.0",
6163
"@cypress/react": "^8.0.0",
64+
"@trivago/prettier-plugin-sort-imports": "4.2.0",
6265
"@types/node": "^20.12.7",
6366
"@types/react": "^18.2.5",
6467
"@types/react-dom": "^18.2.3",
@@ -95,5 +98,6 @@
9598
"workerDirectory": [
9699
"public"
97100
]
98-
}
101+
},
102+
"packageManager": "[email protected]"
99103
}

‎src/App.tsx

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1+
import '@theme/font/roboto.css';
12
import React, { useEffect, useState } from 'react';
2-
import { BrowserRouter as Router, Route } from 'react-router-dom';
3-
import { QueryParamProvider } from 'use-query-params';
43
import { useTranslation } from 'react-i18next';
5-
6-
import Root from './pages/Root';
7-
8-
import GlobalStyle from './GlobalStyle';
9-
import './theme/font/roboto.css';
10-
11-
import { Page } from './components/Structure';
12-
import AppBar from './components/AppBar';
13-
import { NotificationsProvider, Notifications } from './components/Notifications';
14-
import ErrorBoundary from './components/GeneralErrorBoundary';
15-
import { TimezoneProvider } from './components/TimezoneProvider';
16-
import { LoggingProvider } from './hooks/useLogger';
17-
import FeatureFlagLoader from './components/FeatureLoader';
18-
import Logger from './components/Logger';
19-
20-
import { fetchServiceVersion } from './utils/VERSION';
21-
import { fetchFeaturesConfig } from './utils/FEATURE';
22-
import Announcements from './components/Announcement';
23-
import { PluginsProvider } from './components/Plugins/PluginManager';
24-
import PluginRegisterSystem from './components/Plugins/PluginRegisterSystem';
25-
import TopNavPlugin from './components/Plugins/TopNavPlugin';
26-
4+
import { Route, BrowserRouter as Router } from 'react-router-dom';
5+
import { QueryParamProvider } from 'use-query-params';
6+
import GlobalStyle from '@/GlobalStyle';
7+
import Root from '@pages/Root';
8+
import Announcements from '@components/Announcement';
9+
import AppBar from '@components/AppBar';
10+
import FeatureFlagLoader from '@components/FeatureLoader';
11+
import ErrorBoundary from '@components/GeneralErrorBoundary';
12+
import Logger from '@components/Logger';
13+
import { Notifications, NotificationsProvider } from '@components/Notifications';
14+
import { PluginsProvider } from '@components/Plugins/PluginManager';
15+
import PluginRegisterSystem from '@components/Plugins/PluginRegisterSystem';
16+
import TopNavPlugin from '@components/Plugins/TopNavPlugin';
17+
import { Page } from '@components/Structure';
18+
import { TimezoneProvider } from '@components/TimezoneProvider';
19+
import { LoggingProvider } from '@hooks/useLogger';
20+
import { fetchFeaturesConfig } from '@utils/FEATURE';
21+
import { fetchServiceVersion } from '@utils/VERSION';
2722
import { appBasePath } from './constants';
2823

2924
const App: React.FC = () => {

‎src/GlobalStyle.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { createGlobalStyle, css } from 'styled-components';
1+
import '@theme/theme.css';
22
import { normalize } from 'polished';
3-
import './theme/theme.css';
3+
import { createGlobalStyle, css } from 'styled-components';
44

55
// Introduce global css as `css` ttl for prettier formatting
66
const globalCSS = css`

‎src/components/Announcement/__tests__/Announcement.test.cypress.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
34
import Announcements from '..';
4-
55
import NotificationsResponse from '../../../../cypress/fixtures/notifications_response.json';
6-
import TestWrapper from '../../../utils/testing';
76

87
describe('Announcements test', () => {
98
it('Announcements basic', () => {

‎src/components/Announcement/index.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import Markdown from 'markdown-to-jsx';
22
import React, { useEffect, useState } from 'react';
33
import styled from 'styled-components';
4-
import { apiHttp } from '../../constants';
5-
import { logWarning } from '../../utils/errorlogger';
6-
import HeightAnimatedContainer from '../HeightAnimatedContainer';
7-
import Icon from '../Icon';
8-
import LaunchIconWhite from '../../assets/launch_white.svg';
9-
10-
import { NotificationType } from '../Notifications';
11-
import { Announcement as IAnnouncement } from '../../types';
4+
import { apiHttp } from '@/constants';
5+
import { Announcement as IAnnouncement } from '@/types';
6+
import HeightAnimatedContainer from '@components/HeightAnimatedContainer';
7+
import Icon from '@components/Icon';
8+
import { NotificationType } from '@components/Notifications';
9+
import { logWarning } from '@utils/errorlogger';
10+
import LaunchIconWhite from '@assets/launch_white.svg';
1211

1312
//
1413
// Render list of announcements which are not shown before

‎src/components/AppBar/__tests__/AppBar.test.cypress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
34
import AppBar from '..';
45
import { PluginsProvider } from '../../Plugins/PluginManager';
5-
import TestWrapper from '../../../utils/testing';
66

77
describe('AppBar test', () => {
88
it('AppBar basic', () => {

‎src/components/AppBar/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import styled from 'styled-components';
32
import { Link } from 'react-router-dom';
4-
import logo from '../../assets/logo_dark_horizontal.svg';
5-
import Breadcrumb from '../Breadcrumb';
6-
import { ItemRow } from '../Structure';
7-
import HelpMenu from '../HelpMenu';
8-
import ConnectionStatus from '../ConnectionStatus';
9-
import FEATURE_FLAGS from '../../utils/FEATURE';
10-
import PluginGroup from '../Plugins/PluginGroup';
3+
import styled from 'styled-components';
4+
import Breadcrumb from '@components/Breadcrumb';
5+
import ConnectionStatus from '@components/ConnectionStatus';
6+
import HelpMenu from '@components/HelpMenu';
7+
import PluginGroup from '@components/Plugins/PluginGroup';
8+
import { ItemRow } from '@components/Structure';
9+
import FEATURE_FLAGS from '@utils/FEATURE';
10+
import logo from '@assets/logo_dark_horizontal.svg';
1111

1212
//
1313
// Main application bar which is always shown on top of the page

‎src/components/AutoComplete/__tests__/AutoComplete.test.cypress.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
3-
import { AutoCompleteItem } from '../../../hooks/useAutoComplete';
2+
import React from 'react';
3+
import { AutoCompleteItem } from '@hooks/useAutoComplete';
4+
import TestWrapper from '@utils/testing';
45
import AutoComplete from '..';
5-
import TestWrapper from '../../../utils/testing';
66

77
const resultsTestList = [
88
{ value: 'test_1', label: 'Test 1' },

‎src/components/AutoComplete/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import styled from 'styled-components';
3-
import { AutoCompleteItem } from '../../hooks/useAutoComplete';
4-
import { PopoverStyles } from '../Popover';
3+
import { PopoverStyles } from '@components/Popover';
4+
import { AutoCompleteItem } from '@hooks/useAutoComplete';
55

66
//
77
// Typedef

‎src/components/Breadcrumb/__tests__/Breadcrumb.test.cypress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
34
import Breadcrumb, { findAdditionalButtons, notEmptyAndEqual, pathFromString } from '..';
4-
import TestWrapper from '../../../utils/testing';
55

66
const matchWithParams = (params: Record<string, string>) => ({
77
isExact: true,

‎src/components/Breadcrumb/index.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import React, { ChangeEventHandler, useState, useMemo } from 'react';
2-
import styled, { css } from 'styled-components';
3-
import { useLocation, match, Link, useHistory } from 'react-router-dom';
1+
import React, { ChangeEventHandler, useMemo, useState } from 'react';
42
import { useTranslation } from 'react-i18next';
5-
import { getPath, getRouteMatch, KnownURLParams } from '../../utils/routing';
6-
import { ButtonLink, ButtonCSS, BigButton } from '../Button';
7-
import Icon from '../Icon';
8-
import { PopoverStyles } from '../Popover';
9-
import { ItemRow } from '../Structure';
10-
import useAutoComplete, { AutoCompleteItem } from '../../hooks/useAutoComplete';
11-
import { takeLastSplitFromURL } from '../../utils/url';
12-
import { AutoCompleteLine } from '../AutoComplete';
13-
import HeightAnimatedContainer from '../HeightAnimatedContainer';
14-
import InputWrapper from '../Form/InputWrapper';
15-
import useOnKeyPress from '../../hooks/useOnKeyPress';
16-
import FEATURE_FLAGS from '../../utils/FEATURE';
3+
import { Link, match, useHistory, useLocation } from 'react-router-dom';
4+
import styled, { css } from 'styled-components';
5+
import { AutoCompleteLine } from '@components/AutoComplete';
6+
import { BigButton, ButtonCSS, ButtonLink } from '@components/Button';
7+
import InputWrapper from '@components/Form/InputWrapper';
8+
import HeightAnimatedContainer from '@components/HeightAnimatedContainer';
9+
import Icon from '@components/Icon';
10+
import { PopoverStyles } from '@components/Popover';
11+
import { ItemRow } from '@components/Structure';
12+
import useAutoComplete, { AutoCompleteItem } from '@hooks/useAutoComplete';
13+
import useOnKeyPress from '@hooks/useOnKeyPress';
14+
import FEATURE_FLAGS from '@utils/FEATURE';
15+
import { KnownURLParams, getPath, getRouteMatch } from '@utils/routing';
16+
import { takeLastSplitFromURL } from '@utils/url';
1717

1818
//
1919
// Component

‎src/components/Button/__tests__/Button.test.cypress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
3-
import TestWrapper from '../../../utils/testing';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
44
import Button from '..';
55

66
describe('Button test', () => {

‎src/components/Button/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ReactNode } from 'react';
2-
import styled, { css } from 'styled-components';
32
import { Link } from 'react-router-dom';
3+
import styled, { css } from 'styled-components';
44

55
//
66
// Typedef

‎src/components/ButtonGroup/__tests__/ButtonGroup.test.cypress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
3-
import TestWrapper from '../../../utils/testing';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
44
import ButtonGroup from '..';
55
import Button from '../../Button';
66

‎src/components/Collapsable/__tests__/Collapsable.test.cypress.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
2+
import React from 'react';
3+
import TestWrapper from '@utils/testing';
34
import Collapsable from '..';
4-
import TestWrapper from '../../../utils/testing';
55

66
describe('Collapsable test', () => {
77
it('Collapsable basic', () => {

‎src/components/Collapsable/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { ReactNode, useEffect, useState } from 'react';
22
import styled from 'styled-components';
3-
import HeightAnimatedContainer from '../HeightAnimatedContainer';
4-
import Icon from '../Icon';
3+
import HeightAnimatedContainer from '@components/HeightAnimatedContainer';
4+
import Icon from '@components/Icon';
55

66
//
77
// Typedef

‎src/components/ConnectionStatus/__tests__/ConnectionStatus.test.cypress.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1+
import { mount } from '@cypress/react';
12
import 'cypress-wait-until';
2-
import 'setimmediate';
3-
3+
import { Server } from 'mock-websocket';
44
import React from 'react';
5-
import { mount } from '@cypress/react';
6-
import TestWrapper from '../../../utils/testing';
5+
import 'setimmediate';
6+
import TestWrapper from '@utils/testing';
77
import ConnectionStatus from '..';
8-
import { Server } from 'mock-websocket';
98

109
describe('ConnectionStatus test', () => {
1110
let server: Server;

‎src/components/ConnectionStatus/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { useEffect, useState } from 'react';
2-
import styled from 'styled-components';
32
import { useTranslation } from 'react-i18next';
4-
import { SmallText } from '../Text';
5-
6-
import ResourceEvents from '../../ws';
3+
import styled from 'styled-components';
4+
import ResourceEvents from '@/ws';
5+
import { SmallText } from '@components/Text';
76

87
const WS_QUEUE_TTL_SECONDS = 60 * 5; // 5 minute TTL (backend default value)
98

‎src/components/DAG/__tests__/DAG.test.cypress.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
3-
import TestWrapper from '../../../utils/testing';
2+
import React from 'react';
3+
import { Run } from '@/types';
4+
import { createResource } from '@utils/testhelper';
5+
import TestWrapper from '@utils/testing';
46
import DAG, { isDAGError } from '..';
5-
import { createResource } from '../../../utils/testhelper';
6-
import { Run } from '../../../types';
77

88
const run: Run = {
99
flow_id: 'SplitForeachFlow',

‎src/components/DAG/__tests__/DAGContent.test.cypress.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
21
import { mount } from '@cypress/react';
3-
import DAGContent from '../components/DAGContent';
4-
import { createRun } from '../../../utils/testhelper';
5-
import TestWrapper, { gid } from '../../../utils/testing';
2+
import React from 'react';
3+
import DAGContent from '@components/DAG/components/DAGContent';
4+
import { createRun } from '@utils/testhelper';
5+
import TestWrapper, { gid } from '@utils/testing';
66

77
const data = {
88
file: 'foreach.py',

0 commit comments

Comments
 (0)