Restructure fnr input

Add start of form, input and select

frontend/src/components/fnr/index.tsx → frontend/src/components/form/fnr.tsx

-import { useForm } from 'react-hook-form';
+import React from 'react'
 import validator from '@navikt/fnrvalidator'
+import { UseFormReturn } from "react-hook-form";
 
-const isValidIdnr = (data: string) => {
+export function isValidIdnr(data: string) {
     const validationResult = validator.idnr(data)
     return validationResult.status === "valid"
 }
 
+interface FnrProps
+    extends Partial<Pick<UseFormReturn, "register">> {
+    name: string
+    label?: string
+    errors?: any
+}
 
-function Fnr() {
-    const { register, handleSubmit, formState: { errors } } = useForm();
+export default function Fnr(props: FnrProps) {
+    const { register, name, errors, ...rest } = props
+    if (register === undefined) {
+        return <></>
+    }
 
-    return <form onSubmit={handleSubmit((data) => { console.log(data) })}>
-        <label htmlFor="fnr">Fnr: </label>
-        <input type="text" placeholder="fnr" {...register("fnr", { required: "Fnr is required", validate: isValidIdnr })} id="fnr" />
+    return <>
+        <input type="text" placeholder="fnr" {...register(name, { required: "Fnr is required", validate: isValidIdnr })} id="fnr" />
         {errors.fnr && errors.fnr.message}
         {errors.fnr && errors.fnr.type === "validate" && 'Invalid fnr'}
-        <br />
-        <input type="submit" />
-    </form >
+    </>
+
 }
 
-export default Fnr

frontend/src/components/form/form.tsx

+import React from 'react'
+import { useForm } from 'react-hook-form'
+
+
+interface FormProps {
+  children: any
+  onSubmit: any
+}
+
+export default function Form(props: FormProps) {
+  const { children, onSubmit } = props
+  const methods = useForm();
+  const { handleSubmit, formState: { errors } } = methods;
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {React.Children.map(children, child => {
+        return child.props.name
+          ? React.createElement(child.type, {
+            ...{
+              ...child.props,
+              register: methods.register,
+              errors: errors,
+              key: child.props.name
+            }
+          })
+          : child;
+      })}
+    </form>
+  );
+}

frontend/src/components/form/index.tsx

+import Form from './form'
+import Input from './input'
+import Select from './select'
+import Fnr from './fnr'
+
+export { Fnr, Form, Input, Select }

frontend/src/components/form/input.tsx

+import React from 'react'
+import { UseFormReturn } from "react-hook-form";
+
+interface InputProps
+    extends Partial<Pick<UseFormReturn, "register">> {
+    name: string
+    label?: string
+    errors?: any
+    type?: "text" | "email" | "number"
+}
+
+export default function Input(props: InputProps) {
+    const { register, name, errors, ...rest } = props
+    if (register === undefined) {
+        return <></>
+    }
+    return <input {...register(name)} {...rest} />;
+}
+

frontend/src/components/form/select.tsx

+import React from 'react'
+import { UseFormReturn } from "react-hook-form";
+
+interface SelectProps
+    extends Partial<Pick<UseFormReturn, "register">> {
+    options: Array<string>
+    name: string
+    type?: "text" | "email" | "number"
+}
+
+export default function Select(props: SelectProps) {
+    const { register, options, name, ...rest } = props
+    if (register === undefined) {
+        return <></>
+    }
+    return (
+        <select {...register(name)} {...rest}>
+            {options.map(value => (
+                <option key={value} value={value}>
+                    {value}
+                </option>
+            ))}
+        </select>
+    );
+}

frontend/src/routes/frontpage/index.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react'
 
 import { Page } from 'components/page'
 import { appTimezone, appVersion, appTheme } from 'appConfig'
-import Fnr from 'components/fnr'
+import { Fnr, Form, Select, Input } from 'components/form'
+
 
 export default function FrontPage() {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -24,9 +25,18 @@ export default function FrontPage() {
         console.log(error)
       })
   }
+  const onSubmit = (data: any) => {
+    console.log(data)
+  }
   return (
     <Page header="Greg main page">
-      <Fnr />
+      <Form onSubmit={onSubmit}>
+        <Input name="firstName" />
+        <Input name="lastName" />
+        <Select name="gender" options={["female", "male", "other"]} />
+        <Fnr name="fnr" />
+        <button>Submit</button>
+      </Form>
       <br />
       Version {appVersion}
       <br />
@@ -34,7 +44,6 @@ export default function FrontPage() {
       <br />
       Theme {appTheme}
       <br />
-      API reachable? {apiHealth}
     </Page>
   )
 }