feat: combine data-sources-v2/client and pdap.io into one client application

.eslintignore

@@ -0,0 +1,7 @@
+# don't ever lint node_modules
+node_modules
+
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+
+*.config.*

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "root": true,
+  "extends": ["@pdap-design-system/eslint-config"],
+  "plugins": ["prettier"],
+  "settings": {
+    "import/core-modules": ["vue-router/auto-routes"]
+  },
+  "rules": {
+    "vue/multi-word-component-names": [
+      "warn",
+      {
+        "ignores": [
+          "login",
+          "index",
+          "search",
+          "search.results",
+          "request",
+          "profile",
+          "[id]",
+          "results",
+          "create",
+          "validate.email"
+        ]
+      }
+    ],
+
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "none",
+        "htmlWhitespaceSensitivity": "ignore",
+        "bracketSameLine": true,
+        "singleAttributePerLine": false,
+        "singleQuote": true
+      }
+    ]
+  }
+}

.github/CODEOWNERS

@@ -1,2 +1,3 @@
 * @josh-chamberlain
+* @joshuagraber
 

.github/pull_request_template.md

@@ -0,0 +1,28 @@
+<!-- Title of PR should use a standard commit prefix (feat, fix, chore, docs, test, etc.) followed by an optional context ((components), (linting), etc), and a succinct description. I.E. `feat(components): add MyFancyComponent` or `fix(search/results): incomplete results displayed` -->
+
+<!-- Does not have to match PR title. I.E. MyFancyComponent -->
+
+# {Insert short title}
+
+<!-- What is the rationale for the changes? -->
+
+## Background
+
+- Problem that needed solving
+- or bug that needed fixing
+- etc.
+
+<!-- What is the description of the changes? -->
+
+## Description
+
+- Adds this
+- Removes that
+
+## Acceptance Criteria
+
+<!-- What are the steps to test the changes? -->
+
+1. Do this
+2. then that
+3. then 🚀🚀🚀

.github/workflows/pull.yaml

@@ -0,0 +1,87 @@
+name: Pull Request
+
+on:
+  pull_request:
+
+jobs:
+  setup:
+    name: Setup client
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+          cache: "npm"
+          cache-dependency-path: "package-lock.json"
+      - name: Install deps
+        run: npm ci
+      - name: Cache node_modules
+        uses: actions/cache/save@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+
+  lint:
+    name: Lint client
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - name: Restore node_modules
+        uses: actions/cache/restore@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+          fail-on-cache-miss: true
+      - name: Lint JS and Vue
+        run: npm run lint
+
+  test:
+    name: Test client
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - name: Restore node_modules
+        uses: actions/cache/restore@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+          fail-on-cache-miss: true
+      - uses: szenius/[email protected]
+        with:
+          timezoneLinux: "America/New_York"
+      - name: Run tests
+        run: npm run test:ci
+
+  build:
+    name: Build client
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+      - name: Restore node_modules
+        uses: actions/cache/restore@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+          fail-on-cache-miss: true
+      - name: Build app
+        run: npm run build

.gitignore

@@ -1,28 +1,16 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+dist
+coverage
+
+# local env files
+.env
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-.vercel
-
-.env
+.vscode

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

CONTRIBUTING.md

