Changes the builder to use the util.inspect() to output the error

Adds the Calendar component

Updates the example to show the dates (not final)

Changes the DaysPanel to export directly the class

Makes the code more explicit on the calendar.js

Makes the styles customizable

Fixes the _default.yaml to be able to build

Fixes SCSS to build :D

Changes the builder to actually output (and colorize) when an error happens

Adds classNames to elements to make them more specific

Fixes bug where an error would be triggered when the initialDates attribute was not set. Also resets the minLimit to the passed one when provided via attributes or to null when none is available

Hides the nav button when not enabled

Changes the _default.yaml to have decent colors for the rendering :P

Adds the function leftPad() to the helpers to do left padding of the months and days

Improves the code based on the reviews' feedback. Also makes it more testable and fixes some bugs detected when developing the unit tests

Converts the DaysPanel to a stateless component with no mods (for now)

Improves the code based on reviews' feedback. Also makes it more testable and introduces a new method to merge the locale definitions

Removes the enzyme-to-json package and brings jest-serializdr-enzyme which is then configured in the jest config

Reverts the removal to give time to migrate the other unit tests. Adds the serializer configuration to the jest.config.json

Adds the unit tests and its snapshots

Updates the tests for UTC

Removes the mods and the dataAttrs from the 'defaultProps'.

Updates the snapshots

Attempt to set some colors matching the defined color pattern

Updates the snapshots

Adds some aria-labels to increase accessibility

Adds updated snapshots

Fixes a lint error :P

Adds a function to normalize the dates on the time

Changes the code to use the newly added function

Updates the tests to use the normalizeDate() and updates the snapshots

Moves the 'bind' to its own declaration, to prevent warnings from linting

Changed the 'extraClasses' variable to be named 'mods'

Changes the 'npm test' to set the testing to be always UTC (to solve CI issues)

Also added the TZ=utc to the update-snapshots script

Adds a function processProps() to be used by both the constructor and the componentWillReceiveProps() from the Calendar component

Adds a wrapper component to make the test of the props being changed. Also adds a test to verify the componentWillReceiveProps. Updates the snapshots

Improves coverage of the componentWillReceiveProps

Downgraded eslint-plugin-react due to a bug on the jsx-indent rule: jsx-eslint/eslint-plugin-react#1117

Fixes the issue with the eslint-plugin-react's version, enabling the indentLogicalExpressions

Adds the possibility to override the display text in the navigation buttons, as well as the aria-label attribute

.eslintrc

@@ -31,6 +31,7 @@
     "comma-dangle": ["error", "always-multiline"],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
     "max-len": [2, {"code": 120, "comments": 120, "tabWidth": 4}],
+    "react/jsx-indent": [2, 2, { "indentLogicalExpressions": true }],
     "react/react-in-jsx-scope": 0,
     "no-else-return": 0
   }

builder/index.js

@@ -3,6 +3,7 @@
 const builder = require('./builder');
 const pkg = require('../package.json');
 const program = require('commander');
+const util = require('util');
 
 program
   .version(pkg.version)
@@ -16,4 +17,4 @@ program.parse(process.argv);
 
 builder(program)
   .then(() => console.log('Done!'))
-  .catch(console.error);
+  .catch(e => console.error(util.inspect(e, true, undefined, true)));

components/_helpers.js

@@ -22,8 +22,44 @@ function getDataAttributes(attributes = {}) {
   }, {});
 }
 
+/**
+ * @function leftPad
+ * @param {Number} value The value to be left padded
+ * @return {String}      The value with a leading 0 if it's between 1 - 9
+ */
+function leftPad(value, maxLength = 2, leftPaddedBy = '0') {
+  const valueStringified = value.toString();
+  if (valueStringified.length >= maxLength) {
+    return valueStringified;
+  }
+
+  return leftPaddedBy.repeat(maxLength - valueStringified.length) + valueStringified;
+}
+
+/**
+ * Receives a date object and normalizes it to the proper hours, minutes,
+ * seconds and milliseconds.
+ *
+ * @method normalizeDate
+ * @param {Date} dateObject Date object to be normalized.
+ * @param {Number} hours Value to set the hours to. Defaults to 0
+ * @param {Number} minutes Value to set the minutes to. Defaults to 0
+ * @param {Number} seconds Value to set the seconds to. Defaults to 0
+ * @param {Number} milliseconds Value to set the milliseconds to. Defaults to 0
+ * @return {Date} The normalized date object.
+ */
+function normalizeDate(dateObject, hours = 0, minutes = 0, seconds = 0, milliseconds = 0) {
+  dateObject.setHours(hours);
+  dateObject.setMinutes(minutes);
+  dateObject.setSeconds(seconds);
+  dateObject.setMilliseconds(milliseconds);
+  return dateObject;
+}
+
 // Exports
 export default {
   getClassNamesWithMods,
   getDataAttributes,
+  leftPad,
+  normalizeDate,
 };

components/calendar/calendar.js

