@mohamed-karawia/library 0.1.9 → 0.1.13

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

@@ -27,18 +27,14 @@ var Event = function Event(_ref) {
       titleSize = _ref.titleSize,
       dateColor = _ref.dateColor,
       dateSize = _ref.dateSize,
-      headerBackground = _ref.headerBackground,
-      headerTitleColor = _ref.headerTitleColor,
       discColor = _ref.discColor,
-      discSize = _ref.discSize;
+      discSize = _ref.discSize,
+      headerStyles = _ref.headerStyles;
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
-    title: "Event",
-    padding: 10,
-    headerBackground: headerBackground,
-    titleColor: headerTitleColor
-  }), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
     src: cover
   })), /*#__PURE__*/_react.default.createElement(Details, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(Title, {
     size: titleSize,

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

@@ -85,19 +85,11 @@ var Notes = function Notes(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     customCardStyles: {
       iconColor: iconColor,
       cardTitleFontSize: cardTitleFontSize,
@@ -112,7 +104,7 @@ var Notes = function Notes(_ref) {
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
     cardIconClicked: cardIconClicked
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

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

@@ -79,17 +79,9 @@ var ViewAlbum = function ViewAlbum(_ref) {
     setShowModal(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
     listTitle: "My Album",
     data: album,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     cardStyle: "card-style-7",
     type: "flat",
     cardClicked: function cardClicked(index) {
@@ -106,7 +98,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
         iconColor: 'black'
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
       return setShowModal(false);

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

@@ -101,27 +101,16 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Music Albums",
+    galleryTitle: props.title,
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

package/dist/stories/Pages/Chat/Chat.js

@@ -71,6 +71,9 @@ var Chat = function Chat(_ref) {
           showOnHover: true
         }
       }
+    },
+    cardClicked: function cardClicked(path) {
+      return alert(path);
     }
   })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
     title: "Music Album",

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

@@ -77,11 +77,17 @@ var Event = function Event(props) {
     date: "15/11/1976 : 16/11/1976",
     disc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro.",
     backgroundColor: "black",
-    headerBackground: "black",
-    headerTitleColor: "white",
     titleColor: "white",
     discColor: "white",
-    dateColor: "white"
+    dateColor: "white",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -115,7 +115,15 @@ var Notes = function Notes(props) {
   }, /*#__PURE__*/_react.default.createElement(_Notes.default, {
     onAddNote: onAddNote,
     cardIconClicked: cardIconClicked,
-    notes: notes
+    notes: notes,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -183,7 +183,15 @@ var Music = function Music(props) {
     album: album,
     onAddSong: onAddSong,
     cardIconClicked: cardIconClicked,
-    cardClicked: onPlaySong
+    cardClicked: onPlaySong,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "music player",
     controlsStyles: {

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

@@ -111,6 +111,10 @@ var MusicAlbums = function MusicAlbums(props) {
     setAlbums((0, _util.deleteFromArrayByIndex)(albums, 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: {
@@ -145,9 +149,19 @@ var MusicAlbums = function MusicAlbums(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, {
+    title: "Music Albums",
     albums: albums,
     cardIconClicked: cardIconClicked,
-    onAddAlbum: onAddAlbum
+    onAddAlbum: onAddAlbum,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

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

@@ -105,6 +105,10 @@ var Albums = function Albums(props) {
     setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
   };
 
+  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: {
@@ -143,7 +147,8 @@ var Albums = function Albums(props) {
     cardIconClicked: cardIconClicked,
     onDeleteAlbum: onDeleteAlbum,
     onAddAlbum: onAddAlbum,
-    columnsNumber: 2
+    columnsNumber: 2,
+    cardClicked: cardClicked
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.js

@@ -104,7 +104,8 @@ var DetailedVideo = function DetailedVideo(props) {
     date: "10/11/2022",
     comments: comments,
     discColor: "gray",
-    dateColor: "gray"
+    dateColor: "gray",
+    videoSrc: 'https://www.youtube.com/watch?v=vETUpJ88cfA'
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Video/VideoAlbum/Video.js

@@ -153,6 +153,10 @@ var Video = function Video(props) {
     setAlbum((0, _util.deleteFromArrayByIndex)(album, 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: {
@@ -190,7 +194,16 @@ var Video = function Video(props) {
     album: album,
     onAddVideo: onAddVideo,
     onDeleteSong: deleteVideoFromAlbum,
-    cardIconClicked: cardIconClicked
+    cardIconClicked: cardIconClicked,
+    cardClicked: cardClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
     widgetType: "video player",
     controlsStyles: {

package/dist/stories/Pages/ViewWorld/constatnts.js

@@ -7,16 +7,20 @@ exports.MOVIES_SONGS = exports.MOVIES_DATA = exports.GAMING_SONGS = exports.GAMI
 var SPACES = [{
   title: 'Main List',
   data: [{
-    title: 'Cargo Sprint'
+    title: 'Cargo Sprint',
+    path: 'cago'
   }, {
-    title: 'Movies'
+    title: 'Movies',
+    path: 'movies'
   }]
 }, {
-  title: 'Entertainment List',
+  title: 'Entertainment',
   data: [{
-    title: 'Gaming'
+    title: 'Gaming',
+    path: 'games'
   }, {
-    title: 'Music'
+    title: 'Music',
+    path: 'music'
   }]
 }];
 exports.SPACES = SPACES;

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

@@ -122,9 +122,6 @@ var ViewAlbums = function ViewAlbums(_ref) {
     galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardControls: cardControls,
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles

package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js

@@ -23,7 +23,7 @@ var _globalCardStyles = require("../globalCardStyles");
 
 var _templateObject;
 
-var _excluded = ["title", "description"];
+var _excluded = ["title", "description", "path"];
 
 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); }
 
@@ -32,6 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardStyle3 = function CardStyle3(_ref) {
   var title = _ref.title,
       description = _ref.description,
+      path = _ref.path,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -43,7 +44,12 @@ var CardStyle3 = function CardStyle3(_ref) {
     console.log(action);
   };
 
+  var cardClicked = function cardClicked() {
+    props.cardClicked(path);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_globalCardStyles.MainCard, Object.assign({
+    onClick: cardClicked,
     onMouseEnter: function onMouseEnter(e) {
       return setShowIcons(true);
     },

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

@@ -39,8 +39,8 @@ var Gallery = function Gallery(_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) {

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

@@ -29,7 +29,12 @@ var WidgetContainer = function WidgetContainer(_ref) {
       widgetControls = _ref.widgetControls,
       widgetProps = _ref.widgetProps,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var child = (0, _util.getWidgetType)(widgetType, widgetProps);
+
+  var cardClicked = function cardClicked(path) {
+    props.cardClicked(path);
+  };
+
+  var child = (0, _util.getWidgetType)(widgetType, widgetProps, cardClicked);
 
   var iconCliked = function iconCliked(action) {
     console.log(action);
@@ -42,7 +47,7 @@ var WidgetContainer = function WidgetContainer(_ref) {
   }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(Body, null, child));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    padding: 0;\n"])));
 

package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js

@@ -23,10 +23,11 @@ var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTex
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
+var _excluded = ["videoSrc", "title", "discription", "date", "users", "iconsColor", "backgroundColor", "detailsPadding", "titleFontSize", "titleColor", "dateFontSize", "dateColor", "discFontSize", "discColor", "comments", "commentBackgroundColor", "commentTitleColor", "commentTitleFontSize"];
 
 var VideoSpace = function VideoSpace(_ref) {
-  var title = _ref.title,
+  var videoSrc = _ref.videoSrc,
+      title = _ref.title,
       discription = _ref.discription,
       date = _ref.date,
       users = _ref.users,
@@ -47,7 +48,8 @@ var VideoSpace = function VideoSpace(_ref) {
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
-    iconsColor: iconsColor
+    iconsColor: iconsColor,
+    src: videoSrc
   }), /*#__PURE__*/_react.default.createElement(VideoDetails, {
     detailsPadding: detailsPadding
   }, /*#__PURE__*/_react.default.createElement(Top, null, /*#__PURE__*/_react.default.createElement(Title, {

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

@@ -110,23 +110,12 @@ var ViewAlbum = function ViewAlbum(_ref) {
     data: album,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff',
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
     columnsNumber: 3,
     galleryColumnGap: 10,
     galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardClicked: function cardClicked() {
-      return null;
-    },
     cardIconClicked: cardIconClicked,
     customCardStyles: cardStyles
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {

package/dist/stories/helpers/util.js

@@ -88,7 +88,10 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
     'card-style-3': /*#__PURE__*/_react.default.createElement(_CardStyle3.default, Object.assign({
       key: index
     }, cardProps, customCardStyles, {
-      cardControls: cardControls
+      cardControls: cardControls,
+      cardClicked: function cardClicked(path) {
+        return clicked(path);
+      }
     })),
     'card-style-4': /*#__PURE__*/_react.default.createElement(_CardStyle4.default, Object.assign({
       key: index
@@ -100,7 +103,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);
@@ -167,9 +170,13 @@ var getCardStyle = function getCardStyle(cardProps, cardType, customCardStyles,
 
 exports.getCardStyle = getCardStyle;
 
-var getWidgetType = function getWidgetType(widgetType, props) {
+var getWidgetType = function getWidgetType(widgetType, props, _cardClicked) {
   var widgetTypes = {
-    'list': /*#__PURE__*/_react.default.createElement(_ReusableList.default, props),
+    'list': /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+      cardClicked: function cardClicked(path) {
+        return _cardClicked(path);
+      }
+    }, 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)

package/package.json

@@ -10,14 +10,16 @@
       ]
     ]
   },
-  "version": "0.1.9",
+  "version": "0.1.13",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",
     "@babel/runtime": "^7.15.4",
+    "@editorjs/editorjs": "^2.22.2",
     "@editorjs/header": "^2.6.1",
     "@editorjs/image": "^2.6.2",
     "@editorjs/marker": "^1.2.2",
+    "@editorjs/paragraph": "^2.8.0",
     "@editorjs/table": "^2.0.1",
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/react-components": "^5.3.1",
@@ -34,7 +36,6 @@
     "formik": "^2.2.9",
     "moment": "^2.29.1",
     "rc-slider": "^9.7.5",
-    "react": "^16.14.0",
     "react-async-hook": "^4.0.0",
     "react-autocomplete": "^1.8.1",
     "react-dates": "^21.8.0",
@@ -59,6 +60,9 @@
     "web-vitals": "^1.0.1",
     "yup": "^0.32.9"
   },
+  "peerDependencies": {
+    "react": "^16.14.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env BABEL_ENV=production babel src -d dist",
@@ -96,8 +100,6 @@
     ]
   },
   "devDependencies": {
-    "@editorjs/editorjs": "^2.22.2",
-    "@editorjs/paragraph": "^2.8.0",
     "@editorjs/simple-image": "^1.4.1",
     "@geometricpanda/storybook-addon-badges": "^0.0.4",
     "@storybook/addon-a11y": "^6.3.8",

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

@@ -14,19 +14,16 @@ const Event = ({
     titleSize,
     dateColor,
     dateSize,
-    headerBackground,
-    headerTitleColor,
     discColor,
     discSize,
+    headerStyles
 }) => {
     return (
         <Container
             backgroundColor={backgroundColor}>
             <ReusableHeader
-                title='Event'
-                padding={10}
-                headerBackground={headerBackground}
-                titleColor={headerTitleColor}
+                title={title}
+                {...headerStyles}
             />
             <CoverWrapper>
                 <Cover src={cover} />

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

@@ -60,14 +60,6 @@ const Notes = ({
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 customCardStyles={{
                     iconColor,
                     cardTitleFontSize,
@@ -82,6 +74,7 @@ const Notes = ({
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
                 cardIconClicked={cardIconClicked}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -52,14 +52,6 @@ const ViewAlbum = ({
             <List
                 listTitle="My Album"
                 data={album}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 cardStyle="card-style-7"
                 type="flat"
                 cardClicked={(index) => props.cardClicked(index)}
@@ -74,6 +66,7 @@ const ViewAlbum = ({
                         iconColor: 'black'
                     }
                 }}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}

package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx

@@ -76,25 +76,16 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Music Albums"
+                galleryTitle={props.title}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}
@@ -129,6 +120,7 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string
 };
 
 export default ViewAlbums

package/src/stories/Pages/Chat/Chat.jsx

@@ -58,6 +58,7 @@ const Chat = ({
                                 }
                             },
                         }}
+                        cardClicked={(path) => alert(path)}
                     />
                 </Left>
                 <Center>

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

@@ -67,11 +67,17 @@ const Event = (props) => {
                             date="15/11/1976 : 16/11/1976"
                             disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
                             backgroundColor="black"
-                            headerBackground="black"
-                            headerTitleColor="white"
                             titleColor="white"
                             discColor="white"
                             dateColor="white"
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
                         />
 
                     </SpaceContainer>

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

@@ -93,7 +93,14 @@ const Notes = (props) => {
                         onAddNote={onAddNote}
                         cardIconClicked={cardIconClicked}
                         notes={notes}
-                             />
+                        headerStyles={{
+                            padding: 10,
+                            headerBackground: '#FE1744',
+                            titleColor: '#ffff',
+                            controlsStyles: {
+                                iconSize: 25
+                            }
+                        }}     />
 
                     </SpaceContainer>
 

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -123,7 +123,15 @@ const Music = (props) => {
               album={album}
               onAddSong={onAddSong}
               cardIconClicked={cardIconClicked}
-              cardClicked={onPlaySong} />
+              cardClicked={onPlaySong}
+              headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+                controlsStyles: {
+                    iconSize: 25
+                }
+            }} />
           </SpaceContainer>
 
         </Center>

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -56,6 +56,10 @@ const MusicAlbums = (props) => {
     const deleteFromAlbums = (index) => {
         setAlbums(deleteFromArrayByIndex(albums, index))
     }
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -100,9 +104,20 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
+                        title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
-                            onAddAlbum={onAddAlbum} />
+                            onAddAlbum={onAddAlbum}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            cardClicked={cardClicked}
+                             />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -59,6 +59,10 @@ const Albums = (props) => {
         setAlbums(addObjectToArray(albums, newAlbum))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -108,6 +112,7 @@ const Albums = (props) => {
                             onDeleteAlbum={onDeleteAlbum}
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
+                            cardClicked={cardClicked}
                         />
                     </SpaceContainer>
 

package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx

@@ -76,7 +76,8 @@ const DetailedVideo = (props) => {
                             date="10/11/2022"
                             comments={comments}
                             discColor="gray"
-                            dateColor="gray" />
+                            dateColor="gray"
+                            videoSrc={'https://www.youtube.com/watch?v=vETUpJ88cfA'} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Video/VideoAlbum/Video.jsx

@@ -84,6 +84,9 @@ const Video = (props) => {
         setAlbum(deleteFromArrayByIndex(album, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
 
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
@@ -132,7 +135,16 @@ const Video = (props) => {
                             album={album}
                             onAddVideo={onAddVideo}
                             onDeleteSong={deleteVideoFromAlbum}
-                            cardIconClicked={cardIconClicked} />
+                            cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/ViewWorld/constatnts.js

@@ -2,15 +2,15 @@ export const SPACES = [
   {
     title: 'Main List',
     data: [
-      {title: 'Cargo Sprint'},
-      {title: 'Movies'}
-    ]
+      {title: 'Cargo Sprint', path: 'cago'},
+      {title: 'Movies', path: 'movies'}
+    ],
   },
   {
-    title: 'Entertainment List',
+    title: 'Entertainment',
     data: [
-      {title: 'Gaming'},
-      {title: 'Music'}
+      {title: 'Gaming', path: 'games'},
+      {title: 'Music', path: 'music'}
     ]
   }
 ]

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -93,7 +93,6 @@ const ViewAlbums = ({
                 galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
-                cardClicked={() => null}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx

@@ -5,16 +5,20 @@ import PropTypes from "prop-types";
 import Controls from '../../Controls/Controls';
 import { globalContent, MainCard, Title, Description } from '../globalCardStyles';
 
-const CardStyle3 = ({ title, description, ...props }) => {
+const CardStyle3 = ({ title, description, path, ...props }) => {
     const [showIcons, setShowIcons] = useState(false)
 
     const iconCliked = (action) => {
         console.log(action)
     }
 
+    const cardClicked = () => {
+        props.cardClicked(path)
+    }
 
     return (
         <MainCard
+            onClick={cardClicked}
             onMouseEnter={e => setShowIcons(true)}
             onMouseLeave={e => setShowIcons(false)}
             {...props}>

package/src/stories/Reusable Components/Gallery/Gallery.jsx

@@ -14,8 +14,8 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {

package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.jsx

@@ -13,7 +13,12 @@ const WidgetContainer = ({
     ...props
 }) => {
 
-    const child = getWidgetType(widgetType, widgetProps)
+    const cardClicked = (path) => {
+       props.cardClicked(path)
+    }
+
+    const child = getWidgetType(widgetType, widgetProps, cardClicked)
+
 
     const iconCliked = (action) => {
         console.log(action)
@@ -39,6 +44,7 @@ const WidgetContainer = ({
 const Container = styled.div`
     display: flex;
     flex-direction: column;
+    width: 100%;
 `
 
 const Body = styled.div`

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -7,6 +7,7 @@ import Comments from '../Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
 
 const VideoSpace = ({
+    videoSrc,
     title,
     discription,
     date,
@@ -29,7 +30,8 @@ const VideoSpace = ({
     return (
         <Container backgroundColor={backgroundColor}>
             <VideoPlayer
-                iconsColor={iconsColor} />
+                iconsColor={iconsColor}
+                src={videoSrc} />
             <VideoDetails detailsPadding={detailsPadding}>
                 <Top>
                     <Title titleFontSize={titleFontSize} titleColor={titleColor}>{title}</Title>

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx

@@ -79,21 +79,12 @@ const ViewAlbum = ({
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}

package/src/stories/helpers/util.js

@@ -44,9 +44,9 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 	const cardTypes = {
 		'card-style-1': (<CardStyle1 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} />),
 		'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
+		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(path) => clicked(path)}/>),
 		'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-8': (<CardStyle8 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
@@ -56,9 +56,9 @@ export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls
 	return cardTypes[cardType]
 };
 
-export const getWidgetType = (widgetType, props) => {
+export const getWidgetType = (widgetType, props, cardClicked) => {
 	const widgetTypes = {
-		'list': (<ReusableList {...props}/>),
+		'list': (<ReusableList cardClicked={(path) => cardClicked(path)} {...props}/>),
 		'music player': (<MusicPlayerWidget {...props} />),
 		'logo': (<LogoWidget {...props}/>),
 		'video player': (<VideoPlayer {...props}/>)