@mohamed-karawia/library 0.1.0

package/dist/stories/Forms/AddSong/AddSong.js

@@ -0,0 +1,98 @@
+"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 _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;
+
+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 AddSong = function AddSong(props) {
+  var initialValues = {
+    song: null,
+    cover: null,
+    title: '',
+    artist: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required"),
+    artist: Yup.string().required('Required')
+  });
+  var sections = [{
+    title: "Announcment Details",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      fileType: "audio/*",
+      inputContent: "Insert Song",
+      label: "Upload Song",
+      name: "song"
+    }), /*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      inputContent: "Song Cover",
+      label: "Upload 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({
+    formTitle: "Create Album",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    saveBtnText: props.saveBtnText,
+    cancelBtnText: props.cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+  }, props.formStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+AddSong.defaultProps = {};
+var _default = AddSong;
+exports.default = _default;

package/dist/stories/Forms/AddSong/AddSong.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Song = exports.default = void 0;
+
+var _AddSong = _interopRequireDefault(require("./AddSong"));
+
+var _default = {
+  title: 'Music Albums/Add Song',
+  component: _AddSong.default
+};
+exports.default = _default;
+
+var onAddSong = function onAddSong(song) {
+  console.log(song);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('Canceled');
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_AddSong.default, args);
+};
+
+var Song = Template.bind({});
+exports.Song = Song;
+Song.args = {
+  saveHandler: onAddSong,
+  candelHandler: cancelHandler,
+  saveBtnText: "Create",
+  cancelBtnText: "Cancel"
+};

package/dist/stories/Forms/AddVideo/AddVideo.js

@@ -0,0 +1,103 @@
+"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 _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;
+
+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 AddVideo = function AddVideo(props) {
+  var _Object$assign;
+
+  var initialValues = {
+    video: null,
+    cover: null,
+    link: '',
+    title: '',
+    discription: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required"),
+    discription: Yup.string().required('Required')
+  });
+  var sections = [{
+    title: "Add Video",
+    body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      fileType: "video/*",
+      inputContent: "Video",
+      label: "Upload Video",
+      name: "video"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "or insert link",
+      name: "link"
+    }), /*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+      inputContent: "Video Cover",
+      label: "Upload Cover",
+      name: "cover"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "discription",
+      name: "discription"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var video = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    video.date = date;
+    props.saveHandler(video);
+  };
+
+  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 Video",
+    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"])));
+
+var _default = AddVideo;
+exports.default = _default;

package/dist/stories/Forms/AddVideo/AddVideo.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Video = exports.default = void 0;
+
+var _AddVideo = _interopRequireDefault(require("./AddVideo"));
+
+var _default = {
+  title: 'Forms/Add Video',
+  component: _AddVideo.default
+};
+exports.default = _default;
+
+var saveHandler = function saveHandler(photo) {
+  console.log(photo);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('Canceled');
+};
+
+var Video = function Video(args) {
+  return /*#__PURE__*/React.createElement(_AddVideo.default, Object.assign({
+    saveHandler: saveHandler,
+    cancelHandler: cancelHandler
+  }, args, args));
+};
+
+exports.Video = Video;

package/dist/stories/Forms/Create-Profile/CreateProfile.js

