@mohamed-karawia/library 0.1.18 → 0.1.19

package/dist/stories/Chat/Chat.js

@@ -9,36 +9,153 @@ 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 = _interopRequireDefault(require("react"));
+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 _ChatPreview = _interopRequireDefault(require("../PreviewComponents/ChatPreview/ChatPreview"));
+
+var _ReactModal = _interopRequireDefault(require("../Reusable Components/ReactModal/ReactModal"));
+
+var _Community = _interopRequireDefault(require("../Reusable Components/Community/Community"));
+
+var _Tabs = _interopRequireDefault(require("../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../Sections/Sections"));
+
 var _templateObject;
 
 var _excluded = ["data", "users", "title", "backgroundColor"];
 
+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,
       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(Chat, {
+    users: users,
+    data: data
+  })),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      centerContext = _useState4[0],
+      setCenterContext = _useState4[1];
+
+  var formChanged = function formChanged(values) {
+    console.log('context changed');
+    setCenterContext( /*#__PURE__*/_react.default.createElement(Chat, Object.assign({
+      users: users,
+      data: data
+    }, 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(_ReusableList.default, Object.assign({
     listTitle: title || 'Chat',
     type: "flat",
     data: data,
-    cardStyle: "card-style-8"
+    cardStyle: "card-style-8",
+    iconClicked: onIconClicked,
+    listControls: listControls
   }, props)), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
     users: users
-  }));
+  }), /*#__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(_Sections.default, {
+    sections: sections,
+    backgroundColor: 'white',
+    sectionHeaderStyles: {
+      titleColor: 'white',
+      headerBackground: 'transparent'
+    },
+    customCardStyles: {
+      cardPadding: 6,
+      cardTitleFontSize: 15,
+      cardBackgroundColor: '#2c2c2c',
+      cardTitleColor: 'white',
+      onHoverBackgroundColor: '#555555',
+      controlsStyles: {
+        showOnHover: true
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Chat Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_ChatPreview.default, {
+    componentProps: {
+      data: data,
+      users: users,
+      title: props.title || "Chat",
+      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    background-color: ", ";\n"])), function (_ref2) {

package/dist/stories/Common Inputs/Picker/Picker.js

@@ -0,0 +1,61 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _formik = require("formik");
+
+var _reactColor = require("react-color");
+
+var _templateObject, _templateObject2;
+
+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 Picker = function Picker(props) {
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 3),
+      field = _useField2[0],
+      meta = _useField2[1],
+      helpers = _useField2[2];
+
+  {
+    return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+      htmlFor: props.name
+    }, props), props.label), /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+      name: props.name,
+      color: field.value,
+      onChange: function onChange(color) {
+        return helpers.setValue(color.hex);
+      },
+      onChangeComplete: function onChangeComplete(color) {
+        return helpers.setValue(color.hex);
+      }
+    }));
+  }
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n"])));
+
+var Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 5px;\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.labelColor;
+}, function (props) {
+  return props.labelFontSize;
+});
+
+Picker.defaultProps = {};
+var _default = Picker;
+exports.default = _default;

package/dist/stories/Common Inputs/TextField/TextField.js

@@ -27,7 +27,9 @@ var TextField = function TextField(props) {
 
   return /*#__PURE__*/_react.default.createElement(TextFieldWrapper, null, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
     htmlFor: field.name
-  }, props), props.label), /*#__PURE__*/_react.default.createElement(Input, Object.assign({}, field, props)), meta.error && meta.touched && /*#__PURE__*/_react.default.createElement(Error, null, meta.error));
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(Input, Object.assign({
+    type: props.type || 'text'
+  }, field, props)), meta.error && meta.touched && /*#__PURE__*/_react.default.createElement(Error, null, meta.error));
 };
 
 var TextFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n"])));

