feat(app-signup): add initial signup form

packages/game-app/package.json

@@ -3,15 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^1.2.0",
     "@reduxjs/toolkit": "^1.5.0",
     "firebase": "^8.2.1",
     "i18n-js": "^3.8.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-hook-form": "^6.13.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "redux-saga": "^1.1.3",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.8"
   },
   "scripts": {
     "start": "react-app-rewired start",

packages/game-app/src/App.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { PrivateRoute, RoutingPath } from '@pipeline/routing';
 import { useBootstrapIsFinished } from './_shared';
 
+const Signup = React.lazy(() => import('./signup/components/Signup'));
+
 function App() {
   const bootstrapIsFinished = useBootstrapIsFinished();
 
   return bootstrapIsFinished ? (
-    <Switch>
-      <Route path={RoutingPath.Login} render={() => <div>Login</div>} />
-      <Route path={RoutingPath.Signup} render={() => <div>Signup</div>} />
-      <PrivateRoute path={RoutingPath.Dashboard} render={() => <div>Dashboard</div>} />
-      <Route path="*">
-        <Redirect to={RoutingPath.Signup} />
-      </Route>
-    </Switch>
+    <Suspense fallback={null}>
+      <Switch>
+        <Route path={RoutingPath.Login} render={() => <div>Login</div>} />
+        <Route path={RoutingPath.Signup} component={Signup} />
+        <PrivateRoute path={RoutingPath.Dashboard} render={() => <div>Dashboard</div>} />
+        <Route path="*">
+          <Redirect to={RoutingPath.Signup} />
+        </Route>
+      </Switch>
+    </Suspense>
   ) : (
     <div>LOADING ...</div>
   );

packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+type Option = string | { value: string; label: string };
+
+type Props = {
+  name: string;
+  label: string;
+  value: string;
+  options: Option[];
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  errorMessage?: string | null;
+};
+
+const SelectInput: React.FC<Props> = ({ value, name, label, onChange, options, errorMessage }) => {
+  return (
+    <div className="column">
+      <label htmlFor={name}>{label}</label>
+      <select name={name} id={name} value={value} onChange={onChange}>
+        {options.map(o => {
+          const value = typeof o === 'string' ? o : o.value;
+          const label = typeof o === 'string' ? o : o.label;
+          return <option value={value}>{label}</option>;
+        })}
+      </select>
+      {errorMessage ? <span className="error-message">{errorMessage}</span> : null}
+    </div>
+  );
+};
+
+SelectInput.displayName = 'SelectInput';
+
+export default SelectInput;

packages/game-app/src/_shared/components/SelectInput/index.ts

@@ -0,0 +1,3 @@
+import SelectInput from './SelectInput';
+
+export default SelectInput;

packages/game-app/src/_shared/components/TextInput/TextInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+type Props = {
+  name: string;
+  label: string;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  errorMessage?: string | null;
+};
+
+const TextInput: React.FC<Props> = ({ name, value, errorMessage, label, onChange }) => {
+  return (
+    <div className="column">
+      <label htmlFor={name}>{label}</label>
+      <input type="text" value={value} name={name} id={name} onChange={onChange} />
+      {errorMessage ? <span className="error-message">{errorMessage}</span> : null}
+    </div>
+  );
+};
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;

packages/game-app/src/_shared/components/TextInput/index.ts

@@ -0,0 +1,3 @@
+import TextInput from './TextInput';
+
+export default TextInput;

packages/game-app/src/_shared/components/index.ts

@@ -0,0 +1,4 @@
+import SelectInput from './SelectInput';
+import TextInput from './TextInput';
+
+export { TextInput, SelectInput };

packages/game-app/src/_shared/config/config.ts

@@ -6,4 +6,5 @@ export interface Config {
   REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET: string;
   REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID: string;
   REACT_APP_FIREBASE_CONFIG_APP_ID: string;
+  REACT_APP_FIREBASE_USE_EMULATORS: string;
 }

packages/game-app/src/_shared/form/FormCheckbox/FormCheckbox.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
+
+type Props = {
+  name: string;
+  label: string;
+};
+
+const FormCheckbox: React.FC<Props> = ({ name, label }) => {
+  const data = useFormContext();
+
+  const renderInput = useCallback(
+    (props: ControllerRenderProps) => {
+      return (
+        <>
+          <input
+            type="checkbox"
+            id={props.name}
+            name={props.name}
+            checked={props.value}
+            onChange={e => props.onChange(e.target.checked)}
+          />
+          <label htmlFor={props.name}>{label}</label>
+        </>
+      );
+    },
+    [data.errors[name], label],
+  );
+
+  return <Controller name={name} control={data.control} render={renderInput} />;
+};
+
+FormCheckbox.displayName = 'FormCheckbox';
+
+export default FormCheckbox;

packages/game-app/src/_shared/form/FormCheckbox/index.ts

@@ -0,0 +1,3 @@
+import FormCheckbox from './FormCheckbox';
+
+export default FormCheckbox;

packages/game-app/src/_shared/form/FormSelect/FormSelect.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
+import { SelectInput } from '@pipeline/components';
+
+type Props = {} & Omit<React.ComponentProps<typeof SelectInput>, 'errorMessage' | 'onChange' | 'value'>;
+
+const FormSelect: React.FC<Props> = ({ name, label, options }) => {
+  const data = useFormContext();
+
+  const error = data.errors[name];
+
+  const renderInput = useCallback(
+    (props: ControllerRenderProps) => {
+      return (
+        <SelectInput
+          name={props.name}
+          label={label}
+          value={props.value}
+          options={options}
+          onChange={props.onChange}
+          errorMessage={error ? error.message : null}
+        />
+      );
+    },
+    [error, label, options],
+  );
+
+  return (
+    <>
+      <Controller name={name} control={data.control} render={renderInput} />
+    </>
+  );
+};
+
+FormSelect.displayName = 'FormSelect';
+
+export default FormSelect;

packages/game-app/src/_shared/form/FormSelect/index.ts

@@ -0,0 +1,3 @@
+import FormSelect from './FormSelect';
+
+export default FormSelect;

packages/game-app/src/_shared/form/FormTextField/FormTextField.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Controller, ControllerRenderProps, useFormContext } from 'react-hook-form';
+import { TextInput } from '@pipeline/components';
+
+type Props = {
+  name: string;
+  label: string;
+};
+
+const FormTextField: React.FC<Props> = ({ name, label }) => {
+  const data = useFormContext();
+
+  const error = data.errors[name];
+
+  const renderInput = useCallback(
+    (props: ControllerRenderProps) => {
+      return (
+        <TextInput
+          name={props.name}
+          label={label}
+          value={props.value}
+          onChange={props.onChange}
+          errorMessage={error?.message}
+        />
+      );
+    },
+    [error, label],
+  );
+
+  return (
+    <>
+      <Controller name={name} control={data.control} render={renderInput} />
+    </>
+  );
+};
+
+FormTextField.displayName = 'FormTextField';
+
+export default FormTextField;

packages/game-app/src/_shared/form/FormTextField/index.ts

@@ -0,0 +1,3 @@
+import FormTextField from './FormTextField';
+
+export default FormTextField;

packages/game-app/src/_shared/form/index.ts

@@ -0,0 +1,5 @@
+import FormTextField from './FormTextField';
+import FormCheckbox from './FormCheckbox';
+import FormSelect from './FormSelect';
+
+export { FormTextField, FormCheckbox, FormSelect };

packages/game-app/src/_shared/index.ts

@@ -5,6 +5,7 @@ import 'firebase/analytics';
 import { initializeI18n } from './i18n';
 import { actions as authActions, selectors as authSelectors } from './auth';
 import { useSelector } from 'react-redux';
+import config from '@pipeline/app-config';
 
 export function bootstrap() {
   initializeI18n();
@@ -18,6 +19,12 @@ export function bootstrap() {
     messagingSenderId: CONFIG.REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID,
     appId: CONFIG.REACT_APP_FIREBASE_CONFIG_APP_ID,
   });
+  if (config.REACT_APP_FIREBASE_USE_EMULATORS === 'true') {
+    firebase.auth().useEmulator('http://localhost:9099/');
+    firebase.functions().useEmulator('localhost', 5001);
+    firebase.firestore().useEmulator('localhost', 8080);
+    firebase.database().useEmulator('localhost', 9000);
+  }
 
   firebase.analytics();