@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _ViewAlbums = _interopRequireDefault(require("../../../Music Album/ViewAlbums/ViewAlbums"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+var _util = require("../../../helpers/util");
+
+var _music = _interopRequireDefault(require("../../../assets/images/music1.jpg"));
+
+var _music2 = _interopRequireDefault(require("../../../assets/images/music2.jpg"));
+
+var _music3 = _interopRequireDefault(require("../../../assets/images/music3.jpg"));
+
+var _music4 = _interopRequireDefault(require("../../../assets/images/music4.jpg"));
+
+var _music5 = _interopRequireDefault(require("../../../assets/images/music5.jpg"));
+
+var _music6 = _interopRequireDefault(require("../../../assets/images/music6.jpg"));
+
+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 MusicAlbums = function MusicAlbums(props) {
+  var _useState = (0, _react.useState)([{
+    index: 0,
+    img: _music4.default,
+    title: 'Tomorrows |',
+    description: 'Son Lux'
+  }, {
+    index: 1,
+    img: _music5.default,
+    title: 'Blond',
+    description: 'Frank Ocean'
+  }, {
+    index: 2,
+    img: _music6.default,
+    title: 'Love At First Sting',
+    description: 'Scorpions'
+  }, {
+    index: 3,
+    img: _music.default,
+    title: 'The 1975',
+    description: '1975'
+  }, {
+    index: 4,
+    img: _music3.default,
+    title: 'Hardwired...To Self-Destruct',
+    description: 'Metallica'
+  }, {
+    index: 5,
+    img: _music2.default,
+    title: 'Use Your IIIlusion |',
+    description: "Guns N' Roses"
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      albums = _useState2[0],
+      setAlbums = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        deleteFromAlbums(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    var newAlbum = {
+      img: album.cover.meta.previewUrl,
+      title: album.title,
+      description: album.artist
+    };
+    setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
+  };
+
+  var deleteFromAlbums = function deleteFromAlbums(index) {
+    setAlbums((0, _util.deleteFromArrayByIndex)(albums, index));
+  };
+
+  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: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Photo Albums",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, {
+    albums: albums,
+    cardIconClicked: cardIconClicked,
+    onAddAlbum: onAddAlbum
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = MusicAlbums;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Albums = exports.default = void 0;
+
+var _MusicAlbums = _interopRequireDefault(require("./MusicAlbums"));
+
+var _default = {
+  title: 'pages/Music/Music Albums',
+  component: _MusicAlbums.default
+};
+exports.default = _default;
+
+var Albums = function Albums(args) {
+  return /*#__PURE__*/React.createElement(_MusicAlbums.default, args);
+};
+
+exports.Albums = Albums;

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

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _ViewAlbum = _interopRequireDefault(require("../../../Photo Album/ViewAlbum/ViewAlbum"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+var _util = require("../../../helpers/util");
+
+var _album = _interopRequireDefault(require("../../../assets/images/album1.jpg"));
+
+var _album2 = _interopRequireDefault(require("../../../assets/images/album2.jpg"));
+
+var _album3 = _interopRequireDefault(require("../../../assets/images/album3.jpg"));
+
+var _album4 = _interopRequireDefault(require("../../../assets/images/album4.jpg"));
+
+var _album5 = _interopRequireDefault(require("../../../assets/images/album5.jpg"));
+
+var _album6 = _interopRequireDefault(require("../../../assets/images/album6.jpg"));
+
+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 Album = function Album(props) {
+  var _useState = (0, _react.useState)([{
+    index: 0,
+    img: _album5.default,
+    title: 'Image 1',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }, {
+    index: 1,
+    img: _album3.default,
+    title: 'Image 2',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }, {
+    index: 2,
+    img: _album6.default,
+    title: 'Image 3',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }, {
+    index: 3,
+    img: _album2.default,
+    title: 'Image 4',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }, {
+    index: 4,
+    img: _album.default,
+    title: 'Image 5',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }, {
+    index: 5,
+    img: _album4.default,
+    title: 'Image 6',
+    description: 'This is description test',
+    date: '2021-11-30'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      album = _useState2[0],
+      setAlbum = _useState2[1];
+
+  var onAddPhoto = function onAddPhoto(photo) {
+    var newImg = {
+      img: photo.cover.meta.previewUrl,
+      title: photo.title,
+      description: photo.description,
+      date: photo.date
+    };
+    setAlbum((0, _util.addObjectToArray)(album, newImg));
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        onDeletePhoto(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onDeletePhoto = function onDeletePhoto(index) {
+    setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
+  };
+
+  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: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Photo Albums",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, {
+    album: album,
+    addPhoto: onAddPhoto,
+    deletePhoto: onDeletePhoto,
+    cardIconClicked: cardIconClicked,
+    columnsNumber: 2
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = Album;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.photoAlbum = exports.default = void 0;
+
+var _Album = _interopRequireDefault(require("./Album"));
+
+var _default = {
+  title: 'pages/photos/Album',
+  component: _Album.default
+};
+exports.default = _default;
+
+var photoAlbum = function photoAlbum(args) {
+  return /*#__PURE__*/React.createElement(_Album.default, args);
+};
+
+exports.photoAlbum = photoAlbum;

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

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _ViewAlbums = _interopRequireDefault(require("../../../Photo Album/ViewAlbums/ViewAlbums"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+var _util = require("../../../helpers/util");
+
+var _album = _interopRequireDefault(require("../../../assets/images/album1.jpg"));
+
+var _album2 = _interopRequireDefault(require("../../../assets/images/album2.jpg"));
+
+var _album3 = _interopRequireDefault(require("../../../assets/images/album3.jpg"));
+
+var _album4 = _interopRequireDefault(require("../../../assets/images/album4.jpg"));
+
+var _album5 = _interopRequireDefault(require("../../../assets/images/album5.jpg"));
+
+var _album6 = _interopRequireDefault(require("../../../assets/images/album6.jpg"));
+
+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 Albums = function Albums(props) {
+  var _useState = (0, _react.useState)([{
+    img: _album.default,
+    title: 'Album 1',
+    count: '24'
+  }, {
+    img: _album2.default,
+    title: 'Album 2',
+    count: '24'
+  }, {
+    img: _album3.default,
+    title: 'Album 3',
+    count: '24'
+  }, {
+    img: _album4.default,
+    title: 'Album 4',
+    count: '24'
+  }, {
+    img: _album5.default,
+    title: 'Album 5',
+    count: '24'
+  }, {
+    img: _album6.default,
+    title: 'Album 6',
+    count: '24'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      albums = _useState2[0],
+      setAlbums = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        onDeleteAlbum(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onDeleteAlbum = function onDeleteAlbum(index) {
+    setAlbums((0, _util.deleteFromArrayByIndex)(albums, index));
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    var newAlbum = {
+      img: album.cover.meta.previewUrl,
+      title: album.title,
+      count: '55'
+    };
+    setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
+  };
+
+  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: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Photo Albums",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, {
+    albums: albums,
+    cardIconClicked: cardIconClicked,
+    onDeleteAlbum: onDeleteAlbum,
+    onAddAlbum: onAddAlbum,
+    columnsNumber: 2
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = Albums;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.photoAlbums = exports.default = void 0;
+
+var _Albums = _interopRequireDefault(require("./Albums"));
+
+var _default = {
+  title: 'pages/Photos/Albums',
+  component: _Albums.default
+};
+exports.default = _default;
+
+var photoAlbums = function photoAlbums(args) {
+  return /*#__PURE__*/React.createElement(_Albums.default, args);
+};
+
+exports.photoAlbums = photoAlbums;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _VideoSpace = _interopRequireDefault(require("../../../VideoAlbum/VideoSpace/VideoSpace"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+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 DetailedVideo = function DetailedVideo(props) {
+  var _useState = (0, _react.useState)([{
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'User Name',
+    description: 'This is A test for comments on videos.'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'User Name',
+    description: 'This is A test for comments on videos.'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'User Name',
+    description: 'This is A test for comments on videos.'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'User Name',
+    description: 'This is A test for comments on videos.'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'User Name',
+    description: 'This is A test for comments on videos.'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      comments = _useState2[0],
+      setComments = _useState2[1];
+
+  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: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__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(_VideoSpace.default, {
+    iconsColor: "white",
+    backgroundColor: "white",
+    title: "Video Title",
+    discription: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium placeat nostrum tempora suscipit laborum quibusdam.",
+    date: "10/11/2022",
+    comments: comments,
+    discColor: "gray",
+    dateColor: "gray"
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = DetailedVideo;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Video = exports.default = void 0;
+
+var _DetailedVideo = _interopRequireDefault(require("./DetailedVideo"));
+
+var _default = {
+  title: 'Pages/Video/Detailed Video',
+  component: _DetailedVideo.default
+};
+exports.default = _default;
+
+var Video = function Video(args) {
+  return /*#__PURE__*/React.createElement(_DetailedVideo.default, args);
+};
+
+exports.Video = Video;