@imposium-hub/components 2.16.0 → 3.0.0-1

package/src/components/number-field/NumberField.test.tsx

@@ -1,383 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, fireEvent, screen } from '../../test/utils';
-import NumberField, { validateNumInput } from './NumberField';
-
-describe('NumberField', () => {
-    const defaultProps = {
-        value: 10,
-        onChange: vi.fn(),
-        label: 'Test Number Field'
-    };
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-
-    describe('Rendering', () => {
-        it('renders without crashing', () => {
-            render(<NumberField {...defaultProps} />);
-            const input = screen.getByRole('spinbutton');
-            expect(input).toBeDefined();
-        });
-
-        it('displays the correct value', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={25}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('25');
-        });
-
-        it('displays placeholder when provided', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    placeholder='Enter number'
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.placeholder).toBe('Enter number');
-        });
-
-        it('displays empty string when value is null', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={null}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('');
-        });
-
-        it('applies min and max attributes', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    min={0}
-                    max={100}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.min).toBe('0');
-            expect(input.max).toBe('100');
-        });
-
-        it('sets readOnly attribute when readOnly prop is true', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    readOnly
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.readOnly).toBe(true);
-        });
-    });
-
-    describe('User Interactions', () => {
-        it('calls onChange when value changes', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '42' } });
-
-            expect(onChange).toHaveBeenCalledWith(42);
-        });
-
-        it('calls onChange with min value when empty string is entered', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                    min={5}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '' } });
-
-            expect(onChange).toHaveBeenCalledWith(5);
-        });
-
-        it('parses float values correctly', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '3.14' } });
-
-            expect(onChange).toHaveBeenCalledWith(3.14);
-        });
-
-        it('calls onBlur when provided', () => {
-            const onBlur = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onBlur={onBlur}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.blur(input, { target: { value: '15' } });
-
-            expect(onBlur).toHaveBeenCalledWith('15');
-        });
-
-        it('focuses input on mount when focusOnMount is true', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    focusOnMount
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(document.activeElement).toBe(input);
-        });
-    });
-
-    describe('Keyboard Interactions', () => {
-        it('increases value by 9 when Shift+ArrowUp is pressed', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={10}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowUp',
-                shiftKey: true
-            });
-
-            expect(onChange).toHaveBeenCalledWith(19);
-        });
-
-        it('decreases value by 9 when Shift+ArrowDown is pressed', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={20}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowDown',
-                shiftKey: true
-            });
-
-            expect(onChange).toHaveBeenCalledWith(11);
-        });
-
-        it('does not call onChange when value would exceed max limit', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={95}
-                    max={100}
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowUp',
-                shiftKey: true
-            });
-
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('sets error state when value would go below min limit', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={0}
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowDown',
-                shiftKey: true
-            });
-
-            // The component should set error state instead of calling onChange
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={-5}
-                    min={0}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-    });
-
-    describe('Validation', () => {
-        it('shows error state when value is below minimum', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={10}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state when value is above maximum', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for min constraint', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={10}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for max constraint', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for min and max constraints', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    min={10}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('does not show error state when value is valid', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={50}
-                    min={10}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeNull();
-        });
-    });
-
-    describe('Component Updates', () => {
-        it('updates internal state when props.value changes', () => {
-            const { rerender } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={10}
-                />
-            );
-
-            rerender(
-                <NumberField
-                    {...defaultProps}
-                    value={20}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('20');
-        });
-
-        it('validates value when props change', () => {
-            const { container, rerender } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={50}
-                />
-            );
-
-            rerender(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-    });
-});
-
-describe('validateNumInput utility', () => {
-    it('returns true for valid values within range', () => {
-        expect(validateNumInput(50, 0, 100)).toBe(true);
-        expect(validateNumInput(0, 0, 100)).toBe(true);
-        expect(validateNumInput(100, 0, 100)).toBe(true);
-    });
-
-    it('returns false for values below minimum', () => {
-        expect(validateNumInput(-5, 0, 100)).toBe(false);
-    });
-
-    it('returns false for values above maximum', () => {
-        expect(validateNumInput(150, 0, 100)).toBe(false);
-    });
-
-    it('handles undefined min/max values', () => {
-        expect(validateNumInput(50, undefined, 100)).toBe(true);
-        expect(validateNumInput(50, 0, undefined)).toBe(true);
-        expect(validateNumInput(50, undefined, undefined)).toBe(true);
-    });
-});

