@mohamed-karawia/library 0.1.21 → 0.1.22

package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js

@@ -29,13 +29,15 @@ var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
 
 var _MusicAlbumsPreview = _interopRequireDefault(require("../../PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview"));
 
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
 var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["albums", "albumTitleColor", "descColor"];
+var _excluded = ["albums", "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); }
 
@@ -58,8 +60,7 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      albumTitleColor = _ref.albumTitleColor,
-      descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -72,14 +73,20 @@ var ViewAlbums = function ViewAlbums(_ref) {
       showConfigModal = _useState4[0],
       setShowConfigModal = _useState4[1];
 
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbums, {
+    preview: true,
+    albums: albums
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
   var tabs = [{
     title: 'New',
-    component: /*#__PURE__*/_react.default.createElement(_MusicAlbumsPreview.default, {
-      componentProps: {
-        albums: albums,
-        title: props.title || 'Music Albums'
-      }
-    })
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
   }];
   var sections = [{
     title: 'Styles',
@@ -93,17 +100,19 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }];
 
   var onHeaderIconClicked = function onHeaderIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      case 'config':
-        setShowConfigModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -111,6 +120,13 @@ var ViewAlbums = function ViewAlbums(_ref) {
     props.cardIconClicked(action, index);
   };
 
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbums, Object.assign({
+      preview: true,
+      albums: albums
+    }, values)));
+  };
+
   var onAddAlbum = function onAddAlbum(album) {
     setShowModal(false);
     props.onAddAlbum(album);
@@ -120,6 +136,11 @@ var ViewAlbums = function ViewAlbums(_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 || 'Music Albums',
     data: albums,
@@ -144,27 +165,26 @@ var ViewAlbums = function ViewAlbums(_ref) {
     cancelBtnText: props.cancelBtnText || "Cancel"
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Sections.default, {
-    sections: sections,
-    backgroundColor: 'white',
-    sectionHeaderStyles: {
-      titleColor: 'white',
-      headerBackground: 'transparent'
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Albums Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_MusicAlbumsPreview.default, {
+    componentProps: {
+      albums: albums,
+      title: 'Music Albums',
+      preview: true
     },
-    customCardStyles: {
-      cardPadding: 6,
-      cardTitleFontSize: 15,
-      cardBackgroundColor: '#2c2c2c',
-      cardTitleColor: 'white',
-      onHoverBackgroundColor: '#555555'
-    }
-  })));
+    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    width: 100%;\n"])));

package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js

@@ -39,7 +39,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "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); }
 
@@ -65,6 +65,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       cardBackgroundColor = _ref.cardBackgroundColor,
       imgTitleColor = _ref.imgTitleColor,
       descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cardStyles = {
     cardBackgroundColor: cardBackgroundColor,
@@ -114,6 +115,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       setOpenedImg = _useState10[1];
 
   var _useState11 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    preview: true,
     album: album
   })),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
@@ -122,6 +124,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      preview: true,
       album: album
     }, values)));
   };
@@ -152,17 +155,19 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, [openedImgIndex, handleUserKeyPress]);
 
   var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      case 'config':
-        setShowConfigModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -198,6 +203,11 @@ var ViewAlbum = function ViewAlbum(_ref) {
     }
   };
 
+  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 || "Photo Album",
     data: album,
@@ -246,9 +256,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     onClick: nextPhoto
   }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineArrowRight, null))), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -262,9 +270,11 @@ var ViewAlbum = function ViewAlbum(_ref) {
       title: props.title || 'Photo Album',
       preview: true
     },
-    formChanged: formChanged
+    formChanged: formChanged,
+    id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js

@@ -37,7 +37,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["albums"];
+var _excluded = ["albums", "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); }
 
@@ -60,6 +60,7 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -73,6 +74,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
       setShowConfigModal = _useState4[1];
 
   var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbums, {
+    preview: true,
     albums: albums
   })),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -81,6 +83,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbums, Object.assign({
+      preview: true,
       albums: albums
     }, values)));
   };
