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

package/src/constants/copy.ts

@@ -155,6 +155,7 @@ export const publish = {
     loadingChangesMessage: 'Loading changes...',
     publishNotesLabel: 'Publish notes',
     publishNotesPlaceholder: 'Describe the changes in this version...',
+    publishNotesMaxLength: 2000,
 
     // change report status labels
     statusAdded: 'Added',
@@ -162,13 +163,13 @@ export const publish = {
     statusModified: 'Modified',
 
     // publish
-    publishStepTitle: 'STEP 2: Publish your Project',
+    publishStepTitle: 'STEP 1: Publish your Project',
     publishStepTitleFromCrM: 'STEP 1: Publish your Project to selected Creatives',
     publishStepDesc:
         "Your project needs to be published before your changes can be seen. If you haven't made any changes since the last time you published, you can skip to the next step.",
 
     // distribute
-    distributeStepTitle: 'STEP 3: How do you want your users to view their video?',
+    distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
     distributeStepTitleFromCrM: 'STEP 2: Run a test batch or return to Creative Manager?',
     distributeStepDesc:
         'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',

package/src/constants/icons.tsx

@@ -60,6 +60,11 @@ import { faJs } from '@fortawesome/free-brands-svg-icons/faJs';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons/faHashtag';
+import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
+import { faVolumeUp } from '@fortawesome/free-solid-svg-icons/faVolumeUp';
+import { faPalette } from '@fortawesome/free-solid-svg-icons/faPalette';
+import { faQrcode } from '@fortawesome/free-solid-svg-icons/faQrcode';
 import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
 import {
     faArrowDown,
@@ -162,6 +167,11 @@ export const ICON_ALIGN_RIGHT = <FontAwesomeIcon icon={faAlignRight} />;
 export const ICON_ALIGN_CENTER = <FontAwesomeIcon icon={faAlignCenter} />;
 
 export const ICON_BARS = <FontAwesomeIcon icon={faBars} />;
+export const ICON_HASHTAG = <FontAwesomeIcon icon={faHashtag} />;
+export const ICON_TOGGLE_ON = <FontAwesomeIcon icon={faToggleOn} />;
+export const ICON_VOLUME_UP = <FontAwesomeIcon icon={faVolumeUp} />;
+export const ICON_PALETTE = <FontAwesomeIcon icon={faPalette} />;
+export const ICON_QRCODE = <FontAwesomeIcon icon={faQrcode} />;
 
 export const ICON_ARROW_UP = <FontAwesomeIcon icon={faArrowToTop} />;
 

package/src/constants/snippets.ts

@@ -3,6 +3,8 @@ export interface IChangeReportNode {
     status: 'added' | 'removed' | 'modified';
     oldValue?: string;
     newValue?: string;
+    layerType?: string;
+    varType?: string;
     children?: IChangeReportNode[];
 }
 

package/src/index.ts

@@ -23,7 +23,7 @@ import TextAreaField from './components/text-area-field/TextAreaField';
 import ToastService from './components/toast-service/ToastService';
 import SliderField from './components/slider-field/SliderField';
 import ColorField from './components/color-field/ColorField';
-import Tag from './components/Tag/Tag';
+import Tag from './components/tag/Tag';
 import HRule from './components/h-rule/HRule';
 import Section from './components/section/Section';
 import Spinner from './components/spinner/Spinner';

package/src/redux/actions/publish.ts

@@ -74,10 +74,15 @@ export const cancelPublish = (api: IImposiumAPI, storyId: string) => {
     };
 };
 
-export const publishVersion = (api: IImposiumAPI, storyId: string, creativeIds?: string[]) => {
+export const publishVersion = (
+    api: IImposiumAPI,
+    storyId: string,
+    message?: string,
+    creativeIds?: string[]
+) => {
     return (dispatch) => {
         return new Promise((resolve, reject) => {
-            api.runPublish(storyId, '', creativeIds)
+            api.runPublish(storyId, message || '', creativeIds)
                 .then((d) => {
                     dispatch(getStoryPublishStatus(api, storyId))
                         .then()

package/src/test/setup.ts

@@ -0,0 +1,91 @@
+// Test setup file for Vitest
+import React from 'react';
+import { beforeAll, vi } from 'vitest';
+
+// Mock hotkeys-js
+vi.mock('hotkeys-js', () => {
+    const mockHotkeys = vi.fn();
+    mockHotkeys.filter = vi.fn();
+    mockHotkeys.unbind = vi.fn();
+    return {
+        default: mockHotkeys
+    };
+});
+
+// Mock Font Awesome icons - return simple div elements
+vi.mock('../../constants/icons', () => ({
+    ICON_CHECK: '<div data-testid="icon-check">✓</div>',
+    ICON_EDIT: '<div data-testid="icon-edit">✎</div>',
+    ICON_SEARCH: '<div data-testid="icon-search">🔍</div>',
+    ICON_PLUS: '<div data-testid="icon-plus">+</div>',
+    ICON_CLIPBOARD: '<div data-testid="icon-clipboard">📋</div>',
+    ICON_TIMES: '<div data-testid="icon-times">×</div>',
+    ICON_CIRCLE_NOTCH: '<div data-testid="icon-loading">⟳</div>',
+    ICON_CARET_UP: '<div data-testid="icon-caret-up">▲</div>',
+    ICON_CARET_DOWN: '<div data-testid="icon-caret-down">▼</div>'
+}));
+
+// Mock react-textarea-autocomplete
+vi.mock('@imposium-hub/react-textarea-autocomplete', () => ({
+    default: vi.fn(() => 'input')
+}));
+
+// Mock utility functions
+vi.mock('../../Util', () => ({
+    generateUUID: vi.fn(() => 'test-uuid-123'),
+    filterHotkeys: vi.fn(() => true)
+}));
+
+// Mock FieldWrapper to simplify testing
+vi.mock('../../components/field-wrapper/FieldWrapper', () => ({
+    default: ({ children, customClass, buttons, info, label }) =>
+        React.createElement(
+            'div',
+            {
+                'className': `field-wrapper ${customClass || ''}`,
+                'data-testid': 'field-wrapper'
+            },
+            [
+                label && React.createElement('label', { key: 'label' }, label),
+                children,
+                info && React.createElement('div', { key: 'info', className: 'field-info' }, info),
+                buttons &&
+                    React.createElement(
+                        'div',
+                        { key: 'buttons', className: 'field-buttons' },
+                        buttons
+                    )
+            ]
+        )
+}));
+
+// Mock Button component to include proper accessibility
+vi.mock('../../components/button/Button', () => ({
+    default: ({ children, onClick, tooltip, style, color, ...props }) =>
+        React.createElement(
+            'button',
+            {
+                'role': 'button',
+                'className': `imposium-btn btn-${style || 'default'} ${color || ''}`,
+                onClick,
+                'data-tooltip-content': typeof tooltip === 'string' ? tooltip : tooltip?.content,
+                ...props
+            },
+            children
+        )
+}));
+
+// Setup global mocks
+beforeAll(() => {
+    // Mock clipboard API
+    Object.assign(navigator, {
+        clipboard: {
+            writeText: vi.fn(() => Promise.resolve())
+        }
+    });
+
+    // Mock hotkeys global object
+    global.hotkeys = vi.fn();
+    global.hotkeys.filter = vi.fn();
+    global.hotkeys.unbind = vi.fn();
+});

package/src/test/utils.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { vi, MockedFunction } from 'vitest';
+
+// Interface for mock props with common component callbacks
+interface IMockProps {
+    onChange: MockedFunction<any>;
+    onSubmit: MockedFunction<any>;
+    onBlur: MockedFunction<any>;
+    onFocus: MockedFunction<any>;
+    onNotification: MockedFunction<any>;
+    onError: MockedFunction<any>;
+    doSubmit: MockedFunction<any>;
+    [key: string]: any;
+}
+
+// Custom render function that can be extended with providers if needed
+const customRender = (ui: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => {
+    return render(ui, {
+        // Add any global providers here if needed in the future
+        ...options
+    });
+};
+
+// Re-export everything from React Testing Library
+export * from '@testing-library/react';
+
+// Override render method
+export { customRender as render };
+
+// Helper functions for common test scenarios
+export const createMockProps = (overrides: IMockProps) => ({
+    onChange: vi.fn(),
+    onSubmit: vi.fn(),
+    onBlur: vi.fn(),
+    onFocus: vi.fn(),
+    onNotification: vi.fn(),
+    onError: vi.fn(),
+    doSubmit: vi.fn(),
+    ...overrides
+});
+
+// Helper to wait for async updates
+export const waitForUpdate = () => new Promise((resolve) => setTimeout(resolve, 0));

package/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}

package/tsconfig.json

@@ -14,5 +14,5 @@
         "moduleResolution": "node"
     },
     "include": ["src"],
-    "exclude": ["node_modules", "dist"]
+    "exclude": ["node_modules", "dist", "**/*.test.*", "**/*.spec.*", "src/test/**/*"]
 }

package/vitest.config.ts

@@ -0,0 +1,31 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        setupFiles: ['./src/test/setup.ts'],
+        include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+        exclude: ['node_modules', 'dist', '.git', '.storybook'],
+        globals: true,
+        coverage: {
+            provider: 'v8',
+            reporter: ['text'],
+            reportsDirectory: './coverage',
+            include: ['src/components/**/*.{ts,tsx}'],
+            exclude: [
+                'src/**/*.test.{ts,tsx}',
+                'src/**/*.stories.{ts,tsx}',
+                'src/test/**',
+                'src/constants/**',
+                'src/utils/**'
+            ],
+            skipFull: false
+        }
+    },
+    resolve: {
+        alias: {
+            '@': '/src'
+        }
+    }
+});