@@ -0,0 +1,229 @@
+"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 _formik = require("formik");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _InputField = _interopRequireDefault(require("../../Common Inputs/Formik/InputField/InputField"));
+
+var _RadioField = _interopRequireDefault(require("../../Common Inputs/Formik/RadioField/RadioField"));
+
+var _ProfilePhoto = _interopRequireDefault(require("./subcomponents/ProfilePhoto"));
+
+var _LogoUploader = _interopRequireDefault(require("./subcomponents/LogoUploader"));
+
+var _ResetBtn = _interopRequireDefault(require("./subcomponents/ResetBtn"));
+
+var _Buttons = _interopRequireDefault(require("../../Buttons/Buttons/Buttons"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+// Just dummy data used to loop
+// For presentation
+var dummyData = [1, 2, 3, 4, 5, 6];
+
+var CreateProfile = function CreateProfile() {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      profilePhoto: null,
+      username: '',
+      servername: '',
+      logo: null,
+      preset: '',
+      theme: '',
+      themeSelected: '',
+      styles: {
+        width: '',
+        border: '',
+        borderColor: '',
+        color: '',
+        height: '',
+        font: ''
+      }
+    },
+    onSubmit: function onSubmit(values) {
+      console.log(values);
+    }
+  }, function (_ref) {
+    var values = _ref.values,
+        setFieldValue = _ref.setFieldValue,
+        initialValues = _ref.initialValues;
+    return /*#__PURE__*/_react.default.createElement(_formik.Form, null, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Heading, null, "Create Profile")), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(_ProfilePhoto.default, {
+      profilePhoto: values.profilePhoto,
+      setFieldValue: setFieldValue
+    })), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3,
+      justify: "flex-end",
+      align: "center",
+      direction: "row"
+    }, /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      name: "username",
+      type: "text",
+      placeholder: "username"
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Create Server")), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end",
+      align: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_ResetBtn.default, {
+      value: "servername",
+      setFieldValue: setFieldValue,
+      initValue: initialValues.servername
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      name: "servername",
+      type: "text",
+      placeholder: "server name"
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Upload Logo")), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end",
+      align: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_ResetBtn.default, {
+      value: "logo",
+      setFieldValue: setFieldValue,
+      initValue: initialValues.logo
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(_LogoUploader.default, {
+      value: "logo",
+      logo: values.logo,
+      setFieldValue: setFieldValue
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Presets")), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end",
+      align: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_ResetBtn.default, {
+      value: "preset",
+      setFieldValue: setFieldValue,
+      initValue: initialValues.preset
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(GridColumn, {
+      gridsize: 3
+    }, dummyData.map(function (n) {
+      return /*#__PURE__*/_react.default.createElement(_RadioField.default, {
+        name: "preset",
+        value: "Preset ".concat(n)
+      }, "Preset ".concat(n));
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Themes")), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end",
+      align: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_ResetBtn.default, {
+      value: "theme",
+      setFieldValue: setFieldValue,
+      initValue: initialValues.theme
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      name: "theme",
+      type: "text",
+      placeholder: "search..."
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(GridColumn, {
+      gridsize: 3
+    }, dummyData.map(function (n) {
+      return /*#__PURE__*/_react.default.createElement(_RadioField.default, {
+        name: "themeSelected",
+        value: "Theme ".concat(n)
+      }, "Theme ".concat(n));
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Styles")), /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end",
+      align: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_ResetBtn.default, {
+      value: "styles",
+      setFieldValue: setFieldValue,
+      initValue: initialValues.styles
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(GridColumn, {
+      gridsize: 3
+    }, /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.width",
+      type: "text",
+      placeholder: "#width"
+    }), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.height",
+      type: "text",
+      placeholder: "#height"
+    }), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.border",
+      type: "text",
+      placeholder: "#border"
+    }), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.borderColor",
+      type: "text",
+      placeholder: "#border color"
+    }), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.color",
+      type: "text",
+      placeholder: "#color"
+    }), /*#__PURE__*/_react.default.createElement(_InputField.default, {
+      className: "style",
+      name: "styles.font",
+      type: "text",
+      placeholder: "#font"
+    }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 3
+    }, /*#__PURE__*/_react.default.createElement(Heading, null, "Preview"))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1
+    }, /*#__PURE__*/_react.default.createElement(PreviewBox, null))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
+      size: 1,
+      justify: "flex-end"
+    }, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      label: "CREATE",
+      size: "lg",
+      variant: "primary",
+      type: "submit"
+    }))));
+  }));
+};
+
+var Container = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 60%;\n    padding-right: 15px;\n    padding-left: 15px;\n    margin-right: auto;\n    margin-left: auto;\n    box-sizing: border-box;\n"])));
+
+var Row = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin: 1.5rem 0;\n"])));
+
+var Col = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: ", ";\n    display: flex;\n    justify-content: ", ";\n    align-items: ", ";\n    flex-direction: ", ";\n    padding: 0 15px;\n"])), function (props) {
+  return props.size;
+}, function (props) {
+  return props.justify;
+}, function (props) {
+  return props.align;
+}, function (props) {
+  return props.direction;
+});
+
+var GridColumn = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    width: 100%;\n    grid-template-columns: ", ";\n    justify-items: center;\n    grid-gap: 1rem;\n    padding: 0 15px;\n"])), function (props) {
+  return "repeat(".concat(props.gridsize, ", 1fr)");
+});
+
+var Heading = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 2rem;\n"])));
+
+var PreviewBox = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    border: 3px solid #222222;\n    width: 100%;\n    min-height: 400px;\n    height: 600px;\n"])));
+
+var _default = CreateProfile;
+exports.default = _default;

