Skip to content

Commit 0174dcc

Browse files
VadorequestVadorequest
committed
(MAJOR) Massive folder structure refactoring, using modular approach and module path aliases (#264)
Breaking changes. Using module path aliasing instead of relative paths. Using a more modular design pattern.
1 parent 0850614 commit 0174dcc

File tree

369 files changed

+3010
-1973
lines changed

Some content is hidden

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

369 files changed

+3010
-1973
lines changed

‎.codeclimate.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ checks:
1616
method-complexity:
1717
enabled: true
1818
config:
19-
threshold: 10
19+
threshold: 25 # 10 by default
2020
method-count:
2121
enabled: true
2222
config:
2323
threshold: 20
2424
method-lines:
2525
enabled: true
2626
config:
27-
threshold: 200 # 25 by default
27+
threshold: 300 # 25 by default
2828
nested-control-flow:
2929
enabled: true
3030
config:

‎.storybook/jsconfig.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/app/*": [
6+
"../src/app/*"
7+
],
8+
"@/common/*": [
9+
"../src/common/*"
10+
],
11+
"@/components/*": [
12+
"../src/common/components/*"
13+
],
14+
"@/utils/*": [
15+
"../src/common/utils/*"
16+
],
17+
"@/layouts/*": [
18+
"../src/layouts/*"
19+
],
20+
"@/modules/*": [
21+
"../src/modules/*"
22+
],
23+
"@/pages/*": [
24+
"../src/pages/*"
25+
]
26+
}
27+
}
28+
}

‎.storybook/main.js

+18
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,24 @@ module.exports = {
230230
'@emotion/core': toPath('node_modules/@emotion/react'),
231231
'@emotion/styled': toPath('node_modules/@emotion/styled'),
232232
'emotion-theming': toPath('node_modules/@emotion/react'),
233+
234+
/**
235+
* Map our module path aliases, so that Storybook can understand modules loaded using "@/common" and load the proper file.
236+
* Required, or Storybook will fail to import dependencies from Stories.
237+
*
238+
* XXX The below list must match `tsconfig.json:compilerOptions.paths`, so the Next.js app and Storybook resolve all aliases the same way.
239+
* The paths mapping must also match the `jsconfig.json:compilerOptions.paths` file, which is necessary for WebStorm to understand them for .js files.
240+
*
241+
* @see https://nextjs.org/docs/advanced-features/module-path-aliases
242+
* @see https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399/comments/360002636080
243+
*/
244+
"@/app": path.resolve(__dirname, "../src/app"),
245+
"@/common": path.resolve(__dirname, "../src/common"),
246+
"@/components": path.resolve(__dirname, "../src/common/components"),
247+
"@/utils": path.resolve(__dirname, "../src/common/utils"),
248+
"@/layouts": path.resolve(__dirname, "../src/layouts"),
249+
"@/modules": path.resolve(__dirname, "../src/modules"),
250+
"@/pages": path.resolve(__dirname, "../src/pages"),
233251
},
234252
},
235253
};

