@imposium-hub/components 1.43.5 → 1.44.0

package/less/entry.less

@@ -1,6 +1,36 @@
-@import "reset.less";
-@import "colors.less";
-@import "core.less";
-@import "mixins.less";
-@import "font-sizes.less";
-@import "components/**/*.less";
+@import (inline) "reset.less";
+@import (inline) "colors.less";
+@import (inline) "core.less";
+@import (inline) "mixins.less";
+@import (inline) "font-sizes.less";
+@import (inline) "components/align-columns.less";
+@import (inline) "components/assets.less";
+@import (inline) "components/auth-gate.less";
+@import (inline) "components/button-menu.less";
+@import (inline) "components/button.less";
+@import (inline) "components/card.less";
+@import (inline) "components/controlled-list.less";
+@import (inline) "components/data-table.less";
+@import (inline) "components/determinate-loader.less";
+@import (inline) "components/dropdown.less";
+@import (inline) "components/font-preview.less";
+@import (inline) "components/form-field.less";
+@import (inline) "components/header.less";
+@import (inline) "components/horizontal-rule.less";
+@import (inline) "components/modal.less";
+@import (inline) "components/no-access.less";
+@import (inline) "components/player.less";
+@import (inline) "components/preview-not-available.less";
+@import (inline) "components/publish-status-indicator.less";
+@import (inline) "components/publish-wizard.less";
+@import (inline) "components/section.less";
+@import (inline) "components/shortcut-menu.less";
+@import (inline) "components/spinner.less";
+@import (inline) "components/static-composition-editor.less";
+@import (inline) "components/story-previewer.less";
+@import (inline) "components/tabs.less";
+@import (inline) "components/tag.less";
+@import (inline) "components/text.less";
+@import (inline) "components/toast.less";
+@import (inline) "components/tooltip.less";
+@import (inline) "components/variable-default-upload.less";

package/package.json

@@ -1,47 +1,36 @@
 {
   "name": "@imposium-hub/components",
-  "version": "1.43.5",
+  "version": "1.44.0",
   "description": "React & Typescript component / asset library for Imposium front-ends",
-  "main": "dist/components.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
   "scripts": {
-    "test": "./node_modules/.bin/jest",
-    "lint": "tslint -c tslint.json './components/**/*.{ts,tsx}' './services/*.ts' './redux/**/*.ts' './constants/*.ts' './copy/*.ts' './Util.ts'",
-    "lintfix": "tslint -c tslint.json './components/**/*.{ts,tsx}' './services/*.ts' './redux/**/*.ts' './constants/*.ts' './copy/*.ts' './Util.ts' --fix",
-    "build": "node_modules/gulp/bin/gulp.js",
-    "storybook": "start-storybook -p 6006 -s ./dist"
+    "start": "npm run build && npm run watch",
+    "build": "npx concurrently \"npm:build-*\"",
+    "watch": "npx concurrently \"npm:watch-*\"",
+    "watch-less": "npx onchange 'less/**/*.less' -- npm run build-less",
+    "build-less": "npx lessc ./less/entry.less ./dist/styles.less",
+    "build-ts": "npx tsc",
+    "watch-ts": "npx tsc --watch",
+    "lint": "npx eslint \"./src/**/*.*\"",
+    "lint-fix": "npm run lint --fix",
+    "release": "npx np --no-tests",
+    "publish": "npm run lint && npm run build && npm run release"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NickelMedia/Imposium-Hub-Components.git"
   },
-  "author": "Patrick Chisholm",
+  "author": "Greg Webber",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/NickelMedia/Imposium-Hub-Components/issues"
   },
   "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
