@gympass/yoga 7.49.0 → 7.50.0

package/esm/Datepicker/web/Datepicker.js

@@ -0,0 +1,246 @@
+var _excluded = ["_disabled", "inputFilled"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Booking, BookingFilled } from '@gympass/yoga-icons';
+import { Text } from '@gympass/yoga';
+import styled, { css } from 'styled-components';
+import { bool, oneOf, func, instanceOf, string } from 'prop-types';
+import moment from 'moment';
+import { theme } from '../../Theme';
+import Calendar from './Calendar';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
+  return props.fullWidth ? '100%' : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), theme.components.input.width);
+});
+
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+  if (error) {
+    return colors.feedback.attention[1];
+  }
+
+  if (disabled) {
+    return colors.elements.backgroundAndDisabled;
+  }
+
+  if (open) {
+    return colors.deep;
+  }
+
+  return input.border.color["default"];
+};
+
+var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var open = _ref.open,
+      error = _ref.error,
+      disabled = _ref.disabled,
+      _ref$theme$yoga = _ref.theme.yoga,
+      components = _ref$theme$yoga.components,
+      colors = _ref$theme$yoga.colors,
+      spacing = _ref$theme$yoga.spacing;
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+});
+var Input = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+      colors = _ref2.theme.yoga.colors;
+  return "\n    width: 100%;\n    padding: 0;\n    border: none;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: " + (!disabled ? colors.text.primary : colors.text.disabled) + "\n  ";
+});
+var InputPlaceholder = styled(Text.Small)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var disabled = _ref3.disabled,
+      colors = _ref3.theme.yoga.colors;
+  return "\n    color: " + (!disabled ? colors.text.secondary : colors.text.disabled) + "\n  ";
+});
+var TButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: flex-end;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  outline: none;\n  background-color: transparent;\n  cursor: pointer;\n"])));
+var Panel = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var _ref4$theme$yoga = _ref4.theme.yoga,
+      components = _ref4$theme$yoga.components,
+      colors = _ref4$theme$yoga.colors,
+      radii = _ref4$theme$yoga.radii,
+      borders = _ref4$theme$yoga.borders,
+      spacing = _ref4$theme$yoga.spacing;
+  return "\n    position: absolute;\n    background-color: " + colors.white + ";\n    border: " + borders.small + "px solid " + colors.elements.lineAndBorders + ";\n    z-index: 1;\n    width: " + components.input.width + "px;\n    left: 0;\n    border-radius: " + radii.regular + "px;\n    margin-top: " + spacing.xxsmall + "px;\n  ";
+});
+var CalendarIcon = styled(function (_ref5) {
+  var _disabled = _ref5._disabled,
+      inputFilled = _ref5.inputFilled,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+
+  return !inputFilled ? /*#__PURE__*/React.createElement(Booking, _extends({
+    width: 20,
+    height: 20
+  }, props)) : /*#__PURE__*/React.createElement(BookingFilled, _extends({
+    width: 20,
+    height: 20
+  }, props));
+})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
+  var disabled = _ref6.disabled,
+      _ref6$theme$yoga = _ref6.theme.yoga,
+      colors = _ref6$theme$yoga.colors,
+      spacing = _ref6$theme$yoga.spacing;
+  return "\n    fill: " + (disabled ? colors.text.disabled : colors.text.primary) + ";\n    margin-right: " + spacing.xxsmall + "px;\n  ";
+});
+var ErrorWrapper = styled(Text.Small)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
+  var _ref7$theme$yoga = _ref7.theme.yoga,
+      colors = _ref7$theme$yoga.colors,
+      components = _ref7$theme$yoga.components;
+  return "\n    margin-top: " + components.input.helper.margin.top + "px;\n    font-size: " + components.input.helper.font.size + "px;\n    color: " + colors.feedback.attention[1] + ";\n    position: absolute;\n  ";
+});
+export var toUTC = function toUTC(date) {
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+};
+
+function Datepicker(_ref8) {
+  var fullWidth = _ref8.fullWidth,
+      type = _ref8.type,
+      placeholder = _ref8.placeholder,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
+      onSelectSingle = _ref8.onSelectSingle,
+      disabled = _ref8.disabled,
+      onSelectRange = _ref8.onSelectRange,
+      disablePastDates = _ref8.disablePastDates,
+      disableFutureDates = _ref8.disableFutureDates,
+      error = _ref8.error,
+      onOpen = _ref8.onOpen;
+
+  var _useState = useState(),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var _useState2 = useState(startDate),
+      startD = _useState2[0],
+      setStartDate = _useState2[1];
+
+  var _useState3 = useState(endDate),
+      endD = _useState3[0],
+      setEndDate = _useState3[1];
+
+  var ref = useRef(null);
+
+  var _useState4 = useState(false),
+      inputFilled = _useState4[0],
+      setInputFilled = _useState4[1];
+
+  var triggerOnOpen = useCallback(function () {
+    if (onOpen) onOpen(open === 'true');
+  }, [open]);
+
+  var onBlur = function onBlur() {
+    setOpen(false.toString());
+    triggerOnOpen();
+  };
+
+  useEffect(function () {
+    if (type === 'single' && onSelectSingle) {
+      onSelectSingle(startD);
+      setOpen(false.toString());
+    } else if (type === 'range' && onSelectRange) {
+      onSelectRange(startD, endD);
+    }
+
+    setInputFilled(!!startD);
+  }, [startD, endD]);
+
+  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
+    setStartDate(startLocal);
+  };
+
+  useEffect(function () {
+    if (open === 'true') ref.current.focus();
+  }, [open]);
+
+  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
+    if (!endD) {
+      if (!startD) {
+        setStartDate(selectedDate);
+      } else if (selectedDate < startD) {
+        setStartDate(selectedDate);
+        setEndDate(undefined);
+      } else setEndDate(selectedDate);
+    } else {
+      setStartDate(selectedDate);
+      setEndDate(undefined);
+    }
+  };
+
+  var renderInput = function renderInput() {
+    if (!startD && !endD) {
+      return /*#__PURE__*/React.createElement(InputPlaceholder, {
+        disabled: disabled
+      }, placeholder != null ? placeholder : "Select Date");
+    }
+
+    var dateFormat = 'MMM D, YYYY';
+    return startD && /*#__PURE__*/React.createElement(Input, {
+      disabled: disabled
+    }, moment(startD).format(dateFormat), endD && " - " + moment(endD).format(dateFormat));
+  };
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    fullWidth: fullWidth,
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    open: open === 'true',
+    disabled: disabled,
+    error: error
+  }, renderInput(), /*#__PURE__*/React.createElement(TButton, {
+    onClick: function onClick() {
+      if (!disabled) {
+        setOpen((open !== 'true').toString());
+      }
+
+      triggerOnOpen();
+    }
+  }, /*#__PURE__*/React.createElement(CalendarIcon, {
+    disabled: disabled,
+    inputFilled: inputFilled
+  }))), error && /*#__PURE__*/React.createElement(ErrorWrapper, null, error), open === 'true' && /*#__PURE__*/React.createElement(Panel, {
+    tabIndex: -1,
+    ref: ref,
+    onBlur: onBlur
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    type: type,
+    startDate: startD,
+    endDate: endD,
+    onSelectSingle: onDateSingleSelect,
+    onSelectRange: onDateRangeSelect,
+    disablePastDates: disablePastDates,
+    disableFutureDates: disableFutureDates
+  })));
+}
+
+Datepicker.propTypes = {
+  fullWidth: bool,
+  type: oneOf(['single', 'range']).isRequired,
+  placeholder: string,
+  startDate: instanceOf(Date),
+  endDate: instanceOf(Date),
+  disabled: bool,
+  onSelectSingle: func,
+  onSelectRange: func,
+  disablePastDates: bool,
+  disableFutureDates: bool,
+  error: string,
+  onOpen: func
+};
+Datepicker.defaultProps = {
+  fullWidth: false,
+  placeholder: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  disabled: false,
+  onSelectSingle: undefined,
+  onSelectRange: undefined,
+  disablePastDates: false,
+  disableFutureDates: false,
+  error: undefined,
+  onOpen: undefined
+};
+export default Datepicker;

