@mohamed-karawia/library 0.1.15 → 0.1.19

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

@@ -9,14 +9,46 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+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 _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
 
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _EventPreview = _interopRequireDefault(require("../../PreviewComponents/EventPreview/EventPreview"));
+
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
+var _styling = _interopRequireDefault(require("../../styling.json"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
+var _excluded = ["cover", "title", "date", "disc", "backgroundColor", "titleColor", "titleSize", "dateColor", "dateSize", "discColor", "discSize", "headerStyles"];
+
+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 Event = function Event(_ref) {
   var cover = _ref.cover,
       title = _ref.title,
@@ -29,11 +61,67 @@ var Event = function Event(_ref) {
       dateSize = _ref.dateSize,
       discColor = _ref.discColor,
       discSize = _ref.discSize,
-      headerStyles = _ref.headerStyles;
+      headerStyles = _ref.headerStyles,
+      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 _useState3 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(Event, {
+    title: title,
+    cover: cover,
+    date: date,
+    disc: disc
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      centerContext = _useState4[0],
+      setCenterContext = _useState4[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(Event, Object.assign({
+      title: title,
+      cover: cover,
+      date: date,
+      disc: disc
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      id: 'styling'
+    }]
+  }];
+
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
-    title: title
+    title: title,
+    controls: listControls,
+    iconClicked: onIconClicked
   }, headerStyles)), /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Cover, {
     src: cover
   })), /*#__PURE__*/_react.default.createElement(Details, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(Title, {
@@ -45,12 +133,36 @@ var Event = function Event(_ref) {
   }, date)), /*#__PURE__*/_react.default.createElement(Disc, {
     discColor: discColor,
     discSize: discSize
-  }, disc)));
+  }, disc)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Event Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_EventPreview.default, {
+    componentProps: {
+      cover: cover,
+      title: title,
+      date: date,
+      disc: disc,
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  return backgroundColor || 'transparent';
 });
 
 var CoverWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 300px;\n"])));

package/dist/stories/Events/EventsList/EventsList.js

@@ -19,15 +19,29 @@ 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 _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
 
 var _CreateEvent = _interopRequireDefault(require("../CreateEvent/CreateEvent"));
 
+var _EventsPreview = _interopRequireDefault(require("../../PreviewComponents/EventsPreview/EventsPreview"));
+
+var _EventsList = require("./EventsList.stories");
+
+var _Events = require("../../Pages/Events/Events/Events.stories");
+
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _templateObject;
 
-var _excluded = ["events", "iconColor", "cardTitleFontSize", "cardTitleColor", "cardPadding"];
+var _excluded = ["events"];
 
 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); }
 
