@imposium-hub/components 2.11.6-0 → 2.12.0

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -3,9 +3,6 @@ import { generateUUID } from '../../Util';
 import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
 import { ICON_TIMES_CIRCLE, ICON_INFO_CIRCLE } from '../../constants/icons';
 import Button from '../button/Button';
-import { fieldLabel } from '../config-variable-button/ConfigVariableButton';
-import ControlledList from '../controlled-list/ControlledList';
-import { getOverrideHandler } from '../../constants/variables';
 
 interface IFieldWrapperProps {
     buttons?: any;
@@ -18,20 +15,6 @@ interface IFieldWrapperProps {
     labelPosition?: string;
     labelWidth?: string | number;
     header?: boolean;
-
-    type?: any;
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-
-    buttonGroup?: boolean;
-
-    previewMultiplier?: number;
 }
 
 interface IFieldWrapperState {
@@ -60,44 +43,17 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     private getLabelClass() {
-        const { propKey, label, labelPosition } = this.props;
-
-        if (!label && propKey) {
-            return 'label-left';
-        } else if (!label) {
+        if (!this.props.label) {
             return 'no-label';
         } else {
-            const labelPos = labelPosition ? labelPosition : 'left';
+            const labelPos = this.props.labelPosition ? this.props.labelPosition : 'left';
             return `label-${labelPos}`;
         }
     }
 
     private renderLabel() {
         const { showInfo } = this.state;
-        const {
-            info,
-            labelWidth,
-            propKey,
-            showCopyPropIds,
-            inventory,
-            setOverride,
-            onClose,
-            activeOverride,
-            removeOverride,
-            type
-        } = this.props;
-
-        const label = fieldLabel(
-            this.props.label,
-            propKey,
-            showCopyPropIds,
-            type,
-            inventory,
-            (o) => setOverride(o),
-            (o) => onClose(o),
-            activeOverride,
-            () => removeOverride()
-        );
+        const { info, label, labelWidth } = this.props;
 
         const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
         const style = {};
@@ -132,39 +88,9 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const {
-            label,
-            width,
-            header,
-            propKey,
-            override,
-            inventory,
-            type,
-            customClass,
-            buttonGroup,
-            previewMultiplier
-        } = this.props;
+        const { label, width, customClass, header } = this.props;
         const labelJSX = this.renderLabel();
 
-        const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
-
-        const className = hasOverride ? `${customClass} override_variable ${type}` : customClass;
-
-        const children = () => {
-            if (hasOverride && !buttonGroup) {
-                return (
-                    <ControlledList
-                        items={[previewItem]}
-                        removable={true}
-                        type={type}
-                        previewMultiplier={previewMultiplier}
-                    />
-                );
-            } else {
-                return this.props.children;
-            }
-        };
-
         const style = {};
         let fieldProps = {};
         if (!label) {
@@ -178,13 +104,13 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
             <>
                 {header && this.renderButtons()}
                 <div
-                    className={`form-field ${className} ${this.getLabelClass()}`}
+                    className={`form-field ${customClass} ${this.getLabelClass()}`}
                     style={style}>
                     {labelJSX}
                     <div
                         className={`form-field-content ${this.getLabelClass()}`}
                         {...fieldProps}>
-                        {children()}
+                        {this.props.children}
                         {!header && this.renderButtons()}
                     </div>
                     {renderTooltip(this.tooltipId, this.props.tooltip)}

package/src/components/number-field/NumberField.tsx

@@ -18,17 +18,6 @@ interface INumberFieldProps {
     max?: number;
     onBlur?(e): void;
     focusOnMount?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-
-    previewMultiplier?: number;
 }
 
 interface INumberFieldState {
@@ -133,24 +122,17 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         let error: string = null;
 
         const {
+            label,
             placeholder,
             width,
             readOnly,
+            buttons,
             tooltip,
             info,
             labelPosition,
             labelWidth,
             min,
-            max,
-            showCopyPropIds,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride,
-            previewMultiplier
+            max
         } = this.props;
         let value: any = this.state.value;
         if (value === null) {
@@ -172,23 +154,15 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         return (
             <FieldWrapper
                 customClass={`number-field ${this.state.error ? 'invalid' : ''}`}
-                label={this.props.label}
+                // draggableValue = {true}
+                // onDrag = {(v)=>this.handleLabelDrag(v)}
+                label={label}
                 tooltip={tooltip}
-                buttons={this.props.buttons}
+                buttons={buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='number'
-                previewMultiplier={previewMultiplier}>
+                width={width}>
                 <input
                     ref={this.inputRef}
                     type='number'

package/src/components/select-field/SelectField.tsx

@@ -23,15 +23,6 @@ interface ISelectFieldProps {
     showCopy?: boolean;
     onNotification?(e): void;
     onError?(e): void;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps> {
@@ -77,6 +68,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
 
     public render() {
         const {
+            label,
             showCopy,
             options,
             value,
@@ -88,15 +80,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
             info,
             labelPosition,
             labelWidth,
-            disableFirst,
-            propKey,
-            override,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            showCopyPropIds,
-            activeOverride
+            disableFirst
         } = this.props;
 
         const selectValue = value === null || value === undefined ? '' : value;
@@ -163,22 +147,13 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         return (
             <FieldWrapper
                 customClass='select-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={btns}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'>
+                width={width}>
                 <select
                     value={selectValue}
                     onChange={(e) => this.onChange(e)}

package/src/constants/copy.ts

@@ -284,7 +284,3 @@ export const confirm: any = {
     no: 'No',
     cancel: 'Cancel'
 };
-
-export const fontField = {
-    fontNotFound: 'Font not found'
-};

package/src/constants/icons.tsx

@@ -74,13 +74,12 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import {
-    faBracketsCurly,
     faCloudArrowUp,
     faFileCirclePlus,
     faFilePen,
     faFilters
 } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -233,7 +232,3 @@ export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
 export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
 
 export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;
-
-export const ICON_BRACKET_CURLY = <FontAwesomeIcon icon={faBracketsCurly} />;
-
-export const ICON_WARNING = <FontAwesomeIcon icon={faTriangleExclamation} />;

package/src/constants/variables.ts

@@ -63,19 +63,3 @@ export const RGBAtoHexA = (red, green, blue, alpha) => {
     if (a.length === 1) a = '0' + a;
     return '#' + r + g + b + a;
 };
-
-export const getOverrideHandler = (propKey, override, inventory) => {
-    const propKeys = propKey ? propKey.split('.') : [];
-
-    const getOverride = () => {
-        if (propKeys.length === 0) return undefined;
-        return propKeys.reduce((acc, key) => acc?.[key], override);
-    };
-
-    const hasOverride = getOverride();
-
-    const previewItem =
-        hasOverride && inventory[hasOverride] ? inventory[hasOverride].previewItem.src : null;
-
-    return { hasOverride, previewItem };
-};

package/src/index.ts

@@ -7,7 +7,7 @@ import Button from './components/button/Button';
 import ButtonMenu from './components/button-menu/ButtonMenu';
 import ButtonMenuItem from './components/button-menu/ButtonMenuItem';
 import Card from './components/card/Card';
-import ControlledList, { ControlListType } from './components/controlled-list/ControlledList';
+import ControlledList from './components/controlled-list/ControlledList';
 import DataTable from './components/data-table/DataTable';
 import DataTablePaginator from './components/data-table/DataTablePaginator';
 import Modal from './components/modal/Modal';
@@ -164,10 +164,6 @@ import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { openConfirmModal } from './utils/modal';
 import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
-import TextAreaAutocomplete from './components/text-area-autocomplete/TextAreaAutocomplete';
-import IconToggle from './components/icon-toggle/IconToggle';
-import { DEFAULT_FONTS } from './constants/fonts';
-import FontField from './components/font-field/FontField';
 
 export {
     ProjectDropdown,
@@ -328,10 +324,5 @@ export {
     CopyPropIdButton,
     ConfirmModal,
     IConfirmModalProps,
-    openConfirmModal,
-    TextAreaAutocomplete,
-    ControlListType,
-    IconToggle,
-    DEFAULT_FONTS,
-    FontField
+    openConfirmModal
 };

package/src/services/API.ts

@@ -161,6 +161,8 @@ export interface IImposiumAPI {
     removeQueueAssoc(queueId: string, storyId: string);
     getQueueStories(config: any, itemsPerPage: number);
     cancelAllPendingRequests();
+    getTTSVoices(params: any);
+    getCustomVoice(voiceId: string);
     getToken: any;
 }
 
@@ -1804,4 +1806,59 @@ export default class API {
             url
         });
     };
+
+    public getTTSVoices = (params: any): Promise<any | Error> => {
+        const {
+            page,
+            page_size,
+            selected_voice_id,
+            search,
+            language,
+            accent,
+            category,
+            gender,
+            age
+        } = params;
+        let url = `/text-to-speech/voices?service=ElevenLabs&page=${page}&page_size=${page_size}`;
+
+        if (selected_voice_id) {
+            url += `&selected_voice_id=${selected_voice_id}`;
+        }
+
+        if (search) {
+            url += `&search=${search}`;
+        }
+
+        if (language) {
+            url += `&language=${language}`;
+        }
+
+        if (accent) {
+            url += `&accent=${accent}`;
+        }
+
+        if (category) {
+            url += `&category=${category}`;
+        }
+
+        if (gender) {
+            url += `&gender=${gender}`;
+        }
+
+        if (age) {
+            url += `&age=${age}`;
+        }
+
+        return this.doRequest({
+            method: 'GET',
+            url
+        });
+    };
+
+    public getCustomVoice = (voiceId: string): Promise<any | Error> => {
+        return this.doRequest({
+            method: 'GET',
+            url: `/text-to-speech/voice?service=ElevenLabs&id=${voiceId}`
+        });
+    };
 }

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

@@ -1,141 +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);
-        close();
-    };
-
-    const removeOverrideHandler = () => {
-        removeOverride();
-        close();
-    };
-    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) => 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?: string;
-
-    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;