@imposium-hub/components 2.15.0-2 → 2.16.0-0

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

@@ -0,0 +1,159 @@
+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/AssetsTableComplexTagCell.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Tag from '../Tag/Tag';
+import Tag from '../tag/Tag';
 import TextField from '../text-field/TextField';
 import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';

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

@@ -0,0 +1,106 @@
+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/assets/AssetsTableTagsPivot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
-import Tag from '../Tag/Tag';
+import Tag from '../tag/Tag';
 import TextField from '../text-field/TextField';
 import { addAssetTag, deleteAssetTag, deleteAssetTags } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';

package/src/components/assets/AssetsTypeIcon.tsx

@@ -24,6 +24,8 @@ interface IAssetsTypeIconProps {
 }
 
 const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps) => {
+    if (!p.type) return null;
+
     const style = {
         color: ASSET_COLORS[p.type]
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -15,7 +15,7 @@ import SelectField from '../select-field/SelectField';
 import { DELIMITER_OPTIONS } from '../../constants/assets';
 import TextField from '../text-field/TextField';
 import AssetsTableTagsPivot from './AssetsTableTagsPivot';
-import Tag from '../Tag/Tag';
+import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
 import { ICON_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';

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

@@ -1,6 +1,54 @@
 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;
@@ -15,6 +63,33 @@ interface IChangeReportNodeProps {
     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,
@@ -25,16 +100,12 @@ const ChangeReportNode: React.FC<IChangeReportNodeProps> = ({ node, defaultExpan
     const [expanded, setExpanded] = React.useState(defaultExpanded);
 
     const hasChildren = node.children && node.children.length > 0;
-    const hasValues = node.oldValue !== undefined || node.newValue !== undefined;
+    const hasOldValue = node.oldValue !== undefined && node.oldValue !== null;
+    const hasNewValue = node.newValue !== undefined && node.newValue !== null;
+    const hasValues = hasOldValue || hasNewValue;
 
-    const oldDisplay =
-        node.oldValue === null || node.oldValue === '' || node.oldValue === undefined
-            ? '*empty*'
-            : node.oldValue;
-    const newDisplay =
-        node.newValue === null || node.newValue === '' || node.newValue === undefined
-            ? '*empty*'
-            : node.newValue;
+    const oldDisplay = !hasOldValue || node.oldValue === '' ? '*empty*' : node.oldValue;
+    const newDisplay = !hasNewValue || node.newValue === '' ? '*empty*' : node.newValue;
 
     return (
         <div
@@ -54,16 +125,33 @@ const ChangeReportNode: React.FC<IChangeReportNodeProps> = ({ node, defaultExpan
                 <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'>
-                        <span className='change-report-value change-report-value--old'>
-                            {oldDisplay}
-                        </span>
-                        <span className='change-report-value-arrow'>&rarr;</span>
-                        <span className='change-report-value change-report-value--new'>
-                            {newDisplay}
-                        </span>
+                        {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>

package/src/components/controlled-list/ControlledList.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import ControlledList from './ControlledList';
-import Tag from '../Tag/Tag';
+import Tag from '../tag/Tag';
 
 export default {
     title: 'ControlledList',