DatePicker: Write tests and refactor

[luizbaldi]

trafficstars

The DatePicker component is already created and it's functional, but it was written some time ago and it can be refactored (migrating from class-based to hooks). In order to achieve a good result, we also need a good test coverage.

Running storybook locally

1. Fork and clone the repo
2. Install the necessary dependêncies using npm (run npm i on the root folder)
3. Start storybook locally by running npm start, this will start a local server and opens a tab on your browser automatically
4. Uncomment the code on src/DatePicker/DatePicker.stories.js file in order to make it appear
5. Create a DatePicker.spec.js file on the same folder to write tests

Aditional information

We're using React Testing Library to unit test our components and we have a good test coverage, so you can rely on the existing ones.

---

Before start working on this bug leave a comment here so we can avoid more than one person working on the issue, if you have any doubts feel free to drop a comment here or join us at Slack 🕺

[luckened]

hi! can i work on this?

[luizbaldi]

@luckened For sure! Feel free to drop questions here if you need anything 🚀

[luckened]

@luizbaldi please take a look :mag:

[arturbien]

@luckened great work! We have to decide on some things tho and modify couple of things in the DatePicker that were not well planned from the beginning (which is my fault).

1. DatePicker should only consist of month input, year input and date selector. Wrapping it in a Window component with WindowHeader with hardcoded title is really limiting. That's why we should only care about making this part:

2. Currently we have hardcoded months and week days which will cause problems with internationalization. We should let developers pass their own labels for both months and weekday symbols.

3. date prop should accept any parsable date (like for example string in 'YYYY-MM-DD' format), not only Date object.

4. I have no idea how I missed it but... there's whole one row of days missing 😂 See the comparison between our component and the correctly working one (day 30 and 31 is missing):

This should be a minor change in code. I think we need to change 35 in this line: const dayPickerItems = Array.apply(null, { length: 35 }); to 42 since it's 6 rows * 7 days

5. Accessibility: aria-labels and proper keyboard controls for date selection

6. We need to have good tests in place before we release this component. I would suggest to simply copy test cases from some good datepicker library (https://github.com/Hacker0x01/react-datepicker/tree/master/test) so we don't miss anything

[luckened]

@arturbien thanks for the feedback! ❤️ I will work on it and keep you informed if I have any questions =)