@deskpro/apps-components - npm Package Compare versions

Comparing version 0.3.6 to 0.3.8

lib/Action/Action.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 require('@deskpro/apps-components-style');
@@ -41,27 +37,27 @@
 
-    return _possibleConstructorReturn(this, (Action.__proto__ || Object.getPrototypeOf(Action)).apply(this, arguments));
+    return _possibleConstructorReturn(this, _React$PureComponent.apply(this, arguments));
   }
 
-  _createClass(Action, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          icon = _props.icon,
-          label = _props.label,
-          className = _props.className,
-          onClick = _props.onClick;
+  Action.prototype.render = function render() {
+    var _props = this.props,
+        icon = _props.icon,
+        label = _props.label,
+        className = _props.className,
+        onClick = _props.onClick;
 
 
-      return _react2.default.createElement(
-        'a',
-        { className: (0, _classnames2.default)("dp-ActionListItem dp-ActionListIcon dp---is-hoverable", className), onClick: onClick },
-        _react2.default.createElement(_Icon2.default, { name: icon }),
-        label && _react2.default.createElement(
-          'span',
-          { className: 'dp-ActionListLabel' },
-          label
-        )
-      );
-    }
-  }]);
+    return _react2.default.createElement(
+      'a',
+      {
+        className: (0, _classnames2.default)('dp-ActionListItem dp-ActionListIcon dp---is-hoverable', className),
+        onClick: onClick
+      },
+      _react2.default.createElement(_Icon2.default, { name: icon }),
+      label && _react2.default.createElement(
+        'span',
+        { className: 'dp-ActionListLabel' },
+        label
+      )
+    );
+  };
 
@@ -68,0 +64,0 @@ return Action;

lib/Action/ActionBar.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -44,6 +42,6 @@ require('@deskpro/apps-components-style');
     'div',
