Use styled components to replace Sass

package.json

@@ -37,7 +37,8 @@
     "classnames": "^2.2.1",
     "date-fns": "2.0.0-alpha.7",
     "prop-types": "^15.5.10",
-    "react-list": "^0.8.8"
+    "react-list": "^0.8.8",
+    "styled-components": "^4.1.3"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || >=15.0"
@@ -71,8 +72,8 @@
     "postcss-loader": "^2.0.10",
     "precss": "^2.0.0",
     "prettier": "^1.9.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
     "react-hot-loader": "^3.1.3",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",

src/components/Calendar.js

@@ -26,6 +26,19 @@ import {
 } from 'date-fns';
 import defaultLocale from 'date-fns/locale/en-US';
 import coreStyles from '../styles';
+import {
+  MonthAndYearWrapper,
+  MonthAndYearPickers,
+  YearPicker,
+  DateDisplay,
+  CalendarWrapper,
+  MonthPicker,
+  Months,
+  InfiniteMonths,
+  NavigationButton,
+  DateDisplayItem,
+} from './styles/Calendar.styled.js';
+import { WeekDays, WeekDay } from './styles/Month.styled.js';
 
 class Calendar extends PureComponent {
   constructor(props, context) {
@@ -166,18 +179,18 @@ class Calendar extends PureComponent {
     const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
     const styles = this.styles;
     return (
-      <div onMouseUp={e => e.stopPropagation()} className={styles.monthAndYearWrapper}>
+      <MonthAndYearWrapper onMouseUp={e => e.stopPropagation()}>
         {showMonthArrow ? (
-          <button
+          <NavigationButton
             type="button"
-            className={classnames(styles.nextPrevButton, styles.prevButton)}
+            actionType="prev"
             onClick={() => changeShownDate(-1, 'monthOffset')}>
             <i />
-          </button>
+          </NavigationButton>
         ) : null}
         {showMonthAndYearPickers ? (
-          <span className={styles.monthAndYearPickers}>
-            <span className={styles.monthPicker}>
+          <MonthAndYearPickers>
+            <MonthPicker>
               <select
                 value={focusedDate.getMonth()}
                 onChange={e => changeShownDate(e.target.value, 'setMonth')}>
@@ -187,9 +200,9 @@ class Calendar extends PureComponent {
                   </option>
                 ))}
               </select>
-            </span>
+            </MonthPicker>
             <span className={styles.monthAndYearDivider} />
-            <span className={styles.yearPicker}>
+            <YearPicker>
               <select
                 value={focusedDate.getFullYear()}
                 onChange={e => changeShownDate(e.target.value, 'setYear')}>
@@ -204,76 +217,64 @@ class Calendar extends PureComponent {
                     );
                   })}
               </select>
-            </span>
-          </span>
+            </YearPicker>
+          </MonthAndYearPickers>
         ) : (
-          <span className={styles.monthAndYearPickers}>
+          <MonthAndYearPickers>
             {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
-          </span>
+          </MonthAndYearPickers>
         )}
         {showMonthArrow ? (
-          <button
+          <NavigationButton
             type="button"
-            className={classnames(styles.nextPrevButton, styles.nextButton)}
+            actionType="next"
             onClick={() => changeShownDate(+1, 'monthOffset')}>
             <i />
-          </button>
+          </NavigationButton>
         ) : null}
