superdesk-ui-framework 4.0.47 → 4.0.49

package/react/components/WithPagination.js

@@ -72,25 +72,22 @@ function getPagination(currentPage, totalPages) {
         currentPage + 1,
         currentPage + 2,
     ].filter(function (page) { return page >= 1 && page <= totalPages; });
-    if (!basePages.includes(1)) { // include first and maybe dots
+    if (!basePages.includes(1)) {
+        // include first and maybe dots
         var firstInCurrentList = basePages[0];
         if (firstInCurrentList !== 1) {
-            basePages = __spreadArray([
-                'dots'
-            ], basePages, true);
+            basePages = __spreadArray(['dots'], basePages, true);
         }
-        basePages = __spreadArray([
-            1
-        ], basePages, true);
+        basePages = __spreadArray([1], basePages, true);
     }
-    if (!basePages.includes(totalPages)) { // include last and maybe dots
+    if (!basePages.includes(totalPages)) {
+        // include last and maybe dots
         var lastInCurrentList = basePages[basePages.length - 1];
-        if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
+        if (lastInCurrentList !== totalPages - 1) {
+            // add dots if we're skipping some numbers
             basePages = basePages.concat('dots');
         }
-        basePages = __spreadArray(__spreadArray([], basePages, true), [
-            totalPages,
-        ], false);
+        basePages = __spreadArray(__spreadArray([], basePages, true), [totalPages], false);
     }
     return basePages;
 }
@@ -161,7 +158,7 @@ var WithPagination = /** @class */ (function (_super) {
         }
         var pageElements = getPagination(this.state.currentPage, this.pageCount).map(function (el, i) {
             if (el === 'dots') {
-                return (React.createElement("span", { "data-test-id": "more-pages", className: 'sd-pagination__item sd-pagination__item--more' }, "..."));
+                return (React.createElement("span", { "data-test-id": "more-pages", className: "sd-pagination__item sd-pagination__item--more" }, "..."));
             }
             else {
                 return (React.createElement("button", { "data-test-id": "page-button-".concat(i), className: _this.state.currentPage === el
@@ -170,15 +167,15 @@ var WithPagination = /** @class */ (function (_super) {
             }
         });
         pageElements.unshift(React.createElement(React.Fragment, null,
-            React.createElement("button", { "data-test-id": "btn-1", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage === 1, onClick: function () { return _this.switchPage(1); } },
-                React.createElement(Icon_1.Icon, { name: 'backward-thin' })),
-            React.createElement("button", { "data-test-id": "btn-2", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage <= 1, onClick: function () { return _this.switchPage(_this.state.currentPage - 1); } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-left-thin' }))));
+            React.createElement("button", { "data-test-id": "btn-1", className: "sd-pagination__item sd-pagination__item--start", disabled: this.state.currentPage === 1, onClick: function () { return _this.switchPage(1); } },
+                React.createElement(Icon_1.Icon, { name: "backward-thin" })),
+            React.createElement("button", { "data-test-id": "btn-2", className: "sd-pagination__item sd-pagination__item--start", disabled: this.state.currentPage <= 1, onClick: function () { return _this.switchPage(_this.state.currentPage - 1); } },
+                React.createElement(Icon_1.Icon, { name: "chevron-left-thin" }))));
         pageElements.push(React.createElement(React.Fragment, null,
-            React.createElement("button", { "data-test-id": "btn-3", className: 'sd-pagination__item sd-pagination__item--forward', onClick: function () { return _this.switchPage(_this.state.currentPage + 1); }, disabled: this.state.currentPage === this.pageCount },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' })),
-            React.createElement("button", { "data-test-id": "btn-4", className: 'sd-pagination__item sd-pagination__item--end', onClick: function () { return _this.switchPage(_this.pageCount); }, disabled: this.state.currentPage === this.pageCount },
-                React.createElement(Icon_1.Icon, { name: 'forward-thin' }))));
+            React.createElement("button", { "data-test-id": "btn-3", className: "sd-pagination__item sd-pagination__item--forward", onClick: function () { return _this.switchPage(_this.state.currentPage + 1); }, disabled: this.state.currentPage === this.pageCount },
+                React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })),
+            React.createElement("button", { "data-test-id": "btn-4", className: "sd-pagination__item sd-pagination__item--end", onClick: function () { return _this.switchPage(_this.pageCount); }, disabled: this.state.currentPage === this.pageCount },
+                React.createElement(Icon_1.Icon, { name: "forward-thin" }))));
         var StyledPagination = function () { return (React.createElement("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',

package/react/components/WithPortal.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IProps {
     active: boolean;
     'data-test-id'?: string;

package/react/components/WithPortal.js

@@ -72,7 +72,8 @@ var WithPortal = /** @class */ (function (_super) {
         this.dataTheme = (_b = (_a = findParent(this.ref.current)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) !== null && _b !== void 0 ? _b : undefined;
     };
     WithPortal.prototype.render = function () {
-        return (React.createElement("div", { ref: this.ref }, this.props.active && ((0, react_dom_1.createPortal)(React.createElement("div", { "data-theme": this.dataTheme, "data-test-id": this.props['data-test-id'] }, this.props.children), document.body))));
+        return (React.createElement("div", { ref: this.ref }, this.props.active &&
+            (0, react_dom_1.createPortal)(React.createElement("div", { "data-theme": this.dataTheme, "data-test-id": this.props['data-test-id'] }, this.props.children), document.body)));
     };
     return WithPortal;
 }(React.Component));

package/react/components/WithSizeObserver.js

@@ -100,9 +100,7 @@ var WithSizeObserver = /** @class */ (function (_super) {
         return (React.createElement("div", { ref: function (el) {
                 _this.el = el;
             }, style: __assign({ position: 'relative', width: '100%', height: '100%' }, this.props.style) },
-            React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }, dimensions === 'not-initialized'
-                ? null
-                : this.props.children(dimensions))));
+            React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }, dimensions === 'not-initialized' ? null : this.props.children(dimensions))));
     };
     return WithSizeObserver;
 }(React.PureComponent));

package/react/components/_Positioner.js

@@ -91,7 +91,7 @@ var PopperWrapper = /** @class */ (function (_super) {
         var viewportHeight = document.documentElement.clientHeight;
         var viewportWidth = document.documentElement.clientWidth;
         var availableSpaceTop = rect.top - padding;
-        var availableSpaceBottom = (viewportHeight - rect.bottom) - padding;
+        var availableSpaceBottom = viewportHeight - rect.bottom - padding;
         var availableSpaceLeft = rect.left;
         var availableSpaceRight = viewportWidth - rect.right;
         this.wrapper.style.maxHeight = Math.max(availableSpaceBottom, availableSpaceTop) + 'px';
@@ -123,7 +123,7 @@ var PopperWrapper = /** @class */ (function (_super) {
                 if (w != null) {
                     _this.wrapper = w;
                 }
-            }, tabIndex: 0, role: 'dialog', "aria-labelledby": 'popoverTitle', onKeyDown: function (event) {
+            }, tabIndex: 0, role: "dialog", "aria-labelledby": "popoverTitle", onKeyDown: function (event) {
                 if (event.key === 'Escape') {
                     event.preventDefault();
                     _this.props.close();
@@ -182,13 +182,13 @@ var Positioner = /** @class */ (function (_super) {
     };
     // arguments are in a different order, because the method is bound
     Positioner.prototype.closeDropdownOnOutsideClick = function (wrapper, event) {
-        if (this.state.open === true
-            && event != null
-            && event.target !== this.triggerElement
-            && event.target != null
-            && event.target instanceof Node // wrapper.contains accepts only Node type
-            && wrapper != null
-            && !wrapper.contains(event.target)) {
+        if (this.state.open === true &&
+            event != null &&
+            event.target !== this.triggerElement &&
+            event.target != null &&
+            event.target instanceof Node && // wrapper.contains accepts only Node type
+            wrapper != null &&
+            !wrapper.contains(event.target)) {
             this.setState({
                 open: false,
             });
@@ -197,9 +197,9 @@ var Positioner = /** @class */ (function (_super) {
     Positioner.prototype.componentDidUpdate = function () {
         var _this = this;
         if (this.state.open === true) {
-            ReactDOM.render((React.createElement(PopperWrapper, __assign({}, this.props, { handleCloseOthers: this.handleCloseOthers, closeDropdownOnOutsideClick: this.closeDropdownOnOutsideClick, triggerElement: this.triggerElement, close: function () {
+            ReactDOM.render(React.createElement(PopperWrapper, __assign({}, this.props, { handleCloseOthers: this.handleCloseOthers, closeDropdownOnOutsideClick: this.closeDropdownOnOutsideClick, triggerElement: this.triggerElement, close: function () {
                     _this.setState({ open: false });
-                } }))), this.elementForPositioner);
+                } })), this.elementForPositioner);
         }
         else {
             ReactDOM.unmountComponentAtNode(this.elementForPositioner);

package/react/components/avatar/avatar-action-add.js

@@ -58,7 +58,7 @@ var AvatarContentAdd = /** @class */ (function (_super) {
     AvatarContentAdd.prototype.render = function () {
         var _this = this;
         if (this.props.onClick == null) {
-            return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--add-item", title: this.props.tooltipText }));
+            return React.createElement("span", { className: "sd-avatar-content sd-avatar-content--add-item", title: this.props.tooltipText });
         }
         else {
             return (React.createElement("button", { className: "sd-avatar-content sd-avatar-content--add-item sd-avatar-content--add-item--clickable", title: this.props.tooltipText, onClick: function () { var _a, _b; return (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a); } }));

package/react/components/avatar/avatar-group.js

@@ -82,7 +82,9 @@ var AvatarGroup = /** @class */ (function (_super) {
     AvatarGroup.prototype.render = function () {
         var _this = this;
         var _a = this.props, size = _a.size, items = _a.items;
-        var someIconsHaveExtraElements = items.filter(isAvatar).some(function (_a) {
+        var someIconsHaveExtraElements = items
+            .filter(isAvatar)
+            .some(function (_a) {
             var icon = _a.icon, administratorIndicator = _a.administratorIndicator;
             return icon != null || administratorIndicator != null;
         });
@@ -113,23 +115,18 @@ var AvatarGroup = /** @class */ (function (_super) {
             }
         };
         var someHaveDisplayName = this.props.items.some(function (item) { return isAvatar(item) && item.displayName.length > 0; });
-        return (React.createElement(WithPopover_1.WithPopover, { placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
-                return (someHaveDisplayName
-                    ? React.createElement(common_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
-                        isAvatar(item)
-                            && item.displayName,
-                        isAvatar(item)
-                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot }))
-                            : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
-                    : React.createElement("div", null,
-                        React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
-            }))); } }, function (onToggle) { return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: 'group', onClick: _this.props.onClick },
+        return (React.createElement(WithPopover_1.WithPopover, { placement: "bottom-end", component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
+                return someHaveDisplayName ? (React.createElement(common_1.Spacer, { h: true, alignItems: "center", gap: "16", noGrow: true, key: index },
+                    isAvatar(item) && item.displayName,
+                    isAvatar(item) ? (React.createElement(avatar_1.Avatar, { size: "small", imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot })) : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: "plus-button", size: "small", icon: item.icon, onClick: item.onClick })))) : (React.createElement("div", null,
+                    React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: "plus-button", size: "small", icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
+            }))); } }, function (onToggle) { return (React.createElement("div", { className: (0, classnames_1.default)('sd-avatar-group', 'sd-avatar-group--stacked', "sd-avatar-group--stacked--gap-".concat(gap)), role: "group", onClick: _this.props.onClick },
             items.slice(0, max).map(function (item, index) {
                 if (isAvatar(item)) {
-                    return (React.createElement(avatar_1.Avatar, __assign({}, item, { key: index, size: size })));
+                    return React.createElement(avatar_1.Avatar, __assign({}, item, { key: index, size: size }));
                 }
                 else {
-                    return (React.createElement(avatar_placeholder_1.AvatarPlaceholder, __assign({}, item, { key: index, size: _this.props.size })));
+                    return React.createElement(avatar_placeholder_1.AvatarPlaceholder, __assign({}, item, { key: index, size: _this.props.size }));
                 }
             }),
             itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },

package/react/components/avatar/avatar-image.js

@@ -68,10 +68,12 @@ var AvatarContentImage = /** @class */ (function (_super) {
     }
     AvatarContentImage.prototype.render = function () {
         var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
-        var maybeButtonProps = onClick == null ? {} : {
-            role: 'button',
-            onClick: function () { return onClick(); },
-        };
+        var maybeButtonProps = onClick == null
+            ? {}
+            : {
+                role: 'button',
+                onClick: function () { return onClick(); },
+            };
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block', width: '100%', height: '100%' } },

package/react/components/avatar/avatar-placeholder.js

@@ -62,7 +62,7 @@ var AvatarPlaceholder = /** @class */ (function (_super) {
         var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
         return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, icon: icon }, (function () {
             if (kind === 'plus-button') {
-                return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
+                return React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick });
             }
             else if (kind === 'user-icon') {
                 return (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: null, tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));

package/react/components/avatar/avatar-wrapper.js

@@ -77,11 +77,9 @@ var AvatarWrapper = /** @class */ (function (_super) {
                 'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
                 'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.status) === 'offline',
                 'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
-            }), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : "" },
+            }), "data-test-id": this.props['data-test-id'], title: this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : '' },
             this.props.children,
-            ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
-                ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
-                : null,
+            ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText })) : null,
             icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
                 React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color }))),
             statusDot != null && (React.createElement("span", { style: { backgroundColor: statusDot.color }, className: "sd-avatar__coverage-state" }))));

package/react/components/avatar/avatar.js

@@ -61,16 +61,17 @@ var Avatar = /** @class */ (function (_super) {
     Avatar.prototype.render = function () {
         var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, noAvatarPlaceholderColor = _a.noAvatarPlaceholderColor, displayName = _a.displayName, customContent = _a.customContent, statusDot = _a.statusDot;
         var tooltipCombined = [displayName, this.props.tooltip]
-            .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
+            .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; })
+            .join('\n');
         return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, statusDot: statusDot, noAvatarPlaceholderColor: noAvatarPlaceholderColor }, (function () {
             if (customContent != null) {
                 return customContent;
             }
             else if (imageUrl != null || initials == null) {
-                return (React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: tooltipCombined }));
+                return React.createElement(avatar_image_1.AvatarContentImage, { imageUrl: imageUrl, tooltipText: tooltipCombined });
             }
             else {
-                return (React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: tooltipCombined }));
+                return React.createElement(avatar_text_1.AvatarContentText, { text: initials, tooltipText: tooltipCombined });
             }
         })()));
     };

package/react/helpers.js

@@ -14,8 +14,8 @@ function getTextColor(backgroundColor) {
         var r = parseInt(backgroundColor.substr(1, 2), 16);
         var g = parseInt(backgroundColor.substr(3, 2), 16);
         var b = parseInt(backgroundColor.substr(5, 2), 16);
-        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-        return (yiq >= 128) ? 'black' : 'white';
+        var yiq = (r * 299 + g * 587 + b * 114) / 1000;
+        return yiq >= 128 ? 'black' : 'white';
     }
     else {
         return;

package/react/index.d.ts

@@ -62,7 +62,7 @@ export { DonutChart } from './components/DonutChart';
 export { Carousel } from './components/Carousel';
 export { Modal } from './components/Modal';
 export { GridList } from './components/GridList';
-export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
+export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper, } from './components/GridItem';
 export { toasted } from './components/Toast';
 export { Menu } from './components/Menu';
 export { ToggleBox } from './components/ToggleBox/index';

package/react/utils/time.d.ts

@@ -0,0 +1,5 @@
+export type ITimeUnit = 'hours' | 'minutes' | 'seconds';
+export declare function getOptionsForTimeUnit(timeUnit: ITimeUnit, is12HourFormat?: boolean, disabledOptions?: {
+    [key: string]: Array<number>;
+}): Array<string>;
+export declare function padValue(value: number): string;

package/react/utils/time.js

@@ -0,0 +1,36 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOptionsForTimeUnit = getOptionsForTimeUnit;
+exports.padValue = padValue;
+var lodash_1 = require("lodash");
+function getOptionsForTimeUnit(timeUnit, is12HourFormat, disabledOptions) {
+    var format12HourArr = __spreadArray([12], (0, lodash_1.range)(1, 12), true);
+    var timeUnitArray = (function () {
+        if (timeUnit === 'hours') {
+            if (is12HourFormat) {
+                return format12HourArr;
+            }
+            else {
+                return (0, lodash_1.range)(24);
+            }
+        }
+        else {
+            return (0, lodash_1.range)(60);
+        }
+    })();
+    return timeUnitArray
+        .filter(function (item) { var _a; return !((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions[timeUnit]) !== null && _a !== void 0 ? _a : []).includes(item); })
+        .map(function (value) { return value.toString().padStart(2, '0'); });
+}
+function padValue(value) {
+    return value.toString().padStart(2, '0');
+}

package/tasks/webpack.dev.js

@@ -11,6 +11,6 @@ module.exports = merge(webpackConfig, {
     devServer: {
         open: true,
         port: 9100,
-        host: '127.0.0.1'
+        host: '127.0.0.1',
     },
 });

package/tasks/webpack.js

@@ -7,13 +7,13 @@ module.exports = {
         plugins: webpackConfig.plugins.concat(
             new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),
             new webpack.optimize.UglifyJsPlugin({
-                mangle: false
-            })
-        )
+                mangle: false,
+            }),
+        ),
     },
     'build-dev': {
         plugins: webpackConfig.plugins.concat(
-            new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('development')}})
-        )
+            new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('development')}}),
+        ),
     },
 };