@@ -125,6 +128,11 @@ var ViewAlbums = function ViewAlbums(_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 || "Photo Albums",
     data: albums,
@@ -147,9 +155,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
     cancelHandler: cancelHandler
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -167,6 +173,7 @@ var ViewAlbums = function ViewAlbums(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

package/dist/stories/PreviewComponents/ChatPreview/ChatPreview.js

@@ -31,7 +31,7 @@ var ChatPreview = function ChatPreview(props) {
       chatStyles = _useState2[0],
       setChatStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/EventPreview/EventPreview.js

@@ -31,7 +31,7 @@ var EventPreview = function EventPreview(props) {
       eventStyles = _useState2[0],
       setEventStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/EventsPreview/EventsPreview.js

@@ -31,7 +31,7 @@ var EventsPreview = function EventsPreview(props) {
       eventsStyles = _useState2[0],
       setEventsStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/FoldersPreview/FoldersPreview.js

@@ -31,7 +31,7 @@ var FoldersPreview = function FoldersPreview(props) {
       foldersStyles = _useState2[0],
       setFoldersStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.js

@@ -33,7 +33,7 @@ var MusicAlbumsPreview = function MusicAlbumsPreview(props) {
       musicAlbumsStyles = _useState2[0],
       setMusicAlbumsStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.js

@@ -33,7 +33,7 @@ var MusicPlayerPreview = function MusicPlayerPreview(props) {
       musicPlayerStyles = _useState2[0],
       setMusicPlayerStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/NavbarPreview/NavbarPreview.js

@@ -31,7 +31,7 @@ var NavbarPreview = function NavbarPreview(props) {
       navbarStyles = _useState2[0],
       setNavbarStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     iconSize: 'md',
     iconBackgroundColor: 'black',
     navbarColor: 'white'

package/dist/stories/PreviewComponents/NotesPreview/NotesPreview.js

@@ -31,7 +31,7 @@ var NotesPreview = function NotesPreview(props) {
       notesStyles = _useState2[0],
       setNotesStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.js

@@ -31,7 +31,7 @@ var PhotoAlbumPreview = function PhotoAlbumPreview(props) {
       photoAlbumStyles = _useState2[0],
       setPhotoAlbumStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js

@@ -31,7 +31,7 @@ var PhotoAlbumsPreview = function PhotoAlbumsPreview(props) {
       photoAlbumsStyles = _useState2[0],
       setPhotoAlbumsStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js

@@ -31,7 +31,7 @@ var SpacesListPreview = function SpacesListPreview(props) {
       spacesStyles = _useState2[0],
       setSpacesStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js

@@ -31,7 +31,7 @@ var VideoAlbumPreview = function VideoAlbumPreview(props) {
       videoAlbumStyles = _useState2[0],
       setVideoAlbumStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js

@@ -31,7 +31,7 @@ var VideoAlbumsPreview = function VideoAlbumsPreview(props) {
       videoAlbumsStyles = _useState2[0],
       setVideoAlbumsStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js

@@ -31,7 +31,7 @@ var VideoPreview = function VideoPreview(props) {
       videoStyles = _useState2[0],
       setVideoStyles = _useState2[1];
 
-  var initialValues = {
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/dist/stories/Reusable Components/Community/Community.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
@@ -27,49 +27,27 @@ var _Right = _interopRequireDefault(require("../../Layout/Right/Right"));
 
 var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
 
-var _templateObject;
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
 
-var _excluded = ["context"];
+var _excluded = ["context", "community"];
 
 // import styles from '../../styling.json'
 var Community = function Community(_ref) {
   var context = _ref.context,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var spaces = [{
-    title: 'Main List',
-    data: [{
-      title: 'Cargo Sprint',
-      path: 'cago'
-    }, {
-      title: 'Movies',
-      path: 'movies'
-    }]
-  }, {
-    title: 'Entertainment',
-    data: [{
-      title: 'Gaming',
-      path: 'games'
-    }, {
-      title: 'Music',
-      path: 'music'
-    }]
-  }];
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, null, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+  var spacesWidget = community.spacesListWidget.widgetSpacesList;
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, community.styles, /*#__PURE__*/_react.default.createElement(_Navbar.default, community.navbarStyles), /*#__PURE__*/_react.default.createElement(_Body.default, null, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "spaces-list",
-    widgetProps: {
-      listTitle: 'Your Spaces',
-      spaces: spaces,
+    widgetProps: (0, _objectSpread2.default)({
+      listTitle: spacesWidget.listTitle,
+      spaces: spacesWidget.spaces,
       cardClicked: function cardClicked() {
-        return alert('clicked');
-      } // headerStyles: styles.widgetContainer.header,
-      // sectionHeaderStyles: styles.widgetContainer.body.sectionHeaderStyles,
-      // customCardStyles: styles.widgetContainer.body.customCardStyles,
-
-    }
+        return null;
+      }
+    }, spacesWidget.styles)
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, props.center), /*#__PURE__*/_react.default.createElement(_Right.default, null, props.right)));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: auto;\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n"])));
-
 var _default = Community;
 exports.default = _default;

package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js

@@ -37,7 +37,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize"];
+var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize", "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); }
 
@@ -65,6 +65,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
       cardTitleFontSize = _ref.cardTitleFontSize,
       countColor = _ref.countColor,
       countFontSize = _ref.countFontSize,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -78,6 +79,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
       setShowConfigModal = _useState4[1];
 
   var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(AlbumsGallery, {
+    preview: true,
     videoAlbums: videoAlbums
   })),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -86,6 +88,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(AlbumsGallery, Object.assign({
+      preview: true,
       videoAlbums: videoAlbums
     }, values)));
   };
@@ -151,6 +154,11 @@ var AlbumsGallery = function AlbumsGallery(_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: "Video Albums",
     data: videoAlbums,
@@ -180,9 +188,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     cancelHandler: cancelHandler
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -199,6 +205,7 @@ var AlbumsGallery = function AlbumsGallery(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

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

@@ -37,7 +37,7 @@ 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); }
 
@@ -68,6 +68,7 @@ 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),
@@ -76,7 +77,10 @@ var VideoSpace = function VideoSpace(_ref) {
       setShowConfigModal = _useState2[1];
 
   var _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(VideoSpace, {
-    videoSrc: videoSrc
+    users: users,
+    preview: true,
+    videoSrc: videoSrc,
+    comments: comments
   })),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       centerContext = _useState4[0],
@@ -84,7 +88,10 @@ var VideoSpace = function VideoSpace(_ref) {
 
   var formChanged = function formChanged(values) {
     setCenterContext( /*#__PURE__*/_react.default.createElement(VideoSpace, Object.assign({
-      videoSrc: videoSrc
+      users: users,
+      preview: true,
+      videoSrc: videoSrc,
+      comments: comments
     }, values)));
   };
 
@@ -109,6 +116,11 @@ var VideoSpace = function VideoSpace(_ref) {
     }
   };
 
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
@@ -138,9 +150,7 @@ var VideoSpace = function VideoSpace(_ref) {
     users: users
   }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -160,6 +170,7 @@ var VideoSpace = function VideoSpace(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };