@genspectrum/dashboard-components 1.0.1 → 1.1.0

package/src/preact/components/mutations-over-time-text-filter.stories.tsx

@@ -1,57 +0,0 @@
-import { type StoryObj } from '@storybook/preact';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { type Meta } from '@storybook/web-components';
-import { useState } from 'preact/hooks';
-
-import { MutationsOverTimeTextFilter, type TextFilterProps } from './mutations-over-time-text-filter';
-
-const meta: Meta = {
-    title: 'Component/Mutations over time text filter',
-    component: 'MutationsOverTimeTextFilter',
-    parameters: { fetchMock: {} },
-};
-
-export default meta;
-
-const WrapperWithState = ({ setFilterValue, value }: { setFilterValue: (value: string) => void; value: string }) => {
-    const [state, setState] = useState(value);
-
-    return (
-        <MutationsOverTimeTextFilter
-            setFilterValue={(value) => {
-                setFilterValue(value);
-                setState(value);
-            }}
-            value={state}
-        />
-    );
-};
-
-export const MutationsOverTimeTextFilterStory: StoryObj<TextFilterProps> = {
-    render: (args) => {
-        return <WrapperWithState setFilterValue={args.setFilterValue} value={args.value} />;
-    },
-    args: {
-        setFilterValue: fn(),
-        value: 'Test',
-    },
-    play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-
-        await step('Expect initial value to show on the button', async () => {
-            const button = canvas.getByRole('button');
-            await expect(button).toHaveTextContent('Test');
-        });
-
-        await step('Change filter and expect it to show on the button', async () => {
-            const button = canvas.getByRole('button');
-            await userEvent.click(button);
-
-            const inputField = canvas.getByRole('textbox');
-            await userEvent.clear(inputField);
-            await userEvent.type(inputField, 'OtherText');
-
-            await waitFor(() => expect(button).toHaveTextContent('OtherText'));
-        });
-    },
-};

package/src/preact/components/mutations-over-time-text-filter.tsx

@@ -1,63 +0,0 @@
-import type { h } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-
-import { Dropdown } from './dropdown';
-import { DeleteIcon } from '../shared/icons/DeleteIcon';
-
-export type TextFilterProps = { setFilterValue: (newValue: string) => void; value: string };
-
-export function MutationsOverTimeTextFilter({ setFilterValue, value }: TextFilterProps) {
-    const onInput = (newValue: string) => {
-        setFilterValue(newValue);
-    };
-
-    const onDeleteClick = () => setFilterValue('');
-
-    return (
-        <div className={'w-28 inline-flex'}>
-            <Dropdown buttonTitle={value === '' ? `Filter mutations` : value} placement={'bottom-start'}>
-                <div>
-                    <label className='flex gap-1 input input-xs'>
-                        <DebouncedInput placeholder={'Filter'} onInput={onInput} value={value} type='text' />
-                        {value !== undefined && value !== '' && (
-                            <button className={'cursor-pointer'} onClick={onDeleteClick}>
-                                <DeleteIcon />
-                            </button>
-                        )}
-                    </label>
-                </div>
-            </Dropdown>
-        </div>
-    );
-}
-
-function DebouncedInput({
-    value: initialValue,
-    onInput,
-    debounce = 500,
-    ...props
-}: {
-    onInput: (value: string) => void;
-    debounce?: number;
-    value?: string;
-} & Omit<h.JSX.IntrinsicElements['input'], 'onInput'>) {
-    const [value, setValue] = useState<string | undefined>(initialValue);
-
-    useEffect(() => {
-        setValue(initialValue);
-    }, [initialValue]);
-
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            onInput(value ?? '');
-        }, debounce);
-
-        return () => clearTimeout(timeout);
-    }, [value, debounce, onInput]);
-
-    const onChangeInput = useCallback((event: h.JSX.TargetedEvent<HTMLInputElement>) => {
-        setValue(event.currentTarget.value);
-    }, []);
-
-    return <input {...props} value={value} onInput={onChangeInput} />;
-}