@punch-in/buffet-modern-core 3.3.11

package/src/components/DatePicker/index.js

@@ -0,0 +1,213 @@
+/**
+ *
+ * Datepicker
+ *
+ */
+
+import React, { useEffect, useReducer } from 'react';
+import PropTypes from 'prop-types';
+
+import moment from 'moment';
+import momentPropTypes from 'react-moment-proptypes';
+import 'react-dates/initialize';
+import { DayPickerSingleDateController } from 'react-dates';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { DatePicker as StyledDatepicker } from '@punch-in/buffet-modern';
+
+import reducer, { initialState } from './reducer';
+
+import Input from '../InputText';
+
+function Datepicker({
+  className,
+  value,
+  withDefaultValue,
+  disabled,
+  displayFormat,
+  id,
+  name,
+  onChange,
+  readOnly,
+  tabIndex,
+  wait,
+}) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    let date = null;
+    let displayedDate = '';
+
+    if (withDefaultValue && !value) {
+      date = moment();
+      displayedDate = date.format('MM/DD/YYYY');
+    }
+
+    if (!!value && moment(value).isValid()) {
+      date = value._isAMomentObject === true ? value : moment(value);
+      displayedDate = date.format('MM/DD/YYYY');
+    }
+
+    dispatch({
+      type: 'SET_DATE',
+      date,
+    });
+
+    dispatch({
+      type: 'SET_DISPLAYED_DATE',
+      displayedDate,
+    });
+  }, [value, withDefaultValue]);
+
+  let timer = null;
+  const { date, displayedDate, isFocused, isVisible } = state;
+
+  const getDateValue = () => {
+    let dateValue = date ? date.format(displayFormat) : '';
+
+    if (isVisible) {
+      dateValue = displayedDate;
+    }
+
+    return dateValue;
+  };
+
+  const handleChange = ({ target }) => {
+    clearTimeout(timer);
+
+    dispatch({
+      type: 'SET_IS_FOCUSED',
+      isFocused: false,
+    });
+
+    dispatch({
+      type: 'SET_DISPLAYED_DATE',
+      displayedDate: target.value,
+    });
+
+    timer = setTimeout(() => {
+      // Clearing the input
+      if (!target.value) {
+        onChange({ target: { name, type: 'date', value: null } });
+
+        dispatch({
+          type: 'SET_DATE',
+          date: null,
+        });
+
+        dispatch({
+          type: 'SET_DISPLAYED_DATE',
+          displayedDate: '',
+        });
+
+        return;
+      }
+
+      handleDateChange(moment(target.value, 'MM/DD/YYYY'));
+    }, wait);
+  };
+
+  const handleDateChange = dateValue => {
+    if (moment(dateValue).isValid()) {
+      onChange({ target: { name, type: 'date', value: dateValue } });
+
+      dispatch({
+        type: 'SET_DATE',
+        date: dateValue,
+      });
+
+      dispatch({
+        type: 'SET_DISPLAYED_DATE',
+        displayedDate: dateValue.format('MM/DD/YYYY'),
+      });
+    }
+  };
+
+  const handleDateClick = dateValue => {
+    handleDateChange(dateValue);
+
+    toggleDatepicker(false);
+  };
+
+  const handleTabClick = ({ keyCode, which }) => {
+    const code = keyCode || which;
+
+    if (code === 9) {
+      toggleDatepicker(false);
+    }
+  };
+
+  const toggleDatepicker = shown => {
+    dispatch({
+      type: 'SET_IS_VISIBLE',
+      isVisible: shown,
+    });
+
+    dispatch({
+      type: 'SET_IS_FOCUSED',
+      isFocused: shown,
+    });
+  };
+
+  return (
+    <StyledDatepicker isOpen={isVisible} className={className}>
+      <div>
+        <Input
+          disabled={disabled}
+          type="text"
+          name="start_date"
+          id={id || name}
+          value={getDateValue()}
+          readOnly={readOnly}
+          onChange={handleChange}
+          icon={<FontAwesomeIcon icon={faCalendarAlt} />}
+          onFocus={() => toggleDatepicker(true)}
+          onClick={() => toggleDatepicker(true)}
+          onKeyDown={handleTabClick}
+          tabIndex={tabIndex}
+        />
+      </div>
+      {isFocused && (
+        <DayPickerSingleDateController
+          date={date}
+          focused
+          numberOfMonths={1}
+          onDateChange={handleDateClick}
+          onOutsideClick={() => toggleDatepicker(false)}
+          daySize={37}
+          transitionDuration={0}
+        />
+      )}
+    </StyledDatepicker>
+  );
+}
+
+Datepicker.defaultProps = {
+  className: null,
+  disabled: false,
+  displayFormat: 'MMMM DD, YYYY',
+  id: 'date',
+  onChange: () => {},
+  readOnly: false,
+  tabIndex: '0',
+  value: null,
+  wait: 600,
+  withDefaultValue: false,
+};
+
+Datepicker.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  displayFormat: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([momentPropTypes.momentObj, PropTypes.string]),
+  wait: PropTypes.number,
+  withDefaultValue: PropTypes.bool,
+};
+
+export default Datepicker;

