@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Buttons/ReactModal/ReactModal.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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 ReactModalIndex = function ReactModalIndex(_ref) {
+  var closeButtonPosition = _ref.closeButtonPosition,
+      borderColor = _ref.borderColor,
+      boxShadow = _ref.boxShadow,
+      backgroundColor = _ref.backgroundColor,
+      onOverlayCloseClick = _ref.onOverlayCloseClick,
+      borderRadius = _ref.borderRadius,
+      padding = _ref.padding,
+      height = _ref.height,
+      width = _ref.width,
+      color = _ref.color,
+      children = _ref.children,
+      modalBtnOpenText = _ref.modalBtnOpenText,
+      modalBtnCloseText = _ref.modalBtnCloseText,
+      modalContent = _ref.modalContent;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      modalIsOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var toggleModal = function toggleModal() {
+    setIsOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: toggleModal
+  }, modalBtnOpenText), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    onOverlayCloseClick: onOverlayCloseClick,
+    modalIsOpen: modalIsOpen,
+    closeModal: toggleModal,
+    borderColor: borderColor,
+    boxShadow: boxShadow,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    height: height,
+    width: width,
+    color: color,
+    borderRadius: borderRadius,
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement(Container, {
+        position: closeButtonPosition,
+        onClick: e
+      }, modalBtnCloseText);
+    }
+  }, modalContent));
+};
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    ", "\n"])), function (_ref2) {
+  var position = _ref2.position;
+  return position === 'TopRight' && "position: absolute; right: 0; top: 0;";
+}, function (_ref3) {
+  var position = _ref3.position;
+  return position === 'TopLeft' && "position: absolute; left: 0; top: 0;";
+}, function (_ref4) {
+  var position = _ref4.position;
+  return position === 'BottomRight' && "float: right";
+});
+
+ReactModalIndex.defaultProps = {
+  height: "80vh",
+  width: "50vw",
+  closeButtonPosition: "TopRight",
+  onOverlayCloseClick: false
+};
+var _default = ReactModalIndex;
+exports.default = _default;

package/dist/stories/Buttons/ReactModal/ReactModal.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ReactModal = _interopRequireDefault(require("./ReactModal"));
+
+var _ReactModalDemo = _interopRequireDefault(require("./ReactModalDemo"));
+
+var _default = {
+  title: "Buttons/React Modal",
+  component: _ReactModal.default
+};
+exports.default = _default;
+
+var Modal = function Modal(args) {
+  return /*#__PURE__*/_react.default.createElement(_ReactModal.default, Object.assign({}, args, {
+    modalBtnOpenText: "Lets Open The Modal",
+    modalBtnCloseText: "Lets Close The Modal",
+    modalContent: /*#__PURE__*/_react.default.createElement(_ReactModalDemo.default, null)
+  }));
+};
+
+exports.Modal = Modal;

package/dist/stories/Buttons/ReactModal/ReactModalDemo.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var ReactDummyHook = function ReactDummyHook() {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", null, "Hello"), /*#__PURE__*/_react.default.createElement("div", null, "I am a modal"));
+};
+
+var _default = ReactDummyHook;
+exports.default = _default;

package/dist/stories/Chat/Chat.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 _fakeData = require("../Reusable Components/fakeData");
+
+var _ReusableHeader = _interopRequireDefault(require("../Reusable Components/ReusableHeader/ReusableHeader"));
+
+var _ReusableList = _interopRequireDefault(require("../Reusable Components/ReusableList/ReusableList"));
+
+var _RichTextInput = _interopRequireDefault(require("../Common Inputs/RichTextInput/RichTextInput"));
+
+var _templateObject;
+
+var _excluded = ["data", "title", "titleColor", "headerBackground", "headerPadding", "cardBackgroundColor", "cardTitleColor", "textColor", "users"];
+
+var Chat = function Chat(_ref) {
+  var data = _ref.data,
+      title = _ref.title,
+      titleColor = _ref.titleColor,
+      headerBackground = _ref.headerBackground,
+      headerPadding = _ref.headerPadding,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      cardTitleColor = _ref.cardTitleColor,
+      textColor = _ref.textColor,
+      users = _ref.users,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    cardBackgroundColor: cardBackgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
+    title: title,
+    titleColor: titleColor,
+    controls: _fakeData.controls,
+    controlsStyles: {
+      iconColor: 'white',
+      maxIcons: 4,
+      dropdownBackground: 'white'
+    },
+    headerBackground: headerBackground,
+    padding: headerPadding
+  }), /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    type: "flat",
+    data: data,
+    cardStyle: "card-style-8",
+    customCardStyles: {
+      cardBackgroundColor: cardBackgroundColor,
+      cardTitleColor: cardTitleColor,
+      cardDescriptionColor: textColor
+    }
+  }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    users: users
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    width: 100%;\n    padding: 15px 0;\n"])), function (cardBackgroundColor) {
+  return cardBackgroundColor;
+});
+
+Chat.defaultProps = {
+  title: 'Chat Space'
+};
+var _default = Chat;
+exports.default = _default;

