@mohamed-karawia/library 0.1.18 → 0.1.22

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

@@ -23,20 +23,39 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _AddSong = _interopRequireDefault(require("../../Forms/AddSong/AddSong"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _MusicAlbumPreview = _interopRequireDefault(require("../../PreviewComponents/MusicAlbumPreview/MusicAlbumPreview"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
+var _constatnts = require("../../Pages/ViewWorld/constatnts");
+
 var _templateObject;
 
-var _excluded = ["album", "cardBackgroundColor", "songTitleColor"];
+var _excluded = ["album", "cardBackgroundColor", "songTitleColor", "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; }
 
+// import styles from '../../styling.json'
 var listControls = [{
   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 cardControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
@@ -48,6 +67,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   var album = _ref.album,
       cardBackgroundColor = _ref.cardBackgroundColor,
       songTitleColor = _ref.songTitleColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -55,19 +75,63 @@ var ViewAlbum = function ViewAlbum(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
+  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)));
+  };
 
-      default:
-        break;
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      id: 'styling'
+    }]
+  }];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var onAddSong = function onAddSong(song) {
@@ -104,7 +168,31 @@ var ViewAlbum = function ViewAlbum(_ref) {
     cancelHandler: cancelHandler,
     saveBtnText: props.saveBtnText || "Create",
     cancelBtnText: props.cancelBtnText || "Cancel"
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      localStorage.removeItem('formStyles');
+      setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Album Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_MusicAlbumPreview.default, {
+    componentProps: {
+      album: album,
+      title: props.title || "My 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    width: 100%;\n"])));

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

@@ -23,11 +23,21 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _CreateMusicAlbum = _interopRequireDefault(require("../../Forms/CreateMusicAlbum/CreateMusicAlbum"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+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); }
 
@@ -42,46 +52,67 @@ 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 ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      albumTitleColor = _ref.albumTitleColor,
-      descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var cardStyles = {
-    darkOnHover: true,
-    cardTitleColor: albumTitleColor,
-    descColor: descColor,
-    controlsStyles: {
-      showOnHover: true,
-      position: 'center',
-      iconBackground: "#272727",
-      dropdownBackground: "#272727",
-      dropdownFontColor: "white",
-      dropdownItemHoverColor: "#414141",
-      iconBackgroundHover: "#414141",
-      iconBorderRadius: 100,
-      iconSize: 25,
-      iconsGap: 10,
-      iconColor: 'white',
-      containerPadding: 20
-    }
-  };
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  var onHeaderIconClicked = function onHeaderIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
+  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(ViewAlbums, {
+    preview: true,
+    albums: albums
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+        title: "Music Albums Config",
+        tabs: tabs
+      })
+    }]
+  }];
 
