@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/DatePicker/DateRangePicker.stories.js

@@ -1,101 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import {START_DATE, END_DATE} from 'react-dates/constants';
-import moment from 'moment';
-import {StatefulDateRangePicker} from './StatefulDateRangePicker';
-import DateRangePicker from './DateRangePicker';
-import Box from '../Box';
-import Button from '../Button';
-import Popout from '../Popout';
-
-export default {
-  title: 'Components/DatePickers/DateRangePicker',
-};
-
-const today = moment();
-
-const dateProps = {
-  startDate: today,
-  endDate: today.clone().add(3, 'days'),
-};
-
-export const defaultStory = () => <StatefulDateRangePicker {...dateProps} />;
-
-export const noStartingDate = () => (
-  <StatefulDateRangePicker startDate={null} endDate={null} />
-);
-
-export const startOnPreviousMonth = () => (
-  <StatefulDateRangePicker
-    {...dateProps}
-    initialVisibleMonth={() => dateProps.endDate.clone().subtract(1, 'month')}
-  />
-);
-
-export const blockedRanges = () => {
-  const endOfPreviousMonth = today.clone().subtract(1, 'month').endOf('month');
-  const startOfNextMonth = today.clone().add(1, 'month').startOf('month');
-
-  return (
-    <StatefulDateRangePicker
-      {...dateProps}
-      isOutsideRange={(day) =>
-        day.isSameOrBefore(endOfPreviousMonth) ||
-        day.isSameOrAfter(startOfNextMonth)
-      }
-    />
-  );
-};
-
-export const FocusControlledPopoutDatePicker = () => {
-  const [focusedInput, setFocusedInput] = useState(null);
-  const [dates, pickDate] = useState({startDate: null, endDate: null});
-  const onFocusChange = (nextFocusedInput) => {
-    setFocusedInput(nextFocusedInput);
-  };
-
-  return (
-    <Popout
-      isOpen={focusedInput !== null}
-      content={
-        <Popout.Content pt={400} p={0}>
-          <DateRangePicker
-            {...dates}
-            onDatesChange={pickDate}
-            focusedInput={focusedInput}
-            onFocusChange={onFocusChange}
-          />
-          <Box display="flex" justifyContent="space-between" p={400}>
-            <Button
-              appearance="secondary"
-              onClick={() => setFocusedInput(START_DATE)}
-            >
-              {dates.startDate
-                ? dates.startDate.format('DD MMM YYYY')
-                : 'Choose Start Date'}
-            </Button>
-            <Button
-              appearance="secondary"
-              onClick={() => setFocusedInput(END_DATE)}
-            >
-              {dates.endDate
-                ? dates.endDate.format('DD MMM YYYY')
-                : 'Choose End Date'}
-            </Button>
-          </Box>
-        </Popout.Content>
-      }
-    >
-      <Button
-        appearance="secondary"
-        onClick={() => setFocusedInput(START_DATE)}
-      >
-        Open Date Picker
-      </Button>
-    </Popout>
-  );
-};
-
-defaultStory.story = {
-  name: 'Default',
-};

package/__flow__/DatePicker/DateRangePicker.test.js

