Version 6 of project seed

.babelrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "test": {
+      "presets": ["@babel/preset-react", "@babel/preset-typescript"],
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
+    }
+  },
+  "plugins": ["babel-plugin-styled-components"]
+}

.eslintrc

@@ -1,9 +1,18 @@
 {
-  "parser": "@babel/eslint-parser", // Specifies the ESLint parser
+  "parser": "@babel/eslint-parser",
+  "plugins": [
+    "react",
+    "react-hooks",
+    "inclusive-language",
+    "jest",
+    "import",
+    "fp"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended"
   ],
   "settings": {
     "react": {
@@ -15,13 +24,13 @@
     "node": true,
     "es6": true
   },
-  "plugins": ["react", "react-hooks", "inclusive-language"],
   "parserOptions": {
     "requireConfigFile": false,
     "babelOptions": {
       "presets": [
         "@babel/preset-env",
-        "@babel/preset-react"
+        "@babel/preset-react",
+        "@babel/preset-typescript"
       ]
     },
     "ecmaFeatures": {
@@ -31,8 +40,16 @@
     "sourceType": "module" // Allows for the use of imports
   },
   "rules": {
-    "prettier/prettier": ["error", {"semi": true, "singleQuote": true, "jsxSingleQuote": true, "parser": "flow"}],
-    "inclusive-language/use-inclusive-words": "error",
+    "prettier/prettier": [
+      2,
+      {
+        "semi": true,
+        "singleQuote": true,
+        "jsxSingleQuote": true,
+        "parser": "flow"
+      }
+    ],
+    "inclusive-language/use-inclusive-words": 2,
     "semi": [2, "always"],
     "jsx-quotes": [2, "prefer-single"],
     "no-console": 2,
@@ -41,16 +58,20 @@
     "no-dupe-else-if": 0,
     "no-setter-return": 0,
     "prefer-promise-reject-errors": 0,
+    "import/order": 2,
     "react/button-has-type": 2,
     "react/default-props-match-prop-types": 2,
     "react/jsx-closing-bracket-location": 2,
     "react/jsx-closing-tag-location": 2,
     "react/jsx-curly-spacing": 2,
     "react/jsx-curly-newline": 2,
     "react/jsx-equals-spacing": 2,
-    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline"}],
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
     "react/jsx-first-prop-new-line": 2,
-    "react/jsx-curly-brace-presence": [2, { "props": "never", "children": "never" }],
+    "react/jsx-curly-brace-presence": [
+      2,
+      { "props": "never", "children": "never" }
+    ],
     "react/jsx-pascal-case": 2,
     "react/jsx-props-no-multi-spaces": 2,
     "react/jsx-tag-spacing": [2, { "beforeClosing": "never" }],
@@ -64,7 +85,34 @@
     "react/sort-comp": 2,
     "react/style-prop-object": 2,
     "react/void-dom-elements-no-children": 2,
-    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
-    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
-  }
+    "react/function-component-definition": [
+      2,
+      { "namedComponents": ["function-declaration", "arrow-function"] }
+    ],
+    "react-hooks/rules-of-hooks": 2, // Checks rules of Hooks
+    "react-hooks/exhaustive-deps": 1, // Checks effect dependencies
+    "fp/no-mutating-methods": 1
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "prettier/prettier": 0,
+        "@typescript-eslint/no-unused-vars": 2,
+        "@typescript-eslint/no-non-null-assertion": 0
+      },
+      // Weird behavior with no-unused-vars
+      // See https://stackoverflow.com/a/58513127
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/strict",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": ["./tsconfig.json"]
+      }
+    }
+  ]
 }

.nvmrc

@@ -1 +1 @@
-16
+18

.stylelintrc.json