package/tasks/webpack.prod.js

@@ -2,9 +2,5 @@ const merge = require('webpack-merge');
 const webpackConfig = require('../webpack.config.js');
 
 module.exports = merge(webpackConfig, {
-    externals: [
-        'react',
-        'react-dom',
-        'angular',
-    ],
+    externals: ['react', 'react-dom', 'angular'],
 });

package/tsconfig.json

@@ -6,10 +6,7 @@
         "declaration": true,
 
         "target": "es5",
-        "lib": [
-            "dom",
-            "es2017"
-        ],
+        "lib": ["dom", "es2017"],
         "skipLibCheck": true,
         "jsx": "react",
 
@@ -29,5 +26,5 @@
         "noUnusedParameters": true,
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true
-    },
+    }
 }

package/tslint.json

@@ -1,8 +1,6 @@
 {
     "defaultSeverity": "error",
-    "extends": [
-        "tslint:recommended"
-    ],
+    "extends": ["tslint:recommended"],
     "jsRules": {},
     "rules": {
         "quotemark": false,
@@ -24,10 +22,7 @@
         "interface-over-type-literal": false,
         "object-literal-sort-keys": false,
         "no-var-keyword": false,
-        "array-type": [
-            true,
-            "generic"
-        ],
+        "array-type": [true, "generic"],
         "prefer-const": false,
         "one-variable-per-declaration": false,
         "object-literal-shorthand": false,
@@ -44,13 +39,12 @@
         "no-eval": false,
         "no-conditional-assignment": false,
         "no-reference": false,
+        "semicolon": false,
+        "space-before-function-paren": false,
         "only-arrow-functions": false
     },
     "rulesDirectory": [],
     "linterOptions": {
-        "exclude": [
-            "node_modules/**",
-            "app-typescript/dist/**"
-        ]
+        "exclude": ["node_modules/**", "app-typescript/dist/**"]
     }
-}
+}

package/webpack.config.js

@@ -10,7 +10,7 @@ const config = {
     entry: {
         vendor: './app/vendor.js',
         examples: './examples/index.js',
-        'superdesk-ui': './app/index.js'
+        'superdesk-ui': './app/index.js',
     },
 
     output: {
@@ -81,10 +81,7 @@ const config = {
             chunks: ['vendor', 'examples', 'superdesk-ui'],
             chunksSortMode: 'manual',
         }),
-        new CopyWebpackPlugin([
-            {from: 'examples/img/', flatten: true},
-            {from: 'examples/pages/'}
-        ]),
+        new CopyWebpackPlugin([{from: 'examples/img/', flatten: true}, {from: 'examples/pages/'}]),
         new ExtractTextPlugin({
             filename: '[name].bundle.css',
         }),