Deliver type definitions with the package

[havenchyk]

we need to deliver .d.ts files as well

[todd-elvers]

For those who want to use this library in TypeScript now do the following:

• Create a declaration.d.ts file in your project
• Paste the following into there:

declare module "simple-react-calendar" {
  import * as helper from "simple-react-calendar/helper";

  // lib/calendar/consts.js
  export declare const BLOCK_CLASS_NAME = "calendar";
  export declare const NEXT_MONTH_TITLE = "Next month";
  export declare const PREV_MONTH_TITLE = "Previous month";
  export declare const DAYS_IN_WEEK: number[];
  export declare const DAYS_OF_WEEK: string[];

  import {
    Component,
    ComponentProps,
    ReactElement,
    ReactNode,
    SyntheticEvent,
  } from "react";
  import { MonthProps } from "simple-react-calendar/lib/month";
  import { DaysOfWeekProps } from "simple-react-calendar/lib/days_of_week";
  import { MonthHeaderProps } from "simple-react-calendar/lib/month_header";
  import { WeekProps } from "simple-react-calendar/lib/week";
  import Day from "simple-react-calendar/lib/RenderPropsComponents/Day";
  import DayOfWeek from "simple-react-calendar/lib/RenderPropsComponents/DayOfWeek";
  import Notice from "simple-react-calendar/lib/RenderPropsComponents/Notice";
  export declare type IDateSelection = "start" | "end";
  export declare type IDate = Date | number | string;
  export declare type ISelectionRange = {
    start: IDate;
    end: IDate;
    inProgress?: boolean;
  };
  declare type IChildren = {
    children: ReactNode;
  };
  export declare type RenderPropsDay = (
    Props: ComponentProps<typeof Day>
  ) => ReactElement;
  export declare type RenderPropsDayOfWeek = (
    Props: ComponentProps<typeof DayOfWeek>
  ) => ReactElement;
  export declare type RenderPropsNotice = (
    Props: ComponentProps<typeof Notice>
  ) => ReactElement;
  export declare type HandleOnDayClick = (
    event: SyntheticEvent<HTMLButtonElement>
  ) => void;
  export declare type HandleOnDayEnter = (
    event: SyntheticEvent<HTMLButtonElement>
  ) => void;
  export declare type OnDayClick = (
    event: SyntheticEvent<HTMLButtonElement>
  ) => void;
  export declare type OnDayMouseEnter = (
    event: SyntheticEvent<HTMLButtonElement>
  ) => void;
  export declare type OnDisabledDayClick = HandleOnDayClick;
  /**
   * Render Props Interface
   */
  interface ICalendarRenderPropArgs extends CalendarProps, IChildren {}
  export declare type ICalendarRenderProp = (
    Props: ICalendarRenderPropArgs
  ) => ReactElement;
  interface IMonthRenderPropsArgs extends MonthProps, IChildren {}
  export declare type IMonthRenderProps = (
    Props: IMonthRenderPropsArgs
  ) => ReactElement;
  interface IWeekRenderPropsArgs extends WeekProps, IChildren {}
  export declare type IWeekRenderProps = (
    Props: IWeekRenderPropsArgs
  ) => ReactElement;
  interface IDaysOfWeekRenderPropsArgs extends DaysOfWeekProps, IChildren {}
  export declare type IDaysOfWeekRenderProps = (
    Props: IDaysOfWeekRenderPropsArgs
  ) => ReactElement;
  interface IMonthHeaderRenderPropsArgs extends MonthHeaderProps {
    prevEnabled: boolean;
    nextEnabled: boolean;
    switchMonth: (offset: -1 | 1) => void;
    children: string;
  }
  export declare type IMonthHeaderRenderProps = (
    Props: IMonthHeaderRenderPropsArgs
  ) => ReactElement;

  declare type ISelection = {
    start: IDate;
    end: IDate;
    inProgress: boolean;
  };
  export declare type CalendarProps = {
    MonthHeaderComponent?: ReactElement;
    activeMonth?: IDate;
    blockClassName: string;
    customRender?: ICalendarRenderProp;
    daysOfWeek?: string[];
    disableDaysOfWeek?: boolean;
    disabledIntervals?: {
      start: IDate;
      end: IDate;
    }[];
    getDayFormatted: typeof helper.getDayFormatted;
    getISODate: typeof helper.getISODate;
    getNoticeContent: typeof helper.getNoticeContent;
    headerNextArrow?: ReactElement;
    headerNextTitle?: string;
    headerPrevArrow?: ReactElement;
    headerPrevTitle?: string;
    highlighted?: {
      start: IDate;
      end: IDate;
    };
    maxDate?: IDate | undefined;
    minDate?: IDate | undefined;
    minNumberOfWeeks?: number;
    mode?: "range" | "single";
    onDayHover?: (...args: any[]) => any;
    onMonthChange?: (...args: any[]) => any;
    onSelect?: (...args: any[]) => any;
    onSelectionProgress?: (...args: any[]) => any;
    rangeLimit?: number;
    renderNotice?: RenderPropsNotice;
    renderDay?: RenderPropsDay;
    renderDayOfWeek?: RenderPropsDayOfWeek;
    renderDaysOfWeek?: IDaysOfWeekRenderProps;
    renderMonth?: IMonthRenderProps;
    renderMonthHeader?: IMonthHeaderRenderProps;
    renderWeek?: IWeekRenderProps;
    selected?: IDate | ISelectionRange;
    today?: IDate;
    weekStartsOn?: number;
  };
  declare type State = {
    activeMonth: any;
    selection: {
      start: any;
      end: any;
    } | null;
    shownNoticeType: any | null;
  };
  export default class Calendar extends Component<CalendarProps, State> {
    static defaultProps: {
      blockClassName: string;
      daysOfWeek: string[];
      disableDaysOfWeek: boolean;
      getDayFormatted: (date: Date) => string;
      getISODate: (date: Date) => string;
      getNoticeContent: (type: helper.NoticeMessageType) => string;
      headerNextTitle: string;
      headerPrevTitle: string;
      mode: string;
      renderDay: (props: ComponentProps<typeof Day>) => JSX.Element;
      renderDayOfWeek: (props: ComponentProps<typeof DayOfWeek>) => JSX.Element;
      renderNotice: (props: ComponentProps<typeof Notice>) => JSX.Element;
      weekStartsOn: number;
    };
    constructor(props: Props);
    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
    _initialMonth(props: Props): string | number | Date;
    _switchMonth(date: Date): void;
    _activeMonth(): any;
    _highlight(): {
      end: string | number | Date;
      start: string | number | Date;
    };
    _selection(): {
      end: Date;
      start: Date;
    };
    _selectionStart(): Date;
    _selectionEnd(): Date;
    _selectionDate(dateType: IDateSelection): any;
    _selectionChanged(selection: ISelection): void;
    _noticeChanged(shownNoticeType: helper.NoticeMessageType): void;
    _today(): string | number | Date;
    _renderMonth(): JSX.Element;
    _renderMonthHeader(): JSX.Element;
    render(): JSX.Element;
  }
  export {};
}

declare module "simple-react-calendar/helper" {
  export declare type NoticeMessageType =
    | "overlapping_with_disabled"
    | "disabled_day_click"
    | null;
  export declare const getISODate: (date: Date) => string;
  export declare const getDayFormatted: (date: Date) => string;
  export declare const getNoticeContent: (type: NoticeMessageType) => string;
}

declare module "simple-react-calendar/lib/month" {
  import { Component, SyntheticEvent } from "react";
  import * as helper from "simple-react-calendar/helper";
  import {
    IDate,
    IDaysOfWeekRenderProps,
    IMonthRenderProps,
    IWeekRenderProps,
    RenderPropsDay,
    RenderPropsDayOfWeek,
  } from "simple-react-calendar";
  export declare type MonthProps = {
    activeMonth: IDate;
    blockClassName: string;
    customRender?: IMonthRenderProps;
    daysOfWeek: string[];
    disableDaysOfWeek: boolean;
    disabledIntervals?: {
      start: IDate;
      end: IDate;
    }[];
    getDayFormatted: typeof helper.getDayFormatted;
    getISODate: typeof helper.getISODate;
    highlightedEnd?: IDate;
    highlightedStart?: IDate;
    maxDate?: IDate;
    minDate?: IDate;
    minNumberOfWeeks?: number;
    mode: string;
    onChange: (...args: any[]) => any;
    onDayMouseEnter?: (...args: any[]) => any;
    onNoticeChange: (...args: any[]) => any;
    rangeLimit?: number;
    renderDay: RenderPropsDay;
    renderDayOfWeek: RenderPropsDayOfWeek;
    renderDaysOfWeek?: IDaysOfWeekRenderProps;
    renderWeek?: IWeekRenderProps;
    selectedMax?: IDate;
    selectedMin?: IDate;
    today: IDate;
    weekStartsOn: number;
  };
  declare type IInterval = {
    start: Date | null;
    end: Date | null;
  };
  export default class Month extends Component<MonthProps, {}> {
    handleOnDayMouseEnter: (event: SyntheticEvent<HTMLButtonElement>) => void;
    handleOnDayClick: (event: SyntheticEvent<HTMLButtonElement>) => void;
    handleOnDisabledDayClick: (
      event: SyntheticEvent<HTMLButtonElement>
    ) => void;
    _pushUpdate(): any;
    _getMinDate(): string | number | Date;
    _pushNoticeUpdate(noticeType: helper.NoticeMessageType): any;
    _getDisabledRange(interval: IInterval): boolean;
    _getMaxDate(): string | number | Date;
    _renderDaysOfWeek(): JSX.Element;
    _renderWeeks(): JSX.Element[];
    render(): JSX.Element;
  }
  export {};
}
declare module "simple-react-calendar/lib/week" {
  import React, { Component } from "react";
  import * as helper from "simple-react-calendar/helper";
  import {
    IDate,
    IWeekRenderProps,
    OnDayClick,
    OnDayMouseEnter,
    OnDisabledDayClick,
    RenderPropsDay,
  } from "simple-react-calendar";
  export declare type WeekProps = {
    activeMonth: IDate;
    blockClassName: string;
    customRender?: IWeekRenderProps;
    date: IDate;
    disabledIntervals?: {
      start: IDate;
      end: IDate;
    }[];
    getDayFormatted: typeof helper.getDayFormatted;
    getISODate: typeof helper.getISODate;
    highlightedEnd?: IDate;
    highlightedStart?: IDate;
    maxDate?: IDate;
    minDate?: IDate;
    onDayClick: OnDayClick;
    onDayMouseEnter: OnDayMouseEnter;
    onDisabledDayClick: OnDisabledDayClick;
    renderDay: RenderPropsDay;
    selectedMax?: IDate;
    selectedMin?: IDate;
    today: IDate;
    weekStartsOn: number;
  };
  export default class Week extends Component<WeekProps, {}> {
    _dateSelectable(date: Date): boolean;
    _dateSelected(date: Date): boolean;
    _dateHighlighted(date: Date): boolean;
    _dateDisabled(date: Date | string): any;
    _renderDays(): React.ReactElement<
      any,
      | string
      | ((
          props: any
        ) => React.ReactElement<
          any,
          string | any | (new (props: any) => React.Component<any, any, any>)
        >)
      | (new (props: any) => React.Component<any, any, any>)
    >[];
    render(): JSX.Element;
  }
}
declare module "simple-react-calendar/lib/month_header" {
  import { Component, ReactElement } from "react";
  import { IDate, IMonthHeaderRenderProps } from "simple-react-calendar";

  export declare type MonthHeaderProps = {
    activeMonth: IDate;
    blockClassName?: string;
    customRender?: IMonthHeaderRenderProps;
    headerNextArrow?: ReactElement;
    headerNextTitle?: string;
    headerPrevArrow?: ReactElement;
    headerPrevTitle?: string;
    maxDate?: IDate;
    minDate?: IDate;
    onMonthChange: (...args: any[]) => any;
  };

  export default class MonthHeader extends Component<MonthHeaderProps, {}> {
    _switchMonth(offset: -1 | 1): void;
    render(): JSX.Element;
  }
}
declare module "simple-react-calendar/lib/days_of_week" {
  import { FC } from "react";
  import {
    IDaysOfWeekRenderProps,
    RenderPropsDayOfWeek,
  } from "simple-react-calendar";

  export declare type DaysOfWeekProps = {
    blockClassName: string;
    customRender?: IDaysOfWeekRenderProps;
    daysOfWeek: string[];
    renderDayOfWeek: RenderPropsDayOfWeek;
    weekStartsOn: number;
  };
  interface IGetDaysOfWeek {
    daysOfWeek: string[];
    dayIndex: number;
  }
  declare const DaysOfWeek: FC<DaysOfWeekProps> & {
    getDaysOfWeek: (props: IGetDaysOfWeek) => string[];
  };
  export default DaysOfWeek;
}

declare module "simple-react-calendar/lib/RenderPropsComponents/Day" {
  import { FC } from "react";
  import * as helper from "simple-react-calendar/helper";
  import { HandleOnDayClick, HandleOnDayEnter } from "simple-react-calendar";

  export declare type DayProps = {
    blockClassName: string;
    date: Date;
    getDayFormatted: typeof helper.getDayFormatted;
    handleOnClick: HandleOnDayClick;
    handleOnEnter: HandleOnDayEnter;
    isCurrentMonth: boolean;
    isDisabled: boolean;
    isHighlighted: boolean;
    isMonthNext: boolean;
    isMonthPrev: boolean;
    isNonSelectable: boolean;
    ISODate: string;
    isSelectable: boolean;
    isSelected: boolean;
    isSelectionEnd: boolean;
    isSelectionStart: boolean;
    isToday: boolean;
    isWeekend: boolean;
    isWorkDay: boolean;
    key?: string;
  };

  declare const Day: FC<DayProps>;

  export default Day;
}
declare module "simple-react-calendar/lib/RenderPropsComponents/DayOfWeek" {
  import { FC } from "react";

  export declare type DayOfWeekProps = {
    blockClassName?: string;
    day: string;
    isWeekend: boolean;
    key?: string;
  };

  declare const DayOfWeek: FC<DayOfWeekProps>;

  export default DayOfWeek;
}

declare module "simple-react-calendar/lib/RenderPropsComponents/Notice" {
  import { FC } from "react";

  export declare type NoticeProps = {
    blockClassName?: string;
  };

  declare const Notice: FC<NoticeProps>;

  export default Notice;
}

Everything in this library is default exported, which is why you may have noticed multiple module declarations with the same root above. This allows us to import the calendar from the top-level export and anything else we may need directly from the file it was created in.

Example:

import SimpleReactCalendar, { CalendarProps } from "simple-react-calendar";
import Day from "simple-react-calendar/lib/RenderPropsComponents/Day";

export const CalendarContainer = (props: CalendarProps) => {
  const CustomDay = (props: DayProps) => <Day {...props} />
 
  return (
    <SimpleReactCalendar 
       renderDay={CustomDay}
       {...props} 
    />
  )
}