@genspectrum/dashboard-components 0.8.5 → 0.9.0

package/dist/util.d.ts

@@ -0,0 +1,301 @@
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export declare type DateRangeOption = {
+    /** The label of the date range option that will be shown to the user */
+    label: string;
+    /**
+     * The start date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the `earliestDate` property.
+     */
+    dateFrom?: string;
+    /**
+     * The end date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the current date.
+     */
+    dateTo?: string;
+};
+
+export declare class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
+    constructor(detail: DateRangeSelectOption);
+}
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export declare const dateRangeOptionPresets: {
+    last2Weeks: {
+        label: string;
+        dateFrom: string;
+    };
+    lastMonth: {
+        label: string;
+        dateFrom: string;
+    };
+    last2Months: {
+        label: string;
+        dateFrom: string;
+    };
+    last3Months: {
+        label: string;
+        dateFrom: string;
+    };
+    last6Months: {
+        label: string;
+        dateFrom: string;
+    };
+    lastYear: {
+        label: string;
+        dateFrom: string;
+    };
+    allTimes: {
+        label: string;
+    };
+};
+
+export declare type DateRangeSelectOption = string | {
+    dateFrom: string;
+    dateTo: string;
+};
+
+export { }
+
+
+declare global {
+    interface HTMLElementEventMap {
+        'gs-error': ErrorEvent;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-app': App;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-comparison-component': MutationComparisonComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutations-component': MutationsComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-aggregate-component': AggregateComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutations-over-time': MutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare module 'chart.js' {
+    interface CartesianScaleTypeRegistry {
+        logit: {
+            options: CoreScaleOptions;
+        };
+    }
+}

package/dist/util.js

@@ -0,0 +1,6 @@
+import { D, d } from "./utilEntrypoint-g4DsyhU7.js";
+export {
+  D as DateRangeOptionChangedEvent,
+  d as dateRangeOptionPresets
+};
+//# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utilEntrypoint-g4DsyhU7.js

@@ -0,0 +1,61 @@
+const toYYYYMMDD = (date) => {
+  const options = { year: "numeric", month: "2-digit", day: "2-digit" };
+  return date.toLocaleDateString("en-CA", options);
+};
+class DateRangeOptionChangedEvent extends CustomEvent {
+  constructor(detail) {
+    super("gs-date-range-option-changed", {
+      detail,
+      bubbles: true,
+      composed: true
+    });
+  }
+}
+const today = /* @__PURE__ */ new Date();
+const twoWeeksAgo = /* @__PURE__ */ new Date();
+twoWeeksAgo.setDate(today.getDate() - 14);
+const lastMonth = new Date(today);
+lastMonth.setMonth(today.getMonth() - 1);
+const last2Months = new Date(today);
+last2Months.setMonth(today.getMonth() - 2);
+const last3Months = new Date(today);
+last3Months.setMonth(today.getMonth() - 3);
+const last6Months = new Date(today);
+last6Months.setMonth(today.getMonth() - 6);
+const lastYear = new Date(today);
+lastYear.setFullYear(today.getFullYear() - 1);
+const dateRangeOptionPresets = {
+  last2Weeks: {
+    label: "Last 2 weeks",
+    dateFrom: toYYYYMMDD(twoWeeksAgo)
+  },
+  lastMonth: {
+    label: "Last month",
+    dateFrom: toYYYYMMDD(lastMonth)
+  },
+  last2Months: {
+    label: "Last 2 months",
+    dateFrom: toYYYYMMDD(last2Months)
+  },
+  last3Months: {
+    label: "Last 3 months",
+    dateFrom: toYYYYMMDD(last3Months)
+  },
+  last6Months: {
+    label: "Last 6 months",
+    dateFrom: toYYYYMMDD(last6Months)
+  },
+  lastYear: {
+    label: "Last year",
+    dateFrom: toYYYYMMDD(lastYear)
+  },
+  allTimes: {
+    label: "All times"
+  }
+};
+export {
+  DateRangeOptionChangedEvent as D,
+  dateRangeOptionPresets as d,
+  toYYYYMMDD as t
+};
+//# sourceMappingURL=utilEntrypoint-g4DsyhU7.js.map

package/dist/utilEntrypoint-g4DsyhU7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilEntrypoint-g4DsyhU7.js","sources":["../src/preact/dateRangeSelector/dateConversion.ts","../src/preact/dateRangeSelector/dateRangeOption.ts"],"sourcesContent":["export const toYYYYMMDD = (date: Date) => {\n    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return date.toLocaleDateString('en-CA', options);\n};\n","import { toYYYYMMDD } from './dateConversion';\n\n/**\n * A date range option that can be used in the `gs-date-range-selector` component.\n */\nexport type DateRangeOption = {\n    /** The label of the date range option that will be shown to the user */\n    label: string;\n    /**\n     * The start date of the date range in the format `YYYY-MM-DD`.\n     * If not set, the date range selector will default to the `earliestDate` property.\n     */\n    dateFrom?: string;\n    /**\n     * The end date of the date range in the format `YYYY-MM-DD`.\n     * If not set, the date range selector will default to the current date.\n     */\n    dateTo?: string;\n};\n\nexport type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {\n    constructor(detail: DateRangeSelectOption) {\n        super('gs-date-range-option-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\nconst today = new Date();\n\nconst twoWeeksAgo = new Date();\ntwoWeeksAgo.setDate(today.getDate() - 14);\n\nconst lastMonth = new Date(today);\nlastMonth.setMonth(today.getMonth() - 1);\n\nconst last2Months = new Date(today);\nlast2Months.setMonth(today.getMonth() - 2);\n\nconst last3Months = new Date(today);\nlast3Months.setMonth(today.getMonth() - 3);\n\nconst last6Months = new Date(today);\nlast6Months.setMonth(today.getMonth() - 6);\n\nconst lastYear = new Date(today);\nlastYear.setFullYear(today.getFullYear() - 1);\n\n/**\n * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.\n */\nexport const dateRangeOptionPresets = {\n    last2Weeks: {\n        label: 'Last 2 weeks',\n        dateFrom: toYYYYMMDD(twoWeeksAgo),\n    },\n    lastMonth: {\n        label: 'Last month',\n        dateFrom: toYYYYMMDD(lastMonth),\n    },\n    last2Months: {\n        label: 'Last 2 months',\n        dateFrom: toYYYYMMDD(last2Months),\n    },\n    last3Months: {\n        label: 'Last 3 months',\n        dateFrom: toYYYYMMDD(last3Months),\n    },\n    last6Months: {\n        label: 'Last 6 months',\n        dateFrom: toYYYYMMDD(last6Months),\n    },\n    lastYear: {\n        label: 'Last year',\n        dateFrom: toYYYYMMDD(lastYear),\n    },\n    allTimes: {\n        label: 'All times',\n    },\n} satisfies Record<string, DateRangeOption>;\n"],"names":[],"mappings":"AAAa,MAAA,aAAa,CAAC,SAAe;AACtC,QAAM,UAAsC,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK;AAC/E,SAAA,KAAK,mBAAmB,SAAS,OAAO;AACnD;ACkBO,MAAM,oCAAoC,YAAmC;AAAA,EAChF,YAAY,QAA+B;AACvC,UAAM,gCAAgC;AAAA,MAClC;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACb;AAAA,EACL;AACJ;AAEA,MAAM,4BAAY;AAElB,MAAM,kCAAkB;AACxB,YAAY,QAAQ,MAAM,QAAQ,IAAI,EAAE;AAExC,MAAM,YAAY,IAAI,KAAK,KAAK;AAChC,UAAU,SAAS,MAAM,SAAS,IAAI,CAAC;AAEvC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,cAAc,IAAI,KAAK,KAAK;AAClC,YAAY,SAAS,MAAM,SAAS,IAAI,CAAC;AAEzC,MAAM,WAAW,IAAI,KAAK,KAAK;AAC/B,SAAS,YAAY,MAAM,YAAY,IAAI,CAAC;AAKrC,MAAM,yBAAyB;AAAA,EAClC,YAAY;AAAA,IACR,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,IACP,OAAO;AAAA,IACP,UAAU,WAAW,SAAS;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,aAAa;AAAA,IACT,OAAO;AAAA,IACP,UAAU,WAAW,WAAW;AAAA,EACpC;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,IACP,UAAU,WAAW,QAAQ;AAAA,EACjC;AAAA,EACA,UAAU;AAAA,IACN,OAAO;AAAA,EACX;AACJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.8.5",
+    "version": "0.9.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -27,10 +27,15 @@
         ]
     },
     "exports": {
-        ".": {
-            "import": "./dist/dashboard-components.js",
-            "require": "./dist/dashboard-components.js",
-            "types": "./dist/genspectrum-components.d.ts"
+        "./components": {
+            "import": "./dist/components.js",
+            "require": "./dist/components.js",
+            "types": "./dist/components.d.ts"
+        },
+        "./util": {
+            "import": "./dist/util.js",
+            "require": "./dist/util.js",
+            "types": "./dist/util.d.ts"
         },
         "./custom-elements.json": "./custom-elements.json",
         "./package.json": "./package.json",

package/src/{index.ts → componentsEntrypoint.ts}

@@ -1,7 +1,6 @@
 export * from './web-components';
 
 export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
-export { type DateRangeOption, dateRangeOptionPresets } from './preact/dateRangeSelector/dateRangeOption';
 
 declare global {
     interface HTMLElementEventMap {

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -1,5 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import type { StepFunction } from '@storybook/types';
 import dayjs from 'dayjs/esm';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
@@ -10,12 +11,18 @@ import { dateRangeOptionPresets } from './dateRangeOption';
 
 const earliestDate = '1970-01-01';
 
+const customDateRange = {
+    label: 'CustomDateRange',
+    dateFrom: '2021-01-01',
+    dateTo: '2021-12-31',
+};
+
 const meta: Meta<DateRangeSelectorProps> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
         actions: {
-            handles: ['gs-date-range-changed', ...previewHandles],
+            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -43,15 +50,7 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
     },
     args: {
-        dateRangeOptions: [
-            dateRangeOptionPresets.lastMonth,
-            dateRangeOptionPresets.allTimes,
-            {
-                label: 'CustomDateRange',
-                dateFrom: '2021-01-01',
-                dateTo: '2021-12-31',
-            },
-        ],
+        dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
@@ -88,14 +87,10 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        const dateFrom = () => canvas.getByPlaceholderText('Date from');
-        const dateTo = () => canvas.getByPlaceholderText('Date to');
-        const selectField = () => canvas.getByRole('combobox');
-
         await waitFor(() => {
-            expect(selectField()).toHaveValue('CustomDateRange');
-            expect(dateFrom()).toHaveValue('2021-01-01');
-            expect(dateTo()).toHaveValue('2021-12-31');
+            expect(selectField(canvas)).toHaveValue('CustomDateRange');
+            expect(dateFromPicker(canvas)).toHaveValue('2021-01-01');
+            expect(dateToPicker(canvas)).toHaveValue('2021-12-31');
         });
     },
 };
@@ -111,14 +106,10 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        const dateFrom = () => canvas.getByPlaceholderText('Date from');
-        const dateTo = () => canvas.getByPlaceholderText('Date to');
-        const selectField = () => canvas.getByRole('combobox');
-
         await waitFor(() => {
-            expect(selectField()).toHaveValue('Custom');
-            expect(dateFrom()).toHaveValue(initialDateFrom);
-            expect(dateTo()).toHaveValue(dayjs().format('YYYY-MM-DD'));
+            expect(selectField(canvas)).toHaveValue('Custom');
+            expect(dateFromPicker(canvas)).toHaveValue(initialDateFrom);
+            expect(dateToPicker(canvas)).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
     },
 };
@@ -134,37 +125,83 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        const dateFrom = () => canvas.getByPlaceholderText('Date from');
-        const dateTo = () => canvas.getByPlaceholderText('Date to');
-        const selectField = () => canvas.getByRole('combobox');
-
         await waitFor(() => {
-            expect(selectField()).toHaveValue('Custom');
-            expect(dateFrom()).toHaveValue(earliestDate);
-            expect(dateTo()).toHaveValue(initialDateTo);
+            expect(selectField(canvas)).toHaveValue('Custom');
+            expect(dateFromPicker(canvas)).toHaveValue(earliestDate);
+            expect(dateToPicker(canvas)).toHaveValue(initialDateTo);
         });
     },
 };
 
 export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        const dateFrom = () => canvas.getByPlaceholderText('Date from');
-        const dateTo = () => canvas.getByPlaceholderText('Date to');
-        const selectField = () => canvas.getByRole('combobox');
+    play: async ({ canvasElement, step }) => {
+        const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue('Last month');
+            expect(selectField(canvas)).toHaveValue('Last month');
         });
 
-        await userEvent.type(dateFrom(), '{backspace>12}');
-        await userEvent.type(dateFrom(), '2000-01-01');
-        await userEvent.click(dateTo());
+        step('Change date to custom value', async () => {
+            await userEvent.type(dateFromPicker(canvas), '{backspace>12}');
+            await userEvent.type(dateFromPicker(canvas), '2000-01-01');
+            await userEvent.click(dateToPicker(canvas));
+
+            await waitFor(() => {
+                expect(selectField(canvas)).toHaveValue('Custom');
+            });
+
+            await expect(filterChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        aDateColumnFrom: '2000-01-01',
+                        aDateColumnTo: dayjs().format('YYYY-MM-DD'),
+                    },
+                }),
+            );
+
+            await expect(optionChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        dateFrom: '2000-01-01',
+                        dateTo: dayjs().format('YYYY-MM-DD'),
+                    },
+                }),
+            );
+        });
+    },
+};
+
+export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    play: async ({ canvasElement, step }) => {
+        const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue('Custom');
+            expect(selectField(canvas)).toHaveValue('Last month');
+        });
+
+        step('Change date to custom', async () => {
+            await userEvent.selectOptions(selectField(canvas), 'CustomDateRange');
+
+            await waitFor(() => {
+                expect(selectField(canvas)).toHaveValue('CustomDateRange');
+            });
+
+            await expect(filterChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        aDateColumnFrom: customDateRange.dateFrom,
+                        aDateColumnTo: customDateRange.dateTo,
+                    },
+                }),
+            );
+
+            await expect(optionChangedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: customDateRange.label,
+                }),
+            );
         });
     },
 };
@@ -183,3 +220,23 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
         });
     },
 };
+
+async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
+    const canvas = within(canvasElement);
+
+    const filterChangedListenerMock = fn();
+    await step('Setup event listener mock', async () => {
+        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
+    });
+
+    const optionChangedListenerMock = fn();
+    await step('Setup event listener mock', async () => {
+        canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+    });
+
+    return { canvas, filterChangedListenerMock, optionChangedListenerMock };
+}
+
+const dateFromPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date from');
+const dateToPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date to');
+const selectField = (canvas: ReturnType<typeof within>) => canvas.getByRole('combobox');