-    { className: (0, _classnames2.default)("dp-ActionBar dp-Level", className) },
+    { className: (0, _classnames2.default)('dp-ActionBar dp-Level', className) },
     _react2.default.createElement(
       _Layout.Level,
-      { align: "left" },
+      { align: 'left' },
       iconUrl && _react2.default.createElement(
@@ -62,3 +60,3 @@ 'i',
       _ActionList2.default,
-      { className: "dp-LevelRight" },
+      { className: 'dp-LevelRight' },
       children
@@ -70,3 +68,2 @@ )
 _ActionList2.default.propTypes = {
-
   className: _propTypes2.default.string,
@@ -73,0 +70,0 @@

lib/Action/ActionList.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -43,3 +41,3 @@ require('@deskpro/apps-components-style');
       'div',
-      { className: "dp-ActionListItem" },
+      { className: 'dp-ActionListItem' },
       component
@@ -52,8 +50,2 @@ );
 
-function propTypeReactElement(props, key, componentName, location, propFullName) {
-  if (!_react2.default.isValidElement(props[key])) {
-    return new Error('Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
-  }
-}
-
 /**
@@ -80,6 +72,6 @@ * @param orientation
     'div',
-    { className: (0, _classnames2.default)("dp-ActionList", orientation === 'vertical' ? 'dp-ActionList--is-vertical' : '', className) },
-    children && _react2.default.Children.map(children, function (action) {
-      return renderAction(action);
-    }).map(normalize).filter(_react2.default.isValidElement)
+    {
+      className: (0, _classnames2.default)('dp-ActionList', orientation === 'vertical' ? 'dp-ActionList--is-vertical' : '', className)
+    },
+    children
   );
@@ -89,3 +81,2 @@ };
 ActionList.propTypes = {
-
   /**
@@ -108,6 +99,5 @@ * the direction in which the items are layed out
 ActionList.defaultProps = {
-
-  orientation: "horizontal"
+  orientation: 'horizontal'
 };
 
 exports.default = ActionList;

lib/Action/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.ActionBar = exports.ActionList = exports.Action = undefined;
@@ -7,0 +5,0 @@

lib/AppBar/AppBar.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -42,3 +40,3 @@ var _react = require('react');
     'div',
-    { className: (0, _classnames2.default)("dp-AppBar dp-Level", className) },
+    { className: (0, _classnames2.default)('dp-AppBar dp-Level', className) },
     _react2.default.createElement(
@@ -45,0 +43,0 @@ 'div',

lib/AppBar/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _AppBar = require('./AppBar');

lib/AppBody/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -28,3 +26,3 @@ var _react = require('react');
     'section',
-    { className: (0, _classnames2.default)("dp-AppBody dp-Section", className) },
+    { className: (0, _classnames2.default)('dp-AppBody dp-Section', className) },
     children
@@ -35,3 +33,2 @@ );
 AppBody.propTypes = {
-
   /**
@@ -38,0 +35,0 @@ * any additional classnames to be applied to the AppBar container

lib/AppFrame/AppFrame.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+require('@deskpro/apps-components-style');
 
@@ -29,2 +27,10 @@ var _react = require('react');
 
+var _Notification = require('../Notification');
+
+var _Notification2 = _interopRequireDefault(_Notification);
+
+var _Action = require('../Action');
+
+var _Action2 = _interopRequireDefault(_Action);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,8 +44,2 @@
 
-function propTypeReactElement(propValue, key, componentName, location, propFullName) {
-  if (!_react2.default.isValidElement(propValue)) {
-    return new Error('Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
-  }
-}
-
 var AppFrame = function (_React$PureComponent) {
@@ -51,36 +51,45 @@ _inherits(AppFrame, _React$PureComponent);
 
-    return _possibleConstructorReturn(this, (AppFrame.__proto__ || Object.getPrototypeOf(AppFrame)).apply(this, arguments));
+    return _possibleConstructorReturn(this, _React$PureComponent.apply(this, arguments));
   }
 
-  _createClass(AppFrame, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          isInactive = _props.isInactive,
-          display = _props.display,
-          children = _props.children,
-          iconUrl = _props.iconUrl,
-          title = _props.title,
-          badgeText = _props.badgeText,
-          actions = _props.actions;
+  AppFrame.prototype.render = function render() {
+    var _props = this.props,
+        state = _props.state,
+        display = _props.display,
+        iconUrl = _props.iconUrl,
+        title = _props.title,
+        badgeCount = _props.badgeCount,
+        badgeVisibility = _props.badgeVisibility,
+        refresh = _props.refresh,
+        collapse = _props.collapse,
+        expand = _props.expand,
+        notification = _props.notification,
+        notificationType = _props.notificationType,
+        closeNotification = _props.closeNotification,
+        children = _props.children;
 
 
-      return _react2.default.createElement(
-        'div',
-        {
-          className: (0, _classnames2.default)("dp-AppFrame", isInactive ? 'is-inactive' : '', display === 'collapsed' ? 'is-colapsed' : '', this.props.className)
-        },
-        _react2.default.createElement(
-          _AppBar2.default,
-          { iconUrl: iconUrl, title: title, badgeText: badgeText },
-          actions
+    return _react2.default.createElement(
+      'div',
+      {
+        className: (0, _classnames2.default)('dp-AppFrame', state === 'inactive' ? 'is-inactive' : '', display === 'collapsed' ? 'is-colapsed' : '', this.props.className)
+      },
+      _react2.default.createElement(
+        _AppBar2.default,
+        { iconUrl: iconUrl, title: title, badgeText: badgeVisibility === 'visible' ? badgeCount : null },
+        _react2.default.createElement(_Action2.default, { icon: 'refresh', onClick: refresh }),
+        _react2.default.createElement(_Action2.default, { icon: display === 'collapsed' ? 'down' : 'up', onClick: display === 'collapsed' ? expand : collapse })
+      ),
+      _react2.default.createElement(
+        _AppBody2.default,
+        null,
+        notification && _react2.default.createElement(
+          _Notification2.default,
+          { type: notificationType, dismiss: closeNotification },
+          notification
         ),
-        _react2.default.createElement(
-          _AppBody2.default,
-          null,
-          children
-        )
-      );
-    }
-  }]);
+        children
+      )
+    );
+  };
 
@@ -94,3 +103,2 @@ return AppFrame;
 AppFrame.propTypes = {
-
   /**
@@ -109,32 +117,64 @@ * The url to the icon displayed in the bar
    */
-  badgeText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  badgeVisibility: _propTypes2.default.oneOf(['hidden', 'visible']),
 
   /**
-   * any additional classnames to be applied to the AppBar container
+   * The number to display in the badge
    */
-  className: _propTypes2.default.string,
+  badgeCount: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
 
   /**
-   * a list of actions associated with this component
+   * controls how the app frame is displayed
    */
-  actions: _propTypes2.default.oneOfType(_propTypes2.default.string, _propTypes2.default.func, propTypeReactElement, _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, propTypeReactElement]))),
+  display: _propTypes2.default.oneOf(['collapsed', 'expanded']),
 
   /**
-   * controls if the frame displays the inactive state
+   * controls the state of the frame
    */