-  "jest": {
-    "setupFiles": [
-      "./test-shim.js",
-      "./test-setup.js"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx)$": "./test-preprocessor.js"
-    },
-    "testMatch": [
-      "**/*.test.(ts|tsx|js)"
-    ]
-  },
   "dependencies": {
-    "@types/css-font-loading-module": "0.0.4",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/resize-observer-browser": "^0.1.5",
-    "ansi_up": "^4.0.4",
+    "ansi_up": "^5.1.0",
     "auth0-js": "^9.11.3",
     "cogo-toast": "^4.2.3",
     "export-to-csv": "^0.2.1",
@@ -52,17 +41,15 @@
     "moment": "^2.29.1",
     "react-color": "^2.18.0",
     "react-merge-refs": "^1.1.0",
-    "react-moveable": "^0.26.1",
-    "react-table": "^7.7.0",
-    "react-tooltip": "^3.11.1",
-    "ts-loader": "^8.2.0"
+    "react-moveable": "^0.26.1"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "axios": "^0.19.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/pro-light-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "axios": "^0.21.1",
     "hotkeys-js": "^3.6.12",
     "localforage": "^1.7.3",
     "react": "^17.0.1",
@@ -78,64 +65,44 @@
     "react-tooltip": "3.11.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/register": "^7.5.5",
-    "@fortawesome/fontawesome-common-types": "^0.2.34",
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/pro-light-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@types/enzyme": "^3.10.2",
-    "@types/jest": "^24.0.15",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/pro-light-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-docs": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addon-storysource": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/react": "^6.4.22",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
     "axios": "^0.21.1",
-    "babel-loader": "^8.0.2",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "fancy-log": "^1.3.3",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^3.10.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-htmlmin": "^5.0.1",
-    "gulp-imagemin": "^6.1.0",
-    "gulp-less": "^4.0.1",
-    "gulp-newer": "^1.4.0",
-    "gulp-plumber": "^1.2.0",
-    "gulp-replace": "^1.0.0",
-    "gulp-sourcemaps": "^2.6.4",
-    "hotkeys-js": "^3.7.2",
-    "install-peers": "^1.0.3",
-    "jest": "^26.6.3",
-    "less": "^3.8.1",
-    "less-plugin-autoprefix": "^2.0.0",
-    "less-plugin-glob": "^2.0.2",
+    "concurrently": "^7.1.0",
+    "eslint": "^8.14.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "hotkeys-js": "^3.6.12",
+    "less": "^4.1.2",
+    "less-plugin-clean-css": "^1.5.1",
     "localforage": "^1.7.3",
-    "react": "^17.0.2",
+    "np": "^7.6.1",
+    "onchange": "^7.1.0",
+    "react": "^17.0.1",
     "react-autosuggest": "^9.4.3",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.10.2",
     "react-dropzone": "^10.1.6",
-    "react-redux": "^5.1.2",
+    "react-redux": "^5.0.7",
     "react-resize-detector": "^6.7.1",
     "react-spinners": "^0.6.1",
-    "react-test-renderer": "^16.8.6",
+    "react-table": "^7.7.0",
+    "react-tooltip": "3.11.1",
     "run-sequence": "^2.2.1",
     "storybook-dark-mode": "^1.0.8",
-    "tslint": "^5.20.0",
-    "typescript": "^4.3.5",
-    "webpack-bundle-analyzer": "^3.5.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-stream": "^6.1.2"
+    "typescript": "^4.6.3"
   }
 }

package/{Util.ts → src/Util.ts}

