Add typescript definitions

.travis.yml

@@ -4,6 +4,7 @@ node_js:
 cache: yarn
 before_script:
   - "npm run lint"
+  - "npm run dtslint"
 script: 
   - "npm run build"
 after_success:

docs/API.md

@@ -1,4 +1,5 @@
 # Component API
 
-* [Component props](APIProps.md)
-* [Component methods](APIMethods.md)
+* [Component Props](APIProps.md)
+* [Component Methods](APIMethods.md)
+* [Typescript Type Definitions](https://github.com/gpbl/react-day-picker/tree/master/types/index.d.ts)

docs/Contributing.md

@@ -6,7 +6,7 @@ Bug reports, suggestions and pull requests are welcome on the repo on GitHub: [h
 
 ## Running the project locally
 
-The development environment is Node 4+. To setup the repository
+The development environment is Node 7+. To setup the repository
 
 ```
 git clone https://github.com/gpbl/react-day-picker.git
@@ -18,6 +18,7 @@ Some useful npm scripts:
 * `npm test`: test the code
 * `npm cover`: run a test coverage report
 * `npm lint`: make sure the code is linted correctly
+* `npm dtslint`: lint Typescript declaration
 
 You can even run and modify the [Examples](Examples.md)! Just remember to run `npm install`
 to use the last version.

package.json

@@ -4,18 +4,21 @@
   "description": "Flexible date picker component for React",
   "main": "DayPicker.js",
   "style": "lib/style.css",
+  "types": "./types/index.d.ts",
   "files": [
     "DayPicker.js",
     "lib",
     "moment.js",
-    "utils.js"
+    "utils.js",
+    "types/index.d.ts"
   ],
   "directories": {
     "doc": "docs"
   },
   "scripts": {
     "clean": "rimraf coverage lib",
     "lint": "eslint src test",
+    "dtslint": "dtslint types",
     "prettify": "prettier --write --single-quote --trailing-comma=\"es5\" \"{src,test,examples/src}/**/*.js\"",
     "precommit": "lint-staged",
     "test": "mocha --compilers js:babel-core/register --require ./test/setup.js --recursive --reporter spec",
@@ -63,6 +66,7 @@
     "react": "~0.13.x || ~0.14.x || ^15.0.0"
   },
   "devDependencies": {
+    "@types/react": "^15.0.23",
     "autoprefixer": "6.7.7",
     "babel-cli": "6.24.1",
     "babel-core": "6.24.1",
@@ -75,6 +79,7 @@
     "chai-enzyme": "0.6.1",
     "cheerio": "0.22.0",
     "coveralls": "2.13.0",
+    "dtslint": "^0.1.2",
     "enzyme": "2.8.2",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "14.1.0",
@@ -99,6 +104,7 @@
     "rimraf": "2.6.1",
     "sinon": "2.1.0",
     "sinon-chai": "2.9.0",
+    "typescript": "^2.2.2",
     "webpack": "2.4.1"
   },
   "dependencies": {

types/index.d.ts

@@ -0,0 +1,167 @@
+// TypeScript Version: 2.2
+import * as React from 'react';
+
+declare namespace DayPicker {
+    interface LocaleUtils {
+        formatDay(day: Date, locale: string): string;
+        formatMonthTitle(month: Date, locale: string): string;
+        formatWeekdayLong(weekday: number, locale: string): string;
+        formatWeekdayShort(weekday: number, locale: string): string;
+        getFirstDayOfWeek(locale: string): number;
+        getMonths(locale: string): [string, string, string, string, string, string, string, string, string, string, string, string];
+    }
+
+    interface DateUtils {
+        addMonths(d: Date, n: number): Date;
+        clone(d: Date): Date;
+        isSameDay(d1: Date, d2: Date): Date;
+        isPastDay(d: Date): boolean;
+        isFutureDay(d: Date): boolean;
+        isDayBetween(day: Date, begin: Date, end: Date): boolean;
+        addDayToRange(day: Date, range: RangeModifier): RangeModifier;
+        isDayInRange(day: Date, range: RangeModifier): boolean;
+    }
+
+    interface CaptionElementProps {
+        date: Date;
+        classNames: ClassNames;
+        localeUtils: LocaleUtils;
+        locale: string;
+        months: undefined;
+        onClick?: React.MouseEventHandler<HTMLElement>;
+    }
+
+    interface NavbarElementProps {
+        className: string;
+        classNames: ClassNames;
+        previousMonth: Date;
+        nextMonth: Date;
+        showPreviousButton: boolean;
+        showNextButton: boolean;
+        onPreviousClick(callback?: () => void): void;
+        onNextClick(callback?: () => void): void;
+        dir?: string;
+        labels: { previousMonth: string; nextMonth: string; };
+        localeUtils: LocaleUtils;
+        locale: string;
+    }
+
+    interface WeekdayElementProps {
+        weekday: number;
+        className: string;
+        localeUtils: LocaleUtils;
+        locale: string;
+    }
+
+    interface ClassNames {
+        container: string;
+        interactionDisabled: string;
+        navBar: string;
+        navButtonPrev: string;
+        navButtonNext: string;
+
+        month: string;
+        caption: string;
+        weekdays: string;
+        weekdaysRow: string;
+        weekday: string;
+        body: string;
+        week: string;
+        day: string;
+
+        today: string;
+        selected: string;
+        disabled: string;
+        outside: string;
+    }
+
+    interface RangeModifier {
+        from: Date;
+        to: Date;
+    }
+    interface BeforeModifier {
+        before: Date;
+    }
+    interface AfterModifier {
+        after: Date;
+    }
+    type FunctionModifier = (date: Date) => boolean;
+    type Modifier = Date | RangeModifier | BeforeModifier | AfterModifier | FunctionModifier;
+
+    interface Modifiers {
+        today: Modifier | Modifier[];
+        outside: Modifier | Modifier[];
+        [other: string]: Modifier | Modifier[] | undefined;
+    }
+
+    interface DayModifiers {
+        today: boolean | undefined;
+        outside: boolean | undefined;
+        [other: string]: boolean | undefined;
+    }
+
+    interface Props {
+        canChangeMonth?: boolean;
+        captionElement?: React.ReactElement<Partial<CaptionElementProps>> |
+            React.ComponentClass<CaptionElementProps> |
+            React.SFC<CaptionElementProps>;
+        className?: string;
+        classNames?: ClassNames;
+        containerProps?: React.HTMLAttributes<HTMLDivElement>;
+        disabledDays?: Modifier | Modifier[];
+        enableOutsideDays?: boolean;
+        firstDayOfWeek?: number;
+        fixedWeeks?: boolean;
+        fromMonth?: Date;
+        initialMonth?: Date;
+        labels?: { previousMonth: string; nextMonth: string; };
+        locale?: string;
+        localeUtils?: LocaleUtils;
+        modifiers?: Partial<Modifiers>;
+        modifiersStyles?: object;
+        month?: Date;
+        months?: [string, string, string, string, string, string, string, string, string, string, string, string];
+        navbarElement?: React.ReactElement<Partial<NavbarElementProps>> |
+            React.ComponentClass<NavbarElementProps> |
+            React.SFC<NavbarElementProps>;
+        numberOfMonths?: number;
+        onBlur?(e: React.FocusEvent<HTMLDivElement>): void;
+        onCaptionClick?(month: Date, e: React.MouseEvent<HTMLDivElement>): void;
+        onDayClick?(day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>): void;
+        onDayKeyDown?(day: Date, modifiers: DayModifiers, e: React.KeyboardEvent<HTMLDivElement>): void;
+        onDayMouseEnter?(day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>): void;
+        onDayMouseLeave?(day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>): void;
+        onDayTouchEnd?(day: Date, modifiers: DayModifiers, e: React.TouchEvent<HTMLDivElement>): void;
+        onDayTouchStart?(day: Date, modifiers: DayModifiers, e: React.TouchEvent<HTMLDivElement>): void;
+        onFocus?(e: React.FocusEvent<HTMLDivElement>): void;
+        onKeyDown?(e: React.KeyboardEvent<HTMLDivElement>): void;
+        onMonthChange?(month: Date): void;
+        pagedNavigation?: boolean;
+        renderDay?(date: Date, modifiers: Modifiers): React.ReactNode;
+        reverseMonths?: boolean;
+        selectedDays?: Modifier | Modifier[];
+        toMonth?: Date;
+        weekdayElement?: React.ReactElement<Partial<WeekdayElementProps>> |
+            React.ComponentClass<WeekdayElementProps> |
+            React.SFC<WeekdayElementProps>;
+        weekdaysLong?: [string, string, string, string, string, string, string];
+        weekdaysShort?: [string, string, string, string, string, string, string];
+    }
+    const VERSION: string;
+    const LocaleUtils: DayPicker.LocaleUtils;
+    const DateUtils: DayPicker.DateUtils;
+}
+
+declare class DayPicker extends React.Component<DayPicker.Props, never> {
+    showMonth(month: Date): void;
+
+    showPreviousMonth(): void;
+
+    showNextMonth(): void;
+
+    showPreviousYear(): void;
+
+    showNextYear(): void;
+}
+
+export = DayPicker;

types/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "files": [
+    "index.d.ts"
+  ]
+}