diff --git a/.github/workflows/build-and-deploy-images.yaml b/.github/workflows/build-and-deploy-images.yaml index 98102131..070bb4f0 100644 --- a/.github/workflows/build-and-deploy-images.yaml +++ b/.github/workflows/build-and-deploy-images.yaml @@ -50,16 +50,14 @@ jobs: with: fetch-depth: 0 # to get all tags - - name: Set up Node - uses: actions/setup-node@v3 - with: - node-version: "18" + - name: Set up Bun + uses: oven-sh/setup-bun@v1 - name: Install packages - run: yarn install + run: bun install - name: Build app - run: yarn build + run: bun run build - name: Generate Image Tag for Frontend Dir id: get-tag diff --git a/.github/workflows/test-frontend.yaml b/.github/workflows/test-frontend.yaml index 1fcbeb5b..3b9dafc7 100644 --- a/.github/workflows/test-frontend.yaml +++ b/.github/workflows/test-frontend.yaml @@ -12,130 +12,97 @@ defaults: working-directory: ./frontend jobs: - # build cache for rest of jobs - install-cache: - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Set up Node - uses: actions/setup-node@v4 - with: - node-version: "18" - - - name: Install packages - run: yarn install - - - name: Install Playwright - run: npx playwright install - - - name: Define cache key - id: define-key - run: echo "key=${{ hashFiles('frontend/yarn.lock') }}" >> $GITHUB_OUTPUT - - - name: Store cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ steps.define-key.outputs.key }} - - outputs: - cache-key: ${{ steps.define-key.outputs.key }} - # test that app can build without issues test-build: runs-on: ubuntu-latest - needs: install-cache steps: - name: Checkout code uses: actions/checkout@v4 - - name: Restore cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ needs.install-cache.outputs.cache-key }} + - name: Set up Bun + uses: oven-sh/setup-bun@v1 + + - name: Install packages + run: bun install - if: runner.debug == '1' uses: mxschmitt/action-tmate@v3 - name: Run test - run: yarn build + run: bun run build # test that app has no typescript errors test-types: runs-on: ubuntu-latest - needs: install-cache steps: - name: Checkout code uses: actions/checkout@v4 - - name: Restore cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ needs.install-cache.outputs.cache-key }} + - name: Set up Bun + uses: oven-sh/setup-bun@v1 + + - name: Install packages + run: bun install - if: runner.debug == '1' uses: mxschmitt/action-tmate@v3 - name: Run test - run: yarn test:types + run: bun run test:types # test that app is properly formatted and linted test-lint: runs-on: ubuntu-latest - needs: install-cache steps: - name: Checkout code uses: actions/checkout@v4 - - name: Restore cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ needs.install-cache.outputs.cache-key }} + - name: Set up Bun + uses: oven-sh/setup-bun@v1 + + - name: Install packages + run: bun install - if: runner.debug == '1' uses: mxschmitt/action-tmate@v3 - name: Run test - run: yarn test:lint + run: bun run test:lint # run unit tests test-unit: runs-on: ubuntu-latest - needs: install-cache steps: - name: Checkout code uses: actions/checkout@v4 - - name: Restore cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ needs.install-cache.outputs.cache-key }} + - name: Set up Bun + uses: oven-sh/setup-bun@v1 + + - name: Install packages + run: bun install - name: Run test - run: yarn test:unit + run: bun run test:unit # run end to end integration tests test-e2e: runs-on: ubuntu-latest - needs: install-cache steps: - name: Checkout code uses: actions/checkout@v4 - - name: Restore cache - uses: actions/cache@v4 - with: - path: ${{ env.CACHE_PATH }} - key: ${{ needs.install-cache.outputs.cache-key }} + - name: Set up Bun + uses: oven-sh/setup-bun@v1 + + - name: Install packages + run: bun install + + - name: Install Playwright + run: bunx playwright install - if: runner.debug == '1' uses: mxschmitt/action-tmate@v3 - name: Run test - run: yarn test:e2e + run: bun run test:e2e diff --git a/Makefile b/Makefile index fd4e62d4..e57b1811 100644 --- a/Makefile +++ b/Makefile @@ -71,8 +71,8 @@ install-backend: .PHONY: install-frontend install-frontend: cd frontend && \ - yarn install && \ - npx playwright install + bun install && \ + bunx playwright install .PHONY: model @@ -134,7 +134,7 @@ test-backend: .PHONY: test-frontend test-frontend: cd frontend && \ - yarn test + bun run test ### Development ### @@ -142,7 +142,7 @@ test-frontend: .PHONY: dev-frontend dev-frontend: frontend/src/api/model.ts cd frontend && \ - VITE_API=local yarn dev + VITE_API=local bun run dev .PHONY: dev-api @@ -190,7 +190,7 @@ lint: lint-frontend lint-backend .PHONY: lint-frontend lint-frontend: cd frontend && \ - yarn test:lint + bun run test:lint .PHONY: lint-backend @@ -212,4 +212,4 @@ format-backend: .PHONY: format-frontend format-frontend: cd frontend && \ - yarn lint + bun run lint diff --git a/frontend/.eslintrc b/frontend/.eslintrc new file mode 100644 index 00000000..702e771d --- /dev/null +++ b/frontend/.eslintrc @@ -0,0 +1,35 @@ +{ + "root": true, + "extends": [ + "plugin:vue/vue3-recommended", + "plugin:vuejs-accessibility/recommended", + "eslint:recommended", + "@vue/eslint-config-typescript", + "@vue/eslint-config-prettier/skip-formatting", + ], + "parserOptions": { + "ecmaVersion": "latest", + }, + "rules": { + "prettier/prettier": "warn", + "vuejs-accessibility/anchor-has-content": [ + "error", + { + "accessibleDirectives": ["tooltip"], + }, + ], + "vuejs-accessibility/label-has-for": [ + "error", + { + "controlComponents": ["AppInput"], + "required": { + "some": ["nesting", "id"], + }, + "allowChildren": true, + }, + ], + "vue/no-v-html": ["off"], + "vue/no-v-text-v-html-on-component": ["off"], + "vuejs-accessibility/mouse-events-have-key-events": ["off"], + }, +} diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 5494aedb..00000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint-env node */ -require("@rushstack/eslint-patch/modern-module-resolution"); - -module.exports = { - root: true, - extends: [ - "plugin:vue/vue3-recommended", - "plugin:vuejs-accessibility/recommended", - "eslint:recommended", - "@vue/eslint-config-typescript", - "@vue/eslint-config-prettier/skip-formatting", - ], - parserOptions: { - ecmaVersion: "latest", - }, - - /** rule overrides (KEEP THIS AS MINIMAL AS POSSIBLE) */ - rules: { - "prettier/prettier": "warn", - - /** - * count v-tooltip (which adds an accessible aria-label attribute) as - * accessible - */ - "vuejs-accessibility/anchor-has-content": [ - "error", - { accessibleDirectives: ["tooltip"] }, - ], - /** - * allow nesting a control in a label without a for attribute (perfectly - * fine practice) - */ - "vuejs-accessibility/label-has-for": [ - "error", - { - controlComponents: ["AppInput"], - required: { some: ["nesting", "id"] }, - allowChildren: true, - }, - ], - /** - * allow v-html. we are only using this from very controlled sources, so - * little risk of XSS. - */ - "vue/no-v-html": ["off"], - "vue/no-v-text-v-html-on-component": ["off"], - /** - * important rule. only disregard in cases where mouse event only adds - * non-essentially functionality, e.g. hovering over a table cell to - * highlight its row and column. - */ - "vuejs-accessibility/mouse-events-have-key-events": ["off"], - }, -}; diff --git a/frontend/README.md b/frontend/README.md index 3063caaf..770f87c9 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,16 +1,16 @@ # Monarch Frontend -This project was scaffolded using Vite (`yarn create vite` → `Vue` → `create-vue`) with the following options: +This project was scaffolded using Vite (`bun create vite` → `Vue` → `create-vue`). +Stack summary: + +- Bun (for runtime and package manager, see note below) - TypeScript (for type checking) - Vue Router (for SPA navigation) - Vitest (unit testing) - Playwright (e2e testing) - ESLint (code quality) - Prettier (code formatting) - -Techniques/approaches used: - - Vue 3 - Composition API - `