chat-engine-ui - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

build/components/ChatContainer.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -21,21 +21,21 @@
 
-var ChatContainer = function (_Component) {
-    _inherits(ChatContainer, _Component);
+var ChatContainer = function (_PureComponent) {
+  _inherits(ChatContainer, _PureComponent);
 
-    function ChatContainer() {
-        _classCallCheck(this, ChatContainer);
+  function ChatContainer() {
+    _classCallCheck(this, ChatContainer);
 
-        return _possibleConstructorReturn(this, (ChatContainer.__proto__ || Object.getPrototypeOf(ChatContainer)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ChatContainer.__proto__ || Object.getPrototypeOf(ChatContainer)).apply(this, arguments));
+  }
+
+  _createClass(ChatContainer, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', null);
     }
+  }]);
 
-    _createClass(ChatContainer, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+  return ChatContainer;
+}(_react.PureComponent);
 
-    return ChatContainer;
-}(_react.Component);
-
 exports.default = ChatContainer;

build/components/ChatLog.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -21,21 +21,21 @@
 
-var ChatLog = function (_Component) {
-    _inherits(ChatLog, _Component);
+var ChatLog = function (_PureComponent) {
+  _inherits(ChatLog, _PureComponent);
 
-    function ChatLog() {
-        _classCallCheck(this, ChatLog);
+  function ChatLog() {
+    _classCallCheck(this, ChatLog);
 
-        return _possibleConstructorReturn(this, (ChatLog.__proto__ || Object.getPrototypeOf(ChatLog)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ChatLog.__proto__ || Object.getPrototypeOf(ChatLog)).apply(this, arguments));
+  }
+
+  _createClass(ChatLog, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', null);
     }
+  }]);
 
-    _createClass(ChatLog, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+  return ChatLog;
+}(_react.PureComponent);
 
-    return ChatLog;
-}(_react.Component);
-
 exports.default = ChatLog;

build/components/FriendList.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -21,21 +21,21 @@
 
-var FriendList = function (_Component) {
-    _inherits(FriendList, _Component);
+var FriendList = function (_PureComponent) {
+  _inherits(FriendList, _PureComponent);
 
-    function FriendList() {
-        _classCallCheck(this, FriendList);
+  function FriendList() {
+    _classCallCheck(this, FriendList);
 
-        return _possibleConstructorReturn(this, (FriendList.__proto__ || Object.getPrototypeOf(FriendList)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (FriendList.__proto__ || Object.getPrototypeOf(FriendList)).apply(this, arguments));
+  }
+
+  _createClass(FriendList, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', null);
     }
+  }]);
 
-    _createClass(FriendList, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+  return FriendList;
+}(_react.PureComponent);
 
-    return FriendList;
-}(_react.Component);
-
 exports.default = FriendList;

build/components/FriendListItem.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -21,21 +21,21 @@
 
-var FriendListItem = function (_Component) {
-    _inherits(FriendListItem, _Component);
+var FriendListItem = function (_PureComponent) {
+  _inherits(FriendListItem, _PureComponent);
 
-    function FriendListItem() {
-        _classCallCheck(this, FriendListItem);
+  function FriendListItem() {
+    _classCallCheck(this, FriendListItem);
 
-        return _possibleConstructorReturn(this, (FriendListItem.__proto__ || Object.getPrototypeOf(FriendListItem)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (FriendListItem.__proto__ || Object.getPrototypeOf(FriendListItem)).apply(this, arguments));
+  }
+
+  _createClass(FriendListItem, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', null);
     }
+  }]);
 
-    _createClass(FriendListItem, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+  return FriendListItem;
+}(_react.PureComponent);
 
-    return FriendListItem;
-}(_react.Component);
-
 exports.default = FriendListItem;

build/components/MessageBubble.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -9,2 +9,5 @@
 
