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

package/src/components/variables-dropdown/VariableDropdown.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { ICON_TIMES, ICON_WARNING } from '../../constants/icons';
-import { ControlListType } from '../controlled-list/ControlledList';
-import Button from '../button/Button';
-import { renderTooltip, renderTooltipProps } from '../Tooltip';
-import { generateUUID } from '../../Util';
-
-interface IVariableDropDownProps {
-    returnVariables: boolean;
-    type: ControlListType;
-    inventory: any;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    activeOverride?: string;
-}
-
-const VariableDropDown: React.FC<IVariableDropDownProps> = (props: IVariableDropDownProps) => {
-    const { returnVariables, inventory, setOverride, removeOverride, activeOverride } = props;
-
-    const type = props.type === 'textarea' ? 'text' : props.type;
-    const include = type ? [type.toLowerCase()] : [];
-
-    const variableOptions = [];
-
-    if (returnVariables) {
-        for (const key in inventory) {
-            if (inventory.hasOwnProperty(key)) {
-                const variable = inventory[key];
-
-                if (include.indexOf(variable.type.toLowerCase()) !== -1 || include.length === 0) {
-                    variableOptions.push(variable);
-                }
-            }
-        }
-
-        const warningTooltipId = `imposium-button-${generateUUID()}`;
-        const warning = (
-            <div
-                className='warning'
-                {...renderTooltipProps(warningTooltipId, 'No variable preview')}>
-                {ICON_WARNING}
-                {renderTooltip(warningTooltipId, 'No variable preview')}
-            </div>
-        );
-
-        const removeButton = (
-            <div className='buttons'>
-                <Button
-                    onClick={() => removeOverride()}
-                    size='small'
-                    style='subtle'
-                    color='danger'>
-                    {ICON_TIMES}
-                </Button>
-            </div>
-        );
-
-        const variableOption = () => {
-            const options = variableOptions.map((variable) => {
-                const hasPreviewItem =
-                    variable.previewItem.src !== null && variable.previewItem.src !== undefined;
-
-                const className = `variable-name ${
-                    activeOverride === variable.name ? 'active' : ''
-                }`;
-
-                const showRemoveButton = activeOverride === variable.name ? removeButton : null;
-                const showWarning = !hasPreviewItem && warning;
-
-                const onClickHandler = () => {
-                    if (activeOverride === variable.name) return;
-                    setOverride(variable);
-                };
-
-                return (
-                    <div
-                        className='color-options-menu'
-                        key={variable.id.toString()}>
-                        <div
-                            className='color-option-list'
-                            onClick={onClickHandler}>
-                            <div className={className}>
-                                <p>{variable.name}</p>
-                                {showRemoveButton}
-                                {showWarning}
-                            </div>
-                        </div>
-                    </div>
-                );
-            });
-
-            return options;
-        };
-        return <>{variableOption()}</>;
-    }
-};
-
-export default VariableDropDown;

package/src/constants/fonts.ts

@@ -1,296 +0,0 @@
-export const DEFAULT_FONTS = [
-    {
-        name: 'Arial',
-        family: 'Arial',
-        file: 'Arial.ttf',
-        weight: 400
-    },
-    {
-        name: 'Abril Fatface',
-        family: 'Abril Fatface',
-        file: 'AbrilFatface-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Alfa Slab One',
-        family: 'Alfa Slab One',
-        file: 'AlfaSlabOne-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Amatic SC',
-        family: 'Amatic SC',
-        file: 'AmaticSC-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Anton',
-        family: 'Anton',
-        file: 'Anton-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Assistant',
-        family: 'Assistant',
-        file: 'Assistant-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Assistant Bold',
-        family: 'Assistant',
-        file: 'Assistant-VariableFont_wght.ttf',
-        weight: 700
-    },
-    {
-        name: 'Bangers',
-        family: 'Bangers',
-        file: 'Bangers-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Cabin Sketch',
-        family: 'Cabin Sketch',
-        file: 'CabinSketch-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Caveat Brush',
-        family: 'Caveat Brush',
-        file: 'CaveatBrush-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Creepster',
-        family: 'Creepster',
-        file: 'Creepster-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Crete Round',
-        family: 'Crete Round',
-        file: 'CreteRound-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Fjalla One',
-        family: 'Fjalla One',
-        file: 'FjallaOne-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Fredericka the Great',
-        family: 'Fredericka the Great',
-        file: 'FrederickatheGreat-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Gentium Basic',
-        family: 'Gentium Basic',
-        file: 'GentiumBasic-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Lato',
-        family: 'Lato',
-        file: 'Lato-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Lobster',
-        family: 'Lobster',
-        file: 'Lobster-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Love Ya Like A Sister',
-        family: 'Love Ya Like A Sister',
-        file: 'LoveYaLikeASister-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Monoton',
-        family: 'Monoton',
-        file: 'Monoton-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Merriweather',
-        family: 'Merriweather',
-        file: 'Merriweather-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Montserrat',
-        family: 'Montserrat',
-        file: 'Montserrat-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Montserrat Bold',
-        family: 'Montserrat',
-        file: 'Montserrat-VariableFont_wght.ttf',
-        weight: 700
-    },
-    {
-        name: 'Montserrat ExtraBold',
-        family: 'Montserrat',
-        file: 'Montserrat-VariableFont_wght.ttf',
-        weight: 800
-    },
-    {
-        name: 'Noto Sans',
-        family: 'Noto Sans',
-        file: 'NotoSans-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Noto Serif',
-        family: 'Noto Serif',
-        file: 'NotoSerif-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Open Sans',
-        family: 'Open Sans',
-        file: 'OpenSans-VariableFont_wdth,wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Open Sans Condensed',
-        family: 'Open Sans Condensed',
-        file: 'OpenSansCondensed-Light.ttf',
-        weight: 300
-    },
-    {
-        name: 'Oswald',
-        family: 'Oswald',
-        file: 'Oswald-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Patua One',
-        family: 'Patua One',
-        file: 'PatuaOne-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Playfair Display',
-        family: 'Playfair Display',
-        file: 'PlayfairDisplay-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Poor Story',
-        family: 'Poor Story',
-        file: 'PoorStory-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Poppins',
-        family: 'Poppins',
-        file: 'Poppins-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Poppins Bold',
-        family: 'Poppins',
-        file: 'Poppins-Bold.ttf',
-        weight: 700
-    },
-    {
-        name: 'PT Sans Narrow',
-        family: 'PT Sans Narrow',
-        file: 'PTSansNarrow-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Quicksand',
-        family: 'Quicksand',
-        file: 'Quicksand-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Raleway',
-        family: 'Raleway',
-        file: 'Raleway-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Raleway Bold',
-        family: 'Raleway',
-        file: 'Raleway-VariableFont_wght.ttf',
-        weight: 700
-    },
-    {
-        name: 'Raleway Black',
-        family: 'Raleway',
-        file: 'Raleway-VariableFont_wght.ttf',
-        weight: 900
-    },
-    {
-        name: 'Roboto',
-        family: 'Roboto',
-        file: 'Roboto-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Roboto Condensed',
-        family: 'Roboto Condensed',
-        file: 'RobotoCondensed-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Rubik',
-        family: 'Rubik',
-        file: 'Rubik-VariableFont_wght.ttf',
-        weight: 400
-    },
-    {
-        name: 'Rubik Bold',
-        family: 'Rubik',
-        file: 'Rubik-VariableFont_wght.ttf',
-        weight: 700
-    },
-    // {
-    //     name: 'Rubik Black',
-    //     family: 'Rubik',
-    //     file: 'Rubik-VariableFont_wght.ttf',
-    //     weight: 900,
-    // },
-    {
-        name: 'Shrikhand',
-        family: 'Shrikhand',
-        file: 'Shrikhand-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Source Sans Pro',
-        family: 'Source Sans Pro',
-        file: 'SourceSansPro-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Suez One',
-        family: 'Suez One',
-        file: 'SuezOne-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Titillium Web',
-        family: 'Titillium Web',
-        file: 'TitilliumWeb-Regular.ttf',
-        weight: 400
-    },
-    {
-        name: 'Titillium Web Black',
-        family: 'Titillium Web',
-        file: 'TitilliumWeb-Black.ttf',
-        weight: 900
-    },
-    {
-        name: 'Varela Round',
-        family: 'Varela Round',
-        file: 'VarelaRound-Regular.ttf',
-        weight: 400
-    }
-];

