@mohamed-karawia/library 0.1.0

package/dist/stories/Events/CreateEvent/CreateEvent.js

@@ -0,0 +1,110 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _DatePicker = _interopRequireDefault(require("../../Common Inputs/DatePicker/DatePicker"));
+
+var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
+
+var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
+
+var _templateObject;
+
+var _excluded = ["saveBtnText", "cancelBtnText"];
+
+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 CreateEvent = function CreateEvent(_ref) {
+  var _Object$assign;
+
+  var saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    cover: null,
+    name: '',
+    disc: '',
+    date: {
+      startDate: null,
+      endDate: null
+    }
+  };
+  var formSchema = Yup.object().shape({
+    name: Yup.string().required("Required"),
+    disc: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Create Event",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "name"
+    }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+      label: "Discription",
+      name: "disc"
+    }), /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+      label: "Date Range",
+      name: "date"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var event = {
+      title: values.name,
+      date: "".concat(values.date.startDate._d.toISOString().split('T')[0], " : ").concat(values.date.endDate._d.toISOString().split('T')[0])
+    };
+    props.saveHandler(event);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign((_Object$assign = {
+    formTitle: "Create Event",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: props.headerStyles,
+    saveBtnText: saveBtnText,
+    cancelBtnText: cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler
+  }, (0, _defineProperty2.default)(_Object$assign, "headerStyles", {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  }), (0, _defineProperty2.default)(_Object$assign, "sectionPadding", 10), (0, _defineProperty2.default)(_Object$assign, "bodyRowGap", 10), _Object$assign), props.formStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+CreateEvent.defaultProps = {};
+var _default = CreateEvent;
+exports.default = _default;

package/dist/stories/Events/CreateEvent/CreateEvent.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = exports.default = void 0;
+
+var _CreateEvent = _interopRequireDefault(require("./CreateEvent"));
+
+var _default = {
+  title: 'Events/Create Event',
+  component: _CreateEvent.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_CreateEvent.default, args);
+};
+
+var Form = Template.bind({});
+exports.Form = Form;
+Form.args = {
+  // saveHandler: saveHandler,
+  // cancelHandler: cancelHandler,
+  saveBtnText: "Create",
+  cancelBtnText: "Cancel" // formStyles: formStyles,
+
+};

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableHeader = _interopRequireDefault(require("../../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+var Event = function Event(_ref) {
+  var cover = _ref.cover,
+      title = _ref.title,
+      date = _ref.date,
+      disc = _ref.disc,
+      backgroundColor = _ref.backgroundColor,
+      titleColor = _ref.titleColor,
+      titleSize = _ref.titleSize,
+      dateColor = _ref.dateColor,
+      dateSize = _ref.dateSize,
+      headerBackground = _ref.headerBackground,
+      headerTitleColor = _ref.headerTitleColor,
+      discColor = _ref.discColor,
+      discSize = _ref.discSize;
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
+    title: "Event",
+    padding: 10,
+    headerBackground: headerBackground,
+    titleColor: headerTitleColor
+  }), /*#__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, {
+    size: titleSize,
+    color: titleColor
+  }, title), /*#__PURE__*/_react.default.createElement(Date, {
+    color: dateColor,
+    size: dateSize
+  }, date)), /*#__PURE__*/_react.default.createElement(Disc, {
+    discColor: discColor,
+    discSize: discSize
+  }, disc)));
+};
+
+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;
+});
+
+var CoverWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 300px;\n"])));
+
+var Cover = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n"])));
+
+var Details = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 10px;\n"])));
+
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n"])));
+
+var Title = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 100;\n    color: ", ";\n    font-size: ", "px;\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size;
+});
+
+var Date = _styledComponents.default.h5(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    font-weight: 100;\n    color: ", ";\n    font-size: ", "px;\n"])), function (_ref5) {
+  var color = _ref5.color;
+  return color;
+}, function (_ref6) {
+  var size = _ref6.size;
+  return size;
+});
+
+var Disc = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n"])), function (_ref7) {
+  var discColor = _ref7.discColor;
+  return discColor;
+}, function (_ref8) {
+  var discSize = _ref8.discSize;
+  return discSize;
+});
+
+Event.defaultProps = {};
+var _default = Event;
+exports.default = _default;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Detailed = exports.default = void 0;
+
+var _Event = _interopRequireDefault(require("./Event"));
+
+var _default = {
+  title: 'Events/Detailed Event',
+  component: _Event.default
+};
+exports.default = _default;
+
+var Detailed = function Detailed(args) {
+  return /*#__PURE__*/React.createElement(_Event.default, Object.assign({
+    cover: "https://lh3.googleusercontent.com/proxy/CPYbedfVXH1yUpEF4dAQoqrLVpc8f_e4y11lx7InsxCU21OtHOfv7iHVcYIDD_gp89pnLCt81KBtdORJtSXxykoo-OxBNaQBBU-P",
+    title: "ACDC Concert",
+    date: "15/11/1976 : 16/11/1976",
+    disc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro.",
+    backgroundColor: "black",
+    headerBackground: "black",
+    headerTitleColor: "white",
+    titleColor: "white",
+    discColor: "white",
+    dateColor: "white"
+  }, args));
+};
+
+exports.Detailed = Detailed;

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

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ai = require("react-icons/ai");
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _CreateEvent = _interopRequireDefault(require("../CreateEvent/CreateEvent"));
+
+var _templateObject;
+
+var _excluded = ["events", "iconColor", "cardTitleFontSize", "cardTitleColor", "cardPadding"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var listControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+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),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var onIconClicked = function onIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var cardClicked = function cardClicked() {
+    console.log('test');
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  var onAddFolder = function onAddFolder(event) {
+    setShowModal(false);
+    props.onAddEvent(event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    listTitle: "My Events",
+    data: events,
+    type: "flat",
+    cardStyle: "card-style-11",
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      iconColor: iconColor,
+      cardTitleFontSize: cardTitleFontSize,
+      cardTitleColor: cardTitleColor,
+      cardPadding: cardPadding,
+      controlsStyles: {
+        iconColor: '#FE1744'
+      }
+    },
+    listControls: listControls,
+    cardControls: cardControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked
+  }), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showModal,
+    closeModal: function closeModal() {
+      return setShowModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CreateEvent.default, {
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    saveHandler: onAddFolder,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+EventsList.defaultProps = {};
+var _default = EventsList;
+exports.default = _default;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.default = void 0;
+
+var _EventsList = _interopRequireDefault(require("./EventsList"));
+
+var _default = {
+  title: 'Events/Events List',
+  component: _EventsList.default
+};
+exports.default = _default;
+var events = [{
+  title: 'Event one',
+  date: '15/11/2020 : 5/8/2021'
+}, {
+  title: 'Event two',
+  date: '14/12/2020 : 14/4/2023'
+}, {
+  title: 'Event three',
+  date: '5/6/2021 : 5/8/2021'
+}, {
+  title: 'Event four',
+  date: '14/4/2023'
+}, {
+  title: 'Event five',
+  date: '5/6/2021 : 14/4/2023'
+}];
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_EventsList.default, args);
+};
+
+var List = Template.bind({});
+exports.List = List;
+List.args = {
+  events: events,
+  iconColor: '#FE1744',
+  cardTitleFontSize: 15
+};