-      default:
-        break;
+  var onHeaderIconClicked = function onHeaderIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -89,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);
@@ -98,8 +136,13 @@ 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 || 'musicAlbums',
+    galleryTitle: props.title || 'Music Albums',
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
@@ -120,13 +163,32 @@ var ViewAlbums = function ViewAlbums(_ref) {
     cancelHandler: cancelHandler,
     saveBtnText: props.saveBtnText || "Create",
     cancelBtnText: props.cancelBtnText || "Cancel"
-  })));
+  })), /*#__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: "Albums Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_MusicAlbumsPreview.default, {
+    componentProps: {
+      albums: albums,
+      title: 'Music Albums',
+      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    width: 100%;\n"])));
 
-ViewAlbums.defaultProps = {
-  cardBackgroundColor: 'white'
-};
+ViewAlbums.defaultProps = {};
 var _default = ViewAlbums;
 exports.default = _default;

package/dist/stories/Navbar/Navbar.js

@@ -219,7 +219,7 @@ var NavBar = _styledComponents.default.div(_templateObject3 || (_templateObject3
 });
 
 var UniverseContainer = (0, _styledComponents.default)('div')({
-  width: '346px',
+  width: '100%',
   height: '72px',
   display: 'flex',
   'align-items': 'center',

package/dist/stories/Pages/Events/Event/Event.js

@@ -27,8 +27,6 @@ var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Compone
 
 var _Event = _interopRequireDefault(require("../../../Events/Event/Event"));
 
-var _util = require("../../../helpers/util");
-
 var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
 
 var _constatnts = require("../../ViewWorld/constatnts");
@@ -44,16 +42,27 @@ var Event = function Event(props) {
       imgUrl: props.imgUrl
     }
   }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
-    widgetType: "list",
+    widgetType: "spaces-list",
     widgetProps: {
       listTitle: 'Your Spaces',
       type: 'sectioned',
-      data: _constatnts.SPACES,
+      spaces: _constatnts.SPACES,
       cardStyle: 'card-style-3',
+      cardClicked: function cardClicked() {
+        return alert('clicked');
+      },
+      headerStyles: {
+        headerBackground: 'purple',
+        padding: 3,
+        controlsStyles: {
+          iconColor: 'white',
+          iconsGap: 5
+        }
+      },
       sectionHeaderStyles: {
         cardBorderSize: 2,
         cardPadding: 2,
-        cardBackgroundColor: '#fff',
+        headerBackground: 'red',
         cardBorderColor: 'black'
       },
       customCardStyles: {

package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js

@@ -154,10 +154,7 @@ var MusicAlbums = function MusicAlbums(props) {
         cardTitleFontSize: 15,
         cardBackgroundColor: 'black',
         cardTitleColor: 'white',
-        onHoverBackgroundColor: '#F6891F',
-        controlsStyles: {
-          showOnHover: true
-        }
+        onHoverBackgroundColor: '#F6891F'
       }
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
@@ -178,17 +175,7 @@ var MusicAlbums = function MusicAlbums(props) {
       }
     },
     customCardStyles: {
-      darkOnHover: true,
-      controlsStyles: {
-        showOnHover: true,
-        position: 'center',
-        dropdownFontColor: "white",
-        iconBorderRadius: 100,
-        iconSize: 40,
-        iconsGap: 10,
-        iconColor: 'white',
-        containerPadding: 20
-      }
+      darkOnHover: true
     },
     cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {

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

@@ -25,11 +25,21 @@ var _ReactModal = _interopRequireDefault(require("../../Reusable Components/Reac
 
 var _DetailedPhoto = _interopRequireDefault(require("../DetailedPhoto/DetailedPhoto"));
 
+var _PhotoAlbumPreview = _interopRequireDefault(require("../../PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview"));
+
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
+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); }
 
@@ -39,6 +49,10 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Photo'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 var cardControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
@@ -51,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,
@@ -81,19 +96,46 @@ var ViewAlbum = function ViewAlbum(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      showImgModal = _useState4[0],
-      setShowImgModal = _useState4[1];
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(null),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      openedImgIndex = _useState6[0],
-      setOpenedImgIndex = _useState6[1];
+      showImgModal = _useState6[0],
+      setShowImgModal = _useState6[1];
 
   var _useState7 = (0, _react.useState)(null),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      openedImg = _useState8[0],
-      setOpenedImg = _useState8[1];
+      openedImgIndex = _useState8[0],
+      setOpenedImgIndex = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      openedImg = _useState10[0],
+      setOpenedImg = _useState10[1];
+
+  var _useState11 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    preview: true,
+    album: album
+  })),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      centerContext = _useState12[0],
+      setCenterContext = _useState12[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      preview: true,
+      album: album
+    }, values)));
+  };
 
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
   var handleUserKeyPress = (0, _react.useCallback)(function (event) {
     var key = event.key;
 
@@ -113,18 +155,26 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, [openedImgIndex, handleUserKeyPress]);
 
   var onIconClicked = function onIconClicked(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;
+      }
     }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var onAddPhoto = function onAddPhoto(photo) {
@@ -153,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,
@@ -199,7 +254,29 @@ var ViewAlbum = function ViewAlbum(_ref) {
     img: openedImg
   }), /*#__PURE__*/_react.default.createElement(RightIconContainer, {
     onClick: nextPhoto
-  }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineArrowRight, null))));
+  }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineArrowRight, null))), /*#__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: "Photo Album Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_PhotoAlbumPreview.default, {
+    componentProps: {
+      album: album,
+      title: props.title || 'Photo 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"])));