package/esm/Datepicker/web/Datepicker.test.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import moment from 'moment';
+import { ThemeProvider, Datepicker } from '../..';
+describe('<Datepicker />', function () {
+  var testDate = new Date(2022, 7, 3);
+  describe('Snapshots', function () {
+    it('should match with single Datepicker', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single"
+      }))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with range Datepicker', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected date single Datepicker', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected dates range Datepicker', function () {
+      var endDate = new Date();
+      endDate.setDate(testDate.getDate() + 15);
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        startDate: testDate,
+        endDate: endDate
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with custom placeholder single Datepicker', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled past dates Datepicker', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastDates: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled future dates Datepicker', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disableFutureDates: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled Datepicker', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disabled: true
+      }))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error Datepicker', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        error: "This is an error"
+      }))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Unit', function () {
+    var dateFormat = 'MMM D, YYYY';
+    it('should call onSelectSingle function on single Datepicker', function () {
+      var onSelectSingle = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        onSelectSingle: onSelectSingle
+      })));
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      fireEvent.click(day10);
+      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+    });
+    it('should call onSelectRange function on range Datepicker', function () {
+      var onSelectRange = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        onSelectRange: onSelectRange
+      })));
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      var day20 = screen.queryAllByText('20')[0];
+      fireEvent.click(day10);
+      expect(onSelectRange).toHaveBeenCalledTimes(2);
+      fireEvent.click(day20);
+      expect(onSelectRange).toHaveBeenCalledTimes(3);
+    });
+    it('should display default date on single Datepicker', function () {
+      var currentDate = new Date();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: currentDate
+      })));
+      var formattedDate = moment(currentDate).format(dateFormat);
+      expect(screen.getByText(formattedDate)).toBeVisible();
+    });
+    it('should display default date range on range Datepicker', function () {
+      var currentDate = new Date();
+      var end = new Date();
+      end.setDate(currentDate.getDate() + 15);
+      var formattedStartDate = moment(currentDate).format(dateFormat);
+      var formattedEndDate = moment(end).format(dateFormat);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        startDate: currentDate,
+        endDate: end
+      })));
+      expect(screen.getByText(formattedStartDate + " - " + formattedEndDate)).toBeVisible();
+    });
+    it('should display custom placeholder and "Select Date" if none is provided', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          rerender = _render10.rerender;
+
+      expect(screen.getByText('This is a custom placeholder :)')).toBeVisible();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single"
+      })));
+      expect(screen.getByText('Select Date')).toBeVisible();
+    });
+    it('should disable past dates', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastDates: true
+      })));
+      fireEvent.click(screen.getByRole('button'));
+      var previousMonthArrow = screen.getByTestId('previous-month-arrow');
+      fireEvent.click(previousMonthArrow);
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should disable future dates', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disableFutureDates: true
+      })));
+      fireEvent.click(screen.getByRole('button'));
+      var nextMonthArrow = screen.getByTestId('next-month-arrow');
+      fireEvent.click(nextMonthArrow);
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should be disabled', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disabled: true
+      })));
+      var formattedDate = moment(testDate).format(dateFormat);
+      var datepickerInput = screen.getByText(formattedDate);
+      expect(datepickerInput).toHaveAttribute('disabled');
+      expect(datepickerInput.closest('div')).toHaveAttribute('disabled');
+    });
+    it('should display an error', function () {
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        error: "This is an error"
+      })));
+      expect(screen.getByText('This is an error')).toBeVisible();
+    });
+  });
+});

