@mohamed-karawia/library 0.1.22 → 0.1.23

package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js

@@ -140,10 +140,12 @@ var PhotoAlbumsPreview = function PhotoAlbumsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setPhotoAlbumsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setPhotoAlbumsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js

@@ -148,10 +148,12 @@ var SpacesListPreview = function SpacesListPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setSpacesStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setSpacesStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

package/dist/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.js

@@ -140,10 +140,12 @@ var VideoAlbumPreview = function VideoAlbumPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoAlbumStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoAlbumStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

package/dist/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.js

@@ -126,10 +126,12 @@ var VideoAlbumsPreview = function VideoAlbumsPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoAlbumsStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoAlbumsStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

package/dist/stories/PreviewComponents/VideoPreview/VideoPreview.js

@@ -123,10 +123,12 @@ var VideoPreview = function VideoPreview(props) {
   }];
 
   var handleChange = function handleChange(values) {
-    if (values) {
-      props.formChanged(values);
-      setVideoStyles(values);
-      localStorage.setItem('formStyles', JSON.stringify(values));
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values);
+        setVideoStyles(values);
+        localStorage.setItem('formStyles', JSON.stringify(values));
+      }
     }
   };
 

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

@@ -0,0 +1,58 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _templateObject;
+
+var _excluded = ["comments", "cardPadding", "imgSize", "cardTitleFontSize", "cardTitleColor", "contentGap", "cardBackgroundColor"];
+
+var Comments = function Comments(_ref) {
+  var comments = _ref.comments,
+      cardPadding = _ref.cardPadding,
+      imgSize = _ref.imgSize,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      cardTitleColor = _ref.cardTitleColor,
+      contentGap = _ref.contentGap,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    data: comments,
+    type: "flat",
+    cardStyle: "card-style-1",
+    customCardStyles: {
+      cardPadding: cardPadding,
+      imgSize: imgSize,
+      cardTitleFontSize: cardTitleFontSize,
+      cardTitleColor: cardTitleColor,
+      contentGap: contentGap,
+      cardBackgroundColor: cardBackgroundColor
+    }
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+Comments.defaultProps = {
+  cardPadding: 10,
+  imgSize: 50,
+  cardTitleFontSize: 12,
+  cardTitleColor: '#353535',
+  cardBackgroundColor: 'white'
+};
+var _default = Comments;
+exports.default = _default;

package/dist/stories/Reusable Components/Sections/Sections.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 _ReusableList = _interopRequireDefault(require("../ReusableList/ReusableList"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["sections"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Sections = function Sections(_ref) {
+  var sections = _ref.sections,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(props.children[0] || props.children),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  console.log('renders');
+
+  var cardClicked = function cardClicked(index, cardProps) {
+    var child = props.children.find(function (child) {
+      return child.props.id === cardProps.id;
+    });
+    setCenter(child);
+    console.log(child);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Left, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    type: "sectioned",
+    data: sections,
+    cardStyle: "card-style-3",
+    cardClicked: cardClicked
+  }, props))), /*#__PURE__*/_react.default.createElement(Center, null, center));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    background-color: #414141;\n    display: flex;\n"])), function (props) {
+  return props.backgroundColor;
+});
+
+var Left = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1;\n"])));
+
+var Center = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 3;\n"])));
+
+Sections.defaultProps = {};
+var _default = Sections;
+exports.default = _default;

package/dist/stories/Spaces/Chat/Chat.js

@@ -0,0 +1,103 @@
+"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 _bs = require("react-icons/bs");
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _RichTextInput = _interopRequireDefault(require("../../Common Inputs/RichTextInput/RichTextInput"));
+
+var _ChatContifgModal = _interopRequireDefault(require("../../Modals/ChatConfigModal/ChatContifgModal"));
+
+var _templateObject;
+
+var _excluded = ["data", "users", "title", "backgroundColor", "community"];
+
+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(_bs.BsGear, null),
+  action: "config",
+  name: "Config"
+}];
+
+var Chat = function Chat(_ref) {
+  var data = _ref.data,
+      users = _ref.users,
+      title = _ref.title,
+      backgroundColor = _ref.backgroundColor,
+      community = _ref.community,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showConfigModal = _useState2[0],
+      setShowConfigModal = _useState2[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case "config":
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem("formStyles");
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: title || "Chat",
+    type: "flat",
+    data: data,
+    cardStyle: "card-style-8",
+    iconClicked: onIconClicked,
+    listControls: listControls
+  }, props)), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    users: users
+  }), /*#__PURE__*/_react.default.createElement(_ChatContifgModal.default, {
+    title: props.title,
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    community: community,
+    data: data,
+    users: users
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor || "transparent";
+});
+
+Chat.defaultProps = {
+  title: "Chat Space"
+};
+var _default = Chat;
+exports.default = _default;

