pcm-shared-components 2.0.40 → 2.0.42

package/README.md

@@ -26,4 +26,7 @@ Manually deploying is faster then committing the code as it doesn't need to crea
 # Update the library in other projects by running the following
 > npm install pcm-shared-components@latest
 
+# Or run the following to do it all in one go!
+sh ./publish.sh
+
 ```

package/dist/components/Buttons/DropdownButton/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

package/dist/components/Buttons/TillButton/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

package/dist/components/Cards/EventCard/components/OpenEventCardDialog.js

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Dialog, DialogContent } from '@mui/material';
+import HorizontalImageTile from "../../../Images/HorizontalImageTile";
+import PropTypes from "prop-types";
+import moment from "moment";
+import OpenEventViewAllImageDialog from "./OpenEventViewAllImageDialog";
+import { IconButton } from '@mui/material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+const OpenEventCardDialog = props => {
+  const {
+    id,
+    campground_event_pages_id,
+    state_id,
+    display_on_booking_page,
+    title,
+    description,
+    event_date,
+    pictures,
+    open,
+    closeDialog,
+    view_all_images_str
+  } = props;
+  const [openEventViewAllImageDialog, setOpenEventViewAllImageDialog] = useState(false);
+  const handleOnClose = () => {
+    setOpenEventViewAllImageDialog(false);
+  };
+  const handleOnImageClick = () => {
+    setOpenEventViewAllImageDialog(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
+    classes: {
+      paper: "m-24"
+    },
+    open: open,
+    onClose: closeDialog,
+    fullWidth: true,
+    maxWidth: "md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-start w-full p-10 "
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: "shadow-2",
+    onClick: closeDialog,
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ArrowBackIosNewIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement(HorizontalImageTile, {
+    pictures: pictures,
+    event_date: event_date,
+    onImageClick: handleOnImageClick,
+    view_all_images_str: view_all_images_str
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col m-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex flex-row justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "font-800 capitalize text-24 mt-12"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "font-500 text-24 mt-12 text-grey-800"
+  }, moment(event_date).format('dddd MMMM Do'))), /*#__PURE__*/React.createElement("div", {
+    className: "ml-0 md:ml-12 my-12",
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  }))))), /*#__PURE__*/React.createElement(OpenEventViewAllImageDialog, {
+    open: openEventViewAllImageDialog,
+    closeDialog: handleOnClose,
+    pictures: pictures
+  }));
+};
+OpenEventCardDialog.defaultProps = {
+  id: -1,
+  campground_event_pages_id: -1,
+  state_id: 1,
+  display_on_booking_page: false,
+  title: "",
+  description: "",
+  event_date: moment().format('YYYY-MM-DD'),
+  pictures: [],
+  open: false,
+  closeDialog: () => {},
+  view_all_images_str: "View All Images"
+};
+OpenEventCardDialog.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  campground_event_pages_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  state_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  display_on_booking_page: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  event_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]).isRequired,
+  pictures: PropTypes.array.isRequired,
+  type: PropTypes.string,
+  open: PropTypes.bool,
+  closeDialog: PropTypes.func,
+  view_all_images_str: PropTypes.string
+};
+export default OpenEventCardDialog;

package/dist/components/Cards/EventCard/components/OpenEventViewAllImageDialog.js

@@ -0,0 +1,54 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import { Dialog, DialogContent } from '@mui/material';
+import PropTypes from "prop-types";
+import VerticalImageTile from "../../../Images/VerticalImageTile";
+import Slide from '@mui/material/Slide';
+import { IconButton } from '@mui/material';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+const Transition = /*#__PURE__*/React.forwardRef(function Transition(props, ref) {
+  return /*#__PURE__*/React.createElement(Slide, _extends({
+    direction: "up",
+    ref: ref
+  }, props));
+});
+const OpenEventViewAllImageDialog = props => {
+  const {
+    pictures,
+    open,
+    closeDialog
+  } = props;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: open,
+    onClose: closeDialog,
+    fullScreen: true,
+    TransitionComponent: Transition
+  }, /*#__PURE__*/React.createElement(DialogContent, {
+    classes: {
+      root: "p-24"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-start w-full m-10"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: "shadow-2 ",
+    onClick: closeDialog,
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ArrowBackIosNewIcon, {
+    className: "material-icons text-32"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "mt-12 w-3/4 mx-auto"
+  }, /*#__PURE__*/React.createElement(VerticalImageTile, {
+    pictures: pictures
+  }))));
+};
+OpenEventViewAllImageDialog.defaultProps = {
+  pictures: [],
+  open: false,
+  closeDialog: () => {}
+};
+OpenEventViewAllImageDialog.propTypes = {
+  pictures: PropTypes.array.isRequired,
+  open: PropTypes.bool,
+  closeDialog: PropTypes.func
+};
+export default OpenEventViewAllImageDialog;

package/dist/components/Cards/EventCard/index.js

@@ -0,0 +1,101 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import moment from "moment";
+import Button from '@mui/material/Button';
+import OpenEventCardDialog from './components/OpenEventCardDialog';
+import FancyDate from '../../Date/FancyDate';
+export const EventCard = ({
+  event,
+  view_all_images_str
+}) => {
+  const pictures = event.pictures || [];
+  const [currentImage, setCurrentImage] = useState(0);
+  const [openEventCardDialog, setOpenEventCardDialog] = useState(false);
+
+  //---------------------------------------------------
+  // Use Effect 
+  //---------------------------------------------------
+  useEffect(() => {
+    if (pictures.length > 1) {
+      const interval = setInterval(() => {
+        if (!openEventCardDialog) {
+          setCurrentImage(currentImage => {
+            const randomIndex = Math.floor(Math.random() * pictures.length);
+            return randomIndex !== currentImage ? randomIndex : (randomIndex + 1) % pictures.length;
+          });
+        }
+      }, 5000 + Math.floor(Math.random() * 3000));
+
+      // Clear interval when openEventCardDialog becomes true
+      if (openEventCardDialog) {
+        clearInterval(interval);
+      }
+      return () => clearInterval(interval);
+    }
+  }, [event, openEventCardDialog]);
+  const backgroundImage = pictures.length > 0 ? `url(${pictures[currentImage]})` : "";
+  const hasImages = pictures.length > 0;
+
+  //---------------------------------------------------
+  // Local Functions 
+  //---------------------------------------------------
+  function isDatePassed(dateString) {
+    const date = moment(dateString);
+    return date.isBefore();
+  }
+  const getRandomTransition = useCallback(() => {
+    const randomSeconds = Math.floor(Math.random() * 2) + 1;
+    const randomEase = ["ease-in-out", "ease-in", "ease-out", "linear", "cubic-bezier(0.25, 0.1, 0.25, 1)", "ease-in-back", "ease-out-back", "ease-in-out-back", "ease-in-elastic", "ease-out-elastic", "ease-in-out-elastic", "cubic-bezier(0.68, -0.55, 0.265, 1.55)", "cubic-bezier(0.42, 0, 0.58, 1)"][Math.floor(Math.random() * 13)];
+    return `background-image ${randomSeconds}s ${randomEase}`;
+  }, []);
+  const handleCloseDialog = useCallback(() => {
+    setOpenEventCardDialog(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    key: event.id,
+    className: "relative rounded overflow-hidden shadow min-h-224 bg-cover cursor-pointer w-full",
+    style: {
+      backgroundImage,
+      transition: getRandomTransition(),
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover'
+    },
+    onClick: () => {
+      setOpenEventCardDialog(true);
+    }
+  }, !hasImages && /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-0 flex justify-center items-center text-gray-300 font-bold bg-gray-800"
+  }, /*#__PURE__*/React.createElement(FancyDate, {
+    date: event.event_date
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "absolute bottom-0 left-0 right-0 normal-case text-white px-6 py-4 ",
+    style: {
+      background: 'rgba(0,0,0,0.5)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "font-bold text-xl mb-2 capitalize overflow-ellipsis overflow-hidden whitespace-nowrap text-left"
+  }, event.title), /*#__PURE__*/React.createElement("div", {
+    className: "text-gray-300 normal-case text-base overflow-ellipsis overflow-hidden whitespace-nowrap pr-6 text-left max-h-32"
+  }, event.description.replace(/<[^>]+>/g, '')), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-end  mt-4"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "inline-block normal-case text-16 font-800 text-white overflow-ellipsis overflow-hidden whitespace-nowrap"
+  }, moment(event.event_date).format('dddd MMMM Do'))))), /*#__PURE__*/React.createElement(OpenEventCardDialog, _extends({}, event, {
+    open: openEventCardDialog,
+    closeDialog: handleCloseDialog,
+    view_all_images_str: view_all_images_str
+  })));
+};
+EventCard.propTypes = {
+  event: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    pictures: PropTypes.arrayOf(PropTypes.string),
+    event_date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]).isRequired,
+    state_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  }),
+  view_all_images_str: PropTypes.string
+};
+export default EventCard;

package/dist/components/Date/{DateRangeCalendar → DatePickerReactStyled/DateCalendar}/css/style.css

@@ -11,6 +11,11 @@
     background: linear-gradient(to right, rgb(70, 83, 52) 0%, #526B33 100%) !important;
   }
   
+  /* Override the grid drop down so it's not long when in vertical mode so the next calendar button are always near the bottom of the dropdown */
+  [data-testid="MonthGrid"] {
+    height: 100% !important; /* Adjust as necessary */
+  }
+
   
   .back_blocks_small{
   background-color:#f1632f;

package/dist/components/Date/DatePickerReactStyled/DateCalendar/index.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { green } from '@mui/material/colors';
+import { Datepicker } from '@datepicker-react/styled';
+import { ThemeProvider } from 'styled-components';
+import './css/style.css';
+import { commonCalendarTheme } from '../common/theme';
+
+/**
+ * example with styling https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
+ * 
+ * Same component as DateRangeCalendar but without the range input and the user can't select a range of dates.
+ * Usefull for showing a calendar with the available dates for booking.
+ * 
+ * ## Importing the component in your project
+ * 
+ ```js
+ import {DateCalendar} from 'pcm-shared-components';
+ ```
+ *
+ */
+export const DateCalendar = props => {
+  const {
+    minBookingDate,
+    numberOfMonthsVisible,
+    dateFormat,
+    minBookingDays,
+    onDayRender,
+    isDateBlocked,
+    focusedInput,
+    onDatesChange,
+    startDate,
+    endDate,
+    variant,
+    vertical,
+    showSelectedDates,
+    zIndex,
+    i18next,
+    daySize,
+    datepickerPadding
+  } = props;
+  const handleOnDayRender = date => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender ? /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender(date)) : /*#__PURE__*/React.createElement("span", {
+      className: ""
+    }, new Date(date).getDate()));
+  };
+  const handleIsDateBlocked = date => {
+    try {
+      if (typeof isDateBlocked === 'function') {
+        return isDateBlocked(date);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    return false;
+  };
+  const handleOnDatesChange = data => {
+    try {
+      if (typeof onDatesChange === 'function') {
+        onDatesChange(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const overrideCalendarTheme = {};
+  return /*#__PURE__*/React.createElement("div", {
+    className: `m-auto pt-0 md:pt-0 ${variant === 'standard' ? 'bottom_border' : undefined}`,
+    style: {
+      zIndex: 100
+    }
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: commonCalendarTheme({
+      ...props
+    },
+    // Main configuration object
+    {
+      colors: {
+        primaryColor: green[300],
+        accessibility: green[300],
+        selectedDay: green[300],
+        selectedDayHover: green[300]
+        // normalDayHover: 'transparent',
+      }
+    } // Additional theme configuration
+    )
+  }, /*#__PURE__*/React.createElement(Datepicker, {
+    phrases: {
+      datepickerStartDateLabel: i18next.t('common.app.arrival_date'),
+      datepickerEndDateLabel: i18next.t('common.app.departure_date'),
+      resetDates: i18next.t('common.app.reset'),
+      close: i18next.t('common.app.close'),
+      datepickerStartDatePlaceholder: i18next.t('common.app.arrival_date'),
+      datepickerEndDatePlaceholder: i18next.t('common.app.departure_date'),
+      startDateAriaLabel: i18next.t('common.app.arrival_date'),
+      endDateAriaLabel: i18next.t('common.app.departure_date'),
+      startDatePlaceholder: i18next.t('common.app.arrival_date'),
+      endDatePlaceholder: i18next.t('common.app.departure_date')
+    },
+    showSelectedDates: showSelectedDates,
+    showResetDates: false,
+    showClose: false,
+    onDayRender: handleOnDayRender,
+    isDateBlocked: handleIsDateBlocked,
+    firstDayOfWeek: 0,
+    minBookingDays: minBookingDays,
+    minBookingDate: minBookingDate,
+    vertical: vertical,
+    numberOfMonths: numberOfMonthsVisible,
+    onDatesChange: handleOnDatesChange,
+    startDate: startDate // Date or null
+    ,
+    endDate: endDate // Date or null
+    ,
+    focusedInput: focusedInput,
+    displayFormat: dateFormat
+  })));
+};
+export default DateCalendar;
+DateCalendar.defaultProps = {
+  minBookingDate: new Date(new Date().setDate(new Date().getDate() + 1)),
+  numberOfMonthsVisible: 2,
+  dateFormat: 'MMM d, yyyy',
+  minBookingDays: 1,
+  onDayRender: undefined,
+  isDateBlocked: undefined,
+  onDatesChange: undefined,
+  startDate: null,
+  endDate: null,
+  focusedInput: null,
+  variant: 'standard',
+  vertical: false,
+  zIndex: 1000,
+  i18next: undefined,
+  daySize: 40,
+  datepickerPadding: 25,
+  showSelectedDates: false
+};
+DateCalendar.propTypes = {
+  /** Used to provide the minimum booking date.  To allow date selection past todays date simply pas it an old past date example 'new Date('1999-10-02')' */
+  minBookingDate: PropTypes.instanceOf(Date),
+  /** Number of calendar months to display.*/
+  numberOfMonthsVisible: PropTypes.number,
+  /** Date format to use when displaying the selected dates in the text boxes.*/
+  dateFormat: PropTypes.string,
+  /** Min booking days allowing the user to select a valid date range.*/
+  minBookingDays: PropTypes.number,
+  /** Provides a (date:date) props to the function and expects a React.ReactNode component to be returned */
+  onDayRender: PropTypes.func,
+  /** Provides a (date:date) props to the function and expects a boolean value returned which tells the calendar to either block or not that day*/
+  isDateBlocked: PropTypes.func,
+  /** Provides a (data) props to the function and doesn't expect any return value*/
+  onDatesChange: PropTypes.func,
+  /** The stat date of the calendar */
+  startDate: PropTypes.instanceOf(Date),
+  /** The end date of the calendar */
+  endDate: PropTypes.instanceOf(Date),
+  /** Determines on which input the calendar will be focused on.  Null = nothing meaning the calendar should be closed if null*/
+  focusedInput: PropTypes.oneOf(['startDate', 'endDate', null]),
+  /** Controls the type of border to display around the date input boxes*/
+  variant: PropTypes.oneOf(['outlined', 'standard', 'none']),
+  /** Controls the orientation of the calendar */
+  vertical: PropTypes.bool,
+  /** Controls the z-index of the calendar dropdown date selection */
+  zIndex: PropTypes.number,
+  /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
+  i18next: PropTypes.any,
+  /** Controls the size of the day in the calendar */
+  daySize: PropTypes.number,
+  /** Controls the padding of the datepicker */
+  datepickerPadding: PropTypes.number,
+  /** Controls the visibility of the selected dates in the calendar */
+  showSelectedDates: PropTypes.bool
+};

package/dist/components/Date/DatePickerReactStyled/DateCalendar/storybook/index.docs.mdx

@@ -0,0 +1,122 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import Datepicker from '..'
+
+
+# Datepicker
+
+## Importing the component in your project.
+
+```js
+import {Datepicker} from 'pcm-shared-components';
+```
+
+### Usage
+Check out the index.stories.jsx file DateRangeCalendarComp to see a full simple example of how it whould be used in.
+
+#### Minimum REQUIRED setup NEEDED to get the Datepicker working:
+```js
+import React, {useState} from 'react'
+import {Datepicker } from 'pcm-shared-components';
+
+function App() {
+
+  //States
+  const [state, setState] = useState({ startDate: null, endDate: null, focusedInput: 'startDate' })
+
+  //Functions
+  const handleDatesChange = (data) => {
+    setState(data)
+  }
+  const handleOnFocusChange = (data) =>{
+    setState((previousState)=>{return{...previousState,focusedInput:data}});
+  }
+
+  return (
+    <Datepicker
+      onDatesChange={handleDatesChange}
+      onFocusChange={handleOnFocusChange}
+      startDate={state.startDate} // Date or null
+      endDate={state.endDate} // Date or null
+      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
+      i18next={i18next}
+    />
+  )
+}
+```
+### See a Codesandbox example with styling
+https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
+
+### Styling Props
+The following are the theme props taken form the codesandbox from above so I have a local copy of the possible props.
+```js
+ <ThemeProvider
+      theme={{
+        breakpoints: ["32em", "48em", "64em"],
+        reactDatepicker: {
+          daySize: [36, 36],
+          fontFamily: "system-ui, -apple-system",
+          colors: {
+            primaryColor: "#4B35D2",
+            accessibility: "#4B35D2",
+            selectedDay: "#EEEDFD",
+            selectedDayHover: "#faf9fd",
+            normalDayHover: "#faf9fd"
+          },
+
+          dayLabelFontSize: 10,
+          dayLabelColor: "#8F8B9B",
+
+          selectDateLabelFontSize: 10,
+          selectDateLabelColor: "#D0CED5",
+          selectDateDateFontSize: 14,
+          selectDateDateColor: "#34323A",
+          selectDateBorderColor: "#4B35D2",
+
+          navButtonBorder: "none",
+
+          monthLabelFontSize: 16,
+          monthLabelFontWeight: 600,
+
+          dayBackground: "#ffffff",
+          dayBorderColor: "transparent",
+          dayColor: "#34323A",
+          dayFontSize: 15,
+          daySelectedBorderColor: "transparent",
+          daySelectedColor: "#34323A",
+          daySelectedHoverColor: "#000000",
+          dayHoverColor: "#000000",
+          dayHoverBackground: "#EEEDFD",
+          //dayHoverRangeColor: "#000000", // attention
+          dayHoverRangeBackground: "#EEEDFD",
+          dayAccessibilityBorderColor: "none",
+
+          inputLabelDisplay: "flex",
+          inputLabelBorder: "none",
+          inputLabelMargin: 0,
+          inputPadding: 0,
+          inputBorder: "none",
+          inputFontSize: 14,
+          inputColor: "#34323A",
+          inputActiveBoxShadow: "none",
+          inputBackground: "none",
+
+          datepickerZIndex: 1,
+          datepickerBoxShadow: "0px 5px 15px #28128733",
+          datepickerBorderRadius: 5,
+          datepickerPadding: 25,
+          datepickerPosition: "absolute",
+          datepickerMonthsGridGap: 10,
+
+          dateRangeBorder: "none",
+          dateRangeArrowIconColor: "#34323A",
+          dateRangeStartDateInputPadding: 0,
+          dateRangeEndDateInputPadding: 0,
+          dateRangeDatepickerWrapperLeft: 30,
+          dateRangeDatepickerWrapperTop: 80
+        }
+      }}
+    >
+```
+
+
+<ArgsTable of={Datepicker} />

package/dist/components/Date/DatePickerReactStyled/DateCalendar/storybook/index.stories.js

@@ -0,0 +1,74 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useState } from 'react';
+import DateCalendar from '..';
+import IndexDocs from './index.docs.mdx';
+import i18next from 'i18next';
+const DateCalendarComp = props => {
+  //State
+  const startDate = new Date();
+  const endDate = new Date();
+  endDate.setDate(startDate.getDate() + 14);
+  const [state, setState] = useState({
+    startDate,
+    endDate,
+    focusedInput: null
+  });
+
+  //Functions
+  const handleOnDayRender = date => {
+    if (new Date(date).getDate() == 20 || new Date(date).getDate() == 21) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col =h-full w-full m-auto"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: " relative -top-2 text-green-700"
+      }, "\u2713"), /*#__PURE__*/React.createElement("span", {
+        className: "relative -top-6 h-full text-center m-auto "
+      }, new Date(date).getDate()));
+    } else {
+      return /*#__PURE__*/React.createElement("span", null, new Date(date).getDate());
+    }
+  };
+  const handleIsDateBlocked = date => {
+    try {
+      return new Date(date).getDate() == 16;
+    } catch (error) {
+      console.error(error);
+    }
+    return false;
+  };
+  const handleOnDatesChange = data => {
+    setState(data);
+  };
+  return /*#__PURE__*/React.createElement(DateCalendar, _extends({
+    onDayRender: date => handleOnDayRender(date),
+    isDateBlocked: handleIsDateBlocked,
+    onDatesChange: handleOnDatesChange,
+    startDate: state.startDate,
+    endDate: state.endDate,
+    focusedInput: state.focusedInput,
+    minBookingDays: 2,
+    i18next: i18next,
+    daySize: 40,
+    datepickerPadding: 25
+  }, props));
+};
+export default {
+  title: 'Date/DateCalendar',
+  component: DateCalendarComp,
+  argTypes: {},
+  parameters: {
+    docs: {
+      // inlineStories: true,
+      page: IndexDocs
+    }
+  }
+};
+const DateCalendarTemplate = args => /*#__PURE__*/React.createElement(DateCalendarComp, args);
+export const DateCalendarExample = DateCalendarTemplate.bind({});
+DateCalendarExample.args = {
+  Help: 'Note not all props listed see docs for full list...',
+  variant: 'standard',
+  numberOfMonthsVisible: 2,
+  daySize: 40,
+  datepickerPadding: 25
+};