@@ -37,6 +51,10 @@ 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),
@@ -46,10 +64,6 @@ var cardControls = [{
 
 var EventsList = function EventsList(_ref) {
   var events = _ref.events,
-      iconColor = _ref.iconColor,
-      cardTitleFontSize = _ref.cardTitleFontSize,
-      cardTitleColor = _ref.cardTitleColor,
-      cardPadding = _ref.cardPadding,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -57,23 +71,66 @@ var EventsList = function EventsList(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(EventsList, {
+    events: events
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(EventsList, Object.assign({
+      events: events
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      id: 'styling'
+    }]
+  }];
 
-      default:
-        break;
+  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);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
-  var cardClicked = function cardClicked() {
-    console.log('test');
+  var cardClicked = function cardClicked(index, props) {
+    if (!props.preview) {
+      props.cardClicked(props);
+    }
   };
 
   var cancelHandler = function cancelHandler() {
@@ -86,7 +143,7 @@ var EventsList = function EventsList(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Events",
+    listTitle: props.title || "My Events",
     data: events,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,11 +161,33 @@ var EventsList = function EventsList(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateEvent.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || 'Create',
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Event Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_EventsPreview.default, {
+    componentProps: {
+      events: events,
+      title: props.title || "My Events",
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));

package/dist/stories/Forms/CreateSpace/CreateSpace.js

@@ -0,0 +1,75 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _templateObject;
+
+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 CreateSpace = function CreateSpace(props) {
+  var initialValues = {
+    title: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Space Details",
+    body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    })],
+    hideTitle: false
+  }];
+
+  var onCreate = function onCreate(values) {
+    props.saveHandler(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: props.title || "Create Space",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    saveBtnText: props.saveBtnText || 'Create',
+    cancelBtnText: props.cancelBtnText || 'Cancel',
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+  }, props.formStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+CreateSpace.defaultProps = {};
+var _default = CreateSpace;
+exports.default = _default;

package/dist/stories/Library/Folders/Folders.js

@@ -19,12 +19,26 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
 
 var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
 
 var _CreateFolder = _interopRequireDefault(require("../CreateFolder/CreateFolder"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _FoldersPreview = _interopRequireDefault(require("../../PreviewComponents/FoldersPreview/FoldersPreview"));
+
+var _Library = require("../../Pages/Library/Folders/Library.stories");
+
+var _Folders = require("./Folders.stories");
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _templateObject;
 
 var _excluded = ["folders", "folderTitle", "columnsNumber", "columnGap", "rowGap", "cardClicked", "iconColor"];
@@ -37,6 +51,10 @@ var galleryControls = [{
   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),
@@ -59,12 +77,52 @@ var Folders = function Folders(_ref) {
       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 _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(Folders, {
+    folders: folders
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(Folders, Object.assign({
+      folders: folders
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+        title: "Folders Config",
+        tabs: tabs
+      })
+    }]
+  }];
+
   var onIconClicked = function onIconClicked(action) {
     switch (action) {
       case 'add':
         setShowModal(true);
         break;
 
+      case 'config':
+        setShowConfigModal(true);
+        break;
+
       default:
         break;
     }
@@ -83,15 +141,11 @@ var Folders = function Folders(_ref) {
     setShowModal(false);
   };
 
-  console.log(props);
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Your Folders",
+    galleryTitle: props.title || "Your Folders",
     data: folders,
     type: "flat",
     cardStyle: "card-style-10",
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
@@ -111,10 +165,31 @@ var Folders = function Folders(_ref) {
     cancelBtnText: "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Event Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_FoldersPreview.default, {
+    componentProps: {
+      folders: folders,
+      title: props.title || "Your Folders"
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: transparent;\n"])));
 
 Folders.defaultProps = {};
 var _default = Folders;

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

@@ -19,12 +19,22 @@ 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 _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
 
 var _CreateFolder = _interopRequireDefault(require("../CreateFolder/CreateFolder"));
 
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _NotesPreview = _interopRequireDefault(require("../../PreviewComponents/NotesPreview/NotesPreview"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _templateObject;
 
 var _excluded = ["notes", "iconColor", "cardTitleFontSize", "cardTitleColor", "cardPadding"];
@@ -37,6 +47,10 @@ 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),
@@ -57,12 +71,52 @@ var Notes = function Notes(_ref) {
       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 _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(Notes, {
+    notes: notes
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(Notes, Object.assign({
+      notes: notes
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+  var sections = [{
+    title: 'Styles',
+    data: [{
+      title: 'Styling',
+      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+        title: "Notes Config",
+        tabs: tabs
+      })
+    }]
+  }];
+
   var onIconClicked = function onIconClicked(action) {
     switch (action) {
       case 'add':
         setShowModal(true);
         break;
 
+      case 'config':
+        setShowConfigModal(true);
+        break;
+
       default:
         break;
     }
@@ -86,7 +140,7 @@ var Notes = function Notes(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Notes",
+    listTitle: props.title || "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,11 +158,31 @@ var Notes = function Notes(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateFolder.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Event Config",
+    tabs: tabs
+  }, /*#__PURE__*/_react.default.createElement(_NotesPreview.default, {
+    componentProps: {
+      notes: notes,
+      title: props.title || "Your Notes"
+    },
+    formChanged: formChanged
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));