@defra/forms-engine-plugin 0.0.1

package/.github/workflows/publish.yml

@@ -0,0 +1,111 @@
+name: Publish Engine plugin
+
+on:
+  workflow_dispatch: {}
+
+  push:
+    branches:
+      - main
+    paths:
+      - '.browserslistrc'
+      - 'babel.config.*'
+      - 'src/**'
+      - '!**/*.test.*'
+
+concurrency:
+  group: publish-engine-plugin
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-24.04
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        id: npm-install-cache
+        with:
+          enableCrossOsArchive: true
+          key: npm-install-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+          path: node_modules
+
+      - name: Cache build
+        uses: actions/cache@v4
+        with:
+          enableCrossOsArchive: true
+          key: npm-build-${{ runner.os }}-${{ github.sha }}
+          path: |
+            .server
+            .public
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        if: steps.npm-install-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Run build
+        run: npm run build
+
+  publish:
+    name: Publish
+    runs-on: ubuntu-24.04
+    needs: [build]
+    environment: production
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Restore dependencies
+        uses: actions/cache/restore@v4
+        with:
+          enableCrossOsArchive: true
+          fail-on-cache-miss: true
+          key: npm-install-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+          path: node_modules
+
+      - name: Restore build
+        uses: actions/cache/restore@v4
+        with:
+          enableCrossOsArchive: true
+          fail-on-cache-miss: true
+          key: npm-build-${{ runner.os }}-${{ github.sha }}
+          path: |
+            .server
+            .public
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          registry-url: https://registry.npmjs.org
+          scope: '@defra'
+
+      - name: Update package versions
+        run: npm version patch --git-tag-version false --save
+
+      - name: Commit and push updates
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git commit -am "v$(npm pkg get version | tr -d \") [skip ci]" && git push
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

package/.husky/pre-commit

@@ -0,0 +1 @@
+lint-staged

package/.lintstagedrc.js

@@ -0,0 +1,4 @@
+export default {
+  '*.{cjs,js,mjs,ts}': 'eslint --fix',
+  '*.{cjs,js,json,md,mjs,scss,ts}': 'prettier --write'
+}

package/.nvmrc

@@ -0,0 +1 @@
+lts/jod

package/.prettierignore

@@ -0,0 +1,8 @@
+# Ignore
+node_modules
+coverage
+dist
+public
+
+# Ignore all HTML files:
+*.html

package/.prettierrc.cjs

@@ -0,0 +1,26 @@
+/**
+ * Prettier config
+ *
+ * @type {import('prettier').Config}
+ */
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'none',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        embeddedLanguageFormatting: 'off',
+        singleQuote: false
+      }
+    },
+    {
+      files: '*.scss',
+      options: {
+        printWidth: 120,
+        singleQuote: false
+      }
+    }
+  ]
+}

package/.server/client/javascripts/application.js

@@ -0,0 +1,68 @@
+import { Button, CharacterCount, Checkboxes, ErrorSummary, Header, NotificationBanner, Radios, SkipLink, createAll } from 'govuk-frontend';
+createAll(Button);
+createAll(CharacterCount);
+createAll(Checkboxes);
+createAll(ErrorSummary);
+createAll(Header);
+createAll(NotificationBanner);
+createAll(Radios);
+createAll(SkipLink);
+
+// Show preview close link via `rel="opener"`
+if (window.opener) {
+  const $closeLink = document.querySelector('.js-preview-banner-close');
+  $closeLink?.removeAttribute('hidden');
+  $closeLink?.addEventListener('click', event => {
+    event.preventDefault();
+    window.close();
+  });
+}
+
+/**
+ * Initialise autocomplete
+ * @param {HTMLSelectElement | null} $select
+ * @param {(config: object) => void} init
+ */
+function initAutocomplete($select, init) {
+  if (!$select) {
+    return;
+  }
+  const config = {
+    id: $select.id,
+    selectElement: $select
+  };
+  init(config);
+
+  /** @type {HTMLInputElement | null} */
+  const $input = document.querySelector(`#${config.id}`);
+
+  // Allowed values for input
+  const inputValues = [...$select.options].map(option => option.text);
+
+  // Reset select when input value is not allowed
+  $input?.addEventListener('blur', () => {
+    if (!$input.value || !inputValues.includes($input.value)) {
+      $select.value = '';
+    }
+  });
+}
+
+// Find all autocompletes
+const $autocompletes = document.querySelectorAll(`[data-module="govuk-accessible-autocomplete"]`);
+
+// Lazy load autocomplete component
+if ($autocompletes.length) {
+  // @ts-expect-error -- No types available
+  import('accessible-autocomplete').then(component => {
+    const {
+      default: accessibleAutocomplete
+    } = component;
+
+    // Initialise each autocomplete
+    $autocompletes.forEach($module => initAutocomplete($module.querySelector('select'), accessibleAutocomplete.enhanceSelectElement));
+  })
+
+  // eslint-disable-next-line no-console
+  .catch(console.error);
+}
+//# sourceMappingURL=application.js.map