package/dist/stories/Spaces/EventsList/EventsList.js

@@ -0,0 +1,140 @@
+"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 _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _CreateEventModal = _interopRequireDefault(require("../../Modals/CreateEventModal/CreateEventModal"));
+
+var _EventsConfigModal = _interopRequireDefault(require("../../Modals/EventsConfigModal/EventsConfigModal"));
+
+var _templateObject;
+
+var _excluded = ["events", "community", "actions"];
+
+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 Photo'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var EventsList = function EventsList(_ref) {
+  var events = _ref.events,
+      community = _ref.community,
+      actions = _ref.actions,
+      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 _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
+  };
+
+  var cardClicked = function cardClicked(index, props) {
+    if (!props.preview) {
+      props.cardClicked(props);
+    }
+  };
+
+  var onAddFolder = function onAddFolder(event) {
+    setShowModal(false);
+    props.onAddEvent(event);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "My Events",
+    data: events,
+    type: "flat",
+    cardStyle: "card-style-11",
+    listControls: listControls,
+    cardControls: cardControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_CreateEventModal.default, {
+    showModal: showModal,
+    onAddFolder: onAddFolder,
+    closeModal: closeModal,
+    actions: actions
+  }), /*#__PURE__*/_react.default.createElement(_EventsConfigModal.default, {
+    title: props.title,
+    events: events,
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+EventsList.defaultProps = {};
+var _default = EventsList;
+exports.default = _default;

package/dist/stories/Spaces/NotesList/NotesList.js

@@ -0,0 +1,144 @@
+"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 _ai = require("react-icons/ai");
+
+var _bs = require("react-icons/bs");
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _CreateNoteModal = _interopRequireDefault(require("../../Modals/CreateNoteModal/CreateNoteModal"));
+
+var _NotesConfigModal = _interopRequireDefault(require("../../Modals/NotesConfigModal/NotesConfigModal"));
+
+var _templateObject;
+
+var _excluded = ["notes", "iconColor", "cardTitleFontSize", "cardTitleColor", "cardPadding", "community"];
+
+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 Photo'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var Notes = function Notes(_ref) {
+  var notes = _ref.notes,
+      iconColor = _ref.iconColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      cardTitleColor = _ref.cardTitleColor,
+      cardPadding = _ref.cardPadding,
+      community = _ref.community,
+      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 _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var cardClicked = function cardClicked() {
+    console.log('test');
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  var onAddFolder = function onAddFolder(folder) {
+    props.onAddNote(folder);
+    setShowModal(false);
+  };
+
+  var closeModal = function closeModal() {
+    setShowModal(false);
+  };
+
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "My Notes",
+    data: notes,
+    type: "flat",
+    cardStyle: "card-style-11",
+    listControls: listControls,
+    cardControls: cardControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked
+  }, props)), /*#__PURE__*/_react.default.createElement(_CreateNoteModal.default, {
+    showModal: showModal,
+    closeModal: closeModal,
+    onAddFolder: onAddFolder,
+    cancelHandler: cancelHandler,
+    saveBtnText: props.saveBtnText,
+    cancelBtnText: props.cancelBtnText
+  }), /*#__PURE__*/_react.default.createElement(_NotesConfigModal.default, {
+    showConfigModal: showConfigModal,
+    cancelConfig: cancelConfig,
+    notes: notes,
+    community: community
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+Notes.defaultProps = {};
+var _default = Notes;
+exports.default = _default;

package/dist/stories/Spaces/ViewDetailedPhoto/ViewDetailedPhoto.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CardStyle = _interopRequireDefault(require("../../Reusable Components/Cards/Card-style-6/CardStyle6"));
+
+var DetailedPhoto = function DetailedPhoto(props) {
+  return /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+    cardClicked: function cardClicked() {
+      return props.cardClicked();
+    }
+  }, props.img));
+};
+
+DetailedPhoto.defaultProps = {};
+var _default = DetailedPhoto;
+exports.default = _default;