Add typescript

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -10,13 +10,20 @@
     "test": "jest --watch"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.15",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "cypress": "^12.9.0"
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.31",
+    "cypress": "^12.9.0",
+    "typescript": "^5.0.3"
   }
 }

pages/_app.js

@@ -1,5 +1,17 @@
-import '@/styles/globals.css'
+import '/styles/globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
+  return (
+    <>
+      <style jsx global>{`
+        html {
+          font-family: ${inter.style.fontFamily};
+        }
+      `}</style>
+      <Component {...pageProps} />
+    </>
+  )
+}

pages/index.js

@@ -1,10 +1,7 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
+import styles from '/styles/Home.module.css'
 
 export default function Home() {
   return (
@@ -15,31 +12,31 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={styles.main}>
+      <main className={styles.homeMain}>
         <a target="_blank" href="https://analysisfunction.civilservice.gov.uk/"><Image
                 src="/af_logo.png"
                 alt="Analysis Function logo"
                 className={styles.logo}
-                width={120}
-                height={120}
+                width={75}
+                height={75}
                 priority
               /></a>
 
         <div className={styles.center}>
-          <h1 className={inter.className}>Analysis self-assessment tool</h1>
+          <h1>Analysis self-assessment tool</h1>
           <br/>
-          <p className={inter.className}>Assess your analysis quality assurance against <a target="_blank" href="https://best-practice-and-impact.github.io/qa-of-code-guidance/intro.html">the good practice guidance.</a></p>
+          <p>Assess your analysis quality assurance against <a target="_blank" href="https://best-practice-and-impact.github.io/qa-of-code-guidance/intro.html">the good practice guidance.</a></p>
         </div>
 
         <div className={styles.grid}>
           <Link
             href="/register"
             className={styles.card}
           >
-            <h2 className={inter.className}>
+            <h2>
               Register <span>-&gt;</span>
             </h2>
-            <p className={inter.className}>
+            <p>
               Register a new analysis to start assessing it.
             </p>
           </Link>
@@ -48,10 +45,10 @@ export default function Home() {
             href="/assess"
             className={styles.card}
           >
-            <h2 className={inter.className}>
+            <h2>
               Assess <span>-&gt;</span>
             </h2>
-            <p className={inter.className}>
+            <p>
               Submit a self-assessment for a registered analysis.
             </p>
           </Link>
@@ -60,10 +57,10 @@ export default function Home() {
             href="/review"
             className={styles.card}
           >
-            <h2 className={inter.className}>
+            <h2>
               Review <span>-&gt;</span>
             </h2>
-            <p className={inter.className}>
+            <p>
               Review previous assessments of an analysis.
             </p>
           </Link>
@@ -72,10 +69,10 @@ export default function Home() {
             href="/overview"
             className={styles.card}
           >
-            <h2 className={inter.className}>
+            <h2>
               Overview <span>-&gt;</span>
             </h2>
-            <p className={inter.className}>
+            <p>
               Review assessments across all analyses.
             </p>
           </Link>

pages/register.js

@@ -1,3 +1,37 @@
+import styles from '/styles/Home.module.css'
+import Button from '@mui/material/Button';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import HomeIcon from '@mui/icons-material/Home';
+import Link from 'next/link'
+import InputLabel from '@mui/material/InputLabel';
+
+
 export default function Home() {
-
+    return (
+        <>
+            <main className={styles.main}>
+                <Link className={styles.home} href="/">
+                <Button variant="contained" endIcon={<HomeIcon />}>Home
+                    </Button>
+                    </Link>
+
+
+                <h1>Register a new analysis</h1>
+                <div className={styles.center}>
+                <FormControl variant="standard" sx={{ m: 1, width: 300 }} action="/register_submit" method="post">
+                    <InputLabel id="department-label">Department</InputLabel>
+                    <Select required disabled labelId="department-label" label="Department" id="department" name="department" defaultValue="Office for National Statistics">
+                        <MenuItem value="Office for National Statistics">Office for National Statistics</MenuItem>
+                    </Select>
+                    <TextField required label="Business area" type="text" id="area" name="area" variant="standard" />
+                    <TextField required label="Analysis name" type="text" id="analysis" name="analysis" variant="standard" />
+                    <Button type="submit">Register</Button>
+                </FormControl>
+                </div>
+            </main>
+        </>
+    )
 }

styles/Home.module.css

@@ -1,18 +1,33 @@
+.homeMain {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   padding: 6rem;
   min-height: 100vh;
 }
 
-.logo {
+.home {
   position: absolute;
   top: 75px;
   left: 75px;
 }
 
+.logo {
+  position: absolute;
+  top: 75px;
+  right: 75px;
+}
+
 .code {
   font-weight: 700;
   font-family: var(--font-mono);

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}