package/.server/client/javascripts/application.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application.js","names":["Button","CharacterCount","Checkboxes","ErrorSummary","Header","NotificationBanner","Radios","SkipLink","createAll","window","opener","$closeLink","document","querySelector","removeAttribute","addEventListener","event","preventDefault","close","initAutocomplete","$select","init","config","id","selectElement","$input","inputValues","options","map","option","text","value","includes","$autocompletes","querySelectorAll","length","then","component","default","accessibleAutocomplete","forEach","$module","enhanceSelectElement","catch","console","error"],"sources":["../../../src/client/javascripts/application.js"],"sourcesContent":["import {\n  Button,\n  CharacterCount,\n  Checkboxes,\n  ErrorSummary,\n  Header,\n  NotificationBanner,\n  Radios,\n  SkipLink,\n  createAll\n} from 'govuk-frontend'\n\ncreateAll(Button)\ncreateAll(CharacterCount)\ncreateAll(Checkboxes)\ncreateAll(ErrorSummary)\ncreateAll(Header)\ncreateAll(NotificationBanner)\ncreateAll(Radios)\ncreateAll(SkipLink)\n\n// Show preview close link via `rel=\"opener\"`\nif (window.opener) {\n  const $closeLink = document.querySelector('.js-preview-banner-close')\n\n  $closeLink?.removeAttribute('hidden')\n  $closeLink?.addEventListener('click', (event) => {\n    event.preventDefault()\n    window.close()\n  })\n}\n\n/**\n * Initialise autocomplete\n * @param {HTMLSelectElement | null} $select\n * @param {(config: object) => void} init\n */\nfunction initAutocomplete($select, init) {\n  if (!$select) {\n    return\n  }\n\n  const config = {\n    id: $select.id,\n    selectElement: $select\n  }\n\n  init(config)\n\n  /** @type {HTMLInputElement | null} */\n  const $input = document.querySelector(`#${config.id}`)\n\n  // Allowed values for input\n  const inputValues = [...$select.options].map((option) => option.text)\n\n  // Reset select when input value is not allowed\n  $input?.addEventListener('blur', () => {\n    if (!$input.value || !inputValues.includes($input.value)) {\n      $select.value = ''\n    }\n  })\n}\n\n// Find all autocompletes\nconst $autocompletes = document.querySelectorAll(\n  `[data-module=\"govuk-accessible-autocomplete\"]`\n)\n\n// Lazy load autocomplete component\nif ($autocompletes.length) {\n  // @ts-expect-error -- No types available\n  import('accessible-autocomplete')\n    .then((component) => {\n      const { default: accessibleAutocomplete } = component\n\n      // Initialise each autocomplete\n      $autocompletes.forEach(($module) =>\n        initAutocomplete(\n          $module.querySelector('select'),\n          accessibleAutocomplete.enhanceSelectElement\n        )\n      )\n    })\n\n    // eslint-disable-next-line no-console\n    .catch(console.error)\n}\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,cAAc,EACdC,UAAU,EACVC,YAAY,EACZC,MAAM,EACNC,kBAAkB,EAClBC,MAAM,EACNC,QAAQ,EACRC,SAAS,QACJ,gBAAgB;AAEvBA,SAAS,CAACR,MAAM,CAAC;AACjBQ,SAAS,CAACP,cAAc,CAAC;AACzBO,SAAS,CAACN,UAAU,CAAC;AACrBM,SAAS,CAACL,YAAY,CAAC;AACvBK,SAAS,CAACJ,MAAM,CAAC;AACjBI,SAAS,CAACH,kBAAkB,CAAC;AAC7BG,SAAS,CAACF,MAAM,CAAC;AACjBE,SAAS,CAACD,QAAQ,CAAC;;AAEnB;AACA,IAAIE,MAAM,CAACC,MAAM,EAAE;EACjB,MAAMC,UAAU,GAAGC,QAAQ,CAACC,aAAa,CAAC,0BAA0B,CAAC;EAErEF,UAAU,EAAEG,eAAe,CAAC,QAAQ,CAAC;EACrCH,UAAU,EAAEI,gBAAgB,CAAC,OAAO,EAAGC,KAAK,IAAK;IAC/CA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBR,MAAM,CAACS,KAAK,CAAC,CAAC;EAChB,CAAC,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAACC,OAAO,EAAEC,IAAI,EAAE;EACvC,IAAI,CAACD,OAAO,EAAE;IACZ;EACF;EAEA,MAAME,MAAM,GAAG;IACbC,EAAE,EAAEH,OAAO,CAACG,EAAE;IACdC,aAAa,EAAEJ;EACjB,CAAC;EAEDC,IAAI,CAACC,MAAM,CAAC;;EAEZ;EACA,MAAMG,MAAM,GAAGb,QAAQ,CAACC,aAAa,CAAC,IAAIS,MAAM,CAACC,EAAE,EAAE,CAAC;;EAEtD;EACA,MAAMG,WAAW,GAAG,CAAC,GAAGN,OAAO,CAACO,OAAO,CAAC,CAACC,GAAG,CAAEC,MAAM,IAAKA,MAAM,CAACC,IAAI,CAAC;;EAErE;EACAL,MAAM,EAAEV,gBAAgB,CAAC,MAAM,EAAE,MAAM;IACrC,IAAI,CAACU,MAAM,CAACM,KAAK,IAAI,CAACL,WAAW,CAACM,QAAQ,CAACP,MAAM,CAACM,KAAK,CAAC,EAAE;MACxDX,OAAO,CAACW,KAAK,GAAG,EAAE;IACpB;EACF,CAAC,CAAC;AACJ;;AAEA;AACA,MAAME,cAAc,GAAGrB,QAAQ,CAACsB,gBAAgB,CAC9C,+CACF,CAAC;;AAED;AACA,IAAID,cAAc,CAACE,MAAM,EAAE;EACzB;EACA,MAAM,CAAC,yBAAyB,CAAC,CAC9BC,IAAI,CAAEC,SAAS,IAAK;IACnB,MAAM;MAAEC,OAAO,EAAEC;IAAuB,CAAC,GAAGF,SAAS;;IAErD;IACAJ,cAAc,CAACO,OAAO,CAAEC,OAAO,IAC7BtB,gBAAgB,CACdsB,OAAO,CAAC5B,aAAa,CAAC,QAAQ,CAAC,EAC/B0B,sBAAsB,CAACG,oBACzB,CACF,CAAC;EACH,CAAC;;EAED;EAAA,CACCC,KAAK,CAACC,OAAO,CAACC,KAAK,CAAC;AACzB","ignoreList":[]}