package/dist/stories/Forms/AddPhoto/AddPhoto.js

@@ -0,0 +1,101 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
+
+var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
+
+var _templateObject;
+
+var _excluded = ["saveBtnText", "cancelBtnText"];
+
+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 AddPhoto = function AddPhoto(_ref) {
+  var _Object$assign;
+
+  var saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    img: null,
+    title: '',
+    description: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Upload Photo",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Image",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+      label: "Description",
+      name: "description"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var photo = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    photo.date = date.toISOString().split('T')[0];
+    props.saveHandler(photo);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign((_Object$assign = {
+    formTitle: "Add Photo",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: props.headerStyles,
+    saveBtnText: saveBtnText,
+    cancelBtnText: cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler
+  }, (0, _defineProperty2.default)(_Object$assign, "headerStyles", {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  }), (0, _defineProperty2.default)(_Object$assign, "sectionPadding", 10), (0, _defineProperty2.default)(_Object$assign, "bodyRowGap", 10), _Object$assign), props.formStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+AddPhoto.defaultProps = {};
+var _default = AddPhoto;
+exports.default = _default;

package/dist/stories/Forms/AddPhoto/AddPhoto.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Photo = exports.default = void 0;
+
+var _AddPhoto = _interopRequireDefault(require("./AddPhoto"));
+
+var _default = {
+  title: 'forms/Add Photo',
+  component: _AddPhoto.default
+};
+exports.default = _default;
+var formStyles = {
+  headerStyles: {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  },
+  sectionPadding: 10,
+  bodyRowGap: 10
+};
+
+var saveHandler = function saveHandler(photo) {
+  console.log(photo);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('Canceled');
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_AddPhoto.default, args);
+};
+
+var Photo = Template.bind({});
+exports.Photo = Photo;
+Photo.args = {
+  saveHandler: saveHandler,
+  cancelHandler: cancelHandler,
+  saveBtnText: "Create",
+  cancelBtnText: "Cancel",
+  formStyles: formStyles
+};