‎.storybook/preview.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ import find from 'lodash.find';
88
import React from 'react';
99
import { withNextRouter } from 'storybook-addon-next-router';
1010
import { withPerformance } from 'storybook-addon-performance';
11-
import '../src/components/appBootstrap/MultiversalGlobalExternalStyles'; // Import the same 3rd party libraries global styles as the pages/_app.tsx (for UI consistency)
12-
import MultiversalGlobalStyles from '../src/components/appBootstrap/MultiversalGlobalStyles';
13-
import { defaultLocale, getLangFromLocale, supportedLocales } from '../src/i18nConfig';
14-
import amplitudeContext from '../src/stores/amplitudeContext';
15-
import customerContext from '../src/stores/customerContext';
16-
import { cypressContext } from '../src/stores/cypressContext';
17-
import datasetContext from '../src/stores/datasetContext';
18-
import i18nContext from '../src/stores/i18nContext';
19-
import previewModeContext from '../src/stores/previewModeContext';
20-
import quickPreviewContext from '../src/stores/quickPreviewContext';
21-
import userConsentContext from '../src/stores/userConsentContext';
22-
import { userSessionContext } from '../src/stores/userSessionContext';
23-
import { getAmplitudeInstance } from '../src/utils/analytics/amplitude';
24-
import '../src/utils/app/ignoreNoisyWarningsHacks';
25-
import { initCustomerTheme } from '../src/utils/data/theme';
26-
import i18nextLocize from '../src/utils/i18n/i18nextLocize';
27-
import '../src/utils/icons/font-awesome';
11+
import '@/app/components/MultiversalGlobalExternalStyles'; // Import the same 3rd party libraries global styles as the pages/_app.tsx (for UI consistency)
12+
import MultiversalGlobalStyles from '@/app/components/MultiversalGlobalStyles';
13+
import { defaultLocale, getLangFromLocale, supportedLocales } from '@/modules/core/i18n/i18nConfig';
14+
import amplitudeContext from '@/modules/core/amplitude/context/amplitudeContext';
15+
import customerContext from '@/modules/core/data/contexts/customerContext';
16+
import { cypressContext } from '@/modules/core/testing/contexts/cypressContext';
17+
import datasetContext from '@/modules/core/data/contexts/datasetContext';
18+
import i18nContext from '@/modules/core/i18n/contexts/i18nContext';
19+
import previewModeContext from '@/modules/core/previewMode/contexts/previewModeContext';
20+
import quickPreviewContext from '@/modules/core/quickPreview/contexts/quickPreviewContext';
21+
import userConsentContext from '@/modules/core/userConsent/contexts/userConsentContext';
22+
import { userSessionContext } from '@/modules/core/userSession/userSessionContext';
23+
import { getAmplitudeInstance } from '@/modules/core/amplitude/amplitude';
24+
import '@/common/utils/ignoreNoisyWarningsHacks';
25+
import { initCustomerTheme } from '@/modules/core/theming/theme';
26+
import i18nextLocize from '@/modules/core/i18n/i18nextLocize';
27+
import '@/modules/core/fontAwesome/fontAwesome';
2828
import dataset from './mock/sb-dataset';
2929

3030
// Loads translations from local file cache (Locize)

‎cypress/README.md

