Calendar Component

src/Calendar/Calendar.example.js

@@ -0,0 +1,55 @@
+// @flow
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Calendar from '.';
+
+storiesOf('Calendar', module)
+  .add('API', () => <Calendar onChange={action('onChange')} />, {
+    info: {
+      text: '',
+      inline: true,
+    },
+  })
+  .add(
+    'With default value',
+    () => (
+      <Calendar
+        defaultValue={new Date('2019-02-15')}
+        onChange={action('onChange')}
+      />
+    ),
+    {
+      info: {
+        text: '',
+        inline: true,
+      },
+    },
+  )
+  .add(
+    'With weekday format',
+    () => (
+      <Calendar
+        defaultValue={new Date('2017-06-26')}
+        weekdayFormat="EEEEEE"
+        onChange={action('onChange')}
+      />
+    ),
+    {
+      info: {
+        text:
+          'See https://date-fns.org/v2.0.0-alpha.27/docs/format for format patterns',
+        inline: true,
+      },
+    },
+  )
+  .add(
+    'Starting from Monday',
+    () => <Calendar weekStartsOn={1} onChange={action('onChange')} />,
+    {
+      info: {
+        text: '',
+        inline: true,
+      },
+    },
+  );

src/Calendar/Calendar.js

@@ -0,0 +1,82 @@
+// @flow
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import D from 'date-fns';
+import DaysDisplay from './DaysDisplay';
+import {
+  CalendarWrapper,
+  HeaderLayout,
+  PaginationButton,
+  WeekdaysWrapper,
+} from './styled-components';
+import { getWeekdays } from './utils';
+import { useFocusDate } from './hooks';
+import { IconArrowLeft } from '../Icons';
+import emptyFunction from '../utils/emptyFunction';
+import { type WeekStartsOn } from '../utils/type.flow';
+
+export type Props = {
+  defaultValue?: Date,
+  weekStartsOn?: WeekStartsOn,
+  weekdayFormat?: string,
+  onChange?: Date => any,
+};
+
+const Calendar = ({
+  defaultValue,
+  weekStartsOn,
+  weekdayFormat,
+  onChange,
+}: Props) => {
+  const today = D.startOfDay(new Date());
+  const { focusDate, onSubMonthFocusDate, onAddMonthFocusDate } = useFocusDate(
+    R.defaultTo(today, defaultValue),
+  );
+  const [selectedDate, setSelectedDate] = React.useState<Date>(
+    R.defaultTo(today, defaultValue),
+  );
+
+  return (
+    <CalendarWrapper>
+      <HeaderLayout>
+        <PaginationButton onClick={onSubMonthFocusDate}>
+          <IconArrowLeft />
+        </PaginationButton>
+        <div>{D.format(focusDate, 'LLL yyyy')}</div>
+        <PaginationButton isReversed onClick={onAddMonthFocusDate}>
+          <IconArrowLeft />
+        </PaginationButton>
+      </HeaderLayout>
+      <WeekdaysWrapper>
+        {getWeekdays({ format: weekdayFormat, weekStartsOn }).map(weekDay => (
+          <div key={weekDay}>
+            <strong>{weekDay}</strong>
+          </div>
+        ))}
+      </WeekdaysWrapper>
+      <DaysDisplay
+        onChange={onChange}
+        focusDate={focusDate}
+        selectedDate={selectedDate}
+        setSelectedDate={setSelectedDate}
+        weekStartsOn={weekStartsOn}
+      />
+    </CalendarWrapper>
+  );
+};
+
+Calendar.displayName = 'Calendar';
+Calendar.defaultProps = {
+  weekStartsOn: 0,
+  weekdayFormat: 'EEE',
+  onChange: emptyFunction,
+};
+Calendar.propTypes = {
+  defaultValue: PropTypes.instanceOf(Date),
+  weekStartsOn: PropTypes.number,
+  weekdayFormat: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+export default Calendar;

src/Calendar/DaysDisplay.js

@@ -0,0 +1,69 @@
+// @flow
+import * as React from 'react';
+import D from 'date-fns';
+import { DaysLayout, DayItemContainer, DayItem } from './styled-components';
+import { getDaysInMonth } from './utils';
+import { type WeekStartsOn } from '../utils/type.flow';
+
+type InnerProps = {
+  onChange?: Date => any,
+  focusDate: Date,
+  selectedDate: Date,
+  setSelectedDate: Date => void,
+};
+type Props = InnerProps & {
+  weekStartsOn?: WeekStartsOn,
+};
+type DayProps = InnerProps & {
+  date: Date,
+};
+
+const Day = ({
+  date,
+  onChange,
+  focusDate,
+  selectedDate,
+  setSelectedDate,
+}: DayProps) => {
+  const onClick = React.useCallback(() => {
+    if (!D.isSameMonth(date, focusDate)) return;
+    setSelectedDate(date);
+    if (onChange && !D.isSameDay(date, selectedDate)) onChange(date);
+  }, [date, focusDate, setSelectedDate, onChange]);
+
+  return (
+    <DayItemContainer>
+      <DayItem
+        key={date.getTime()}
+        isSelected={D.isSameDay(date, selectedDate)}
+        isOffRange={!D.isSameMonth(date, focusDate)}
+        isToday={D.isSameDay(date, new Date())}
+        onClick={onClick}
+      >
+        {D.format(date, 'd')}
+      </DayItem>
+    </DayItemContainer>
+  );
+};
+
+const DaysDisplay = ({
+  onChange,
+  focusDate,
+  selectedDate,
+  setSelectedDate,
+  weekStartsOn,
+}: Props) => (
+  <DaysLayout>
+    {getDaysInMonth({ date: focusDate, weekStartsOn }).map(date => (
+      <Day
+        date={date}
+        onChange={onChange}
+        focusDate={focusDate}
+        selectedDate={selectedDate}
+        setSelectedDate={setSelectedDate}
+      />
+    ))}
+  </DaysLayout>
+);
+
+export default DaysDisplay;