@mohamed-karawia/library 0.1.17 → 0.1.18

package/dist/stories/Chat/Chat.js

@@ -15,27 +15,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _fakeData = require("../Reusable Components/fakeData");
-
-var _ReusableHeader = _interopRequireDefault(require("../Reusable Components/ReusableHeader/ReusableHeader"));
-
 var _ReusableList = _interopRequireDefault(require("../Reusable Components/ReusableList/ReusableList"));
 
 var _RichTextInput = _interopRequireDefault(require("../Common Inputs/RichTextInput/RichTextInput"));
 
 var _templateObject;
 
-var _excluded = ["data", "title", "cardBackgroundColor", "textColor", "users"];
+var _excluded = ["data", "users", "title", "backgroundColor"];
 
 var Chat = function Chat(_ref) {
   var data = _ref.data,
-      title = _ref.title,
-      cardBackgroundColor = _ref.cardBackgroundColor,
-      textColor = _ref.textColor,
       users = _ref.users,
+      title = _ref.title,
+      backgroundColor = _ref.backgroundColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: title,
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: title || 'Chat',
     type: "flat",
     data: data,
     cardStyle: "card-style-8"
@@ -44,8 +41,9 @@ var Chat = function Chat(_ref) {
   }));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    width: 100%;\n    padding: 15px 0;\n"])), function (cardBackgroundColor) {
-  return cardBackgroundColor;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    background-color: ", ";\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor || 'transparent';
 });
 
 Chat.defaultProps = {

package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js

@@ -30,25 +30,21 @@ var DetailedForm = function DetailedForm(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var onAccept = function onAccept() {
-    alert('Form Accepted');
+    props.onAccept();
   };
 
   var onDecline = function onDecline() {
-    alert('Form Declined');
+    props.onDecline();
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
     title: userName,
-    img: userImg,
-    cardImageRadius: "100"
-  })), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "Form",
+    img: userImg
+  }, props.userHeaderStyles))), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "Form",
     data: questions,
     type: "flat",
-    cardStyle: "card-style-3",
-    customCardStyles: {
-      cardPadding: 10
-    }
+    cardStyle: "card-style-3"
   }, props)), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
     onClick: onAccept
   }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
@@ -56,7 +52,9 @@ var DetailedForm = function DetailedForm(_ref) {
   }, "Decline")));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: white;\n    padding: 10px 0;\n    width: 100%;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    padding: 10px 0;\n    width: 100%;\n"])), function (props) {
+  return props.backgroundColor || 'transparent';
+});
 
 var User = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
 

package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js

@@ -19,7 +19,7 @@ var ViewForms = function ViewForms(_ref) {
   var data = _ref.data,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "Submitted Forms",
+    listTitle: props.title || "Submitted Forms",
     data: data,
     cardStyle: "card-style-9",
     type: "sectioned"

package/dist/stories/Enrollment/Guest/FillForm/FillForm.js

@@ -25,13 +25,6 @@ var FillForm = function FillForm(_ref) {
   var sections = _ref.sections,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  // const initialValues = {
-  //     question0: '',
-  //     question1: '',
-  //     question2: '',
-  //     question3: '',
-  //     question4: '',
-  // }
   var onCreate = function onCreate(values) {
     console.log(values);
   };
@@ -40,21 +33,15 @@ var FillForm = function FillForm(_ref) {
     console.log('Canceled');
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default // initialValues={initialValues}
-  , {
-    formTitle: "Join Community Form",
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: props.formTitle || 'Join Community Form',
     sections: sections,
     saveBtnText: props.saveBtnText,
     cancelBtnText: props.cancelBtnText,
     saveHandler: onCreate,
     cancelHandler: cancelHandler,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff'
-    },
-    bodyRowGap: 10
-  }));
+    bodyRowGap: props.bodyRowGap || 10
+  }, props)));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));

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

@@ -50,7 +50,7 @@ var Event = function Event(_ref) {
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  return backgroundColor || 'transparent';
 });
 
 var CoverWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 300px;\n"])));