@@ -0,0 +1,306 @@
+import React, { Component, PropTypes } from 'react';
+import { getClassNamesWithMods, getDataAttributes, normalizeDate } from '../_helpers';
+import DaysPanel from './panels/days';
+import calendarConstants from './constants/calendar';
+
+const {
+  CALENDAR_MOVE_TO_NEXT,
+  CALENDAR_MOVE_TO_PREVIOUS,
+  CALENDAR_SELECTION_TYPE_RANGE,
+} = calendarConstants;
+
+
+/**
+ * Processes the given props and the existing state and returns
+ * a new state.
+ *
+ * @function processProps
+ * @param {Object} props Props to base the new state on.
+ * @param {Object} state (Existing) state to be based on for the existing values.
+ * @return {Object} New state to be set/used.
+ * @static
+ */
+function processProps(props) {
+  const { initialDates, maxDate, minDate, selectionType } = props;
+  const maxLimit = maxDate ? normalizeDate(new Date(maxDate), 23, 59, 59, 999) : null;
+  const renderDate = normalizeDate(((initialDates && initialDates.length && initialDates[0])
+    ? new Date(initialDates[0])
+    : new Date()));
+
+  let minLimit = minDate ? normalizeDate(new Date(minDate)) : null;
+  let selectedDates = [null, null];
+
+  if (initialDates) {
+    selectedDates = selectedDates.map((item, idx) => {
+      if (!initialDates[idx]) {
+        return null;
+      }
+
+      return normalizeDate(new Date(initialDates[idx]));
+    });
+  }
+
+  /**
+   * If a minDate or a maxDate is set, let's check if any selectedDates are outside of the boundaries.
+   * If so, resets the selectedDates.
+   */
+  if (minLimit || maxLimit) {
+    const isAnyDateOutOfLimit = selectedDates.some(item => (
+      item && (
+        (minLimit && (minLimit.getTime() > item.getTime())) ||
+        (maxLimit && (maxLimit.getTime() < item.getTime()))
+      )
+    ));
+
+    if (isAnyDateOutOfLimit) {
+      selectedDates = [null, null];
+      console.warn(`A calendar instance contains a selectedDate outside of the minDate and maxDate boundaries`); // eslint-disable-line
+    }
+  }
+
+  /** If initialDates is defined and we have a start date, we want to set it as the minLimit */
+  if (selectedDates[0] && (selectionType === CALENDAR_SELECTION_TYPE_RANGE)) {
+    minLimit = selectedDates[0];
+  }
+
+  return {
+    maxLimit,
+    minLimit,
+    renderDate,
+    selectedDates,
+  };
+}
+
+export default class Calendar extends Component {
+  constructor(props) {
+    super();
+
+    this.moveToMonth = this.moveToMonth.bind(this);
+    this.state = processProps(props);
+  }
+
+  componentWillReceiveProps(newProps) {
+    const { initialDates, maxDate, minDate, selectionType } = newProps;
+
+    let propsChanged = (
+      (maxDate !== this.props.maxDate) ||
+      (minDate !== this.props.minDate) ||
+      (selectionType !== this.props.selectionType)
+    );
+
+    if (initialDates) {
+      if (this.props.initialDates) {
+        propsChanged = propsChanged || initialDates.some((item, idx) => item !== this.props.initialDates[idx]);
+      } else {
+        propsChanged = true;
+      }
+    }
+
+    if (propsChanged) {
+      this.setState(() => processProps(newProps));
+    }
+  }
+
+  /**
+   * Changes the renderDate of the calendar to the previous or next month.
+   * Also triggers the onNavPreviousMonth/onNavNextMonth when the state gets changed
+   * and passes the new date to it.
+   *
+   * @method moveToMonth
+   * @param {String} direction Defines to which month is the calendar moving (previous or next).
+   */
+  moveToMonth(direction) {
+    const { onNavNextMonth, onNavPreviousMonth } = this.props;
+
+    this.setState(({ renderDate }) => {
+      renderDate.setMonth(renderDate.getMonth() + (direction === CALENDAR_MOVE_TO_PREVIOUS ? -1 : 1));
+      return { renderDate };
+    }, () => {
+      if ((direction === CALENDAR_MOVE_TO_PREVIOUS) && onNavPreviousMonth) {
+        onNavPreviousMonth(this.state.renderDate);
+      } else if ((direction === CALENDAR_MOVE_TO_NEXT) && onNavNextMonth) {
+        onNavNextMonth(this.state.renderDate);
+      }
+    });
+  }
+
+  /**
+   * Handler for the day's selection. Passed to the DaysPanel -> DaysView.
+   * Also triggers the onSelectDay function (when passed) after the state is updated,
+   * passing the selectedDates array to it.
+   *
+   * @method onSelectDay
+   * @param {Date} dateSelected Date selected by the user.
+   */
+  onSelectDay(dateSelected) {
+    const { onSelectDay, selectionType, minDate } = this.props;
+
+    this.setState((prevState) => {
+      let { minLimit, renderDate, selectedDates } = prevState;
+
+      /**
+       * If the calendar's selectionType is 'normal', we always set the date selected
+       * to the first position of the selectedDates array.
+       * If the selectionType is 'range', we need to verify the following requirements:
+       *
+       *   - If there's no start date selected, then the selected date becomes the start
+       * date and the minLimit becomes that same date. Prevents the range selection to the past.
+       *
+       *   - If there's a start date already selected:
+       *
+       *     - If there's no end date selected, then the selected date becomes the end date. Also
+       * if the start and end dates are the same, it will remove the minLimit as the layout renders
+       * them as a 'normal' selection.
+       *
+       *     - If there's an end date selected and the user is clicking on the start date again, it
+       * clears the selections and the limits, resetting the range.
+       */
+      if (selectionType === CALENDAR_SELECTION_TYPE_RANGE) {
+        if (selectedDates[0]) {
+          if (!selectedDates[1]) {
+            selectedDates[1] = dateSelected;
+            if (selectedDates[0].toDateString() === selectedDates[1].toDateString()) {
+              minLimit = minDate ? normalizeDate(new Date(minDate)) : null;
+            }
+          } else {
+            selectedDates = [null, null];
+            minLimit = minDate ? normalizeDate(new Date(minDate)) : null;
+          }
+        } else {
+          selectedDates[0] = dateSelected;
+          minLimit = dateSelected;
+          selectedDates[1] = null;
+        }
+      } else {
+        selectedDates[0] = dateSelected;
+      }
+
+      /**
+       * If the user selects a day of the previous or next month, the rendered month switches to
+       * the one of the selected date.
+       */
+      if (dateSelected.getMonth() !== renderDate.getMonth()) {
+        renderDate = new Date(dateSelected.toDateString());
+      }
+
+      return {
+        minLimit,
+        renderDate,
+        selectedDates,
+      };
+    }, () => {
+      if (onSelectDay) {
+        onSelectDay(this.state.selectedDates);
+      }
+    });
+  }
+
+  render() {
+    const { dataAttrs = {}, isDaySelectableFn, locale, mods = [], navButtons, selectionType } = this.props;
+    const { maxLimit, minLimit, renderDate, selectedDates } = this.state;
+
+    const restProps = getDataAttributes(dataAttrs);
+    const className = getClassNamesWithMods('ui-calendar', mods);
+
+    return (
+      <div className={className} {...restProps}>
+        <DaysPanel
+          isDaySelectableFn={isDaySelectableFn}
+          locale={locale}
+          maxDate={maxLimit}
+          minDate={minLimit}
+          navButtons={navButtons}
+          onNavNextMonth={() => this.moveToMonth(CALENDAR_MOVE_TO_NEXT)}
+          onNavPreviousMonth={() => this.moveToMonth(CALENDAR_MOVE_TO_PREVIOUS)}
+          onSelectDay={dt => this.onSelectDay(dt)}
+          renderDate={renderDate}
+          selectedDates={selectedDates}
+          selectionType={selectionType}
+        />
+      </div>
+    );
+  }
+}
+
+Calendar.defaultProps = {
+  selectionType: 'normal',
+};
+
+Calendar.propTypes = {
+  /**
+   * Data attribute. You can use it to set up GTM key or any custom data-* attribute
+   */
+  dataAttrs: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object,
+  ]),
+
+  /**
+   * Optional. Initial value of the calendar. Defaults to the current date as per the locale.
+   */
+  initialDates: PropTypes.array,
+
+  /**
+   * Optional. Function to be triggered to evaluate if the date (passed as an argument)
+   * is selectable. Must return a boolean.
+   */
+  isDaySelectableFn: PropTypes.func,
+
+  /**
+   * Locale definitions, with the calendar's months and weekdays in the right language.
+   * Also contains the startWeekDay which defines in which week day starts the week.
+   */
+  locale: PropTypes.shape({
+    months: PropTypes.array,
+    weekDays: PropTypes.array,
+    startWeekDay: PropTypes.number,
+  }),
+
+  /**
+   * Sets the max date boundary. Defaults to `null`.
+   */
+  maxDate: PropTypes.string,
+
+  /**
+   * Sets the min date boundary. Defaults to `null`.
+   */
+  minDate: PropTypes.string,
+
+  /**
+   * You can provide set of custom modifications.
+   */
+  mods: PropTypes.arrayOf(PropTypes.string),
+
+  navButtons: PropTypes.shape({
+    days: PropTypes.shape({
+      next: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+      previous: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+    }),
+  }),
+
+  /**
+   * Function to be triggered when pressing the nav's "next" button.
+   */
+  onNavNextMonth: PropTypes.func,
+
+  /**
+   * Function to be triggered when pressing the nav's "previous" button.
+   */
+  onNavPreviousMonth: PropTypes.func,
+
+  /**
+   * Function to be triggered when selecting a day.
+   */
+  onSelectDay: PropTypes.func,
+
+  /**
+   * Optional. Type of date selection.
+   */
+  selectionType: PropTypes.oneOf(['normal', 'range']),
+};

components/calendar/calendar.md

@@ -0,0 +1,10 @@
+Basic calendar:
+
+    <div>
+      <Calendar
+        initialDates={["2017-03-21","2017-03-29"]}
+        onSelectDay={dts => document.getElementById('calendar-output').value = dts}
+        selectionType="range"
+      /><br />
+      <output id="calendar-output">Please select a date!</output><br />
+    </div>