package/dist/stories/Chat/Chat.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatSpace = exports.default = void 0;
+
+var _Chat = _interopRequireDefault(require("./Chat"));
+
+var _default = {
+  title: 'Chat/Chat Space',
+  component: _Chat.default
+};
+exports.default = _default;
+var data = [{
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test ',
+  media: /*#__PURE__*/React.createElement("img", {
+    src: "https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"
+  })
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}, {
+  username: 'Test User',
+  img: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
+  date: '5/11/2021',
+  text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '
+}];
+var users = [{
+  id: 'walter',
+  display: 'Walter White'
+}, {
+  id: 'jesse',
+  display: 'Jesse Pinkman'
+}, {
+  id: 'gus',
+  display: 'Gustavo "Gus" Fring'
+}, {
+  id: 'saul',
+  display: 'Saul Goodman'
+}, {
+  id: 'hank',
+  display: 'Hank Schrader'
+}, {
+  id: 'skyler',
+  display: 'Skyler White'
+}, {
+  id: 'mike',
+  display: 'Mike Ehrmantraut'
+}, {
+  id: 'lydia',
+  display: 'Lydìã Rôdarté-Qüayle'
+}];
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_Chat.default, args);
+};
+
+var ChatSpace = Template.bind({});
+exports.ChatSpace = ChatSpace;
+ChatSpace.args = {
+  data: data,
+  users: users
+};

package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,59 @@
+"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 _formik = require("formik");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var CheckboxGroup = function CheckboxGroup(props) {
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(FormLabel, props, props.label), /*#__PURE__*/_react.default.createElement(CheckboxGroupWrapper, props, props.options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+      type: "checkbox",
+      name: props.name,
+      value: option.value
+    }), /*#__PURE__*/_react.default.createElement(Label, props, option.label));
+  })), /*#__PURE__*/_react.default.createElement(_formik.ErrorMessage, {
+    name: props.name,
+    component: Error
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n"])));
+
+var CheckboxGroupWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: ", ";\n    gap: ", "px;\n"])), function (props) {
+  return props.flexDirection;
+}, function (props) {
+  return props.flexGap;
+});
+
+var CheckboxWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+var FormLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 10px;\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.formLabelColor;
+}, function (props) {
+  return props.formLabelFontSize;
+});
+
+var Label = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.labelColor;
+}, function (props) {
+  return props.labelFontSize;
+});
+
+var Error = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+CheckboxGroup.defaultProps = {};
+var _default = CheckboxGroup;
+exports.default = _default;

package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckBoxGroup = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
+
+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 formSchema = Yup.object().shape({
+  acceptTerms: Yup.array().min(1, 'You must choose at least one element')
+});
+var options = [{
+  label: 'option 1',
+  value: '1'
+}, {
+  label: 'option 2',
+  value: '2'
+}, {
+  label: 'option 3',
+  value: '3'
+}];
+var _default = {
+  title: 'Common Inputs/Checkbox Group',
+  component: _CheckboxGroup.default,
+  decorators: [_storybookFormik.default],
+  parameters: {
+    formik: {
+      initialValues: {
+        acceptTerms: []
+      },
+      validationSchema: formSchema
+    }
+  }
+};
+exports.default = _default;
+
+var CheckBoxGroup = function CheckBoxGroup(args) {
+  return /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, Object.assign({
+    label: "Checkbox Group",
+    name: "acceptTerms",
+    options: options
+  }, args));
+};
+
+exports.CheckBoxGroup = CheckBoxGroup;

package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactAutocomplete = _interopRequireDefault(require("react-autocomplete"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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; }
+
+// // Formik
+// import { useField } from 'formik';
+var CustomAutoComplete = function CustomAutoComplete(props) {
+  // const [field, meta, helpers] = useField(props)
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var inputStyle = {
+    border: "".concat(props.borderSize, "px solid ").concat(props.borderColor),
+    borderRadius: "".concat(props.borderRadius, "px"),
+    width: '100%',
+    padding: "0 ".concat(props.padding, "px"),
+    height: "100%"
+  };
+  return /*#__PURE__*/_react.default.createElement(AutocompleteWrapper, null, /*#__PURE__*/_react.default.createElement(Label, props, props.label), /*#__PURE__*/_react.default.createElement(_reactAutocomplete.default, {
+    items: props.items,
+    shouldItemRender: function shouldItemRender(item, value) {
+      return item.label.toLowerCase().indexOf(value.toLowerCase()) > -1;
+    },
+    getItemValue: function getItemValue(item) {
+      return item.label;
+    },
+    inputProps: {
+      style: inputStyle,
+      placeholder: props.placeholder,
+      name: props.name
+    },
+    renderItem: function renderItem(item, highlighted) {
+      return /*#__PURE__*/_react.default.createElement(Dropdown, Object.assign({
+        key: item.id,
+        highlighted: highlighted
+      }, props), item.label);
+    },
+    value: value,
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+    },
+    onSelect: function onSelect(value) {
+      setValue(value);
+    }
+  }));
+};
+
+var AutocompleteWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 5px;\n  font-family: 'sans-serif';\n  // Customized Styles\n  text-transform: capitalize;\n  font-size: ", "px;\n  color: ", ";\n"])), function (props) {
+  return props.labelFontSize || 15;
+}, function (props) {
+  return props.labelColor || 'black';
+});
+
+var Dropdown = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n  font-family: 'sans-serif';\n  height: ", ";\n  background-color: ", ";\n  font-size: ", "px;\n  color: ", ";\n"])), function (props) {
+  return props.itemHeight + 'px';
+}, function (props) {
+  return props.highlighted ? props.hoverColor || '#eee' : props.backgroundColor;
+}, function (props) {
+  return props.fontSize || 15;
+}, function (props) {
+  return props.fontColor || 'black';
+});
+
+var Error = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: red;\n  margin-top: 3px;\n"])));
+
+CustomAutoComplete.defaultProps = {};
+var _default = CustomAutoComplete;
+exports.default = _default;

