@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,50 @@
+"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 _RadioInput = _interopRequireDefault(require("./RadioInput"));
+
+var _default = {
+  title: 'Common Inputs/RadioInput/Item',
+  component: _RadioInput.default,
+  argTypes: {
+    list: {
+      control: {
+        type: 'object'
+      }
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+    margin: {
+      control: {
+        type: 'number'
+      }
+    },
+    borderColor: {
+      control: 'color'
+    },
+    titleFontSize: {
+      control: 'number'
+    },
+    descriptionFontSize: {
+      control: 'number'
+    }
+  }
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_RadioInput.default, args);
+};
+
+exports.Default = Default;

package/dist/stories/Common Inputs/RichTextInput/Components/Emoji/Emoji.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _emojiMart = require("emoji-mart");
+
+require("emoji-mart/css/emoji-mart.css");
+
+var _react = _interopRequireDefault(require("react"));
+
+var Emoji = function Emoji(_ref) {
+  var setEmoji = _ref.setEmoji;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_emojiMart.Picker, {
+    set: "apple",
+    onSelect: function onSelect(emoji) {
+      return setEmoji(emoji);
+    },
+    style: {
+      height: '100%',
+      width: '100%'
+    }
+  }));
+};
+
+var _default = Emoji;
+exports.default = _default;

