Add a react component generator (#1745)

* Add a react component generator

* Update markdown links

* Change commented code to block comment

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};
+`;