Merge branch 'master' into add-startweekon-feature

Author: JefteCaro

.eslintignore

@@ -2,7 +2,7 @@
 dist/
 assets/
 pages/
-test-components/
+styles/
 
 # Files
 README.md

.gitignore

@@ -5,6 +5,7 @@
 /package-lock.json
 /yarn.lock
 /.next/
+/.rollup.cache/
 
 # test coverage
 coverage
@@ -14,6 +15,7 @@ build
 dist
 .rpt2_cache
 .eslintcache
+tsconfig.tsbuildinfo
 
 # misc
 .DS_Store

.npmignore

@@ -6,6 +6,7 @@ node_modules
 assets
 .git
 pages
+styles
 .next
 ## Files
 babel.config.json
@@ -20,7 +21,7 @@ next.config.js
 .prettierignore
 .DS_Store
 npm-debug.log
-package-lock.json
-yarn.lock
+yarn-error.log
 tailwind.config.js
 postcss.config.js
+tsconfig.tsbuildinfo

.prettierignore

@@ -2,6 +2,7 @@
 dist/
 assets/
 .next/
+.rollup.cache/
 
 # Files
 README.md

CONTRIBUTING.md

@@ -0,0 +1,76 @@
+# Contributing
+
+Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to review this document **before submitting a pull request**.
+
+- [Pull requests](#pull-requests)
+- [Installation](#installation)
+- [Coding standards](#coding-standards)
+- [Running playground](#running-playgrounds)
+- [Before you make a Pull Request](#before-you-make-a-pull-request)
+
+## Pull requests
+
+**Please ask first before starting work on any significant new features.**
+
+It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create [an issue](https://github.com/onesine/react-tailwindcss-datepicker/issues) to first discuss any significant new features.
+
+## Installation
+
+You only require a `yarn install` in the root directory to install everything you need.
+
+```sh
+yarn install
+```
+
+## Coding standards
+
+We use `prettier` for making sure that the codebase is formatted consistently.
+To automatically fix any style violations in your code, you can run:
+
+**Using yarn**
+
+```sh
+yarn pret:fix
+```
+
+**Using npm**
+
+```sh
+npm pret:fix
+```
+
+## Running playground
+
+We currently use `next.js` as server for live testing.
+
+You can run the `dev` script and open your browser to `http://localhost:8888`.
+
+See complete `props` usage in `pages/index.js` file.
+
+**Using yarn**
+
+```sh
+yarn dev
+```
+
+**Using npm**
+
+```sh
+npm dev
+```
+
+## Before you make a Pull Request
+
+We recommend to run these scripts in sequence before you make your commit message amd open a Pull Request
+
+**Let's clean the code first**
+```sh
+yarn pret:fix
+```
+
+**Test a build of your changes**
+```sh
+yarn build
+
+```
+

README.md

@@ -15,12 +15,13 @@
 </div>
 
 ## Contents
-* [Features](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#features)
-* [Documentation](https://react-tailwindcss-datepicker.vercel.app)
-* [Installation](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#installation)
-* [Simple Usage](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#simple-usage)
-* [Theming Options](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#theming-options)
-* [Playground](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/README.md#playground)
+* [Features](#features)
+* [Documentation](#documentation)
+* [Installation](#installation)
+* [Simple Usage](#simple-usage)
+* [Theming Options](#theming-options)
+* [Playground](#playground)
+* [Contributing](#contributing)
 
 ##  Features
 - ✅ Theming options
@@ -31,7 +32,8 @@
 - ✅ TypeScript support
 - ✅ Localization(i18n)
 - ✅ Date formatting
-- ⬜ Disable specific dates
+- ✅ Disable specific dates
+- ✅ Minimum Date and Maximum Date
 - ⬜ Custom shortcuts
 
 ## Documentation
@@ -143,7 +145,11 @@ yarn install && yarn dev
 Open a browser and navigate to `http://localhost:8888`
 
 ## Contributing
-Got ideas on how to make this better? Open an issue!
+
+See [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
+
+## Official Documentation repo
+[https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc)
 
 ## Thanks to
 - [Litepie Datepicker](https://litepie.com/)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-tailwindcss-datepicker",
-    "version": "1.3.3",
+    "version": "1.3.4",
     "description": "A modern React Datepicker using Tailwind CSS 3",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -16,6 +16,7 @@
         "pret:fix": "prettier -w .",
         "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
         "build": "npm run pret && npm run lint && npm run clean && rollup -c",
+        "pub": "npm run build && npm publish",
         "dev": "next dev -p 8888"
     },
     "repository": {

rollup.config.js

@@ -3,8 +3,9 @@ import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 
 const packageJson = require("./package.json");
+const options = require("./tsconfig.json");
 
-export default {
+module.exports = {
     input: "src/index.tsx",
     output: [
         {
@@ -21,5 +22,5 @@ export default {
         }
     ],
     external: ["react", "dayjs"],
-    plugins: [resolve(), commonjs(), typescript()]
+    plugins: [resolve(), commonjs(), typescript({ ...options.compilerOptions, jsx: "react" })]
 };

src/components/Calendar/Days.tsx

@@ -3,7 +3,13 @@ import React, { useCallback, useContext } from "react";
 
 import { BG_COLOR } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
-import { formatDate, getTextColorByPrimaryColor, nextMonth, previousMonth } from "../../helpers";
+import {
+    formatDate,
+    getTextColorByPrimaryColor,
+    nextMonth,
+    previousMonth,
+    classNames as cn
+} from "../../helpers";
 
 const isBetween = require("dayjs/plugin/isBetween");
 dayjs.extend(isBetween);
@@ -29,8 +35,16 @@ const Days: React.FC<Props> = ({
     onClickNextDays
 }) => {
     // Contexts
-    const { primaryColor, period, changePeriod, dayHover, changeDayHover } =
-        useContext(DatepickerContext);
+    const {
+        primaryColor,
+        period,
+        changePeriod,
+        dayHover,
+        changeDayHover,
+        minDate,
+        maxDate,
+        disabledDates
+    } = useContext(DatepickerContext);
 
     // Functions
     const currentDateClass = useCallback(
@@ -139,16 +153,97 @@ const Days: React.FC<Props> = ({
         [calendarData.date, currentDateClass, dayHover, period.end, period.start, primaryColor]
     );
 
-    const buttonCass = useCallback(
-        (day: number) => {
-            const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
-            return `${baseClass}${
-                !activeDateData(day).active
-                    ? ` ${hoverClassByDay(day)}`
-                    : activeDateData(day).className
+    const isDateTooEarly = useCallback(
+        (day: number, type: string) => {
+            if (!minDate) {
+                return false;
+            }
+            const object = {
+                previous: previousMonth(calendarData.date),
+                current: calendarData.date,
+                next: nextMonth(calendarData.date)
+            };
+            const newDate = object[type as keyof typeof object];
+            const formattedDate = `${newDate.year()}-${newDate.month() + 1}-${
+                day >= 10 ? day : "0" + day
+            }`;
+            return dayjs(formattedDate).isSame(dayjs(minDate))
+                ? false
+                : dayjs(formattedDate).isBefore(dayjs(minDate));
+        },
+        [calendarData.date, minDate]
+    );
+
+    const isDateTooLate = useCallback(
+        (day: number, type: string) => {
+            if (!maxDate) {
+                return false;
+            }
+            const object = {
+                previous: previousMonth(calendarData.date),
+                current: calendarData.date,
+                next: nextMonth(calendarData.date)
+            };
+            const newDate = object[type as keyof typeof object];
+            const formattedDate = `${newDate.year()}-${newDate.month() + 1}-${
+                day >= 10 ? day : "0" + day
             }`;
+            return dayjs(formattedDate).isSame(maxDate)
+                ? false
+                : dayjs(formattedDate).isAfter(dayjs(maxDate));
+        },
+        [calendarData.date, maxDate]
+    );
+
+    const isDateDisabled = useCallback(
+        (day: number, type: string) => {
+            if (isDateTooEarly(day, type) || isDateTooLate(day, type)) {
+                return true;
+            }
+            const object = {
+                previous: previousMonth(calendarData.date),
+                current: calendarData.date,
+                next: nextMonth(calendarData.date)
+            };
+            const newDate = object[type as keyof typeof object];
+            const formattedDate = `${newDate.year()}-${newDate.month() + 1}-${
+                day >= 10 ? day : "0" + day
+            }`;
+
+            if (!disabledDates || disabledDates?.length <= 0) {
+                return false;
+            }
+
+            let matchingCount = 0;
+            disabledDates?.forEach(dateRange => {
+                if (
+                    dayjs(formattedDate).isAfter(dateRange.startDate) &&
+                    dayjs(formattedDate).isBefore(dateRange.endDate)
+                ) {
+                    matchingCount++;
+                }
+                if (
+                    dayjs(formattedDate).isSame(dateRange.startDate) ||
+                    dayjs(formattedDate).isSame(dateRange.endDate)
+                ) {
+                    matchingCount++;
+                }
+            });
+            return matchingCount > 0;
+        },
+        [calendarData.date, isDateTooEarly, isDateTooLate, disabledDates]
+    );
+
+    const buttonClass = useCallback(
+        (day: number, type: string) => {
+            const baseClass = "flex items-center justify-center w-12 h-12 lg:w-10 lg:h-10";
+            return cn(
+                baseClass,
+                !activeDateData(day).active ? hoverClassByDay(day) : activeDateData(day).className,
+                isDateDisabled(day, type) && "line-through"
+            );
         },
-        [activeDateData, hoverClassByDay]
+        [activeDateData, hoverClassByDay, isDateDisabled]
     );
 
     const hoverDay = useCallback(
@@ -192,6 +287,7 @@ const Days: React.FC<Props> = ({
                 <button
                     type="button"
                     key={index}
+                    disabled={isDateDisabled(item, "previous")}
                     className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
                     onClick={() => onClickPreviousDays(item)}
                     onMouseOver={() => {
@@ -206,7 +302,8 @@ const Days: React.FC<Props> = ({
                 <button
                     type="button"
                     key={index}
-                    className={buttonCass(item)}
+                    disabled={isDateDisabled(item, "current")}
+                    className={`${buttonClass(item, "current")}`}
                     onClick={() => {
                         onClickDay(item);
                     }}
@@ -222,6 +319,7 @@ const Days: React.FC<Props> = ({
                 <button
                     type="button"
                     key={index}
+                    disabled={isDateDisabled(index, "previous")}
                     className="flex items-center justify-center text-gray-400 h-12 w-12 lg:w-10 lg:h-10"
                     onClick={() => {
                         onClickNextDays(item);