@reshape-biotech/design-system 2.4.0 → 2.4.1

package/README.md

@@ -22,19 +22,16 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
-
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
-
    - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
 3. **DaisyUI**
-
    - Pre-configured DaisyUI setup
    - Custom theme extensions
    - Shared utility classes

package/dist/components/activity/Activity.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/activity/Activity.test.js

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Activity from './Activity.svelte';
+import { Settings } from 'luxon';
+describe('Activity Component', () => {
+    // Store original values to restore after tests
+    const originalNavigatorLanguage = navigator.language;
+    const originalDefaultZone = Settings.defaultZone;
+    beforeEach(() => {
+        // Reset navigator.language before each test
+        Object.defineProperty(navigator, 'language', {
+            value: 'en-US',
+            configurable: true,
+        });
+    });
+    afterEach(() => {
+        // Restore original settings
+        Settings.defaultZone = originalDefaultZone;
+        Object.defineProperty(navigator, 'language', {
+            value: originalNavigatorLanguage,
+            configurable: true,
+        });
+    });
+    it('formats valid ISO timestamp correctly in UTC timezone with en-US locale', () => {
+        // Mock timezone to UTC
+        Settings.defaultZone = 'UTC';
+        const isoTimestamp = '2023-04-15T14:30:00Z';
+        const activity = {
+            icon: 'add',
+            label: 'Test',
+            timestamp: isoTimestamp,
+        };
+        render(Activity, { props: { activity } });
+        // For en-US locale in UTC timezone, Apr 15, 2023, 2:30 PM
+        expect(screen.getByText('Apr 15, 2023, 2:30 PM')).toBeInTheDocument();
+    });
+    it('formats valid ISO timestamp correctly in London timezone with en-GB locale', () => {
+        // Mock timezone to London
+        Settings.defaultZone = 'Europe/London';
+        // Mock locale to en-GB
+        Object.defineProperty(navigator, 'language', {
+            value: 'en-GB',
+            configurable: true,
+        });
+        const isoTimestamp = '2023-04-15T14:30:00Z';
+        const activity = {
+            icon: 'add',
+            label: 'Test',
+            timestamp: isoTimestamp,
+        };
+        render(Activity, { props: { activity } });
+        // For en-GB locale in London timezone (BST in April), 15 Apr 2023, 15:30
+        expect(screen.getByText('15 Apr 2023, 15:30')).toBeInTheDocument();
+    });
+    it('returns original string when timestamp is completely invalid', () => {
+        const invalidTimestamp = 'not-a-date-at-all';
+        const activity = {
+            icon: 'add',
+            label: 'Test',
+            timestamp: invalidTimestamp,
+        };
+        render(Activity, { props: { activity } });
+        expect(screen.getByText(invalidTimestamp)).toBeInTheDocument();
+    });
+    it('returns original string when timestamp looks like a date but is not ISO format', () => {
+        // This looks like a date but isn't in ISO format
+        const nonIsoTimestamp = '24 Feb 2025, 10:10';
+        const activity = {
+            icon: 'add',
+            label: 'Test',
+            timestamp: nonIsoTimestamp,
+        };
+        render(Activity, { props: { activity } });
+        // Should show the original string since our component only handles ISO format
+        expect(screen.getByText(nonIsoTimestamp)).toBeInTheDocument();
+    });
+    it('returns original string for malformed ISO-like timestamps', () => {
+        // This looks like ISO but is missing the T
+        const malformedIsoTimestamp = '2023-04-15 14:30:00Z';
+        const activity = {
+            icon: 'add',
+            label: 'Test',
+            timestamp: malformedIsoTimestamp,
+        };
+        render(Activity, { props: { activity } });
+        // Should show the original string since it's not valid ISO
+        expect(screen.getByText(malformedIsoTimestamp)).toBeInTheDocument();
+    });
+});

