Merge changes from v1.3.0-next.14 into main (#15)

.github/PULL_REQUEST_TEMPLATE/MAINTAINER.md

@@ -0,0 +1,12 @@
+<!-- PR TITLE: Merge changes from <src-tag> into main -->
+
+Merge changes from [<!-- src git tag here (e.g., "v1.2.3") -->][src-tag] into [main][main-branch].
+
+Details regarding the included changes are provided in the [release notes][src-tag] and the [CHANGELOG][main-changelog].
+
+[src-tag]: https://github.com/Nerdware-LLC/fixit-web/releases/tag/<!-- src git tag here (e.g., "v1.2.3") -->
+
+<!-- DEFAULT DEST: main branch -->
+
+[main-branch]: https://github.com/Nerdware-LLC/fixit-web/tree/main
+[main-changelog]: https://github.com/Nerdware-LLC/fixit-web/tree/main/CHANGELOG.md

.github/workflows/chromatic.yaml

@@ -0,0 +1,34 @@
+name: Chromatic Publish Workflow
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - ".storybook/**/*"
+      - "src/**/*.stories.tsx"
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read # to checkout the code
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install Dependencies
+        run: npm ci --include=dev
+
+      - uses: chromaui/action@v10
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: "storybook:build"
+          autoAcceptChanges: true # Automatically accept visual changes
+          exitOnceUploaded: true # Exit 0 once the build is uploaded
+          exitZeroOnChanges: true # Don't fail the build if there are visual changes

.github/workflows/deploy.yaml

@@ -7,22 +7,68 @@ on:
 jobs:
   deploy:
     name: Deploy
-    uses: Nerdware-LLC/reusable-action-workflows/.github/workflows/upload_to_s3.yaml@main
+    runs-on: ubuntu-latest
+
+    # permissions required to use aws-actions/configure-aws-credentials
     permissions:
       id-token: write
       contents: read
-    with:
-      s3-sync-command-params: "--acl bucket-owner-full-control --sse AES256 --delete"
-    secrets:
-      OIDC_GITHUB_ROLE_ARN: ${{ secrets.OIDC_GITHUB_ROLE_ARN }}
-      S3_BUCKET_REGION: ${{ secrets.S3_BUCKET_REGION }}
-      S3_UPLOAD_PATH: |
-        ${{ secrets.S3_BUCKET_NAME }}/${{ contains(github.ref_name, 'next') && 'production' || 'staging' }}
-      # github.ref_name will be the release tag name, e.g. 'v1.0.0' or 'v1.0.0-next.1'.
-      # If the ref_name contains 'next', then the S3 bucket target destination will be
-      # '<bucket-name>/staging', otherwise it will be '<bucket-name>/production'. The
-      # CloudFront distributions are configured to serve the 'staging' or 'production'
-      # S3 bucket paths based on the origin subdomain (e.g. 'staging.example.com' or
-      # 'example.com'). For a real-world production app, you'd want to use the ref_tag
-      # as the target, and set rules in the distribution to select the appropriate
-      # version/environment, but this setup is sufficient for a demo application.
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install Dependencies
+        run: npm ci --include=dev
+
+      - name: Build
+        env:
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_SENTRY_CI_RELEASE_NAME: ${{ github.event.release.name }}
+          VITE_STRIPE_PUBLISHABLE_KEY: ${{ secrets.STRIPE_TEST_PUBLISHABLE_KEY }}
+        run: |
+          if [ "${{ github.event.release.prerelease }}" == 'true' ]; then
+            npm run build:staging
+          else
+            npm run build
+          fi
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.S3_OIDC_GITHUB_ROLE_ARN }}
+          aws-region: ${{ secrets.S3_BUCKET_REGION }}
+
+      - name: Upload to S3
+        run: |
+          if [ "${{ github.event.release.prerelease }}" == 'true' ]; then
+            bucket_dir='staging'
+          else
+            bucket_dir='production'
+          fi
+
+          aws s3 sync ./dist \
+            s3://${{ secrets.S3_BUCKET_NAME }}/$bucket_dir \
+            --acl bucket-owner-full-control \
+            --sse AES256 \
+            --delete
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.CLOUDFRONT_OIDC_GITHUB_ROLE_ARN }}
+          aws-region: ${{ secrets.CLOUDFRONT_DIST_REGION }}
+
+      - name: Invalidate CloudFront Edge-Cache
+        run: |
+          if [ "${{ github.event.release.prerelease }}" == 'true' ]; then
+            cf_dist_id=${{ secrets.CLOUDFRONT_STAGING_DIST_ID }}
+          else
+            cf_dist_id=${{ secrets.CLOUDFRONT_PROD_DIST_ID }}
+          fi
+
+          aws cloudfront create-invalidation \
+            --distribution-id $cf_dist_id \
+            --paths '/*'

