UnlyEd · Vadorequest · Jan 18, 2021 · Jan 17, 2021 · Jan 17, 2021 · Jan 17, 2021
diff --git a/.storybook/jsconfig.json b/.storybook/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/common/*": [
+        "../src/common/*"
+      ],
+      "@/components/*": [
+        "../src/common/components/*"
+      ],
+      "@/utils/*": [
+        "../src/common/utils/*"
+      ],
+      "@/modules/*": [
+        "../src/modules/*"
+      ]
+    }
+  }
+}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -230,6 +230,21 @@ module.exports = {
           '@emotion/core': toPath('node_modules/@emotion/react'),
           '@emotion/styled': toPath('node_modules/@emotion/styled'),
           'emotion-theming': toPath('node_modules/@emotion/react'),
+
+          /**
+           * Map our module path aliases, so that Storybook can understand modules loaded using "@/common" and load the proper file.
+           * Required, or Storybook will fail to import dependencies from Stories.
+           *
+           * XXX The below list must match `tsconfig.json:compilerOptions.paths`, so the Next.js app and Storybook resolve all aliases the same way.
+           *  The paths mapping must also match the `jsconfig.json:compilerOptions.paths` file, which is necessary for WebStorm to understand them for .js files.
+           *
+           * @see https://nextjs.org/docs/advanced-features/module-path-aliases
+           * @see https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399/comments/360002636080
+           */
+          "@/common": path.resolve(__dirname, "../src/common"),
+          "@/components": path.resolve(__dirname, "../src/common/components"),
+          "@/utils": path.resolve(__dirname, "../src/common/utils"),
+          "@/modules": path.resolve(__dirname, "../src/modules"),
         },
       },
     };

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -8,23 +8,23 @@ import find from 'lodash.find';
 import React from 'react';
 import { withNextRouter } from 'storybook-addon-next-router';
 import { withPerformance } from 'storybook-addon-performance';
-import '../src/modules/bootstrapping/components/MultiversalGlobalExternalStyles'; // Import the same 3rd party libraries global styles as the pages/_app.tsx (for UI consistency)
-import MultiversalGlobalStyles from '../src/modules/bootstrapping/components/MultiversalGlobalStyles';
-import { defaultLocale, getLangFromLocale, supportedLocales } from '../src/modules/i18n/i18nConfig';
-import amplitudeContext from '../src/modules/amplitude/context/amplitudeContext';
-import customerContext from '../src/modules/data/contexts/customerContext';
-import { cypressContext } from '../src/modules/testing/contexts/cypressContext';
-import datasetContext from '../src/modules/data/contexts/datasetContext';
-import i18nContext from '../src/modules/i18n/contexts/i18nContext';
-import previewModeContext from '../src/modules/previewMode/contexts/previewModeContext';
-import quickPreviewContext from '../src/modules/quickPreview/contexts/quickPreviewContext';
-import userConsentContext from '../src/modules/userConsent/contexts/userConsentContext';
-import { userSessionContext } from '../src/modules/userSession/userSessionContext';
-import { getAmplitudeInstance } from '../src/modules/amplitude/amplitude';
-import '../src/common/utils/ignoreNoisyWarningsHacks';
-import { initCustomerTheme } from '../src/modules/theming/theme';
-import i18nextLocize from '../src/modules/i18n/i18nextLocize';
-import '../src/modules/fontAwesome/fontAwesome';
+import '@/modules/bootstrapping/components/MultiversalGlobalExternalStyles'; // Import the same 3rd party libraries global styles as the pages/_app.tsx (for UI consistency)
+import MultiversalGlobalStyles from '@/modules/bootstrapping/components/MultiversalGlobalStyles';
+import { defaultLocale, getLangFromLocale, supportedLocales } from '@/modules/i18n/i18nConfig';
+import amplitudeContext from '@/modules/amplitude/context/amplitudeContext';
+import customerContext from '@/modules/data/contexts/customerContext';
+import { cypressContext } from '@/modules/testing/contexts/cypressContext';
+import datasetContext from '@/modules/data/contexts/datasetContext';
+import i18nContext from '@/modules/i18n/contexts/i18nContext';
+import previewModeContext from '@/modules/previewMode/contexts/previewModeContext';
+import quickPreviewContext from '@/modules/quickPreview/contexts/quickPreviewContext';
+import userConsentContext from '@/modules/userConsent/contexts/userConsentContext';
+import { userSessionContext } from '@/modules/userSession/userSessionContext';
+import { getAmplitudeInstance } from '@/modules/amplitude/amplitude';
+import '@/common/utils/ignoreNoisyWarningsHacks';
+import { initCustomerTheme } from '@/modules/theming/theme';
+import i18nextLocize from '@/modules/i18n/i18nextLocize';
+import '@/modules/fontAwesome/fontAwesome';
 import dataset from './mock/sb-dataset';
 
 // Loads translations from local file cache (Locize)

