@mohamed-karawia/library 0.1.14 → 0.1.18

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/Reusable Components/ReusableList/ReusableList.js

@@ -23,7 +23,7 @@ var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/Reusable
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls"];
+var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls", "headerStyles", "sectionHeaderStyles"];
 
 var ReusableList = function ReusableList(_ref) {
   var data = _ref.data,
@@ -32,6 +32,8 @@ var ReusableList = function ReusableList(_ref) {
       type = _ref.type,
       _ref$cardControls = _ref.cardControls,
       cardControls = _ref$cardControls === void 0 ? null : _ref$cardControls,
+      headerStyles = _ref.headerStyles,
+      sectionHeaderStyles = _ref.sectionHeaderStyles,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var child;
 
@@ -39,8 +41,8 @@ var ReusableList = function ReusableList(_ref) {
     props.iconClicked(action);
   };
 
-  var clicked = function clicked(index) {
-    props.cardClicked(index);
+  var clicked = function clicked(index, cardProps) {
+    props.cardClicked(index, cardProps);
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
@@ -59,9 +61,9 @@ var ReusableList = function ReusableList(_ref) {
     child = data.map(function (section) {
       return /*#__PURE__*/_react.default.createElement(Section, {
         priority: section.priority
-      }, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+      }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
         title: section.title
-      }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
+      }, sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
     });
   }
 
@@ -69,7 +71,7 @@ var ReusableList = function ReusableList(_ref) {
     title: props.listTitle,
     controls: props.listControls,
     iconClicked: iconCliked
-  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
 };
 
 var List = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n    width: ", ";\n    padding: 0;\n    > * {\n        padding: 0;\n        margin: 0;\n    }\n"])), function (props) {

package/dist/stories/Sections/Sections.js

@@ -0,0 +1,61 @@
+"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("../Reusable Components/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)(sections[0].data[0].component),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  var cardClicked = function cardClicked(index, cardProps) {
+    setCenter(cardProps.component);
+  };
+
+  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;

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"));
 
@@ -39,8 +39,23 @@ var _LogoWidget = _interopRequireDefault(require("../Widgets/LogoWidget/LogoWidg
 
 var _VideoPlayer = _interopRequireDefault(require("../VideoAlbum/VideoPlayer/VideoPlayer"));
 
+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();
@@ -73,7 +88,7 @@ var addObjectToArray = function addObjectToArray(arr, obj) {
 
 exports.addObjectToArray = addObjectToArray;
 
-var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked) {
+var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked, onAction) {
   var cardTypes = {
     'card-style-1': /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
       key: index
@@ -89,8 +104,8 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
       key: index
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
-      cardClicked: function cardClicked(path) {
-        return clicked(path);
+      cardClicked: function cardClicked() {
+        return clicked(index, cardProps);
       }
     })),
     'card-style-4': /*#__PURE__*/_react.default.createElement(_CardStyle4.default, Object.assign({
@@ -136,7 +151,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -147,7 +162,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -158,7 +173,7 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     }, cardProps, customCardStyles, {
       cardControls: cardControls,
       cardClicked: function cardClicked() {
-        return clicked(index);
+        return clicked(index, cardProps);
       },
       iconClicked: function iconClicked(action) {
         return cardIconClicked(action, index);
@@ -179,9 +194,24 @@ var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
     }, props)),
     'music player': /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, props),
     'logo': /*#__PURE__*/_react.default.createElement(_LogoWidget.default, props),
-    'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props)
+    'video player': /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, props),
+    'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, props),
+    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, props)
   };
   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.14",
+  "version": "0.1.18",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",

package/src/stories/Chat/Chat.jsx