-  isInactive: _propTypes2.default.bool,
+  state: _propTypes2.default.oneOf(['ready', 'loading', 'error', 'inactive']),
 
   /**
-   * controls how the app frame is displayed
+   * a message to be displayed
    */
-  display: _propTypes2.default.oneOf(['collapsed', 'expanded'])
+  notification: _propTypes2.default.string,
+
+  /**
+   * the type of notification to be displayed
+   */
+  notificationType: _Notification2.default.propTypes.type,
+
+  /**
+   * a function that is called when the refresh icon is clicked
+   */
+  refresh: _propTypes2.default.func,
+
+  /**
+   * a function that is called when the collapse icon is clicked
+   */
+  collapse: _propTypes2.default.func,
+
+  /**
+   * a function that is called when the expand icon is clicked
+   */
+  expand: _propTypes2.default.func,
+
+  /**
+   * a function that is called when the expand icon is clicked
+   */
+  closeNotification: _propTypes2.default.func,
+
+  /**
+   * any additional classnames to be applied to the AppBar container
+   */
+  className: _propTypes2.default.string
+
 };
 
 AppFrame.defaultProps = {
+  className: '',
 
-  className: "",
+  state: 'ready',
 
-  isInactive: false,
+  display: 'expanded',
 
-  display: 'expanded'
+  badgeVisibility: 'hidden'
 };

lib/AppFrame/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _AppFrame = require('./AppFrame');

lib/Button/Button.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -57,8 +57,11 @@
       appearance = _ref.appearance,
