@imposium-hub/components 1.45.5 → 1.46.0

package/src/constants/api.ts

@@ -1,4 +1,3 @@
-
 export const JOB_TYPES = {
     RUN_CUT: 'make-cut',
     PROCESS_BASE_VIDEO: 'process-base-video',

package/src/constants/assets.ts

@@ -3,16 +3,16 @@ export const ASSET_DISTRO = 'https://d188rqu2y6x0ew.cloudfront.net';
 export const ASSET_ORIGIN = 'https://imposium-footage.s3.us-east-1.amazonaws.com';
 
 export const ASSET_TYPES = {
-    VIDEO_COMPOSITION : 'video_composition',
-    STATIC_COMPOSITION : 'static_composition',
-    VIDEO : 'video',
-    IMAGE : 'image',
-    TEMPLATE : 'template',
-    AUDIO : 'audio',
-    IMAGE_SEQUENCE : 'image_sequence',
-    FONT : 'font',
-    LUT : 'lut',
-    ALL : 'all'
+    VIDEO_COMPOSITION: 'video_composition',
+    STATIC_COMPOSITION: 'static_composition',
+    VIDEO: 'video',
+    IMAGE: 'image',
+    TEMPLATE: 'template',
+    AUDIO: 'audio',
+    IMAGE_SEQUENCE: 'image_sequence',
+    FONT: 'font',
+    LUT: 'lut',
+    ALL: 'all'
 };
 
 export const ASSET_COLORS = {
@@ -21,5 +21,5 @@ export const ASSET_COLORS = {
     [ASSET_TYPES.AUDIO]: 'rgba(72,177,222,1)',
     [ASSET_TYPES.TEMPLATE]: 'rgba(208, 80, 35, 1)',
     [ASSET_TYPES.VIDEO_COMPOSITION]: 'rgba(215, 22, 22, 1)',
-    [ASSET_TYPES.IMAGE_SEQUENCE]: 'rgba(241,191,21, 1)',
+    [ASSET_TYPES.IMAGE_SEQUENCE]: 'rgba(241,191,21, 1)'
 };

package/src/constants/compositions.ts

@@ -1,36 +1,36 @@
 import { generateUUID } from '../Util';
 
 export interface IStaticComposition {
-    width : number;
-    height : number;
-    background_color : string;
-    layers : ITextLayer[];
+    width: number;
+    height: number;
+    background_color: string;
+    layers: ITextLayer[];
 }
 
 export interface ITextLayer {
-    id : string;
-    x : number;
-    y : number;
-    width : number;
-    height : number;
-    rotation : number;
-    name : string;
-    content : string;
-    color : string;
-    background_color : string;
-    font_size : number;
-    font_weight : number;
-    font_type : string;
-    font : string;
-    custom_font_id? : string;
-    custom_font_url? : string;
-    letter_spacing : number;
-    word_spacing : number;
-    line_height : number;
-    horizontal_alignment : string;
-    vertical_alignment : string;
-    text_wrap : boolean;
-    text_fit : boolean;
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    name: string;
+    content: string;
+    color: string;
+    background_color: string;
+    font_size: number;
+    font_weight: number;
+    font_type: string;
+    font: string;
+    custom_font_id?: string;
+    custom_font_url?: string;
+    letter_spacing: number;
+    word_spacing: number;
+    line_height: number;
+    horizontal_alignment: string;
+    vertical_alignment: string;
+    text_wrap: boolean;
+    text_fit: boolean;
 }
 
 export const FONT_TYPES = {
@@ -132,23 +132,22 @@ export const TEXT_SIZE_OPTIONS = [
 
 export const VARIABLE_TYPES = {
     TEXT: 'text',
-    NUMBER : 'number',
-    BOOLEAN : 'boolean',
-    ENUM : 'enum',
-    IMAGE : 'image',
+    NUMBER: 'number',
+    BOOLEAN: 'boolean',
+    ENUM: 'enum',
+    IMAGE: 'image',
     VIDEO: 'video',
-    AUDIO : 'audio'
+    AUDIO: 'audio'
 };
 
-export const getNewCompositionLayer = () : ITextLayer => {
-
-    const base = {...NEW_TEXT_LAYER};
+export const getNewCompositionLayer = (): ITextLayer => {
+    const base = { ...NEW_TEXT_LAYER };
     base.id = generateUUID();
 
     return base;
 };
 
-const NEW_TEXT_LAYER : ITextLayer = {
+const NEW_TEXT_LAYER: ITextLayer = {
     id: null,
     x: 0,
     y: 0,
@@ -156,20 +155,20 @@ const NEW_TEXT_LAYER : ITextLayer = {
     height: 100,
     rotation: 0,
     name: 'New Layer',
-    content : '',
-    color : '#000000',
-    background_color : 'transparent',
-    font_size : 24,
-    font_type : 'standard',
+    content: '',
+    color: '#000000',
+    background_color: 'transparent',
+    font_size: 24,
+    font_type: 'standard',
     font_weight: 400,
-    font : DEFAULT_FONT,
+    font: DEFAULT_FONT,
     custom_font_id: null,
     custom_font_url: null,
     letter_spacing: null,
     word_spacing: null,
     line_height: null,
-    horizontal_alignment : 'center',
-    vertical_alignment : 'center',
-    text_wrap : true,
-    text_fit : true
+    horizontal_alignment: 'center',
+    vertical_alignment: 'center',
+    text_wrap: true,
+    text_fit: true
 };

package/src/constants/copy.ts

@@ -1,4 +1,3 @@
-
 export const assets = {
     tooltipFilter: 'Filter by Asset type',
     previewNotAvailable: 'Preview Not Available for this Asset Type',
@@ -13,14 +12,15 @@ export const assets = {
         image_sequence: 'Image Sequences (Archive)',
         template: 'Custom Template',
         static_composition: 'Template',
-        font: 'Font Files',
+        font: 'Font Files'
     },
     uploads: {
         noUploads: 'There are currently no assets uploading...',
         preparePhase: 'Preparing asset...',
         autoTagInput: 'Tag by filename',
         assignToStoryInput: 'Assign to Story',
-        assignToStoryInfo: 'If selected, any assets uploaded will only be available to use with the currently selected story.',
+        assignToStoryInfo:
+            'If selected, any assets uploaded will only be available to use with the currently selected story.',
         uploadButton: 'Upload'
     },
     tags: {
@@ -95,7 +95,8 @@ export const compositions = {
     tooltipLayerHeight: 'Layer height, in pixels',
     textOptions: 'Text Options',
     textLayerContent: 'Content',
-    tooltipTextLayerContent: 'The copy rendered in this layer. Wrap variables like so: {{variable_id}}.'
+    tooltipTextLayerContent:
+        'The copy rendered in this layer. Wrap variables like so: {{variable_id}}.'
 };
 
 export const publish = {
@@ -105,31 +106,36 @@ export const publish = {
 
     // publish
     publishStepTitle: 'STEP 1: Publish your Project',
-    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.',
+    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 2: How do you want your users to view their video?',
-    distributeStepDesc: 'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
+    distributeStepDesc:
+        'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
     compositionError: 'Please Select Composition',
 
     // webpage
     btnWebsite: 'Webpage',
     webpageTitle: 'STEP 3: Webpage',
     webPageHosted: 'Webpage hosted on Imposium',
-    webpageDesc: 'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your story.',
+    webpageDesc:
+        'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your story.',
     sampleWebpage: 'Download sample webpage',
 
     // email
     btnEmail: 'Email',
     exporting: 'Exporting CSV... (please wait)',
     emailTitle: 'STEP 3: Upload a CSV file with your user information in it.',
-    emailDesc: 'You can download a sample CSV with fields to populate as a starting point. Or you can upload one that already has the data in it.',
+    emailDesc:
+        'You can download a sample CSV with fields to populate as a starting point. Or you can upload one that already has the data in it.',
     downloadSampleCsvLink: 'Download Sample CSV',
     uploadCsv: 'Upload Your CSV UserList',
     generatingLink: 'STEP 4: Generating embed links',
     downloadLink: 'STEP 5: Download Your Userlist CSV file',
     btnDownload: 'Download CSV',
-    generatingLinkDesc: 'Please wait while we generate the link for your users. This may take few minutes.',
+    generatingLinkDesc:
+        'Please wait while we generate the link for your users. This may take few minutes.',
     missingColumns: 'Error: missing required columns',
     renderBatchFailed: 'Error: Failed to render batch',
     createBatchFailed: 'Error: Failed to create batch',
@@ -137,9 +143,11 @@ export const publish = {
     embeddedCodeCopyError: 'Error copying embed code.',
     creatingLinks: 'Creating User Links... (please wait)',
     importingData: 'Importing Data... (please wait)',
-    downloadDesc: 'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
+    downloadDesc:
+        'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
     titleMissingColumns: 'Warning: ',
-    csvMissingColumns: 'Some of your column names did not match up with the variables in the story. Please ensure these variables line up and then re-upload the csv: ',
+    csvMissingColumns:
+        'Some of your column names did not match up with the variables in the story. Please ensure these variables line up and then re-upload the csv: ',
     csvMatchColumns: 'Please match the column(s) provided to the story variables:',
     // export
     exportBatchOfVideo: 'Export batch of videos',
@@ -147,7 +155,8 @@ export const publish = {
     // hubspot
     btnHubspot: 'Hubspot',
     hubspotTitle: 'STEP 3: Copy Hubspot code snippet',
-    hubspotDesc: 'Copy the provided embed code into HubSpot. Replace the placeholder variable values with HubSpot template strings, to splice in your user data.',
+    hubspotDesc:
+        'Copy the provided embed code into HubSpot. Replace the placeholder variable values with HubSpot template strings, to splice in your user data.',
     saveChanges: 'Save Changes',
     embeddedCode: 'Embed Url: ',
 
@@ -173,12 +182,13 @@ export const integration = {
     errorCreatingCreds: ' Error creating credentials, contact your Imposium admin for support.',
     errorGettingCreds: ' Error getting credentials, contact your Imposium admin for support.',
     documentation: 'Documentation',
-    docParagraph: 'Use the links below for more information on integrating Imposium into your application.',
+    docParagraph:
+        'Use the links below for more information on integrating Imposium into your application.',
     js: 'JavaScript SDK',
     jsSdkLink: 'https://docs.imposium.com/js-sdk/#/',
     restLink: 'https://docs.imposium.com',
     rest: 'REST API',
-    sdkArchiveSuffix: ' - JS SDK Integration.zip',
+    sdkArchiveSuffix: ' - JS SDK Integration.zip'
 };
 
 export const header = {
@@ -186,12 +196,13 @@ export const header = {
     working: 'Using Working Copy',
     statusError: 'Error getting story status',
     publishJobError: 'Error creating publish story job',
-    publishPollError: 'Error polling publish job status',
+    publishPollError: 'Error polling publish job status'
 };
 
 export const project = {
     compName: 'Composition',
-    tooltipCompId : 'Unique ID of the selected composition. Used to render that specific composition via the API and Imposium JS-SDK.',
+    tooltipCompId:
+        'Unique ID of the selected composition. Used to render that specific composition via the API and Imposium JS-SDK.'
 };
 
 export const BATCHES_COPY = {

package/src/constants/dnd.ts

@@ -1,3 +1,3 @@
-export const ASSET_DND_TYPES : any = {
-    ASSET_NAME: 'asset_name',
+export const ASSET_DND_TYPES: any = {
+    ASSET_NAME: 'asset_name'
 };

package/src/constants/icons.tsx

@@ -59,118 +59,118 @@ 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';
 
-export const ICON_VIDEO = <FontAwesomeIcon icon = {faVideo}/>;
+export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
-export const ICON_IMAGE = <FontAwesomeIcon icon = {faImage}/>;
+export const ICON_IMAGE = <FontAwesomeIcon icon={faImage} />;
 
-export const ICON_STICKY_NOTE = <FontAwesomeIcon icon = {faStickyNote}/>;
+export const ICON_STICKY_NOTE = <FontAwesomeIcon icon={faStickyNote} />;
 
-export const ICON_FILTER = <FontAwesomeIcon icon = {faFilter}/>;
+export const ICON_FILTER = <FontAwesomeIcon icon={faFilter} />;
 
-export const ICON_FILE_VIDEO = <FontAwesomeIcon icon = {faFileVideo}/>;
+export const ICON_FILE_VIDEO = <FontAwesomeIcon icon={faFileVideo} />;
 
-export const ICON_FILE_AUDIO = <FontAwesomeIcon icon = {faFileAudio}/>;
+export const ICON_FILE_AUDIO = <FontAwesomeIcon icon={faFileAudio} />;
 
-export const ICON_FILE_IMAGE = <FontAwesomeIcon icon = {faFileImage}/>;
+export const ICON_FILE_IMAGE = <FontAwesomeIcon icon={faFileImage} />;
 
-export const ICON_FILE_ARCHIVE = <FontAwesomeIcon icon = {faFileArchive}/>;
+export const ICON_FILE_ARCHIVE = <FontAwesomeIcon icon={faFileArchive} />;
 
-export const ICON_IMAGE_SEQ_TYPE = <FontAwesomeIcon icon = {faImages}/>;
+export const ICON_IMAGE_SEQ_TYPE = <FontAwesomeIcon icon={faImages} />;
 
-export const ICON_AUDIO_TYPE = <FontAwesomeIcon icon = {faHeadphones}/>;
+export const ICON_AUDIO_TYPE = <FontAwesomeIcon icon={faHeadphones} />;
 
-export const ICON_COPY = <FontAwesomeIcon icon = {faCopy}/>;
+export const ICON_COPY = <FontAwesomeIcon icon={faCopy} />;
 
-export const ICON_TIMES = <FontAwesomeIcon icon = {faTimes}/>;
+export const ICON_TIMES = <FontAwesomeIcon icon={faTimes} />;
 
-export const ICON_CIRCLE_NOTCH = <FontAwesomeIcon icon = {faCircleNotch}/>;
+export const ICON_CIRCLE_NOTCH = <FontAwesomeIcon icon={faCircleNotch} />;
 
-export const ICON_CARET_UP = <FontAwesomeIcon icon = {faCaretUp}/>;
+export const ICON_CARET_UP = <FontAwesomeIcon icon={faCaretUp} />;
 
-export const ICON_CARET_DOWN = <FontAwesomeIcon icon = {faCaretDown}/>;
+export const ICON_CARET_DOWN = <FontAwesomeIcon icon={faCaretDown} />;
 
-export const ICON_CHECK = <FontAwesomeIcon icon = {faCheck} />;
+export const ICON_CHECK = <FontAwesomeIcon icon={faCheck} />;
 
-export const ICON_EDIT = <FontAwesomeIcon icon = {faEdit}/>;
+export const ICON_EDIT = <FontAwesomeIcon icon={faEdit} />;
 
-export const ICON_SEARCH = <FontAwesomeIcon icon = {faSearch}/>;
+export const ICON_SEARCH = <FontAwesomeIcon icon={faSearch} />;
 
-export const ICON_PLUS = <FontAwesomeIcon icon = {faPlus}/>;
+export const ICON_PLUS = <FontAwesomeIcon icon={faPlus} />;
 
-export const ICON_CLIPBOARD = <FontAwesomeIcon icon = {faClipboard}/>;
+export const ICON_CLIPBOARD = <FontAwesomeIcon icon={faClipboard} />;
 
-export const ICON_EXCLAIMATION_TRIANGLE = <FontAwesomeIcon icon = {faExclamationTriangle}/>;
+export const ICON_EXCLAIMATION_TRIANGLE = <FontAwesomeIcon icon={faExclamationTriangle} />;
 
-export const ICON_ANGLE_LEFT = <FontAwesomeIcon icon = {faAngleLeft}/>;
+export const ICON_ANGLE_LEFT = <FontAwesomeIcon icon={faAngleLeft} />;
 
-export const ICON_ANGLE_DOUBLE_LEFT = <FontAwesomeIcon icon = {faAngleDoubleLeft}/>;
+export const ICON_ANGLE_DOUBLE_LEFT = <FontAwesomeIcon icon={faAngleDoubleLeft} />;
 
-export const ICON_ANGLE_RIGHT = <FontAwesomeIcon icon = {faAngleRight}/>;
+export const ICON_ANGLE_RIGHT = <FontAwesomeIcon icon={faAngleRight} />;
 
-export const ICON_ANGLE_DOUBLE_RIGHT = <FontAwesomeIcon icon = {faAngleDoubleRight}/>;
+export const ICON_ANGLE_DOUBLE_RIGHT = <FontAwesomeIcon icon={faAngleDoubleRight} />;
 
-export const ICON_CHEVRON_DOWN = <FontAwesomeIcon icon = {faChevronDown}/>;
+export const ICON_CHEVRON_DOWN = <FontAwesomeIcon icon={faChevronDown} />;
 
-export const ICON_CHEVRON_UP = <FontAwesomeIcon icon = {faChevronUp}/>;
+export const ICON_CHEVRON_UP = <FontAwesomeIcon icon={faChevronUp} />;
 
-export const ICON_USER_LOCK = <FontAwesomeIcon icon = {faUserLock}/>;
+export const ICON_USER_LOCK = <FontAwesomeIcon icon={faUserLock} />;
 
-export const ICON_BAN = <FontAwesomeIcon icon = {faBan}/>;
+export const ICON_BAN = <FontAwesomeIcon icon={faBan} />;
 
-export const SORT_UP = <FontAwesomeIcon icon = {faSortUp} />;
+export const SORT_UP = <FontAwesomeIcon icon={faSortUp} />;
 
-export const SORT_DOWN = <FontAwesomeIcon icon = {faSortDown} />;
+export const SORT_DOWN = <FontAwesomeIcon icon={faSortDown} />;
 
-export const ICON_TIMES_CIRCLE = <FontAwesomeIcon icon = {faTimesCircle} />;
+export const ICON_TIMES_CIRCLE = <FontAwesomeIcon icon={faTimesCircle} />;
 
-export const ICON_INFO_CIRCLE = <FontAwesomeIcon icon = {faInfoCircle} />;
+export const ICON_INFO_CIRCLE = <FontAwesomeIcon icon={faInfoCircle} />;
 
-export const ICON_FONT = <FontAwesomeIcon icon = {faFont}/>;
+export const ICON_FONT = <FontAwesomeIcon icon={faFont} />;
 
-export const ICON_ALIGN_LEFT = <FontAwesomeIcon icon = {faAlignLeft}/>;
+export const ICON_ALIGN_LEFT = <FontAwesomeIcon icon={faAlignLeft} />;
 
-export const ICON_ALIGN_RIGHT = <FontAwesomeIcon icon = {faAlignRight}/>;
+export const ICON_ALIGN_RIGHT = <FontAwesomeIcon icon={faAlignRight} />;
 
-export const ICON_ALIGN_CENTER = <FontAwesomeIcon icon = {faAlignCenter}/>;
+export const ICON_ALIGN_CENTER = <FontAwesomeIcon icon={faAlignCenter} />;
 
-export const ICON_BARS = <FontAwesomeIcon icon = {faBars}/>;
+export const ICON_BARS = <FontAwesomeIcon icon={faBars} />;
 
-export const ICON_ARROW_UP = <FontAwesomeIcon icon = {faArrowToTop}/>;
+export const ICON_ARROW_UP = <FontAwesomeIcon icon={faArrowToTop} />;
 
-export const ICON_ARROW_CENTER_V = <FontAwesomeIcon icon = {faArrowsV}/>;
+export const ICON_ARROW_CENTER_V = <FontAwesomeIcon icon={faArrowsV} />;
 
-export const ICON_ARROW_DOWN = <FontAwesomeIcon icon = {faArrowToBottom}/>;
+export const ICON_ARROW_DOWN = <FontAwesomeIcon icon={faArrowToBottom} />;
 
-export const ICON_ARROW_LEFT = <FontAwesomeIcon icon = {faArrowToLeft}/>;
+export const ICON_ARROW_LEFT = <FontAwesomeIcon icon={faArrowToLeft} />;
 
-export const ICON_ARROW_CENTER_H = <FontAwesomeIcon icon = {faArrowsH}/>;
+export const ICON_ARROW_CENTER_H = <FontAwesomeIcon icon={faArrowsH} />;
 
-export const ICON_ARROW_RIGHT = <FontAwesomeIcon icon = {faArrowToRight}/>;
+export const ICON_ARROW_RIGHT = <FontAwesomeIcon icon={faArrowToRight} />;
 
-export const ICON_COMPRESS = <FontAwesomeIcon icon = {faCompress}/>;
+export const ICON_COMPRESS = <FontAwesomeIcon icon={faCompress} />;
 
-export const ICON_EXPAND = <FontAwesomeIcon icon = {faExpand}/>;
+export const ICON_EXPAND = <FontAwesomeIcon icon={faExpand} />;
 
-export const ICON_EXPAND_ARROWS = <FontAwesomeIcon icon = {faExpandArrowsAlt}/>;
+export const ICON_EXPAND_ARROWS = <FontAwesomeIcon icon={faExpandArrowsAlt} />;
 
-export const ICON_LAYER_GROUP = <FontAwesomeIcon icon = {faLayerGroup}/>;
+export const ICON_LAYER_GROUP = <FontAwesomeIcon icon={faLayerGroup} />;
 
-export const ICON_CUBE = <FontAwesomeIcon icon = {faCube}/>;
+export const ICON_CUBE = <FontAwesomeIcon icon={faCube} />;
 
-export const ICON_FILE_CODE = <FontAwesomeIcon icon = {faFileCode}/>;
+export const ICON_FILE_CODE = <FontAwesomeIcon icon={faFileCode} />;
 
-export const ICON_HELP = <FontAwesomeIcon icon = {faQuestionCircle}/>;
+export const ICON_HELP = <FontAwesomeIcon icon={faQuestionCircle} />;
 
-export const ICON_HUBSPOT = <FontAwesomeIcon icon = {faHubspot}/>;
+export const ICON_HUBSPOT = <FontAwesomeIcon icon={faHubspot} />;
 
-export const ICON_EMAIL = <FontAwesomeIcon icon = {faEnvelope}/>;
+export const ICON_EMAIL = <FontAwesomeIcon icon={faEnvelope} />;
 
-export const ICON_GLOBE = <FontAwesomeIcon icon = {faGlobe}/>;
+export const ICON_GLOBE = <FontAwesomeIcon icon={faGlobe} />;
 
-export const ICON_PROJECT_DIAGRAM = <FontAwesomeIcon icon = {faProjectDiagram}/>;
+export const ICON_PROJECT_DIAGRAM = <FontAwesomeIcon icon={faProjectDiagram} />;
 
-export const ICON_JS = <FontAwesomeIcon icon = {faJs}/>;
+export const ICON_JS = <FontAwesomeIcon icon={faJs} />;
 
-export const ICON_DOWNLOAD = <FontAwesomeIcon icon = {faDownload}/>;
+export const ICON_DOWNLOAD = <FontAwesomeIcon icon={faDownload} />;
 
-export const ICON_UPLOAD = <FontAwesomeIcon icon = {faUpload} />;
+export const ICON_UPLOAD = <FontAwesomeIcon icon={faUpload} />;

package/src/constants/player.ts

@@ -1,2 +1 @@
-
-export const DEFAULT_PADDING : number = 35;
+export const DEFAULT_PADDING: number = 35;

package/src/constants/previewer.ts

@@ -1,4 +1,4 @@
-export const OUTPUT_TYPES : any = {
+export const OUTPUT_TYPES: any = {
     LOG: 'log',
     IMAGE: 'image',
     VIDEO: 'video'

package/src/constants/variables.ts

@@ -1,19 +1,19 @@
-
 export const VARIABLE_TYPES = {
     TEXT: 'text',
-    NUMBER : 'number',
-    BOOLEAN : 'boolean',
-    ENUM : 'enum',
-    IMAGE : 'image',
+    NUMBER: 'number',
+    BOOLEAN: 'boolean',
+    ENUM: 'enum',
+    IMAGE: 'image',
     VIDEO: 'video',
-    AUDIO : 'audio'
+    AUDIO: 'audio'
 };
 
 export const BOOLEAN_DEFAULT_OPTIONS = [
     {
         value: true,
         label: 'True'
-    }, {
+    },
+    {
         value: false,
         label: 'False'
     }