@mohamed-karawia/library 0.1.15 → 0.1.19

package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js

@@ -61,13 +61,19 @@ var CardStyle6 = function CardStyle6(_ref) {
   })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(CardTitle, props, title), /*#__PURE__*/_react.default.createElement(Count, props, props.count), /*#__PURE__*/_react.default.createElement(Date, null, date)), /*#__PURE__*/_react.default.createElement(Desc, props, description)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
     controls: props.cardControls,
     show: showIcons,
-    onIconClicked: iconCliked
+    onIconClicked: iconCliked,
+    showOnHover: true,
+    position: "center",
+    dropdownFontColor: "white",
+    iconBorderRadius: 100,
+    iconSize: 40,
+    iconsGap: 10
   }, props.controlsStyles)));
 };
 
-var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-direction: column;\n    cursor: pointer;\n    height: 100%;\n"])));
+var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex-direction: column;\n    cursor: pointer;\n    overflow-y: scroll;\n"])));
 
-var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 80%;\n    border-radius: ", ";\n"])), function (props) {
+var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    min-height: 90%;\n    border-radius: ", ";\n"])), function (props) {
   return props.cardRadius + 'px ' + props.cardRadius + 'px ' + '0 0';
 });
 
@@ -86,7 +92,7 @@ var Count = _styledComponents.default.p(_templateObject6 || (_templateObject6 =
 var Date = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    color: #5f5f5f;\n    font-size: 12px;\n"])));
 
 var Desc = (0, _styledComponents.default)(_globalCardStyles.Description)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 2px 20px;\n    color: ", ";\n"])), function (props) {
-  return props.descColor || '#5f5f5f';
+  return props.cardDiscriptionColor;
 });
 CardStyle6.defaultProps = {};
 var _default = CardStyle6;

package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js

@@ -55,7 +55,7 @@ var CardStyle8 = function CardStyle8(_ref) {
     }
   }, props), /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
     src: img
-  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, username), /*#__PURE__*/_react.default.createElement(Date, null, date)), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, text), media && /*#__PURE__*/_react.default.createElement(Media, null, media)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, username), /*#__PURE__*/_react.default.createElement(Date, props, date)), /*#__PURE__*/_react.default.createElement(_globalCardStyles.Description, props, text), media && /*#__PURE__*/_react.default.createElement(Media, null, media)), props.cardControls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
     controls: props.cardControls,
     show: showIcons,
     onIconClicked: iconCliked
@@ -74,7 +74,9 @@ var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_t
 
 var Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    gap: 20px;\n"])));
 
-var Date = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 14px;\n    color: gray;\n"])));
+var Date = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 14px;\n    color: ", ";\n"])), function (props) {
+  return props.dateColor || 'gray';
+});
 
 var Media = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: 300px;\n\n    *{\n        width: 100%;\n    }\n"])));
 

package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _globalCardStyles = require("../globalCardStyles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 var _excluded = ["username", "answered", "img", "status"];
 
@@ -33,19 +33,29 @@ var CardStyle9 = function CardStyle9(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   console.log(props);
 
-  var onAccept = function onAccept() {
-    alert(props.index);
+  var onAction = function onAction(action) {
+    props.iconClicked(action);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Card, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Card, props, /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
+    src: img
+  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(Title, Object.assign({
     onClick: function onClick() {
       return props.cardClicked();
     }
-  }, props), /*#__PURE__*/_react.default.createElement(ImgWrapper, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Img, {
-    src: img
-  })), /*#__PURE__*/_react.default.createElement(Content, props, /*#__PURE__*/_react.default.createElement(_globalCardStyles.Title, props, username), /*#__PURE__*/_react.default.createElement(Answered, null, "Questions Answered: ", answered), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
-    onClick: onAccept
-  }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, null, "Decline"), status === 'pending' && /*#__PURE__*/_react.default.createElement(Review, null, "In Review"))));
+  }, props), username), /*#__PURE__*/_react.default.createElement(Answered, null, "Questions Answered: ", answered), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
+    onClick: function onClick() {
+      return onAction('accept');
+    }
+  }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
+    onClick: function onClick() {
+      return onAction('decline');
+    }
+  }, "Decline"), status === 'pending' && /*#__PURE__*/_react.default.createElement(Review, {
+    onClick: function onClick() {
+      return onAction('review');
+    }
+  }, "In Review"))));
 };
 
 var Card = (0, _styledComponents.default)(_globalCardStyles.MainCard)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    gap: 20px;\n    padding: 10px;\n"])));
