@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.js

@@ -0,0 +1,49 @@
+"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 _Thumbnail = _interopRequireDefault(require("../../../Misc/Thumbnail/Thumbnail"));
+
+var _camera = _interopRequireDefault(require("../../../assets/camera.svg"));
+
+var _templateObject;
+
+var ProfilePhoto = function ProfilePhoto(_ref) {
+  var setFieldValue = _ref.setFieldValue,
+      profilePhoto = _ref.profilePhoto;
+  return /*#__PURE__*/_react.default.createElement(ProfilePhotoWrapper, null, /*#__PURE__*/_react.default.createElement(_Thumbnail.default, {
+    file: profilePhoto,
+    className: "photoThumbnail",
+    type: "thumbnail"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "profilePhoto",
+    className: "photoLabel"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _camera.default,
+    alt: "camera icon"
+  })), /*#__PURE__*/_react.default.createElement("input", {
+    id: "profilePhoto",
+    type: "file",
+    name: "profilePhoto",
+    className: "photoInput",
+    onChange: function onChange(e) {
+      setFieldValue("profilePhoto", e.currentTarget.files[0]);
+    }
+  }));
+};
+
+var ProfilePhotoWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    position: relative;\n    box-sizing: border-box;\n    max-height: 175px;\n    max-width: 175px;\n    .photoThumbnail, .photoLabel {\n        position: absolute;\n        transform: translateX(-50%);\n    }\n    .photoLabel {\n        bottom: 15%;\n        height: 50px;\n        right: -35px;\n        width: 50px;\n        cursor: pointer;\n        border-radius: 50%;\n        background-color: #333536;\n        color: #fff;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        transition: all .3s ease-in-out;\n        &:hover {\n            background-color: rgba(0, 0, 0, 0.9);\n        }\n    }\n    .photoInput {\n        display: none;\n    }\n"])));
+
+var _default = ProfilePhoto;
+exports.default = _default;

package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ProfilePhoto = _interopRequireDefault(require("./ProfilePhoto"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  component: _ProfilePhoto.default,
+  title: 'Components/CreateProfile/Subcomponents/ProfilePhoto',
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ProfilePhoto.default, args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  profilePhoto: null
+};
+Default.parameters = {
+  formik: {
+    initialValues: {
+      profilePhoto: null
+    }
+  },
+  onSubmit: function onSubmit(v) {
+    return console.log(v);
+  }
+};

package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.js

@@ -0,0 +1,41 @@
+"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 _reset = _interopRequireDefault(require("../../../assets/reset.svg"));
+
+var _templateObject;
+
+var ResetBtn = function ResetBtn(_ref) {
+  var setFieldValue = _ref.setFieldValue,
+      value = _ref.value,
+      initValue = _ref.initValue;
+  return /*#__PURE__*/_react.default.createElement(ResetBtnWrapper, {
+    onClick: function onClick() {
+      return setFieldValue(value, initValue);
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _reset.default,
+    alt: "reset icon"
+  }));
+};
+
+var ResetBtnWrapper = _styledComponents.default.button.attrs(function () {
+  return {
+    type: 'button'
+  };
+})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n    border:none;\n    background-color: transparent;\n    outline: none;\n"])));
+
+var _default = ResetBtn;
+exports.default = _default;

package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ResetBtn = _interopRequireDefault(require("./ResetBtn"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  component: _ResetBtn.default,
+  title: 'Components/CreateProfile/Subcomponents/ResetButton',
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ResetBtn.default, args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  initValue: '',
+  value: 'servername'
+};

package/dist/stories/Forms/CreateAlbum/CreateAlbum.js

@@ -0,0 +1,95 @@
+"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 _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 CreateAlbum = function CreateAlbum(_ref) {
+  var _Object$assign;
+
+  var saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    cover: null,
+    title: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Music Album",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Album Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var album = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    album.date = date;
+    props.saveHandler(album);
+  };
+
+  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 Album",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: props.headerStyles,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    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"])));
+
+CreateAlbum.defaultProps = {};
+var _default = CreateAlbum;
+exports.default = _default;

package/dist/stories/Forms/CreateAlbum/CreateAlbum.stories.js

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

package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.js

@@ -0,0 +1,84 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+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 = ["formSchema", "saveBtnText", "cancelBtnText"];
+
+var CreateAnnouncementForm = function CreateAnnouncementForm(_ref) {
+  var formSchema = _ref.formSchema,
+      saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    cover: null,
+    title: '',
+    discription: ''
+  };
+  var sections = [{
+    title: "Announcment Details",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Announcment Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+      label: "Discription",
+      name: "discription"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var announcment = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    announcment.date = date;
+    props.saveHandler(announcment);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: "Create Announcment",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: props.headerStyles,
+    saveBtnText: saveBtnText,
+    cancelBtnText: cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler
+  }, props.formStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+var _default = CreateAnnouncementForm;
+exports.default = _default;

package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.form = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _CreateAnnouncementForm = _interopRequireDefault(require("./CreateAnnouncementForm"));
+
+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 _default = {
+  title: 'forms/Create Announcment',
+  component: _CreateAnnouncementForm.default
+};
+exports.default = _default;
+var formSchema = Yup.object().shape({
+  title: Yup.string().required("Required"),
+  discription: Yup.string().required("Required")
+});
+var formStyles = {
+  headerStyles: {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  },
+  sectionPadding: 10,
+  bodyRowGap: 10
+};
+
+var saveHandler = function saveHandler(announcment) {
+  console.log(announcment);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('Canceled');
+};
+
+var form = function form(args) {
+  return /*#__PURE__*/_react.default.createElement(_CreateAnnouncementForm.default, Object.assign({
+    formSchema: formSchema,
+    saveHandler: saveHandler,
+    cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    formStyles: formStyles
+  }, args));
+};
+
+exports.form = form;

package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.js

@@ -0,0 +1,100 @@
+"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 _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 CreateAlbum = function CreateAlbum(_ref) {
+  var _Object$assign;
+
+  var saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    cover: null,
+    title: '',
+    artist: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required"),
+    artist: Yup.string().required('Album artist is required')
+  });
+  var sections = [{
+    title: "Announcment Details",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      label: "Album Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Artist",
+      name: "artist"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var album = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    album.date = date;
+    props.saveHandler(album);
+  };
+
+  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 Album",
+    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"])));
+
+CreateAlbum.defaultProps = {};
+var _default = CreateAlbum;
+exports.default = _default;

package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.js

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