package/src/components/publish-wizard/publish/CrMPublishCreativeSelectCell.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import CheckboxField from '../../checkbox-field/CheckboxField';
-import { canBePublishedTo } from './CrMPublishUI';
-interface ICrMPublishCreativeSelectCellProps {
-    cell: any;
-    onSelectChange: (creativeId: string, selected: boolean) => void;
-    selectedCreatives: string[];
-}
-
-export const CrMPublishCreativeSelectCell: React.FC<ICrMPublishCreativeSelectCellProps> = (
-    props
-) => {
-    const { cell, onSelectChange, selectedCreatives } = props;
-    const creativeId = cell.row.original.creativeId;
-    const isSelected = selectedCreatives.includes(creativeId);
-    const showCheckbox = canBePublishedTo(cell.row.original.approvalStatus);
-    if (showCheckbox) {
-        return (
-            <CheckboxField
-                label=''
-                propagate={false}
-                value={isSelected}
-                onChange={(selected) => onSelectChange(creativeId, selected)}
-            />
-        );
-    } else {
-        return null;
-    }
-};

package/src/components/publish-wizard/publish/CrMPublishCreativeSelectHeader.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import CheckboxField from '../../checkbox-field/CheckboxField';
-import { canBePublishedTo } from './CrMPublishUI';
-
-interface ICrMPublishCreativeSelectHeaderProps {
-    onSelectChange: (selected: boolean) => void;
-    selectedCreatives: string[];
-    creativeConfig: any[];
-}
-
-export const CrMPublishCreativeSelectHeader: React.FC<ICrMPublishCreativeSelectHeaderProps> = (
-    props
-) => {
-    const { onSelectChange, selectedCreatives, creativeConfig } = props;
-
-    const publishableCreatives = creativeConfig.filter((creative) =>
-        canBePublishedTo(creative.approvalStatus)
-    );
-
-    const publishableCreativeIds = publishableCreatives.map((creative) => creative.creativeId);
-    const allPublishableSelected =
-        publishableCreativeIds.length > 0 &&
-        publishableCreativeIds.every((id) => selectedCreatives.includes(id));
-
-    return (
-        <CheckboxField
-            label=''
-            propagate={false}
-            value={allPublishableSelected}
-            onChange={(selected) => onSelectChange(selected)}
-        />
-    );
-};

package/src/components/publish-wizard/publish/CrMPublishNameCell.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { renderTooltip, renderTooltipProps } from '../../Tooltip';
-import { canBePublishedTo } from './CrMPublishUI';
-import * as copy from '../../../constants/copy';
-
-interface ICrMPublishNameCellProps {
-    cell: any;
-}
-
-export const CrMPublishNameCell: React.FC<ICrMPublishNameCellProps> = (props) => {
-    const { cell } = props;
-    const canBePublished = canBePublishedTo(cell.row.original.approvalStatus);
-    const tooltipId = `publish-name-${cell.row.original.creativeId}`;
-
-    if (canBePublished) {
-        return <div className={`crm-publish-name`}>{cell.row.original.creativeName}</div>;
-    } else {
-        return (
-            <div
-                className={`crm-publish-name disabled`}
-                {...renderTooltipProps(tooltipId, copy.publish.disabledCreativeTooltip)}>
-                {cell.row.original.creativeName}
-                {renderTooltip(tooltipId, copy.publish.disabledCreativeTooltip)}
-            </div>
-        );
-    }
-};

package/src/components/publish-wizard/publish/CrMPublishPreviewCell.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { Button } from '../../..';
-import { ICON_EYE } from '../../../constants/icons';
-
-interface ICrMPublishPreviewCellProps {
-    cell: any;
-    crmBaseUrl: string;
-    creativeLibraryId: string;
-}
-
-export const CrMPublishPreviewCell: React.FC<ICrMPublishPreviewCellProps> = (props) => {
-    const { cell, crmBaseUrl, creativeLibraryId } = props;
-    const creativeId = cell.row.original.creativeId;
-    const previewUrl = `${crmBaseUrl}/library/${creativeLibraryId}/creative/${creativeId}/versions/`;
-
-    return (
-        <a
-            href={previewUrl}
-            target='_blank'>
-            <Button
-                style='subtle'
-                size='small'>
-                {ICON_EYE}
-            </Button>
-        </a>
-    );
-};

package/src/components/publish-wizard/publish/CrMPublishStatusCell.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { CREATIVE_STATUS_LABELS } from '../../../constants/publish';
-
-interface ICrMPublishStatusCellProps {
-    cell: any;
-}
-
-export const CrMPublishStatusCell: React.FC<ICrMPublishStatusCellProps> = (props) => {
-    const { cell } = props;
-    return (
-        CREATIVE_STATUS_LABELS[cell.row.original.approvalStatus] || cell.row.original.approvalStatus
-    );
-};