@@ -1,123 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import moment from 'moment';
-import {StatefulDateRangePicker} from './StatefulDateRangePicker';
-import {formatDateAsCalendarDay} from './common';
-
-const getStartDate = (options, date) =>
-  options.queryByLabelText(
-    `Selected as start date. ${formatDateAsCalendarDay(date)}`
-  );
-
-const getEndDate = (options, date) =>
-  options.queryByLabelText(
-    `Selected as end date. ${formatDateAsCalendarDay(date)}`
-  );
-
-const clickOnStartDate = (options, date) =>
-  fireEvent.click(
-    options.getByLabelText(
-      `Choose ${formatDateAsCalendarDay(
-        date
-      )} as your check-in date. It’s available.`
-    )
-  );
-
-const clickOnEndDate = (options, date) =>
-  fireEvent.click(
-    options.getByLabelText(
-      `Choose ${formatDateAsCalendarDay(
-        date
-      )} as your check-out date. It’s available.`
-    )
-  );
-
-describe('date range picker', () => {
-  test('should start and end on a date range', () => {
-    const today = moment();
-    const oneWeekFromToday = today.clone().add(1, 'week');
-
-    const options = render(
-      <StatefulDateRangePicker startDate={today} endDate={oneWeekFromToday} />
-    );
-
-    expect(getStartDate(options, today)).toBeInTheDocument();
-    expect(getEndDate(options, oneWeekFromToday)).toBeInTheDocument();
-  });
-
-  test('should select a new start and end date', () => {
-    const today = moment();
-    const oneWeekFromToday = today.clone().add(1, 'week');
-    const oneMonthFromNow = today.clone().add(1, 'month');
-    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, 'week');
-
-    const options = render(
-      <StatefulDateRangePicker startDate={today} endDate={oneWeekFromToday} />
-    );
-
-    expect(getStartDate(options, today)).toBeInTheDocument();
-    expect(getEndDate(options, oneWeekFromToday)).toBeInTheDocument();
-
-    clickOnStartDate(options, oneMonthFromNow);
-    clickOnEndDate(options, oneMonthPlusOneWeekFromNow);
-
-    expect(getStartDate(options, today)).not.toBeInTheDocument();
-    expect(getEndDate(options, oneWeekFromToday)).not.toBeInTheDocument();
-
-    expect(getStartDate(options, oneMonthFromNow)).toBeInTheDocument();
-    expect(getEndDate(options, oneMonthPlusOneWeekFromNow)).toBeInTheDocument();
-  });
-
-  test('should call onDateChange', () => {
-    const onDatesChange = jest.fn();
-    const today = moment();
-    const oneWeekFromToday = today.clone().add(1, 'week');
-    const twoWeeksFromToday = today.clone().add(2, 'week');
-    const threeWeeksFromToday = today.clone().add(3, 'week');
-
-    const options = render(
-      <StatefulDateRangePicker
-        startDate={today}
-        endDate={oneWeekFromToday}
-        onDatesChange={onDatesChange}
-      />
-    );
-
-    clickOnStartDate(options, twoWeeksFromToday);
-
-    expect(onDatesChange).toHaveBeenCalledTimes(1);
-    expect(onDatesChange.mock.calls[0][0].startDate.isValid()).toEqual(true);
-
-    clickOnEndDate(options, threeWeeksFromToday);
-
-    expect(onDatesChange).toHaveBeenCalledTimes(2);
-    expect(onDatesChange.mock.calls[1][0].endDate.isValid()).toEqual(true);
-  });
-
-  test('should call onFocusChange', () => {
-    const onFocusChange = jest.fn();
-    const today = moment();
-    const oneWeekFromToday = today.clone().add(1, 'week');
-    const oneMonthFromNow = today.clone().add(1, 'month');
-    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, 'week');
-
-    const options = render(
-      <StatefulDateRangePicker
-        startDate={today}
-        endDate={oneWeekFromToday}
-        onFocusChange={onFocusChange}
-      />
-    );
-
-    clickOnStartDate(options, oneMonthFromNow);
-
-    expect(onFocusChange).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).toHaveBeenCalledWith('endDate');
-
-    clickOnEndDate(options, oneMonthPlusOneWeekFromNow);
-
-    expect(onFocusChange).toHaveBeenCalledTimes(2);
-    expect(onFocusChange).toHaveBeenCalledWith(null);
-  });
-});

package/__flow__/DatePicker/SingleDatePicker.stories.js

