Dry Release v0.2.2

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "javascript.preferences.quoteStyle": "double",
+  "typescript.preferences.quoteStyle": "double",
+  "prettier.jsxSingleQuote": false
+}

README.md

@@ -20,7 +20,7 @@ This is a [single-spa](https://single-spa.js.org/) example React microapp.
 
 ## Config
 
-For available variables config which depend on the running environment (`development` or `production`), please refer to `config/development.js` and `config/production.js`.
+For available variables config which depend on the running environment (`APPENV=dev` or `APPENV=prod`), please refer to `config/dev.js` and `config/prod.js`.
 
 For application constants which don't depend on the running environment use `src/constants/index.js`.
 

babel.config.js

@@ -0,0 +1,59 @@
+module.exports = function (api) {
+  const isProd = process.env.APPMODE === "production";
+  api.cache(!isProd);
+
+  const generateScopedName = isProd
+    ? "[hash:base64:6]"
+    : "teams_[path][name]___[local]___[hash:base64:6]";
+  return {
+    presets: ["@babel/preset-env", "@babel/preset-react"],
+    plugins: [
+      [
+        "@babel/plugin-transform-runtime",
+        {
+          useESModules: true,
+          regenerator: false,
+        },
+      ],
+      [
+        "react-css-modules",
+        {
+          filetypes: {
+            ".scss": {
+              syntax: "postcss-scss",
+            },
+          },
+          generateScopedName,
+        },
+      ],
+      "inline-react-svg",
+    ],
+    env: {
+      test: {
+        presets: [
+          [
+            "@babel/preset-env",
+            {
+              targets: "current node",
+            },
+          ],
+        ],
+        plugins: [
+          [
+            "module-resolver",
+            {
+              alias: {
+                styles: "./src/styles",
+                components: "./src/components",
+                hooks: "./src/hooks",
+                utils: "./src/utils",
+                constants: "./src/constants",
+                services: "./src/services",
+              },
+            },
+          ],
+        ],
+      },
+    },
+  };
+};

config/index.js

@@ -1,11 +1,11 @@
 /* global process */
 
 module.exports = (() => {
-  const env = process.env.NODE_ENV || "development";
+  const env = process.env.APPENV || "dev";
 
   // for security reason don't let to require any arbitrary file defined in process.env
-  if (["production", "development"].indexOf(env) < 0) {
-    return require("./development");
+  if (["prod", "dev"].indexOf(env) < 0) {
+    return require("./dev");
   }
 
   return require("./" + env);

src/components/Pagination/styles.module.scss

@@ -2,11 +2,14 @@
 
 .pagination {
   display: flex;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
 
   .page {
     padding: 0 10px;
-    margin: 0 5px;
+    margin: 0 5px 10px;
     min-width: 30px;
+
   }
 
   .current {
@@ -17,6 +20,7 @@
 
   .next {
     margin-left: 5px;
+    margin-bottom: 10px;
 
     > svg {
       transform: rotate(-90deg);
@@ -29,6 +33,7 @@
 
   .prev {
     margin-right: 5px;
+    margin-bottom: 10px;
 
     > svg {
       margin-right: 3px;

src/components/SkillsList/index.jsx

@@ -101,6 +101,7 @@ const SkillsList = ({ requiredSkills, skills, limit = 3 }) => {
                     <div styleName="skills-section">
                       <div styleName="skills-title">Required Job Skills</div>
                       <ul styleName="skills-list">
+                        {!requiredSkills.length && <li>None</li>}
                         {requiredSkills.map((skill) => (
                           <li key={skill.id}>
                             {_.find(skills, { id: skill.id }) ? (

src/components/SkillsList/styles.module.scss

@@ -22,10 +22,12 @@
 
 .popover-content {
   display: flex;
-  padding: 24px;
+  flex-wrap: wrap;
+  padding: 4px 24px 24px;
 }
 
 .skills-section {
+  margin-top: 20px;
   padding-right: 32px;
 }
 

src/utils/format.js

@@ -161,5 +161,9 @@ export const formatDateRange = (startDate, endDate) => {
   const startDateStr = startDate ? moment(startDate).format(DAY_FORMAT) : "";
   const endDateStr = endDate ? moment(endDate).format(DAY_FORMAT) : "";
 
+  if (!startDateStr && !endDateStr) {
+    return "TBD";
+  }
+
   return `${startDateStr} - ${endDateStr}`;
 };

webpack.config.js

@@ -1,10 +1,14 @@
 /* global __dirname */
+const webpack = require("webpack");
 const webpackMerge = require("webpack-merge");
 const singleSpaDefaults = require("webpack-config-single-spa-react");
 const path = require("path");
 const autoprefixer = require("autoprefixer");
 
-const cssLocalIdent = "teams_[path][name]___[local]___[hash:base64:6]";
+
+const cssLocalIdent = process.env.APPMODE === "production"  
+  ? "[hash:base64:6]"
+  : "teams_[path][name]___[local]___[hash:base64:6]";
 
 module.exports = (webpackConfigEnv) => {
   const defaultConfig = singleSpaDefaults({
@@ -65,5 +69,10 @@ module.exports = (webpackConfigEnv) => {
         services: path.resolve(__dirname, "src/services"),
       },
     },
+    plugins: [
+      // ignore moment locales to reduce bundle size by 64kb gzipped
+      // see solution details https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack/25426019#25426019
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    ],
   });
 };