@mohamed-karawia/library 0.1.0

package/dist/stories/Misc/Thumbnail/Thumbnail.js

@@ -0,0 +1,118 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var Thumb = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(Thumb, _React$PureComponent);
+
+  var _super = (0, _createSuper2.default)(Thumb);
+
+  function Thumb() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Thumb);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      loading: false,
+      thumb: undefined,
+      file: {}
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(Thumb, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      if (!nextProps.file) {
+        return;
+      } // Prevent from re-rendering
+
+
+      if (nextProps.file.lastModified === this.state.file.lastModified) {
+        return;
+      }
+
+      this.setState({
+        loading: true
+      }, function () {
+        var reader = new FileReader();
+
+        reader.onloadend = function () {
+          _this2.setState({
+            loading: false,
+            thumb: reader.result,
+            file: nextProps.file
+          });
+        };
+
+        reader.readAsDataURL(nextProps.file);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          type = _this$props.type,
+          file = _this$props.file;
+      var _this$state = this.state,
+          loading = _this$state.loading,
+          thumb = _this$state.thumb;
+
+      var ImageThumbnail = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        border-radius: 50%;\n        object-fit: cover;\n        height: 175px;\n        width: 175px;\n        max-height: 175px;\n        max-width: 175px;\n        box-sizing: border-box;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      "])));
+
+      var ImageThumbHorizontal = _styledComponents.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: 100%;\n        width: auto;\n        object-fit: contain;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n      "])));
+
+      var ImageThumbnailLoading = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        height: 175px;\n        width: 175px;\n        max-height: 175px;\n        max-width: 175px;\n        border-radius: 50%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-family: Helvetica, Arial, sans-serif;\n        border: ", ";\n        margin: 0;\n        box-sizing: border-box;\n      "])), function (props) {
+        return props.type === 'thumbnail' ? '1px solid #000' : 'none';
+      });
+
+      if (loading) return /*#__PURE__*/_react.default.createElement(ImageThumbnailLoading, {
+        type: type
+      }, "Loading...");
+
+      if (type === 'thumbnail') {
+        return /*#__PURE__*/_react.default.createElement(ImageThumbnail, {
+          src: thumb ? thumb : 'https://avatars.dicebear.com/api/pixel-art-neutral/storybook.svg',
+          alt: file ? file.name : ''
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement(ImageThumbHorizontal, {
+          src: thumb,
+          alt: file ? file.name : ''
+        });
+      }
+    }
+  }]);
+  return Thumb;
+}(_react.default.PureComponent);
+
+var _default = Thumb;
+exports.default = _default;

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

