@imposium-hub/components 2.16.0 → 3.0.0-1

package/src/components/assets/AssetsTableSelectFilter.test.tsx

@@ -1,119 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { legacy_createStore as createStore } from 'redux';
-
-vi.mock('../checkbox-field/CheckboxField', () => ({
-    default: ({ label, propagate, value, onChange }: any) => (
-        <div
-            data-testid='mock-checkbox-field'
-            data-label={label}
-            data-propagate={propagate}
-            data-value={value}>
-            <input
-                type='checkbox'
-                checked={value}
-                onChange={() => onChange()}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../../redux/actions/selected-assets', () => ({
-    selectAll: vi.fn(() => ({ type: 'selectedAssets/SELECT_ALL' })),
-    resetSelection: vi.fn(() => ({ type: 'selectedAssets/RESET' }))
-}));
-
-import AssetsTableSelectFilterMemoized from './AssetsTableSelectFilter';
-
-const createMockStore = (selectedAssets: string[] = []) => {
-    const initialState = { selectedAssets };
-    return createStore((state: any = initialState, action: any) => {
-        switch (action.type) {
-            case 'selectedAssets/SELECT_ALL':
-                return {
-                    ...state,
-                    selectedAssets: ['asset-1', 'asset-2', 'asset-3']
-                };
-            case 'selectedAssets/RESET':
-                return {
-                    ...state,
-                    selectedAssets: []
-                };
-            default:
-                return state;
-        }
-    });
-};
-
-const renderComponent = (selectedAssets: string[] = []) => {
-    const store = createMockStore(selectedAssets);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableSelectFilterMemoized />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableSelectFilter', () => {
-    it('renders CheckboxField with correct props when no assets are selected', () => {
-        const { getByTestId } = renderComponent();
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-label')).toBe('');
-        expect(checkbox.getAttribute('data-propagate')).toBe('false');
-        expect(checkbox.getAttribute('data-value')).toBe('false');
-    });
-
-    it('renders CheckboxField as checked when assets are selected', () => {
-        const { getByTestId } = renderComponent(['asset-1', 'asset-2']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-
-    it('dispatches selectAll when checkbox is clicked and no assets are selected', () => {
-        const { getByRole, store } = renderComponent();
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toEqual(['asset-1', 'asset-2', 'asset-3']);
-    });
-
-    it('dispatches resetSelection when checkbox is clicked and assets are selected', () => {
-        const { getByRole, store } = renderComponent(['asset-1', 'asset-2']);
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toEqual([]);
-    });
-
-    it('shows unchecked state when selectedAssets array is empty', () => {
-        const { getByTestId } = renderComponent([]);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('false');
-    });
-
-    it('shows checked state when selectedAssets array has one item', () => {
-        const { getByTestId } = renderComponent(['single-asset']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-
-    it('shows checked state when selectedAssets array has multiple items', () => {
-        const { getByTestId } = renderComponent(['asset-1', 'asset-2', 'asset-3']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-});

package/src/components/assets/AssetsTableStatusCell.test.tsx

@@ -1,60 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render } from '@testing-library/react';
-import AssetsTableStatusCellMemoized from './AssetsTableStatusCell';
-
-const buildCellProp = (overrides: Record<string, any> = {}) => ({
-    row: {
-        original: {
-            processing: false,
-            ...overrides
-        }
-    }
-});
-
-const renderComponent = (overrides: Record<string, any> = {}) => {
-    return render(<AssetsTableStatusCellMemoized cell={buildCellProp(overrides)} />);
-};
-
-describe('AssetsTableStatusCell', () => {
-    it('renders with complete status when processing is false', () => {
-        const { container } = renderComponent({ processing: false });
-        const statusCell = container.querySelector('.asset-status-cell');
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusCell).toBeTruthy();
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders with processing status when processing is true', () => {
-        const { container } = renderComponent({ processing: true });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator processing');
-    });
-
-    it('renders with complete status when processing is undefined', () => {
-        const { container } = renderComponent({ processing: undefined });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders with complete status when processing is null', () => {
-        const { container } = renderComponent({ processing: null });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders the correct DOM structure', () => {
-        const { container } = renderComponent();
-        const statusCell = container.querySelector('.asset-status-cell');
-        const statusIndicator = statusCell?.querySelector('.status-indicator');
-
-        expect(statusCell).toBeTruthy();
-        expect(statusIndicator).toBeTruthy();
-        expect(statusCell?.children).toHaveLength(1);
-        expect(statusCell?.firstChild).toEqual(statusIndicator);
-    });
-});

package/src/components/change-report/ChangeReportTree.tsx

@@ -1,213 +0,0 @@
-import * as React from 'react';
-import { IChangeReportNode, IChangeReportSection } from '../../constants/snippets';
-import * as copy from '../../constants/copy';
-import {
-    ICON_IMAGE,
-    ICON_VIDEO,
-    ICON_LAYER_GROUP,
-    ICON_CODE,
-    ICON_FILE_ARCHIVE,
-    ICON_IMAGE_SEQ_TYPE,
-    ICON_FONT,
-    ICON_AUDIO_TYPE,
-    ICON_HASHTAG,
-    ICON_TOGGLE_ON,
-    ICON_BARS,
-    ICON_PALETTE,
-    ICON_QRCODE
-} from '../../constants/icons';
-
-const TYPE_ICONS: Record<string, React.ReactNode> = {
-    // Layer types
-    image: ICON_IMAGE,
-    video: ICON_VIDEO,
-    video_composition: ICON_LAYER_GROUP,
-    html: ICON_CODE,
-    template: ICON_FILE_ARCHIVE,
-    image_sequence: ICON_IMAGE_SEQ_TYPE,
-    text: ICON_FONT,
-    audio: ICON_AUDIO_TYPE,
-    solid: ICON_IMAGE,
-    after_effects: ICON_VIDEO,
-    // Variable types (matches getVariableIcon in Story Editor)
-    number: ICON_HASHTAG,
-    boolean: ICON_TOGGLE_ON,
-    enum: ICON_BARS,
-    color: ICON_PALETTE,
-    qr_code: ICON_QRCODE
-};
-
-const TYPE_COLORS: Record<string, string> = {
-    video: 'rgba(236, 22, 150, 1)',
-    image: 'rgba(241, 191, 21, 1)',
-    audio: 'rgba(72, 177, 222, 1)',
-    template: 'rgba(208, 80, 35, 1)',
-    video_composition: 'rgba(215, 22, 22, 1)',
-    text: 'rgba(71, 212, 125, 1)',
-    image_sequence: 'rgba(241, 191, 21, 1)',
-    html: '#ae6cff',
-    solid: '#AAAAAA',
-    after_effects: 'rgba(236, 22, 150, 1)'
-};
-
-interface IChangeReportTreeProps {
-    sections: IChangeReportSection[] | null;
-    defaultExpanded?: boolean;
-    emptyMessage?: string;
-    loadingMessage?: string;
-}
-
-interface IChangeReportNodeProps {
-    node: IChangeReportNode;
-    defaultExpanded: boolean;
-    depth: number;
-}
-
-const isColorValue = (val: string): boolean => {
-    if (!val) return false;
-    return /^#[0-9a-fA-F]{3,8}$/.test(val) || /^rgba?\(/.test(val);
-};
-
-const ValueDisplay: React.FC<{ value: string }> = ({ value }) => {
-    if (value === '*default*' || value === '*empty*') {
-        // Check if this could be a transparent/default color
-        return <>{value}</>;
-    }
-    if (isColorValue(value)) {
-        return (
-            <>
-                <span className='change-report-color-chip-wrapper'>
-                    <span className='change-report-color-chip-checkerboard' />
-                    <span
-                        className='change-report-color-chip-color'
-                        style={{ backgroundColor: value }}
-                    />
-                </span>
-                {value}
-            </>
-        );
-    }
-    return <>{value}</>;
-};
-
-const STATUS_LABELS: Record<IChangeReportNode['status'], string> = {
-    added: copy.publish.statusAdded,
-    removed: copy.publish.statusRemoved,
-    modified: copy.publish.statusModified
-};
-
-const ChangeReportNode: React.FC<IChangeReportNodeProps> = ({ node, defaultExpanded, depth }) => {
-    const [expanded, setExpanded] = React.useState(defaultExpanded);
-
-    const hasChildren = node.children && node.children.length > 0;
-    const hasOldValue = node.oldValue !== undefined && node.oldValue !== null;
-    const hasNewValue = node.newValue !== undefined && node.newValue !== null;
-    const hasValues = hasOldValue || hasNewValue;
-
-    const oldDisplay = !hasOldValue || node.oldValue === '' ? '*empty*' : node.oldValue;
-    const newDisplay = !hasNewValue || node.newValue === '' ? '*empty*' : node.newValue;
-
-    return (
-        <div
-            className='change-report-node'
-            style={{ paddingLeft: depth * 16 }}>
-            <div className='change-report-node-row'>
-                {hasChildren && (
-                    <span
-                        className={`change-report-toggle ${
-                            expanded ? 'change-report-toggle--expanded' : ''
-                        }`}
-                        onClick={() => setExpanded(!expanded)}>
-                        ▶
-                    </span>
-                )}
-                {!hasChildren && <span className='change-report-toggle-placeholder' />}
-                <span className={`change-report-status change-report-status--${node.status}`}>
-                    {STATUS_LABELS[node.status]}
-                </span>
-                {(node.layerType || node.varType) && TYPE_ICONS[node.layerType || node.varType] && (
-                    <span
-                        className='change-report-layer-icon'
-                        style={
-                            TYPE_COLORS[node.layerType || node.varType]
-                                ? { color: TYPE_COLORS[node.layerType || node.varType] }
-                                : undefined
-                        }>
-                        {TYPE_ICONS[node.layerType || node.varType]}
-                    </span>
-                )}
-                <span className='change-report-label'>{node.label}</span>
-                {hasValues && (
-                    <span className='change-report-values'>
-                        {hasOldValue && (
-                            <span className='change-report-value change-report-value--old'>
-                                <ValueDisplay value={oldDisplay} />
-                            </span>
-                        )}
-                        {hasOldValue && hasNewValue && (
-                            <span className='change-report-value-arrow'>&rarr;</span>
-                        )}
-                        {hasNewValue && (
-                            <span className='change-report-value change-report-value--new'>
-                                <ValueDisplay value={newDisplay} />
-                            </span>
-                        )}
-                    </span>
-                )}
-            </div>
-            {hasChildren && expanded && (
-                <div className='change-report-children'>
-                    {node.children.map((child, i) => (
-                        <ChangeReportNode
-                            key={i}
-                            node={child}
-                            defaultExpanded={defaultExpanded}
-                            depth={depth + 1}
-                        />
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};
-
-const ChangeReportTree: React.FC<IChangeReportTreeProps> = ({
-    sections,
-    defaultExpanded = true,
-    emptyMessage = copy.publish.noChangesMessage,
-    loadingMessage = copy.publish.loadingChangesMessage
-}) => {
-    if (sections === null) {
-        return (
-            <div className='change-report-tree change-report-tree--loading'>{loadingMessage}</div>
-        );
-    }
-
-    if (sections.length === 0) {
-        return <div className='change-report-tree change-report-tree--empty'>{emptyMessage}</div>;
-    }
-
-    return (
-        <div className='change-report-tree'>
-            {sections.map((section, i) => (
-                <div
-                    key={i}
-                    className='change-report-section'>
-                    <div className='change-report-section-heading'>{section.section}</div>
-                    <div className='change-report-section-nodes'>
-                        {section.nodes.map((node, j) => (
-                            <ChangeReportNode
-                                key={j}
-                                node={node}
-                                defaultExpanded={defaultExpanded}
-                                depth={0}
-                            />
-                        ))}
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default ChangeReportTree;

package/src/components/config-variable-button/ConfigVariableButton.tsx

@@ -1,144 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { ICON_BRACKET_CURLY } from '../../constants/icons';
-import Button from '../button/Button';
-import ImposiumDropdown from '../dropdown/Dropdown';
-import moize from 'moize';
-import VariableDropDown from '../variables-dropdown/VariableDropdown';
-import { ControlListType } from '../controlled-list/ControlledList';
-
-interface IConfigVariableButtonProps {
-    type: ControlListType;
-    icon?: any;
-    inventory: any;
-    setOverride?(e): void;
-    onClose?(e): void;
-    removeOverride?(): void;
-    activeOverride?: string;
-}
-
-const ConfigVariableButton: React.FC<IConfigVariableButtonProps> = ({
-    type,
-    inventory,
-    setOverride,
-    onClose,
-    activeOverride,
-    removeOverride,
-    icon
-}) => {
-    const [show, setShow] = useState(false);
-    const variablesButtonRef = useRef();
-
-    const close = () => {
-        setShow(!show);
-        if (onClose) {
-            onClose(!show);
-        }
-    };
-
-    const setOverrideHandler = (o) => {
-        setOverride(o);
-        setShow(!show);
-    };
-
-    const removeOverrideHandler = () => {
-        removeOverride();
-        setShow(!show);
-    };
-
-    return (
-        <>
-            <Button
-                tooltip='Configure Variables'
-                customClass={icon ? 'icon-toggle' : ''}
-                onClick={() => {
-                    close();
-                }}
-                buttonRef={variablesButtonRef}
-                size='small'
-                style='subtle'>
-                {ICON_BRACKET_CURLY}
-            </Button>
-
-            <ImposiumDropdown
-                key='variables-dropdown'
-                position='bottomleft'
-                show={show}
-                toggleRef={variablesButtonRef}
-                customClass='variables'
-                onOutsideClick={() => close()}>
-                <VariableDropDown
-                    returnVariables={show}
-                    type={type}
-                    inventory={inventory}
-                    setOverride={setOverrideHandler}
-                    removeOverride={removeOverrideHandler}
-                    activeOverride={activeOverride}
-                />
-            </ImposiumDropdown>
-        </>
-    );
-};
-
-const mGetConfigVariableButton = (
-    enabled,
-    type,
-    inventory,
-    setOverride,
-    onClose,
-    icon,
-    activeOverride,
-    removeOverride
-) => {
-    if (enabled || activeOverride !== undefined) {
-        return (
-            <ConfigVariableButton
-                type={type}
-                inventory={inventory}
-                setOverride={(o) => setOverride(o)}
-                onClose={(o) => {
-                    if (enabled) onClose(o);
-                }}
-                icon={icon}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-            />
-        );
-    } else {
-        return null;
-    }
-};
-
-export const getConfigVariableButton = moize(mGetConfigVariableButton);
-
-export const fieldLabel = (
-    labelText,
-    propKey,
-    showCopyPropIds,
-    type: string,
-    inventory,
-    setOverride,
-    onClose,
-    activeOverride,
-    removeOverride,
-    icon?
-) => {
-    const label = propKey ? (
-        <span>
-            {labelText}
-            {getConfigVariableButton(
-                showCopyPropIds,
-                type,
-                inventory,
-                (o) => setOverride(o),
-                (o) => onClose(o),
-                icon,
-                activeOverride,
-                removeOverride
-            )}
-        </span>
-    ) : (
-        labelText
-    );
-
-    return label;
-};

package/src/components/font-field/FontField.tsx

@@ -1,78 +0,0 @@
-import FieldWrapper from '../field-wrapper/FieldWrapper';
-import React from 'react';
-import FontPicker from '../font-picker/FontPicker';
-import { fontField } from '../../constants/copy';
-import { DEFAULT_FONTS } from '../../constants/fonts';
-
-interface IFontFieldProps {
-    font: string;
-    availableFonts: any[];
-    apiKey: string;
-    onChange: (font: string) => void;
-    width?: string | number;
-    labelPosition?: string;
-    label?: any;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride: string;
-}
-
-const FontField = (props: IFontFieldProps) => {
-    const {
-        font,
-        availableFonts,
-        apiKey,
-        onChange,
-        width,
-        labelPosition,
-        label,
-        override,
-        showCopyPropIds,
-        propKey,
-        setOverride,
-        removeOverride,
-        inventory,
-        onClose,
-        activeOverride
-    } = props;
-
-    const customAvailableFonts = availableFonts.map((asset) => asset.name);
-    const standardFonts = DEFAULT_FONTS.map((f) => f.name);
-    const availableAssets = [...standardFonts, ...customAvailableFonts].sort();
-    const fontCheck = availableAssets.includes(font);
-    const fontValue = fontCheck ? font : fontField.fontNotFound;
-
-    return (
-        <FieldWrapper
-            customClass='font-field'
-            label={label}
-            labelPosition={labelPosition}
-            width={width}
-            propKey={propKey}
-            showCopyPropIds={showCopyPropIds}
-            inventory={inventory}
-            setOverride={setOverride}
-            onClose={onClose}
-            activeOverride={activeOverride}
-            removeOverride={removeOverride}
-            override={override}
-            type='text'>
-            <FontPicker
-                apiKey={apiKey}
-                activeFontFamily={fontValue}
-                families={availableAssets}
-                defaultFonts={DEFAULT_FONTS}
-                customFonts={availableFonts}
-                onChange={onChange}
-            />
-        </FieldWrapper>
-    );
-};
-
-export default FontField;

package/src/components/icon-toggle/IconToggle.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { getConfigVariableButton } from '../config-variable-button/ConfigVariableButton';
-import { getOverrideHandler } from '../../constants/variables';
-
-interface IIconToggleProps {
-    selected: boolean;
-    onChange(selected: boolean): any;
-    icon: any;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-}
-
-const IconToggle: React.FC<IIconToggleProps> = ({
-    icon,
-    selected,
-    onChange,
-    override,
-    showCopyPropIds,
-    propKey,
-    setOverride,
-    removeOverride,
-    inventory,
-    onClose,
-    activeOverride
-}) => {
-    const content = selected ? icon : null;
-
-    const { hasOverride } = getOverrideHandler(propKey, override, inventory);
-
-    const inputField = () => {
-        if (hasOverride || showCopyPropIds) {
-            return getConfigVariableButton(
-                showCopyPropIds,
-                'boolean',
-                inventory,
-                (o) => setOverride(o),
-                (o) => onClose(o),
-                icon,
-                activeOverride,
-                () => removeOverride()
-            );
-        } else {
-            return (
-                <div
-                    className='icon-toggle'
-                    onClick={() => onChange(!selected)}>
-                    {content}
-                </div>
-            );
-        }
-    };
-
-    return inputField();
-};
-
-export default IconToggle;