-      </div>
+      </MonthAndYearWrapper>
     );
   }
   renderWeekdays() {
     const now = new Date();
     return (
-      <div className={this.styles.weekDays}>
+      <WeekDays>
         {eachDayOfInterval({
           start: startOfWeek(now, this.dateOptions),
           end: endOfWeek(now, this.dateOptions),
-        }).map((day, i) => (
-          <span className={this.styles.weekDay} key={i}>
-            {format(day, 'ddd', this.dateOptions)}
-          </span>
-        ))}
-      </div>
+        }).map((day, i) => <WeekDay key={i}>{format(day, 'ddd', this.dateOptions)}</WeekDay>)}
+      </WeekDays>
     );
   }
   renderDateDisplay() {
     const { focusedRange, color, ranges, rangeColors } = this.props;
     const defaultColor = rangeColors[focusedRange[0]] || color;
-    const styles = this.styles;
     return (
-      <div className={styles.dateDisplayWrapper}>
+      <div>
         {ranges.map((range, i) => {
           if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay))
             return null;
           return (
-            <div
-              className={styles.dateDisplay}
-              key={i}
-              style={{ color: range.color || defaultColor }}>
-              <span
-                className={classnames(styles.dateDisplayItem, {
-                  [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0,
-                })}
+            <DateDisplay key={i} style={{ color: range.color || defaultColor }}>
+              <DateDisplayItem
+                active={focusedRange[0] === i && focusedRange[1] === 0}
                 onFocus={() => this.handleRangeFocusChange(i, 0)}>
                 <input
                   disabled={range.disabled}
                   readOnly
                   value={this.formatDateDisplay(range.startDate, 'Early')}
                 />
-              </span>
-              <span
-                className={classnames(styles.dateDisplayItem, {
-                  [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 1,
-                })}
+              </DateDisplayItem>
+              <DateDisplayItem
+                active={focusedRange[0] === i && focusedRange[1] === 1}
                 onFocus={() => this.handleRangeFocusChange(i, 1)}>
                 <input
                   disabled={range.disabled}
                   readOnly
                   value={this.formatDateDisplay(range.endDate, 'Continuous')}
                 />
-              </span>
-            </div>
+              </DateDisplayItem>
+            </DateDisplay>
           );
         })}
       </div>
@@ -366,7 +367,7 @@ class Calendar extends PureComponent {
       color: range.color || rangeColors[i] || color,
     }));
     return (
-      <div
+      <CalendarWrapper
         className={classnames(this.styles.calendarWrapper, this.props.className)}
         onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
         onMouseLeave={() => {
@@ -377,11 +378,8 @@ class Calendar extends PureComponent {
         {scroll.enabled ? (
           <div>
             {isVertical && this.renderWeekdays(this.dateOptions)}
-            <div
-              className={classnames(
-                this.styles.infiniteMonths,
-                isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
-              )}
+            <InfiniteMonths
+              direction={direction}
               onMouseLeave={() => onPreviewChange && onPreviewChange()}
               style={{
                 width: scrollArea.calendarWidth + 11,
@@ -428,14 +426,10 @@ class Calendar extends PureComponent {
                   );
                 }}
               />
-            </div>
+            </InfiniteMonths>
           </div>
         ) : (
-          <div
-            className={classnames(
-              this.styles.months,
-              isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
-            )}>
+          <Months direction={direction}>
             {new Array(this.props.months).fill(null).map((_, i) => {
               const monthStep = addMonths(this.state.focusedDate, i);
               return (
@@ -459,9 +453,9 @@ class Calendar extends PureComponent {
                 />
               );
             })}
-          </div>
+          </Months>
         )}
-      </div>
+      </CalendarWrapper>
     );
   }
 }

src/components/DateRange.js

@@ -120,7 +120,7 @@ class DateRange extends Component {
         }}
         {...this.props}
         displayMode="dateRange"
-        className={classnames(this.styles.dateRangeWrapper, this.props.className)}
+        className={this.props.className}
         onChange={this.setSelection}
         updateRange={val => this.setSelection(val, false)}
         ref={target => {

src/components/DateRangePicker.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import DateRange from './DateRange';
 import DefinedRange from './DefinedRange';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
-import classnames from 'classnames';
 import coreStyles from '../styles';
+import { DateRangePickerWrapper } from './styles/DateRangePicker.styles';
 
 class DateRangePicker extends Component {
   constructor(props) {
@@ -17,7 +17,7 @@ class DateRangePicker extends Component {
   render() {
     const { focusedRange } = this.state;
     return (
-      <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
+      <DateRangePickerWrapper className={this.props.className}>
         <DefinedRange
           focusedRange={focusedRange}
           onPreviewChange={value => this.dateRange.updatePreview(value)}
@@ -32,7 +32,7 @@ class DateRangePicker extends Component {
           ref={t => (this.dateRange = t)}
           className={undefined}
         />
-      </div>
+      </DateRangePickerWrapper>
     );
   }
 }

src/components/DayCell.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns';
+import { DayNumber, Day } from './styles/DayCell.styled';
 
 class DayCell extends Component {
   constructor(props, context) {
@@ -76,13 +77,11 @@ class DayCell extends Component {
       isEndOfWeek,
       isStartOfMonth,
       isEndOfMonth,
-      disabled,
       styles,
     } = this.props;
 
     return classnames(styles.day, {
       [styles.dayPassive]: isPassive,
-      [styles.dayDisabled]: disabled,
       [styles.dayToday]: isToday,
       [styles.dayWeekend]: isWeekend,
       [styles.dayStartOfWeek]: isStartOfWeek,
@@ -118,7 +117,7 @@ class DayCell extends Component {
     if (this.props.displayMode === 'date') {
       let isSelected = isSameDay(this.props.day, this.props.date);
       return isSelected ? (
-        <span className={styles.selected} style={{ color: this.props.color }} />
+        <span className={styles.selected} data="teste" style={{ color: this.props.color }} />
       ) : null;
     }
 
@@ -161,10 +160,11 @@ class DayCell extends Component {
     ));
   }
   render() {
-    const { styles } = this.props;
+    const { disabled, styles } = this.props;
     return (
-      <button
+      <Day
         type="button"
+        disabled={disabled}
         onMouseEnter={this.handleMouseEvent}
         onMouseLeave={this.handleMouseEvent}
         onFocus={this.handleMouseEvent}
@@ -179,10 +179,10 @@ class DayCell extends Component {
         style={{ color: this.props.color }}>
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
-        <span className={styles.dayNumber}>
+        <DayNumber className={styles.dayNumber}>
           <span>{format(this.props.day, 'D')}</span>
-        </span>
-      </button>
+        </DayNumber>
+      </Day>
     );
   }
 }