@@ -1,64 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import moment from 'moment';
-import SingleDatePicker from './SingleDatePicker';
-import {StatefulSingleDatePicker} from './StatefulSingleDatePicker';
-import Popout from '../Popout';
-import Button from '../Button';
-
-export default {
-  title: 'Components/DatePickers/SingleDatePicker',
-};
-
-const today = moment();
-const dateProps = {date: today};
-
-export const defaultStory = () => <StatefulSingleDatePicker {...dateProps} />;
-
-export const noStartingDate = () => <StatefulSingleDatePicker date={null} />;
-
-export const twoMonthDatePicker = () => (
-  <StatefulSingleDatePicker {...dateProps} numberOfMonths={2} />
-);
-
-export const datePickerInPopout = () => (
-  <Popout
-    content={
-      <Popout.Content p={0} py={400}>
-        <StatefulSingleDatePicker {...dateProps} />
-      </Popout.Content>
-    }
-  >
-    <Button appearance="secondary">Open Date Picker</Button>
-  </Popout>
-);
-
-export const FocusControlledPopoutDatePicker = () => {
-  const [focused, setIsFocused] = useState(false);
-  const [date, pickDate] = useState(moment());
-  const onFocusChange = ({focused}) => setIsFocused(focused);
-
-  return (
-    <Popout
-      isOpen={focused}
-      content={
-        <Popout.Content p={0} py={400}>
-          <SingleDatePicker
-            date={date}
-            onDateChange={pickDate}
-            focused={focused}
-            onFocusChange={onFocusChange}
-          />
-        </Popout.Content>
-      }
-    >
-      <Button appearance="secondary" onClick={() => setIsFocused(true)}>
-        Open Date Picker
-      </Button>
-    </Popout>
-  );
-};
-
-defaultStory.story = {
-  name: 'Default',
-};

package/__flow__/DatePicker/SingleDatePicker.test.js

@@ -1,89 +0,0 @@
-// @flow
-import React from 'react';
-import moment from 'moment';
-import {StatefulSingleDatePicker} from './StatefulSingleDatePicker';
-import {render, fireEvent} from '../utils/react-testing-library';
-import {
-  formatDateAsCalendarDay,
-  formatDateAsCalendarHeader,
-  getVisibleMonthWithReactDatesInternalApi,
-} from './common';
-
-const today = moment();
-
-describe('SingleDatePicker', () => {
-  test("should select today's date", () => {
-    const {getByLabelText} = render(<StatefulSingleDatePicker date={today} />);
-
-    expect(
-      getByLabelText(`Selected. ${formatDateAsCalendarDay(today)}`)
-    ).toBeInTheDocument();
-  });
-
-  test('should change dates', () => {
-    const {getByLabelText, queryByLabelText} = render(
-      <StatefulSingleDatePicker date={today} />
-    );
-
-    const threeDaysFromNow = formatDateAsCalendarDay(
-      today.clone().add(3, 'days')
-    );
-
-    fireEvent.click(getByLabelText(threeDaysFromNow));
-
-    expect(getByLabelText(`Selected. ${threeDaysFromNow}`)).toBeInTheDocument();
-    expect(
-      queryByLabelText(`Selected. ${formatDateAsCalendarDay(today)}`)
-    ).not.toBeInTheDocument();
-  });
-
-  test('should go to previous month', () => {
-    const {container, getByLabelText} = render(
-      <StatefulSingleDatePicker date={today} />
-    );
-
-    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today)
-    );
-
-    fireEvent.click(
-      getByLabelText('Move backward to switch to the previous month.')
-    );
-
-    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today.clone().subtract(1, 'month'))
-    );
-  });
-
-  test('should go to next month', () => {
-    const {container, getByLabelText} = render(
-      <StatefulSingleDatePicker date={today} />
-    );
-
-    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today)
-    );
-
-    fireEvent.click(
-      getByLabelText('Move forward to switch to the next month.')
-    );
-
-    expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today.clone().add(1, 'month'))
-    );
-  });
-
-  test('should call onDateChange', () => {
-    const onDateChange = jest.fn();
-    const {getByLabelText} = render(
-      <StatefulSingleDatePicker date={today} onDateChange={onDateChange} />
-    );
-
-    const threeDaysFromNow = today.clone().add(3, 'days');
-
-    fireEvent.click(getByLabelText(formatDateAsCalendarDay(threeDaysFromNow)));
-
-    expect(onDateChange).toHaveBeenCalledTimes(1);
-    expect(onDateChange.mock.calls[0][0].isValid()).toEqual(true);
-  });
-});