package/dist/stories/Events/EventsList/EventsList.js

@@ -86,7 +86,7 @@ var EventsList = function EventsList(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Events",
+    listTitle: props.title || "My Events",
     data: events,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,8 +104,8 @@ var EventsList = function EventsList(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateEvent.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || 'Create',
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
   })));

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

@@ -84,13 +84,10 @@ var Folders = function Folders(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Your Folders",
+    galleryTitle: props.title || "Your Folders",
     data: folders,
     type: "flat",
     cardStyle: "card-style-10",
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,

package/dist/stories/Library/Notes/Notes.js

@@ -86,7 +86,7 @@ var Notes = function Notes(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Notes",
+    listTitle: props.title || "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,8 +104,8 @@ var Notes = function Notes(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateFolder.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
   })));

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

@@ -80,7 +80,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Album",
+    listTitle: props.title || "My Album",
     data: album,
     cardStyle: "card-style-7",
     type: "flat",
@@ -102,15 +102,13 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddSong.default, {
     saveHandler: onAddSong,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
   })));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbum.defaultProps = {
-  cardBackgroundColor: 'white'
-};
+ViewAlbum.defaultProps = {};
 var _default = ViewAlbum;
 exports.default = _default;

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

@@ -99,13 +99,10 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: props.title,
+    galleryTitle: props.title || 'musicAlbums',
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
@@ -121,8 +118,8 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateMusicAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
   })));
 };
 

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

@@ -98,6 +98,14 @@ var DetailedForm = function DetailedForm(props) {
         dropdownFontColor: 'white',
         dropdownItemHoverColor: '#FE1744'
       }
+    },
+    userHeaderStyles: {
+      cardBackgroundColor: '#FE1744',
+      cardImageRadius: "100",
+      cardTitleColor: 'white'
+    },
+    customCardStyles: {
+      cardPadding: 10
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };

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

