@mohamed-karawia/library 0.1.15 → 0.1.19

package/dist/stories/Pages/Enrollment/Forms/Forms.js

@@ -87,6 +87,10 @@ var Forms = function Forms(props) {
     console.log(cardProps);
   };
 
+  var onAction = function onAction(action, index) {
+    console.log(action);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -117,12 +121,30 @@ var Forms = function Forms(props) {
       }
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
-    title: "Music Album",
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewForms.default, {
     data: forms,
-    cardClicked: cardClicked
+    cardClicked: cardClicked,
+    cardIconClicked: onAction,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        dropdownBackground: 'black',
+        dropdownFontColor: 'white',
+        dropdownItemHoverColor: '#FE1744'
+      }
+    },
+    sectionHeaderStyles: {
+      cardTitleColor: 'white',
+      cardBackgroundColor: 'black',
+      cardPadding: 10
+    },
+    customCardStyles: {
+      cardBackgroundColor: 'white'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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/Events/Events/Events.js

@@ -132,6 +132,7 @@ var Events = function Events(props) {
       }
     },
     customCardStyles: {
+      cardBackgroundColor: 'white',
       controlsStyles: {
         iconColor: '#FE1744'
       }

package/dist/stories/Pages/Library/Folders/Library.js

@@ -82,6 +82,10 @@ var Library = function Library(props) {
     setFolders((0, _util.deleteFromArrayByIndex)(folders, index));
   };
 
+  var cardClicked = function cardClicked(index, cardProps) {
+    console.log(cardProps);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -109,7 +113,8 @@ var Library = function Library(props) {
         controlsStyles: {
           showOnHover: true
         }
-      }
+      },
+      cardClicked: cardClicked
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
     title: "Music Album",
@@ -121,6 +126,7 @@ var Library = function Library(props) {
     columnsNumber: 3,
     onAddFolder: onAddFolder,
     cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
     headerStyles: {
       padding: 10,
       headerBackground: '#ff2d2d',

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

@@ -60,7 +60,7 @@ var Music = function Music(props) {
   var _useState3 = (0, _react.useState)([{
     index: 0,
     cover: _music4.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3',
     title: 'Plans We Made',
     description: 'Son Lux',
     time: '5:20'
@@ -74,7 +74,7 @@ var Music = function Music(props) {
   }, {
     index: 1,
     cover: _music5.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3',
     title: 'Night',
     description: 'Frank Ocean',
     time: '5:20'
@@ -88,14 +88,14 @@ var Music = function Music(props) {
   }, {
     index: 4,
     cover: _music3.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3',
     title: 'Enter Sandman',
     description: 'Metallica',
     time: '5:20'
   }, {
     index: 5,
     cover: _music2.default,
-    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3',
     title: 'November Rain',
     description: "Guns N' Roses",
     time: '5:20'
@@ -191,6 +191,12 @@ var Music = function Music(props) {
       controlsStyles: {
         iconSize: 25
       }
+    },
+    customCardStyles: {
+      cardBackgroundColor: 'white',
+      controlsStyles: {
+        iconColor: 'black'
+      }
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",
@@ -205,7 +211,8 @@ var Music = function Music(props) {
       prevSong: prevSong,
       currentSong: currentSong,
       borderRadius: '10',
-      primaryColor: 'black'
+      primaryColor: 'black',
+      backgroundColor: 'white'
     },
     headerStyles: {
       controlsStyles: {

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

@@ -115,6 +115,22 @@ var MusicAlbums = function MusicAlbums(props) {
     console.log(cardProps);
   };
 
+  var notes = [{
+    title: 'Study notes',
+    date: '15/11/2020'
+  }, {
+    title: 'Music notes',
+    date: '14/12/2020'
+  }, {
+    title: 'Workout notes',
+    date: '5/8/2021'
+  }, {
+    title: 'Gaming notes',
+    date: '14/4/2023'
+  }, {
+    title: 'Working notes',
+    date: '5/6/2021'
+  }];
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "logo",
     widgetProps: {
@@ -138,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, {
@@ -161,8 +174,24 @@ var MusicAlbums = function MusicAlbums(props) {
         iconSize: 25
       }
     },
+    customCardStyles: {
+      darkOnHover: true
+    },
     cardClicked: cardClicked
-  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "notes",
+    widgetProps: {
+      notes: notes,
+      headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+        controlsStyles: {
+          iconSize: 25
+        }
+      }
+    }
+  }))));
 };
 
 var _default = MusicAlbums;

package/dist/stories/Pages/Photos/Album/Album.js

@@ -156,7 +156,13 @@ var Album = function Album(props) {
     addPhoto: onAddPhoto,
     deletePhoto: onDeletePhoto,
     cardIconClicked: cardIconClicked,
-    columnsNumber: 2
+    columnsNumber: 2,
+    headerStyles: {
+      padding: 10,
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Photos/Albums/Albums.js

@@ -81,6 +81,26 @@ var Albums = function Albums(props) {
       albums = _useState2[0],
       setAlbums = _useState2[1];
 
+  var folders = [{
+    title: 'Folder one',
+    description: 'Discription for folder one'
+  }, {
+    title: 'Folder two',
+    description: 'Discription for folder two'
+  }, {
+    title: 'Folder three',
+    description: 'Discription for folder three'
+  }, {
+    title: 'Folder four',
+    description: 'Discription for folder four'
+  }, {
+    title: 'Folder five',
+    description: 'Discription for folder five'
+  }, {
+    title: 'Folder six',
+    description: 'Discription for folder six'
+  }];
+
   var cardIconClicked = function cardIconClicked(action, index) {
     switch (action) {
       case 'delete':
@@ -148,8 +168,24 @@ var Albums = function Albums(props) {
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
     columnsNumber: 2,
-    cardClicked: cardClicked
-  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+    cardClicked: cardClicked,
+    customCardStyles: {
+      cardBackgroundColor: 'white'
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "folders",
+    widgetProps: {
+      folders: folders,
+      columnsNumber: 3,
+      customCardStyles: {
+        cardPadding: 10,
+        iconColor: '#ff2d2d',
+        controlsStyles: {
+          iconColor: '#FE1744'
+        }
+      }
+    }
+  }))));
 };
 
 var _default = Albums;

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", "columnsNumber", "columnGap", "rowGap", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "descColor"];
 
 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),
@@ -50,9 +64,6 @@ var ViewAlbum = function ViewAlbum(_ref) {
   var album = _ref.album,
       cardBackgroundColor = _ref.cardBackgroundColor,
       imgTitleColor = _ref.imgTitleColor,
-      columnsNumber = _ref.columnsNumber,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
       descColor = _ref.descColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cardStyles = {
@@ -84,19 +95,44 @@ 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, {
+    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({
+      album: album
+    }, values)));
+  };
 
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
   var handleUserKeyPress = (0, _react.useCallback)(function (event) {
     var key = event.key;
 
@@ -121,13 +157,19 @@ var ViewAlbum = function ViewAlbum(_ref) {
         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) {
@@ -157,21 +199,10 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Photo Album",
+    galleryTitle: props.title || "Photo Album",
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: props.headerBackground,
-      titleColor: props.titleColor,
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
@@ -189,8 +220,8 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddPhoto.default, {
     saveHandler: onAddPhoto,
     cancelHandler: cancelHandler,
-    saveBtnText: 'Add',
-    cancelBtnText: 'Cancel'
+    saveBtnText: props.saveBtnText || 'Add',
+    cancelBtnText: props.saveBtnText || 'Cancel'
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showImgModal,
     closeModal: function closeModal() {
@@ -213,7 +244,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: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    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
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));