feat(single datepicker): add single datepicker

affects: @datepicker-react/hooks, @datepicker-react/styled

Author: tresko

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,47 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**@datepicker-react/hooks or @datepicker-react/styled version**
+e.g. @datepicker-react/hooks@1.0.0
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Source code (including props configuration)**
+Steps to reproduce the behavior:
+```
+<DateRangeInput
+  onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
+  onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
+  startDate={state.startDate} // Date or null
+  endDate={state.endDate} // Date or null
+  focusedInput={state.focusedInput} // START_DATE, END_DATE or null
+/>
+```
+If you have custom methods that you are passing into a `@datepicker-react` component / hooks, please include the source for those as well.
+
+**Screenshots/Gifs**
+If applicable, add screenshots or gifs to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Is the issue reproducible in Storybook?**
+Please link to the relevant storybook example
+
+**Additional context**
+Add any other context about the problem here.

CODE_OF_CONDUCT.md

@@ -0,0 +1,68 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers
+pledge to making participation in our project and our community a harassment-free experience for
+everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity
+and expression, level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit
+  permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are
+expected to take appropriate and fair corrective action in response to any instances of unacceptable
+behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits,
+code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or
+to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is
+representing the project or its community. Examples of representing a project or community include
+using an official project e-mail address, posting via an official social media account, or acting as
+an appointed representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting
+the project team at [sedej.miha@gmail.com](mailto:sedej.miha@gmail.com). All complaints will be
+reviewed and investigated and will result in a response that is deemed necessary and appropriate to
+the circumstances. The project team is obligated to maintain confidentiality with regard to the
+reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face
+temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at
+https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1,44 @@
+# Contribution Guidelines
+
+Styled System has a [Code of Conduct][]. Please review and help enforce this code of conduct to help
+us foster an open and inclusive project.
+
+[code of conduct]: ./CODE_OF_CONDUCT.MD
+
+## How to Contribute
+
+Feel free to contribute by opening and commenting on issues, helping answer questions, updating
+docs, or opening a pull request. For quick bug fixes or PRs that address an open issue, feel free to
+open a PR. If you'd like to suggest a new feature or change to the API, please open an issue for
+discussion first.
+
+## Pull Requests
+
+To submit a pull request, follow these steps
+
+1. Fork and clone this repo
+2. Create a branch for your changes
+3. Install dependencies with `yarn install && bootstrap`
+4. Ensure tests are passing by running `yarn test`
+5. If you're fixing a bug, it's recommended to write a failing test before writing any code
+6. Make changes locally and commit them
+7. Try to make sure tests still pass and that there's 100% coverage
+8. Push your branch to origin
+9. Open a pull request in this repository with a clear title and description and link to any
+   relevant issues
+10. Wait for a maintainer to review your PR
+
+## Documentation
+
+The documentation is in [README](./README.MD).
+
+## Architecture
+
+@datepicker-react is intentionally divided into two libraries, `@datepicker-react/styled`
+(./packages/styled) and `@datepicker-react/hooks` (./packages/hooks). `@datepicker-react/hooks`
+library contains hooks, which allows us to control the date picker. The second library
+(`@datepicker-react/styled`) contains date picker components.
+
+### Monorepo
+
+This repo is set up as a monorepo using Yarn workspaces and Lerna.

README.md

@@ -1,10 +1,18 @@
-# @datepicker-react/styled
+<p align="center">
+  <img width="150" height="150" src="./docs/logo.jpg">
+</p>
 