-      props = _objectWithoutProperties(_ref, ['className', 'shape', 'disabled', 'size', 'appearance']),
-      children = _ref.children;
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ['className', 'shape', 'disabled', 'size', 'appearance', 'children']);
 
   return _react2.default.createElement(
     'button',
-    _extends({}, props, { className: (0, _classnames2.default)('dp-Button', appeareanceToClass[appearance], sizeToClass[size], shapeToClass[shape], className), disabled: disabled }),
+    _extends({}, props, {
+      className: (0, _classnames2.default)('dp-Button', appeareanceToClass[appearance], sizeToClass[size], shapeToClass[shape], className),
+      disabled: disabled
+    }),
     children
@@ -69,3 +72,2 @@ );
 Button.propTypes = {
-
   /**
@@ -86,7 +88,5 @@ * any additional classnames to be applied to the AppBar container
   appearance: _propTypes2.default.oneOf(['default', 'transparent', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'white', 'black', 'text'])
-
 };
 
 Button.defaultProps = {
-
   appearance: 'default',
@@ -93,0 +93,0 @@

lib/Button/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _Button = require('./Button');

lib/Content/Content.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -21,6 +21,2 @@
 
-var _Button = require('../Button/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,3 +39,2 @@
 Content.propTypes = {
-
   /**
@@ -49,11 +44,8 @@ * any additional classnames to be applied to the AppBar container
   className: _propTypes2.default.string
-
 };
 
 Content.defaultProps = {
-
   className: ''
-
 };
 
 exports.default = Content;

lib/Content/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _Content = require('./Content');

lib/Icon/Icon.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -28,2 +28,3 @@
   close: 'dp-IconClose',
+  'close-heavy': 'dp-IconCloseFatty',
   edit: 'dp-IconEdit',
@@ -61,3 +62,2 @@ lock: 'dp-IconLock',
 Icon.propTypes = {
-
   className: _propTypes2.default.string,
@@ -64,0 +64,0 @@

lib/Icon/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _Icon = require('./Icon');

lib/Image/Avatar.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -51,3 +51,2 @@
 Avatar.propTypes = {
-
   className: _propTypes2.default.string,
@@ -61,5 +60,5 @@
 Avatar.defaultProps = {
-  shape: "auto"
+  shape: 'auto'
 };
 
 exports.default = Avatar;

lib/Image/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.Avatar = undefined;
@@ -7,0 +5,0 @@

lib/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -124,2 +122,20 @@ var _Action = require('./Action');
 
+var _Loader = require('./Loader');
+
+Object.defineProperty(exports, 'Loader', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Loader).default;
+  }
+});
+
+var _Notification = require('./Notification');
+
+Object.defineProperty(exports, 'Notification', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Notification).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/Layout/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Level = undefined;
+exports.__esModule = true;
 
-var _Level2 = require('./Level');
+var _Level = require('./Level');
 
-var _Level3 = _interopRequireDefault(_Level2);
+Object.defineProperty(exports, 'Level', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Level).default;
+  }
+});
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Level = _Level3.default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/Layout/Level.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -22,7 +22,7 @@
 var alignToClassName = {
-  left: "dp-LevelLeft",
-  right: "dp-LevelRight",
-  top: "dp-LevelTop",
-  bottom: "dp-LevelBottom",
-  auto: "dp-Level"
+  left: 'dp-LevelLeft',
+  right: 'dp-LevelRight',
+  top: 'dp-LevelTop',
+  bottom: 'dp-LevelBottom',
+  auto: 'dp-Level'
 };
@@ -49,3 +49,2 @@
 Level.propTypes = {
-
   className: _propTypes2.default.string,
@@ -57,5 +56,5 @@
 Level.defaultProps = {
-  align: "auto"
+  align: 'auto'
 };
 
 exports.default = Level;

lib/List/index.js

@@ -1,13 +0,11 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.List = exports.ListItem = undefined;
 
-var _List = require("./List");
+var _List = require('./List');
 
 var _List2 = _interopRequireDefault(_List);
 
-var _ListItem = require("./ListItem");
+var _ListItem = require('./ListItem');
 
@@ -14,0 +12,0 @@ var _ListItem2 = _interopRequireDefault(_ListItem);

lib/List/List.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -61,3 +59,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
     'div',
-    { className: (0, _classnames2.default)("dp-Scrollable dp---is-hooverable", className) },
+    { className: (0, _classnames2.default)('dp-Scrollable dp---is-hooverable', className) },
     _react2.default.createElement(
@@ -77,3 +75,2 @@ _reactCustomScrollbars.Scrollbars,
 List.propTypes = {
-
   /**
@@ -80,0 +77,0 @@ * the height of the list in pixels

lib/List/ListItem.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
+require('@deskpro/apps-components-style');
+
 var _react = require('react');
@@ -28,3 +28,3 @@
     'div',
-    { className: "dp-ListItemRow" },
+    { className: 'dp-ListItemRow' },
     component
@@ -35,3 +35,2 @@ );
 function renderChildren(children) {
-
   function map(component) {
@@ -49,3 +48,3 @@ return _react2.default.isValidElement(component) ? decorateListItem(component) : component;
     'div',
-    { className: (0, _classnames2.default)("dp-ListItem dp---is-hoverable", className) },
+    { className: (0, _classnames2.default)('dp-ListItem dp---is-hoverable', className) },
     renderChildren(children)
@@ -56,3 +55,2 @@ );
 ListItem.propsType = {
-
   /**
@@ -59,0 +57,0 @@ * any additional classnames to be applied to the AppBar container

lib/Menu/index.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -7,0 +5,0 @@ var _Menu = require('./Menu');

lib/Menu/Menu.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
@@ -32,7 +30,10 @@ var _react = require('react');
     'div',
-    { className: (0, _classnames2.default)("dp-Menu", className) },
+    { className: (0, _classnames2.default)('dp-Menu', className) },
     _react2.default.createElement('i', { className: 'dp-IconSettings', onClick: onClick }),
     _react2.default.createElement(
       _Action.ActionList,
-      { orientation: "vertical", className: '' + (isOpen ? '' : 'dp---is-hidden') },
+      {
+        orientation: 'vertical',
+        className: '' + (isOpen ? '' : 'dp---is-hidden')
+      },
       children
@@ -44,3 +45,2 @@ )
 Menu.propsType = {
-
   classname: _propTypes2.default.string,
@@ -56,3 +56,2 @@
 Menu.defaultProps = {
-
   isOpen: false
@@ -59,0 +58,0 @@ };

package.json

 {
   "name": "@deskpro/apps-components",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "author": "DeskPRO <[e-mail]>",
@@ -11,13 +11,15 @@ "license": "BSD 3-Clause License",
   "scripts": {
-    "build": "npm run build-lib && npm run build-dist && npm run build-storybook",
-    "build-lib": "rm -rf lib/* && babel --ignore '**/*.test.js'  --loose es6.modules -d lib/ src/main",
-    "build-dist": "rm -rf dist/* && webpack --progress --env.production --config src/webpack/config.js",
+    "prebuild": "rimraf build",
+    "build:es2015": "cross-env NODE_ENV=production babel ./src --out-dir ./lib --ignore *.test.js",
+    "build": "npm run build:es2015 && npm run build-storybook",
+    "format": "prettier --write \"{src,test}/**/*.js\"",
+    "format:check": "prettier --list-different \"{src,test}/**/*.js\"",
+    "lint": "eslint src test",
+    "test": "cross-env NODE_ENV=test BABEL_ENV=test jest",
     "build-storybook": "build-storybook -c .storybook -o target/storybook",
-    "lint": "eslint src/main/* --cache --cache-location=.cache/eslint --ext .js,.jsx",
-    "pretest": "npm run lint",
-    "test": "jest --env=jsdom",
-    "dev": "start-storybook -s src/storybook/static -p 6006"
+    "prepare": "npm run prebuild && npm run build:es2015",
+    "dev": "start-storybook -s storybook/static -p 6006"
   },
   "dependencies": {
-    "@deskpro/apps-components-style": "^0.3.6",
+    "@deskpro/apps-components-style": "^0.3.8",
     "classnames": "^2.2.6",
@@ -42,2 +44,3 @@ "react-custom-scrollbars": "^4.2.1"
     "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
     "babel-runtime": "6.26.0",
@@ -47,2 +50,3 @@ "case-sensitive-paths-webpack-plugin": "2.1.1",
     "copy-webpack-plugin": "^4.3.1",
+    "cross-env": "^5.2.0",
     "css-loader": "0.28.7",
@@ -67,8 +71,9 @@ "dotenv": "4.0.0",
     "object-assign": "4.1.1",
+    "prettier": "^1.12.1",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
     "raf": "3.4.0",
-    "react": "^16.2.0",
+    "react": "^16.4.1",
     "react-dev-utils": "^4.2.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.1",
     "style-loader": "0.19.0",
@@ -83,4 +88,4 @@ "sw-precache-webpack-plugin": "0.11.4",
   "peerDependencies": {
-    "react": ">=0.14",
-    "react-dom": ">=0.14"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
@@ -91,8 +96,5 @@ "jest": {
     ],
-    "setupFiles": [
-      "<rootDir>/src/react/polyfills.js"
-    ],
     "testMatch": [
-      "<rootDir>/src/main/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/main/**/?(*.)(spec|test).{js,jsx,mjs}"
+      "<rootDir>/test/**/__tests__/**/*.{js,jsx,mjs}",
+      "<rootDir>/test/**/?(*.)(spec|test).{js,jsx,mjs}"
     ],
@@ -103,4 +105,4 @@ "testEnvironment": "node",
       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/src/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/src/jest/fileTransform.js"
+      "^.+\\.css$": "<rootDir>/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/jest/fileTransform.js"
     },
@@ -122,9 +124,3 @@ "transformIgnorePatterns": [
     ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
-  "eslintConfig": {}
+  }
 }