package/src/components/DatePicker/reducer.js

@@ -0,0 +1,27 @@
+const initialState = {
+  date: null,
+  displayedDate: '',
+  isFocused: false,
+  isVisible: false,
+  visibleDate: '',
+};
+
+function reducer(state, action) {
+  const { date, displayedDate, isFocused, isVisible, type } = action;
+
+  switch (type) {
+    case 'SET_DATE':
+      return { ...state, date };
+    case 'SET_DISPLAYED_DATE':
+      return { ...state, displayedDate };
+    case 'SET_IS_FOCUSED':
+      return { ...state, isFocused };
+    case 'SET_IS_VISIBLE':
+      return { ...state, isVisible };
+    default:
+      return state;
+  }
+}
+
+export default reducer;
+export { initialState };

package/src/components/DatePicker/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DatePicker /> should match snapshot 1`] = `
+<DocumentFragment>
+  .c0 {
+  position: relative;
+}
+
+.c0 * {
+  font-family: 'Lato';
+  outline: 0;
+  box-sizing: border-box;
+}
+
+.c0 .DateInput {
+  width: 100%;
+}
+
+.c0 svg.fa-calendar-alt {
+  font-size: 14px;
+}
+
+.c0 input {
+  font-weight: 400;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 3.4rem;
+  padding: 0 1rem;
+  font-size: 1.3rem;
+  cursor: pointer;
+  border: 1px solid #E3E9F3;
+  border-radius: 2px;
+  color: #000000;
+  background-color: transparent;
+  padding-left: 42px;
+}
+
+.c0 input::-webkit-input-placeholder {
+  color: #919BAE;
+}
+
+.c0 input:disabled {
+  background-color: transparent;
+  cursor: not-allowed;
+}
+
+.c0 .SingleDatePicker,
+.c0 .SingleDatePickerInput__withBorder {
+  width: 100%;
+}
+
+.c0 .SingleDatePickerInput__withBorder {
+  border: 0;
+}
+
+.c0 .DateInput_input__focused {
+  border-color: #78caff;
+}
+
+.c0 .DayPicker_weekHeader {
+  color: #000000;
+  border-top: 1px solid #f9f9f9;
+  margin-top: -10px;
+}
+
+.c0 .DayPicker_weekHeader li {
+  padding-top: 7px;
+  padding-bottom: 5px;
+}
+
+.c0 .DayPicker_weekHeader li small {
+  font-size: 1.3rem;
+}
+
+.c0 .DayPicker__withBorder {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  border: 1px solid #f9f9f9;
+  background: white;
+  position: absolute;
+}
+
+.c0 .DateInput_fang {
+  display: none;
+}
+
+.c0 .CalendarMonth_caption {
+  font-size: 1.3rem;
+  padding-bottom: 45px;
+  padding-top: 23px;
+}
+
+.c0 .DayPicker_transitionContainer {
+  padding: 4px;
+}
+
+.c0 .DayPickerKeyboardShortcuts_show {
+  display: none;
+}
+
+.c0 .DayPickerNavigation div[role='button'] {
+  font-size: 21px;
+  width: 35px;
+  height: 33px;
+  color: #000000;
+  border-radius: 0;
+  text-align: center;
+  top: 20px;
+}
+
+.c0 .DayPickerNavigation div[role='button'],
+.c0 .DayPickerNavigation div[role='button']:hover {
+  border: 0;
+}
+
+.c0 .DayPickerNavigation div[role='button'].DayPickerNavigation_leftButton__horizontalDefault::before {
+  content: '‹';
+}
+
+.c0 .DayPickerNavigation div[role='button'].DayPickerNavigation_rightButton__horizontalDefault::before {
+  content: '›';
+}
+
+.c0 .DayPickerNavigation div[role='button'] svg {
+  display: none;
+}
+
+.c0 .DayPickerNavigation div[role='button']:hover {
+  background: #eee;
+}
+
+.c0 td {
+  position: relative;
+  cursor: pointer;
+  width: 34px;
+  height: 18px;
+  font-size: 1.3rem;
+}
+
+.c0 td,
+.c0 td.CalendarDay__selected,
+.c0 td.CalendarDay__selected:active,
+.c0 td.CalendarDay__selected:hover,
+.c0 td.CalendarDay__default:hover {
+  border: 0;
+}
+
+.c0 td.CalendarDay__today::before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #005fea;
+  border-top-color: rgba(0,0,0,0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+
+.c0 td.CalendarDay__selected {
+  background-color: #007eff;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+}
+
+.c0 td.CalendarDay__selected.CalendarDay__today::before {
+  border-bottom: 7px solid white;
+}
+
+.c2 {
+  width: calc(3.4rem - 2px);
+  height: calc(3.4rem - 2px);
+  color: #B3B5B9;
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  background-color: #FAFAFB;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 13px;
+}
+
+.c3 {
+  width: 100%;
+  height: 3.4rem;
+  padding: 0 1rem;
+  font-weight: 400;
+  font-size: 1.3rem;
+  cursor: text;
+  outline: 0;
+  border: 1px solid #E3E9F3;
+  border-radius: 2px;
+  color: #333740;
+  background-color: transparent;
+  padding-left: calc(3.4rem + 1rem);
+}
+
+.c3::-webkit-input-placeholder {
+  color: #919BAE;
+}
+
+.c3:focus {
+  border-color: #78caff;
+}
+
+.c3:disabled {
+  background-color: #FAFAFB;
+  cursor: not-allowed;
+  color: #9ea7b8;
+}
+
+.c1 {
+  position: relative;
+  background-color: #ffffff;
+  border-radius: 2px;
+}
+
+.c1 button[type='button'] {
+  width: 3.4rem;
+  height: 3.4rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  cursor: pointer;
+  outline: 0;
+  border: 0;
+  background: transparent;
+}
+
+.c1 button[type='button']:hover span::before {
+  color: #000000;
+}
+
+.c1 button[type='button'].shown span::before {
+  color: #000000;
+}
+
+.c1 button[type='button'].shown + input[type='text'] {
+  padding-right: calc(3.4rem + 1rem);
+}
+
+.c1 span {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.c1 input {
+  position: relative;
+  z-index: 1;
+}
+
+<div
+    class="c0"
+  >
+    <div>
+      <div
+        class="c1"
+      >
+        <span
+          class="c2"
+        >
+          <svg
+            aria-hidden="true"
+            class="svg-inline--fa fa-calendar-alt fa-w-14 "
+            data-icon="calendar-alt"
+            data-prefix="far"
+            focusable="false"
+            role="img"
+            viewBox="0 0 448 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <input
+          autocomplete="off"
+          class="c3"
+          id="date"
+          name="start_date"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/DatePicker/tests/index.test.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import moment from 'moment';
+import { DayPickerSingleDateController } from 'react-dates';
+import { act, cleanup, render } from '@testing-library/react';
+
+import InputText from '../../InputText';
+import DatePicker from '../index';
+
+jest.useFakeTimers();
+
+const defaultProps = {
+  type: 'date',
+  name: 'date',
+  onChange: jest.fn(),
+};
+const renderComponent = (props = defaultProps) =>
+  mount(<DatePicker {...props} />);
+
+describe('<DatePicker />', () => {
+  afterEach(cleanup);
+
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should match snapshot', () => {
+    const { asFragment } = render(<DatePicker {...defaultProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render an input text', () => {
+    const wrapper = renderComponent();
+
+    const input = wrapper.find(InputText);
+    expect(input).toHaveLength(1);
+  });
+
+  it('should render a date picker on input text click', () => {
+    const onChange = jest.fn();
+
+    const props = {
+      ...defaultProps,
+      onChange,
+      value: moment(new Date(), 'YYYY-MM-DD'),
+    };
+
+    const wrapper = renderComponent(props);
+    const input = wrapper.find('input');
+
+    input.simulate('click');
+
+    const datePicker = wrapper.find(DayPickerSingleDateController);
+
+    expect(datePicker).toHaveLength(1);
+  });
+
+  it('should render onChange props on datepicker select', () => {
+    const onChange = jest.fn();
+
+    const props = {
+      ...defaultProps,
+      onChange,
+      value: moment(new Date(), 'YYYY-MM-DD'),
+    };
+
+    const wrapper = renderComponent(props);
+    const input = wrapper.find('input');
+
+    input.simulate('click');
+
+    const datePicker = wrapper.find(DayPickerSingleDateController);
+
+    act(() => {
+      datePicker.props().onDateChange(moment('1993-07-05', 'YYYY-MM-DD'));
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      target: {
+        name: 'date',
+        type: 'date',
+        value: moment('1993-07-05', 'YYYY-MM-DD'),
+      },
+    });
+  });
+
+  it('should display the date value in a human readable format', () => {
+    const onChange = jest.fn();
+
+    const props = {
+      ...defaultProps,
+      onChange,
+      value: moment('1993-07-05', 'YYYY-MM-DD'),
+    };
+
+    const wrapper = renderComponent(props);
+    const input = wrapper.find('input');
+
+    expect(input.props().value).toBe('July 05, 1993');
+  });
+
+  it('should use the defaultProps', () => {
+    const {
+      defaultProps: { onChange },
+    } = DatePicker;
+
+    expect(onChange).toBeDefined();
+  });
+});

package/src/components/Enumeration/index.js

@@ -0,0 +1,71 @@
+/**
+ *
+ * Enumeration
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Enumeration as StyledEnumeration,
+  EnumerationWrapper,
+} from '@punch-in/buffet-modern';
+
+import Label from '../Label';
+
+function Enumeration({
+  disabled,
+  id,
+  className,
+  name,
+  onChange,
+  options,
+  value,
+}) {
+  return (
+    <EnumerationWrapper className={className}>
+      {options.map(option => (
+        <Label key={option.value} htmlFor={id || name}>
+          <StyledEnumeration
+            disabled={disabled}
+            checked={option.value === value}
+            name={id || name}
+            onChange={onChange}
+            value={option.value}
+          />
+          <span>{option.label}</span>
+        </Label>
+      ))}
+    </EnumerationWrapper>
+  );
+}
+
+Enumeration.defaultProps = {
+  className: null,
+  disabled: false,
+  id: null,
+  onChange: () => {},
+  options: [],
+  value: null,
+};
+
+Enumeration.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ),
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.object,
+  ]),
+};
+
+export default Enumeration;