package/src/constants/snippets.ts

@@ -1,27 +0,0 @@
-export interface IChangeReportNode {
-    label: string;
-    status: 'added' | 'removed' | 'modified';
-    oldValue?: string;
-    newValue?: string;
-    layerType?: string;
-    varType?: string;
-    children?: IChangeReportNode[];
-}
-
-export interface IChangeReportSection {
-    section:
-        | 'PROJECT SETTINGS'
-        | 'VARIABLES'
-        | 'SCENES & ENCODING'
-        | 'ASSETS'
-        | 'COMPOSITIONS & LAYERS';
-    nodes: IChangeReportNode[];
-}
-
-export interface IPublishLogEntry {
-    id: string;
-    version: number | null;
-    message: string | null;
-    changes: IChangeReportSection[] | null;
-    date_created: number | null;
-}

package/src/services/CrmApi.ts

@@ -1,73 +0,0 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
-import { API_AUTH_TYPES } from '../components/font-picker/font-manager/constants';
-
-export interface ICrmApi {
-    init(baseUrl: string, credentials: any);
-    getQrDesigns(creativeLibraryId: string): Promise<any | Error>;
-}
-
-export default class CrmApi {
-    private http: AxiosInstance;
-
-    private authType;
-
-    private abortController;
-
-    public getToken;
-
-    public init(baseURL: string, credentials: any): void {
-        const headers = {};
-
-        if (typeof credentials === 'string') {
-            this.authType = API_AUTH_TYPES.ACCESS_KEY;
-            this.http = axios.create({
-                baseURL,
-                headers: {
-                    Authorization: `Auth0Bearer ${credentials}`
-                }
-            });
-        } else {
-            this.authType = API_AUTH_TYPES.TOKEN;
-            this.http = axios.create({
-                baseURL,
-                headers
-            });
-        }
-
-        this.getToken = credentials;
-        this.abortController = new AbortController();
-    }
-
-    public cancelAllPendingRequests(): void {
-        this.abortController.abort();
-        this.abortController = new AbortController();
-    }
-
-    private doRequest = async (config: AxiosRequestConfig): Promise<any> => {
-        if (this.authType === API_AUTH_TYPES.TOKEN) {
-            const token = await this.getToken();
-            config.headers = {
-                Authorization: `Auth0Bearer ${token}`
-            };
-        }
-
-        config.signal = this.abortController.signal;
-
-        return new Promise((resolve, reject) => {
-            this.http(config)
-                .then((res: AxiosResponse) => {
-                    resolve(res.data);
-                })
-                .catch((e: AxiosError) => {
-                    reject(e);
-                });
-        });
-    };
-
-    public getQrDesigns = (creativeLibraryId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/qrm/v1/qrcodedesigns/creativelibraries/${creativeLibraryId}`
-        });
-    };
-}

package/src/test/setup.ts

@@ -1,91 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-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

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

package/vitest.config.ts

@@ -1,31 +0,0 @@
-/// <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'
-        }
-    }
-});