package/dist/stories/Common Inputs/RichTextInput/Components/Gif/Gif.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 _jsFetchApi = require("@giphy/js-fetch-api");
+
+var _reactComponents = require("@giphy/react-components");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactResizeObserver = _interopRequireDefault(require("react-resize-observer"));
+
+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 giphyFetch = new _jsFetchApi.GiphyFetch('sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh');
+
+var Gify = function Gify(_ref) {
+  var setDisplayGif = _ref.setDisplayGif;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      search = _useState2[0],
+      setSearch = _useState2[1];
+
+  var GridDemo = function GridDemo(_ref2) {
+    var onGifClick = _ref2.onGifClick;
+
+    var _fetchGifs = function _fetchGifs(offset, search) {
+      return search.length === 0 ? giphyFetch.trending({
+        offset: offset,
+        limit: 100
+      }) : giphyFetch.search(search);
+    };
+
+    var _useState3 = (0, _react.useState)(window.innerWidth),
+        _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+        width = _useState4[0],
+        setWidth = _useState4[1];
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactComponents.Grid, {
+      onGifClick: onGifClick,
+      fetchGifs: function fetchGifs() {
+        return _fetchGifs(0, search);
+      },
+      width: width,
+      columns: 3,
+      gutter: 6
+    }), /*#__PURE__*/_react.default.createElement(_reactResizeObserver.default, {
+      onResize: function onResize(_ref3) {
+        var width = _ref3.width;
+        setWidth(width);
+      }
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GifSearch, {
+    placeholder: "search.....",
+    value: search,
+    onChange: function onChange(e) {
+      setSearch(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(GridDemo, {
+    onGifClick: function onGifClick(gif, e) {
+      e.preventDefault();
+      setDisplayGif(gif); //   setModalGif(gif);
+    }
+  }));
+};
+
+var GifSearch = _styledComponents.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 97%;\n  margin-top: 1%;\n  margin-bottom: 1%;\n  margin-left: 1%;\n"])));
+
+var _default = Gify;
+exports.default = _default;

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

@@ -0,0 +1,278 @@
+"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 _reactComponents = require("@giphy/react-components");
+
+var _emojiMart = require("emoji-mart");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _bi = require("react-icons/bi");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _Mention = _interopRequireDefault(require("../../Reusable Components/Mention/Mention"));
+
+var _Emoji = _interopRequireDefault(require("./Components/Emoji/Emoji"));
+
+var _Gif = _interopRequireDefault(require("./Components/Gif/Gif"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+
+var _excluded = ["users"];
+
+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 RichTextInput = function RichTextInput(_ref) {
+  var users = _ref.users,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      source = _useState4[0],
+      setSource = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      text = _useState6[0],
+      setText = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      file = _useState8[0],
+      setFile = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      gif = _useState10[0],
+      setGif = _useState10[1];
+
+  var emojis = ['smiley', 'wink', 'innocent', 'yum', 'joy', 'money_mouth_face'];
+
+  var _useState11 = (0, _react.useState)(emojis[0]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      displayEmoji = _useState12[0],
+      setDisplayEmoji = _useState12[1];
+
+  var customStyles = {
+    content: {
+      borderColor: 'black',
+      boxShadow: '',
+      backgroundColor: '',
+      padding: '',
+      height: '50%',
+      width: '50%',
+      color: '',
+      borderRadius: '',
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)'
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(LeftContainer, null, /*#__PURE__*/_react.default.createElement(FileLabel, null, /*#__PURE__*/_react.default.createElement(_bi.BiPlusCircle, {
+    style: {
+      width: '30px',
+      height: '20px',
+      color: 'grey'
+    },
+    onMouseOver: function onMouseOver(e) {
+      return e.target.style.color = 'black';
+    },
+    onMouseOut: function onMouseOut(e) {
+      return e.target.style.color = 'grey';
+    }
+  }), /*#__PURE__*/_react.default.createElement(FileInput, {
+    type: "file",
+    name: "file",
+    onChange: function onChange(e) {
+      var objectURL = URL.createObjectURL(e.target.files[0]);
+      setFile({
+        url: objectURL,
+        fileName: e.target.files[0].name
+      });
+      setShow(true);
+    },
+    onClick: function onClick(e) {
+      return e.target.value = null;
+    }
+  }))), /*#__PURE__*/_react.default.createElement(CenterContainer, null, users ? /*#__PURE__*/_react.default.createElement(_Mention.default, {
+    value: text,
+    handleOnChange: function handleOnChange(newValue) {
+      return setText(newValue);
+    },
+    users: users
+  }) : /*#__PURE__*/_react.default.createElement(TextInput, {
+    placeholder: "Type your message",
+    value: text,
+    onChange: function onChange(e) {
+      setText(e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement(RightContainer, null, /*#__PURE__*/_react.default.createElement(GifTab, {
+    onClick: function onClick() {
+      setShow(function (show) {
+        return !show;
+      });
+      setSource(0);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_bi.BiGift, {
+    style: {
+      width: '50px',
+      height: '25px',
+      color: 'grey'
+    },
+    onMouseOver: function onMouseOver(e) {
+      return e.target.style.color = 'black';
+    },
+    onMouseOut: function onMouseOut(e) {
+      return e.target.style.color = 'grey';
+    }
+  })), /*#__PURE__*/_react.default.createElement(EmojiTab, {
+    onClick: function onClick() {
+      setShow(function (show) {
+        return !show;
+      });
+      setSource(1);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_emojiMart.Emoji, {
+    emoji: displayEmoji,
+    onOver: function onOver(emoji, e) {
+      var i = emojis.indexOf(displayEmoji);
+      if (i === emojis.length - 1) i = -1;
+      setDisplayEmoji(emojis[i + 1]);
+      emoji = displayEmoji;
+    },
+    size: 24
+  })))), show && /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    customStyle: customStyles,
+    modalIsOpen: show,
+    closeModal: function closeModal(show) {
+      setShow(!show);
+      setFile('');
+    },
+    exitModalButton: function exitModalButton(e) {
+      return (
+        /*#__PURE__*/
+        //   <button onClick={e}>{'Close'}</button>
+        _react.default.createElement("div", null)
+      );
+    }
+  }, /*#__PURE__*/_react.default.createElement(ModalContainer, null, !file ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(TopBar, null, /*#__PURE__*/_react.default.createElement(Tab, {
+    selected: source === 0 ? true : false,
+    onClick: function onClick() {
+      return setSource(0);
+    }
+  }, "GIFs"), /*#__PURE__*/_react.default.createElement(Tab, {
+    selected: source === 1 ? true : false,
+    onClick: function onClick() {
+      return setSource(1);
+    }
+  }, "Emoji")), source === 0 ? /*#__PURE__*/_react.default.createElement(_Gif.default, {
+    setDisplayGif: function setDisplayGif(gif) {
+      setShow(false);
+      setGif(gif);
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+    setEmoji: function setEmoji(emoji) {
+      var temp = "".concat(text).concat(emoji.native);
+      setText(temp);
+    }
+  })) : /*#__PURE__*/_react.default.createElement(FileContainer, null, /*#__PURE__*/_react.default.createElement(PreviewImage, {
+    src: file.url
+  }), /*#__PURE__*/_react.default.createElement(FileName, null, file.fileName), /*#__PURE__*/_react.default.createElement(FileInputContainer, null, /*#__PURE__*/_react.default.createElement(FileInputText, {
+    placeholder: "Type your message",
+    value: text,
+    onChange: function onChange(e) {
+      setText(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '10%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(EmojiTab, {
+    onClick: function onClick() {
+      setShow(function (show) {
+        return !show;
+      });
+      setSource(1);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_emojiMart.Emoji, {
+    emoji: displayEmoji,
+    onOver: function onOver(emoji, e) {
+      var i = emojis.indexOf(displayEmoji);
+      if (i === emojis.length - 1) i = -1;
+      setDisplayEmoji(emojis[i + 1]);
+      emoji = displayEmoji;
+    },
+    size: 26
+  }))))))), gif && /*#__PURE__*/_react.default.createElement(_reactComponents.Gif, {
+    gif: gif,
+    width: "200"
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  border: 1px solid grey;\n  align-items: center;\n"])));
+
+var LeftContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 5vw;\n  color: white;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  flex-direction: column;\n  :hover {\n    font-weight: 600;\n  }\n"])));
+
+var CenterContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
+
+var TextInput = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 26px;\n  border: 0px;\n  outline: none;\n  margin-right: 2%;\n  margin-left: 1%;\n"])));
+
+var RightContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: 10vw;\n  align-self: flex-end;\n  flex-direction: row;\n  display: flex;\n"])));
+
+var GifTab = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: 5vh;\n  width: 5vw;\n  align-items: center;\n  justify-content: center;\n  :hover {\n    cursor: pointer;\n  }\n"])));
+
+var EmojiTab = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  :hover {\n    cursor: pointer;\n  }\n"])));
+
+var ModalContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([""])));
+
+var TopBar = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border: 1px solid #fdfdfd;\n"])));
+
+var Tab = _styledComponents.default.label(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border: ", ";\n  padding-left: 10px;\n  padding-right: 10px;\n  background-color: ", ";\n  color: ", ";\n  :hover {\n    cursor: pointer;\n    font-weight: 550;\n  }\n"])), function (props) {
+  return props.selected ? '1px solid grey' : '';
+}, function (props) {
+  return props.selected ? 'grey' : 'white';
+}, function (props) {
+  return props.selected ? 'white' : 'black';
+});
+
+var FileInput = _styledComponents.default.input(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
+
+var FileLabel = _styledComponents.default.label(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: auto;\n  align-items: center;\n  justify-content: center;\n  :hover {\n    cursor: pointer;\n  }\n"])));
+
+var PreviewImage = _styledComponents.default.img(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  height: 30%;\n  width: 30%;\n  margin-left: 5%;\n"])));
+
+var FileContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var FileName = _styledComponents.default.label(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 5%;\n  margin-top: 2%;\n  font-size: large;\n  font-weight: 600;\n"])));
+
+var FileInputText = _styledComponents.default.input(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  border: 0px;\n  outline: none;\n  width: 90%;\n"])));
+
+var FileInputContainer = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid black;\n  width: 93%;\n  height: 30px;\n  display: flex;\n  margin-right: 2%;\n  margin-top: 3%;\n  margin-left: 5%;\n  justify-content: space-between;\n"])));
+
+var _default = RichTextInput;
+exports.default = _default;

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

@@ -0,0 +1,51 @@
+"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 _RichTextInput = _interopRequireDefault(require("./RichTextInput"));
+
+var _default = {
+  title: 'Common Inputs/RichTextInput',
+  component: _RichTextInput.default
+};
+exports.default = _default;
+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 Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_RichTextInput.default, Object.assign({
+    users: users
+  }, args));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,65 @@
+"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 _formik = require("formik");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var TextField = function TextField(props) {
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 2),
+      field = _useField2[0],
+      meta = _useField2[1];
+
+  return /*#__PURE__*/_react.default.createElement(TextFieldWrapper, null, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+    htmlFor: field.name
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(Input, Object.assign({}, field, props)), meta.error && meta.touched && /*#__PURE__*/_react.default.createElement(Error, null, meta.error));
+};
+
+var TextFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n"])));
+
+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 Input = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    border: ", "px solid;\n    border-top-color: ", ";\n    border-bottom-color: ", ";\n    border-right-color: ", ";\n    border-left-color: ", ";\n    border-radius: ", "px;\n    font-size: ", "px;\n    color: ", ";\n"])), function (props) {
+  return props.padding || 5;
+}, function (props) {
+  return props.borderSize || 1;
+}, function (props) {
+  return props.borderTopColor || '#9e9e9e';
+}, function (props) {
+  return props.borderBottomColor || '#9e9e9e';
+}, function (props) {
+  return props.borderRightColor || '#9e9e9e';
+}, function (props) {
+  return props.borderLeftColor || '#9e9e9e';
+}, function (props) {
+  return props.borderRadius || 0;
+}, function (props) {
+  return props.inputFontSize || 15;
+}, function (props) {
+  return props.inputFontColor || 'black';
+});
+
+var Error = _styledComponents.default.p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+TextField.defaultProps = {};
+var _default = TextField;
+exports.default = _default;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _TextField = _interopRequireDefault(require("./TextField"));
+
+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({
+  userName: Yup.string().required("Required")
+});
+var _default = {
+  title: 'Common Inputs/TextField',
+  component: _TextField.default,
+  decorators: [_storybookFormik.default],
+  parameters: {
+    formik: {
+      initialValues: {
+        userName: '',
+        validationSchema: formSchema
+      },
+      validationSchema: formSchema
+    }
+  }
+};
+exports.default = _default;
+
+var TextInput = function TextInput(args) {
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({
+    name: "userName",
+    label: "User Name"
+  }, args));
+};
+
+exports.TextInput = TextInput;

package/dist/stories/Containers/BaseMaterial.js

@@ -0,0 +1,65 @@
+"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 _templateObject;
+
+var BaseMaterial = function BaseMaterial(props) {
+  return /*#__PURE__*/_react.default.createElement(StyledBaseMaterial, {
+    borderWidth: props.borderWidth,
+    backgroundColor: props.backgroundColor,
+    borderColor: props.borderColor,
+    boxShadow: props.boxShadow,
+    borderRadius: props.borderRadius,
+    padding: props.padding,
+    fontFamily: props.fontFamily,
+    inputBGColor: props.inputBGColor,
+    fill: props.fill,
+    paddingLeft: props.paddingLeft,
+    paddingRight: props.paddingRight,
+    verticalSpacing: props.verticalSpacing
+  }, props.children);
+};
+
+var StyledBaseMaterial = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  width: ", ";\n  padding: ", "px;\n  border-width: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  background: ", ";\n  border-color: ", ";\n  border-style: solid;\n  box-shadow: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  > input {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.verticalSpacing || 0;
+}, function (props) {
+  return props.verticalSpacing || 0;
+}, function (props) {
+  return props.fill ? "100%" : "auto";
+}, function (props) {
+  return props.padding || 0;
+}, function (props) {
+  return props.borderWidth || 0;
+}, function (props) {
+  return props.paddingLeft || "auto";
+}, function (props) {
+  return props.paddingRight || "auto";
+}, function (props) {
+  return props.backgroundColor || "";
+}, function (props) {
+  return props.borderColor || "";
+}, function (props) {
+  return props.boxShadow || "";
+}, function (props) {
+  return props.borderRadius || "";
+}, function (props) {
+  return props.fontFamily || "Arial";
+}, function (props) {
+  return props.inputBGColor || "";
+});
+
+BaseMaterial.defaultProps = {};
+var _default = BaseMaterial;
+exports.default = _default;