package/.server/client/javascripts/file-upload.js

@@ -0,0 +1,292 @@
+export const MAX_POLLING_DURATION = 300; // 5 minutes
+
+/**
+ * Creates or updates status announcer for screen readers
+ * @param {HTMLElement | null} form - The form element
+ * @param {HTMLElement | null} fileCountP - The file count paragraph element
+ * @returns {HTMLElement} The status announcer element
+ */
+function createOrUpdateStatusAnnouncer(form, fileCountP) {
+  let statusAnnouncer = form?.querySelector('#statusInformation');
+  if (!statusAnnouncer) {
+    statusAnnouncer = document.createElement('div');
+    statusAnnouncer.id = 'statusInformation';
+    statusAnnouncer.className = 'govuk-visually-hidden';
+    statusAnnouncer.setAttribute('aria-live', 'polite');
+
+    // multiple fallbacks to ensure the status announcer is always added to the DOM
+    // this helps with cross-browser compatibility and unexpected DOM structures encountered during QA
+    try {
+      addStatusAnnouncerToDOM(asHTMLElement(form), asHTMLElement(fileCountP), asHTMLElement(statusAnnouncer));
+    } catch {
+      try {
+        form?.appendChild(statusAnnouncer);
+      } catch {
+        document.body.appendChild(statusAnnouncer);
+      }
+    }
+  }
+  return /** @type {HTMLElement} */statusAnnouncer;
+}
+
+/**
+ * Helper function to add the status announcer to the DOM
+ * @param {HTMLElement} form - The form element
+ * @param {HTMLElement | null} fileCountP - The file count paragraph element
+ * @param {HTMLElement} statusAnnouncer - The status announcer element to add
+ */
+function addStatusAnnouncerToDOM(form, fileCountP, statusAnnouncer) {
+  if (fileCountP?.nextSibling && fileCountP.parentNode === form) {
+    form.insertBefore(statusAnnouncer, fileCountP.nextSibling);
+    return;
+  }
+  const parentElement = fileCountP?.parentNode ?? form;
+  parentElement.appendChild(statusAnnouncer);
+}
+
+/**
+ * Finds an existing summary list or creates a new one
+ * @param {HTMLFormElement} form - The form element
+ * @param {HTMLElement} fileCountP - The file count paragraph element
+ * @returns {HTMLElement} The summary list element
+ */
+function findOrCreateSummaryList(form, fileCountP) {
+  let summaryList = form.querySelector('dl.govuk-summary-list');
+  if (!summaryList) {
+    summaryList = document.createElement('dl');
+    summaryList.className = 'govuk-summary-list govuk-summary-list--long-key';
+    const continueButton = form.querySelector('.govuk-button');
+    if (continueButton) {
+      form.insertBefore(summaryList, continueButton);
+    } else {
+      form.insertBefore(summaryList, fileCountP.nextSibling);
+    }
+  }
+  return /** @type {HTMLElement} */summaryList;
+}
+
+/**
+ * Creates a file row element for the summary list
+ * @param {File | null} selectedFile - The selected file
+ * @param {string} statusText - The status to display
+ * @returns {HTMLElement} The created row element
+ */
+function createFileRow(selectedFile, statusText) {
+  const row = document.createElement('div');
+  row.className = 'govuk-summary-list__row';
+  row.setAttribute('data-filename', selectedFile?.name ?? '');
+  row.innerHTML = `
+      <dt class="govuk-summary-list__key">
+        ${selectedFile?.name ?? ''}
+      </dt>
+      <dd class="govuk-summary-list__value">
+        <strong class="govuk-tag govuk-tag--yellow">${statusText}</strong>
+      </dd>
+      <dd class="govuk-summary-list__actions">
+      </dd>
+    `;
+  return row;
+}
+
+/**
+ * Renders or updates the file summary box for the selected file
+ * @param {File | null} selectedFile - The selected file
+ * @param {string} statusText - The status to display
+ * @param {HTMLElement} form - The form element
+ */
+function renderSummary(selectedFile, statusText, form) {
+  const container = document.getElementById('uploadedFilesContainer');
+  const uploadForm = container ? container.closest('form') : null;
+  if (!uploadForm || !(uploadForm instanceof HTMLFormElement)) {
+    return;
+  }
+  const fileCountP = uploadForm.querySelector('p.govuk-body');
+  if (!fileCountP) {
+    return;
+  }
+  const statusAnnouncer = createOrUpdateStatusAnnouncer(/** @type {HTMLElement} */uploadForm, /** @type {HTMLElement | null} */fileCountP);
+  const fileInput = form.querySelector('input[type="file"]');
+  if (fileInput) {
+    fileInput.setAttribute('aria-describedby', 'statusInformation');
+  }
+  const summaryList = findOrCreateSummaryList(/** @type {HTMLFormElement} */uploadForm, /** @type {HTMLElement} */fileCountP);
+  const existingRow = document.querySelector(`[data-filename="${selectedFile?.name}"]`);
+  if (existingRow) {
+    existingRow.remove();
+  }
+  const row = createFileRow(selectedFile, statusText);
+  summaryList.insertBefore(row, summaryList.firstChild);
+  statusAnnouncer.textContent = `${selectedFile?.name ?? ''} ${statusText}`;
+}
+
+/**
+ * Shows an error message using the GOV.UK error summary component
+ * @param {string} message - The error message to display
+ * @param {HTMLElement | null} errorSummary - The error summary container
+ * @param {HTMLInputElement} fileInput - The file input element
+ * @returns {void}
+ */
+function showError(message, errorSummary, fileInput) {
+  if (errorSummary) {
+    errorSummary.innerHTML = `
+        <div class="govuk-error-summary" data-module="govuk-error-summary">
+          <div role="alert">
+            <h2 class="govuk-error-summary__title" id="error-summary-title">
+              There is a problem
+            </h2>
+            <div class="govuk-error-summary__body">
+              <ul class="govuk-list govuk-error-summary__list">
+                <li>
+                  <a href="#file-upload">${message}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      `;
+    fileInput.setAttribute('aria-describedby', 'error-summary-title');
+  }
+}
+
+/**
+ * Helper to safely convert an Element to HTMLElement
+ * @param {Element | null} element - The element to convert
+ */
+function asHTMLElement(element) {
+  return /** @type {HTMLElement} */element;
+}
+function reloadPage() {
+  window.history.replaceState(null, '', window.location.href);
+  window.location.href = window.location.pathname;
+}
+
+/**
+ * Polls the upload status endpoint until the file is ready or timeout occurs
+ * @param {string} uploadId - The upload ID to check
+ */
+function pollUploadStatus(uploadId) {
+  let attempts = 0;
+  const interval = setInterval(() => {
+    attempts++;
+    if (attempts >= MAX_POLLING_DURATION) {
+      clearInterval(interval);
+      reloadPage();
+      return;
+    }
+    fetch(`/upload-status/${uploadId}`, {
+      headers: {
+        Accept: 'application/json'
+      }
+    }).then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return response.json();
+    }).then(data => {
+      if (data.uploadStatus === 'ready') {
+        clearInterval(interval);
+        reloadPage();
+      }
+    }).catch(() => {
+      clearInterval(interval);
+      reloadPage();
+    });
+  }, 1000);
+}
+
+/**
+ * Handle standard form submission for file upload
+ * @param {HTMLFormElement} formElement - The form element
+ * @param {HTMLInputElement} fileInput - The file input element
+ * @param {HTMLButtonElement} uploadButton - The upload button
+ * @param {HTMLButtonElement} continueButton - The continue button
+ * @param {File | null} selectedFile - The selected file
+ */
+function handleStandardFormSubmission(formElement, fileInput, uploadButton, continueButton, selectedFile) {
+  renderSummary(selectedFile, 'Uploading…', formElement);
+  fileInput.focus();
+  setTimeout(() => {
+    fileInput.disabled = true;
+    uploadButton.disabled = true;
+    continueButton.disabled = true;
+  }, 100);
+}
+
+/**
+ * Handle AJAX form submission with upload ID
+ * @param {Event} event - The click event
+ * @param {HTMLFormElement} formElement - The form element
+ * @param {HTMLInputElement} fileInput - The file input element
+ * @param {HTMLButtonElement} uploadButton - The upload button
+ * @param {HTMLElement | null} errorSummary - The error summary container
+ * @param {string | undefined} uploadId - The upload ID
+ * @returns {boolean} Whether the event was handled
+ */
+function handleAjaxFormSubmission(event, formElement, fileInput, uploadButton, errorSummary, uploadId) {
+  if (!formElement.action || !uploadId) {
+    return false;
+  }
+  event.preventDefault();
+  const formData = new FormData(formElement);
+  const isLocalDev = !!formElement.dataset.proxyUrl;
+  const uploadUrl = formElement.dataset.proxyUrl ?? formElement.action;
+  const fetchOptions = /** @type {RequestInit} */{
+    method: 'POST',
+    body: formData,
+    redirect: isLocalDev ? 'follow' : 'manual' // follow mode if local development with the proxy
+  };
+
+  // no-cors mode if needed local development with the proxy
+  if (isLocalDev) {
+    fetchOptions.mode = 'no-cors';
+  }
+  fetch(uploadUrl, fetchOptions).then(() => {
+    pollUploadStatus(uploadId);
+  }).catch(() => {
+    fileInput.disabled = false;
+    uploadButton.disabled = false;
+    showError('There was a problem uploading the file', errorSummary, fileInput);
+    return null;
+  });
+  return true;
+}
+export function initFileUpload() {
+  const form = document.querySelector('form:has(input[type="file"])');
+  /** @type {HTMLInputElement | null} */
+  const fileInput = form ? form.querySelector('input[type="file"]') : null;
+  /** @type {HTMLButtonElement | null} */
+  const uploadButton = form ? form.querySelector('.upload-file-button') : null;
+  const continueButton = /** @type {HTMLButtonElement} */Array.from(document.querySelectorAll('button.govuk-button')).find(button => button.textContent?.trim() === 'Continue') ?? null;
+  const errorSummary = document.querySelector('.govuk-error-summary-container');
+  if (!form || !fileInput || !uploadButton) {
+    return;
+  }
+  const formElement = /** @type {HTMLFormElement} */form;
+  /** @type {File | null} */
+  let selectedFile = null;
+  let isSubmitting = false;
+  const uploadId = formElement.dataset.uploadId;
+  fileInput.addEventListener('change', () => {
+    if (errorSummary) {
+      errorSummary.innerHTML = '';
+    }
+    if (fileInput.files && fileInput.files.length > 0) {
+      selectedFile = fileInput.files[0];
+    }
+  });
+  uploadButton.addEventListener('click', event => {
+    if (!selectedFile) {
+      event.preventDefault();
+      showError('Select a file', /** @type {HTMLElement | null} */errorSummary, fileInput);
+      return;
+    }
+    if (isSubmitting) {
+      event.preventDefault();
+      return;
+    }
+    isSubmitting = true;
+    handleStandardFormSubmission(formElement, fileInput, uploadButton, continueButton, selectedFile);
+    handleAjaxFormSubmission(event, formElement, fileInput, uploadButton, /** @type {HTMLElement | null} */errorSummary, uploadId);
+  });
+}
+//# sourceMappingURL=file-upload.js.map