-[![Gzip size](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg) [![Coverage Status](https://coveralls.io/repos/github/tresko/react-datepicker/badge.svg?branch=master)](https://coveralls.io/github/tresko/react-datepicker?branch=master) [![Build Status](https://travis-ci.org/tresko/react-datepicker.svg?branch=master)](https://travis-ci.org/tresko/react-datepicker) [![Netlify Status](https://api.netlify.com/api/v1/badges/0c2c3960-87ee-4f5e-a4dc-1e2aac57d2b4/deploy-status)](https://app.netlify.com/sites/react-datepicker/deploys)
+<br />
+
+[![Gzip size](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)](https://img.shields.io/bundlephobia/minzip/@datepicker-react/styled.svg)
+[![Coverage Status](https://coveralls.io/repos/github/tresko/react-datepicker/badge.svg?branch=master)](https://coveralls.io/github/tresko/react-datepicker?branch=master)
+[![Build Status](https://travis-ci.org/tresko/react-datepicker.svg?branch=master)](https://travis-ci.org/tresko/react-datepicker)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0c2c3960-87ee-4f5e-a4dc-1e2aac57d2b4/deploy-status)](https://app.netlify.com/sites/react-datepicker/deploys)
 
 [![NPM](https://nodei.co/npm/@datepicker-react/styled.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/@datepicker-react/styled?downloads=true&downloadRank=true&stars=true)
 
-> An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
+> An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build
+> with styled-components.
 
 ![example](./docs/datepicker.gif)
 
@@ -15,32 +23,36 @@ For examples of the datepicker in action, go to https://react-datepicker.netlify
 OR
 
 To run that demo on your own computer:
-* Clone this repository
-* `yarn install && bootstrap`
-* `yarn storybook`
-* Visit http://localhost:6006/
 
+- Clone this repository
+- `yarn install && bootstrap`
+- `yarn storybook`
+- Visit http://localhost:6006/
 
 ## Getting Started
+
 ### Install
 
-  ```sh
-  yarn add @datepicker-react/styled styled-components
-  ```
+```sh
+yarn add @datepicker-react/styled styled-components
+```
 
 ### Include component
+
 ```js
 import {DateRangeInput, Datepicker} from '@datepicker-react/styled'
 ```
 
 ### DateRangeInput
-The `DateRangeInput` is a fully controlled component that allows users to select a date range. You can control the selected
-dates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. The `DateRangeInput` also manages internal
-state for partial dates entered by typing (although `onDatesChange` will not trigger until a date has been entered
-completely in that case). Similarly, you can control which input is focused as well as calendar visibility (the calendar is
-only visible if `focusedInput` is defined) with the `focusedInput` and `onFocusChange` props as shown below.
 
-Here is the minimum *REQUIRED* setup you need to get the `DateRangeInput` working:
+The `DateRangeInput` is a fully controlled component that allows users to select a date range. You
+can control the selected dates using the `startDate`, `endDate`, and `onDatesChange` props as shown
+below. Similarly, you can control which input is focused as well as calendar visibility (the
+calendar is only visible if `focusedInput` is defined) with the `focusedInput` and `onFocusChange`
+props as shown below.
+
+Here is the minimum _REQUIRED_ setup you need to get the `DateRangeInput` working:
+
 ```jsx
 import React, {useReducer} from 'react'
 import {DateRangeInput} from '@datepicker-react/styled'
@@ -64,7 +76,7 @@ function reducer(state, action) {
 
 function App() {
   const [state, dispatch] = useReducer(reducer, initialState)
-  
+
   return (
     <DateRangeInput
       onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
@@ -77,7 +89,8 @@ function App() {
 }
 ```
 
-The following is a list of other *OPTIONAL* props you may provide to the `DateRangeInput` to customize appearance and behavior to your heart's desire.
+The following is a list of other _OPTIONAL_ props you may provide to the `DateRangeInput` to
+customize appearance and behavior to your heart's desire.
 
 ```ts
 displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
@@ -106,12 +119,12 @@ onDayRender?(date: Date): React.ReactNode
 ```
 
 ### Datepicker
-The `Datepicker` is a fully controlled component that allows users to select a date range. You can control the selected
-dates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. The `Datepicker` also manages internal
-state for partial dates entered by typing (although `onDatesChange` will not trigger until a date has been entered
-completely in that case). Similarly, you can control which input is focused with the `focusedInput` prop.
 
-Here is the minimum *REQUIRED* setup you need to get the `Datepicker` working:
+The `Datepicker` is a fully controlled component that allows users to select a date range. You can
+control the selected dates using the `startDate`, `endDate`, and `onDatesChange` props as shown
+below. Similarly, you can control which input is focused with the `focusedInput` prop.
+
+Here is the minimum _REQUIRED_ setup you need to get the `Datepicker` working:
 
 ```jsx
 import React, {useState} from 'react'
@@ -123,15 +136,15 @@ function App() {
     endDate: null,
     focusedInput: START_DATE,
   })
-  
+
   function handleDatesChange(data: OnDatesChangeProps) {
     if (!data.focusedInput) {
       setState({...data, focusedInput: START_DATE})
     } else {
       setState(data)
     }
   }
-  
+
   return (
     <Datepicker
       onDatesChange={handleDatesChange}
@@ -143,7 +156,8 @@ function App() {
 }
 ```
 
-The following is a list of other *OPTIONAL* props you may provide to the `Datepicker` to customize appearance and behavior to your heart's desire.
+The following is a list of other _OPTIONAL_ props you may provide to the `Datepicker` to customize
+appearance and behavior to your heart's desire.
 
 ```ts
 phrases?: DatepickerPhrases
@@ -168,9 +182,78 @@ monthLabelFormat?(date: Date): string
 onDayRender?(date: Date): React.ReactNode
 ```
 
+### DateSingleInput
+
+The `DateSingleInput` is a fully controlled component that allows users to select a date. You can
+control the selected date using the `date` and `onDateChange` props as shown below. Similarly, you
+can control calendar visibility (the calendar is only visible if `showDatepicker` is `true`) with
+the `showDatepicker` and `onFocusChange` props as shown below.
+
+Here is the minimum _REQUIRED_ setup you need to get the `DateSingleInput` working:
+
+```jsx
+import React, {useState} from 'react'
+import {DateSingleInput} from '@datepicker-react/styled'
+
+const initialState = {
+  date: null,
+  showDatepicker: false,
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'focusChange':
+      return {...state, showDatepicker: action.payload}
+    case 'dateChange':
+      return action.payload
+    default:
+      throw new Error()
+  }
+}
+
+function App() {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  return (
+    <DateSingleInput
+      onDateChange={data => dispatch({type: 'dateChange', payload: data})}
+      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
+      date={state.date} // Date or null
+      showDatepicker={state.showDatepicker} // Boolean
+    />
+  )
+}
+```
+
+The following is a list of other _OPTIONAL_ props you may provide to the `DateSingleInput` to customize
+appearance and behavior to your heart's desire.
+
+```ts
+minBookingDate?: Date
+maxBookingDate?: Date
+numberOfMonths?: number
+firstDayOfWeek?: FirstDayOfWeek
+displayFormat?: string | FormatFunction
+phrases?: DateSingleInputPhrases
+showCalendarIcon?: boolean
+vertical?: boolean
+showResetDate?: boolean
+showClose?: boolean
+rtl?: boolean
+placement?: 'top' | 'bottom'
+initialVisibleMonth?(numberOfMonths: number): MonthType[]
+isDateBlocked?(date: Date): boolean
+onClose?(): void
+dayLabelFormat?(date: Date): string
+weekdayLabelFormat?(date: Date): string
+monthLabelFormat?(date: Date): string
+onDayRender?(date: Date): React.ReactNode
+```
+
 ### Theming
 
-`@datepicker-react/styled` supports theming with Styled components `ThemeProvider` and `Styled System` theme-based style. 
+`@datepicker-react/styled` supports theming with Styled components `ThemeProvider` and
+`Styled System` theme-based style.
 
 ```jsx
 <ThemeProvider
@@ -190,7 +273,8 @@ onDayRender?(date: Date): React.ReactNode
 
 ## How to build your own datepicker?
 
-Simple. Use [React hooks (@datepicker-react/hooks)](https://github.com/tresko/react-datepicker/tree/master/packages/hooks).
+Simple. Use
+[React hooks (@datepicker-react/hooks)](https://github.com/tresko/react-datepicker/tree/master/packages/hooks).
 
 ## Who's using