@mohamed-karawia/library 0.1.0

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

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

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

@@ -0,0 +1,92 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _formik = require("formik");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var CustomSelect = function CustomSelect(props) {
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 3),
+      field = _useField2[0],
+      meta = _useField2[1],
+      helpers = _useField2[2];
+
+  var colourStyles = {
+    control: function control(styles) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        backgroundColor: props.selectBackground || 'white'
+      });
+    },
+    option: function option(styles, _ref) {
+      var isDisabled = _ref.isDisabled,
+          isFocused = _ref.isFocused,
+          isSelected = _ref.isSelected;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        backgroundColor: isDisabled ? null : isSelected ? props.selectedBackground || 'white' : isFocused ? props.hoverBackground || '#aaaaaa' : props.background || null,
+        color: isDisabled ? '#ccc' : isSelected ? props.optionSelectedColor || 'black' : isFocused ? props.optionHoverColor : props.optionColor || 'gray',
+        cursor: isDisabled ? 'not-allowed' : 'default'
+      });
+    },
+    input: function input(styles) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        padding: "".concat(props.padding, "px")
+      });
+    },
+    placeholder: function placeholder(styles) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+        fontFamily: 'sans-serif'
+      });
+    },
+    singleValue: function singleValue(styles, _ref2) {
+      var data = _ref2.data;
+      return (0, _objectSpread2.default)({}, styles);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+    htmlFor: props.name
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
+    name: props.name,
+    options: props.options,
+    value: field.value.value,
+    onChange: function onChange(value) {
+      return helpers.setValue(value.value);
+    },
+    onBlur: function onBlur() {
+      return helpers.setTouched(true);
+    },
+    styles: colourStyles
+  }), meta.touched && meta.error ? /*#__PURE__*/_react.default.createElement(Error, null, meta.error) : null);
+};
+
+var Container = _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    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.labelColor;
+}, function (props) {
+  return props.labelFontSize;
+});
+
+var Error = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+CustomSelect.defaultProps = {};
+var _default = CustomSelect;
+exports.default = _default;

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

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