@@ -241,12 +241,12 @@ export const mimetypeConformsToOverlay = (overlayAccepts : string, file : File)
 };
 
 export const toFixed = (num : number, fixed : number) => {
-    const re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
+    const re = new RegExp(`^-?\\d+(?:\.\\d{0,${(fixed || -1)}})?`);
     return num.toString().match(re)[0];
 };
 
 export const padStart = (num : number, pad : number) => {
-    return new Array(pad + 1 - (num + '').length).join('0') + num;
+    return new Array(pad + 1 - (num.toString()).length).join('0') + num;
 };
 
 export const formatDateDefault = (unix : number) => {
@@ -273,7 +273,7 @@ export const formattedTime = (millis : number) => {
     const minutes : any = Math.floor(millis / 60000);
     const seconds : any = ((millis % 60000) / 1000).toFixed(0);
 
-    return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+    return `${(minutes < 10 ? '0' : '')}${minutes}:${(seconds < 10 ? '0' : '')}${seconds}`
 };
 
 export const s3Url = (cloudFrontUrl : string, distro, origin) : string => {

package/{components → src/components}/Tooltip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactTooltip from 'react-tooltip';
+import ReactTooltip from 'react-tooltip';
 
 export interface IToolTipConfig {
     content : string;

package/{components → src/components}/asset-details/AssetDetails.tsx

@@ -35,8 +35,8 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
     private renderTags() {
 
         const { asset: {tags}} = this.props;
-
-        const tagsMarkup : JSX.Element[] = tags.map((tag : string) => (
+        const tagsArray = [...new Set(tags)];
+        const tagsMarkup : JSX.Element[] = tagsArray.map((tag : string) => (
             <Tag
                 key = {tag}
                 copy = {tag}

package/{components → src/components}/assets/AssetsTableComplexTagCell.tsx

@@ -53,8 +53,8 @@ class AssetsTableComplexTagCell extends React.Component<IAssetsTableComplexTagCe
 
     public render = () : JSX.Element => {
         const {cell, assetTags} = this.props;
-
-        const tagsMarkup : JSX.Element[] = cell.row.original.tags.map((tag : string) => (
+        const tagsArray = [...new Set(cell.row.original.tags)];
+        const tagsMarkup : JSX.Element[] = tagsArray.map((tag : string) => (
             <Tag
                 key = {tag}
                 copy = {tag}

package/{components → src/components}/assets/AssetsTableDropzone.tsx

@@ -12,7 +12,7 @@ interface IAssetsTableDropzoneProps {
 const AssetsTableDropzone : React.FC<IAssetsTableDropzoneProps> = (p : IAssetsTableDropzoneProps) => {
     const [{canDrop, isOver}, dropRef] = useDrop({
         accept: [NativeTypes.FILE],
-        drop(item, monitor) {
+        drop:(item, monitor) => {
             if (p.onDrop) {
                 p.onDrop(p, monitor);
             }

package/{components → src/components}/assets/AssetsTableNameFilter.tsx

@@ -9,7 +9,7 @@ interface IAssetsTableNameFilterProps {
     updateFilters : (filters : any) => any;
 }
 
-class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterProps, {}> {
+class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterProps> {
     public render = () : JSX.Element => {
         const { assetFilters } = this.props;
 

package/{components → src/components}/assets/AssetsTablePreviewCell.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview} from '../../Entry';
+import {ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview} from '../../index';
 export const PREVIEW_MAX_WIDTH : number = 400;
 export const PREVIEW_MAX_HEIGHT : number = 400;
 export const HEADER_HEIGHT : number = 30;
@@ -51,9 +51,9 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
             }
             const icon = this.iconRef.current;
             const iconRect = icon.getBoundingClientRect();
-            const aspect = mediaWidth / mediaHeight;
-            let width = PREVIEW_MAX_WIDTH;
-            let height = width / aspect;
+            const aspect :number  = mediaWidth / mediaHeight;
+            let width : number = PREVIEW_MAX_WIDTH;
+            let height : number = width / aspect;
 
             if (height > PREVIEW_MAX_HEIGHT) {
                 height = PREVIEW_MAX_HEIGHT;

package/{components → src/components}/assets/AssetsTableSelectCell.tsx

@@ -12,7 +12,7 @@ interface IAssetsTableSelectCell {
     deselectAsset : (id : string) => any;
 }
 
-class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell, {}> {
+class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell> {
     constructor(props : IAssetsTableSelectCell) {
         super(props);
     }

package/{components → src/components}/assets/AssetsTableSelectFilter.tsx

@@ -10,7 +10,7 @@ interface IAssetsTableSelectFilter {
     resetSelection : () => any;
 }
 
-class AssetsTableSelectFilter extends React.PureComponent<IAssetsTableSelectFilter, {}> {
+class AssetsTableSelectFilter extends React.PureComponent<IAssetsTableSelectFilter> {
     constructor(props : IAssetsTableSelectFilter) {
         super(props);
     }

package/{components → src/components}/assets/AssetsTableTagsFilter.tsx

@@ -9,7 +9,7 @@ interface IAssetsTableTagsFilterProps {
     updateFilters : (filters : any) => any;
 }
 
-class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterProps, {}> {
+class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterProps> {
 
     public render = () : JSX.Element => {
         const { assetFilters } = this.props;

package/{components → src/components}/assets/AssetsTableTagsPivot.tsx

@@ -9,7 +9,7 @@ import { IImposiumAPI } from '../../services/API';
 import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
 
-interface IAssetsTableTagsPivot {
+interface IAssetsTableTagsPivotProps {
     row : any; // React table row wrapper
     api : IImposiumAPI;
     addAssetTag : (api : any, id : string, tags : string) => any;
@@ -18,17 +18,27 @@ interface IAssetsTableTagsPivot {
     assetTags : string[];
 }
 
-class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivot, {}> {
+class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProps> {
     private static readonly ADD_TAG_INPUT_WIDTH : string = '280px';
     private static readonly COLORIZE_TAGS : boolean = true;
 
-    constructor(props : IAssetsTableTagsPivot) {
+    constructor(props : IAssetsTableTagsPivotProps) {
         super(props);
     }
 
     private addTags = (assetId : string, tags : string) : void => {
-        if (tags) {
-            this.props.addAssetTag(this.props.api, assetId, tags);
+        const {row : { original }} =this.props;
+
+        let newTags = tags.split(',')
+        const arr = [...original.tags, ...newTags ];
+        const dupedTags = arr.filter((item, index) => arr.indexOf(item) !== index);
+
+        newTags = newTags.filter(( el ) => {
+            return dupedTags.indexOf( el ) < 0;
+          } );
+
+        if (newTags) {
+            this.props.addAssetTag(this.props.api, assetId, newTags.join());
         }
     }
 
@@ -82,4 +92,4 @@ const mapStateToProps = (state) : any => {
     };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableTagsPivot);
+export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableTagsPivot);

package/{components → src/components}/assets/AssetsUploadMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
-import DeterminateLoader from '../determinate-loader/DeterminateLoader';
+import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 import { toggleAutoTag, toggleAssignToStory, cancelAssetUpload } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -17,7 +17,7 @@ interface IAssetsUploadMenuProps {
     cancelAssetUpload : (fileName : string, api : IImposiumAPI) => any;
 }
 
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
     constructor(props : IAssetsUploadMenuProps) {
         super(props);
     }

package/{components → src/components}/auth-gate/AuthGate.tsx

@@ -16,7 +16,7 @@ interface IAuthGateProps {
     cacheAccessData : (accessData : any) => any;
 }
 
-class AuthGate extends React.PureComponent<IAuthGateProps, {}> {
+class AuthGate extends React.PureComponent<IAuthGateProps> {
     private static readonly LOADER_COLOR : string = '#2d8ceb';
 
     constructor(p : IAuthGateProps) {

package/{components → src/components}/button/Button.tsx

@@ -18,7 +18,7 @@ interface IButtonProps {
     onClick?(e : any) : void;
 }
 
-class Button extends React.PureComponent<IButtonProps, {}> {
+class Button extends React.PureComponent<IButtonProps> {
 
     private tooltipId : string;
 

package/{components → src/components}/button-group-field/ButtonGroupField.tsx

@@ -22,7 +22,7 @@ interface IButtonGroupFieldProps {
     labelPosition? : string;
 }
 
-class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps, {}> {
+class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
     private clickTimeout : number;
     private clickCounter : number = 0;
 

package/{components → src/components}/button-menu/ButtonMenuItem.tsx

@@ -6,7 +6,7 @@ interface IButtonMenuItemProps {
     active? : boolean;
 }
 
-class ButtonMenuItem extends React.Component<IButtonMenuItemProps, {}> {
+class ButtonMenuItem extends React.Component<IButtonMenuItemProps> {
 
     constructor(props) {
 

package/{components → src/components}/checkbox-field/CheckboxField.tsx

@@ -14,7 +14,7 @@ interface ICheckboxFieldProps {
     labelPosition? : string;
 }
 
-class CheckboxField extends React.PureComponent<ICheckboxFieldProps, {}> {
+class CheckboxField extends React.PureComponent<ICheckboxFieldProps> {
 
     constructor(props) {
 

package/{components → src/components}/compositions/TextLayer.tsx

@@ -105,7 +105,8 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
                 }, () => {
                     const fontObj = new FontFace(font, `url(${fontOrigin})`, { style: 'normal', weight: 'normal' });
                     fontObj.load().then((e) => {
-                        document.fonts.add(fontObj);
+                        const fonts : any = document.fonts; // to get rid of "Property 'add' does not exist on type 'FontFaceSet'." TSC error.
+                        fonts.add(fontObj);
                         this.fontReady();
                     }).catch((e) => {
                         this.errorLoadingFont();

package/{components → src/components}/controlled-list/ControlledList.tsx

@@ -8,7 +8,7 @@ interface IControlledListProps {
     onRemove?(index) : void;
 }
 
-class ControlledList extends React.PureComponent<IControlledListProps, {}> {
+class ControlledList extends React.PureComponent<IControlledListProps> {
 
     private inputRef : any;
     private submitHandler : any;

package/{components → src/components}/data-table/DataTablePaginator.tsx

@@ -11,7 +11,7 @@ interface IDataTablePaginatorProps {
     onPage : (page : number) => any;
 }
 
-export default class DataTablePaginator extends React.PureComponent<IDataTablePaginatorProps, {}> {
+export default class DataTablePaginator extends React.PureComponent<IDataTablePaginatorProps> {
     private static readonly DEFAULT_TOTAL : number = 0;
     private static readonly DEFAULT_STEP : number = 25;
 

package/{components → src/components}/determinate-loader/DeterminateLoader.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import DeterminateLoader from './DeterminateLoader';
+import { DeterminateLoader } from './DeterminateLoader';
 
 export default {
     title: 'DeterminateLoader',

package/{components → src/components}/determinate-loader/DeterminateLoader.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-interface IDeterminateLoaderProps {
+export interface IDeterminateLoaderProps {
     progress : number; // expects int 0-100 (%)
 }
 
-const DeterminateLoader : React.FC<IDeterminateLoaderProps> = (p : IDeterminateLoaderProps) => {
+export const DeterminateLoader : React.FC<IDeterminateLoaderProps> = (p : IDeterminateLoaderProps) => {
     const transform : string = (p.progress) ? `scaleX(${p.progress / 100})` : 'scaleX(0)';
 
     return (
@@ -14,5 +14,3 @@ const DeterminateLoader : React.FC<IDeterminateLoaderProps> = (p : IDeterminateL
         </div>
     );
 };
-
-export default DeterminateLoader;

package/{components → src/components}/modal/Modal.tsx

@@ -10,7 +10,7 @@ interface IModalProps {
     onRequestClose(e) : void;
 }
 
-class Modal extends React.PureComponent<IModalProps, {}> {
+class Modal extends React.PureComponent<IModalProps> {
 
     private evtHandlers : any;
     private closeStyles = {

package/{components → src/components}/number-field/NumberField.tsx

@@ -17,7 +17,7 @@ interface INumberFieldProps {
     max? : number;
 }
 
-class NumberField extends React.PureComponent<INumberFieldProps, {}> {
+class NumberField extends React.PureComponent<INumberFieldProps> {
 
     private inputRef : any;
 
@@ -55,7 +55,7 @@ class NumberField extends React.PureComponent<INumberFieldProps, {}> {
         // }
     }
 
-    private handleLabelDrag(v) {
+    private handleLabelDrag(v : number) {
 
         const newVal = this.props.value + v;
         this.props.onChange(newVal);

package/{components → src/components}/players/TemplatePlayer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DEFAULT_PADDING } from '../../constants/player';
 import { getPlayerStyle } from './VideoPlayer';
-import PreviewNotAvailable from './PreviewNotAvailable';
+import { PreviewNotAvailable } from '../assets/PreviewNotAvailable';
 
 interface ITemplatePlayerProps {
     url : string;
@@ -26,7 +26,7 @@ class TemplatePlayer extends React.PureComponent<ITemplatePlayerProps, undefined
 
     public getImageStyle() : any {
 
-        const {padding, width, height} = this.props;
+    const {padding, width, height} = this.props;
         const pad = (padding !== undefined) ? padding : DEFAULT_PADDING;
 
         return getPlayerStyle(width, height, this.width, this.height, pad);

package/{components → src/components}/players/VideoPreview.tsx

@@ -8,7 +8,7 @@ interface IVideoPreviewProps {
     showMedia : boolean;
     url : string;
     playbackSettings? : any;
-    style? : React.CSSProperties | {};
+    style? : React.CSSProperties | any;
     onRequestClose?(e) : void;
 }
 

package/{components → src/components}/publish-wizard/PublishWizard.tsx

@@ -439,7 +439,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     {copy.publish.publishTitle}
                     <PublishStatusIndicator api={api}/>
                 </div>
-                {/*<PaneErrorBoundry>*/}
+                {/* <PaneErrorBoundry>*/}
                 <div>
                     {screenIndex === 0 && this.renderPublish()}
                     {screenIndex === 1 && this.renderDistributionOptions()}
@@ -484,7 +484,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     <HRule/>
                     <div className = 'lower-buttons'>{this.renderLowerButtons()}</div>
                 </div>
-                {/*</PaneErrorBoundry>*/}
+                {/* </PaneErrorBoundry>*/}
             </div>
         );
     }

package/{components → src/components}/publish-wizard/publish/EmailWorkflow.tsx

@@ -5,7 +5,7 @@ import * as copy from '../../../constants/copy';
 import {BigButton} from '../PublishWizard';
 import { ExportToCsv } from 'export-to-csv';
 import { ICON_DOWNLOAD, ICON_UPLOAD } from '../../../constants/icons';
-import * as moment from 'moment';
+import moment from 'moment';
 import { IImposiumAPI } from '../../../services/API';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';

package/{components → src/components}/select-field/SelectField.tsx

@@ -28,7 +28,7 @@ interface ISelectFieldProps {
     onError?(e) : void;
 }
 
-class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
+class SelectField extends React.PureComponent<ISelectFieldProps> {
     private evtHandlers = {
         copyToClipboard: (e) => this.copyToClipboard(e),
     };