README.md

 # Deskpro Apps Components
 
-[![Build Status](https://travis-ci.org/DimiMikadze/create-react-library.svg?branch=master)](https://travis-ci.org/DimiMikadze/create-react-library)
-[![Dependencies](https://img.shields.io/david/DimiMikadze/create-react-library.svg)]()
-[![Dev Dependencies](https://img.shields.io/david/dev/DimiMikadze/create-react-library.svg)]()
-
-based on Facebook's <a href="https://github.com/facebookincubator/create-react-app" target="_blank">Create react app</a>.
-We are constantly updating repository with the updates of `create-react-app`, so we have all new features and bug fixes of it.
-
 ## Live storybook
 
-https://deskpro.github.io/apps-components/
+https://deskpro.github.io/apps-libs/components
 
@@ -14,0 +7,0 @@ ## Converted to custom setup

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

32

increased by14.29%

Lines of code

1085

increased by10.49%

Number of low quality alerts

2

decreased by-33.33%

Number of low supply chain risk alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

43945

decreased by-70.59%

Dev dependency count

54

increased by5.88%

Number of lines in readme file

62

decreased by-10.14%

Dependency changes

• - Removedreact@19.0.0(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedscheduler@0.25.0(transitive)

• Updated@deskpro/apps-components-style@^0.3.8