@@ -0,0 +1,71 @@
+# PDAP Client Web Application - Contributing
+
+So you're ready to contribute to PDAP? Great!
+
+Please familiarize yourself with the `README` and follow the quick start instructions to begin.
+
+[Open issues for this application](https://github.com/Police-Data-Accessibility-Project/pdap.io/issues) can be found here.
+
+A list of [good first issues](https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1) across the PDAP org can be found here. And if you want them filtered only for front end issues, you can find those [here](https://github.com/orgs/Police-Data-Accessibility-Project/projects/25/views/1?filterQuery=front+end).
+
+If you have questions as you're working, you can reach out to PDAP staff on [Discord](https://discord.gg/vKhDv7nC8B) for help.
+
+Please raise a PR against the `dev` branch (unless otherwise specified), only after you have done the following:
+
+- Verified that your changes resolve the problem or enhancement described in the issue.
+- Ensured that all existing unit and e2e tests pass. Or, if your changes make some part of the affected tests obsolete, please update the tests accordingly.
+- Ensured that the linter runs without errors.
+- Thoroughly completed the PR request template
+
+## Some things to know
+
+The client app is a Vue 3 SPA, styled with Tailwind. We currently use Pinia for state management, although we have plans to migrate to Tanstack for better caching.
+
+Feel free to use either the options or composition API, but composition seems to be winning out in this codebase. It's also easier to work with many of the modern Vue libraries, which are built for the composition API first.
+
+### State management
+
+We use `pinia` for global state management. Check out [the docs](https://pinia.vuejs.org/).
+
+Some implementation details specific to the PDAP application
+
+- Pinia is for storing state. Async fetching is defined separately. While you _can_ define async actions in pinia stores, we have made the decision to decouple the fetching logic from the state management.
+- Many of the stores are set up for caching certain responses. It's a bit hacky and overly simple (no invalidation, etc). We'll move this to Tanstack shortly. But for now, if caching is needed, follow the pattern in [search](./src/stores/search.js).
+
+### Code organization
+
+- [async fetching logic](./src/api) in the `src/api` directory.
+- [client-side data stores and caching](./src/stores) in the `src/stores` directory.
+- [UI components](./src/components) in the `src/components` directory.
+- [routes](./src/pages) in the `src/pages` directory.
+- [utilities](./src/util) in the `src/util` directory.
+
+### Routing
+
+Routing is handled by file-based routing provided by `unplugin-vue-router`. Everything in the `src/pages` directory becomes a route (i.e. `pages/data-source/create.vue` becomes `/data-source/create`, and`pages/search/results.vue` becomes `/search/results`), with the exception of a couple of special rules for files named index, dynamic route parameters, catchall routes, and such things as you can [read more about in the docs](https://uvr.esm.is/introduction).
+
+There are two exceptions to the routing rules that are both defined by our configuration, rather than features of `unplugin-vue-router` itself.
+
+- if a directory or route is prefixed with an "\_", we ignore its name (and all of the names of its contents) in the route tree at build time. See `src/pages/data-source/_components` for an example.
+- Anything in the `src/pages/test/` directory is also ignored in the route tree in production builds of the application.
+
+### Testing
+
+#### Unit testing
+
+Currently, there are unit tests for the `src/util` and `src/component` directories, with relatively paltry coverage. The goal is to increase the level of coverage without being obsessive about it. Chasing 100% coverage has quickly diminishing returns. We want to cover core functionality, but let's not muck around too much with edge cases.
+
+#### E2E testing
+
+E2e testing ~~is~~ will be done using playwright.
+
+<!-- ### Resources
+
+TODO: make table of core dependencies, and documentation.
+Include:
+
+- Pdap [API docs](https://docs.pdap.io/api/introduction)
+- unplugin-vue-router
+- pinia/tanstack
+- vitest
+- playwright -->

README.md

@@ -1,49 +1,46 @@
-# pdap.io Vue site
+# PDAP.IO
 
-This website serves as the official voice of PDAP.
+The web application for all things PDAP.
 
-## Info for Developers
+## Quick start for local development
 
-### Tech
-This site is built with [Vue](https://vuejs.org/) and [Tailwind](https://tailwindcss.com/).
+1. Clone the repo
+2. Create a `.env` file at the root of the project. You'll need the `VITE_API_KEY` value from the PDAP staff (reach out in [Discord](https://discord.gg/vKhDv7nC8B)). Once you have it, your env file should look something like this:
 
-### Etiquette
-Head to [\#outreach](https://discord.com/channels/828274060034965575/853442226034442260/) in our [Discord](https://discord.gg/vKhDv7nC8B) if you'd like to collect feedback from the wider group.
+```shell
+# API
+VITE_API_KEY=key_from_pdap_staff
+VITE_API_URL=https://data-sources-v2.pdap.dev/api # Or 'https://data-sources-v2.pdap.dev/api' for the prod DB, or 'http://localhost:5000' if you're working with the API locally.
 
-Test your changes **locally first**, if possible. Include **screenshots with your PR** if you're changing something visual.
-
-### Setup
-
-1. [Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).
+# V2 feature flags - these are **temporary**. They should be set to "enabled" for development.
+VITE_V2_FEATURE_ENHANCED_SEARCH=enabled
+VITE_V2_FEATURE_AUTHENTICATE=enabled
+VITE_V2_FEATURE_CREATE_RECORDS=enabled
+```
 
-In your terminal:
+_Note: You can also override these vars when starting the dev server if you'd rather not update an env file every time you need a different value, by passing the value to the command line before running the server i.e:_ `VITE_API_URL=localhost:5000 npm run dev`
 
-2. `cd pdap.io`
-3. `npm install` to install dependencies
-4. `npm run dev` to start the site in development mode. Editing most files will trigger an automatic refresh of the page thanks to Vite's excellent dev server.
-5. `npm run build` to build the site for production.
-6. `npm run preview` will boot up a local static web server that serves the files from dist at `http://localhost:4173`. It's an easy way to check if the production build looks OK in your local environment.
+3. From the root of the project:
 
-### Staging
+```shell
+npm i && npm run dev
+```
 
-Merge into the `dev` branch, allow 5 minutes for the auto-deploy, and visit pdap.dev.
+4. Navigate to `localhost:8888` in any browser and you should be up and running.
 
-### For local development: Add environment secrets
+### NPM Scripts
 
-Either add a `.env` file to your local root directory or manually export these secrets. Reach out to [email protected] or make noise in Discord if you'd like access. 
+| Script         | What it does                                                                      |
+| -------------- | --------------------------------------------------------------------------------- |
+| `build`        | Builds the application in production mode                                         |
+| `serve`        | Serves the built assets. Requires `build` to be run first                         |
+| `lint`         | Lints the codebase with `eslint` and `prettier`                                   |
+| `lint:fix`     | Lints the codebase with `eslint` and `prettier` and fixes all auto-fixable issues |
+| `test`         | Runs unit tests with debug output                                                 |
+| `test:ci`      | Runs unit tests quietly                                                           |
+| `test:changed` | Runs unit tests on changed files only                                             |
+| `coverage`     | Runs unit tests and outputs coverage report                                       |
 
-#### Sample `.env` file
-```
-# Local development
-#Airtable API key
-VITE_AIRTABLE_API_KEY=secret
 
-#PDAP data sources API key
-VITE_PDAP_API_KEY=secret
-```
-
-#### shell
-```
-export VITE_AIRTABLE_API_KEY=secret
-export VITE_PDAP_API_KEY=secret
-```
+### Contributing
+Interested in contributing code to pdap.io? Check out our guidelines [here](./CONTRIBUTING.md).