package/.server/client/javascripts/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":["MAX_POLLING_DURATION","createOrUpdateStatusAnnouncer","form","fileCountP","statusAnnouncer","querySelector","document","createElement","id","className","setAttribute","addStatusAnnouncerToDOM","asHTMLElement","appendChild","body","nextSibling","parentNode","insertBefore","parentElement","findOrCreateSummaryList","summaryList","continueButton","createFileRow","selectedFile","statusText","row","name","innerHTML","renderSummary","container","getElementById","uploadForm","closest","HTMLFormElement","fileInput","existingRow","remove","firstChild","textContent","showError","message","errorSummary","element","reloadPage","window","history","replaceState","location","href","pathname","pollUploadStatus","uploadId","attempts","interval","setInterval","clearInterval","fetch","headers","Accept","then","response","ok","Error","json","data","uploadStatus","catch","handleStandardFormSubmission","formElement","uploadButton","focus","setTimeout","disabled","handleAjaxFormSubmission","event","action","preventDefault","formData","FormData","isLocalDev","dataset","proxyUrl","uploadUrl","fetchOptions","method","redirect","mode","initFileUpload","Array","from","querySelectorAll","find","button","trim","isSubmitting","addEventListener","files","length"],"sources":["../../../src/client/javascripts/file-upload.js"],"sourcesContent":["export const MAX_POLLING_DURATION = 300 // 5 minutes\n\n/**\n * Creates or updates status announcer for screen readers\n * @param {HTMLElement | null} form - The form element\n * @param {HTMLElement | null} fileCountP - The file count paragraph element\n * @returns {HTMLElement} The status announcer element\n */\nfunction createOrUpdateStatusAnnouncer(form, fileCountP) {\n  let statusAnnouncer = form?.querySelector('#statusInformation')\n\n  if (!statusAnnouncer) {\n    statusAnnouncer = document.createElement('div')\n    statusAnnouncer.id = 'statusInformation'\n    statusAnnouncer.className = 'govuk-visually-hidden'\n    statusAnnouncer.setAttribute('aria-live', 'polite')\n\n    // multiple fallbacks to ensure the status announcer is always added to the DOM\n    // this helps with cross-browser compatibility and unexpected DOM structures encountered during QA\n    try {\n      addStatusAnnouncerToDOM(\n        asHTMLElement(form),\n        asHTMLElement(fileCountP),\n        asHTMLElement(statusAnnouncer)\n      )\n    } catch {\n      try {\n        form?.appendChild(statusAnnouncer)\n      } catch {\n        document.body.appendChild(statusAnnouncer)\n      }\n    }\n  }\n\n  return /** @type {HTMLElement} */ (statusAnnouncer)\n}\n\n/**\n * Helper function to add the status announcer to the DOM\n * @param {HTMLElement} form - The form element\n * @param {HTMLElement | null} fileCountP - The file count paragraph element\n * @param {HTMLElement} statusAnnouncer - The status announcer element to add\n */\nfunction addStatusAnnouncerToDOM(form, fileCountP, statusAnnouncer) {\n  if (fileCountP?.nextSibling && fileCountP.parentNode === form) {\n    form.insertBefore(statusAnnouncer, fileCountP.nextSibling)\n    return\n  }\n\n  const parentElement = fileCountP?.parentNode ?? form\n  parentElement.appendChild(statusAnnouncer)\n}\n\n/**\n * Finds an existing summary list or creates a new one\n * @param {HTMLFormElement} form - The form element\n * @param {HTMLElement} fileCountP - The file count paragraph element\n * @returns {HTMLElement} The summary list element\n */\nfunction findOrCreateSummaryList(form, fileCountP) {\n  let summaryList = form.querySelector('dl.govuk-summary-list')\n\n  if (!summaryList) {\n    summaryList = document.createElement('dl')\n    summaryList.className = 'govuk-summary-list govuk-summary-list--long-key'\n\n    const continueButton = form.querySelector('.govuk-button')\n\n    if (continueButton) {\n      form.insertBefore(summaryList, continueButton)\n    } else {\n      form.insertBefore(summaryList, fileCountP.nextSibling)\n    }\n  }\n\n  return /** @type {HTMLElement} */ (summaryList)\n}\n\n/**\n * Creates a file row element for the summary list\n * @param {File | null} selectedFile - The selected file\n * @param {string} statusText - The status to display\n * @returns {HTMLElement} The created row element\n */\nfunction createFileRow(selectedFile, statusText) {\n  const row = document.createElement('div')\n  row.className = 'govuk-summary-list__row'\n  row.setAttribute('data-filename', selectedFile?.name ?? '')\n  row.innerHTML = `\n      <dt class=\"govuk-summary-list__key\">\n        ${selectedFile?.name ?? ''}\n      </dt>\n      <dd class=\"govuk-summary-list__value\">\n        <strong class=\"govuk-tag govuk-tag--yellow\">${statusText}</strong>\n      </dd>\n      <dd class=\"govuk-summary-list__actions\">\n      </dd>\n    `\n  return row\n}\n\n/**\n * Renders or updates the file summary box for the selected file\n * @param {File | null} selectedFile - The selected file\n * @param {string} statusText - The status to display\n * @param {HTMLElement} form - The form element\n */\nfunction renderSummary(selectedFile, statusText, form) {\n  const container = document.getElementById('uploadedFilesContainer')\n  const uploadForm = container ? container.closest('form') : null\n\n  if (!uploadForm || !(uploadForm instanceof HTMLFormElement)) {\n    return\n  }\n\n  const fileCountP = uploadForm.querySelector('p.govuk-body')\n\n  if (!fileCountP) {\n    return\n  }\n\n  const statusAnnouncer = createOrUpdateStatusAnnouncer(\n    /** @type {HTMLElement} */ (uploadForm),\n    /** @type {HTMLElement | null} */ (fileCountP)\n  )\n\n  const fileInput = form.querySelector('input[type=\"file\"]')\n\n  if (fileInput) {\n    fileInput.setAttribute('aria-describedby', 'statusInformation')\n  }\n\n  const summaryList = findOrCreateSummaryList(\n    /** @type {HTMLFormElement} */ (uploadForm),\n    /** @type {HTMLElement} */ (fileCountP)\n  )\n\n  const existingRow = document.querySelector(\n    `[data-filename=\"${selectedFile?.name}\"]`\n  )\n\n  if (existingRow) {\n    existingRow.remove()\n  }\n\n  const row = createFileRow(selectedFile, statusText)\n  summaryList.insertBefore(row, summaryList.firstChild)\n  statusAnnouncer.textContent = `${selectedFile?.name ?? ''} ${statusText}`\n}\n\n/**\n * Shows an error message using the GOV.UK error summary component\n * @param {string} message - The error message to display\n * @param {HTMLElement | null} errorSummary - The error summary container\n * @param {HTMLInputElement} fileInput - The file input element\n * @returns {void}\n */\nfunction showError(message, errorSummary, fileInput) {\n  if (errorSummary) {\n    errorSummary.innerHTML = `\n        <div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n          <div role=\"alert\">\n            <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n              There is a problem\n            </h2>\n            <div class=\"govuk-error-summary__body\">\n              <ul class=\"govuk-list govuk-error-summary__list\">\n                <li>\n                  <a href=\"#file-upload\">${message}</a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      `\n    fileInput.setAttribute('aria-describedby', 'error-summary-title')\n  }\n}\n\n/**\n * Helper to safely convert an Element to HTMLElement\n * @param {Element | null} element - The element to convert\n */\nfunction asHTMLElement(element) {\n  return /** @type {HTMLElement} */ (element)\n}\n\nfunction reloadPage() {\n  window.history.replaceState(null, '', window.location.href)\n  window.location.href = window.location.pathname\n}\n\n/**\n * Polls the upload status endpoint until the file is ready or timeout occurs\n * @param {string} uploadId - The upload ID to check\n */\nfunction pollUploadStatus(uploadId) {\n  let attempts = 0\n  const interval = setInterval(() => {\n    attempts++\n\n    if (attempts >= MAX_POLLING_DURATION) {\n      clearInterval(interval)\n      reloadPage()\n      return\n    }\n\n    fetch(`/upload-status/${uploadId}`, {\n      headers: {\n        Accept: 'application/json'\n      }\n    })\n      .then((response) => {\n        if (!response.ok) {\n          throw new Error('Network response was not ok')\n        }\n        return response.json()\n      })\n      .then((data) => {\n        if (data.uploadStatus === 'ready') {\n          clearInterval(interval)\n          reloadPage()\n        }\n      })\n      .catch(() => {\n        clearInterval(interval)\n        reloadPage()\n      })\n  }, 1000)\n}\n\n/**\n * Handle standard form submission for file upload\n * @param {HTMLFormElement} formElement - The form element\n * @param {HTMLInputElement} fileInput - The file input element\n * @param {HTMLButtonElement} uploadButton - The upload button\n * @param {HTMLButtonElement} continueButton - The continue button\n * @param {File | null} selectedFile - The selected file\n */\nfunction handleStandardFormSubmission(\n  formElement,\n  fileInput,\n  uploadButton,\n  continueButton,\n  selectedFile\n) {\n  renderSummary(selectedFile, 'Uploading…', formElement)\n\n  fileInput.focus()\n\n  setTimeout(() => {\n    fileInput.disabled = true\n    uploadButton.disabled = true\n    continueButton.disabled = true\n  }, 100)\n}\n\n/**\n * Handle AJAX form submission with upload ID\n * @param {Event} event - The click event\n * @param {HTMLFormElement} formElement - The form element\n * @param {HTMLInputElement} fileInput - The file input element\n * @param {HTMLButtonElement} uploadButton - The upload button\n * @param {HTMLElement | null} errorSummary - The error summary container\n * @param {string | undefined} uploadId - The upload ID\n * @returns {boolean} Whether the event was handled\n */\nfunction handleAjaxFormSubmission(\n  event,\n  formElement,\n  fileInput,\n  uploadButton,\n  errorSummary,\n  uploadId\n) {\n  if (!formElement.action || !uploadId) {\n    return false\n  }\n\n  event.preventDefault()\n\n  const formData = new FormData(formElement)\n  const isLocalDev = !!formElement.dataset.proxyUrl\n  const uploadUrl = formElement.dataset.proxyUrl ?? formElement.action\n\n  const fetchOptions = /** @type {RequestInit} */ ({\n    method: 'POST',\n    body: formData,\n    redirect: isLocalDev ? 'follow' : 'manual' // follow mode if local development with the proxy\n  })\n\n  // no-cors mode if needed local development with the proxy\n  if (isLocalDev) {\n    fetchOptions.mode = 'no-cors'\n  }\n\n  fetch(uploadUrl, fetchOptions)\n    .then(() => {\n      pollUploadStatus(uploadId)\n    })\n    .catch(() => {\n      fileInput.disabled = false\n      uploadButton.disabled = false\n\n      showError(\n        'There was a problem uploading the file',\n        errorSummary,\n        fileInput\n      )\n\n      return null\n    })\n\n  return true\n}\n\nexport function initFileUpload() {\n  const form = document.querySelector('form:has(input[type=\"file\"])')\n  /** @type {HTMLInputElement | null} */\n  const fileInput = form ? form.querySelector('input[type=\"file\"]') : null\n  /** @type {HTMLButtonElement | null} */\n  const uploadButton = form ? form.querySelector('.upload-file-button') : null\n  const continueButton =\n    /** @type {HTMLButtonElement} */ (\n      Array.from(document.querySelectorAll('button.govuk-button')).find(\n        (button) => button.textContent?.trim() === 'Continue'\n      )\n    ) ?? null\n\n  const errorSummary = document.querySelector('.govuk-error-summary-container')\n\n  if (!form || !fileInput || !uploadButton) {\n    return\n  }\n\n  const formElement = /** @type {HTMLFormElement} */ (form)\n  /** @type {File | null} */\n  let selectedFile = null\n  let isSubmitting = false\n  const uploadId = formElement.dataset.uploadId\n\n  fileInput.addEventListener('change', () => {\n    if (errorSummary) {\n      errorSummary.innerHTML = ''\n    }\n    if (fileInput.files && fileInput.files.length > 0) {\n      selectedFile = fileInput.files[0]\n    }\n  })\n\n  uploadButton.addEventListener('click', (event) => {\n    if (!selectedFile) {\n      event.preventDefault()\n      showError(\n        'Select a file',\n        /** @type {HTMLElement | null} */ (errorSummary),\n        fileInput\n      )\n      return\n    }\n\n    if (isSubmitting) {\n      event.preventDefault()\n      return\n    }\n\n    isSubmitting = true\n\n    handleStandardFormSubmission(\n      formElement,\n      fileInput,\n      uploadButton,\n      continueButton,\n      selectedFile\n    )\n\n    handleAjaxFormSubmission(\n      event,\n      formElement,\n      fileInput,\n      uploadButton,\n      /** @type {HTMLElement | null} */ (errorSummary),\n      uploadId\n    )\n  })\n}\n"],"mappings":"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","ignoreList":[]}