package/dist/stories/Common Inputs/CustomTextarea/CustomTextarea.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 CustomTextarea = function CustomTextarea(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    // 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 Input = _styledComponents.default.textarea(_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"])));
+
+CustomTextarea.defaultProps = {};
+var _default = CustomTextarea;
+exports.default = _default;

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

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

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

@@ -0,0 +1,104 @@
+"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 _formik = require("formik");
+
+require("react-dates/initialize");
+
+require("react-dates/lib/css/_datepicker.css");
+
+var _reactDates = require("react-dates");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 DatePicker = function DatePicker(props) {
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 3),
+      field = _useField2[0],
+      meta = _useField2[1],
+      helpers = _useField2[2];
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+    htmlFor: props.name
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(_reactDates.DateRangePicker, {
+    startDate: field.value.startDate,
+    startDateId: "your_unique_start_date_id",
+    endDate: field.value.endDate,
+    endDateId: "your_unique_end_date_id",
+    onDatesChange: function onDatesChange(date) {
+      return helpers.setValue(date);
+    },
+    focusedInput: focused,
+    onFocusChange: function onFocusChange(focusedInput) {
+      return setFocused(focusedInput);
+    },
+    onClose: function onClose() {
+      return helpers.setTouched(true);
+    }
+  }), meta.touched && meta.error && (!field.value.startDate || !field.value.endDate) ? /*#__PURE__*/_react.default.createElement(Error, null, meta.error.startDate || meta.error.endDate) : null);
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    & .CalendarDay {\n        border: none;\n        background-color: ", ";\n        color: ", ";\n        font-size: ", "px;\n        border-radius: ", "px;\n        padding: ", "px;\n\n        &:hover{\n            background-color: ", ";\n            color: ", ";;\n        }\n    }\n    \n    & .CalendarDay__selected_span {\n        background-color: ", ";\n        color: ", ";\n}\n\n    & .CalendarDay__selected {\n        color: ", ";\n}\n\n     & .CalendarDay__selected:hover {\n        color: ", ";\n        background: ", ";\n}\n \n  & .CalendarDay__hovered_span:hover,\n  & .CalendarDay__hovered_span {\n    background: ", ";\n    color: ", "\n }\n"])), function (props) {
+  return props.background;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.fontSize;
+}, function (props) {
+  return props.borderRadius;
+}, function (props) {
+  return props.padding;
+}, function (props) {
+  return props.mouseHoverBackground;
+}, function (props) {
+  return props.mouseHoverColor;
+}, function (props) {
+  return props.selectedRangeColor;
+}, function (props) {
+  return props.selectedRangeFontColor;
+}, function (props) {
+  return props.selectedColor;
+}, function (props) {
+  return props.selectedOnHoverColor;
+}, function (props) {
+  return props.selectedOnHoverBackground;
+}, function (props) {
+  return props.rangeHoverBackground;
+}, function (props) {
+  return props.rangeHoverColor;
+});
+
+var Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 5px;\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(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+DatePicker.defaultProps = {};
+var _default = DatePicker;
+exports.default = _default;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.date = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+
+var _SingleDatePicker = _interopRequireDefault(require("./SingleDatePicker"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+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 datePickerSchema = Yup.object().shape({
+  date: Yup.object().shape({
+    startDate: Yup.object().required("Required").typeError('Invalid Start Date'),
+    endDate: Yup.object().required("Required").typeError('Invalid End Date')
+  }),
+  singleDate: Yup.object().required("Required").typeError('Invalid Date')
+});
+var _default = {
+  title: 'Common Inputs/Date Picker',
+  component: _DatePicker.default,
+  decorators: [_storybookFormik.default],
+  parameters: {
+    formik: {
+      initialValues: {
+        date: {
+          startDate: null,
+          endDate: null
+        },
+        singleDate: null
+      },
+      validationSchema: datePickerSchema
+    }
+  }
+};
+exports.default = _default;
+
+var date = function date(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DatePicker.default, Object.assign({
+    label: "Double Date Picker",
+    name: "date"
+  }, args)), /*#__PURE__*/_react.default.createElement(_SingleDatePicker.default, Object.assign({
+    label: "Single Date Picker",
+    name: "singleDate"
+  }, args)));
+};
+
+exports.date = date;

package/dist/stories/Common Inputs/DatePicker/SingleDatePicker.js

@@ -0,0 +1,97 @@
+"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 _formik = require("formik");
+
+require("react-dates/initialize");
+
+require("react-dates/lib/css/_datepicker.css");
+
+var _reactDates = require("react-dates");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 SingleCustomizedDatePicker = function SingleCustomizedDatePicker(props) {
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var _useField = (0, _formik.useField)(props),
+      _useField2 = (0, _slicedToArray2.default)(_useField, 3),
+      field = _useField2[0],
+      meta = _useField2[1],
+      helpers = _useField2[2];
+
+  console.log(field);
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Label, Object.assign({
+    htmlFor: props.name
+  }, props), props.label), /*#__PURE__*/_react.default.createElement(_reactDates.SingleDatePicker, {
+    date: field.value,
+    onDateChange: function onDateChange(date) {
+      return helpers.setValue(date);
+    },
+    focused: focused,
+    onFocusChange: function onFocusChange(_ref) {
+      var focused = _ref.focused;
+      return setFocused(focused);
+    },
+    id: "your_unique_id",
+    numberOfMonths: 1,
+    onClose: function onClose() {
+      return helpers.setTouched(true);
+    }
+  }), meta.touched && meta.error && !field.value ? /*#__PURE__*/_react.default.createElement(Error, null, meta.error) : null);
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    & .CalendarDay {\n        border: none;\n        background-color: ", ";\n        color: ", ";\n        font-size: ", "px;\n        border-radius: ", "px;\n        padding: ", "px;\n\n        &:hover{\n            background-color: ", ";\n            color: ", ";\n        }\n    }\n\n    & .CalendarDay__selected {\n        color: ", ";\n}\n\n     & .CalendarDay__selected:hover {\n        color: ", ";\n        background: ", ";\n}\n"])), function (props) {
+  return props.background;
+}, function (props) {
+  return props.color;
+}, function (props) {
+  return props.fontSize;
+}, function (props) {
+  return props.borderRadius;
+}, function (props) {
+  return props.padding;
+}, function (props) {
+  return props.mouseHoverBackground;
+}, function (props) {
+  return props.mouseHoverColor;
+}, function (props) {
+  return props.selectedColor;
+}, function (props) {
+  return props.selectedOnHoverColor;
+}, function (props) {
+  return props.selectedOnHoverBackground;
+});
+
+var Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 5px;\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(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: red;\n    margin-top: 3px;\n"])));
+
+SingleCustomizedDatePicker.defaultProps = {};
+var _default = SingleCustomizedDatePicker;
+exports.default = _default;