Merge pull request #2 from simpletut/v1.0.3

Clean up

Author: simpletut

README.md

@@ -1,7 +1,6 @@
 # reactjs-availability-calendar
 
 [![NPM version][npm-image]][npm-url]
-[![Build][github-build]][github-build-url]
 ![npm-typescript]
 [![License][github-license]][github-license-url]
 
@@ -28,7 +27,7 @@ Add `Calendar` to your component:
 ```js
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Calendar } from 'reactjs-availability-calendar'
+import Calendar from 'reactjs-availability-calendar'
 
 const bookings = [
   {
@@ -54,23 +53,62 @@ root.render(
 
 ```
 
-Include default stylesheet in your html
+## Default CSS
 
-Note: Please host the CSS in this file yourself
+Please copy and self host the default CSS linked below.
 
-<a href="https://github.com/simpletut/reactjs-availability-calendar/blob/main/styles/main.min.css">Link to CSS</a>
+<a href="https://github.com/simpletut/reactjs-availability-calendar/blob/main/styles/main.min.css">Default CSS</a>
 <br />
-<a href="https://github.com/simpletut/reactjs-availability-calendar/blob/main/styles/main.min.css">Link to Minified CSS</a>
+<a href="https://github.com/simpletut/reactjs-availability-calendar/blob/main/styles/main.css">Minified Default CSS</a>
 
 ```
-<link rel="stylesheet" href="path/to/hosted/styles.css">
+<link href="path/to/your/styles.css" rel="stylesheet">
 
 ```
 
+## Settings / Configurations:
+
+### bookings
+
+**Example:**
+```
+{
+  from: '01-08-2022',
+  to: '01-16-2022',
+  middayCheckout: true,
+}
+```
+**Type:** Array of Bookings\
+**Default:** []\
+**Description:** Dates should be in US format (MM-DD-YYYY).
+
+
+### showNumberOfMonths
+
+**Type:** Number\
+**Default:** 12\
+**Description:** Number of Months to show
+
+### showCurrentYear
+
+**Type:** Bool\
+**Default:** true\
+**Description:** Render active Calendar Year
+
+### showControls
+
+**Type:** Bool\
+**Default:** true\
+**Description:** Render navigation buttons to move forward and previous Calendar Years
+
+### showKey
+
+**Type:** Bool\
+**Default:** true\
+**Description:** Render Key for the different Calendar States
+
 [npm-url]: https://www.npmjs.com/package/reactjs-availability-calendar
 [npm-image]: https://img.shields.io/npm/v/reactjs-availability-calendar
-[github-license]: https://img.shields.io/github/license/simpletut/reactjs-availability-calendar/blob/main/LICENSE
+[github-license]: https://img.shields.io/github/license/simpletut/reactjs-availability-calendar
 [github-license-url]: https://github.com/simpletut/reactjs-availability-calendar/blob/main/LICENSE
-[github-build]: https://github.com/main/reactjs-availability-calendar/actions/workflows/publish.yml/badge.svg
-[github-build-url]: https://github.com/simpletut/reactjs-availability-calendar/actions/workflows/publish.yml
-[npm-typescript]: https://img.shields.io/npm/types/reactjs-availability-calendar
+[npm-typescript]: https://img.shields.io/npm/types/reactjs-availability-calendar

example/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Calendar } from 'reactjs-availability-calendar'
+import Calendar from 'reactjs-availability-calendar'
 
 const bookings = [
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactjs-availability-calendar",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React Availability Calendar",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

src/components/Calendar/Year/index.tsx

@@ -6,10 +6,15 @@ import { daysOfTheWeek, daysOfTheWeekOffset } from './../Utils'
 
 dayjs.extend(isBetween)
 
-const Year: FC<IYear> = ({ calMonths, bookedDates, lateCheckouts, currentYear = dayjs().year() }): JSX.Element => {
+const Year: FC<IYear> = ({
+  showNumberOfMonths,
+  bookedDates,
+  lateCheckouts,
+  currentYear = dayjs().year(),
+}): JSX.Element => {
   return (
     <div className='year' data-testid='year'>
-      {new Array(calMonths).fill('').map((_, pos) => {
+      {new Array(showNumberOfMonths).fill('').map((_, pos) => {
         const arrOffset = 1
         const month = pos + arrOffset
         const date = `${currentYear}-${month}`
@@ -68,7 +73,7 @@ const Year: FC<IYear> = ({ calMonths, bookedDates, lateCheckouts, currentYear =
 }
 
 Year.defaultProps = {
-  calMonths: 12,
+  showNumberOfMonths: 12,
   bookedDates: [],
   lateCheckouts: [],
 }

src/components/Calendar/index.tsx

@@ -11,7 +11,7 @@ dayjs.extend(isBetween)
 
 const Calendar: FC<ICalendarPropTypes> = ({
   bookings,
-  calMonths,
+  showNumberOfMonths,
   showKey,
   showCurrentYear,
   showControls,
@@ -50,7 +50,7 @@ const Calendar: FC<ICalendarPropTypes> = ({
   }, [bookings, currentYear])
 
   const configYear: IYear = {
-    calMonths,
+    showNumberOfMonths,
     bookedDates,
     lateCheckouts,
     currentYear,
@@ -87,7 +87,7 @@ const Calendar: FC<ICalendarPropTypes> = ({
 
 Calendar.defaultProps = {
   bookings: [],
-  calMonths: 12,
+  showNumberOfMonths: 12,
   showKey: true,
   showCurrentYear: true,
   showControls: true,

src/components/Calendar/types.ts

@@ -10,7 +10,7 @@ export type ShowMonths = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 export interface ICalendarPropTypes {
   bookings?: BookingType[]
-  calMonths?: ShowMonths
+  showNumberOfMonths?: ShowMonths
   showKey?: boolean
   showCurrentYear?: boolean
   showControls?: boolean
@@ -70,7 +70,7 @@ export enum DayOffset {
 export type DaysOfWeekOffsetType = DayOffset[]
 
 export interface IYear {
-  calMonths?: ShowMonths
+  showNumberOfMonths?: ShowMonths
   bookedDates: blockedDaysType
   lateCheckouts: blockedDaysType
   currentYear: number

src/index.ts

@@ -1,3 +1,3 @@
 import Calendar from './components/Calendar'
 
-export { Calendar }
+export default Calendar

tests/common.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 
 import 'jest-canvas-mock'
 
-import { Calendar } from '../src'
+import Calendar from '../src'
 
 const bookings = [
   {
@@ -93,7 +93,7 @@ describe('Calendar', () => {
   })
 
   it('Should Render 6 Months', () => {
-    const { getAllByTestId } = render(<Calendar calMonths={6} bookings={bookings} />)
+    const { getAllByTestId } = render(<Calendar showNumberOfMonths={6} bookings={bookings} />)
     const months = getAllByTestId('month')
 
     expect(months).toHaveLength(6)