.github/workflows/release.yaml

@@ -1,21 +1,16 @@
 name: Release Workflow
 
+# This workflow is called by the Test workflow when all tests pass.
+
 on:
   workflow_dispatch:
   workflow_call: # may be called by the Test workflow
     secrets:
       SEMANTIC_RELEASE_TOKEN: { required: true }
-  pull_request:
-    types: [closed]
-    branches: [main, next]
-    paths: ["src/**/*", "package*.json", "index.html"]
 
 jobs:
   release:
-    name: Release # if event is a closed PR, only run if PR was merged
-    if: |
-      github.event_name != 'pull_request' ||
-        github.event.pull_request.merged == true
+    name: Release
     uses: Nerdware-LLC/reusable-action-workflows/.github/workflows/release.yaml@main
     secrets:
       SEMANTIC_RELEASE_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}

.github/workflows/test.yaml

@@ -13,44 +13,64 @@ on:
 jobs:
   test:
     name: Run Tests
-    uses: Nerdware-LLC/reusable-action-workflows/.github/workflows/node_test.yaml@main
-    with:
-      test-script: "test:ci"
-      # The node_test workflow masks these "env-vars" values and makes them
-      # available as environment variables for the test env. This serves as
-      # a workaround for the fact that GitHub Actions does not propagate the
-      # env context to called workflows.
-      env-vars: >-
-        NODE_ENV=test
-        VITE_API_PROTOCOL=http
-        VITE_API_HOST=localhost:8080
-    secrets:
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-      env-vars: >-
-        VITE_SENTRY_DSN=${{ secrets.SENTRY_DSN }}
-        VITE_STRIPE_PUBLISHABLE_KEY=${{ secrets.STRIPE_TEST_PUBLISHABLE_KEY }}
-        VITE_FIXIT_SUB_PROMO_CODES_JSON=${{ secrets.FIXIT_SUB_PROMO_CODES_JSON }}
-
-  update_pr:
-    name: Update PR with Coverage Reports
-    needs: test # only run on PRs
-    if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     permissions:
-      contents: read # required to checkout the code
-      pull-requests: write # required to put a comment into the PR
+      contents: read #       to checkout the code
+      issues: write #        to comment on released issues
+      pull-requests: write # to add coverage reports to the PR
     steps:
-      - name: Download Artifact "coverage-reports"
-        uses: actions/download-artifact@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          name: coverage-reports
-      - name: Update PR Using "coverage-reports" Artifact
+          node-version-file: ".nvmrc"
+
+      - name: Install Dependencies
+        run: npm ci --include=dev
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run Tests
+        if: success()
+        id: run-tests
+        run: npm run test:ci
+
+      - name: Update GitHub Commit Status
+        if: ${{ !cancelled() }}
+        run: |
+          if [ ${{ steps.run-tests.outcome }} == 'success' ]; then
+            commit_status_state='success'
+            description='Tests passed'
+          else
+            commit_status_state='failure'
+            description='Tests failed'
+          fi
+
+          curl --request POST \
+            --url https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }} \
+            --header 'authorization: Bearer ${{ secrets.GITHUB_TOKEN }}' \
+            --header 'content-type: application/json' \
+            --data "{
+              \"context\": \"tests\",
+              \"state\": \"$commit_status_state\",
+              \"description\": \"$description\",
+              \"target_url\": \"https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}\"
+            }"
+
+      - name: Update CodeCov
+        if: success()
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: Update PR with Coverage Reports
+        if: github.event_name == 'pull_request'
         uses: davelosert/vitest-coverage-report-action@v2
 
   release:
-    name: Release (push-only)
-    needs: test # only run on push events when tests pass
-    if: github.event_name == 'push' && needs.test.outputs.did-tests-succeed == true
+    name: Release if Tests Passed (push/dispatch only)
+    needs: test
+    if: github.event_name != 'pull_request' && needs.test.result == 'success'
     uses: ./.github/workflows/release.yaml
     secrets:
       SEMANTIC_RELEASE_TOKEN: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}

.gitignore

@@ -1,9 +1,6 @@
-######################################################################
+###############################################################################
 # React gitignore entries
 
-# This section includes entries from the gitignore.io API
-# https://www.toptal.com/developers/gitignore/api/react
-
 # Packages/npm/yarn/lerna
 node_modules
 .npm
@@ -52,7 +49,7 @@ psd
 thumb
 sketch
 
-#---------------------------------------------------------------------
+#------------------------------------------------------------------------------
 # Nerdware gitignore entries
 
 # Notes