+16
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,19 @@ The files `cypress/config-*` are used for different purposes.
5151
_[Source](https://docs.cypress.io/faq/questions/using-cypress-faq.html#What-are-your-best-practices-for-organizing-tests)_
5252

5353
[Cypress releases "Real World App" (RWA) - Blog post](https://www.cypress.io/blog/2020/06/11/introducing-the-cypress-real-world-app/)
54+
55+
## Module path alias mapping
56+
57+
We use module alias path mappings, to avoid using relative paths (e.g: `../../src/common`) but absolute paths (AKA "module paths") instead (e.g: `@/common`).
58+
59+
Although it's simpler to use, it's harder to configure because it affects several configuration files:
60+
- The paths mapping in `tsconfig.json:compilerOptions.paths` must match those in `../tsconfig.json:compilerOptions.paths`
61+
- They must also match those in `jsconfig.json` file, which is necessary for WebStorm to understand them for .js files.
62+
63+
If the module path mappings aren't properly set everywhere, it won't work.
64+
65+
> You can still use relative paths.
66+
67+
Reference:
68+
- See [Next.js "Module path aliases" documentation](https://nextjs.org/docs/advanced-features/module-path-aliases)
69+
- See [WebStorm issue](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399/comments/360002636080)

‎cypress/integration/app/_sanity/2-customer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Customer } from '../../../../src/types/data/Customer';
2-
import { CYPRESS_WINDOW_NS } from '../../../../src/utils/testing/cypress';
1+
import { Customer } from '@/modules/core/data/types/Customer';
2+
import { CYPRESS_WINDOW_NS } from '@/modules/core/testing/cypress';
33

44
describe('Sanity checks > Browser data', () => {
55
/**

‎cypress/integration/app/common/footer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Customer } from '../../../../src/types/data/Customer';
1+
import { Customer } from '@/modules/core/data/types/Customer';
22

33
const baseUrl = Cypress.config().baseUrl;
44

‎cypress/integration/app/common/nav.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Customer } from '../../../../src/types/data/Customer';
1+
import { Customer } from '@/modules/core/data/types/Customer';
22

33
const baseUrl = Cypress.config().baseUrl;
44

‎cypress/jsconfig.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/app/*": [
6+
"../src/app/*"
7+
],
8+
"@/common/*": [
9+
"../src/common/*"
10+
],
11+
"@/components/*": [
12+
"../src/common/components/*"
13+
],
14+
"@/utils/*": [
15+
"../src/common/utils/*"
16+
],
17+
"@/layouts/*": [
18+
"../src/layouts/*"
19+
],
20+
"@/modules/*": [
21+
"../src/modules/*"
22+
],
23+
"@/pages/*": [
24+
"../src/pages/*"
25+
]
26+
}
27+
}
28+
}

‎cypress/support/commands.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// https://on.cypress.io/custom-commands
99
// ***********************************************
1010

11-
import { CYPRESS_WINDOW_NS } from '../../src/utils/testing/cypress';
11+
import { CYPRESS_WINDOW_NS } from '@/modules/core/testing/cypress';
1212

1313
/**
1414
* Prepare DOM aliases by fetching the customer data from the browser window and aliasing them for later use.

‎cypress/tsconfig.json

+23
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,29 @@
66
"exclude": [],
77
"compilerOptions": {
88
"baseUrl": ".",
9+
"paths": {
10+
"@/app/*": [
11+
"../src/app/*"
12+
],
13+
"@/common/*": [
14+
"../src/common/*"
15+
],
16+
"@/components/*": [
17+
"../src/common/components/*"
18+
],
19+
"@/utils/*": [
20+
"../src/common/utils/*"
21+
],
22+
"@/layouts/*": [
23+
"../src/layouts/*"
24+
],
25+
"@/modules/*": [
26+
"../src/modules/*"
27+
],
28+
"@/pages/*": [
29+
"../src/pages/*"
30+
]
31+
},
932
"types": [
1033
"cypress"
1134
],

‎jest.config.js

+19
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,25 @@ module.exports = {
1111
tsconfig: 'tsconfig.jest.json',
1212
},
1313
},
14+
15+
/**
16+
* Map our module path aliases, so that Jest can understand modules loaded using "@/common" and load the proper file.
17+
* Required, or Jest will fail to import dependencies from tests.
18+
*
19+
* XXX The below list must match `tsconfig.json:compilerOptions.paths`, so the Next.js app and Jest resolve all aliases the same way.
20+
*
21+
* @see https://nextjs.org/docs/advanced-features/module-path-aliases
22+
* @see https://github.com/ilearnio/module-alias/issues/46#issuecomment-546154015
23+
*/
24+
moduleNameMapper: {
25+
'^@/app/(.*)$': '<rootDir>/src/app/$1',
26+
'^@/common/(.*)$': '<rootDir>/src/common/$1',
27+
'^@/components/(.*)$': '<rootDir>/src/common/components/$1',
28+
'^@/utils/(.*)$': '<rootDir>/src/common/utils/$1',
29+
'^@/layouts/(.*)$': '<rootDir>/src/layouts/$1',
30+
'^@/modules/(.*)$': '<rootDir>/src/modules/$1',
31+
'^@/pages/(.*)$': '<rootDir>/src/pages/$1',
32+
},
1433
modulePathIgnorePatterns: [
1534
'.next/',
1635
'cypress',

‎jest.extends.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
toMatchShapeOf,
55
} from 'jest-to-match-shape-of'; // See https://www.npmjs.com/package/jest-to-match-shape-of
66
// Import utilities that extend Jest "expect" function by themselves
7-
import './src/utils/extend-jest/toContainObject';
7+
import '@/modules/core/testing/toContainObject';
88

99
// Extend Jest "expect" function
1010
expect.extend({

‎next.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const bundleAnalyzer = require('@next/bundle-analyzer');
22
const nextSourceMaps = require('@zeit/next-source-maps');
33
const packageJson = require('./package');
4-
const i18nConfig = require('./src/i18nConfig');
4+
const i18nConfig = require('./src/modules/core/i18n/i18nConfig');
55

66
const withSourceMaps = nextSourceMaps();
77
const withBundleAnalyzer = bundleAnalyzer({ // Run with "yarn analyse:bundle" - See https://www.npmjs.com/package/@next/bundle-analyzer

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"analyse:bundle:development": "ANALYZE_BUNDLE=true yarn start",
1111
"analyse:bundle:production": ". ./scripts/populate-git-env.sh && ANALYZE_BUNDLE=true next build",
1212
"analyse:unused": "next-unused",
13-
"svg": "npx svgr -d src/svg src/svg --ext tsx --template src/utils/svg/svgTemplate.ts",
13+
"svg": "npx svgr -d svg-to-react svg-to-react --ext tsx --template svg-to-react/svgTemplate.ts",
1414
"deploy": "yarn deploy:customer1",
1515
"deploy:all": "yarn deploy:customer1 && yarn deploy:customer2",
1616
"deploy:all:production": "yarn deploy:customer1:production && yarn deploy:customer2:production",
@@ -81,6 +81,10 @@
8181
"codemod:update-react-imports": "npx react-codemod update-react-imports src/",
8282
"codemod:name-default-component": "npx @next/codemod name-default-component src/",
8383
"codemod:withamp-to-config": "npx @next/codemod withamp-to-config src/",
84+
"codemod:module-path-aliases": "yarn codemod:module-path-aliases:src && yarn codemod:module-path-aliases:cypress && yarn codemod:module-path-aliases:sb",
85+
"codemod:module-path-aliases:src": "npx relative-to-alias --src 'src' --alias '@/app' --alias-path './src/app' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/common' --alias-path './src/common' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/components' --alias-path './src/common/components' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/utils' --alias-path './src/common/utils' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/layouts' --alias-path './src/layouts' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'src' --alias '@/pages' --alias-path './src/pages' --extensions 'js,ts,tsx' --language 'typescript'",
86+
"codemod:module-path-aliases:cypress": "npx relative-to-alias --src 'cypress' --alias '@/app' --alias-path './src/app' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/common' --alias-path './src/common' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/components' --alias-path './src/common/components' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/utils' --alias-path './src/common/utils' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/layouts' --alias-path './src/layouts' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src 'cypress' --alias '@/pages' --alias-path './src/pages' --extensions 'js,ts,tsx' --language 'typescript'",
87+
"codemod:module-path-aliases:sb": "npx relative-to-alias --src '.storybook' --alias '@/app' --alias-path './src/app' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/common' --alias-path './src/common' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/components' --alias-path './src/common/components' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/utils' --alias-path './src/common/utils' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/layouts' --alias-path './src/layouts' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx' --language 'typescript' && npx relative-to-alias --src '.storybook' --alias '@/pages' --alias-path './src/pages' --extensions 'js,ts,tsx' --language 'typescript'",
8488
"security:audit": "yarn audit",
8589
"packages:upgrade": "yarn upgrade-interactive --latest"
8690
},
@@ -209,6 +213,7 @@
209213
"@types/lodash.xorby": "4.7.6",
210214
"@types/popper.js": "1.11.0",
211215
"@types/react": "17.0.0",
216+
"@types/react-dom": "17.0.0",
212217
"@types/react-test-renderer": "17.0.0",
213218
"@types/reactstrap": "8.7.2",
214219
"@types/uuid": "8.3.0",
@@ -241,6 +246,7 @@
241246
"node-mocks-http": "1.10.0",
242247
"open-cli": "6.0.1",
243248
"react-test-renderer": "17.0.1",
249+
"relative-to-alias": "2.0.1",
244250
"storybook-addon-designs": "5.4.3",
245251
"storybook-addon-next-router": "2.0.3",
246252
"storybook-addon-performance": "0.14.0",

0 commit comments

Comments
 (0)