+var _templateObject = _taggedTemplateLiteral(['\n    display: inline;\n    color: ', ';\n    font-family: ', ';\n'], ['\n    display: inline;\n    color: ', ';\n    font-family: ', ';\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n    max-width: 40%;\n    word-wrap: break-word;\n    clear: both;\n    display: inline;\n    margin: 1px;\n    float: ', ';\n    padding: 0.5em;\n    background: ', ';\n    border-radius: ', ';\n'], ['\n    max-width: 40%;\n    word-wrap: break-word;\n    clear: both;\n    display: inline;\n    margin: 1px;\n    float: ', ';\n    padding: 0.5em;\n    background: ', ';\n    border-radius: ', ';\n']);
+
 var _react = require('react');
@@ -14,2 +17,10 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,21 +34,92 @@
 
-var MessageBubble = function (_Component) {
-    _inherits(MessageBubble, _Component);
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-    function MessageBubble() {
-        _classCallCheck(this, MessageBubble);
+var bubblePerspective = function bubblePerspective(_ref) {
+  var sender = _ref.sender,
+      top = _ref.top,
+      bottom = _ref.bottom;
 
-        return _possibleConstructorReturn(this, (MessageBubble.__proto__ || Object.getPrototypeOf(MessageBubble)).apply(this, arguments));
+  if (sender) {
+    if (top) {
+      return '15px 15px 15px 5px';
+    }if (bottom) {
+      return '5px 15px 15px 15px';
     }
+    return '5px 15px 15px 5px';
+  }
+  if (top) {
+    return '15px 15px 5px 15px';
+  }if (bottom) {
+    return '15px 5px 15px 15px';
+  }
+  return '15px 5px 5px 15px';
+};
 
-    _createClass(MessageBubble, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+var BubbleText = _styledComponents2.default.p(_templateObject, function (props) {
+  return props.color || '#222f3e';
+}, function (props) {
+  return props.font || 'helvetica';
+});
+var BubbleContainer = _styledComponents2.default.div(_templateObject2, function (props) {
+  return props.sender ? 'left' : 'right';
+}, function (props) {
+  return props.background || '#dfe4ea';
+}, function (props) {
+  return bubblePerspective(props);
+});
 
-    return MessageBubble;
-}(_react.Component);
+var MessageBubble = function (_PureComponent) {
+  _inherits(MessageBubble, _PureComponent);
 
-exports.default = MessageBubble;
+  function MessageBubble() {
+    _classCallCheck(this, MessageBubble);
+
+    return _possibleConstructorReturn(this, (MessageBubble.__proto__ || Object.getPrototypeOf(MessageBubble)).apply(this, arguments));
+  }
+
+  _createClass(MessageBubble, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          text = _props.text,
+          background = _props.background,
+          color = _props.color,
+          sender = _props.sender,
+          top = _props.top,
+          bottom = _props.bottom;
+
+      return _react2.default.createElement(
+        BubbleContainer,
+        {
+          background: background,
+          sender: sender,
+          bottom: bottom,
+          top: top
+        },
+        _react2.default.createElement(
+          BubbleText,
+          {
+            color: color
+          },
+          text
+        )
+      );
+    }
+  }]);
+
+  return MessageBubble;
+}(_react.PureComponent);
+
+exports.default = MessageBubble;
+
+
+MessageBubble.propTypes = {
+  text: _propTypes2.default.string.isRequired,
+  background: _propTypes2.default.string,
+  color: _propTypes2.default.string,
+  font: _propTypes2.default.string,
+  sender: _propTypes2.default.bool,
+  top: _propTypes2.default.bool,
+  bottom: _propTypes2.default.bool,
+  style: _propTypes2.default.string
+};

build/components/MessageInput.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
@@ -9,2 +9,4 @@
 
+var _templateObject = _taggedTemplateLiteral(['\n    \n'], ['\n    \n']);
+
 var _react = require('react');
@@ -14,2 +16,10 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,21 +33,30 @@
 
-var MessageInput = function (_Component) {
-    _inherits(MessageInput, _Component);
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-    function MessageInput() {
-        _classCallCheck(this, MessageInput);
+var InputContainer = _styledComponents2.default.input(_templateObject);
 
-        return _possibleConstructorReturn(this, (MessageInput.__proto__ || Object.getPrototypeOf(MessageInput)).apply(this, arguments));
+var MessageInput = function (_PureComponent) {
+  _inherits(MessageInput, _PureComponent);
+
+  function MessageInput() {
+    _classCallCheck(this, MessageInput);
+
+    return _possibleConstructorReturn(this, (MessageInput.__proto__ || Object.getPrototypeOf(MessageInput)).apply(this, arguments));
+  }
+
+  _createClass(MessageInput, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(InputContainer, { placeholder: this.props.text });
     }
+  }]);
 
-    _createClass(MessageInput, [{
-        key: 'render',
-        value: function render() {
-            return _react2.default.createElement('div', null);
-        }
-    }]);
+  return MessageInput;
+}(_react.PureComponent);
 
-    return MessageInput;
-}(_react.Component);
+exports.default = MessageInput;
 
-exports.default = MessageInput;
+
+MessageInput.propTypes = {
+  placeholder: _propTypes2.default.string
+};

build/index.js

@@ -27,11 +27,16 @@ 'use strict';
 
+var _MessageGroup = require('./containers/MessageGroup');
+
+var _MessageGroup2 = _interopRequireDefault(_MessageGroup);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = {
-    ChatContainer: _ChatContainer2.default,
-    ChatLog: _ChatLog2.default,
-    FriendList: _FriendList2.default,
-    FriendListItem: _FriendListItem2.default,
-    MessageBubble: _MessageBubble2.default,
-    MessageInput: _MessageInput2.default
+  ChatContainer: _ChatContainer2.default,
+  ChatLog: _ChatLog2.default,
+  FriendList: _FriendList2.default,
+  FriendListItem: _FriendListItem2.default,
+  MessageBubble: _MessageBubble2.default,
+  MessageInput: _MessageInput2.default,
+  MessageGroup: _MessageGroup2.default
 };

lib/components/ChatContainer.js

@@ -1,9 +0,9 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-export default class ChatContainer extends Component {
-    render() {
-        return (
-            <div></div>
-        );
-    }
+export default class ChatContainer extends PureComponent {
+  render() {
+    return (
+      <div />
+    );
+  }
 }

lib/components/ChatLog.js

@@ -1,9 +0,9 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-export default class ChatLog extends Component {
-    render() {
-        return (
-            <div></div>
-        );
-    }
+export default class ChatLog extends PureComponent {
+  render() {
+    return (
+      <div />
+    );
+  }
 }

lib/components/FriendList.js

@@ -1,9 +0,9 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-export default class FriendList extends Component {
-    render() {
-        return (
-            <div></div>
-        );
-    }
+export default class FriendList extends PureComponent {
+  render() {
+    return (
+      <div />
+    );
+  }
 }

lib/components/FriendListItem.js

@@ -1,9 +0,9 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-export default class FriendListItem extends Component {
-    render() {
-        return (
-            <div></div>
-        );
-    }
+export default class FriendListItem extends PureComponent {
+  render() {
+    return (
+      <div />
+    );
+  }
 }

lib/components/MessageBubble.js

@@ -1,9 +0,70 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
-export default class MessageBubble extends Component {
-    render() {
-        return (
-            <div></div>
-        );
+const bubblePerspective = ({ sender, top, bottom }) => {
+  if (sender) {
+    if (top) {
+      return '15px 15px 15px 5px';
+    } if (bottom) {
+      return '5px 15px 15px 15px';
     }
+    return '5px 15px 15px 5px';
+  }
+  if (top) {
+    return '15px 15px 5px 15px';
+  } if (bottom) {
+    return '15px 5px 15px 15px';
+  }
+  return '15px 5px 5px 15px';
+};
+
+const BubbleText = styled.p`
+    display: inline;
+    color: ${props => props.color || '#222f3e'};
+    font-family: ${props => props.font || 'helvetica'};
+`;
+const BubbleContainer = styled.div`
+    max-width: 40%;
+    word-wrap: break-word;
+    clear: both;
+    display: inline;
+    margin: 1px;
+    float: ${props => (props.sender ? 'left' : 'right')};
+    padding: 0.5em;
+    background: ${props => props.background || '#dfe4ea'};
+    border-radius: ${props => bubblePerspective(props)};
+`;
+
+export default class MessageBubble extends PureComponent {
+  render() {
+    const {
+      text, background, color, sender, top, bottom,
+    } = this.props;
+    return (
+      <BubbleContainer
+        background={background}
+        sender={sender}
+        bottom={bottom}
+        top={top}
+      >
+        <BubbleText
+          color={color}
+        >
+          { text }
+        </BubbleText>
+      </BubbleContainer>
+    );
+  }
 }
+
+MessageBubble.propTypes = {
+  text: PropTypes.string.isRequired,
+  background: PropTypes.string,
+  color: PropTypes.string,
+  font: PropTypes.string,
+  sender: PropTypes.bool,
+  top: PropTypes.bool,
+  bottom: PropTypes.bool,
+  style: PropTypes.string
+};

lib/components/MessageInput.js

@@ -1,9 +0,19 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
-export default class MessageInput extends Component {
-    render() {
-        return (
-            <div></div>
-        );
-    }
+const InputContainer = styled.input`
+    
+`;
+
+export default class MessageInput extends PureComponent {
+  render() {
+    return (
+      <InputContainer placeholder={this.props.text} />
+    );
+  }
 }
+
+MessageInput.propTypes = {
+  placeholder: PropTypes.string,
+};

lib/index.js

@@ -7,10 +7,12 @@ import ChatContainer from './components/ChatContainer';
 import MessageInput from './components/MessageInput';
+import MessageGroup from './containers/MessageGroup';
 
 module.exports = {
-    ChatContainer,
-    ChatLog,
-    FriendList,
-    FriendListItem,
-    MessageBubble,
-    MessageInput
+  ChatContainer,
+  ChatLog,
+  FriendList,
+  FriendListItem,
+  MessageBubble,
+  MessageInput,
+  MessageGroup,
 };

package.json

 {
   "name": "chat-engine-ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "A style-able, configurable UI library for PubNub's ChatEngine, built with React.",
@@ -8,5 +8,7 @@ "main": "build/index.js",
     "build": "babel lib -d build",
-    "lint": "eslint lib/**; exit 0",
+    "lint": "eslint --fix lib/**; exit 0",
     "lint:watch": "esw -w lib/**",
     "prepublish": "npm run build",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook-compile": "build-storybook -c .storybook -o docs",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -17,13 +19,18 @@ },
   "devDependencies": {
+    "@storybook/react": "^3.4.8",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.4",
+    "babel-eslint": "^8.2.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.12.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.9.1",
+    "eslint-plugin-react": "^7.10.0",
     "eslint-watch": "^3.1.5",
-    "polished": "^1.9.2",
+    "polished": "^1.9.2"
+  },
+  "dependencies": {
     "prop-types": "^15.6.2",
@@ -30,0 +37,0 @@ "react": "^16.4.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2041844

increased by8279.55%

Dev dependency count

14

decreased by-6.67%

Number of package files

32

increased by68.42%

Lines of code

573

increased by133.88%

Worsened metrics

Dependency count

4

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.2

• + Addedreact@^16.4.1

• + Addedreact-dom@^16.4.1

• + Addedstyled-components@^3.3.3

• + Addedasap@2.0.6(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedhas-flag@1.0.0(transitive)

• + Addedhoist-non-react-statics@2.5.5(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedstyled-components@3.4.10(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@3.2.3(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)