@@ -0,0 +1,131 @@
+"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 _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _ai = require("react-icons/ai");
+
+var _AddSong = _interopRequireDefault(require("../../Forms/AddSong/AddSong"));
+
+var _templateObject;
+
+var _excluded = ["album", "cardBackgroundColor", "songTitleColor"];
+
+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 listControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Album'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
+  action: 'delete',
+  name: 'Delete album'
+}];
+
+var ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      songTitleColor = _ref.songTitleColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var onAddSong = function onAddSong(song) {
+    setShowModal(false);
+    props.onAddSong(song);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    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) {
+      return props.cardClicked(index);
+    },
+    iconClicked: onIconClicked,
+    listControls: listControls,
+    cardControls: cardControls,
+    cardIconClicked: cardIconClicked,
+    customCardStyles: {
+      cardBackgroundColor: cardBackgroundColor,
+      cardTitleColor: songTitleColor,
+      controlsStyles: {
+        iconColor: 'black'
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showModal,
+    closeModal: function closeModal() {
+      return setShowModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AddSong.default, {
+    saveHandler: onAddSong,
+    cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel"
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+ViewAlbum.defaultProps = {
+  cardBackgroundColor: 'white'
+};
+var _default = ViewAlbum;
+exports.default = _default;

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Album = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ViewAlbum = _interopRequireDefault(require("./ViewAlbum"));
+
+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 _default = {
+  title: 'Music Albums/Album List',
+  component: _ViewAlbum.default
+};
+exports.default = _default;
+
+var Album = function Album(args) {
+  var _useState = (0, _react.useState)([{
+    index: 0,
+    cover: _music4.default,
+    title: 'Plans We Made',
+    description: 'Son Lux',
+    time: '5:20'
+  }, {
+    index: 2,
+    cover: _music6.default,
+    title: 'Still Loving You',
+    description: 'Scorpions',
+    time: '4:20'
+  }, {
+    index: 1,
+    cover: _music5.default,
+    title: 'Night',
+    description: 'Frank Ocean',
+    time: '5:20'
+  }, {
+    index: 3,
+    cover: _music.default,
+    title: 'Somebody Else',
+    description: '1975',
+    time: '5:20'
+  }, {
+    index: 4,
+    cover: _music3.default,
+    title: 'Enter Sandman',
+    description: 'Metallica',
+    time: '5:20'
+  }, {
+    index: 5,
+    cover: _music2.default,
+    title: 'November Rain',
+    description: "Guns N' Roses",
+    time: '5:20'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      album = _useState2[0],
+      setAlbum = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        onDeleteSong(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onAddSong = function onAddSong(song) {
+    var newSong = {
+      song: song.file,
+      img: song.cover.meta.previewUrl,
+      title: song.title,
+      description: song.artist,
+      time: new Date(song.song.meta.duration * 1000).toISOString().substr(14, 5)
+    };
+    setAlbum((0, _util.addObjectToArray)(album, newSong));
+  };
+
+  var onDeleteSong = function onDeleteSong(index) {
+    setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, Object.assign({
+    album: album,
+    onAddSong: onAddSong,
+    cardIconClicked: cardIconClicked
+  }, args));
+};
+
+exports.Album = Album;

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

@@ -0,0 +1,149 @@
+"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 _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _CreateMusicAlbum = _interopRequireDefault(require("../../Forms/CreateMusicAlbum/CreateMusicAlbum"));
+
+var _ai = require("react-icons/ai");
+
+var _templateObject;
+
+var _excluded = ["albums", "cardBackgroundColor", "albumTitleColor", "descColor"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete album'
+}];
+var galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Album'
+}];
+
+var ViewAlbums = function ViewAlbums(_ref) {
+  var albums = _ref.albums,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      albumTitleColor = _ref.albumTitleColor,
+      descColor = _ref.descColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardStyles = {
+    darkOnHover: true,
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: albumTitleColor,
+    descColor: descColor,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'center',
+      iconBackground: "#272727",
+      dropdownBackground: "#272727",
+      dropdownFontColor: "white",
+      dropdownItemHoverColor: "#414141",
+      iconBackgroundHover: "#414141",
+      iconBorderRadius: 100,
+      iconSize: 25,
+      iconsGap: 10,
+      iconColor: 'white',
+      containerPadding: 20
+    }
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var onHeaderIconClicked = function onHeaderIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    setShowModal(false);
+    props.onAddAlbum(album);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Music Albums",
+    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, {
+    modalIsOpen: showModal,
+    closeModal: function closeModal() {
+      return setShowModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CreateMusicAlbum.default, {
+    saveHandler: onAddAlbum,
+    cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel"
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ViewAlbums.defaultProps = {
+  cardBackgroundColor: 'white'
+};
+var _default = ViewAlbums;
+exports.default = _default;

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Albums = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ViewAlbums = _interopRequireDefault(require("./ViewAlbums"));
+
+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 _default = {
+  title: 'Music Albums/Music Albums',
+  component: _ViewAlbums.default
+};
+exports.default = _default;
+
+var Albums = function Albums(args) {
+  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.preview,
+      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(_ViewAlbums.default, Object.assign({
+    albums: albums,
+    cardIconClicked: cardIconClicked,
+    onAddAlbum: onAddAlbum
+  }, args));
+};
+
+exports.Albums = Albums;