@mohamed-karawia/library 0.1.18 → 0.1.22

package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js

@@ -9,21 +9,45 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
 var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer/VideoPlayer"));
 
 var _Comments = _interopRequireDefault(require("../Comments/Comments"));
 
 var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTextInput/RichTextInput"));
 
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _bs = require("react-icons/bs");
+
+var _VideoPreview = _interopRequireDefault(require("../../PreviewComponents/VideoPreview/VideoPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize", "community"];
+
+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 controls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
 
 var VideoSpace = function VideoSpace(_ref) {
   var videoSrc = _ref.videoSrc,
@@ -44,10 +68,66 @@ var VideoSpace = function VideoSpace(_ref) {
       commentBackgroundColor = _ref.commentBackgroundColor,
       commentTitleColor = _ref.commentTitleColor,
       commentTitleFontSize = _ref.commentTitleFontSize,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showConfigModal = _useState2[0],
+      setShowConfigModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(VideoSpace, {
+    users: users,
+    preview: true,
+    videoSrc: videoSrc,
+    comments: comments
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      centerContext = _useState4[0],
+      setCenterContext = _useState4[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(VideoSpace, Object.assign({
+      users: users,
+      preview: true,
+      videoSrc: videoSrc,
+      comments: comments
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+
+  var iconClicked = function iconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title || 'Video Space',
+    controls: controls,
+    iconClicked: iconClicked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
     iconsColor: iconsColor,
     src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
@@ -68,7 +148,31 @@ var VideoSpace = function VideoSpace(_ref) {
     cardTitleFontSize: commentTitleFontSize
   }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
     users: users
-  }));
+  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: cancelConfig,
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Video Space Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_VideoPreview.default, {
+    componentProps: {
+      title: title,
+      discription: discription,
+      comments: comments,
+      date: date,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    community: community,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js

@@ -23,11 +23,21 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _AddVideo = _interopRequireDefault(require("../../Forms/AddVideo/AddVideo"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _VideoAlbumPreview = _interopRequireDefault(require("../../PreviewComponents/VideoAlbumPreview/VideoAlbumPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _templateObject;
 
-var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor", "community"];
 
 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); }
 
@@ -46,6 +56,10 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 
 var ViewAlbum = function ViewAlbum(_ref) {
@@ -54,6 +68,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       cardTitleColor = _ref.cardTitleColor,
       cardTitleFontSize = _ref.cardTitleFontSize,
       descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -61,6 +76,34 @@ var ViewAlbum = function ViewAlbum(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    preview: true,
+    album: album
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    console.log('context changed');
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      preview: true,
+      album: album
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
   var cardStyles = {
     darkOnHover: true,
     cardBackgroundColor: cardBackgroundColor,
@@ -82,13 +125,19 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   var onHeaderIconClicked = function onHeaderIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -105,6 +154,11 @@ var ViewAlbum = function ViewAlbum(_ref) {
     setShowModal(false);
   };
 
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
     galleryTitle: props.title || "Video Album",
     data: album,
@@ -126,7 +180,28 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddVideo.default, {
     saveHandler: onAddVideo,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: cancelConfig,
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Video Album Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_VideoAlbumPreview.default, {
+    componentProps: {
+      album: album,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    community: community,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));

package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js

@@ -19,7 +19,9 @@ var _reactH5AudioPlayer = _interopRequireDefault(require("react-h5-audio-player"
 
 require("react-h5-audio-player/lib/styles.css");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 var _excluded = ["currentSong"];
 
@@ -37,7 +39,9 @@ var MusicPlayerWidget = function MusicPlayerWidget(_ref) {
     borderRadius: props.borderRadius
   })), /*#__PURE__*/_react.default.createElement(MusicName, props, props.playlist[currentSong].title), /*#__PURE__*/_react.default.createElement(ArtistName, null, props.playlist[currentSong].description));
 
-  return /*#__PURE__*/_react.default.createElement(MusicPlayer, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: props.title || 'Music Player'
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(MusicPlayer, Object.assign({
     autoPlay: "none",
     src: props.playlist[currentSong].musicSrc,
     onPlay: function onPlay(e) {
@@ -52,11 +56,13 @@ var MusicPlayerWidget = function MusicPlayerWidget(_ref) {
     onClickNext: function onClickNext() {
       return props.nextSong();
     }
-  }, props));
+  }, props)));
 };
 
-var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    font-family: ", ";\n    background-color:  ", ";\n    border-radius: ", ";\n    padding: ", "px;\n    width: ", "px;\n    box-shadow: ", ";\n\n    .rhap_progress-filled,\n    .rhap_progress-indicator {\n        background-color: ", ";\n    }\n    \n    .rhap_repeat-button,\n    .rhap_main-controls-button,\n    .rhap_volume-button,\n    .rhap_time {\n        color: ", ";\n    }\n    \n    .rhap_download-progress,\n    .rhap_volume-bar {\n        background-color: gray ;\n    }\n    \n\n    .rhap_volume-indicator {\n        background: ", ";\n    }\n\n"])), function (props) {
-  return props.fontFamily || 'inherit';
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n    font-family: ", ";\n    background-color:  ", ";\n    border-radius: ", ";\n    padding: ", "px;\n    width: ", "px;\n    box-shadow: ", ";\n\n    .rhap_progress-filled,\n    .rhap_progress-indicator {\n        background-color: ", ";\n    }\n    \n    .rhap_repeat-button,\n    .rhap_main-controls-button,\n    .rhap_volume-button,\n    .rhap_time {\n        color: ", ";\n    }\n    \n    .rhap_download-progress,\n    .rhap_volume-bar {\n        background-color: gray ;\n    }\n    \n\n    .rhap_volume-indicator {\n        background: ", ";\n    }\n\n"])), function (props) {
+  return props.fontFamily || 'sans-serif';
 }, function (props) {
   return props.backgroundColor || 'transparent';
 }, function (props) {
@@ -75,19 +81,19 @@ var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_t
   return props.primaryColor;
 });
 
-var Header = _styledComponents.default.header(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n"])));
+var Header = _styledComponents.default.header(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n"])));
 
-var CoverWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+var CoverWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-var Img = _styledComponents.default.img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    height: inherit;\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n"])));
+var Img = _styledComponents.default.img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    height: inherit;\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n"])));
 
-var MusicName = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+var MusicName = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n    font-weight: 300;\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
   return props.fontSize;
 });
 
-var ArtistName = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    color: #7a7a7a;\n    text-transform: capitalize;\n"])));
+var ArtistName = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    color: #7a7a7a;\n    text-transform: capitalize;\n"])));
 
 var _default = MusicPlayerWidget;
 exports.default = _default;

package/dist/stories/Widgets/SpacesListWidget/SpacesListWidget.js

@@ -0,0 +1,115 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _SpacesListPreview = _interopRequireDefault(require("../../PreviewComponents/SpacesListPreview/SpacesListPreview"));
+
+var _CreateSpace = _interopRequireDefault(require("../../Forms/CreateSpace/CreateSpace"));
+
+var _templateObject;
+
+var _excluded = ["spaces"];
+
+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 SpacesListWidget = function SpacesListWidget(_ref) {
+  var spaces = _ref.spaces,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showCreateModal = _useState2[0],
+      setShowCreateModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var listControls = [{
+    icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+    action: 'add',
+    name: 'Create Space'
+  }, {
+    icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+    action: 'config',
+    name: 'Config'
+  }];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowCreateModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || 'My Spaces',
+    type: "sectioned",
+    data: spaces,
+    iconClicked: onIconClicked,
+    listControls: listControls,
+    cardStyle: "card-style-3"
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showCreateModal,
+    closeModal: function closeModal() {
+      return setShowCreateModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CreateSpace.default, null)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SpacesListPreview.default, {
+    componentProps: {
+      spaces: spaces,
+      preview: true
+    }
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));
+
+var _default = SpacesListWidget;
+exports.default = _default;

package/dist/stories/Widgets/UsersWidget/UsersWidget.js

@@ -0,0 +1,30 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _excluded = ["users"];
+
+var UsersWidget = function UsersWidget(_ref) {
+  var users = _ref.users,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || 'Members List',
+    cardStyle: "card-style-1",
+    data: users,
+    type: "flat"
+  }, props));
+};
+
+var _default = UsersWidget;
+exports.default = _default;

package/dist/stories/helpers/util.js

@@ -43,6 +43,10 @@ var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
 
 var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
 
+var _UsersWidget = _interopRequireDefault(require("../Widgets/UsersWidget/UsersWidget"));
+
+var _SpacesListWidget = _interopRequireDefault(require("../Widgets/SpacesListWidget/SpacesListWidget"));
+
 var _Navbar = _interopRequireDefault(require("../Navbar/Navbar"));
 
 var _ViewAlbums = _interopRequireDefault(require("../Music Album/ViewAlbums/ViewAlbums"));
@@ -53,9 +57,21 @@ var _ViewAlbums2 = _interopRequireDefault(require("../Photo Album/ViewAlbums/Vie
 
 var _ViewAlbum2 = _interopRequireDefault(require("../Photo Album/ViewAlbum/ViewAlbum"));
 
+var _Chat = _interopRequireDefault(require("../Chat/Chat"));
+
+var _EventsList = _interopRequireDefault(require("../Events/EventsList/EventsList"));
+
+var _Event = _interopRequireDefault(require("../Events/Event/Event"));
+
+var _VideoSpace = _interopRequireDefault(require("../VideoAlbum/VideoSpace/VideoSpace"));
+
+var _AlbumsGallery = _interopRequireDefault(require("../VideoAlbum/AlbumsGallery/AlbumsGallery"));
+
+var _ViewAlbum3 = _interopRequireDefault(require("../VideoAlbum/ViewAlbum/ViewAlbum"));
+
 // Cards
 // Widgets
-// Components
+// Preview Components
 var stringSearch = function stringSearch(str, word) {
   str = str.toUpperCase();
   word = word.toUpperCase();
@@ -196,7 +212,14 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
     'logo': /*#__PURE__*/_react.default.createElement(_LogoWidget.default, props),
     'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props),
     'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, props),
-    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props)
+    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props),
+    'users': /*#__PURE__*/_react.default.createElement(_UsersWidget.default, props),
+    'profile': /*#__PURE__*/_react.default.createElement(_CardStyle2.default, props),
+    'spaces-list': /*#__PURE__*/_react.default.createElement(_SpacesListWidget.default, Object.assign({
+      cardClicked: function cardClicked(path) {
+        return _cardClicked(path);
+      }
+    }, props))
   };
   return widgetTypes[widgetType];
 };
@@ -209,7 +232,17 @@ var getComponentType = function getComponentType(componentType, componentProps,
     'MusicAlbums': /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, Object.assign({}, componentProps, stylingProps)),
     'MusicAlbum': /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, Object.assign({}, componentProps, stylingProps)),
     'PhotoAlbum': /*#__PURE__*/_react.default.createElement(_ViewAlbum2.default, Object.assign({}, componentProps, stylingProps)),
-    'PhotoAlbums': /*#__PURE__*/_react.default.createElement(_ViewAlbums2.default, Object.assign({}, componentProps, stylingProps))
+    'PhotoAlbums': /*#__PURE__*/_react.default.createElement(_ViewAlbums2.default, Object.assign({}, componentProps, stylingProps)),
+    'MusicPlayer': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, Object.assign({}, componentProps, stylingProps)),
+    'Folders': /*#__PURE__*/_react.default.createElement(_Folders.default, Object.assign({}, componentProps, stylingProps)),
+    'Notes': /*#__PURE__*/_react.default.createElement(_Notes.default, Object.assign({}, componentProps, stylingProps)),
+    'Spaces-List': /*#__PURE__*/_react.default.createElement(_SpacesListWidget.default, Object.assign({}, componentProps, stylingProps)),
+    'Chat': /*#__PURE__*/_react.default.createElement(_Chat.default, Object.assign({}, componentProps, stylingProps)),
+    'Events': /*#__PURE__*/_react.default.createElement(_EventsList.default, Object.assign({}, componentProps, stylingProps)),
+    'Event': /*#__PURE__*/_react.default.createElement(_Event.default, Object.assign({}, componentProps, stylingProps)),
+    'Video-Space': /*#__PURE__*/_react.default.createElement(_VideoSpace.default, Object.assign({}, componentProps, stylingProps)),
+    'Video-Albums': /*#__PURE__*/_react.default.createElement(_AlbumsGallery.default, Object.assign({}, componentProps, stylingProps)),
+    'Video-Album': /*#__PURE__*/_react.default.createElement(_ViewAlbum3.default, Object.assign({}, componentProps, stylingProps))
   };
   return componentTypes[componentType];
 };