package/dist/stories/Forms/Create-Profile/CreateProfile.stories.js

@@ -0,0 +1,49 @@
+"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 _CreateProfile = _interopRequireDefault(require("./CreateProfile"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  title: 'Forms/Create-Profile-2',
+  component: _CreateProfile.default,
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_CreateProfile.default, args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.parameters = {
+  formik: {
+    initialValues: {
+      profilePhoto: null,
+      username: '',
+      servername: '',
+      logo: null,
+      preset: '',
+      theme: '',
+      themeSelected: '',
+      styles: {
+        width: '',
+        border: '',
+        borderColor: '',
+        color: '',
+        height: '',
+        font: ''
+      }
+    }
+  }
+};

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

@@ -0,0 +1,54 @@
+"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 _reactDropzone = _interopRequireDefault(require("react-dropzone"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Thumbnail = _interopRequireDefault(require("../../../Misc/Thumbnail/Thumbnail"));
+
+var _templateObject;
+
+var LogoUploader = function LogoUploader(_ref) {
+  var value = _ref.value,
+      logo = _ref.logo,
+      setFieldValue = _ref.setFieldValue;
+  return /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
+    accept: "image/*",
+    onDrop: function onDrop(acceptedFiles) {
+      if (acceptedFiles.length === 0) return;
+      setFieldValue(value, acceptedFiles[0]);
+    }
+  }, function (_ref2) {
+    var getRootProps = _ref2.getRootProps,
+        getInputProps = _ref2.getInputProps,
+        isDragActive = _ref2.isDragActive;
+    return /*#__PURE__*/_react.default.createElement(StyledDropSection, {
+      active: isDragActive
+    }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, getRootProps(), {
+      className: "dropzoneWrapper"
+    }), /*#__PURE__*/_react.default.createElement("input", getInputProps()), isDragActive && /*#__PURE__*/_react.default.createElement("p", {
+      className: "text-green"
+    }, "Slow & steady!"), !isDragActive && !logo && /*#__PURE__*/_react.default.createElement("p", null, "Drop File"), logo && !isDragActive && /*#__PURE__*/_react.default.createElement(_Thumbnail.default, {
+      file: logo,
+      type: "horizontal"
+    })));
+  });
+};
+
+var StyledDropSection = _styledComponents.default.section(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 150px;\n    border: 2px dashed rgb(102, 102, 102);\n    border-radius: 5px;\n    padding: 1rem 0;\n    border: ", ";\n    .dropzoneWrapper {\n        height: 100%;\n        width: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        outline: none;\n        p {\n            font-family:  Helvetica, Arial, sans-serif;\n            font-size: 1.5rem;\n        }\n        .text-green {\n            color: #4AE54A;\n        }\n    }\n"])), function (props) {
+  return props.active && "2px solid #4AE54A";
+});
+
+var _default = LogoUploader;
+exports.default = _default;

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

@@ -0,0 +1,42 @@
+"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 _LogoUploader = _interopRequireDefault(require("./LogoUploader"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _default = {
+  component: _LogoUploader.default,
+  title: 'Components/CreateProfile/Subcomponents/LogoUploader',
+  decorators: [_storybookFormik.default]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_LogoUploader.default, args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  logo: null,
+  value: 'logo'
+};
+Default.parameters = {
+  formik: {
+    initialValues: {
+      logo: null
+    }
+  },
+  onSubmit: function onSubmit(v) {
+    return console.log(v);
+  }
+};