22500 Phase 1: extract pure helpers from elements index

components/elements/helpers/fileUploadHelpers.js

@@ -0,0 +1,110 @@
+export const getThumbnailIconByMimeType = (fileType) => {
+    switch (fileType) {
+        case "text/html":
+            return "/assets/images/documenttypes/html.png";
+        case "text/plain":
+            return "/assets/images/documenttypes/txt.png";
+        case "application/msword":
+            return "/assets/images/documenttypes/doc.png";
+        case "application/pdf":
+            return "/assets/images/documenttypes/pdf.png";
+        case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+            return "/assets/images/documenttypes/docx.png";
+        case "text/csv":
+            return "/assets/images/documenttypes/csv.png";
+        case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+            return "/assets/images/documenttypes/xlsx.png";
+        case "image/jpeg":
+            return "/assets/images/documenttypes/jpg.png";
+        case "image/png":
+            return "/assets/images/documenttypes/png.png";
+        default:
+            return "/assets/images/documenttypes/default.png";
+    }
+};
+
+export const getDocumentTypePrefix = (docCode) => {
+    const repDate = new Date();
+
+    let day = repDate.getDate();
+    let month = repDate.getMonth() + 1;
+    let year = repDate.getFullYear();
+
+    const pdfFileNameDateStamp =
+        year + "-" + ("0" + month).slice(-2) + "-" + ("0" + day).slice(-2);
+
+    switch (docCode) {
+        case "000000":
+            return pdfFileNameDateStamp + "_-_Statement_of_Case";
+        case "000001":
+            return pdfFileNameDateStamp + "_-_Application_Form";
+        case "000002":
+            return pdfFileNameDateStamp + "_-_Site_Ownership_Certificate";
+        case "000003":
+            return pdfFileNameDateStamp + "_-_Decision_Notice";
+        case "000004":
+            return pdfFileNameDateStamp + "_-_Site_Location_Plan";
+        case "000005":
+            return pdfFileNameDateStamp + "_-_Plans_Drawing_Documents";
+        case "000006":
+            return (
+                pdfFileNameDateStamp + "_-_Additional_Plans_Drawings_Documents"
+            );
+        case "000007":
+            return pdfFileNameDateStamp + "_-_Design_and_Access_Statement";
+        case "000008":
+            return pdfFileNameDateStamp + "_-_NSB_LPA_Additional_Documents";
+        case "000009":
+            return pdfFileNameDateStamp + "_-_LPA_Correspondence";
+        case "000010":
+            return pdfFileNameDateStamp + "_-_LPA_Original_Permission";
+        case "000011":
+            return pdfFileNameDateStamp + "_-_LPA's_Registration_Letter";
+        case "000012":
+            return pdfFileNameDateStamp + "_-_Environmental_Statement";
+        case "000013":
+            return pdfFileNameDateStamp + "_-_Cost_of_Application";
+        case "000014":
+            return pdfFileNameDateStamp + "_-_Other_Relevant_Material";
+        case "000015":
+            return (
+                pdfFileNameDateStamp +
+                "_-_S106_Agreement_or_Unilateral_Undertaking"
+            );
+        default:
+            return pdfFileNameDateStamp + "_-_000000_-_";
+    }
+};
+
+const FILENAME_ALLOWED = /^[A-Za-z0-9 ._\-:()—']+$/;
+
+export const validateUploadFilename = (
+    file,
+    t,
+    invalidFilenameLabelKey = "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
+) => {
+    const name = file.name;
+
+    if (name.includes("#")) {
+        return {
+            code: "filename-invalid-chars",
+            message: `${name} ${t(invalidFilenameLabelKey)}`
+        };
+    }
+
+    if (!FILENAME_ALLOWED.test(name)) {
+        return {
+            code: "filename-invalid-chars",
+            message: `${name} ${t(invalidFilenameLabelKey)}`
+        };
+    }
+
+    if (/[<>"/\\|?*]/.test(name)) {
+        return {
+            code: "filename-invalid-chars",
+            message: `${name} ${t(invalidFilenameLabelKey)}`
+        };
+    }
+
+    return null;
+};

components/elements/helpers/translationHelpers.js

@@ -0,0 +1,36 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+
+export const getFieldTranslation = ({
+    label,
+    locale,
+    appealtypes,
+    fieldLookup
+}) => {
+    let formObj = jsonpath({
+        path: "$['" + appealtypes + "']",
+        json: fieldLookup,
+        eval: true
+    });
+
+    return locale == "cy"
+        ? jsonpath({
+              path: '$..[?(@ && @.value=="' + label + '")].value_cy',
+              json: formObj,
+              eval: true
+          })[0]
+        : label;
+};
+
+export const getPickListTranslation = ({
+    optionValue,
+    locale,
+    pickListLookup
+}) => {
+    return locale == "cy"
+        ? jsonpath({
+              path: '$..[?(@ && @.value=="' + optionValue + '")].value_cy',
+              json: pickListLookup,
+              eval: true
+          })
+        : optionValue;
+};

components/elements/index.js

@@ -42,6 +42,15 @@ const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
 import { useStore as store, useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { validateField } from "./validationUtils"; // Import the validation function
+import {
+    getDocumentTypePrefix,
+    getThumbnailIconByMimeType,
+    validateUploadFilename
+} from "./helpers/fileUploadHelpers";
+import {
+    getFieldTranslation,
+    getPickListTranslation
+} from "./helpers/translationHelpers";
 
 const RenderTextfield = ({
     id,
@@ -1876,41 +1885,20 @@ export const FieldsTranslations = (label) => {
     const { locale } = router;
     const { appealtypes } = router.query;
 
-    let formObj = jsonpath({
+    return getFieldTranslation({
-        path: "$['" + appealtypes + "']",
+        label,
-        json: fieldLookup,
+        locale,
-        eval: true
+        appealtypes,
+        fieldLookup
     });
-
-    let labelTrans =
-        router.locale == "cy"
-            ? jsonpath({
-                  path: '$..[?(@ && @.value=="' + label + '")].value_cy',
-                  json: formObj,
-                  eval: true
-              })[0]
-            : label;
-
-    //labelTrans = labelTrans.length > 1 ? labelTrans[0] : labelTrans;
-
-    return labelTrans;
 };
 
 const PickListTranslations = (optionValue) => {
     const router = useRouter();
     const { locale } = router;
     const { appealtypes } = router.query;
-    //console.log(optionValue);
+
-    let optionTrans =
+    return getPickListTranslation({ optionValue, locale, pickListLookup });
-        router.locale == "cy"
-            ? jsonpath({
-                  path: '$..[?(@ && @.value=="' + optionValue + '")].value_cy',
-                  json: pickListLookup,
-                  eval: true
-              })
-            : optionValue;
-    //console.log(optionTrans, optionValue);
-    return optionTrans;
 };
 
 export function FileUploadField(props) {
@@ -1999,111 +1987,6 @@ const RenderFileUpload = (field) => {
         </div>
     ));
 
-    const getThumbnailIcon = (fileObj, fileType) => {
-        switch (fileType) {
-            case "text/html":
-                return "/assets/images/documenttypes/html.png";
-                break;
-            case "text/plain":
-                return "/assets/images/documenttypes/txt.png";
-                break;
-            case "application/msword":
-                return "/assets/images/documenttypes/doc.png";
-                break;
-            case "application/pdf":
-                return "/assets/images/documenttypes/pdf.png";
-                break;
-            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-                return "/assets/images/documenttypes/docx.png";
-                break;
-            case "text/csv":
-                return "/assets/images/documenttypes/csv.png";
-                break;
-            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-                return "/assets/images/documenttypes/xlsx.png";
-                break;
-            case "image/jpeg":
-                return "/assets/images/documenttypes/jpg.png";
-            case "image/png":
-                return "/assets/images/documenttypes/png.png";
-                //return URL.createObjectURL(fileObj);
-                break;
-            default:
-                return "/assets/images/documenttypes/default.png";
-                break;
-        }
-    };
-
-    const getDocumentType = (docCode) => {
-        const repDate = new Date();
-
-        let day = repDate.getDate();
-        let month = repDate.getMonth() + 1;
-        let year = repDate.getFullYear();
-
-        const pdfFileNameDateStamp =
-            year + "-" + ("0" + month).slice(-2) + "-" + ("0" + day).slice(-2);
-
-        switch (docCode) {
-            case "000000":
-                return pdfFileNameDateStamp + "_-_Statement_of_Case";
-            case "000001":
-                return pdfFileNameDateStamp + "_-_Application_Form";
-                break;
-            case "000002":
-                return pdfFileNameDateStamp + "_-_Site_Ownership_Certificate";
-                break;
-            case "000003":
-                return pdfFileNameDateStamp + "_-_Decision_Notice";
-                break;
-            case "000004":
-                return pdfFileNameDateStamp + "_-_Site_Location_Plan";
-                break;
-            case "000005":
-                return pdfFileNameDateStamp + "_-_Plans_Drawing_Documents";
-                break;
-            case "000006":
-                return (
-                    pdfFileNameDateStamp +
-                    "_-_Additional_Plans_Drawings_Documents"
-                );
-                break;
-            case "000007":
-                return pdfFileNameDateStamp + "_-_Design_and_Access_Statement";
-                break;
-            case "000008":
-                return pdfFileNameDateStamp + "_-_NSB_LPA_Additional_Documents";
-                break;
-            case "000009":
-                return pdfFileNameDateStamp + "_-_LPA_Correspondence";
-                break;
-            case "000010":
-                return pdfFileNameDateStamp + "_-_LPA_Original_Permission";
-                break;
-            case "000011":
-                return pdfFileNameDateStamp + "_-_LPA's_Registration_Letter";
-                break;
-            case "000012":
-                return pdfFileNameDateStamp + "_-_Environmental_Statement";
-                break;
-            case "000013":
-                return pdfFileNameDateStamp + "_-_Cost_of_Application";
-                break;
-            case "000014":
-                return pdfFileNameDateStamp + "_-_Other_Relevant_Material";
-                break;
-            case "000015":
-                return (
-                    pdfFileNameDateStamp +
-                    "_-_S106_Agreement_or_Unilateral_Undertaking"
-                );
-                break;
-
-            default:
-                return pdfFileNameDateStamp + "_-_000000_-_";
-        }
-    };
-
     const filelistObj = field.fileList || {};
 
     const blobList = jsonpath({
@@ -2187,43 +2070,6 @@ const RenderFileUpload = (field) => {
         setRejectedFiles([]); // Clear any previously rejected file errorsss
     };
 
-    const FILENAME_ALLOWED = /^[A-Za-z0-9 ._\-:()—']+$/;
-
-    const validateFilename = (file, t) => {
-        const name = file.name;
-
-        // block #
-        if (name.includes("#")) {
-            return {
-                code: "filename-invalid-chars",
-                message: `${name} ${t(
-                    "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
-                )}`
-            };
-        }
-
-        if (!FILENAME_ALLOWED.test(name)) {
-            return {
-                code: "filename-invalid-chars",
-                message: `${name} ${t(
-                    "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
-                )}`
-            };
-        }
-
-        // block characters < >  " / \ | ? *
-        if (/[<>"/\\|?*]/.test(name)) {
-            return {
-                code: "filename-invalid-chars",
-                message: `${name} ${t(
-                    "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
-                )}`
-            };
-        }
-
-        return null; // valid
-    };
-
     return (
         <>
             <Dropzone
@@ -2240,7 +2086,7 @@ const RenderFileUpload = (field) => {
                     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                         [".xlsx"]
                 }}
-                validator={(file) => validateFilename(file, t)}
+                validator={(file) => validateUploadFilename(file, t)}
                 onDrop={(acceptedFiles, fileRejections, e) => {
                     // build + display rejected messages (ALWAYS, even if some accepted)
                     if (fileRejections?.length) {
@@ -2266,7 +2112,7 @@ const RenderFileUpload = (field) => {
                         (file) =>
                             new File(
                                 [file],
-                                `${getDocumentType(field.documentTypeCode)}_-_${
+                                `${getDocumentTypePrefix(field.documentTypeCode)}_-_${
                                     file.name
                                 }`,
                                 { type: file.type }
@@ -2434,8 +2280,7 @@ const RenderFileUpload = (field) => {
                                             &minus;
                                         </span> */}
                                         <img
-                                            src={getThumbnailIcon(
+                                            src={getThumbnailIconByMimeType(
-                                                file,
                                                 file.type
                                             )}
                                             alt={file.name}

memory-bank/change-log.md

@@ -18,6 +18,40 @@ Follow-ups:
 
 ---
 
+### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
+
+date: 2026-04-07  
+author: Cline  
+scope: `components/elements/index.js`, `components/elements/helpers/fileUploadHelpers.js`, `components/elements/helpers/translationHelpers.js`, `memory-bank/refactor-backlog.md`  
+type: change  
+rationale: Execute Phase 1 of the approved `components/elements/index.js` decomposition plan by extracting pure helper logic only, reducing monolith coupling while preserving UI/component behavior.  
+impact: No route/API contract changes; refactor-only extraction of translation/file-upload helper functions with expected behavior parity for EN/CY field labels, file naming, thumbnail icon mapping, and filename validation.  
+status: completed
+
+Summary:
+
+- Created work branch from `origin/SIPS-Development`: `22500-elements-index-phase1`.
+- Added helper modules:
+    - `components/elements/helpers/fileUploadHelpers.js`
+        - `getThumbnailIconByMimeType`
+        - `getDocumentTypePrefix`
+        - `validateUploadFilename`
+    - `components/elements/helpers/translationHelpers.js`
+        - `getFieldTranslation`
+        - `getPickListTranslation`
+- Updated `components/elements/index.js` to consume these helpers and removed duplicated inline helper implementations.
+- Kept field renderer/component placement and external prop contracts unchanged (Phase 1 non-goals respected).
+- Updated `memory-bank/refactor-backlog.md` with a phased Priority 6 track and Phase 1 guardrail-aligned acceptance criteria.
+
+Validation:
+
+- `npx eslint components/elements/index.js components/elements/helpers/fileUploadHelpers.js components/elements/helpers/translationHelpers.js` -> pass
+
+Follow-ups:
+
+- Phase 2: extract low-risk leaf field renderer components from `components/elements/index.js` in bounded slices.
+- Perform manual EN/CY + a11y smoke matrix on new appeal/myportal form journeys before merge.
+
 ### CL-001: TASK22211 endpoint search-document contract consistency slice
 
 date: 2026-03-23  

memory-bank/refactor-backlog.md

@@ -65,6 +65,59 @@ Last updated: 2026-03-12
     3. hash utility behavior
     4. locale rewrite mapping sanity checks
 
+## Priority 6 — Decompose `components/elements/index.js` monolith (phased)
+
+- **Problem:** `components/elements/index.js` has grown into a high-coupling UI monolith (~2700+ LOC) combining field primitives, validation/conditional logic, translation helpers, file-upload orchestration, and field-array behavior.
+- **Why it matters:** Very high regression surface for new appeal/my portal forms, slower change velocity, and poor testability/isolation.
+- **Target outcome:** `components/elements/index.js` reduced to a thin barrel export with responsibility split into focused modules.
+- **Context alignment:** Matches architecture direction in `context/architecture.md` (endpoint/component sprawl reduction, bounded slices) and file boundary guidance in `context/coding-conventions.md` (`pages` thin, reusable logic/components split by concern).
+- **Guardrail constraints:**
+    - Preserve public-service reliability for core flows (`search`, `case`, `myportal`, `newappeal`).
+    - No auth/session/security header behavior changes (out of scope).
+    - Maintain EN/CY parity for user-facing behavior.
+    - Keep accessibility behavior unchanged (labels, focus, keyboard flow, errors).
+
+### Priority 6 — Phase 1 (start here): extract pure helpers only
+
+- **Scope (Phase 1 only):**
+    - Move pure/helper logic from `components/elements/index.js` into focused helper modules under `components/elements/` (or `components/elements/helpers/`) without behavior change.
+    - Candidate helper extraction set:
+        - translation helpers (`FieldsTranslations`, picklist translation helper)
+        - file upload helper utilities (icon/doc type naming/pure format helpers)
+        - other deterministic pure functions used by field renderers
+    - Keep all field renderers/components in place for Phase 1.
+- **Non-goals (Phase 1):**
+    - No JSX component relocation yet.
+    - No upload flow logic rewrites.
+    - No validation rule behavior changes.
+    - No prop contract changes for existing consumers.
+
+- **Acceptance criteria (Phase 1):**
+    - `components/elements/index.js` imports extracted helpers from new helper modules and behavior remains equivalent.
+    - No route/API changes.
+    - Existing new appeal + myportal form journeys continue to function in EN and CY.
+    - Accessibility smoke unchanged for touched form controls (label association, keyboard reachability, inline error visibility).
+    - Lint passes for touched files.
+
+- **Validation matrix (minimum):**
+    1. `npm run lint`
+    2. Manual smoke:
+        - new appeal form step rendering + validation messages
+        - myportal representation/new appeal editing flow controls
+        - file upload field icon/name behavior unchanged
+    3. Locale parity checks (EN/CY) for touched user-facing labels/routes.
+    4. A11y smoke checks on touched fields (focus, labels, errors).
+
+- **Rollback plan (Phase 1):**
+    - Revert helper module extraction commit(s) to restore single-file implementation.
+    - No migration/data rollback required.
+
+- **Next phases (for tracking):**
+    - **Phase 2:** extract low-risk leaf field renderer components.
+    - **Phase 3:** extract `RenderFileUpload` and upload container.
+    - **Phase 4:** extract field-array/repeater components.
+    - **Phase 5:** finalize `components/elements/index.js` as barrel-only export.
+
 ## Sequencing recommendation
 
 1. Priorities 2 + 4 (security/integrity foundation)