package/dist/components/avatar/Avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/Avatar.test.js

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Avatar from './Avatar.svelte';
+describe('Avatar Component', () => {
+    it('renders with default props (md size, tooltip shown)', () => {
+        render(Avatar, { props: { name: 'Test User' } });
+        const avatarDiv = screen.getByText('TU').closest('div');
+        expect(avatarDiv).toBeInTheDocument();
+        expect(avatarDiv).toHaveClass('h-8 w-8'); // md size class
+        // Check for tooltip trigger (the avatar itself)
+        const tooltipTrigger = screen.getByText('TU');
+        expect(tooltipTrigger).toBeInTheDocument();
+    });
+    it('renders with sm size', () => {
+        render(Avatar, { props: { name: 'Test User', size: 'sm' } });
+        const avatarDiv = screen.getByText('TU').closest('div');
+        expect(avatarDiv).toBeInTheDocument();
+        expect(avatarDiv).toHaveClass('h-6 w-6'); // sm size class
+    });
+    it('renders without tooltip when showTooltip is false', () => {
+        render(Avatar, { props: { name: 'Test User', showTooltip: false } });
+        const avatarDiv = screen.getByText('TU').closest('div');
+        expect(avatarDiv).toBeInTheDocument();
+        const tooltipRoot = avatarDiv?.closest('rdp-tooltip');
+        expect(tooltipRoot).not.toBeInTheDocument();
+    });
+    it('calculates initials correctly for a single name', () => {
+        render(Avatar, { props: { name: 'Vilfred' } });
+        expect(screen.getByText('VI')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for two names', () => {
+        render(Avatar, { props: { name: 'Vilfred Pedersen' } });
+        expect(screen.getByText('VP')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for multiple names', () => {
+        render(Avatar, { props: { name: 'Vilfred Midjord Pedersen' } });
+        expect(screen.getByText('VP')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for an email', () => {
+        render(Avatar, { props: { name: 'test@example.com' } });
+        expect(screen.getByText('TE')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for short single name/initials', () => {
+        render(Avatar, { props: { name: 'VP' } });
+        expect(screen.getByText('VP')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for null name', () => {
+        render(Avatar, { props: { name: null } });
+        expect(screen.getByText('?')).toBeInTheDocument();
+    });
+    it('calculates initials correctly for undefined name', () => {
+        render(Avatar, { props: { name: undefined } });
+        expect(screen.getByText('?')).toBeInTheDocument();
+    });
+});

package/dist/components/button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/button/Button.test.js

@@ -0,0 +1,117 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import Button from './Button.svelte';
+// Helper component specifically for testing the default slot
+import ButtonTest from './Button.test.svelte';
+describe('Button Component', () => {
+    it('renders with default props', () => {
+        const { getByRole } = render(Button);
+        const button = getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('button');
+        expect(button).toHaveClass('btn-primary'); // Default variant
+        expect(button).toHaveClass('btn-size-lg'); // Default size
+        expect(button).not.toHaveClass('rounded');
+        expect(button).not.toBeDisabled();
+        expect(button).not.toHaveClass('cursor-wait');
+        expect(button).not.toHaveClass('disabled'); // Ensure separate disabled class check
+        expect(button).toHaveAttribute('type', 'button');
+    });
+    it('renders children content provided via slot', () => {
+        // Use the helper component to render the button with slot content
+        const { getByText } = render(ButtonTest);
+        expect(getByText('Test Children')).toBeInTheDocument();
+    });
+    // Test variants
+    ['primary', 'secondary', 'transparent', 'danger', 'outline'].forEach((variant) => {
+        it(`applies the correct class for variant "${variant}"`, () => {
+            const { getByRole } = render(Button, { props: { variant } });
+            const button = getByRole('button');
+            expect(button).toHaveClass(`btn-${variant}`);
+        });
+    });
+    // Test inverse variants
+    ['secondary-inverse', 'transparent-inverse'].forEach((variant) => {
+        it(`applies the correct class for variant "${variant}"`, () => {
+            const { getByRole } = render(Button, { props: { variant } });
+            const button = getByRole('button');
+            expect(button).toHaveClass(`btn-${variant}`);
+        });
+    });
+    // Test sizes
+    ['xs', 'sm', 'md', 'lg'].forEach((size) => {
+        it(`applies the correct class for size "${size}"`, () => {
+            const { getByRole } = render(Button, { props: { size } });
+            const button = getByRole('button');
+            expect(button).toHaveClass(`btn-size-${size}`);
+        });
+    });
+    it('applies the rounded class when rounded is true', () => {
+        const { getByRole } = render(Button, { props: { rounded: true } });
+        const button = getByRole('button');
+        expect(button).toHaveClass('rounded');
+    });
+    it('handles click events', async () => {
+        const handleClick = vi.fn();
+        const { getByRole } = render(Button, { props: { onClick: handleClick } });
+        const button = getByRole('button');
+        await fireEvent.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('disables the button when disabled is true', async () => {
+        const handleClick = vi.fn();
+        const { getByRole } = render(Button, { props: { disabled: true, onClick: handleClick } });
+        const button = getByRole('button');
+        expect(button).toBeDisabled();
+        expect(button).toHaveClass('disabled'); // Check for the specific disabled class
+        await fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('shows spinner and prevents click when loading is true', async () => {
+        const handleClick = vi.fn();
+        const { getByRole, container } = render(Button, {
+            props: { loading: true, onClick: handleClick },
+        });
+        const button = getByRole('button');
+        expect(button).toHaveClass('cursor-wait');
+        // Check if Spinner is rendered by looking for the div with the 'spinner' class
+        expect(container.querySelector('div.spinner')).toBeInTheDocument();
+        await fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('applies accessibility label', () => {
+        const label = 'Click me button';
+        const { getByRole } = render(Button, { props: { accessibilityLabel: label } });
+        const button = getByRole('button');
+        expect(button).toHaveAttribute('aria-label', label);
+    });
+    it('applies custom class', () => {
+        const customClass = 'my-custom-class';
+        const { getByRole } = render(Button, { props: { class: customClass } });
+        const button = getByRole('button');
+        expect(button).toHaveClass(customClass);
+    });
+    it('applies data-testid', () => {
+        const testId = 'my-button-test-id';
+        const { getByTestId } = render(Button, { props: { dataTestId: testId } });
+        expect(getByTestId(testId)).toBeInTheDocument();
+    });
+    it('applies id', () => {
+        const testId = 'my-button-id';
+        const { getByRole } = render(Button, { props: { id: testId } });
+        const button = getByRole('button');
+        expect(button).toHaveAttribute('id', testId);
+    });
+    it('applies tabindex', () => {
+        const tabIndex = 0;
+        const { getByRole } = render(Button, { props: { tabindex: tabIndex } });
+        const button = getByRole('button');
+        expect(button).toHaveAttribute('tabindex', tabIndex.toString());
+    });
+    it('applies button type', () => {
+        const type = 'submit';
+        const { getByRole } = render(Button, { props: { type: type } });
+        const button = getByRole('button');
+        expect(button).toHaveAttribute('type', type);
+    });
+});

package/dist/components/button/Button.test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Button from './Button.svelte';
+</script>
+
+<Button>Test Children</Button>

package/dist/components/button/Button.test.svelte.d.ts

@@ -0,0 +1,19 @@
+import Button from './Button.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

package/dist/components/checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/checkbox/Checkbox.test.js

@@ -0,0 +1,51 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import Checkbox from './Checkbox.svelte';
+describe('Checkbox component', () => {
+    it('renders correctly', () => {
+        const { getByRole } = render(Checkbox, { props: { checked: false } });
+        expect(getByRole('checkbox')).toBeTruthy();
+    });
+    it('is unchecked by default', () => {
+        const { getByRole } = render(Checkbox);
+        expect(getByRole('checkbox')).not.toBeChecked();
+    });
+    it('is checked when checked prop is true', () => {
+        const { getByRole } = render(Checkbox, {
+            props: {
+                checked: true,
+            },
+        });
+        expect(getByRole('checkbox')).toBeChecked();
+    });
+    it('calls onChange handler when clicked', async () => {
+        const handleChange = vi.fn();
+        const { getByRole } = render(Checkbox, {
+            props: {
+                checked: false,
+                onCheckedChange: handleChange,
+            },
+        });
+        const checkbox = getByRole('checkbox');
+        await fireEvent.click(checkbox);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+    it('is disabled when disabled prop is true', () => {
+        const { getByRole } = render(Checkbox, {
+            props: {
+                checked: false,
+                disabled: true,
+            },
+        });
+        const checkbox = getByRole('checkbox');
+        expect(checkbox.hasAttribute('disabled')).toBe(true);
+    });
+    it('is indeterminate when indeterminate prop is true', () => {
+        const { getByRole } = render(Checkbox, {
+            props: {
+                indeterminate: true,
+            },
+        });
+        expect(getByRole('checkbox')).toHaveAttribute('data-state', 'indeterminate');
+    });
+});

package/dist/components/graphs/matrix/Matrix.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/graphs/matrix/Matrix.test.js

@@ -0,0 +1,256 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import Matrix from './Matrix.svelte';
+describe('Matrix Component', () => {
+    // Test data
+    const xAxisName = 'Predicted';
+    const yAxisName = 'Actual';
+    const confusionMatrix = [
+        [
+            { value: 8, row: 0, col: 0 }, // TP (TNTC/TNTC)
+            { value: 27, row: 0, col: 1 }, // FN (TNTC/Not TNTC)
+        ],
+        [
+            { value: 2, row: 1, col: 0 }, // FP (Not TNTC/TNTC)
+            { value: 123, row: 1, col: 1 }, // TN (Not TNTC/Not TNTC)
+        ],
+    ];
+    const defaultRowLabels = ['TNTC', 'Not TNTC'];
+    const defaultColLabels = ['TNTC', 'Not TNTC'];
+    it('renders with default props', () => {
+        render(Matrix, {
+            props: {
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                xAxisName,
+                yAxisName,
+            },
+        });
+        // Check that all values are rendered
+        expect(screen.getByText('8')).toBeInTheDocument();
+        expect(screen.getByText('27')).toBeInTheDocument();
+        expect(screen.getByText('2')).toBeInTheDocument();
+        expect(screen.getByText('123')).toBeInTheDocument();
+        // Check that all labels are rendered
+        defaultRowLabels.forEach((label) => {
+            expect(screen.getAllByText(label).length).toBeGreaterThan(0);
+        });
+        defaultColLabels.forEach((label) => {
+            expect(screen.getAllByText(label).length).toBeGreaterThan(0);
+        });
+    });
+    it('renders with axis titles', () => {
+        render(Matrix, {
+            props: {
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                xAxisName,
+                yAxisName,
+            },
+        });
+        expect(screen.getByText(xAxisName)).toBeInTheDocument();
+        expect(screen.getByText(yAxisName)).toBeInTheDocument();
+    });
+    it('renders without axis titles when when hideAxisNames is true', () => {
+        render(Matrix, {
+            props: {
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                xAxisName,
+                yAxisName,
+                hideAxisNames: true,
+            },
+        });
+        // The titles should not be in the document
+        expect(screen.queryByText('Predicted')).not.toBeInTheDocument();
+        expect(screen.queryByText('Actual')).not.toBeInTheDocument();
+    });
+    it('renders loading state correctly', () => {
+        render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                loading: true,
+            },
+        });
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+    it('inverts y-axis when invertYAxis is true', () => {
+        // First render without inversion to capture original order
+        const { unmount } = render(Matrix, {
+            props: {
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                xAxisName,
+                yAxisName,
+            },
+        });
+        // Query all cell values to determine their positions in the DOM
+        const originalCells = screen
+            .getAllByRole('button')
+            .map((button) => button.querySelector('span')?.textContent);
+        unmount();
+        // Now render with inversion
+        render(Matrix, {
+            props: {
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                invertYAxis: true,
+                xAxisName,
+                yAxisName,
+            },
+        });
+        // Get the new order of cells
+        const invertedCells = screen
+            .getAllByRole('button')
+            .map((button) => button.querySelector('span')?.textContent);
+        // The first row and last row should be swapped when inverted
+        // This is an approximation as DOM order might not directly correspond to visual order
+        expect(invertedCells).not.toEqual(originalCells);
+    });
+    it('calls onCellClick when a cell is clicked', async () => {
+        const user = userEvent.setup();
+        const onCellClick = vi.fn();
+        render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                onCellClick,
+            },
+        });
+        const buttons = screen.getAllByRole('button');
+        await user.click(buttons[0]); // Click the first cell
+        expect(onCellClick).toHaveBeenCalledTimes(1);
+        expect(onCellClick).toHaveBeenCalledWith(expect.objectContaining({
+            value: expect.any(Number),
+            row: expect.any(Number),
+            col: expect.any(Number),
+        }));
+    });
+    it('calls onCellHover when a cell is hovered', async () => {
+        const onCellHover = vi.fn();
+        render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                onCellHover,
+            },
+        });
+        const buttons = screen.getAllByRole('button');
+        await fireEvent.mouseOver(buttons[0]); // Hover over the first cell
+        expect(onCellHover).toHaveBeenCalledTimes(1);
+        expect(onCellHover).toHaveBeenCalledWith(expect.objectContaining({
+            value: expect.any(Number),
+            row: expect.any(Number),
+            col: expect.any(Number),
+        }));
+    });
+    it('uses default background colors for 2x2 confusion matrix', () => {
+        // Create a test component that inspects cell background colors
+        const { container } = render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+            },
+        });
+        // Get all cell buttons
+        const buttons = screen.getAllByRole('button');
+        // In a 2x2 confusion matrix, diagonal cells should have success background color
+        // and off-diagonal cells should have neutral background color
+        const diagonalCells = [0, 3]; // Indices for top-left and bottom-right cells
+        const offDiagonalCells = [1, 2]; // Indices for top-right and bottom-left cells
+        for (const idx of diagonalCells) {
+            // Check that the inline style contains the success background color
+            expect(buttons[idx].style.backgroundColor).not.toBeUndefined();
+        }
+        for (const idx of offDiagonalCells) {
+            // Check that the inline style contains the neutral background color
+            expect(buttons[idx].style.backgroundColor).not.toBeUndefined();
+        }
+    });
+    it('respects custom background colors when provided', () => {
+        const customRedColor = 'rgb(255, 0, 0)';
+        const customGreenColor = 'rgb(0, 255, 0)';
+        const customColorMatrix = [
+            [
+                { value: 8, row: 0, col: 0, backgroundColor: customRedColor }, // Custom red color
+                { value: 27, row: 0, col: 1 }, // Default color
+            ],
+            [
+                { value: 2, row: 1, col: 0 }, // Default color
+                { value: 123, row: 1, col: 1, backgroundColor: customGreenColor }, // Custom green color
+            ],
+        ];
+        render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: customColorMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+            },
+        });
+        const buttons = screen.getAllByRole('button');
+        // Check that custom colors are applied
+        expect(buttons[0].style.backgroundColor).toBe(customRedColor);
+        expect(buttons[3].style.backgroundColor).toBe(customGreenColor);
+    });
+    it('handles focus events for accessibility', async () => {
+        const onCellHover = vi.fn();
+        render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                onCellHover,
+            },
+        });
+        const buttons = screen.getAllByRole('button');
+        await fireEvent.focus(buttons[0]); // Focus the first cell
+        expect(onCellHover).toHaveBeenCalledTimes(1);
+        expect(onCellHover).toHaveBeenCalledWith(expect.objectContaining({
+            value: expect.any(Number),
+            row: expect.any(Number),
+            col: expect.any(Number),
+        }));
+    });
+    it('renders with custom width and height', () => {
+        const customWidth = '600px';
+        const customHeight = '300px';
+        const { container } = render(Matrix, {
+            props: {
+                xAxisName,
+                yAxisName,
+                data: confusionMatrix,
+                rowLabels: defaultRowLabels,
+                colLabels: defaultColLabels,
+                width: customWidth,
+                height: customHeight,
+            },
+        });
+        // Check that the root div has the specified width and height
+        const rootElement = container.firstChild;
+        expect(rootElement.style.width).toBe(customWidth);
+        expect(rootElement.style.height).toBe(customHeight);
+    });
+});