@@ -57,15 +67,16 @@ var ImgWrapper = _styledComponents.default.div(_templateObject2 || (_templateObj
 });
 
 var Content = (0, _styledComponents.default)(_globalCardStyles.globalContent)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n"])));
+var Title = (0, _styledComponents.default)(_globalCardStyles.Title)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n"])));
 
-var Answered = _styledComponents.default.h5(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 300;\n"])));
+var Answered = _styledComponents.default.h5(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 300;\n"])));
 
-var Buttons = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 10px;\n"])));
+var Buttons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 10px;\n"])));
 
-var Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 7px 20px;\n    border: none;\n    color: white;\n    cursor: pointer;\n"])));
+var Button = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 7px 20px;\n    border: none;\n    color: white;\n    cursor: pointer;\n"])));
 
-var Accept = (0, _styledComponents.default)(Button)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #69d869;\n"])));
-var Decline = (0, _styledComponents.default)(Button)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #e24848;\n"])));
-var Review = (0, _styledComponents.default)(Button)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #18b8e9;\n"])));
+var Accept = (0, _styledComponents.default)(Button)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #69d869;\n"])));
+var Decline = (0, _styledComponents.default)(Button)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #e24848;\n"])));
+var Review = (0, _styledComponents.default)(Button)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: #18b8e9;\n"])));
 var _default = CardStyle9;
 exports.default = _default;

package/dist/stories/Reusable Components/Cards/globalCardStyles.js

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var MainCard = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n* {\n        margin: 0;\n        padding: 0;\n    }\n    font-family: sans-serif;\n    display: flex;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", ";\n    align-items: center;\n    padding: ", " !important;\n    order: ", ";\n    &:hover {\n        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n        -webkit-filter: ", ";\n        transition: all .2s ease;\n        background-color: ", ";\n    }\n"])), function (props) {
-  return props.cardBackgroundColor || 'white';
+  return props.cardBackgroundColor || 'transparent';
 }, function (props) {
   return props.cardRadius;
 }, function (props) {
@@ -32,12 +32,12 @@ var MainCard = _styledComponents.default.div(_templateObject || (_templateObject
 exports.MainCard = MainCard;
 
 var globalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    gap: ", "px;\n"])), function (props) {
-  return props.contentGap;
+  return props.contentGap || 10;
 });
 
 exports.globalContent = globalContent;
 
-var Title = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n"])), function (props) {
+var Title = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n    cursor: pointer;\n"])), function (props) {
   return props.cardTitleColor || 'black';
 }, function (props) {
   return props.cardTitleFontSize;

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

@@ -0,0 +1,76 @@
+"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 _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 _WidgetContainer = _interopRequireDefault(require("../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styling = _interopRequireDefault(require("../../styling.json"));
+
+var _templateObject;
+
+var _excluded = ["context"];
+
+var Community = function Community(_ref) {
+  var context = _ref.context,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var spaces = [{
+    title: 'Main List',
+    data: [{
+      title: 'Cargo Sprint',
+      path: 'cago'
+    }, {
+      title: 'Movies',
+      path: 'movies'
+    }]
+  }, {
+    title: 'Entertainment',
+    data: [{
+      title: 'Gaming',
+      path: 'games'
+    }, {
+      title: 'Music',
+      path: 'music'
+    }]
+  }];
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, null, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "spaces-list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      spaces: spaces,
+      cardClicked: function cardClicked() {
+        return alert('clicked');
+      },
+      headerStyles: _styling.default.widgetContainer.header,
+      sectionHeaderStyles: _styling.default.widgetContainer.body.sectionHeaderStyles,
+      customCardStyles: _styling.default.widgetContainer.body.customCardStyles
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, props.center), /*#__PURE__*/_react.default.createElement(_Right.default, null, props.right)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: auto;\n    display: flex;\n    min-height: 100vh;\n    flex-direction: column;\n"])));
+
+var _default = Community;
+exports.default = _default;

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

@@ -36,15 +36,21 @@ var Gallery = function Gallery(_ref) {
   var child;
 
   var iconCliked = function iconCliked(action) {
-    props.iconClicked(action);
+    if (!props.preview) {
+      props.iconClicked(action);
+    }
   };
 
   var clicked = function clicked(index, cardProps) {
-    props.cardClicked(index, cardProps);
+    if (!props.preview) {
+      props.cardClicked(index, cardProps);
+    }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var mapOverCardsData = function mapOverCardsData(data) {
@@ -79,7 +85,7 @@ var GalleryContainer = _styledComponents.default.div(_templateObject || (_templa
   return props.galleryWidth + 'px' || '100%';
 });
 
-var GalleryBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    display: ", ";\n    flex-direction: column;\n    grid-template-columns: ", ";\n    grid-auto-rows: ", "px;\n    /* grid-auto-rows: ", "; */\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (props) {
+var GalleryBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    display: ", ";\n    flex-direction: column;\n    grid-template-columns: ", ";\n    grid-auto-rows: ", ";\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (props) {
   return props.galleryBodyPadding;
 }, function (_ref2) {
   var type = _ref2.type;
@@ -87,9 +93,7 @@ var GalleryBody = _styledComponents.default.div(_templateObject2 || (_templateOb
 }, function (props) {
   return 'repeat(' + props.columnsNumber + ', 1fr)';
 }, function (props) {
-  return props.rowsHeight || 400;
-}, function (props) {
-  return props.rowsHeight + 'px' || 'minmax(min-content, 400px)';
+  return props.rowsHeight ? "".concat(props.rowsHeight, "px") : '1fr';
 }, function (props) {
   return props.galleryColumnGap;
 }, function (props) {
@@ -105,16 +109,11 @@ var Section = _styledComponents.default.div(_templateObject3 || (_templateObject
   return props.galleryRowGap;
 });
 
-var SectionBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    display: grid;\n    grid-template-columns: ", ";\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (props) {
-  return props.galleryBodyPadding;
-}, function (props) {
-  return 'repeat(' + props.columnsNumber + ', 1fr)';
-}, function (props) {
-  return props.galleryColumnGap;
-}, function (props) {
-  return props.galleryRowGap;
-});
-
-Gallery.defaultProps = {};
+var SectionBody = (0, _styledComponents.default)(GalleryBody)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n"])));
+Gallery.defaultProps = {
+  columnsNumber: 3,
+  galleryColumnGap: 10,
+  galleryRowGap: 20
+};
 var _default = Gallery;
 exports.default = _default;

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

@@ -31,25 +31,14 @@ var ReactModalComponent = function ReactModalComponent(_ref) {
       closeModal = _ref.closeModal,
       children = _ref.children,
       exitModalButton = _ref.exitModalButton,
-      onOverlayCloseClick = _ref.onOverlayCloseClick;
-  return /*#__PURE__*/_react.default.createElement(ModalContainer, {
+      shouldCloseOnOverlayClick = _ref.shouldCloseOnOverlayClick;
+  return /*#__PURE__*/_react.default.createElement(_reactModal.default, {
     isOpen: modalIsOpen,
-    onRequestClose: closeModal,
-    ariaHideApp: false,
-    contentLabel: title,
-    shouldCloseOnOverlayClick: onOverlayCloseClick === 'true',
-    borderColor: borderColor,
-    boxShadow: boxShadow,
-    backgroundColor: backgroundColor,
-    padding: padding,
-    height: height,
-    width: width,
-    color: color,
-    borderRadius: borderRadius
-  }, children, exitModalButton(closeModal));
+    onRequestClose: closeModal
+  }, children);
 };
 
-var ModalContainer = (0, _styledComponents.default)(_reactModal.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  height: ", ";\n  width: ", ";\n  color: ", ";\n  border-color: ", ";\n  padding: ", "px;\n"])), function (_ref2) {
+var ModalContainer = (0, _styledComponents.default)(_reactModal.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  color: ", ";\n  border-color: ", ";\n  padding: ", "px;\n"])), function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
   return backgroundColor;
 }, function (_ref3) {
@@ -59,25 +48,17 @@ var ModalContainer = (0, _styledComponents.default)(_reactModal.default)(_templa
   var boxShadow = _ref4.boxShadow;
   return boxShadow;
 }, function (_ref5) {
-  var height = _ref5.height;
-  return height;
-}, function (_ref6) {
-  var width = _ref6.width;
-  return width;
-}, function (_ref7) {
-  var color = _ref7.color;
+  var color = _ref5.color;
   return color;
-}, function (_ref8) {
-  var borderColor = _ref8.borderColor;
+}, function (_ref6) {
+  var borderColor = _ref6.borderColor;
   return borderColor;
-}, function (_ref9) {
-  var padding = _ref9.padding;
+}, function (_ref7) {
+  var padding = _ref7.padding;
   return padding;
 });
 ReactModalComponent.defaultProps = {
-  title: "",
-  height: "80vh",
-  width: "50vw"
+  title: ""
 };
 var _default = ReactModalComponent;
 exports.default = _default;

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 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"));
 
@@ -25,12 +25,29 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 var _excluded = ["formTitle", "sections", "initialValues"];
 
+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 ReusableForm = function ReusableForm(_ref) {
   var formTitle = _ref.formTitle,
       sections = _ref.sections,
       initialValues = _ref.initialValues,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
+  var AutoSubmitToken = function AutoSubmitToken() {
+    var _useFormikContext = (0, _formik.useFormikContext)(),
+        values = _useFormikContext.values,
+        submitForm = _useFormikContext.submitForm;
+
+    (0, _react.useEffect)(function () {
+      if (props.handleChange) {
+        props.handleChange(values);
+      }
+    }, [values, submitForm]);
+    return null;
+  };
+
   var submitHandler = function submitHandler(values) {
     props.saveHandler(values);
   };
@@ -69,11 +86,11 @@ var ReusableForm = function ReusableForm(_ref) {
     size: "md",
     variant: "secondary",
     buttonClicked: handleCancel
-  }))));
+  })), /*#__PURE__*/_react.default.createElement(AutoSubmitToken, null)));
 };
 
 var CreateForm = (0, _styledComponents.default)(_formik.Form)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n\n"])), function (props) {