@@ -81,12 +78,12 @@ FIXME*
 schema.json
 
 # VSCode-related
-.vscode/
+.vscode/*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 *.code-workspace
 .history/
 .vscode-test
 
-######################################################################
+###############################################################################

.nvmrc

@@ -1 +1 @@
-v16.17.0
+v20

.pre-commit-config.yaml

@@ -14,10 +14,10 @@ repos:
       - id: check-executables-have-shebangs
       - id: check-yaml # validate yaml file syntax
       - id: end-of-file-fixer # ensure files end in newline char
-        exclude: src/(graphql/__codegen__/.*|.*\.snap)$ # don't modify Jest snapshots nor codegen'd files
+        exclude: src/(.*/__codegen__/.*|.*\.snap)$ # don't modify codegen'd files or snapshots
         exclude_types: [graphql, svg, json]
-      - id: trailing-whitespace # trim superfluous whitespace from eol
-        exclude: src/(types/graphql/.*|.*\.snap)$ # don't modify Jest snapshots nor codegen'd files
+      - id: trailing-whitespace
+        exclude: src/(.*/__codegen__/.*|.*\.snap)$ # don't modify codegen'd files or snapshots
         exclude_types: [graphql]
         args: [--markdown-linebreak-ext=md]
 

.prettierignore

@@ -0,0 +1,2 @@
+# Ensure codegen'd files aren't modified by prettier:
+src/**/__codegen__/**/*

.prettierrc.yaml

@@ -1,4 +1,4 @@
-##################################################
+################################################################################
 # PRETTIER BASE CONFIGS
 
 printWidth: 100
@@ -14,11 +14,14 @@ bracketSameLine: false
 arrowParens: "always"
 htmlWhitespaceSensitivity: "css"
 endOfLine: "lf"
-singleAttributePerLine: false
-##################################################
-# PRETTIER PLUGIN CONFIGS
+plugins: ["@serverless-guru/prettier-plugin-import-order"]
+
+################################################################################
+# PRETTIER PLUGIN CONFIGS: @serverless-guru/prettier-plugin-import-order
+
+# This plugin will sort imports in accordance with the rules below.
+# Note: this plugin will not move side-effect imports.
 
-# PLUGIN: @serverless-guru/prettier-plugin-import-order
 importOrderMergeDuplicateImports: true
 importOrderBuiltinModulesToTop: true
 importOrderTypeImportsToBottom: true
@@ -34,24 +37,10 @@ importOrder: [
     "^@mui/x-(.*)$",
     "^@mui/material/(.*)$",
     "^@mui/icons-material/(.*)$",
-    # Project path aliases:
-    "^@ROOT/(.*)$",
-    "^@app/?(.*)$",
-    "^@cache/?(.*)$",
-    "^@components/?(.*)$",
-    "^@graphql/?(.*)$",
-    "^@hooks/?(.*)$",
-    "^@images/?(.*)$",
-    "^@layouts/?(.*)$",
-    "^@pages/?(.*)$",
-    "^@routers/?(.*)$",
-    "^@services/?(.*)$",
-    "^@tests/?(.*)$",
-    "^@types/?(.*)$",
-    "^@utils/?(.*)$",
+    # Project path alias:
     "^@/",
     # Relative imports at the bottom
     "^./",
     "^../",
   ]
-##################################################
+################################################################################

.releaserc.yaml

@@ -7,13 +7,13 @@ plugins:
   - - "@semantic-release/commit-analyzer"
     - preset: angular
       releaseRules:
-        # Default release rules
         - { breaking: true, release: major }
         - { type: feat, release: minor }
+        - { type: refactor, scope: "core*", release: minor }
         - { revert: true, release: patch }
+        - { type: deps, release: patch }
         - { type: fix, release: patch }
         - { type: perf, release: patch }
-        # Non-default release rules
         - { type: refactor, release: patch }
         - { type: docs, release: false }
         - { scope: no-release, release: false }
@@ -27,6 +27,16 @@ plugins:
   - - "@semantic-release/github"
     - addReleases: bottom
       assignees: trevor-anderson
+      successComment: false
+      failTitle: false
+      # The options set to `false` above ensure the github plugin does not
+      # attempt to use the GitHub API in the "success" step, which currently
+      # throws every single time due to purported rate limiting issues with the
+      # GitHub API, even though local usage does not result in such errors. The
+      # problem is suspected to be caused by how the plugin uses Octokit's `retry`.
+      # See issues:
+      # - https://github.com/semantic-release/semantic-release/issues/2204
+      # - https://github.com/semantic-release/semantic-release/issues/843
 
   - - "@semantic-release/changelog"
     - changelogFile: "CHANGELOG.md"