@genspectrum/dashboard-components 0.13.7 → 0.14.2

package/dist/util.d.ts

@@ -136,10 +136,20 @@ declare const dateRangeOptionSchema: default_2.ZodObject<{
     dateTo?: string | undefined;
 }>;
 
-export declare type DateRangeSelectOption = string | {
-    dateFrom: string;
-    dateTo: string;
-};
+export declare type DateRangeSelectOption = Required<DateRangeValue>;
+
+declare type DateRangeValue = default_2.infer<typeof dateRangeValueSchema>;
+
+declare const dateRangeValueSchema: default_2.ZodUnion<[default_2.ZodString, default_2.ZodObject<{
+    dateFrom: default_2.ZodOptional<default_2.ZodString>;
+    dateTo: default_2.ZodOptional<default_2.ZodString>;
+}, "strip", default_2.ZodTypeAny, {
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}, {
+    dateFrom?: string | undefined;
+    dateTo?: string | undefined;
+}>]>;
 
 export declare type LapisFilter = default_2.infer<typeof lapisFilterSchema>;
 
@@ -838,7 +848,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -846,7 +856,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -854,7 +864,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -862,7 +872,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -902,7 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -910,7 +920,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +928,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -926,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -958,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -974,7 +984,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,10 +1028,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1029,7 +1039,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1047,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1048,7 +1058,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1066,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1067,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1085,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1086,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-GedKNGFI.js";
+import { D, a, L, T, d, v } from "./LineageFilterChangedEvent-C9dXOxt6.js";
 export {
   D as DateRangeOptionChangedEvent,
   a as LineageFilterChangedEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.13.7",
+    "version": "0.14.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -9,7 +9,7 @@
     "types": "dist/genspectrum-components.d.ts",
     "repository": {
         "type": "git",
-        "url": "https://github.com/GenSpectrum/dashboard-components.git",
+        "url": "git+https://github.com/GenSpectrum/dashboard-components.git",
         "directory": "components"
     },
     "publishConfig": {

package/src/lapisApi/lapisApi.ts

@@ -146,7 +146,7 @@ async function callLapis(
 const handleErrors = async (response: Response, requestedData: string) => {
     if (!response.ok) {
         if (response.status >= 400 && response.status < 500) {
-            const json = await response.json();
+            const json = (await response.json()) as unknown;
 
             const lapisErrorResult = lapisError.safeParse(json);
             if (lapisErrorResult.success) {

package/src/operator/FillMissingOperator.spec.ts

@@ -23,6 +23,6 @@ describe('FillMissingOperator', () => {
             (id) => ({ id }),
         );
         const result = await query.evaluate('lapis');
-        await expectEqualAfterSorting(result.content, [{ id: 1 }, { id: 2 }, { id: 3 }], (a, b) => a.id - b.id);
+        expectEqualAfterSorting(result.content, [{ id: 1 }, { id: 2 }, { id: 3 }], (a, b) => a.id - b.id);
     });
 });

package/src/operator/GroupByAndSumOperator.spec.ts

@@ -14,7 +14,7 @@ describe('GroupByAndSumOperator', () => {
 
         const query = new GroupByAndSumOperator(child, 'lineage', 'n');
         const result = await query.evaluate('lapis');
-        await expectEqualAfterSorting(
+        expectEqualAfterSorting(
             result.content,
             [
                 { lineage: 'A', n: 3 },

package/src/operator/GroupByOperator.spec.ts

@@ -17,7 +17,7 @@ describe('GroupByOperator', () => {
             n: values.length,
         }));
         const resultCount = await queryCount.evaluate('lapis');
-        await expectEqualAfterSorting(
+        expectEqualAfterSorting(
             resultCount.content,
             [
                 { lineage: 'A', n: 2 },
@@ -31,7 +31,7 @@ describe('GroupByOperator', () => {
             n: values.reduce((a, b) => a + b.n, 0),
         }));
         const resultSum = await querySum.evaluate('lapis');
-        await expectEqualAfterSorting(
+        expectEqualAfterSorting(
             resultSum.content,
             [
                 { lineage: 'A', n: 3 },

package/src/operator/MapOperator.spec.ts

@@ -8,6 +8,6 @@ describe('MapOperator', () => {
         const child = new MockOperator([1, 2, 3]);
         const query = new MapOperator(child, (x) => x * 2);
         const result = await query.evaluate('lapis');
-        await expect(result.content).deep.equal([2, 4, 6]);
+        expect(result.content).deep.equal([2, 4, 6]);
     });
 });

package/src/operator/MockOperator.spec.ts

@@ -6,6 +6,6 @@ describe('MockOperator', () => {
     it('should be a mock', async () => {
         const query = new MockOperator([1, 2, 3]);
         const result = await query.evaluate();
-        await expect(result.content).to.deep.equal([1, 2, 3]);
+        expect(result.content).to.deep.equal([1, 2, 3]);
     });
 });

package/src/operator/MockOperator.ts

@@ -4,9 +4,11 @@ import { type Operator } from './Operator';
 export class MockOperator<T> implements Operator<T> {
     constructor(private content: T[]) {}
 
-    async evaluate(): Promise<Dataset<T>> {
-        return {
-            content: this.content,
-        };
+    evaluate(): Promise<Dataset<T>> {
+        return new Promise((resolve) =>
+            resolve({
+                content: this.content,
+            }),
+        );
     }
 }

package/src/operator/SortOperator.spec.ts

@@ -8,6 +8,6 @@ describe('SortOperator', () => {
         const child = new MockOperator([3, 1, 2]);
         const query = new SortOperator(child, (a, b) => a - b);
         const result = await query.evaluate('lapis');
-        await expect(result.content).deep.equal([1, 2, 3]);
+        expect(result.content).deep.equal([1, 2, 3]);
     });
 });

package/src/preact/LapisUrlContext.ts

@@ -1,3 +1,16 @@
 import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 
-export const LapisUrlContext = createContext('');
+const LapisUrlContext = createContext('');
+
+export const LapisUrlContextProvider = LapisUrlContext.Provider;
+
+export const useLapisUrl = () => {
+    const lapisUrl = useContext(LapisUrlContext);
+
+    if (lapisUrl.endsWith('/')) {
+        return lapisUrl.slice(0, -1);
+    }
+
+    return lapisUrl;
+};

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -4,7 +4,7 @@ import { expect, waitFor, within } from '@storybook/test';
 import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
@@ -44,9 +44,9 @@ export default meta;
 
 export const Default: StoryObj<AggregateProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <Aggregate {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         fields: ['division', 'host'],
@@ -104,7 +104,7 @@ export const WithEmptyFieldString: StoryObj<AggregateProps> = {
         fields: [''],
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/aggregatedData/aggregate.tsx

@@ -1,11 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
+import { useLapisUrl } from '../LapisUrlContext';
 import { AggregateTable } from './aggregate-table';
 import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
 import { lapisFilterSchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -48,7 +47,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) =>
 
 export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
     const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryAggregateData(lapisFilter, fields, lapis);
@@ -129,7 +128,7 @@ type AggregateInfoProps = {
 };
 
 const AggregateInfo: FunctionComponent<AggregateInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Aggregated data</InfoHeadline1>

package/src/preact/components/csv-download-button.stories.tsx

@@ -1,7 +1,7 @@
 import { type StoryObj } from '@storybook/preact';
 import { type Meta } from '@storybook/web-components';
 
-import { CsvDownloadButton, type CsvDownloadButtonProps } from './csv-download-button';
+import { CsvDownloadButton, type CsvDownloadButtonProps, type DataValue } from './csv-download-button';
 
 const meta: Meta<CsvDownloadButtonProps> = {
     title: 'Component/CSV Download Button',
@@ -10,7 +10,7 @@ const meta: Meta<CsvDownloadButtonProps> = {
 
 export default meta;
 
-export const DownloadButton: StoryObj = {
+export const DownloadButton: StoryObj<CsvDownloadButtonProps & { data: Record<string, DataValue>[] }> = {
     render: (args) => {
         return <CsvDownloadButton label={args.label} filename={args.filename} getData={() => args.data} />;
     },

package/src/preact/components/csv-download-button.tsx

@@ -4,7 +4,7 @@ type ToStringable = {
     toString: () => string;
 };
 
-type DataValue = string | number | boolean | null | ToStringable;
+export type DataValue = string | number | boolean | null | undefined | ToStringable;
 
 export interface CsvDownloadButtonProps {
     label?: string;

package/src/preact/components/error-boundary.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 import z from 'zod';
 
-import { ErrorBoundary } from './error-boundary';
+import { ErrorBoundary, type ErrorBoundaryProps } from './error-boundary';
 import { UserFacingError } from './error-display';
 
 const meta: Meta = {
@@ -28,7 +28,7 @@ const someSchema = z.object({
 const someValidProps = { test: 'someValue' };
 const someInvalidProps = { test: '' };
 
-export const ErrorBoundaryWithoutErrorStory: StoryObj = {
+export const ErrorBoundaryWithoutErrorStory: StoryObj<ErrorBoundaryProps<typeof someValidProps>> = {
     render: (args) => (
         <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <div>Some content</div>
@@ -41,7 +41,7 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
     },
 };
 
-export const ErrorBoundaryWithErrorStory: StoryObj = {
+export const ErrorBoundaryWithErrorStory: StoryObj<ErrorBoundaryProps<typeof someValidProps>> = {
     render: (args) => (
         <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new Error('Some error')} />
@@ -55,7 +55,7 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
     },
 };
 
-export const ErrorBoundaryWithParsingErrorStory: StoryObj = {
+export const ErrorBoundaryWithParsingErrorStory: StoryObj<ErrorBoundaryProps<typeof someValidProps>> = {
     render: (args) => (
         <ErrorBoundary size={args.size} schema={someSchema} componentProps={someInvalidProps}>
             <ContentThatThrowsError error={() => new Error('Some error')} />
@@ -69,7 +69,7 @@ export const ErrorBoundaryWithParsingErrorStory: StoryObj = {
     },
 };
 
-export const ErrorBoundaryWithUserFacingErrorStory: StoryObj = {
+export const ErrorBoundaryWithUserFacingErrorStory: StoryObj<ErrorBoundaryProps<typeof someValidProps>> = {
     render: (args) => (
         <ErrorBoundary size={args.size} schema={someSchema} componentProps={someValidProps}>
             <ContentThatThrowsError error={() => new UserFacingError('Error Headline', 'Some error')} />

package/src/preact/components/error-boundary.tsx

@@ -1,11 +1,11 @@
 import { type RenderableProps } from 'preact';
-import { useErrorBoundary, useMemo } from 'preact/hooks';
+import { useEffect, useErrorBoundary, useMemo } from 'preact/hooks';
 import { type ZodSchema } from 'zod';
 
 import { ErrorDisplay, type ErrorDisplayProps, InvalidPropsError } from './error-display';
 import { ResizeContainer, type Size } from './resize-container';
 
-type ErrorBoundaryProps<T> = {
+export type ErrorBoundaryProps<T> = {
     size: Size;
     componentProps: T;
     schema: ZodSchema<T>;
@@ -19,13 +19,24 @@ export const ErrorBoundary = <T extends Record<string, unknown>>({
     schema,
     children,
 }: RenderableProps<ErrorBoundaryProps<T>>) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- useErrorBoundary unfortunately return `[any, ...]`
     const [internalError, resetError] = useErrorBoundary();
     const componentPropsParseError = useCheckComponentProps(schema, componentProps);
 
+    useEffect(
+        () => {
+            if (internalError) {
+                resetError();
+            }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- this should run if and only if the props of the component change
+        [componentProps],
+    );
+
     if (internalError) {
         return (
             <ResizeContainer size={size}>
-                <ErrorDisplay error={internalError} resetError={resetError} layout={layout} />
+                <ErrorDisplay error={internalError as Error} resetError={resetError} layout={layout} />
             </ResizeContainer>
         );
     }

package/src/preact/components/error-display.stories.tsx

@@ -39,12 +39,12 @@ export const UserFacingErrorStory: StoryObj = {
         const error = canvas.getByText('Oops! Something went wrong.', { exact: false });
         const detailMessage = () => canvas.getByText('some message');
         await waitFor(() => expect(error).toBeInTheDocument());
-        await waitFor(() => {
-            expect(detailMessage()).not.toBeVisible();
+        await waitFor(async () => {
+            await expect(detailMessage()).not.toBeVisible();
         });
         await userEvent.click(canvas.getByText('Show details.'));
-        await waitFor(() => {
-            expect(detailMessage()).toBeVisible();
+        await waitFor(async () => {
+            await expect(detailMessage()).toBeVisible();
         });
     },
 };
@@ -60,9 +60,9 @@ export const FiresEvent: StoryObj = {
         const listenerMock = fn();
         canvasElement.addEventListener('gs-error', listenerMock);
 
-        await waitFor(() => {
-            expect(listenerMock.mock.calls.at(-1)![0].error.name).toStrictEqual('UserFacingError');
-            expect(listenerMock.mock.calls.at(-1)![0].error.message).toStrictEqual('some message');
+        await waitFor(async () => {
+            await expect(listenerMock.mock.calls.at(-1)![0].error.name).toStrictEqual('UserFacingError');
+            await expect(listenerMock.mock.calls.at(-1)![0].error.message).toStrictEqual('some message');
         });
     },
 };
@@ -81,8 +81,8 @@ export const TriggersResetErrorOnReloadButton: StoryObj = {
 
         await userEvent.click(canvas.getByText('Try again'));
 
-        await waitFor(() => {
-            expect(resetErrorMock).toHaveBeenCalled();
+        await waitFor(async () => {
+            await expect(resetErrorMock).toHaveBeenCalled();
         });
     },
 };

package/src/preact/components/fullscreen.tsx

@@ -6,14 +6,14 @@ export const Fullscreen = () => {
     return (
         <button
             ref={element}
-            onClick={async () => {
+            onClick={() => {
                 if (element.current) {
                     if (isFullscreen) {
-                        await document.exitFullscreen();
+                        void document.exitFullscreen();
                     } else {
                         const componentRoot = findComponentRoot(element.current);
                         if (componentRoot) {
-                            await componentRoot.requestFullscreen();
+                            void componentRoot.requestFullscreen();
                         }
                     }
                 }

package/src/preact/components/info.tsx

@@ -97,7 +97,7 @@ function componentParametersToCode(componentName: string, params: object, lapisU
 
     const attributes = indentLines(
         Object.entries(params)
-            .map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`)
+            .map(([key, value]) => `${key}='${stringifyIfNeeded(value) as string}'`)
             .join('\n'),
         4,
     );

package/src/preact/components/mutation-type-selector.stories.tsx

@@ -108,7 +108,7 @@ export const OneTypesSelected: StoryObj<MutationTypeSelectorProps> = {
         const canvas = within(canvasElement);
 
         await step('Show the selected type as label', async () => {
-            const substitutionElements = await canvas.getAllByText('Substitution');
+            const substitutionElements = canvas.getAllByText('Substitution');
             await expect(substitutionElements.length).toBe(2);
         });
     },

package/src/preact/components/table.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import { Table } from './table';
+import { Table, type TableProps } from './table';
 
 const meta: Meta = {
     title: 'Component/Table',
@@ -16,7 +16,7 @@ const meta: Meta = {
 
 export default meta;
 
-export const TableStory: StoryObj = {
+export const TableStory: StoryObj<TableProps> = {
     render: (args) => {
         return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },
@@ -49,7 +49,7 @@ export const TableStory: StoryObj = {
     },
 };
 
-export const TableStoryNoPagination: StoryObj = {
+export const TableStoryNoPagination: StoryObj<TableProps> = {
     render: (args) => {
         return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },

package/src/preact/components/table.tsx

@@ -22,7 +22,7 @@ export const tableStyle = {
     },
 };
 
-interface TableProps {
+export interface TableProps {
     data: TData;
     columns: OneDArray<TColumn | string | ComponentChild>;
     pageSize: number | boolean;