package/esm/Datepicker/web/index.js

@@ -0,0 +1,2 @@
+import Datepicker from './Datepicker';
+export default Datepicker;

package/esm/Theme/theme/theme.js

@@ -12,6 +12,7 @@ import _componentThemes_Card$Card from "./../../Card/Card.theme.js";
 import _componentThemes_Card$CardWeb from "./../../Card/Card.web.theme.js";
 import _componentThemes_Checkbox$Checkbox from "./../../Checkbox/Checkbox.theme.js";
 import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxSwitch.theme.js";
+import _componentThemes_Datepicker$Datepicker from "./../../Datepicker/Datepicker.theme.js";
 import _componentThemes_Dialog$Dialog from "./../../Dialog/Dialog.theme.js";
 import _componentThemes_Divider$Divider from "./../../Divider/Divider.theme.js";
 import _componentThemes_Drawer$Drawer from "./../../Drawer/Drawer.theme.js";
@@ -46,6 +47,7 @@ var componentThemes = {
   Card$CardWeb: _componentThemes_Card$CardWeb,
   Checkbox$Checkbox: _componentThemes_Checkbox$Checkbox,
   Checkbox$CheckboxSwitch: _componentThemes_Checkbox$CheckboxSwitch,
+  Datepicker$Datepicker: _componentThemes_Datepicker$Datepicker,
   Dialog$Dialog: _componentThemes_Dialog$Dialog,
   Divider$Divider: _componentThemes_Divider$Divider,
   Drawer$Drawer: _componentThemes_Drawer$Drawer,

package/esm/index.js

@@ -28,6 +28,7 @@ import Menu from './Menu';
 import Banner from './Banner';
 import Heading from './Heading';
 import Feedback from './Feedback';
+import Datepicker from './Datepicker';
 import Drawer from './Drawer';
 import Skeleton from './Skeleton';
-export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Drawer, Skeleton };
+export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.49.0",
+  "version": "7.50.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -51,7 +51,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "3862cde61ad643c9eb46ae601081f376e9d76196",
+  "gitHead": "2e47f0194f1ae130b94a7ab79f757e7b92a99c0c",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"