package/dist/stories/Community/Community.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRedux = require("react-redux");
+
+var _store = require("../store/store");
+
+var _Navbar = _interopRequireDefault(require("../Navbar/Navbar"));
+
+var _Body = _interopRequireDefault(require("../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../Layout/Right/Right"));
+
+var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
+
+var _WidgetContainer = _interopRequireDefault(require("../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Chat = _interopRequireDefault(require("../Chat/Chat"));
+
+var _Event = _interopRequireDefault(require("../Events/Event/Event"));
+
+var _EventsList = _interopRequireDefault(require("../Events/EventsList/EventsList"));
+
+var _Folders = _interopRequireDefault(require("../Library/Folders/Folders"));
+
+var _Notes = _interopRequireDefault(require("../Library/Notes/Notes"));
+
+var _ViewAlbum = _interopRequireDefault(require("../Music Album/ViewAlbum/ViewAlbum"));
+
+var _ViewAlbums = _interopRequireDefault(require("../Music Album/ViewAlbums/ViewAlbums"));
+
+var _ViewAlbum2 = _interopRequireDefault(require("../Photo Album/ViewAlbum/ViewAlbum"));
+
+var _ViewAlbums2 = _interopRequireDefault(require("../Photo Album/ViewAlbums/ViewAlbums"));
+
+var _AlbumsGallery = _interopRequireDefault(require("../VideoAlbum/AlbumsGallery/AlbumsGallery"));
+
+var _ViewAlbum3 = _interopRequireDefault(require("../VideoAlbum/ViewAlbum/ViewAlbum"));
+
+var _VideoSpace = _interopRequireDefault(require("../VideoAlbum/VideoSpace/VideoSpace"));
+
+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 Community = function Community(props) {
+  var _useState = (0, _react.useState)('chat'),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      spaceType = _useState2[0],
+      setSpaceType = _useState2[1];
+
+  var community = (0, _reactRedux.useSelector)(function (state) {
+    return state.communities;
+  });
+  var space = (0, _reactRedux.useSelector)(function (state) {
+    return state.communities.spaces.find(function (x) {
+      return x.spaceType === spaceType;
+    });
+  });
+  var spacesWidget = (0, _reactRedux.useSelector)(function (state) {
+    return state.communities.spacesListWidget.widgetSpacesList;
+  });
+  var dispatch = (0, _reactRedux.useDispatch)();
+
+  var onAddEvent = function onAddEvent(event) {
+    dispatch((0, _store.addEvent)(event));
+  };
+
+  console.log(space);
+
+  var eventIconClicked = function eventIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        dispatch((0, _store.deleteEvent)(index));
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var switchSpace = function switchSpace(index, props) {
+    setSpaceType(props.id);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, community.styles, /*#__PURE__*/_react.default.createElement(_Navbar.default, community.navbarStyles), /*#__PURE__*/_react.default.createElement(_Body.default, null, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "spaces-list",
+    widgetProps: (0, _objectSpread2.default)({
+      listTitle: spacesWidget.listTitle,
+      spaces: spacesWidget.spaces,
+      cardClicked: switchSpace,
+      headerStyles: spacesWidget.styles.header
+    }, spacesWidget.styles.body)
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, {
+    'chat': /*#__PURE__*/_react.default.createElement(_Chat.default, Object.assign({}, space.spaceProps, space.styles)),
+    'event': /*#__PURE__*/_react.default.createElement(_Event.default, Object.assign({}, space.spaceProps, space.styles)),
+    'events_list': /*#__PURE__*/_react.default.createElement(_EventsList.default, Object.assign({
+      cardIconClicked: eventIconClicked,
+      onAddEvent: onAddEvent
+    }, space.spaceProps, space.styles)),
+    'folders': /*#__PURE__*/_react.default.createElement(_Folders.default, Object.assign({}, space.spaceProps, space.styles)),
+    'notes': /*#__PURE__*/_react.default.createElement(_Notes.default, Object.assign({}, space.spaceProps, space.styles)),
+    'music_album': /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, Object.assign({}, space.spaceProps, space.styles)),
+    'music_albums': /*#__PURE__*/_react.default.createElement(_ViewAlbums.default, Object.assign({}, space.spaceProps, space.styles)),
+    'photo_album': /*#__PURE__*/_react.default.createElement(_ViewAlbum2.default, Object.assign({}, space.spaceProps, space.styles)),
+    'photo_albums': /*#__PURE__*/_react.default.createElement(_ViewAlbums2.default, Object.assign({}, space.spaceProps, space.styles)),
+    'video_albums': /*#__PURE__*/_react.default.createElement(_AlbumsGallery.default, Object.assign({}, space.spaceProps, space.styles)),
+    'video_album': /*#__PURE__*/_react.default.createElement(_ViewAlbum3.default, Object.assign({}, space.spaceProps, space.styles)),
+    'video_space': /*#__PURE__*/_react.default.createElement(_VideoSpace.default, Object.assign({}, space.spaceProps, space.styles))
+  }[spaceType]), /*#__PURE__*/_react.default.createElement(_Right.default, null, space.widgets && space.widgets.map(function (widget) {
+    return /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+      widgetType: widget.widgetType,
+      widgetProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, widget.widgetProps), widget.styles)
+    });
+  }))));
+};
+
+var _default = Community;
+exports.default = _default;

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,7 +133,31 @@ 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) {

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() {
@@ -108,7 +165,29 @@ var EventsList = function EventsList(_ref) {
     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"])));