@@ -1,8 +1,21 @@
 {
+  "processors": [
+    "stylelint-processor-styled-components"
+  ],
   "extends": [
-    "stylelint-config-recommended"
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
   ],
   "rules": {
-    "font-family-no-missing-generic-family-keyword": null
-  }
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ]
+  },
+  "ignoreFiles": [
+    "**/*.d.ts"
+  ]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Development Seed
+Copyright (c) 2023 Development Seed
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -59,3 +59,22 @@ Our [ESLint rules](.eslintrc) are based on `eslint:recommended` rules, with some
 File [.editorconfig](.editorconfig) defines basic code styling rules, like indent sizes. 
 
 [Prettier](https://prettier.io) is the recommended code formatter. Atom and VSCode have extensions supporting Prettier-ESLint integration, which will help maintain style consistency while following linting rules.
+
+## Path alias
+
+Path alias allow you to define aliases for commonly used folders and avoid having very long file paths like `../../../component`. This also allows you to more easily move files around without worrying the imports will break.  
+
+Paths are defined in the [package.json](./package.json) under `alias`. They start with a `$` and point to a folder.
+
+The following paths are predefined, but feel free to change them to whatever is convenient to your project needs.
+
+```json
+"alias": {
+    "$components": "~/app/scripts/components",
+    "$styles": "~/app/scripts/styles",
+    "$utils": "~/app/scripts/utils",
+    "$test": "~/test"
+  }
+```
+
+For example, to import a component from a file called `page-header` in the `"~/app/scripts/components"` folder, you'd just need to do `import Component from '$components/page-header'`.

_README.md

@@ -8,7 +8,7 @@ The steps below will walk you through setting up your own instance of the projec
 ### Install Project Dependencies
 To set up the development environment for this website, you'll need to install the following on your system:
 
-- [Node](http://nodejs.org/) v16 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [Node](http://nodejs.org/) v18 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/) Package manager
 
 ### Install Application Dependencies

app/scripts/main.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom';
 
 // Root component.
 function Root() {
@@ -13,6 +13,6 @@ function Root() {
   return <p>Hello from Starter</p>;
 }
 
-// project-seed does not use the latest React API introduced in version 18
-// as commonly used modules might be incompatible with it (e.g. react-helmet v6.1.0).
-render(<Root />, document.querySelector('#app-container'));
+const rootNode = document.querySelector('#app-container');
+const root = createRoot(rootNode);
+root.render(<Root />);

gulpfile.js → gulpfile.mjs

@@ -1,10 +1,14 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { spawn } = require('child_process');
-const gulp = require('gulp');
-const del = require('del');
-const portscanner = require('portscanner');
-const log = require('fancy-log');
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
+import gulp from 'gulp';
+import { deleteAsync } from 'del';
+import portscanner from 'portscanner';
+import log from 'fancy-log';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 // /////////////////////////////////////////////////////////////////////////////
 // --------------------------- Variables -------------------------------------//
@@ -40,9 +44,9 @@ function watcher() {
 // ---------------------------- Base tasks -----------------------------------//
 // ---------------------------------------------------------------------------//
 
-function clean() {
+function cleanTask() {
   // Remove build cache and dist.
-  return del(['dist', '.parcel-cache']);
+  return deleteAsync(['dist', '.parcel-cache']);
 }
 
 // Simple task to copy the static files to the dist directory. The static
@@ -61,7 +65,7 @@ function parcelServe(cb) {
       log.warn(`  Port 9000 is busy.`);
     }
 
-    const args = ['--config', parcelConfig, '--port', port, '--open'];
+    const args = ['--config', parcelConfig, '--port', port];
 
     // Run parcel in serve mode using the same stdio that started gulp. This is
     // needed to ensure the output is colored and behaves correctly.
@@ -75,21 +79,30 @@ function parcelServe(cb) {
 function parcelBuild(cb) {
   // Build the app using parcel. Since the build task finishes, we have to
   // listen for it to mark the gulp task as finished.
-  const args = ['--config', parcelConfig];
-  const pr = spawn('node', [parcelCli, 'build', parcelTarget, ...args], {
+
+  const args = [
+    '--config',
+    parcelConfig,
+    '--public-url',
+    process.env.PUBLIC_URL || '/'
+  ];
+
+  const pr = spawn('node', [parcelCli, 'build', ...args, parcelTarget], {
     stdio: 'inherit'
   });
-  pr.on('close', () => cb());
+  pr.on('close', (code) => {
+    cb(code ? 'Build failed' : undefined);
+  });
 }
 
 // //////////////////////////////////////////////////////////////////////////////
 // ---------------------------- Task export -----------------------------------//
 // ----------------------------------------------------------------------------//
 
-module.exports.clean = clean;
+export const clean = cleanTask;
 
 // Task orchestration used during the development process.
-module.exports.serve = gulp.series(
+export const serve = gulp.series(
   gulp.parallel(
     // Additional tasks:
     // -- Include additional tasks here
@@ -101,7 +114,7 @@ module.exports.serve = gulp.series(
 );
 
 // Task orchestration used during the production process.
-module.exports.default = gulp.series(
+export default gulp.series(
   clean,
   gulp.parallel(
     // Additional tasks: