@hyphen/hyphen-components 6.14.0 → 7.0.0-beta.1

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,199 +0,0 @@
-import React, { useState } from 'react';
-import { DatePicker } from './DatePicker';
-import type { Meta } from '@storybook/react-vite';
-import { Box } from '../Box/Box';
-import { Heading } from '../Heading/Heading';
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-};
-
-export default meta;
-
-export const BasicExample = () => {
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date(2019, 11, 3));
-  return (
-    <Box gap="md">
-      <DatePicker
-        onChange={(date) => setSelectedDate(date as Date)}
-        selected={selectedDate}
-      />
-      <p>Selected Date: {selectedDate.toISOString()}</p>
-    </Box>
-  );
-};
-
-export const DateRange = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 3));
-  const [endDate, setEndDate] = useState<Date>(new Date(2019, 11, 28));
-  const setDate = ([startDate, endDate]: [Date, Date]) => {
-    setStartDate(startDate);
-    setEndDate(endDate);
-  };
-  return (
-    <Box gap="md">
-      <DatePicker
-        onChange={(date) => setDate(date as [Date, Date])}
-        selected={startDate}
-        startDate={startDate}
-        endDate={endDate}
-        selectsRange
-      />
-      <p>
-        {`Selected Date Range: ${startDate && startDate.toISOString()} - ${
-          endDate && endDate.toISOString()
-        }`}
-      </p>
-    </Box>
-  );
-};
-
-export const MinAndMaxDates = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 18));
-  const min = new Date(2019, 11, 18);
-  min.setDate(min.getDate() - 5);
-  const max = new Date(2019, 11, 18);
-  max.setDate(max.getDate() + 5);
-  return (
-    <Box gap="md">
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date as Date)}
-        minDate={min}
-        maxDate={max}
-      />
-      <p>Selected Date: {startDate.toISOString()}</p>
-    </Box>
-  );
-};
-
-export const MonthPicker = () => {
-  const [startDateOne, setStartDateOne] = useState<Date>(new Date(2019, 10));
-  const [startDateTwo, setStartDateTwo] = useState<Date>(new Date(2019, 10));
-  const [startDateThree, setStartDateThree] = useState<Date>(
-    new Date(2019, 10)
-  );
-  return (
-    <Box display="flex" direction="row" gap="md">
-      <Box
-        gap="md"
-        display="flex"
-        direction="column"
-        alignItems="center"
-        width="33"
-      >
-        <Heading size="md">Default</Heading>
-        <DatePicker
-          selected={startDateOne}
-          onChange={(date) => setStartDateOne(date as Date)}
-          showMonthYearPicker
-        />
-        <p>{startDateOne.toISOString()}</p>
-      </Box>
-      <Box
-        gap="md"
-        display="flex"
-        direction="column"
-        alignItems="center"
-        width="33"
-      >
-        <Heading size="md">With full month name</Heading>
-        <DatePicker
-          selected={startDateTwo}
-          onChange={(date) => setStartDateTwo(date as Date)}
-          showMonthYearPicker
-          showFullMonthYearPicker
-        />
-        <p>{startDateTwo.toISOString()}</p>
-      </Box>
-      <Box
-        gap="md"
-        display="flex"
-        direction="column"
-        alignItems="center"
-        width="33"
-      >
-        <Heading size="md">With Two-column layout</Heading>
-        <DatePicker
-          selected={startDateThree}
-          onChange={(date) => setStartDateThree(date as Date)}
-          showMonthYearPicker
-          showFullMonthYearPicker
-          showTwoColumnMonthYearPicker
-        />
-        <p>{startDateThree.toISOString()}</p>
-      </Box>
-    </Box>
-  );
-};
-
-export const ShowMultipleMonths = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date(2019, 11, 3));
-  const [endDate, setEndDate] = useState<Date>(new Date(2019, 12, 20));
-  const setDate = ([startDate, endDate]: [Date, Date]) => {
-    setStartDate(startDate);
-    setEndDate(endDate);
-  };
-  return (
-    <Box gap="md">
-      <DatePicker
-        onChange={(date) => setDate(date as [Date, Date])}
-        selected={startDate}
-        startDate={startDate}
-        endDate={endDate}
-        selectsRange
-        monthsShown={2}
-      />
-      <p>Start Date: {startDate && startDate.toISOString()}</p>
-      <p>End Date: {endDate && endDate.toISOString()}</p>
-    </Box>
-  );
-};
-
-export const WithTimePicker = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date('1993/09/28'));
-  return (
-    <Box gap="md">
-      <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date as Date)}
-        showTimeSelect
-        timeIntervals={15}
-        timeCaption="Time"
-      />
-      <p>Selected Date: {startDate && startDate.toISOString()}</p>
-    </Box>
-  );
-};
-
-export const OpenByDefaultOnASpecificDate = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date('1993/09/28'));
-  return (
-    <Box gap="md">
-      <DatePicker
-        onChange={(date) => setStartDate(date as Date)}
-        selected={startDate}
-        openToDate={new Date('1993/09/28')}
-      />
-      <p>Selected Date: {startDate && startDate.toISOString()}</p>
-    </Box>
-  );
-};
-
-export const WithChildren = () => {
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date(2019, 11, 3));
-  return (
-    <Box gap="md">
-      <DatePicker
-        onChange={(date) => setSelectedDate(date as Date)}
-        selected={selectedDate}
-      >
-        <Box display="block" style={{ textAlign: 'center' }} color="base">
-          It will be sunny out today!
-        </Box>
-      </DatePicker>
-      <p>Selected Date: {selectedDate.toISOString()}</p>
-    </Box>
-  );
-};

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { DatePicker } from './DatePicker';
-
-describe('DatePicker', () => {
-  describe('Default', () => {
-    it('renders a datepicker with default props', () => {
-      const mockedOnChange = jest.fn();
-      const { container } = render(<DatePicker onChange={mockedOnChange} />);
-      const datePicker = container.querySelector('.react-datepicker');
-      expect(datePicker).toBeInTheDocument();
-    });
-  });
-
-  describe('Callbacks', () => {
-    it('Fires the expected callback when date is selected', () => {
-      const openToDate = new Date('1995, 11, 14');
-      const mockedOnChange = jest.fn();
-      render(<DatePicker onChange={mockedOnChange} openToDate={openToDate} />);
-      const fourteenth = screen.getByText('14');
-      expect(fourteenth).toBeInTheDocument();
-      fireEvent.click(fourteenth);
-      expect(mockedOnChange).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/components/DatePicker/DatePicker.tsx

@@ -1,138 +0,0 @@
-import React, { FC, SyntheticEvent, ReactNode } from 'react';
-import classNames from 'classnames';
-import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
-import styles from './DatePicker.module.scss';
-
-export interface DatePickerProps extends ReactDatePickerProps<any, any> {
-  /**
-   * React children (to be rendered below the calendar dates).
-   */
-  children?: ReactNode;
-  /**
-   * Custom classname to be applied to the DatePicker container.
-   */
-  className?: string;
-  /**
-   * Callback that fires when a date is changed/selected.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange: (
-    date: Date | [Date, Date] | null,
-    event?: React.SyntheticEvent<any> | undefined
-  ) => void;
-  /**
-   * Callback that fires when a date is clicked.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onSelect?:
-    | ((date: Date, event: SyntheticEvent<any, Event> | undefined) => void)
-    | undefined;
-  /**
-   * Custom Class to be applied to a single day element based on a date.
-   */
-  dayClassName?: ((date: Date) => string | null) | undefined;
-  /**
-   * Custom Class to be applied to a single week element based on a date.
-   */
-  weekClassName?: ((date: Date) => string | null) | undefined;
-  /**
-   * Custom Class to be applied to a single month element based on a date.
-   */
-  monthClassName?: ((date: Date) => string | null) | undefined;
-  /**
-   * Custom Class to be applied to a specific time.
-   */
-  timeClassName?: ((date: Date) => string | null) | undefined;
-  /**
-   * Custom format for weekday.
-   */
-  formatWeekDay?: (formattedDate: string) => string;
-  /**
-   * Last allowable/shown date
-   */
-  maxDate?: Date | null;
-  /**
-   * First allowable/shown date
-   */
-  minDate?: Date | null;
-  /**
-   * Months to be shown at one time
-   */
-  monthsShown?: number;
-  /**
-   * Date that the calendar will open to by default.
-   */
-  openToDate?: Date;
-  /**
-   * Currently selected date.
-   */
-  selected?: Date | null;
-  /**
-   * Whether or not the picker will return a range of dates.
-   */
-  selectsRange?: boolean;
-  /**
-   * Start date in a range
-   */
-  startDate?: Date | null;
-  /**
-   * Show month picker in two columns
-   */
-  showTwoColumnMonthYearPicker?: boolean;
-  /**
-   * See full month name in the month picker
-   */
-  showFullMonthYearPicker?: boolean;
-  /**
-   * Use the month picker
-   */
-  showMonthYearPicker?: boolean;
-  /**
-   * Additional props to be spread to rendered element
-   */
-  [x: string]: any; // eslint-disable-line
-}
-
-export const DatePicker: FC<DatePickerProps> = ({
-  children = null,
-  dayClassName = undefined,
-  maxDate = undefined,
-  minDate = undefined,
-  monthsShown = undefined,
-  openToDate = undefined,
-  startDate = undefined,
-  selected = undefined,
-  selectsRange = undefined,
-  showTwoColumnMonthYearPicker = false,
-  showFullMonthYearPicker = false,
-  showMonthYearPicker = false,
-  className = undefined,
-  formatWeekDay = (formattedDate) => formattedDate[0], // Make days show as 1 character.
-  ...restProps
-}) => {
-  const datePickerClasses = classNames(styles['react-datepicker'], className);
-
-  return (
-    <ReactDatePicker
-      inline
-      calendarClassName={datePickerClasses}
-      formatWeekDay={formatWeekDay}
-      maxDate={maxDate}
-      minDate={minDate}
-      monthsShown={monthsShown}
-      openToDate={openToDate}
-      selected={selected}
-      startDate={startDate}
-      selectsRange={selectsRange}
-      showTwoColumnMonthYearPicker={showTwoColumnMonthYearPicker}
-      showFullMonthYearPicker={showFullMonthYearPicker}
-      showMonthYearPicker={showMonthYearPicker}
-      dayClassName={dayClassName}
-      {...restProps}
-    >
-      {children}
-    </ReactDatePicker>
-  );
-};
-
-export default DatePicker;