@ukhomeoffice/formio-gds-template 2.0.2 → 3.0.0-alpha

package/src/components/selectboxes/GDSCheckBoxes.ts

@@ -1,20 +1,19 @@
-import {Components} from 'formiojs';
+import { Components } from '@formio/js';
+import { SelectBoxesComponent } from '../../types';
+
 const Field = Components.components.field;
 const SelectBoxes = Components.components.selectboxes;
 
 export default class GDSCheckBoxes extends SelectBoxes {
-    public render() {
-         // @ts-ignore
+    // Narrow the inherited `component: any` using the @formio/core SelectBoxesComponent schema.
+    declare component: SelectBoxesComponent;
+
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('selectboxes', {
-            // @ts-ignore
             input: this.inputInfo,
-            // @ts-ignore
             inline: this.component.inline,
-            // @ts-ignore
             values: this.component.values,
-            // @ts-ignore
             value: this.dataValue,
-            // @ts-ignore
             row: this.row,
         }));
     }

package/src/components/time/GDSTimeComponent.ts

@@ -1,23 +1,31 @@
-import {Components} from 'formiojs';
+import { Components } from '@formio/js';
 import moment from 'moment';
 import TimeHelper from '../util/TimeHelper';
+import { CoreTimeComponent } from '../../types';
 
 const Field = Components.components.field;
 const Time = Components.components.time;
 
