@mohamed-karawia/library 0.1.17 → 0.1.21

package/dist/stories/Chat/Chat.js

@@ -9,43 +9,158 @@ 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 _fakeData = require("../Reusable Components/fakeData");
-
-var _ReusableHeader = _interopRequireDefault(require("../Reusable Components/ReusableHeader/ReusableHeader"));
+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", "title", "cardBackgroundColor", "textColor", "users"];
+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,
-      title = _ref.title,
-      cardBackgroundColor = _ref.cardBackgroundColor,
-      textColor = _ref.textColor,
       users = _ref.users,
+      title = _ref.title,
+      backgroundColor = _ref.backgroundColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: title,
+
+  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    background-color: ", ";\n    width: 100%;\n    padding: 15px 0;\n"])), function (cardBackgroundColor) {
-  return cardBackgroundColor;
+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 = {

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/Enrollment/Admin/DetailedForm/DetailedForm.js

@@ -30,25 +30,21 @@ var DetailedForm = function DetailedForm(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var onAccept = function onAccept() {
-    alert('Form Accepted');
+    props.onAccept();
   };
 
   var onDecline = function onDecline() {
-    alert('Form Declined');
+    props.onDecline();
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
     title: userName,
-    img: userImg,
-    cardImageRadius: "100"
-  })), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "Form",
+    img: userImg
+  }, props.userHeaderStyles))), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "Form",
     data: questions,
     type: "flat",
-    cardStyle: "card-style-3",
-    customCardStyles: {
-      cardPadding: 10
-    }
+    cardStyle: "card-style-3"
   }, props)), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
     onClick: onAccept
   }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
@@ -56,7 +52,9 @@ var DetailedForm = function DetailedForm(_ref) {
   }, "Decline")));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: white;\n    padding: 10px 0;\n    width: 100%;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    padding: 10px 0;\n    width: 100%;\n"])), function (props) {
+  return props.backgroundColor || 'transparent';
+});
 
 var User = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
 

package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js

@@ -19,7 +19,7 @@ var ViewForms = function ViewForms(_ref) {
   var data = _ref.data,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "Submitted Forms",
+    listTitle: props.title || "Submitted Forms",
     data: data,
     cardStyle: "card-style-9",
     type: "sectioned"

package/dist/stories/Enrollment/Guest/FillForm/FillForm.js

@@ -25,13 +25,6 @@ var FillForm = function FillForm(_ref) {
   var sections = _ref.sections,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  // const initialValues = {
-  //     question0: '',
-  //     question1: '',
-  //     question2: '',
-  //     question3: '',
-  //     question4: '',
-  // }
   var onCreate = function onCreate(values) {
     console.log(values);
   };
@@ -40,21 +33,15 @@ var FillForm = function FillForm(_ref) {
     console.log('Canceled');
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default // initialValues={initialValues}
-  , {
-    formTitle: "Join Community Form",
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: props.formTitle || 'Join Community Form',
     sections: sections,
     saveBtnText: props.saveBtnText,
     cancelBtnText: props.cancelBtnText,
     saveHandler: onCreate,
     cancelHandler: cancelHandler,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff'
-    },
-    bodyRowGap: 10
-  }));
+    bodyRowGap: props.bodyRowGap || 10
+  }, props)));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));

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

@@ -9,14 +9,45 @@ 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 _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; }
+
+// import styles from '../../styling.json'
+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 +60,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 +132,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"])));