@@ -2,46 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { controls } from '../Reusable Components/fakeData';
-import ReusableHeader from '../Reusable Components/ReusableHeader/ReusableHeader';
 import List from '../Reusable Components/ReusableList/ReusableList';
 import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
 
 const Chat = ({
     data,
-    title,
-    titleColor,
-    headerBackground,
-    headerPadding,
-    cardBackgroundColor,
-    cardTitleColor,
-    textColor,
     users,
+    title,
+    backgroundColor,
     ...props }) => {
 
     return (
-        <Container
-            cardBackgroundColor={cardBackgroundColor}>
-            <ReusableHeader
-                title={title}
-                titleColor={titleColor}
-                controls={controls}
-                controlsStyles={{
-                    iconColor: 'white',
-                    maxIcons: 4,
-                    dropdownBackground: 'white'
-                }}
-                headerBackground={headerBackground}
-                padding={headerPadding} />
+        <Container 
+        backgroundColor={backgroundColor}>
             <List
+                listTitle={title || 'Chat'}
                 type="flat"
                 data={data}
                 cardStyle="card-style-8"
-                customCardStyles={{
-                    cardBackgroundColor,
-                    cardTitleColor,
-                    cardDescriptionColor: textColor
-                }}
+                {...props}
             />
             <RichTextInput
                 users={users}
@@ -51,9 +30,8 @@ const Chat = ({
 }
 
 const Container = styled.div`
-    background-color: ${cardBackgroundColor => cardBackgroundColor};
     width: 100%;
-    padding: 15px 0;
+    background-color: ${({backgroundColor}) => backgroundColor || 'transparent'};
 `
 
 Chat.defaultProps = {
@@ -63,12 +41,9 @@ Chat.defaultProps = {
 Chat.propTypes = {
     data: PropTypes.array.isRequired,
     title: PropTypes.string,
-    titleColor: PropTypes.string,
-    headerBackground: PropTypes.string,
-    headerPadding: PropTypes.number,
-    cardBackgroundColor: PropTypes.string,
-    cardTitleColor: PropTypes.string,
-    textColor: PropTypes.string
+    backgroundColor: PropTypes.string,
+    customCardStyles: PropTypes.object,
+    headerStyles: PropTypes.object
 }
 
 export default Chat

package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx

@@ -4,14 +4,14 @@ import PropTypes from "prop-types";
 import styled from 'styled-components';
 
 // Editor.js
-import EditorJs from 'react-editor-js';
+import { createReactEditorJS } from 'react-editor-js'
 // Editor.js Constants
 import { EDITOR_JS_TOOLS } from "./constants";
 
 
 const EditorComponent = (props) => {
     const instanceRef = useRef(null)
-
+    const ReactEditorJS = createReactEditorJS()
 
     async function handleSave() {
         const savedData = await instanceRef.current.save()
@@ -20,7 +20,7 @@ const EditorComponent = (props) => {
 
     return (
         <Container {...props}>
-            <EditorJs
+            <ReactEditorJS
                 instanceRef={(instance) => (instanceRef.current = instance)}
                 tools={EDITOR_JS_TOOLS}
                 data={props.data}

package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx

@@ -49,6 +49,7 @@ const AddQuestion = (props) => {
 }
 
 const Container = styled.div`
+    width: 100%;
      padding: 10px;
      background-color: 'white';
      display: flex;

package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx

@@ -13,11 +13,11 @@ const DetailedForm = ({
 }) => {
 
     const onAccept = () => {
-        alert('Form Accepted')
+        props.onAccept()
     }
 
     const onDecline = () => {
-        alert('Form Declined')
+        props.onDecline()
     }
 
     return (
@@ -26,27 +26,15 @@ const DetailedForm = ({
                 <Card
                     title={userName}
                     img={userImg}
-                    cardImageRadius="100"
+                    {...props.userHeaderStyles}
                 />
             </User>
             <List
-                listTitle="Form"
+                listTitle={props.title || "Form"}
                 data={questions}
                 type='flat'
                 cardStyle='card-style-3'
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        dropdownBackground: 'black',
-                        dropdownFontColor: 'white',
-                        dropdownItemHoverColor: '#FE1744'
-                    },
-                }}
-                customCardStyles={{
-                    cardPadding: 10
-                }}
+                {...props}
             />
             <Buttons>
                 <Accept onClick={onAccept}>Accept</Accept>
@@ -57,7 +45,7 @@ const DetailedForm = ({
 }
 
 const Container = styled.div`
-    background-color: white;
+    background-color: ${props => props.backgroundColor || 'transparent'};
     padding: 10px 0;
     width: 100%;
 `
@@ -92,7 +80,8 @@ DetailedForm.defaultProps = {};
 DetailedForm.propTypes = {
     userName: PropTypes.string,
     userImg: PropTypes.string,
-    questions: PropTypes.array
+    questions: PropTypes.array,
+    title: PropTypes.string
 }
 
 export default DetailedForm

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx

@@ -8,25 +8,11 @@ const ViewForms = ({
 }) => {
     return (
         <List
-            listTitle="Submitted Form"
+            listTitle={props.title || "Submitted Forms"}
             data={data}
             cardStyle="card-style-9"
             type="sectioned"
-            sectionHeaderStyles={{
-                cardTitleColor: 'white',
-                cardBackgroundColor: 'black',
-                cardPadding: 10
-            }}
-            headerStyles={{
-                padding: 10,
-                headerBackground: '#FE1744',
-                titleColor: '#ffff',
-                controlsStyles: {
-                    dropdownBackground: 'black',
-                    dropdownFontColor: 'white',
-                    dropdownItemHoverColor: '#FE1744'
-                },
-            }}
+            {...props}
         />
     )
 }
@@ -34,7 +20,8 @@ const ViewForms = ({
 ViewForms.defaultProps = {};
 
 ViewForms.propTypes = {
-    data: PropTypes.array
+    data: PropTypes.array,
+    title: PropTypes.string
 }
 
 export default ViewForms

package/src/stories/Enrollment/Guest/FillForm/FillForm.jsx

@@ -9,13 +9,6 @@ const FillForm = ({
     ...props
 }) => {
 
-    // const initialValues = {
-    //     question0: '',
-    //     question1: '',
-    //     question2: '',
-    //     question3: '',
-    //     question4: '',
-    // }
 
     const onCreate = (values) => {
         console.log(values)
@@ -28,19 +21,14 @@ const FillForm = ({
     return (
         <Container>
             <Form
-                // initialValues={initialValues}
-                formTitle="Join Community Form"
+                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}
             />
         </Container>
     )
@@ -55,7 +43,9 @@ FillForm.defaultProps = {};
 FillForm.propTypes = {
     sections: PropTypes.array,
     saveBtnText: PropTypes.string,
-    cancelBtnText: PropTypes.string
+    cancelBtnText: PropTypes.string,
+    formTitle: PropTypes.string,
+    bodyRowGap: PropTypes.number
 }
 
 export default FillForm;

package/src/stories/Events/Event/Event.jsx

@@ -47,7 +47,7 @@ const Event = ({
 const Container = styled.div`
     width: 100%;
     font-family: sans-serif;
-    background-color: ${({ backgroundColor }) => backgroundColor};
+    background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
 `
 
 const CoverWrapper = styled.div`

package/src/stories/Events/EventsList/EventsList.jsx

@@ -54,9 +54,9 @@ const EventsList = ({
     }
 
     return (
-    <Container>
+        <Container>
             <List
-                listTitle="My Events"
+                listTitle={props.title || "My Events"}
                 data={events}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,14 +74,14 @@ const EventsList = ({
                     <div></div>
                 )}>
                 <CreateEvent
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || 'Create'}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
             </Modal>
         </Container>
-        )
+    )
 }
 
 const Container = styled.div`
@@ -92,10 +92,15 @@ EventsList.defaultProps = {};
 
 EventsList.propTypes = {
     notes: PropTypes.array.isRequired,
+    title: PropTypes.string,
     iconColor: PropTypes.string,
     cardTitleFontSize: PropTypes.number,
     cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    cardPadding: PropTypes.number,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
 }
 
 export default EventsList

package/src/stories/Library/Folders/Folders.jsx

@@ -50,18 +50,13 @@ const Folders = ({
         setShowModal(false)
     }
 
-    console.log(props)
-
     return (
         <Container>
             <Gallery
-                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}
@@ -87,13 +82,14 @@ const Folders = ({
 }
 
 const Container = styled.div`
-
+    background-color: transparent;
 `
 
 Folders.defaultProps = {};
 
 Folders.propTypes = {
     folders: PropTypes.array,
+    title: PropTypes.string,
     folderTitle: PropTypes.string,
     columnsNumber: PropTypes.number,
     columnGap: PropTypes.number,

package/src/stories/Library/Notes/Notes.jsx

@@ -56,7 +56,7 @@ const Notes = ({
     return (
         <Container>
             <List
-                listTitle="My Notes"
+                listTitle={props.title || "My Notes"}
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,8 +74,8 @@ const Notes = ({
                     <div></div>
                 )}>
                 <CreateFolder
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
@@ -95,7 +95,11 @@ Notes.propTypes = {
     iconColor: PropTypes.string,
     cardTitleFontSize: PropTypes.number,
     cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    cardPadding: PropTypes.number,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object
 }
 
 export default Notes;