@@ -92,9 +92,15 @@ var FillForm = function FillForm(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_FillForm.default, {
+    formTitle: "Community Form",
     sections: sections,
     saveBtnText: 'Submit',
-    cancelBtnText: "Cancel"
+    cancelBtnText: "Cancel",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -121,7 +121,6 @@ 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, {
@@ -142,6 +141,9 @@ var Forms = function Forms(props) {
       cardTitleColor: 'white',
       cardBackgroundColor: 'black',
       cardPadding: 10
+    },
+    customCardStyles: {
+      cardBackgroundColor: 'white'
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };

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/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'
@@ -193,8 +193,9 @@ var Music = function Music(props) {
       }
     },
     customCardStyles: {
+      cardBackgroundColor: 'white',
       controlsStyles: {
-        iconColor: 'blue'
+        iconColor: 'black'
       }
     }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
@@ -210,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/Photos/Albums/Albums.js

@@ -168,7 +168,10 @@ var Albums = function Albums(props) {
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
     columnsNumber: 2,
-    cardClicked: cardClicked
+    cardClicked: cardClicked,
+    customCardStyles: {
+      cardBackgroundColor: 'white'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "folders",
     widgetProps: {

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

@@ -29,7 +29,7 @@ var _ai = require("react-icons/ai");
 
 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); }
 
@@ -50,9 +50,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 = {
@@ -157,13 +154,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",
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
@@ -181,8 +175,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() {

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

@@ -27,7 +27,7 @@ var _ai = require("react-icons/ai");
 
 var _templateObject;
 
-var _excluded = ["albums", "columnsNumber", "columnGap", "rowGap"];
+var _excluded = ["albums"];
 
 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,9 +46,6 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      columnsNumber = _ref.columnsNumber,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -81,13 +78,10 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Photo Albums",
+    galleryTitle: props.title || "Photo Albums",
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardControls: cardControls,
@@ -108,13 +102,6 @@ var ViewAlbums = function ViewAlbums(_ref) {
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbums.defaultProps = {
-  columnsNumber: 3,
-  headerBackground: '#FE1744',
-  titleColor: 'white',
-  cardBackgroundColor: 'white',
-  columnGap: 10,
-  rowGap: 20
-};
+ViewAlbums.defaultProps = {};
 var _default = ViewAlbums;
 exports.default = _default;

package/dist/stories/Preview/Preview.js

@@ -0,0 +1,36 @@
+"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 _util = require("../helpers/util");
+
+var _templateObject;
+
+var _excluded = ["type", "componentProps", "stylingProps"];
+
+var Preview = function Preview(_ref) {
+  var type = _ref.type,
+      componentProps = _ref.componentProps,
+      stylingProps = _ref.stylingProps,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var child = (0, _util.getComponentType)(type, componentProps, stylingProps);
+  return /*#__PURE__*/_react.default.createElement(Container, null, child);
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+var _default = Preview;
+exports.default = _default;

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

@@ -115,6 +115,10 @@ var SectionBody = _styledComponents.default.div(_templateObject4 || (_templateOb
   return props.galleryRowGap;
 });
 
-Gallery.defaultProps = {};
+Gallery.defaultProps = {
+  columnsNumber: 3,
+  galleryColumnGap: 10,
+  galleryRowGap: 20
+};
 var _default = Gallery;
 exports.default = _default;

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

@@ -73,7 +73,7 @@ var ReusableForm = function ReusableForm(_ref) {
 };
 
 var CreateForm = (0, _styledComponents.default)(_formik.Form)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n\n"])), function (props) {
-  return props.formBackgroundColor || 'white';
+  return props.formBackgroundColor || 'transparent';
 });
 
 var FormSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n"])), function (props) {

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

@@ -106,13 +106,10 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Video Album",
+    galleryTitle: props.title || "Video Album",
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,

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

@@ -58,7 +58,7 @@ var MusicPlayerWidget = function MusicPlayerWidget(_ref) {
 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';
 }, function (props) {
-  return props.backgroundColor || 'inherit';
+  return props.backgroundColor || 'transparent';
 }, function (props) {
   return props.borderRadius ? props.borderRadius + 'px' : 'inherit';
 }, function (props) {

package/dist/stories/helpers/util.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWidgetType = exports.getCardStyle = exports.addObjectToArray = exports.deleteFromArrayByIndex = exports.stringSearch = void 0;
+exports.getComponentType = exports.getWidgetType = exports.getCardStyle = exports.addObjectToArray = exports.deleteFromArrayByIndex = exports.stringSearch = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -43,8 +43,19 @@ var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
 
 var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
 
+var _Navbar = _interopRequireDefault(require("../Navbar/Navbar"));
+
+var _ViewAlbums = _interopRequireDefault(require("../Music Album/ViewAlbums/ViewAlbums"));
+
+var _ViewAlbum = _interopRequireDefault(require("../Music Album/ViewAlbum/ViewAlbum"));
+
+var _ViewAlbums2 = _interopRequireDefault(require("../Photo Album/ViewAlbums/ViewAlbums"));
+
+var _ViewAlbum2 = _interopRequireDefault(require("../Photo Album/ViewAlbum/ViewAlbum"));
+
 // Cards
 // Widgets
+// Components
 var stringSearch = function stringSearch(str, word) {
   str = str.toUpperCase();
   word = word.toUpperCase();
@@ -190,4 +201,17 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
   return widgetTypes[widgetType];
 };
 
-exports.getWidgetType = getWidgetType;
+exports.getWidgetType = getWidgetType;
+
+var getComponentType = function getComponentType(componentType, componentProps, stylingProps) {
+  var componentTypes = {
+    'Navbar': /*#__PURE__*/_react.default.createElement(_Navbar.default, Object.assign({}, componentProps, stylingProps)),
+    '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))
+  };
+  return componentTypes[componentType];
+};
+
+exports.getComponentType = getComponentType;

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.17",
+  "version": "0.1.18",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",