@mohamed-karawia/library 0.1.0

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

@@ -0,0 +1,236 @@
+"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 _AddPhoto = _interopRequireDefault(require("../../Forms/AddPhoto/AddPhoto"));
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _DetailedPhoto = _interopRequireDefault(require("../DetailedPhoto/DetailedPhoto"));
+
+var _ai = require("react-icons/ai");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var _excluded = ["album", "cardBackgroundColor", "imgTitleColor", "columnsNumber", "columnGap", "rowGap", "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 galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      imgTitleColor = _ref.imgTitleColor,
+      columnsNumber = _ref.columnsNumber,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap,
+      descColor = _ref.descColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardStyles = {
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: imgTitleColor,
+    descColor: descColor,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'absolute',
+      iconBackground: "transparent",
+      dropdownBackground: "white",
+      dropdownFontColor: "#FE1744",
+      dropdownItemHoverColor: "#FE1744",
+      iconBackgroundHover: "white",
+      iconBorderRadius: 100,
+      iconSize: 20,
+      iconsGap: 10,
+      maxIcons: 0,
+      iconColor: '#FE1744',
+      iconHoverColor: 'white',
+      dropdownFontSize: 10
+    }
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showImgModal = _useState4[0],
+      setShowImgModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      openedImgIndex = _useState6[0],
+      setOpenedImgIndex = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      openedImg = _useState8[0],
+      setOpenedImg = _useState8[1];
+
+  var handleUserKeyPress = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+
+    if (key === 'ArrowRight') {
+      setOpenedImgIndex(function (prev) {
+        return prev <= album.length - 2 ? prev + 1 : 0;
+      });
+    } else if (key === 'ArrowLeft') {
+      setOpenedImgIndex(function (prev) {
+        return prev !== 0 ? prev - 1 : 0;
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    setOpenedImg(album[openedImgIndex]);
+    window.addEventListener("keydown", handleUserKeyPress);
+  }, [openedImgIndex, handleUserKeyPress]);
+
+  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 onAddPhoto = function onAddPhoto(photo) {
+    setShowModal(false);
+    props.addPhoto(photo);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  var cardClicked = function cardClicked(index) {
+    setOpenedImgIndex(index);
+    setShowImgModal(true);
+  };
+
+  var prevPhoto = function prevPhoto() {
+    if (openedImgIndex !== 0) {
+      setOpenedImgIndex(openedImgIndex - 1);
+    }
+  };
+
+  var nextPhoto = function nextPhoto() {
+    if (openedImgIndex <= album.length - 2) {
+      setOpenedImgIndex(openedImgIndex + 1);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Photo Album",
+    data: album,
+    type: "flat",
+    cardStyle: "card-style-6",
+    headerStyles: {
+      padding: 10,
+      headerBackground: props.headerBackground,
+      titleColor: props.titleColor,
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    columnsNumber: columnsNumber,
+    galleryColumnGap: columnGap,
+    galleryRowGap: rowGap,
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked,
+    cardControls: cardControls,
+    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(_AddPhoto.default, {
+    saveHandler: onAddPhoto,
+    cancelHandler: cancelHandler,
+    saveBtnText: 'Add',
+    cancelBtnText: 'Cancel'
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showImgModal,
+    closeModal: function closeModal() {
+      setShowImgModal(false);
+      setOpenedImgIndex(null);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    },
+    width: "70vw",
+    height: "90vh"
+  }, /*#__PURE__*/_react.default.createElement(CloseIconContainer, {
+    onClick: function onClick() {
+      return setShowImgModal(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineClose, null)), /*#__PURE__*/_react.default.createElement(LeftIconContainer, {
+    onClick: prevPhoto
+  }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineArrowLeft, null)), /*#__PURE__*/_react.default.createElement(_DetailedPhoto.default, {
+    cardClicked: nextPhoto,
+    img: openedImg
+  }), /*#__PURE__*/_react.default.createElement(RightIconContainer, {
+    onClick: nextPhoto
+  }, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineArrowRight, null))));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 30px;\n    height: 30px;\n    background-color: #757575;\n    position: absolute;\n    transform: translateY(-50%);\n    top: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50rem;\n    z-index: 999;\n    cursor: pointer;\n    opacity: .4;\n    transition: all .2s;\n\n    &:hover{\n        opacity: 1;\n        transform: scale(1.1) translateY(-50%);\n    }\n\n    svg{\n        color: white;\n    }\n    \n"])));
+
+var CloseIconContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    z-index: 999;\n    right: 10px;\n    top: 10px;\n    cursor: pointer;\n\n    svg{\n        color: white;\n    }\n"])));
+
+var LeftIconContainer = (0, _styledComponents.default)(IconContainer)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n   left: 10px;\n"])));
+var RightIconContainer = (0, _styledComponents.default)(IconContainer)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    right: 10px;\n"])));
+ViewAlbum.defaultProps = {
+  headerBackground: '#FE1744',
+  titleColor: 'white',
+  columnsNumber: 3,
+  columnGap: 10,
+  rowGap: 20,
+  cardBackgroundColor: 'white'
+};
+var _default = ViewAlbum;
+exports.default = _default;

package/dist/stories/Photo 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 _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 _default = {
+  title: 'Photo Album/View Album',
+  component: _ViewAlbum.default
+};
+exports.default = _default;
+
+var Album = function Album(args) {
+  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(_ViewAlbum.default, Object.assign({
+    album: album,
+    addPhoto: onAddPhoto,
+    deletePhoto: onDeletePhoto,
+    cardIconClicked: cardIconClicked
+  }, args));
+};
+
+exports.Album = Album;

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

@@ -0,0 +1,156 @@
+"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 _CreateAlbum = _interopRequireDefault(require("../../Forms/CreateAlbum/CreateAlbum"));
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _ai = require("react-icons/ai");
+
+var _templateObject;
+
+var _excluded = ["albums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "albumTitleColor", "countColor", "countFontSize", "columnsNumber", "columnGap", "rowGap"];
+
+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,
+      cardTitleColor = _ref.cardTitleColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      albumTitleColor = _ref.albumTitleColor,
+      countColor = _ref.countColor,
+      countFontSize = _ref.countFontSize,
+      columnsNumber = _ref.columnsNumber,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cardStyles = {
+    darkOnHover: true,
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: cardTitleColor,
+    cardTitleFontSize: cardTitleFontSize,
+    countColor: countColor,
+    countFontSize: countFontSize,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'center',
+      dropdownFontColor: "white",
+      iconBorderRadius: 100,
+      iconSize: 40,
+      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 onIconClicked = function onIconClicked(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) {
+    props.onAddAlbum(album);
+    setShowModal(false);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Photo Albums",
+    data: albums,
+    type: "flat",
+    cardStyle: "card-style-6",
+    headerStyles: {
+      padding: 10,
+      headerBackground: props.headerBackground,
+      titleColor: props.titleColor,
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    columnsNumber: columnsNumber,
+    galleryColumnGap: columnGap,
+    galleryRowGap: rowGap,
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardClicked: function cardClicked() {
+      return null;
+    },
+    cardControls: cardControls,
+    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(_CreateAlbum.default, {
+    saveHandler: onAddAlbum,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ViewAlbums.defaultProps = {
+  columnsNumber: 3,
+  headerBackground: '#FE1744',
+  titleColor: 'white',
+  cardBackgroundColor: 'white',
+  columnGap: 10,
+  rowGap: 20
+};
+var _default = ViewAlbums;
+exports.default = _default;

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

@@ -0,0 +1,102 @@
+"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 _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 _default = {
+  title: 'Photo Album/Albums/Albums',
+  component: _ViewAlbums.default
+};
+exports.default = _default;
+
+var Albums = function Albums(args) {
+  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(_ViewAlbums.default, Object.assign({
+    albums: albums,
+    cardIconClicked: cardIconClicked,
+    onDeleteAlbum: onDeleteAlbum,
+    onAddAlbum: onAddAlbum
+  }, args));
+};
+
+exports.Albums = Albums;

package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.js

@@ -0,0 +1,67 @@
+"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 _Controls = _interopRequireDefault(require("../../Controls/Controls"));
+
+var _globalCardStyles = require("../globalCardStyles");
+
+var _templateObject, _templateObject2;
+
+var _excluded = ["title", "description", "img"];
+
+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 CardStyle1 = function CardStyle1(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      img = _ref.img,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showIcons = _useState2[0],
+      setShowIcons = _useState2[1];
+
+  var iconCliked = function iconCliked(action) {
+    console.log(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+    onMouseEnter: function onMouseEnter(e) {
+      return setShowIcons(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowIcons(false);
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(_globalCardStyles.ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+    src: img
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, title), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, description)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: props.cardControls,
+    show: showIcons,
+    onIconClicked: iconCliked
+  }, props.controlsStyles)));
+};
+
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    column-gap: 30px;\n"])));
+var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    justify-content: space-between;\n"])));
+CardStyle1.defaultProps = {};
+var _default = CardStyle1;
+exports.default = _default;