@mohamed-karawia/library 0.1.0

package/dist/stories/Navbar/Navbar.js

@@ -0,0 +1,346 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _formik = require("formik");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _CustomAutoComplete = _interopRequireDefault(require("../Common Inputs/CustomAutoComplete/CustomAutoComplete"));
+
+var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
+
+var _homeSvgrepoCom = _interopRequireDefault(require("../../assets/home-svgrepo-com.svg"));
+
+var _compassSvgrepoCom = _interopRequireDefault(require("../../assets/compass-svgrepo-com.svg"));
+
+var _addSvgrepoCom = _interopRequireDefault(require("../../assets/add-svgrepo-com.svg"));
+
+var _basketSvgrepoCom = _interopRequireDefault(require("../../assets/basket-svgrepo-com.svg"));
+
+var _bellSvgrepoCom = _interopRequireDefault(require("../../assets/bell-svgrepo-com.svg"));
+
+var _medalSvgrepoCom = _interopRequireDefault(require("../../assets/medal-svgrepo-com.svg"));
+
+var _settingsSvgrepoCom = _interopRequireDefault(require("../../assets/settings-svgrepo-com.svg"));
+
+var _searchSvgrepoCom = _interopRequireDefault(require("../../assets/search-svgrepo-com.svg"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* icon size can sm md lg  @sm by default*/
+
+/* icon background color @transparent by default*/
+var Navbar = function Navbar(_ref) {
+  var iconSize = _ref.iconSize,
+      iconBackgroundColor = _ref.iconBackgroundColor,
+      navbarColor = _ref.navbarColor,
+      dropDownItemHeight = _ref.dropDownItemHeight;
+  var initialValues = {
+    search: '',
+    searchIcons: ''
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      menuOpen = _useState2[0],
+      setMenuOpen = _useState2[1];
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var icons = [{
+    id: 'home',
+    label: 'home'
+  }, {
+    id: 'add',
+    label: 'add'
+  }, {
+    id: 'discover',
+    label: 'discover'
+  }, {
+    id: 'badge',
+    label: 'badge'
+  }, {
+    id: 'marketplace',
+    label: 'marketplace'
+  }, {
+    id: 'setting',
+    label: 'setting'
+  }, {
+    id: 'notification',
+    label: 'notification'
+  }];
+
+  var Option = function Option(name, image) {
+    return /*#__PURE__*/_react.default.createElement(OptionContainer, {
+      itemHeight: dropDownItemHeight
+    }, /*#__PURE__*/_react.default.createElement(OptionImage, {
+      src: image
+    }), /*#__PURE__*/_react.default.createElement(Label, null, name));
+  };
+
+  var options = [{
+    value: 'cat',
+    label: Option('cat', 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg')
+  }, {
+    value: 'strawberry',
+    label: Option('strawberry', 'https://media.istockphoto.com/photos/red-berry-strawberry-isolated-picture-id1157946861?b=1&k=20&m=1157946861&s=170667a&w=0&h=feuhHInk3SV4tpLEHTWtpEW-dBKjPWPmOMlgmPh82Ls=')
+  }, {
+    value: 'vanilla',
+    label: Option('vanilla', 'https://static.toiimg.com/thumb/54677722.cms?imgsize=134423&width=800&height=800')
+  }];
+  var accountOptions = [{
+    value: 'settings',
+    label: Option('settings', 'http://simpleicon.com/wp-content/uploads/setting2.png')
+  }, {
+    value: 'logout',
+    label: Option('logout', 'https://cdn2.vectorstock.com/i/1000x1000/24/66/door-icon-emergency-exit-sign-vector-20712466.jpg')
+  }];
+  var customStyles = {
+    menu: function menu(styles) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        width: '150px'
+      });
+    },
+    control: function control(styles) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        border: '0',
+        backgroundColor: "".concat(navbarColor)
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(NavBar, {
+    color: navbarColor
+  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _homeSvgrepoCom.default,
+    size: iconSize
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _addSvgrepoCom.default,
+    size: iconSize
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '200px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    options: options,
+    styles: {
+      color: 'blue'
+    }
+  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _compassSvgrepoCom.default,
+    size: iconSize
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _medalSvgrepoCom.default,
+    size: iconSize
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _basketSvgrepoCom.default,
+    size: iconSize
+  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _searchSvgrepoCom.default,
+    size: iconSize
+  }), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: initialValues,
+    onSubmit: function onSubmit(values) {
+      return submitHandler(values);
+    }
+  }, function (_ref2) {
+    var errors = _ref2.errors,
+        touched = _ref2.touched,
+        setFieldValue = _ref2.setFieldValue,
+        values = _ref2.values;
+    return /*#__PURE__*/_react.default.createElement(CreateForm, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomAutoComplete.default, {
+      label: "",
+      name: "searchIcons",
+      items: icons,
+      placeholder: "Search Icons",
+      value: values.searchIcons,
+      onInputChange: function onInputChange(value) {
+        setFieldValue('searchIcons', value);
+      },
+      inputValue: values.searchIcons,
+      outline: "none",
+      itemHeight: "35",
+      width: "98",
+      borderColor: "#9e9e9e",
+      borderSize: "0",
+      borderRadius: "10",
+      padding: "4",
+      height: "30"
+    })));
+  }))), /*#__PURE__*/_react.default.createElement(ProfileBar, null, /*#__PURE__*/_react.default.createElement(ProfileContainer, null, /*#__PURE__*/_react.default.createElement(Profile, null, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    options: accountOptions,
+    styles: customStyles,
+    components: {
+      ValueContainer: function ValueContainer() {
+        return null;
+      },
+      IndicatorSeparator: function IndicatorSeparator() {
+        return null;
+      },
+      DropdownIndicator: function DropdownIndicator() {
+        return /*#__PURE__*/_react.default.createElement(Image, {
+          src: "https://play.teleporthq.io/static/svg/default-img.svg",
+          onClick: function onClick() {
+            return setMenuOpen(!menuOpen);
+          }
+        });
+      }
+    },
+    menuIsOpen: menuOpen
+  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _settingsSvgrepoCom.default,
+    size: iconSize
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+    size: iconSize,
+    color: iconBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    src: _bellSvgrepoCom.default,
+    size: iconSize
+  }))))));
+};
+
+var _default = Navbar;
+exports.default = _default;
+var CreateForm = (0, _styledComponents.default)(_formik.Form)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+
+var Image = _styledComponents.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n"])));
+
+var NavBar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  height: 72px;\n  display: flex;\n  align-items: center;\n  padding-left: 16;\n  padding-right: 16;\n  flex-direction: row;\n  justify-content: flex-start;\n  background-color: ", ";\n"])), function (props) {
+  return props.color || '#e3e5e8';
+});
+
+var UniverseContainer = (0, _styledComponents.default)('div')({
+  width: '346px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'flex-start'
+});
+
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: ", ";\n"])), function (props) {
+  return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';
+}, function (props) {
+  return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';
+}, function (props) {
+  return props.color || 'transparent';
+});
+
+var Icon = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+  return props.size === 'sm' ? '20px' : props.size === 'md' ? '25px' : props.size === 'lg' ? '30px' : '20px';
+}, function (props) {
+  return props.size === 'sm' ? '20px' : props.size === 'md' ? '25px' : props.size === 'lg' ? '30px' : '20px';
+});
+
+var DiscoverContainer = (0, _styledComponents.default)('div')({
+  width: '190px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center'
+});
+var SearchContainer = (0, _styledComponents.default)('div')({
+  width: '100%',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center'
+});
+var SearchBar = (0, _styledComponents.default)('div')({
+  width: '315px',
+  height: '40px',
+  display: 'flex',
+  paddingLeft: '8px',
+  'align-items': 'center',
+  'border-radius': '20px',
+  'flex-direction': 'row',
+  'background-color': '#ffffff',
+  flex: '1'
+});
+var ProfileBar = (0, _styledComponents.default)('div')({
+  width: '273px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'space-between'
+});
+var ProfileContainer = (0, _styledComponents.default)('div')({
+  width: '86px',
+  height: '100%',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'flex-start'
+});
+var Profile = (0, _styledComponents.default)('div')({
+  flex: '0 0 auto',
+  width: '50px',
+  height: '50px',
+  display: 'flex',
+  'align-items': 'center',
+  'margin-left': '4px',
+  'border-radius': '20px',
+  'flex-direction': 'row',
+  'justify-content': 'center'
+});
+var UserName = (0, _styledComponents.default)('span')({
+  'padding-left': '8px'
+});
+var SettingsContainer = (0, _styledComponents.default)('div')({
+  width: '59px',
+  height: '100%',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center'
+});
+
+var OptionContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: ", ";\n"])), function (props) {
+  return props.itemHeight || '20px';
+});
+
+var OptionImage = _styledComponents.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  height: 30px;\n  width: 30px;\n"])));
+
+var Label = _styledComponents.default.label(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 5px;\n"])));

package/dist/stories/Navbar/Navbar.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Navbar = _interopRequireDefault(require("./Navbar"));
+
+var _default = {
+  title: 'Navbar/Default',
+  component: _Navbar.default,
+  argTypes: {
+    iconSize: {
+      options: ['sm', 'md', 'lg'],
+      control: {
+        type: 'select'
+      }
+    },
+    iconBackgroundColor: {
+      type: 'string'
+    },
+    navbarColor: {
+      type: 'string'
+    },
+    dropDownItemHeight: {
+      type: 'string'
+    }
+  }
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Navbar.default, props);
+};
+
+exports.Default = Default;

package/dist/stories/Pages/Blank/Blank.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Head = _interopRequireDefault(require("../../Layout/Head/Head"));
+
+var _Body = _interopRequireDefault(require("../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../Layout/Right/Right"));
+
+var BlankPage = function BlankPage() {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Head.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, null, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Left")), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Center")), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Right"))));
+};
+
+var _default = BlankPage;
+exports.default = _default;
+var Container = (0, _styledComponents.default)('div')({
+  width: '100%',
+  height: 'auto',
+  display: 'flex',
+  'min-height': '100vh',
+  'flex-direction': 'column'
+});

package/dist/stories/Pages/Blank/Blank.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Blank = _interopRequireDefault(require("./Blank"));
+
+var _default = {
+  title: 'Pages/Blank',
+  component: _Blank.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Blank.default, props);
+};
+
+exports.Default = Default;

package/dist/stories/Pages/Centered/Centered.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var Centered = function Centered(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Content, null, children));
+};
+
+var _default = Centered;
+exports.default = _default;
+var Container = (0, _styledComponents.default)('div')({
+  height: 'auto',
+  'min-height': '100vh',
+  width: '100%',
+  display: 'flex',
+  'flex-direction': 'column',
+  'align-items': 'center',
+  'justify-content': 'center'
+});
+var Content = (0, _styledComponents.default)('div')({
+  display: 'flex',
+  'align-items': 'flex-start',
+  flex: '0 0 auto'
+});