-  return props.formBackgroundColor || 'white';
+  return props.formBackgroundColor || 'transparent';
 });
 
 var FormSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n"])), function (props) {

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

@@ -17,13 +17,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _util = require("../../helpers/util");
 
-var _CardStyle = _interopRequireDefault(require("../Cards/Card-style-3/CardStyle3"));
-
 var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls"];
+var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls", "headerStyles", "sectionHeaderStyles"];
 
 var ReusableList = function ReusableList(_ref) {
   var data = _ref.data,
@@ -32,19 +30,27 @@ var ReusableList = function ReusableList(_ref) {
       type = _ref.type,
       _ref$cardControls = _ref.cardControls,
       cardControls = _ref$cardControls === void 0 ? null : _ref$cardControls,
+      headerStyles = _ref.headerStyles,
+      sectionHeaderStyles = _ref.sectionHeaderStyles,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var child;
 
   var iconCliked = function iconCliked(action) {
-    props.iconClicked(action);
+    if (props.iconClicked) {
+      props.iconClicked(action);
+    }
   };
 
   var clicked = function clicked(index, cardProps) {
-    props.cardClicked(index, cardProps);
+    if (props.cardClicked) {
+      props.cardClicked(index, cardProps);
+    }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (props.cardIconClicked) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var mapOverCardsData = function mapOverCardsData(data) {
@@ -59,9 +65,9 @@ var ReusableList = function ReusableList(_ref) {
     child = data.map(function (section) {
       return /*#__PURE__*/_react.default.createElement(Section, {
         priority: section.priority
-      }, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+      }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
         title: section.title
-      }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
+      }, sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
     });
   }
 
@@ -69,7 +75,7 @@ var ReusableList = function ReusableList(_ref) {
     title: props.listTitle,
     controls: props.listControls,
     iconClicked: iconCliked
-  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
+  }, headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
 };
 
 var List = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n    width: ", ";\n    padding: 0;\n    > * {\n        padding: 0;\n        margin: 0;\n    }\n"])), function (props) {

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

@@ -0,0 +1,68 @@
+"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 _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["title", "tabs"];
+
+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 Tabs = function Tabs(_ref) {
+  var title = _ref.title,
+      tabs = _ref.tabs,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(props.children[0]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      child = _useState2[0],
+      setChild = _useState2[1];
+
+  var tabClicked = function tabClicked(tab) {
+    var renderedComponent = props.children.find(function (child) {
+      return child.props.id === tab.id;
+    });
+    setChild(renderedComponent);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(TabsContainer, null, /*#__PURE__*/_react.default.createElement(Menu, null, tabs.map(function (tab) {
+    return /*#__PURE__*/_react.default.createElement(Tab, {
+      onClick: function onClick() {
+        return tabClicked(tab);
+      }
+    }, tab.title);
+  })), child));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n"])));
+
+var TabsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));
+
+var Menu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    background-color: white;\n"])));
+
+var Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 5px 8px;\n    cursor: pointer;\n    background-color: white;\n    border: 1px solid gray;\n    color: #414141;\n    transition: all .3s;\n    &:hover {\n        background-color: #414141;\n        color: white;\n    }\n"])));
+
+Tabs.defaultProps = {};
+var _default = Tabs;
+exports.default = _default;

package/dist/stories/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("../Reusable Components/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;