package/.server/client/stylesheets/_code.scss

@@ -0,0 +1,33 @@
+@use "govuk-frontend" as *;
+@use "pkg:highlight.js/styles/github.css";
+
+.app-code {
+  @include govuk-responsive-margin(8, "bottom");
+
+  &__container {
+    display: block;
+    margin: 0;
+    padding: govuk-spacing(4);
+    overflow-x: auto;
+    border: $govuk-focus-width solid transparent;
+    outline: 1px solid transparent;
+    background-color: govuk-colour("light-grey");
+    @include govuk-responsive-margin(4, "bottom");
+
+    &:focus {
+      border: $govuk-focus-width solid $govuk-input-border-colour;
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  &:last-child &__container {
+    margin-bottom: 0;
+  }
+}
+
+pre,
+code {
+  $app-code-font: ui-monospace, menlo, "Cascadia Mono", "Segoe UI Mono", consolas, "Liberation Mono", monospace;
+  @include govuk-typography-common($font-family: $app-code-font);
+  @include govuk-font-size($size: 16);
+}

package/.server/client/stylesheets/_govuk-frontend.scss

@@ -0,0 +1,4 @@
+@forward "pkg:govuk-frontend" with (
+  $govuk-assets-path: "/assets/",
+  $govuk-new-organisation-colours: true
+);

package/.server/client/stylesheets/_prose.scss

@@ -0,0 +1,56 @@
+@use "govuk-frontend" as *;
+
+.app-prose-scope {
+  // @extend inheritance
+
+  // Contextual heading and paragraph combinations are inherited
+  // through the use of @extend
+
+  h1 {
+    @extend %govuk-heading-xl;
+  }
+
+  h2 {
+    @extend %govuk-heading-l;
+  }
+
+  h3 {
+    @extend %govuk-heading-m;
+  }
+
+  h4 {
+    @extend %govuk-heading-s;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+
+  strong,
+  b {
+    @include govuk-typography-weight-bold;
+  }
+
+  ul,
+  ol {
+    @extend %govuk-list;
+  }
+
+  ol {
+    @extend %govuk-list--number;
+  }
+
+  ul {
+    @extend %govuk-list--bullet;
+  }
+
+  a {
+    @extend %govuk-link;
+  }
+
+  hr {
+    @extend %govuk-section-break;
+    @extend %govuk-section-break--visible;
+    @extend %govuk-section-break--xl;
+  }
+}