@imposium-hub/components 2.16.0-0 → 3.0.0-0

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

@@ -1,159 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { legacy_createStore as createStore } from 'redux';
-
-let capturedDoSubmit: (value: string) => void;
-let capturedRemoveHandlers: Record<string, () => void> = {};
-
-vi.mock('../tag/Tag', () => ({
-    default: ({ copy, removeHandler }: any) => {
-        capturedRemoveHandlers[copy] = removeHandler;
-        return (
-            <div
-                data-testid={`tag-${copy}`}
-                className='mock-tag'>
-                <span>{copy}</span>
-                <button
-                    data-testid={`remove-${copy}`}
-                    onClick={removeHandler}>
-                    x
-                </button>
-            </div>
-        );
-    }
-}));
-
-vi.mock('../text-field/TextField', () => ({
-    default: ({ submittable, submittableType, placeholder, value, doSubmit, suggestions }: any) => {
-        capturedDoSubmit = doSubmit;
-        return (
-            <div
-                data-testid='mock-text-field'
-                data-submittable={submittable}
-                data-submittable-type={submittableType}
-                data-placeholder={placeholder}
-                data-value={value}
-                data-suggestions={JSON.stringify(suggestions || [])}>
-                <button
-                    data-testid='submit-trigger'
-                    onClick={() => doSubmit('new-tag')}>
-                    Add
-                </button>
-            </div>
-        );
-    }
-}));
-
-vi.mock('../../redux/actions/asset-list', () => ({
-    addAssetTag: vi.fn((_api, _id, _tags) => ({ type: 'MOCK_ADD_TAG' })),
-    deleteAssetTag: vi.fn((_api, _id, _tag) => ({ type: 'MOCK_DELETE_TAG' })),
-    default: {}
-}));
-
-import AssetsTableComplexTagCellMemoized from './AssetsTableComplexTagCell';
-import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
-
-const MOCK_ASSET_ID = 'asset-999';
-const MOCK_API = { addAssetTag: vi.fn(), deleteAssetTag: vi.fn() };
-const MOCK_SUGGESTIONS = ['alpha', 'beta', 'gamma'];
-
-const createMockStore = (assetTags: string[] = MOCK_SUGGESTIONS) => {
-    const initialState = { assetTags };
-    return createStore((state = initialState) => state);
-};
-
-const buildCellProp = (tags: string[] = ['tag-a', 'tag-b']) => ({
-    row: {
-        original: { id: MOCK_ASSET_ID, tags }
-    }
-});
-
-const renderComponent = (tagOverrides?: string[], storeOverrides?: string[]) => {
-    capturedRemoveHandlers = {};
-    const store = createMockStore(storeOverrides);
-    const cell = buildCellProp(tagOverrides);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableComplexTagCellMemoized
-                cell={cell}
-                api={MOCK_API}
-            />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableComplexTagCell', () => {
-    it('renders existing tags as Tag components', () => {
-        const tags = ['tag-a', 'tag-b', 'tag-c'];
-        const { getByTestId } = renderComponent(tags);
-
-        tags.forEach((tag) => {
-            expect(getByTestId(`tag-${tag}`)).toBeTruthy();
-        });
-    });
-
-    it('deduplicates tags before rendering', () => {
-        const { container } = renderComponent(['dup', 'dup', 'unique']);
-        const renderedTags = container.querySelectorAll('.mock-tag');
-
-        expect(renderedTags).toHaveLength(2);
-    });
-
-    it('renders the TextField with correct props', () => {
-        const { getByTestId } = renderComponent();
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-submittable')).toBe('true');
-        expect(textField.getAttribute('data-submittable-type')).toBe('add');
-        expect(textField.getAttribute('data-placeholder')).toBe('+');
-        expect(textField.getAttribute('data-value')).toBe('');
-    });
-
-    it('passes assetTags from store as suggestions', () => {
-        const suggestions = ['x', 'y', 'z'];
-        const { getByTestId } = renderComponent([], suggestions);
-        const textField = getByTestId('mock-text-field');
-
-        const suggestionsAttr = textField.getAttribute('data-suggestions');
-        expect(suggestionsAttr).toBeTruthy();
-        expect(JSON.parse(suggestionsAttr)).toEqual(suggestions);
-    });
-
-    it('dispatches addAssetTag when submitting a new tag', () => {
-        renderComponent(['existing']);
-
-        capturedDoSubmit('brand-new');
-
-        expect(addAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'brand-new');
-    });
-
-    it('does not dispatch addAssetTag when submitting a duplicate tag', () => {
-        vi.mocked(addAssetTag).mockClear();
-        renderComponent(['already-here']);
-
-        capturedDoSubmit('already-here');
-
-        expect(addAssetTag).not.toHaveBeenCalled();
-    });
-
-    it('dispatches deleteAssetTag when removing a tag', () => {
-        renderComponent(['removable']);
-
-        capturedRemoveHandlers['removable']();
-
-        expect(deleteAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'removable');
-    });
-
-    it('renders with no tags', () => {
-        const { container, getByTestId } = renderComponent([]);
-        const renderedTags = container.querySelectorAll('.mock-tag');
-
-        expect(renderedTags).toHaveLength(0);
-        expect(getByTestId('mock-text-field')).toBeTruthy();
-    });
-});

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

@@ -1,106 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-const MOCK_FORMATTED_DATE = '4/9/2026 3:00 PM';
-
-vi.mock('../../Util', async (importOriginal) => {
-    const actual = (await importOriginal()) as any;
-    return {
-        ...actual,
-        formatDateDefault: vi.fn(() => MOCK_FORMATTED_DATE)
-    };
-});
-
-import AssetsTableDateCellMemoized from './AssetsTableDateCell';
-import { formatDateDefault } from '../../Util';
-
-const MOCK_UNIX_TIMESTAMP = 1776013200;
-
-const buildCellProp = (values: Record<string, any>) => ({
-    row: { values }
-});
-
-describe('AssetsTableDateCell', () => {
-    it('renders date_created when date_created prop is true and value exists', () => {
-        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={true}
-            />
-        );
-
-        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
-        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
-    });
-
-    it('renders date_modified when date_created is false', () => {
-        const cell = buildCellProp({ date_modified: MOCK_UNIX_TIMESTAMP });
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={false}
-            />
-        );
-
-        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
-        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
-    });
-
-    it('falls through to date_updated when date_modified is absent', () => {
-        const cell = buildCellProp({ date_updated: MOCK_UNIX_TIMESTAMP });
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={false}
-            />
-        );
-
-        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
-        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
-    });
-
-    it('prefers date_modified over date_updated when both exist', () => {
-        const modifiedTimestamp = 1776099600;
-        const cell = buildCellProp({
-            date_modified: modifiedTimestamp,
-            date_updated: MOCK_UNIX_TIMESTAMP
-        });
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={false}
-            />
-        );
-
-        expect(formatDateDefault).toHaveBeenCalledWith(modifiedTimestamp);
-        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
-    });
-
-    it('skips date_created value when date_created prop is false', () => {
-        vi.mocked(formatDateDefault).mockClear();
-        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={false}
-            />
-        );
-
-        expect(formatDateDefault).not.toHaveBeenCalled();
-        expect(container.innerHTML).toBe('');
-    });
-
-    it('returns null when no date values are present', () => {
-        const cell = buildCellProp({});
-        const { container } = render(
-            <AssetsTableDateCellMemoized
-                cell={cell}
-                date_created={false}
-            />
-        );
-
-        expect(container.innerHTML).toBe('');
-    });
-});

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;