Add a react component generator (#1745)

* Add a react component generator

* Update markdown links

* Change commented code to block comment

client/.generate_component/README.md

@@ -0,0 +1,13 @@
+# README
+
+Creating all the various parts of a React component each time a new component is needed is cumbersome and error-prone.
+
+This folder follows this [link](https://levelup.gitconnected.com/how-to-generate-react-components-from-your-terminal-a27741a5b862) to allow the developer to create a new React component (along with sass, tests and barrell) with a single command. The command is 
+
+`npm run gc <NameOfComponent>` 
+
+For example: to create a new React component called MapGeolocate:
+
+`npm run gc MapGeolocate`
+
+Note: gc stands for generate component

client/.generate_component/component_templates.js

@@ -0,0 +1,64 @@
+
+// component.tsx
+exports.component = name => `import React from 'react';
+
+import * as styles from './${name}.module.scss';
+
+export interface I${name}Props {}
+
+const ${name} = ({}: I${name}Props) => {
+  return (
+    <div className={styles.${name[0].toLowerCase() + name.slice(1)}Container}>
+      Hello 👋, I am a ${name} component.
+    </div>
+    )
+};
+
+export default ${name};
+`;
+
+// component.module.scss
+exports.sass = name => `@use '../../styles/design-system.scss' as *;
+
+.${name[0].toLowerCase() + name.slice(1)}Container{
+
+}
+`;
+
+// component.module.scss.d.ts
+exports.sassType = name => `declare namespace ${name}Namespace {
+    export interface I${name}Scss {
+      ${name[0].toLowerCase() + name.slice(1)}Container: string;
+    }
+  }
+
+declare const ${name}ScssModule: ${name}Namespace.I${name}Scss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: ${name}Namespace.I${name}Scss;
+  };
+
+  export = ${name}ScssModule;
+`;
+
+// component.test.tsx
+exports.test = name => `import React from 'react';
+import { render } from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import ${name} from './${name}';
+
+describe('rendering of ${name} Component', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <${name} />
+        </LocalizedComponent>,
+    );
+    it('checks if component renders', () => {
+      expect(asFragment()).toMatchSnapshot();
+    });
+});
+`;
+
+// index.ts
+exports.barrel = name => `import ${name} from './${name}';
+export default ${name};
+`;

client/.generate_component/index.js

@@ -0,0 +1,55 @@
+const fs = require('fs');
+const { component, sass, sassType, test, barrel } = require('./component_templates.js');
+
+// grab component name from terminal argument
+const [name] = process.argv.slice(2);
+if (!name) throw new Error('You must include a component name.');
+
+const dir = `./src/components/${name}/`;
+
+// throw an error if the file already exists
+if (fs.existsSync(dir)) throw new Error('A component with that name already exists.'); 
+
+// create the folder
+fs.mkdirSync(dir);
+
+function writeFileErrorHandler(err) {
+  if (err) throw err;
+}
+
+// component.tsx
+fs.writeFile(`${dir}/${name}.tsx`, component(name), writeFileErrorHandler);
+// component.module.scss
+fs.writeFile(`${dir}/${name}.module.scss`, sass(name), writeFileErrorHandler);
+// component.module.scss.d.ts
+fs.writeFile(`${dir}/${name}.module.scss.d.ts`, sassType(name), writeFileErrorHandler);
+// test.tsx
+fs.writeFile(`${dir}/${name}.test.tsx`, test(name), writeFileErrorHandler);
+// index.tsx
+fs.writeFile(`${dir}/index.ts`, barrel(name), writeFileErrorHandler);
+
+////////////////
+/// Optional ///
+////////////////
+
+// insert new component into 'components/index.ts file
+
+/* fs.readFile('./src/components/index.ts', 'utf8', function(err, data) {
+  if (err) throw err;
+
+  // grab all components and combine them with new component
+  const currentComponents = data.match(/(?<=import )(.*?)(?= from)/g);
+  const newComponents = [name, ...currentComponents].sort();
+
+  // create the import and export statements
+  const importStatements = newComponents
+    .map(importName => `import ${importName} from './${importName}';\n`)
+    .join('');
+  const exportStatements = `export {\n${newComponents
+    .map(component => `  ${component},\n`)
+    .join('')}};\n`;
+
+  const fileContent = `${importStatements}\n${exportStatements}`;
+
+  fs.writeFile(`./src/components/index.ts`, fileContent, writeFileErrorHandler);
+}); */

client/README.md

@@ -6,6 +6,7 @@
 This README contains the following content:
 
 - [Installing and running the client site](#installing-and-running-the-client-site)
+- [Generating React components](#generating-react-components)
 - [Linting and Formatting](#linting-and-formatting)
 - [Testing](#testing)
 - [Localization](#localization)
@@ -93,6 +94,12 @@ DATA_SOURCE env variable in the docker-compose.yml. See [environment variables](
 
 See [VIEW_MAP_DATA.md](./VIEW_MAP_DATA.md) for more details on this.
 
+## Generating React components
+Each React component requires a barrell, test, sass file and sass types file. You can run the auto-generated component
+to ensure you are following the style guide on creating React component for J40.
+
+Please see this [README](./.generate_component/README.md) for more information
+
 ## Linting and Formatting
 
 This project uses [ESLint](https://eslint.org/) for code linting and [Prettier](https://prettier.io/) for formatting. They are integrated via [gatsby-plugin-prettier-eslint](https://www.gatsbyjs.com/plugins/gatsby-plugin-prettier-eslint/).

client/package.json

@@ -28,7 +28,8 @@
     "intl:removeNesting": "node src/intl/removeNesting.js",
     "intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json",
     "test:intl-extraction": "node src/intl/testIntlExtraction",
-    "prepare": "cd .. && husky install client/.husky"
+    "prepare": "cd .. && husky install client/.husky",
+    "gc": "node .generate_component $1"
   },
   "devDependencies": {
     "@formatjs/cli": "^4.8.2",

data/data-pipeline/data_pipeline/etl/sources/maryland_ejscreen/README.md

@@ -1,10 +1,10 @@
 # Maryland EJSCREEN
 
-The Maryland EJSCREEN application and tool can be found [here](https://p1.cgis.umd.edu/mdejscreen/).
+The Maryland EJSCREEN application and tool can be found [here](https://www.ceejh.center/md-ejscreen-1).
 
 ### Methodology Summary
 
-According to the [documentation](https://p1.cgis.umd.edu/mdejscreen/help.html):
+According to the documentation:
 
 There exist two data categories: Population Burden and Population Characteristics.