Include typescript definitions

[adidahiya]

@gpbl what do you think about including typescript definitions in this repo and the published NPM package? The blueprint maintainers could likely help you maintain them. The moment package, among others, does this: https://github.com/moment/moment/blob/develop/moment.d.ts.

I guess the one downside here is that you don't automatically get the testing infrastructure of DefinitelyTyped (you'd have to build some yourself if you wanted it). Upside is that the definitions are more likely to stay up to do date. See DefinitelyTyped/DefinitelyTyped#16010

cc @giladgray

[gpbl]

I was just thinking to ask on that DefinitelyTyped issue for some help 😄

I have no idea how do they work: is it just adding a react-day-picker.d.ts to the package? Need to investigate a bit (or if you have some spare time, I'd be happy to merge a PR).

As for the tests, we could just copy what moment is doing there!

[gpbl]

Type definitions have been released in v5.3.0. I hope I made everything right: if not, please report 😄 Thanks!

[phaza]

It doesn't appear to work for LocaleUtils:

import LocaleUtils from "react-day-picker/moment"; implicitly has any type

Not entirely sure how to fix it, my typescript experience is so far fairly limited.

[adidahiya]

@phaza try import { LocaleUtils } from "react-day-picker". See

react-day-picker/types/index.d.ts

Line 5 in 7d26252

interface LocaleUtils {

[lpcarignan]

I tried the following in Typescript 2.0 project:

import {DayPicker} from "react-day-picker";

I get the following error message when I run the Typescript compiler

TS2305: Module '/node_modules/react-day-picker/types/index"' has no exported member 'DayPicker'.

[giladgray]

@lpcarignan the package uses module.exports so you have to do the namespace import:

import * as ReactDayPicker from "react-day-picker";
<ReactDayPicker ... />

see https://github.com/palantir/blueprint/blob/master/packages/datetime/src/datePicker.tsx#L11

[lpcarignan]

@giladgray Thx for the quick response and the link to the project on which I can get some ideas. I roughly copy/pasted the ReactDatePicker element in the example you sent.

After playing around for a bit, I get a very ugly ReactDatePicker where all of the days and dates of the month are stacked. In the example you sent me, there's a div with a className refering to DatePicker. Do I have to consider the .css of the ReactDatePicker when I use the component in my code? When I look at the examples, it begins by including

import 'react-day-picker/lib/style.css';

I can't do that in TypeScript. To add to the mix, I'm using semantic-ui-react as my React library and I bundle my app into a single .js with Webpack.

[gpbl]

@lpcarignan check http://react-day-picker.js.org/docs/styling.html for more info about styling the component.

Please open a new issue or write in the gitter room for questions not related to this issue, thanks 🙏🏽👍🏽

[giladgray]

@lpcarignan you'll need to include the css file somehow, either as a <link> in your HTML or using a loader for your JS bundler of choice that can handle css.

[lpcarignan]

Thanks for all of your help guys with my newbie questions. It is much appreciated.

[Darren120]

this package is dependence heavy i uninstalled it.