build: switch UI build system to pnpm (#605)

* build: fix legacy tailwind option

* build: change to use pnpm

* ci: use pnpm for ui testing

* ci: attempt at fixing ui test

* ci: fix cache path

* ci: rework stuff

* ci: cache pip stuff

* ci: move steps

* ci: add back composite action

* ci: fix path

* chore: add back prettier ignore

* docs: update README.md

Co-authored-by: Tom-R.T.Kvalvaag <[email protected]>

* docs: update src/ui/README.md

Co-authored-by: Tom-R.T.Kvalvaag <[email protected]>

* ci: cleanup

---------

Co-authored-by: Tom-R.T.Kvalvaag <[email protected]>

.github/actions/build-ui/action.yaml

@@ -1,13 +1,16 @@
+---
+name: Compile UI assets
+description: Actions for building the UI assets
 runs:
   using: composite
   steps:
-    - uses: actions/setup-node@v3
+    - name: Configure pnpm
+      uses: pnpm/action-setup@v2
       with:
-        node-version: 18
-    - name: Build UI
-      shell: bash
+        version: 8
+        run_install: |
+          - cwd: src/ui
+    - name: Compile Development assets
       run: |
-        set -euxo pipefail
-        cd src/ui
-        npm ci --no-audit
-        npm run build:prod
+        pnpm -C src/ui run build:dev
+      shell: bash

.github/workflows/test-ui.yaml

@@ -10,21 +10,24 @@ on:
       - ".github/actions/build-ui"
       - ".github/workflows/test-ui.yaml"
       - "src/ui/package.json"
-      - "src/ui/package-lock.json"
+      - "src/ui/pnpm-lock.yaml"
   workflow_dispatch:
 
 jobs:
   tests:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+
+      - name: Compile UI assets
+        uses: ./.github/actions/build-ui
+
       - uses: actions/setup-python@v4
         with:
           python-version: "3.10"
-      - uses: ./.github/actions/build-ui
+          cache: "pip"
       - run: |
-          python -m pip install --upgrade pip setuptools wheel
-          pip install --upgrade tox virtualenv
+          pip install --upgrade tox
       - run: |
           python -m scripts.download_weights
       - run: |

.gitignore

@@ -23,7 +23,7 @@ typings/
 .cache
 
 dist
-!src/ui/static/dist
+!src/ui/static/dist/images
 src/ui/static/dist/js/projects.min.js.map
 
 # Gatsby files

.pre-commit-config.yaml

@@ -55,12 +55,12 @@ repos:
           - "types-waitress"
         files: ^src/
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0
+    rev: v3.0.1
     hooks:
       - id: prettier
         name: Format other code (CSS, HTML, JS, MD, TOML, YAML)
         additional_dependencies:
-          - "[email protected].0-alpha.6"
+          - "[email protected].1"
           - "prettier-plugin-toml"
         types: [file]
         files: \.(css|html|js|markdown|md|toml|yaml|yml)$

.prettierignore

@@ -1 +1,4 @@
-pyproject.toml
+**/.git
+**/node_modules
+**/pnpm-lock.yaml
+**/pyproject.toml

README.md

@@ -13,21 +13,22 @@ computer scientists at the Norwegian University of Science and Technology
 Nature Research (NINA) who wanted a more efficient way of gather statistics of
 video material they had collected at various locations.
 
-## Installation
+## Requirements
+
+- [Python](https://www.python.org) >= 3.8
 
-It is recommended to install the application in a virtual environment using
-for example [virtualenv](https://virtualenv.pypa.io/en/latest/).
+* [NodeJS](https://nodejs.org) >= 18
+  - [pnpm](https://pnpm.io) - for compiling UI assets
 
-Running `nina` requires:
+## Installation
 
-- Python 3.9 or higher
-- [`venv`](https://docs.python.org/3/library/venv.html) or
-  [`virtualenv`](https://virtualenv.pypa.io) (recommended)
-- The URL for downloading the package
+It is recommended to install the application in a virtual environment using for
+example [virtualenv](https://virtualenv.pypa.io) or
+[`venv`](https://docs.python.org/3/library/venv.html).
 
 Find url to latest `whl`
-[here](https://github.com/MindTooth/fish-code/releases/latest) for use in
-the commands below.
+[here](https://github.com/tomrtk/fish-code/releases/latest) for use in the
+commands below.
 
 ### Steps
 

src/ui/README.md

@@ -5,43 +5,18 @@ Flask. For the frontend we use TailwindCSS and jQuery/jsTree.
 
 By using bundlers like `esbuild` and `postcss`. We are able to abstract some
 of the burden of keeping dependencies up to date. Including the packages in
-`package.json` we only need to update versions and rerun `npm run build:dev`
+`package.json` we only need to update versions and rerun `pnpm run build:dev`
 
 ## How To Run
 
 To be able to run the frontend, some step needs to be taken beforehand. It
 depends on whether it runs in development or production.
 
-### Backend
+### Compile changes to CSS/JavaScript
 
-```sh
-# setup
-poetry install
-export FLASK_APP=ui.main
-export FLASK_DEBUG=1
-export FLASK_ENV=development
-
-# running
-poetry run flask run
-```
-
-### Frontend
-
-Run `npm run` to see available tasks to run when developing the frontend.
-`npm run build:dev` is used when a minified version of the javascript or css is not
-desirbed. Use `npm run build:prod` otherwise. **Note!** It's best to make sure
-that you always minify before pushing upstream. The reasons that currently the
-project ship both `src` and `dist`.
-
-#### Compile changes to CSS/JavaScript
-
-Using the command below, but are compiled at once. View `npm run` for other options.
+Use the command below. View `pnpm run` for other options.
 
 ```sh
-npm run build:dev
+pnpm install
+pnpm run build:dev
 ```
-
-## Production
-
-When cloning the repo, the frontend is already set to serve a production ready
-version. The UI should currently be executed from root using `poetry run python run.py`.