-// @ts-ignore
 export default class GDSTimeComponent extends Time {
     public static MAX_LENGTH = 2;
 
-    private refs: any;
-    private component: any;
-    private loadRefs: any;
-    private checkComponentValidity: any;
-    private updateValue: any;
+    // Narrow the inherited `component: any` using the @formio/core TimeComponent schema.
+    declare component: CoreTimeComponent;
+
+    // Narrow `refs: {}` to the specific refs loaded by this component.
+    declare refs: {
+        hour: HTMLInputElement;
+        minute: HTMLInputElement;
+    };
+
+    // Narrow `data: any` to a typed record.
+    declare data: Record<string, unknown>;
 
     private timeHelper: TimeHelper = new TimeHelper();
 
-    public attach(element) {
+    // element typed as `any` to match the base component attach(element: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public attach(element: any): Promise<void> {
         this.loadRefs(element, {
             hour: 'single',
             minute: 'single',
@@ -27,47 +35,48 @@ export default class GDSTimeComponent extends Time {
             this.timeHelper.checkAndValidateHour(this.refs.hour);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
         this.addEventListener(this.refs.minute, 'input', () => {
             this.timeHelper.checkAndValidateMinutes(this.refs.minute);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
-        this.addEventListener(this.refs.hour, 'keypress', (evt) => {
+        this.addEventListener(this.refs.hour, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
 
-        this.addEventListener(this.refs.minute, 'keypress', (evt) => {
+        this.addEventListener(this.refs.minute, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
+
         return super.attach(element);
     }
 
-    public setErrorClasses(elements, dirty, hasError) {
-        // @ts-ignore
-        super.setErrorClasses( [this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
+    // elements typed as `any` to match the base Day.setErrorClasses(elements: any, ...) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setErrorClasses(elements: any, dirty: any, hasError: any): void {
+        super.setErrorClasses([this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
     }
 
-    // @ts-ignore
-    public addInputError(message: any, dirty: boolean, element: any): void {
-        // @ts-ignore
+    // message/dirty/element typed as `any` to match the base Component.addInputError(message: any, dirty: any, elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public addInputError(message: any, dirty: any, element: any): void {
         super.addInputError(message, dirty, [this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.addInputError(message, dirty, element);
     }
 
-    public removeInputError(elements) {
-        // @ts-ignore
+    // elements typed as `any` to match the base Component.removeInputError(elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public removeInputError(elements: any): void {
         super.removeInputError([this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.removeInputError(elements);
     }
 
-    public getValue() {
+    public getValue(): string {
         if (!this.refs.hour.value || !this.refs.minute.value) {
             return '';
         }
@@ -75,10 +84,11 @@ export default class GDSTimeComponent extends Time {
         return moment(value, this.component.format).format(this.component.dataFormat);
     }
 
-    public setValue(value: any, flags: any) {
-
+    // value/flags typed as `any` to match the base Component.setValue(value: any, flags: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setValue(value: any, _flags: any): boolean {
         if (this.refs.hour && this.refs.minute && value) {
-            const parts = value.split(':');
+            const parts = (value as string).split(':');
             this.refs.hour.value = parts[0];
             this.refs.minute.value = parts[1];
             return true;
@@ -86,7 +96,7 @@ export default class GDSTimeComponent extends Time {
         return false;
     }
 
-    public render() {
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('time', {
             hour: super.getValue().split(':')[0],
             minute: super.getValue().split(':')[1],

package/src/components/util/TimeHelper.ts

@@ -1,8 +1,10 @@
+import { InputElementLike } from '../../types';
+
 export default class TimeHelper {
 
     public static MAX_LENGTH = 2;
 
-    public checkAndValidateMinutes(element: any): void {
+    public checkAndValidateMinutes(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -17,8 +19,7 @@ export default class TimeHelper {
         }
     }
 
-    public checkAndValidateHour(element: any): void {
-
+    public checkAndValidateHour(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -34,13 +35,13 @@ export default class TimeHelper {
         }
     }
 
-    public preventNonNumericKeyPress(evt: any) {
+    public preventNonNumericKeyPress(evt: KeyboardEvent): void {
         if (evt.which !== 8 && evt.which !== 0 && evt.which < 48 || evt.which > 57) {
             evt.preventDefault();
         }
     }
 
-    validateDateInput(element: any, length: number) {
+    public validateDateInput(element: InputElementLike, length: number): void {
         if (element.value && element.value.length > length) {
             element.value = element.value.slice(0, length);
         }

package/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const content: string;
+    export default content;
+}

package/src/templates/gds/iconClass.ts

@@ -1,4 +1,4 @@
-export default (iconset, name, spinning) => {
+export default (iconset: string, name: string, spinning: boolean): string => {
     if (iconset === 'fa') {
         switch (name) {
             case 'save':

package/src/templates/gds/index.ts

@@ -31,46 +31,56 @@ import wizard from './wizard';
 import wizardHeader from './wizardHeader';
 import wizardNav from './wizardNav';
 
+// Unwrap CJS default exports to handle ESM/CJS interop in Vite.
+// Uses a generic so the return type matches the input type — no `any` needed.
+const unwrap = <T>(mod: T | { default: T }): T =>
+    (mod !== null && typeof mod === 'object' && 'default' in (mod as object))
+        ? (mod as { default: T }).default
+        : (mod as T);
+
 export default {
-    transform(type, text) {
+    transform(type: string, text: string) {
         if (!text) {
             return text;
         }
         if (type === 'class') {
-            return this.cssClasses.hasOwnProperty(text.toString()) ? this.cssClasses[text.toString()] : text;
+            const key = text.toString();
+            return Object.prototype.hasOwnProperty.call(this.cssClasses, key)
+                ? this.cssClasses[key as keyof typeof this.cssClasses]
+                : text;
         }
         return text;
     },
     defaultIconset: 'fa',
-    iconClass,
-    cssClasses,
-    button,
-    checkbox,
-    columns,
-    component,
-    container,
-    datetime,
-    day,
-    datagrid,
-    datamap,
-    input,
-    editgrid,
-    field,
-    file,
-    fieldset,
-    label,
-    message,
-    panel,
-    radio,
-    select,
-    selectboxes,
-    selectOption,
-    survey,
-    table,
-    tab,
-    time,
-    warning,
-    wizard,
-    wizardHeader,
-    wizardNav,
+    iconClass: unwrap(iconClass),
+    cssClasses: unwrap(cssClasses),
+    button: unwrap(button),
+    checkbox: unwrap(checkbox),
+    columns: unwrap(columns),
+    component: unwrap(component),
+    container: unwrap(container),
+    datetime: unwrap(datetime),
+    day: unwrap(day),
+    datagrid: unwrap(datagrid),
+    datamap: unwrap(datamap),
+    input: unwrap(input),
+    editgrid: unwrap(editgrid),
+    field: unwrap(field),
+    file: unwrap(file),
+    fieldset: unwrap(fieldset),
+    label: unwrap(label),
+    message: unwrap(message),
+    panel: unwrap(panel),
+    radio: unwrap(radio),
+    select: unwrap(select),
+    selectboxes: unwrap(selectboxes),
+    selectOption: unwrap(selectOption),
+    survey: unwrap(survey),
+    table: unwrap(table),
+    tab: unwrap(tab),
+    time: unwrap(time),
+    warning: unwrap(warning),
+    wizard: unwrap(wizard),
+    wizardHeader: unwrap(wizardHeader),
+    wizardNav: unwrap(wizardNav),
 };

package/src/templates/gds/template.scss

@@ -82,6 +82,25 @@
 
 .govuk-details {
   margin-bottom: 0 !important;
+
+  // govuk-frontend@5.x sets font-weight:bold on the summary — reset to normal
+  &__summary {
+    font-weight: 400 !important;
+  }
+}
+
+// @formio/js@5.x injects error messages into messageContainer on container components
+// (datagrid, editgrid, datamap, panel) which causes double error messages since child
+// components already show their own errors. Hide the outer messageContainer for these types.
+.formio-component-datagrid,
+.formio-component-editgrid,
+.formio-component-datamap,
+.formio-component-panel,
+.formio-component-container,
+.formio-component-fieldset {
+  > [ref="messageContainer"] {
+    display: none;
+  }
 }
 
 .small-button {
@@ -144,4 +163,14 @@
 
 .govuk-select.auto-height {
   height: auto;
-}
+}
+
+// govuk-frontend@5.4+ sets overflow:clip (with auto visible fallback) on
+// .govuk-form-group--error to contain the error border. This clips the focus
+// rings and left borders of nested formio child components. Reset it so
+// nested form groups are never clipped.
+.govuk-form-group--error {
+  .govuk-form-group {
+    overflow: visible;
+  }
+}

package/src/types.ts

@@ -0,0 +1,55 @@
+import type {
+    DayComponent,
+    DateTimeComponent,
+    TimeComponent as CoreTimeComponent,
+    SelectBoxesComponent,
+    DataMapComponent,
+} from '@formio/core';
+
+/**
+ * Minimal interface for DOM input-like elements.
+ * Used as the typed parameter in TimeHelper methods so callers can pass any
+ * object that has a writable `.value: string` (e.g. HTMLInputElement).
+ */
+export interface InputElementLike {
+    value: string;
+}
+
+/**
+ * The shape of a single GDS date/time field definition.
+ * Extends the base formio field definition with an optional placeholder.
+ */
+export type GDSFieldDefinition = {
+    type?: string;
+    placeholder?: string;
+    required?: boolean;
+};
+
+/**
+ * Component schema for GDSDatetimeComponent.
+ *
+ * GDSDatetimeComponent extends the formio Day component but adds hour/minute
+ * fields (from a datetime hybrid) and uses datePicker / defaultDate from
+ * DateTimeComponent. This type captures the full shape of `this.component`
+ * as used in GDSDatetimeComponent.
+ */
+export type GDSDatetimeComponentSchema =
+    // Omit `suffix` from the base so our wider `string | null` declaration wins
+    // the intersection (BaseComponent declares `suffix?: string`, which would
+    // collapse `string | null` back to `string` in a plain &-intersection).
+    // Also omit `fields` so we can extend it with hour/minute below.
+    Omit<DayComponent, 'suffix' | 'fields'> &
+    Pick<DateTimeComponent, 'datePicker' | 'defaultDate'> & {
+        /** suffix is set to null in init() — null must be allowed */
+        suffix?: string | null;
+        /** fields extended with GDS hour/minute additions */
+        fields: DayComponent['fields'] & {
+            hour?: GDSFieldDefinition;
+            minute?: GDSFieldDefinition;
+        };
+    };
+
+// Re-export @formio/core schema types used as `declare component` overrides
+// in each GDS component class. Aliased to avoid colliding with the @formio/js
+// runtime class variables (e.g. `const Time = Components.components.time`).
+export type { CoreTimeComponent, SelectBoxesComponent, DataMapComponent };

package/tsconfig.json

@@ -1,10 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
+    "target": "es2018",
+    "lib": ["es2018", "dom"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "preserveConstEnums": true,
     "outDir": "lib",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
     "sourceMap": false,
     "declaration": true,
     "rootDir": "src",

package/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
         filename: 'gds.js',
     },
     externals: {
-        formiojs: 'Formio'
+        '@formio/js': 'Formio'
     },
     module: {
         rules: [

package/tslint.json

@@ -1,22 +0,0 @@
-{
-    "defaultSeverity": "error",
-    "extends": [
-        "tslint:recommended"
-    ],
-    "jsRules": {},
-    "rules": {
-        "quotemark": [true, "single", "avoid-escape", "avoid-template"],
-        "one-line": [false, "check-catch", "check-finally", "check-else"],
-        "object-literal-sort-keys": false,
-        "no-shadowed-variable": false,
-        "variable-name": {
-            "options": [
-                "allow-leading-underscore",
-                "allow-pascal-case",
-                "ban-keywords"
-            ]
-        },
-        "max-classes-per-file": [false]
-    },
-    "rulesDirectory": []
-}