chore: repo instantiation (automated)

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,69 @@
+# Packages #
+############
+# Just to be safe that erroneous packages don't accidentally get committed
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS && IDE files #
+###################
+.DS_Store
+.vscode
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+.settings
+.settings/*
+.buildpath
+.idea
+.project
+.gradle/
+/nbproject/private/
+*.iml
+sftp-config*
+*.sublime-*
+
+# Node #
+########
+lib-cov
+*.seed
+*.log
+*.dat
+*.out
+*.pid
+*.gz
+pids
+logs
+npm-debug.log
+node_modules/
+
+# Test #
+########
+/coverage/*
+/e2e/screenshot/*
+/e2e/video/*
+/e2e/dist/*
+/e2e/config.local.json
+/e2e/attest-devtools.jar
+eslint-data
+/logs/
+
+# Build #
+########
+/dist/*
+/config.json
+/.cache-loader

.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': { stage: 0 },
+  },
+}

README.md

@@ -0,0 +1,59 @@
+# Attest Frontend technical stage
+
+This is the base code for Attest's Frontend technical stage interview.
+
+## Background
+
+This code is not a direct representation of Attest's code or coding principles; it is designed to guide the technical stage interview. You are asked to familiarise yourself with the existing code - you can make notes on improvements you may make given you had the opportunity to do so.
+
+You will be asked to do some technical tasks to complete the functionality of the mini-application. You can complete some of the immediate tasks at home - prepping/completing these tasks at home gives more opportunities in the final technical stage. If you don't have time to start these tasks at home then don't worry we will complete these in the first part of the interview.
+
+## Description
+
+Attest is a platform where users can design and send surveys to the public. The Attest platform will then collect responses from many users; your task is to represent the results of a completed survey and allow the user to filter the data.
+
+The sidebar on the right displays and applies demographic filters, this is used to filter the response data, i.e. clicking "London" will change the responses shown on the left to only display the responses of users that match the filters selected.
+
+## What's included?
+
+- A design - you can use figma to look at the design files.
+  - Create an account. https://www.figma.com/
+  - Import `__files__/design.fig` (default state)
+  - Import `__files__/design-interactive.fig` (Interacted state)
+- A vite config that supports:
+  - `.(css|postcss)` files - see for included base plugins `.postcssrc.js`
+  - `.(less)` files
+  - `.(sass|scss)` files
+  - `.(stylus|styl)` files
+  - `.(js|jsx)` files
+  - `.(ts|tsx)` files
+- Base css variables `src/styles/vars.css`
+- [Vitest](https://vitest.dev/) is the provided library for unit tests.
+  - We have included all the necessary packages and setup
+
+## Tasks
+
+If completing at home we ask you not to refactor the code considerably, we know the code is not perfect and that is intended.
+
+- Make the UI interactive with the keyboard
+  - [`src/components/filters/...`](./src/components/filters)
+  - [`src/components/survey/...`](./src/components/filters)
+- Style the demographic filters to match the design
+  - [`src/components/filters/...`](./src/components/filters)
+- Implement the logic to display the results based on the selected respondents. E.g. selecting "Female" should show the results amongst all female respondents. Run the unit tests to verify your solution.
+  - [`src/components/survey/survey.ts`](./src/components/survey/survey.ts#L8)
+  - On completing this task the test in [`src/components/survey/survey.test.ts#L85`](./src/components/survey/survey.test.ts#L85) should pass
+
+<img width="500" alt="Screenshot of expected results" src="https://i.postimg.cc/NMMBbDvw/258805205-9efbcee6-d417-494b-8745-67ff5279d967.png">
+
+## How to run?
+
+- Open up the Dev Server on `https://localhost:3000` with `yarn start`
+- To retrieve the survey data request `http://localhost:3000/api/survey.json`
+- To retrieve the filter definition data request `http://localhost:3000/api/filter-definition.json`
+- Run unit tests `yarn test`
+- Run type checking `yarn typecheck`
+
+## Notes
+
+[Put any additional notes here that you would like us to know about your solution.]

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Attest Frontend Tech Test</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but the Attest Frontend Tech Test doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app">
+      <div class="page">
+        <nav class="nav">
+          <img class="icon" src="/assets/logo.svg" />
+        </nav>
+
+        <div class="survey js-survey"></div>
+        <div class="filters js-filters"></div>
+      </div>
+    </div>
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "attest-fe-tech-test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "yarn typecheck && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "happy-dom": "^12.10.3",
+    "less": "^4.1.2",
+    "postcss": "^8.4.31",
+    "postcss-preset-env": "^9.2.0",
+    "sass": "^1.48.0",
+    "stylus": "^0.60.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

prettier.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  semi: false,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'avoid',
+  proseWrap: 'preserve',
+  requirePragma: false,
+  insertPragma: false,
+  endOfLine: 'auto',
+}

public/api/filter-definition.json

@@ -0,0 +1,74 @@
+{
+  "demographics": [
+    {
+      "name": "gender",
+      "display": "Gender",
+      "options": [
+        {
+          "name": "male",
+          "display": "Male"
+        },
+        {
+          "name": "female",
+          "display": "Female"
+        },
+        {
+          "name": "other",
+          "display": "Other"
+        }
+      ]
+    },
+    {
+      "name": "home_region",
+      "display": "Home Region",
+      "options": [
+        {
+          "name": "east_midlands",
+          "display": "East Midlands"
+        },
+        {
+          "name": "east_of_england",
+          "display": "East of England"
+        },
+        {
+          "name": "london",
+          "display": "London"
+        },
+        {
+          "name": "north_east",
+          "display": "North East"
+        },
+        {
+          "name": "north_west",
+          "display": "North West"
+        },
+        {
+          "name": "scotland",
+          "display": "Scotland"
+        },
+        {
+          "name": "south_west",
+          "display": "South West"
+        },
+        {
+          "name": "wales",
+          "display": "Wales"
+        }
+      ]
+    },
+    {
+      "name": "relationship_status",
+      "display": "Relationship Status",
+      "options": [
+        {
+          "name": "single",
+          "display": "Single"
+        },
+        {
+          "name": "married",
+          "display": "Married"
+        }
+      ]
+    }
+  ]
+}