package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoComplete = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CustomAutoComplete = _interopRequireDefault(require("./CustomAutoComplete"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// import withFormik from "storybook-formik";
+// import * as Yup from 'yup';
+// const formSchema = Yup.object().shape({
+//     search: Yup.string()
+//         .required("Required"),
+// });
+var _default = {
+  title: 'Common Inputs/Custom AutoComplete',
+  component: _CustomAutoComplete.default // decorators: [withFormik],
+  // parameters: {
+  //     formik: {
+  //         initialValues: {
+  //             search: ''
+  //         },
+  //         validationSchema: formSchema,
+  //     },
+  // }
+
+};
+exports.default = _default;
+
+var AutoComplete = function AutoComplete(args) {
+  return /*#__PURE__*/_react.default.createElement(_CustomAutoComplete.default, Object.assign({
+    label: "themes",
+    items: [{
+      id: 'foo',
+      label: 'foo'
+    }, {
+      id: 'bar',
+      label: 'bar'
+    }, {
+      id: 'baz',
+      label: 'baz'
+    }],
+    name: "search"
+  }, args));
+};
+
+exports.AutoComplete = AutoComplete;

package/dist/stories/Common Inputs/CustomDropzone/CustomDropZone.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactDropzoneUploader = _interopRequireDefault(require("react-dropzone-uploader"));
+
+var _formik = require("formik");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var CustomDropZone = function CustomDropZone(props) {
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 3),
+      field = _useField2[0],
+      meta = _useField2[1],
+      helpers = _useField2[2];
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+    htmlFor: props.name
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(_reactDropzoneUploader.default, {
+    name: props.name,
+    SubmitButtonComponent: null,
+    maxFiles: 1,
+    multiple: false,
+    onChangeStatus: function onChangeStatus(_ref, status) {
+      var meta = _ref.meta,
+          file = _ref.file;
+      console.log(meta);
+      helpers.setValue({
+        file: file,
+        meta: meta
+      });
+    },
+    accept: props.fileType,
+    inputContent: props.inputContent,
+    inputWithFilesContent: ""
+  }), meta.error && /*#__PURE__*/_react.default.createElement(Error, null, meta.error));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n\n    & .dzu-dropzone {\n        width: ", "px;\n        background-color: #fadada;\n        height: ", ";\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        font-family: sans-serif;\n        background-color: #b6b6b6;\n        border-radius: ", "px;\n        padding: 10px;\n        \n    }\n\n    & .dzu-dropzoneActive {\n        background-color: ", ";\n        border-color: ", ";\n    }\n\n    & .dzu-input {\n        /* display: none; */\n        display: block;\n    }\n\n    & .dzu-inputLabel {\n        font-size: ", "px;\n        color: ", ";\n    }\n\n    & .dzu-previewContainer {\n        padding: 0;\n        position: relative;\n        width: 100%;\n        min-height: 60px;\n        z-index: 1;\n        border-radius: ", "px;\n    }\n\n\n    & .dzu-previewImage {\n        width: 100%;\n        height: ", ";\n        border-radius: ", "px;\n    } \n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height ? "".concat(props.height, "px") : '100px';
+}, function (props) {
+  return props.borderRadius;
+}, function (props) {
+  return props.backgroundOnDrop;
+}, function (props) {
+  return props.borderOnDrop;
+}, function (props) {
+  return props.fontSize;
+}, function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.borderRadius;
+}, function (props) {
+  return props.height ? "".concat(props.height, "px") : '100px';
+}, function (props) {
+  return props.borderRadius;
+});
+
+var Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 5px;\n    text-transform: capitalize;\n    font-size: ", "px;\n    color: ", ";\n"])), function (props) {
+  return props.labelFontSize || 15;
+}, function (props) {
+  return props.labelColor || 'black';
+});
+
+var Error = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+CustomDropZone.defaultProps = {
+  inputContent: 'Upload image',
+  fileType: 'image/*'
+};
+var _default = CustomDropZone;
+exports.default = _default;