feat: add range select component

Author: ClaraTschamon

src/components/RangeSelect/RangeSelect.stories.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { RangeSelect } from './RangeSelect';
+
+export default {
+  title: 'Components/RangeSelect',
+  component: RangeSelect,
+  argTypes: {
+    placeholder: { control: { type: 'text' } },
+    isDisabled: { control: { type: 'boolean' } },
+    isInvalid: { control: { type: 'boolean' } },
+    isFullWidth: { control: { type: 'boolean' } },
+    onChange: { action: 'Range Changed' },
+    onClose: { action: 'Dropdown Closed' },
+    color: {
+      control: { type: 'text' },
+    },
+    backgroundColor: {
+      control: { type: 'text' },
+    },
+    borderColor: {
+      control: { type: 'text' },
+    },
+    size: {
+      options: ['xs', 'sm', 'md', 'lg'],
+      defaultValue: 'md',
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: ['filled', 'unstyled', 'flushed', 'outline'],
+      defaultValue: 'outline',
+      control: { type: 'radio' },
+    },
+  },
+} as Meta<typeof RangeSelect>;
+
+const Template: StoryFn<typeof RangeSelect> = (args) => <RangeSelect {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Select a range',
+  rangeFromLabel: 'From',
+  rangeToLabel: 'To',
+};
+
+export const WithValidation: StoryFn<typeof RangeSelect> = (args) => {
+  const [value, setValue] = useState<string[]>(['', '']);
+  const [fromError, setFromError] = useState<string>('');
+  const [toError, setToError] = useState<string>('');
+
+  const handleChange = (newValue: string[]) => {
+    setValue(newValue);
+
+    // Validation logic
+    const rangeMin = 1;
+    const rangeMax = 100;
+    const fromStr = newValue[0] ?? '';
+    const toStr = newValue[1] ?? '';
+    const fromNum = fromStr === '' ? undefined : Number(fromStr);
+    const toNum = toStr === '' ? undefined : Number(toStr);
+
+    let nextFromError = '';
+    let nextToError = '';
+
+    if (fromNum !== undefined && !Number.isNaN(fromNum)) {
+      if (fromNum < rangeMin) nextFromError = `Value must be at least ${rangeMin}`;
+      else if (fromNum > rangeMax) nextFromError = `Value must not exceed ${rangeMax}`;
+    }
+
+    if (toNum !== undefined && !Number.isNaN(toNum)) {
+      if (toNum < rangeMin) nextToError = `Value must be at least ${rangeMin}`;
+      else if (toNum > rangeMax) nextToError = `Value must not exceed ${rangeMax}`;
+    }
+
+    if (
+      nextFromError === '' &&
+      nextToError === '' &&
+      fromNum !== undefined &&
+      toNum !== undefined &&
+      !Number.isNaN(fromNum) &&
+      !Number.isNaN(toNum) &&
+      fromNum > toNum
+    ) {
+      nextFromError = 'The minimum value cannot be greater than the maximum value';
+    }
+
+    setFromError(nextFromError);
+    setToError(nextToError);
+  };
+
+  return (
+    <RangeSelect
+      {...args}
+      rangeFromError={fromError}
+      rangeToError={toError}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};
+
+WithValidation.args = {
+  ...Default.args,
+  placeholder: 'Select a range (1-100)',
+};

src/components/RangeSelect/RangeSelect.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { act } from 'react';
+import { fireEvent, render, screen, waitFor } from '../../test/testUtils';
+import { RangeSelect } from '.';
+
+describe('The RangeSelect component', () => {
+  it('renders with placeholder text', () => {
+    render(<RangeSelect placeholder="Select a range" />);
+    expect(screen.getByText('Select a range')).toBeInTheDocument();
+  });
+
+  it('opens dropdown and shows From/To labels when clicked', async () => {
+    render(<RangeSelect />);
+
+    const combobox = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(combobox);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('From')).toBeInTheDocument();
+      expect(screen.getByText('To')).toBeInTheDocument();
+    });
+  });
+
+  it('handles range input changes', async () => {
+    const handleChange = jest.fn();
+
+    render(<RangeSelect onChange={handleChange} />);
+
+    const toggleButton = screen.getByRole('combobox');
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    const inputFields = screen.getAllByRole('spinbutton');
+
+    fireEvent.change(inputFields[0], {
+      target: { value: '1' },
+    });
+    fireEvent.change(inputFields[1], {
+      target: { value: '100' },
+    });
+
+    expect(handleChange).toHaveBeenCalledWith(['1', '100']);
+  });
+
+  it('displays error messages when error props are provided', async () => {
+    render(
+      <RangeSelect
+        rangeFromError="Value must be at least 5"
+        rangeToError="Value must be at most 10"
+      />
+    );
+
+    const toggleButton = screen.getByRole('combobox');
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+
+    expect(screen.getByText('Value must be at least 5')).toBeInTheDocument();
+    expect(screen.getByText('Value must be at most 10')).toBeInTheDocument();
+  });
+
+  it('displays the range in the trigger when values are set', () => {
+    render(<RangeSelect value={['10', '50']} />);
+    expect(screen.getByText('10 – 50')).toBeInTheDocument();
+  });
+
+  it('displays partial range when only one value is set', () => {
+    render(<RangeSelect value={['10', '']} />);
+    expect(screen.getByText('10 – ...')).toBeInTheDocument();
+  });
+
+  it('calls onClose when dropdown is closed', async () => {
+    const onCloseMock = jest.fn();
+    render(<RangeSelect onClose={onCloseMock} />);
+
+    const toggleButton = screen.getByRole('combobox');
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
+
+    await act(async () => {
+      fireEvent.click(toggleButton);
+    });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+});