diff --git a/cypress/README.md b/cypress/README.md
@@ -51,3 +51,19 @@ The files `cypress/config-*` are used for different purposes.
 _[Source](https://docs.cypress.io/faq/questions/using-cypress-faq.html#What-are-your-best-practices-for-organizing-tests)_
 
 [Cypress releases "Real World App" (RWA) - Blog post](https://www.cypress.io/blog/2020/06/11/introducing-the-cypress-real-world-app/)
+
+## Module path alias mapping
+
+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`).
+
+Although it's simpler to use, it's harder to configure because it affects several configuration files:
+- The paths mapping in `tsconfig.json:compilerOptions.paths` must match those in `../tsconfig.json:compilerOptions.paths`
+- They must also match those in `jsconfig.json` file, which is necessary for WebStorm to understand them for .js files.
+
+If the module path mappings aren't properly set everywhere, it won't work.
+
+> You can still use relative paths.
+
+Reference:
+- See [Next.js "Module path aliases" documentation](https://nextjs.org/docs/advanced-features/module-path-aliases)
+- See [WebStorm issue](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399/comments/360002636080)
diff --git a/cypress/integration/app/_sanity/2-customer.ts b/cypress/integration/app/_sanity/2-customer.ts
@@ -1,5 +1,5 @@
-import { Customer } from '../../../../src/modules/data/types/Customer';
-import { CYPRESS_WINDOW_NS } from '../../../../src/modules/testing/cypress';
+import { Customer } from '@/modules/data/types/Customer';
+import { CYPRESS_WINDOW_NS } from '@/modules/testing/cypress';
 
 describe('Sanity checks > Browser data', () => {
   /**

diff --git a/cypress/integration/app/common/footer.ts b/cypress/integration/app/common/footer.ts
@@ -1,4 +1,4 @@
-import { Customer } from '../../../../src/modules/data/types/Customer';
+import { Customer } from '@/modules/data/types/Customer';
 
 const baseUrl = Cypress.config().baseUrl;
 

diff --git a/cypress/integration/app/common/nav.ts b/cypress/integration/app/common/nav.ts
@@ -1,4 +1,4 @@
-import { Customer } from '../../../../src/modules/data/types/Customer';
+import { Customer } from '@/modules/data/types/Customer';
 
 const baseUrl = Cypress.config().baseUrl;
 

diff --git a/cypress/jsconfig.json b/cypress/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/common/*": [
+        "../src/common/*"
+      ],
+      "@/components/*": [
+        "../src/common/components/*"
+      ],
+      "@/utils/*": [
+        "../src/common/utils/*"
+      ],
+      "@/modules/*": [
+        "../src/modules/*"
+      ]
+    }
+  }
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -8,7 +8,7 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
-import { CYPRESS_WINDOW_NS } from '../../src/modules/testing/cypress';
+import { CYPRESS_WINDOW_NS } from '@/modules/testing/cypress';
 
 /**
  * Prepare DOM aliases by fetching the customer data from the browser window and aliasing them for later use.

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -6,6 +6,20 @@
   "exclude": [],
   "compilerOptions": {
     "baseUrl": ".",
+    "paths": {
+      "@/common/*": [
+        "../src/common/*"
+      ],
+      "@/components/*": [
+        "../src/common/components/*"
+      ],
+      "@/utils/*": [
+        "../src/common/utils/*"
+      ],
+      "@/modules/*": [
+        "../src/modules/*"
+      ]
+    },
     "types": [
       "cypress"
     ],

diff --git a/jest.config.js b/jest.config.js
@@ -11,6 +11,22 @@ module.exports = {
       tsconfig: 'tsconfig.jest.json',
     },
   },
+
+  /**
+   * Map our module path aliases, so that Jest can understand modules loaded using "@/common" and load the proper file.
+   * Required, or Jest will fail to import dependencies from tests.
+   *
+   * XXX The below list must match `tsconfig.json:compilerOptions.paths`, so the Next.js app and Jest resolve all aliases the same way.
+   *
+   * @see https://nextjs.org/docs/advanced-features/module-path-aliases
+   * @see https://github.com/ilearnio/module-alias/issues/46#issuecomment-546154015
+   */
+  moduleNameMapper: {
+    '^@/common/(.*)$': '<rootDir>/src/common/$1',
+    '^@/components/(.*)$': '<rootDir>/src/common/components/$1',
+    '^@/utils/(.*)$': '<rootDir>/src/common/utils/$1',
+    '^@/modules/(.*)$': '<rootDir>/src/modules/$1',
+  },
   modulePathIgnorePatterns: [
     '.next/',
     'cypress',

diff --git a/jest.extends.ts b/jest.extends.ts
@@ -4,7 +4,7 @@ import {
   toMatchShapeOf,
 } from 'jest-to-match-shape-of'; // See https://www.npmjs.com/package/jest-to-match-shape-of
 // Import utilities that extend Jest "expect" function by themselves
-import './src/modules/testing/toContainObject';
+import '@/modules/testing/toContainObject';
 
 // Extend Jest "expect" function
 expect.extend({

diff --git a/package.json b/package.json
@@ -81,6 +81,10 @@
     "codemod:update-react-imports": "npx react-codemod update-react-imports src/",
     "codemod:name-default-component": "npx @next/codemod name-default-component src/",
     "codemod:withamp-to-config": "npx @next/codemod withamp-to-config src/",
+    "codemod:module-path-aliases": "yarn codemod:module-path-aliases:src && yarn codemod:module-path-aliases:cypress && yarn codemod:module-path-aliases:sb",
+    "codemod:module-path-aliases:src": "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 '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx'  --language 'typescript'",
+    "codemod:module-path-aliases:cypress": "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 '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx'  --language 'typescript'",
+    "codemod:module-path-aliases:sb": "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 '@/modules' --alias-path './src/modules' --extensions 'js,ts,tsx'  --language 'typescript'",
     "security:audit": "yarn audit",
     "packages:upgrade": "yarn upgrade-interactive --latest"
   },
@@ -241,6 +245,7 @@
     "node-mocks-http": "1.10.0",
     "open-cli": "6.0.1",
     "react-test-renderer": "17.0.1",
+    "relative-to-alias": "2.0.1",
     "storybook-addon-designs": "5.4.3",
     "storybook-addon-next-router": "2.0.3",
     "storybook-addon-performance": "0.14.0",

diff --git a/src/common/components/dataDisplay/AllProducts.tsx b/src/common/components/dataDisplay/AllProducts.tsx
@@ -1,8 +1,8 @@
 import filter from 'lodash.filter';
 import React from 'react';
 
-import { AirtableRecord } from '../../../modules/data/types/AirtableRecord';
-import { Product } from '../../../modules/data/types/Product';
+import { AirtableRecord } from '@/modules/data/types/AirtableRecord';
+import { Product } from '@/modules/data/types/Product';
 import Products from './Products';
 
 type Props = {

diff --git a/src/common/components/dataDisplay/Btn.tsx b/src/common/components/dataDisplay/Btn.tsx
@@ -4,12 +4,8 @@ import {
 } from '@emotion/react';
 import classnames from 'classnames';
 import React, { ReactNode } from 'react';
-import { ReactButtonProps } from '../../../modules/react/types/ReactButtonProps';
-import {
-  ComponentThemeMode,
-  resolveThemedComponentColors,
-  ThemedComponentProps,
-} from '../../../modules/theming/themedComponentColors';
+import { ReactButtonProps } from '@/modules/react/types/ReactButtonProps';
+import { ComponentThemeMode, resolveThemedComponentColors, ThemedComponentProps } from '@/modules/theming/themedComponentColors';
 
 export type Props = {
   /**

diff --git a/src/common/components/dataDisplay/BubbleTimer.tsx b/src/common/components/dataDisplay/BubbleTimer.tsx
@@ -4,7 +4,7 @@ import React, {
   useState,
 } from 'react';
 
-import { CSSStyles } from '../../../modules/css/types/CSSStyles';
+import { CSSStyles } from '@/modules/css/types/CSSStyles';
 import AnimatedTextBubble from '../animations/AnimatedTextBubble';
 
 export type Props = {

diff --git a/src/common/components/dataDisplay/CircleBtn.tsx b/src/common/components/dataDisplay/CircleBtn.tsx
@@ -3,12 +3,8 @@ import {
   useTheme,
 } from '@emotion/react';
 import React from 'react';
-import { ReactDivProps } from '../../../modules/react/types/ReactDivProps';
-import {
-  ComponentThemeMode,
-  resolveThemedComponentColors,
-  ThemedComponentProps,
-} from '../../../modules/theming/themedComponentColors';
+import { ReactDivProps } from '@/modules/react/types/ReactDivProps';
+import { ComponentThemeMode, resolveThemedComponentColors, ThemedComponentProps } from '@/modules/theming/themedComponentColors';
 
 export type Props = {
   /**

diff --git a/src/common/components/dataDisplay/Code.tsx b/src/common/components/dataDisplay/Code.tsx
@@ -4,7 +4,7 @@ import {
   dracula,
 } from 'react-code-blocks';
 import { CodeBlockProps } from 'react-code-blocks/dist/components/CodeBlock';
-import { CSSStyles } from '../../../modules/css/types/CSSStyles';
+import { CSSStyles } from '@/modules/css/types/CSSStyles';
 
 export type Props = {
   /**

diff --git a/src/common/components/dataDisplay/ExternalLink.tsx b/src/common/components/dataDisplay/ExternalLink.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { ReactLinkProps } from '../../../modules/react/types/ReactLinkProps';
+import { ReactLinkProps } from '@/modules/react/types/ReactLinkProps';
 
 export type Props = {
   /**

diff --git a/src/common/components/dataDisplay/LegalContent.tsx b/src/common/components/dataDisplay/LegalContent.tsx
@@ -4,7 +4,7 @@ import {
 } from '@emotion/react';
 import React from 'react';
 import { Container } from 'reactstrap';
-import { Markdown as TextAsMarkdown } from '../../../modules/data/types/Markdown';
+import { Markdown as TextAsMarkdown } from '@/modules/data/types/Markdown';
 import Markdown from './Markdown';
 
 export type Props = {

diff --git a/src/common/components/dataDisplay/Logo.tsx b/src/common/components/dataDisplay/Logo.tsx
@@ -5,17 +5,11 @@ import get from 'lodash.get';
 // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 import React from 'react';
 
-import { CSSStyles } from '../../../modules/css/types/CSSStyles';
-import { Asset } from '../../../modules/data/types/Asset';
-import { Link } from '../../../modules/data/types/Link';
-import { Logo as LogoType } from '../../../modules/data/types/Logo';
-import {
-  DEFAULT_SIZES_MULTIPLIERS,
-  generateSizes,
-  resolveSize,
-  SizeMultiplier,
-  toPixels,
-} from '../../utils/logo';
+import { CSSStyles } from '@/modules/css/types/CSSStyles';
+import { Asset } from '@/modules/data/types/Asset';
+import { Link } from '@/modules/data/types/Link';
+import { Logo as LogoType } from '@/modules/data/types/Logo';
+import { DEFAULT_SIZES_MULTIPLIERS, generateSizes, resolveSize, SizeMultiplier, toPixels } from '@/utils/logo';
 
 type Props = {
   id: string;

diff --git a/src/common/components/dataDisplay/Markdown.tsx b/src/common/components/dataDisplay/Markdown.tsx
@@ -17,10 +17,10 @@ import {
   Row,
   UncontrolledDropdown as Dropdown,
 } from 'reactstrap';
-import { CSSStyles } from '../../../modules/css/types/CSSStyles';
-import { Markdown as MarkdownType } from '../../../modules/data/types/Markdown';
-import I18nBtnChangeLocale from '../../../modules/i18n/components/I18nBtnChangeLocale';
-import I18nLink from '../../../modules/i18n/components/I18nLink';
+import { CSSStyles } from '@/modules/css/types/CSSStyles';
+import { Markdown as MarkdownType } from '@/modules/data/types/Markdown';
+import I18nBtnChangeLocale from '@/modules/i18n/components/I18nBtnChangeLocale';
+import I18nLink from '@/modules/i18n/components/I18nLink';
 import Btn from './Btn';
 import Tooltip from './SimpleTooltip';
 

diff --git a/src/common/components/dataDisplay/ProductRow.tsx b/src/common/components/dataDisplay/ProductRow.tsx
@@ -5,9 +5,9 @@ import {
   Row,
 } from 'reactstrap';
 
-import { Asset } from '../../../modules/data/types/Asset';
-import { Product } from '../../../modules/data/types/Product';
-import AirtableAsset from '../../../modules/airtable/components/AirtableAsset';
+import { Asset } from '@/modules/data/types/Asset';
+import { Product } from '@/modules/data/types/Product';
+import AirtableAsset from '@/modules/airtable/components/AirtableAsset';
 import Markdown from './Markdown';
 
 type Props = {

diff --git a/src/common/components/dataDisplay/Products.tsx b/src/common/components/dataDisplay/Products.tsx
@@ -3,8 +3,8 @@ import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';
 
-import { AirtableRecord } from '../../../modules/data/types/AirtableRecord';
-import { Product } from '../../../modules/data/types/Product';
+import { AirtableRecord } from '@/modules/data/types/AirtableRecord';
+import { Product } from '@/modules/data/types/Product';
 import ProductRow from './ProductRow';
 
 type Props = {

diff --git a/src/common/components/layouts/DefaultLayout.tsx b/src/common/components/layouts/DefaultLayout.tsx
@@ -11,15 +11,15 @@ import {
 import React, { useState } from 'react';
 
 import ErrorPage from '../../../pages/_error';
-import { GenericObject } from '../../../modules/data/types/GenericObject';
-import { SoftPageProps } from '../../../modules/app/types/SoftPageProps';
-import Sentry from '../../../modules/sentry/sentry';
-import DefaultErrorLayout from '../../../modules/errorHandling/DefaultErrorLayout';
+import { GenericObject } from '@/modules/data/types/GenericObject';
+import { SoftPageProps } from '@/modules/app/types/SoftPageProps';
+import Sentry from '@/modules/sentry/sentry';
+import DefaultErrorLayout from '@/modules/errorHandling/DefaultErrorLayout';
 import DefaultPageContainer from './DefaultPageContainer';
 import Footer from './Footer';
 import Head, { HeadProps } from './Head';
 import Nav from './Nav';
-import PreviewModeBanner from '../../../modules/previewMode/components/PreviewModeBanner';
+import PreviewModeBanner from '@/modules/previewMode/components/PreviewModeBanner';
 
 const fileLabel = 'components/pageLayouts/DefaultLayout';
 const logger = createLogger({