@mohamed-karawia/library 0.1.20 → 0.1.23

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,
@@ -144,10 +144,12 @@ var ChatPreview = function ChatPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setChatStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setChatStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -109,10 +109,12 @@ var EventPreview = function EventPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setEventStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setEventStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -143,10 +143,12 @@ var EventsPreview = function EventsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setEventsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setEventsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -133,10 +133,12 @@ var FoldersPreview = function FoldersPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setFoldersStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setFoldersStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

package/dist/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.js

@@ -128,10 +128,12 @@ var MusicAlbum = function MusicAlbum(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setMusicAlbumStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setMusicAlbumStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -131,10 +131,12 @@ var MusicAlbumsPreview = function MusicAlbumsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setMusicAlbumsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setMusicAlbumsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 
@@ -171,8 +173,7 @@ var MusicAlbumsPreview = function MusicAlbumsPreview(props) {
   })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
     type: 'MusicAlbums',
     componentProps: props.componentProps,
-    stylingProps: musicAlbumsStyles,
-    da: true
+    stylingProps: musicAlbumsStyles
   })));
 };
 

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,
@@ -103,10 +103,12 @@ var MusicPlayerPreview = function MusicPlayerPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setMusicPlayerStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setMusicPlayerStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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'
@@ -64,10 +64,12 @@ var NavbarPreview = function NavbarPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setNavbarStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setNavbarStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -124,10 +124,12 @@ var NotesPreview = function NotesPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setNotesStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setNotesStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -140,10 +140,12 @@ var PhotoAlbumPreview = function PhotoAlbumPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setPhotoAlbumStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setPhotoAlbumStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -140,10 +140,12 @@ var PhotoAlbumsPreview = function PhotoAlbumsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setPhotoAlbumsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setPhotoAlbumsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -148,10 +148,12 @@ var SpacesListPreview = function SpacesListPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setSpacesStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setSpacesStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -140,10 +140,12 @@ var VideoAlbumPreview = function VideoAlbumPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoAlbumStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoAlbumStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -126,10 +126,12 @@ var VideoAlbumsPreview = function VideoAlbumsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoAlbumsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoAlbumsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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,
@@ -123,10 +123,12 @@ var VideoPreview = function VideoPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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

@@ -0,0 +1,58 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _templateObject;
+
+var _excluded = ["comments", "cardPadding", "imgSize", "cardTitleFontSize", "cardTitleColor", "contentGap", "cardBackgroundColor"];
+
+var Comments = function Comments(_ref) {
+  var comments = _ref.comments,
+      cardPadding = _ref.cardPadding,
+      imgSize = _ref.imgSize,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      cardTitleColor = _ref.cardTitleColor,
+      contentGap = _ref.contentGap,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    data: comments,
+    type: "flat",
+    cardStyle: "card-style-1",
+    customCardStyles: {
+      cardPadding: cardPadding,
+      imgSize: imgSize,
+      cardTitleFontSize: cardTitleFontSize,
+      cardTitleColor: cardTitleColor,
+      contentGap: contentGap,
+      cardBackgroundColor: cardBackgroundColor
+    }
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+Comments.defaultProps = {
+  cardPadding: 10,
+  imgSize: 50,
+  cardTitleFontSize: 12,
+  cardTitleColor: '#353535',
+  cardBackgroundColor: 'white'
+};
+var _default = Comments;
+exports.default = _default;

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,50 +27,27 @@ var _Right = _interopRequireDefault(require("../../Layout/Right/Right"));
 
 var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
 
-var _styling = _interopRequireDefault(require("../../styling.json"));
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
 
-var _templateObject;
-
-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: _styling.default.widgetContainer.header,
-      sectionHeaderStyles: _styling.default.widgetContainer.body.sectionHeaderStyles,
-      customCardStyles: _styling.default.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/Reusable Components/Sections/Sections.js

@@ -0,0 +1,67 @@
+"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("../ReusableList/ReusableList"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["sections"];
+
+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 Sections = function Sections(_ref) {
+  var sections = _ref.sections,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(props.children[0] || props.children),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  console.log('renders');
+
+  var cardClicked = function cardClicked(index, cardProps) {
+    var child = props.children.find(function (child) {
+      return child.props.id === cardProps.id;
+    });
+    setCenter(child);
+    console.log(child);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Left, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    type: "sectioned",
+    data: sections,
+    cardStyle: "card-style-3",
+    cardClicked: cardClicked
+  }, props))), /*#__PURE__*/_react.default.createElement(Center, null, center));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    background-color: #414141;\n    display: flex;\n"])), function (props) {
+  return props.backgroundColor;
+});
+
+var Left = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1;\n"])));
+
+var Center = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 3;\n"])));
+
+Sections.defaultProps = {};
+var _default = Sections;
+exports.default = _default;