package/dist/stories/Pages/Centered/Centered.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Centered = _interopRequireDefault(require("./Centered"));
+
+var _default = {
+  title: 'Pages/Centered',
+  component: _Centered.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Centered.default, props, "Welcome To Community Builder Pro");
+};
+
+exports.Default = Default;

package/dist/stories/Pages/Chat/Chat.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../Navbar/Navbar"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../ViewWorld/styles.json"));
+
+var _constatnts = require("../ViewWorld/constatnts");
+
+var _Chat = _interopRequireDefault(require("../../Chat/Chat"));
+
+var _excluded = ["users", "data"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Chat = function Chat(_ref) {
+  var users = _ref.users,
+      data = _ref.data,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "logo",
+    widgetProps: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Music Album",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_Chat.default, {
+    data: data,
+    users: users
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = Chat;
+exports.default = _default;

package/dist/stories/Pages/Chat/Chat.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Page = exports.default = void 0;
+
+var _Chat = _interopRequireDefault(require("./Chat"));
+
+var _default = {
+  title: 'Pages/Chat',
+  component: _Chat.default
+};
+exports.default = _default;
+var users = [{
+  id: 'walter',
+  display: 'Walter White'
+}, {
+  id: 'jesse',
+  display: 'Jesse Pinkman'
+}, {
+  id: 'gus',
+  display: 'Gustavo "Gus" Fring'
+}, {
+  id: 'saul',
+  display: 'Saul Goodman'
+}, {
+  id: 'hank',
+  display: 'Hank Schrader'
+}, {
+  id: 'skyler',
+  display: 'Skyler White'
+}, {
+  id: 'mike',
+  display: 'Mike Ehrmantraut'
+}, {
+  id: 'lydia',
+  display: 'Lydìã Rôdarté-Qüayle'
+}];
+var data = [{
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test ',
+  media: /*#__PURE__*/React.createElement("img", {
+    src: "https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"
+  })
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}];
+
+var Page = function Page(args) {
+  return /*#__PURE__*/React.createElement(_Chat.default, Object.assign({
+    users: users,
+    data: data
+  }, args));
+};
+
+exports.Page = Page;