@genspectrum/dashboard-components 0.14.1 → 0.14.2

package/dist/util.d.ts

@@ -848,11 +848,7 @@ declare global {
 
 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;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -860,7 +856,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -868,10 +864,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -879,7 +872,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -887,10 +880,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -898,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -906,10 +896,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -917,7 +904,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -925,10 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -936,7 +920,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +928,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -952,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -968,7 +952,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -984,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,7 +976,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1000,7 +984,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1008,7 +992,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1016,7 +1000,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1024,7 +1008,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1032,7 +1020,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1040,7 +1028,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1048,7 +1039,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,7 +1047,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1064,7 +1058,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1072,7 +1066,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1080,7 +1077,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1088,7 +1085,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1096,7 +1096,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.14.1",
+    "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/aggregatedData/aggregate.stories.tsx

@@ -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/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;