Added the @components webpack alias to the project (#12808)

* Added the @shared webpack alias to the project.

* Added some documentation.

* Fixed a copy paste error.

* Renamed @shared to @components.

* Update docs/frontend/webpacker.md

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/javascript/.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
             alias: {
               '@crayons': path.join(__dirname, './crayons'),
               '@utilities': path.join(__dirname, './utilities'),
+              '@components': path.join(__dirname, './shared/components'),
             },
             extensions: ['.js', '.jsx'],
           },

app/javascript/.storybook/main.js

@@ -67,6 +67,7 @@ module.exports = {
         ...config.resolve.alias,
         '@crayons': path.resolve(__dirname, '../crayons'),
         '@utilities': path.resolve(__dirname, '../utilities'),
+        '@components': path.resolve(__dirname, '../shared/components'),
       },
     };
 

config/webpack/environment.js

@@ -22,6 +22,10 @@ environment.splitChunks((config) => {
         ...(config.resolve ? config.resolve.alias : {}),
         '@crayons': path.resolve(__dirname, '../../app/javascript/crayons'),
         '@utilities': path.resolve(__dirname, '../../app/javascript/utilities'),
+        '@components': path.resolve(
+          __dirname,
+          '../../app/javascript/shared/components',
+        ),
       },
     },
   };

docs/frontend/webpacker.md

@@ -37,6 +37,15 @@ loading split chunks multiple times.
 <%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>
 ```
 
+## Webpack aliases
+
+The project uses
+[webpack aliases](https://webpack.js.org/configuration/resolve/#resolvealias).
+The aliases used in the project can be found under `alias` in
+https://github.com/forem/forem/blob/master/config/webpack/environment.js
+
+## Additional Resources
+
 For more information in regards to `javascript_packs_with_chunks_tag`, see
 https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb
 

jest.config.js

@@ -35,6 +35,7 @@ module.exports = {
     '\\.(svg|png)$': '<rootDir>/empty-module.js',
     '^@crayons(.*)$': '<rootDir>/app/javascript/crayons$1',
     '^@utilities(.*)$': '<rootDir>/app/javascript/utilities$1',
+    '^@components(.*)$': '<rootDir>/app/javascript/shared/components$1',
   },
   // The webpack config folder for webpacker is excluded as it has a test.js file that gets
   // picked up by jest if this folder is not excluded causing a false negative of a test suite failing.

jsconfig.json

@@ -3,7 +3,8 @@
     "baseUrl": "./",
     "paths": {
       "@crayons/*": ["app/javascript/crayons/*"],
-      "@utilities/*": ["app/javascript/utilities/*"]
+      "@utilities/*": ["app/javascript/utilities/*"],
+      "@components/*": ["app/javascript/shared/components/*"]
     }
   },
   "exclude": ["node_modules", "**/node_modules/*"]