From b19f8320f2faea11a85adb7313a220fec2ac07d8 Mon Sep 17 00:00:00 2001 From: sri Date: Thu, 25 Apr 2024 15:12:37 +0200 Subject: [PATCH 01/38] docs(author): update repo ownership --- CONTRIBUTING.md | 2 +- README.md | 18 +++++++----------- package.json | 16 ++++++++++------ pages/index.js | 2 +- tsconfig.json | 3 ++- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 879010fa..66cd2969 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -15,7 +15,7 @@ review this document **before submitting a pull request**. 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 +[an issue](https://github.com/sciendis/react-tailwindcss-datepicker/issues) to first discuss any significant new features. ## Installation diff --git a/README.md b/README.md index 325ebfdb..2b48bc17 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,10 @@ React Tailwindcss Datepicker

- A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs. + A modern date range picker component for React using Tailwind 3 and dayjs.
+ Forked from React Tailwindcss Datepicker.

-
- -[![npm version](https://img.shields.io/npm/v/react-tailwindcss-datepicker?style=flat-square)](https://www.npmjs.com/package/react-tailwindcss-datepicker) -[![npm downloads](https://img.shields.io/npm/dt/react-tailwindcss-datepicker?style=flat-square)](https://www.npmjs.com/package/react-tailwindcss-datepicker) - -
- ## Contents - [Features](#features) @@ -51,7 +45,7 @@ Go to [full documentation](https://react-tailwindcss-datepicker.vercel.app/) ### Install via npm ``` -$ npm install react-tailwindcss-datepicker +$ npm install @sciendis/react-tailwindcss-datepicker ``` ### Install via yarn @@ -153,14 +147,16 @@ Open a browser and navigate to `http://localhost:8888` ## Contributing See -[CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md) +[CONTRIBUTING.md](https://github.com/sciendis/react-tailwind-datepicker/blob/master/CONTRIBUTING.md) ## Official Documentation repo +Onesine's original documentation is still valid for this fork: [https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc) ## Thanks to +- [React Tailwindcss Datepicker ](https://github.com/onesine/react-tailwindcss-datepicker). - [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/) - [React](https://reactjs.org/) - [Tailwind CSS](https://tailwindcss.com/) @@ -170,4 +166,4 @@ I thank you in advance for your contribution to this project. ## License -[MIT](LICENSE) Licensed. Copyright (c) Lewhe Onesine 2022. +[MIT](LICENSE) Licensed. diff --git a/package.json b/package.json index ac9c06cf..d3d19f7d 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-tailwindcss-datepicker", - "version": "1.6.6", - "description": "A modern React Datepicker using Tailwind CSS 3", + "name": "@sciendis/react-tailwindcss-datepicker", + "version": "1.6.8", + "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", - "author": "onesine", + "author": "sciendis", "license": "MIT", "scripts": { "watch": "rollup -c -w", @@ -23,7 +23,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/onesine/react-tailwindcss-datepicker" + "url": "git+https://github.com/sciendis/react-tailwindcss-datepicker.git" }, "keywords": [ "react-tailwindcss-datepicker", @@ -78,5 +78,9 @@ "*.{ts,tsx,css,scss,md}": [ "npm run pret:fix" ] - } + }, + "bugs": { + "url": "https://github.com/sciendis/react-tailwindcss-datepicker/issues" + }, + "homepage": "https://github.com/sciendis/react-tailwindcss-datepicker#readme" } diff --git a/pages/index.js b/pages/index.js index 5ce6034e..492aa50c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -482,7 +482,7 @@ export default function Playground() {
Date: Thu, 25 Apr 2024 15:14:47 +0200 Subject: [PATCH 02/38] fix(Datepicker): incr z-index fix display of datepicker popup by setting highest z-index; namely fixing conflict with headless ui tabs and dialog components --- src/components/Datepicker.tsx | 3 ++- src/components/utils.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 54e90b78..e82cabd3 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -333,7 +333,8 @@ const Datepicker: React.FC = ({
diff --git a/src/components/utils.tsx b/src/components/utils.tsx index 6bdb31a7..d20227c4 100644 --- a/src/components/utils.tsx +++ b/src/components/utils.tsx @@ -123,7 +123,8 @@ export const Arrow = React.forwardRef((props, ref) => { return (
); }); From b55d862db4d2f33cb597a1b5b04bf15fa61c49f2 Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 3 Sep 2024 14:39:12 +0200 Subject: [PATCH 03/38] feat(Input): add function to selected and add separator --- src/components/Input.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 38fc856e..55532e52 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -64,6 +64,27 @@ const Input: React.FC = (e: Props) => { : defaultInputClassName; }, [inputRef, classNames, primaryColor, inputClassName]); + /** + * automatically adds correct separator character to date input + */ + const addSeparatorToDate = useCallback((inputValue: string, format: string) => { + // fallback separator; repleace by locale separator + let separator = "/"; + const localeSeparator = format.match(/\W/g); + if (localeSeparator?.length) { + separator = localeSeparator[0]; + } + + let formattedInput = inputValue; + // adding separator after day and month + // currently only supports DMY/MDY and not YMD/YDM + if (inputValue.length === 2 || inputValue.length === 5) { + formattedInput = inputValue + separator[0]; + } + + return formattedInput; + }, []); + const handleInputChange = useCallback( (e: React.ChangeEvent) => { const inputValue = e.target.value; @@ -112,7 +133,7 @@ const Input: React.FC = (e: Props) => { else changeDayHover(dates[0]); } - changeInputText(e.target.value); + changeInputText(addSeparatorToDate(inputValue, displayFormat)); }, [asSingle, displayFormat, separator, changeDatepickerValue, changeDayHover, changeInputText] ); From 8a6389333162a2862163f1353fde2d923fd63d4b Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 3 Sep 2024 14:40:09 +0200 Subject: [PATCH 04/38] feat(Input): clear invalid input --- src/components/Input.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 55532e52..de04499b 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -85,9 +85,23 @@ const Input: React.FC = (e: Props) => { return formattedInput; }, []); + /** + * detect and delete non-numeric user input + */ + const clearInvalidInput = useCallback( + (value: string) => { + if (value && value[value.length - 1].match(/\D/g)) { + return value.slice(0, value.length - 1); + } + return value; + }, + + [] + ); + const handleInputChange = useCallback( (e: React.ChangeEvent) => { - const inputValue = e.target.value; + const inputValue = clearInvalidInput(e.target.value); const dates = []; From a73cab0e291321cfcfd3665e7c7018c1917a2b9e Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 3 Sep 2024 16:50:35 +0200 Subject: [PATCH 05/38] feat(Input): detect different date formats identifies separator(s) and adds it at right indices; works with various date formats e.g. YMD and DMY --- src/components/Input.tsx | 54 +++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index de04499b..4db1570b 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,4 +1,6 @@ import dayjs from "dayjs"; +import localizedFormat from "dayjs/plugin/localizedFormat"; +require("dayjs/locale/de"); import React, { useCallback, useContext, useEffect, useRef } from "react"; import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants"; @@ -7,6 +9,8 @@ import { dateIsValid, parseFormattedDate } from "../helpers"; import ToggleButton from "./ToggleButton"; +dayjs.extend(localizedFormat); + type Props = { setContextRef?: (ref: React.RefObject) => void; }; @@ -67,20 +71,37 @@ const Input: React.FC = (e: Props) => { /** * automatically adds correct separator character to date input */ - const addSeparatorToDate = useCallback((inputValue: string, format: string) => { - // fallback separator; repleace by locale separator - let separator = "/"; - const localeSeparator = format.match(/\W/g); - if (localeSeparator?.length) { - separator = localeSeparator[0]; + const addSeparatorToDate = useCallback((inputValue: string, displayFormat: string) => { + // fallback separator; replaced by user defined separator; + const separators = ["/", "/"]; + const separatorIndices: number[] = []; + let formattedInput = inputValue; + + // note that we are not using locale to avoid redundancy; + // instead preferred locale is determined by displayFormat + const localeSeparators = displayFormat.match(/\W/g); + if (localeSeparators?.length) { + // replace fallbacks with localized separators + separators.splice(0, separators.length, ...localeSeparators); } - let formattedInput = inputValue; + // find indices of separators + // required to distinguish between i.a. YDM and DMY + let start = 0; + separators.forEach(localeSeparator => { + const idx = displayFormat.indexOf(localeSeparator, start); + if (idx !== -1) { + start = idx + 1; + separatorIndices.push(idx); + } + }); + // adding separator after day and month - // currently only supports DMY/MDY and not YMD/YDM - if (inputValue.length === 2 || inputValue.length === 5) { - formattedInput = inputValue + separator[0]; - } + separatorIndices.forEach((separatorIndex, idx) => { + if (inputValue.length === separatorIndex) { + formattedInput = inputValue + separators[idx]; + } + }); return formattedInput; }, []); @@ -149,7 +170,16 @@ const Input: React.FC = (e: Props) => { changeInputText(addSeparatorToDate(inputValue, displayFormat)); }, - [asSingle, displayFormat, separator, changeDatepickerValue, changeDayHover, changeInputText] + [ + addSeparatorToDate, + asSingle, + changeDatepickerValue, + changeDayHover, + changeInputText, + clearInvalidInput, + displayFormat, + separator + ] ); const handleInputKeyDown = useCallback( From 865cf54840d2c867f448968d85f0b908f8f5e785 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 14:01:48 +0200 Subject: [PATCH 06/38] feat(Input): enable auto formatting for range dates --- src/components/Input.tsx | 86 ++++++++++++++++++++++++---------------- 1 file changed, 52 insertions(+), 34 deletions(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 4db1570b..59a033e2 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,6 +1,4 @@ import dayjs from "dayjs"; -import localizedFormat from "dayjs/plugin/localizedFormat"; -require("dayjs/locale/de"); import React, { useCallback, useContext, useEffect, useRef } from "react"; import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants"; @@ -9,8 +7,6 @@ import { dateIsValid, parseFormattedDate } from "../helpers"; import ToggleButton from "./ToggleButton"; -dayjs.extend(localizedFormat); - type Props = { setContextRef?: (ref: React.RefObject) => void; }; @@ -71,40 +67,62 @@ const Input: React.FC = (e: Props) => { /** * automatically adds correct separator character to date input */ - const addSeparatorToDate = useCallback((inputValue: string, displayFormat: string) => { - // fallback separator; replaced by user defined separator; - const separators = ["/", "/"]; - const separatorIndices: number[] = []; - let formattedInput = inputValue; - - // note that we are not using locale to avoid redundancy; - // instead preferred locale is determined by displayFormat - const localeSeparators = displayFormat.match(/\W/g); - if (localeSeparators?.length) { - // replace fallbacks with localized separators - separators.splice(0, separators.length, ...localeSeparators); - } - - // find indices of separators - // required to distinguish between i.a. YDM and DMY - let start = 0; - separators.forEach(localeSeparator => { - const idx = displayFormat.indexOf(localeSeparator, start); - if (idx !== -1) { - start = idx + 1; - separatorIndices.push(idx); + const addSeparatorToDate = useCallback( + (inputValue: string, displayFormat: string) => { + // fallback separator; replaced by user defined separator; + const separators = ["-", "-"]; + const separatorIndices: number[] = []; + let formattedInput = inputValue; + + // note that we are not using locale to avoid redundancy; + // instead preferred locale is determined by displayFormat + const localeSeparators = displayFormat.match(/\W/g); + if (localeSeparators?.length) { + // replace fallbacks with localized separators + separators.splice(0, separators.length, ...localeSeparators); } - }); - // adding separator after day and month - separatorIndices.forEach((separatorIndex, idx) => { - if (inputValue.length === separatorIndex) { - formattedInput = inputValue + separators[idx]; + // find indices of separators + // required to distinguish between i.a. YDM and DMY + let start = 0; + separators.forEach(localeSeparator => { + const idx = displayFormat.indexOf(localeSeparator, start); + if (idx !== -1) { + start = idx + 1; + separatorIndices.push(idx); + } + }); + + // adding separator after day and month + separatorIndices.forEach((separatorIndex, idx) => { + if (inputValue.length === separatorIndex) { + formattedInput = inputValue + separators[idx]; + } + }); + + // add middle separator for range dates and format end date + if (!asSingle && inputValue.length >= displayFormat.length) { + // get startDate and add separator + let rangeDate = inputValue.substring(0, displayFormat.length); + rangeDate = rangeDate + " " + separator + " "; + + // cut off everything startdate and separator including blank spaces + let endDate = inputValue.substring(displayFormat.length + 2 + separator.length); + if (endDate.length) { + separatorIndices.forEach((separatorIndex, idx) => { + if (endDate.length === separatorIndex) { + endDate = endDate + separators[idx]; + } + }); + rangeDate = rangeDate + endDate; + } + return rangeDate; } - }); - return formattedInput; - }, []); + return formattedInput; + }, + [asSingle, separator] + ); /** * detect and delete non-numeric user input From dd80b8c8a8dbc5968dafb66267c0c23571a0d337 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 14:42:38 +0200 Subject: [PATCH 07/38] fix(Input): fix deletion of input add separator function interfered with deletion and re-inserted deleted separators; currently only deletes single char, even if multiple are selected --- src/components/Input.tsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 59a033e2..c1dc1715 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react"; import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants"; import DatepickerContext from "../contexts/DatepickerContext"; -import { dateIsValid, parseFormattedDate } from "../helpers"; +import { dateIsValid, parseFormattedDate, shortString } from "../helpers"; import ToggleButton from "./ToggleButton"; @@ -202,6 +202,25 @@ const Input: React.FC = (e: Props) => { const handleInputKeyDown = useCallback( (e: React.KeyboardEvent) => { + if (e.key === "Backspace") { + // stop propagation + e.preventDefault(); + + // force deletion of separators + const input = inputRef.current; + // necessary because the addSeparator function will overwrite regular deletion + if (input) { + let lastChar = input.value[input.value.length - 1]; + // cut off all non-numeric values + while (lastChar?.match(/\D/)) { + const shortenedString = shortString(input.value, input.value.length - 1); + input.value = shortenedString; + lastChar = shortenedString[shortenedString.length - 1]; + } + // cut off last numeric value + input.value = shortString(input.value, input.value.length - 1); + } + } if (e.key === "Enter") { const input = inputRef.current; if (input) { From 3960f46890f514fd076778c59b151474953dd7d8 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 14:53:09 +0200 Subject: [PATCH 08/38] refactor(Input): removing ternaries, adding named helper funcs --- src/components/Input.tsx | 49 ++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index c1dc1715..7adc8a8d 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -43,6 +43,22 @@ const Input: React.FC = (e: Props) => { const buttonRef = useRef(null); const inputRef = useRef(null); + const checkClassName = useCallback( + ( + defaultToggleClassName: string, + toggleClassName?: string | ((className: string) => string) | null + ) => { + if (typeof toggleClassName === "function") { + return toggleClassName(defaultToggleClassName); + } + if (typeof toggleClassName === "string" && toggleClassName !== "") { + return toggleClassName; + } + return defaultToggleClassName; + }, + [] + ); + // Functions const getClassName = useCallback(() => { const input = inputRef.current; @@ -51,18 +67,13 @@ const Input: React.FC = (e: Props) => { return classNames.input(input); } - const border = BORDER_COLOR.focus[primaryColor as keyof typeof BORDER_COLOR.focus]; - const ring = - RING_COLOR["second-focus"][primaryColor as keyof (typeof RING_COLOR)["second-focus"]]; + const border = BORDER_COLOR.focus[primaryColor]; + const ring = RING_COLOR["second-focus"][primaryColor]; const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`; - return typeof inputClassName === "function" - ? inputClassName(defaultInputClassName) - : typeof inputClassName === "string" && inputClassName !== "" - ? inputClassName - : defaultInputClassName; - }, [inputRef, classNames, primaryColor, inputClassName]); + return checkClassName(defaultInputClassName, inputClassName); + }, [checkClassName, classNames, inputClassName, primaryColor]); /** * automatically adds correct separator character to date input @@ -129,7 +140,7 @@ const Input: React.FC = (e: Props) => { */ const clearInvalidInput = useCallback( (value: string) => { - if (value && value[value.length - 1].match(/\D/g)) { + if (value[value?.length - 1].match(/\D/g)) { return value.slice(0, value.length - 1); } return value; @@ -257,12 +268,8 @@ const Input: React.FC = (e: Props) => { const defaultToggleClassName = "absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"; - return typeof toggleClassName === "function" - ? toggleClassName(defaultToggleClassName) - : typeof toggleClassName === "string" && toggleClassName !== "" - ? toggleClassName - : defaultToggleClassName; - }, [toggleClassName, buttonRef, classNames]); + return checkClassName(defaultToggleClassName, toggleClassName); + }, [toggleClassName, checkClassName, classNames]); // UseEffects && UseLayoutEffect useEffect(() => { @@ -324,7 +331,7 @@ const Input: React.FC = (e: Props) => { const arrow = arrowContainer?.current; function showCalendarContainer() { - if (arrow && div && div.classList.contains("hidden")) { + if (arrow && div?.classList.contains("hidden")) { div.classList.remove("hidden"); div.classList.add("block"); @@ -376,15 +383,13 @@ const Input: React.FC = (e: Props) => { disabled={disabled} readOnly={readOnly} placeholder={ - placeholder - ? placeholder - : `${displayFormat}${asSingle ? "" : ` ${separator} ${displayFormat}`}` + placeholder || + `${displayFormat}${asSingle ? "" : ` ${separator} ${displayFormat}`}` } value={inputText} id={inputId} name={inputName} autoComplete="off" - role="presentation" onChange={handleInputChange} onKeyDown={handleInputKeyDown} /> @@ -395,7 +400,7 @@ const Input: React.FC = (e: Props) => { disabled={disabled} className={getToggleClassName()} > - {renderToggleIcon(inputText == null || !inputText?.length)} + {renderToggleIcon(!inputText.length)} ); From b50736699939313183946a8a5aac91c58baf7084 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 15:26:53 +0200 Subject: [PATCH 09/38] test(clearInvalidInput): install jest, add config, extract clearInvalidInput and move to helper folder, add test for helper function --- jest.config.js | 8 ++++ package.json | 4 ++ src/__tests__/clearInvalidInput.test.ts | 53 +++++++++++++++++++++++++ src/components/Input.tsx | 17 +------- 4 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 jest.config.js create mode 100644 src/__tests__/clearInvalidInput.test.ts diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..f56dfa44 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,8 @@ +/** @type {import('ts-jest').JestConfigWithTsJest} **/ + +module.exports = { + testEnvironment: "node", + transform: { + "^.+.tsx?$": ["ts-jest", {}] + } +}; diff --git a/package.json b/package.json index d3d19f7d..da98815b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "build": "npm run code-style && npm run clean && rollup -c", "pub": "npm run build && npm publish", "dev": "next dev -p 8888", + "test": "jest", "prepare": "husky install" }, "repository": { @@ -42,6 +43,7 @@ "react": "^17.0.2 || ^18.2.0" }, "devDependencies": { + "@jest/globals": "^29.7.0", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-typescript": "^11.0.0", @@ -60,6 +62,7 @@ "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "husky": "^8.0.0", + "jest": "^29.7.0", "lint-staged": "^13.2.3", "next": "^13.1.1", "postcss": "^8.4.19", @@ -68,6 +71,7 @@ "react-dom": "^18.2.0", "rollup": "^2.77.2", "tailwindcss": "^3.2.4", + "ts-jest": "^29.2.5", "tslib": "^2.4.0", "typescript": "^4.8.4" }, diff --git a/src/__tests__/clearInvalidInput.test.ts b/src/__tests__/clearInvalidInput.test.ts new file mode 100644 index 00000000..b862f5ca --- /dev/null +++ b/src/__tests__/clearInvalidInput.test.ts @@ -0,0 +1,53 @@ +import { describe, expect, test } from "@jest/globals"; + +import { clearInvalidInput } from "../helpers"; + +describe("clearInvalidInput", () => { + test("should return the same string if the last character is numeric", () => { + const input = "1234"; + const result = clearInvalidInput(input); + expect(result).toBe("1234"); + }); + + test("should remove the last character if it is non-numeric", () => { + const input = "1234a"; + const result = clearInvalidInput(input); + expect(result).toBe("1234"); + }); + + test("should return an empty string if the input is a single non-numeric character", () => { + const input = "a"; + const result = clearInvalidInput(input); + expect(result).toBe(""); + }); + + test("should return an empty string if the input is empty", () => { + const input = ""; + const result = clearInvalidInput(input); + expect(result).toBe(""); + }); + + test("should handle multiple non-numeric characters at the end by removing only the last one", () => { + const input = "1234abc"; + const result = clearInvalidInput(input); + expect(result).toBe("1234ab"); + }); + + test("should return the same string if all characters are numeric", () => { + const input = "9876543210"; + const result = clearInvalidInput(input); + expect(result).toBe("9876543210"); + }); + + test("should correctly handle a string with special characters at the end", () => { + const input = "1234#"; + const result = clearInvalidInput(input); + expect(result).toBe("1234"); + }); + + test("should correctly handle a string with spaces at the end", () => { + const input = "1234 "; + const result = clearInvalidInput(input); + expect(result).toBe("1234"); + }); +}); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index c1dc1715..07813515 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react"; import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants"; import DatepickerContext from "../contexts/DatepickerContext"; -import { dateIsValid, parseFormattedDate, shortString } from "../helpers"; +import { clearInvalidInput, dateIsValid, parseFormattedDate, shortString } from "../helpers"; import ToggleButton from "./ToggleButton"; @@ -124,20 +124,6 @@ const Input: React.FC = (e: Props) => { [asSingle, separator] ); - /** - * detect and delete non-numeric user input - */ - const clearInvalidInput = useCallback( - (value: string) => { - if (value && value[value.length - 1].match(/\D/g)) { - return value.slice(0, value.length - 1); - } - return value; - }, - - [] - ); - const handleInputChange = useCallback( (e: React.ChangeEvent) => { const inputValue = clearInvalidInput(e.target.value); @@ -194,7 +180,6 @@ const Input: React.FC = (e: Props) => { changeDatepickerValue, changeDayHover, changeInputText, - clearInvalidInput, displayFormat, separator ] From 36888a7bdbe5af63d874a0ad65dc4927fc04d64b Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 15:27:25 +0200 Subject: [PATCH 10/38] refactor(helpers): move clearInvalidInput to helpers --- src/helpers/index.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/helpers/index.ts b/src/helpers/index.ts index d59d919a..a0479dda 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -11,6 +11,17 @@ export function classNames(...classes: (false | null | undefined | string)[]) { return classes.filter(Boolean).join(" "); } +/** + * detect and delete non-numeric user input + * @returns shortened string + */ +export const clearInvalidInput = (value: string): string => { + if (value && value[value.length - 1].match(/\D/g)) { + return shortString(value, value.length - 1); + } + return value; +}; + export function getTextColorByPrimaryColor(color: string) { switch (color) { case "blue": From 7d9e098bcf04ace015ca6721ed054142dd120b1a Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 15:30:59 +0200 Subject: [PATCH 11/38] refactor(index.js): remove console log --- pages/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/pages/index.js b/pages/index.js index 492aa50c..90299a33 100644 --- a/pages/index.js +++ b/pages/index.js @@ -32,10 +32,8 @@ export default function Playground() { const [startFrom, setStartFrom] = useState("2023-03-01"); const [startWeekOn, setStartWeekOn] = useState(""); - const handleChange = (value, e) => { + const handleChange = value => { setValue(value); - console.log(e); - console.log("value", value); }; return (
From 8a7473725a6369833ade9e0d9f5680464f7c7a71 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 16:17:05 +0200 Subject: [PATCH 12/38] refactor(Input): extract helper function; add test checkClassName function added to avoid duplicate code, adding test to verify accuracy --- src/__tests__/checkClassName.test.ts | 34 ++++++++++++++++++++++++++++ src/components/Input.tsx | 30 ++++++++---------------- src/helpers/index.ts | 18 ++++++++++++++- 3 files changed, 61 insertions(+), 21 deletions(-) create mode 100644 src/__tests__/checkClassName.test.ts diff --git a/src/__tests__/checkClassName.test.ts b/src/__tests__/checkClassName.test.ts new file mode 100644 index 00000000..e471feec --- /dev/null +++ b/src/__tests__/checkClassName.test.ts @@ -0,0 +1,34 @@ +import { describe, expect, test, jest } from "@jest/globals"; + +import { checkClassName } from "../helpers"; + +describe("checkClassName", () => { + const defaultClassName = "default-class"; + + test("should return result of toggleClassName function when it is a function", () => { + const toggleFunction = jest.fn(() => "custom-class"); + const result = checkClassName(defaultClassName, toggleFunction); + expect(result).toBe("custom-class"); + expect(toggleFunction).toHaveBeenCalledWith(defaultClassName); + }); + + test("should return toggleClassName when it is a non-empty string", () => { + const result = checkClassName(defaultClassName, "custom-class"); + expect(result).toBe("custom-class"); + }); + + test("should return defaultToggleClassName when toggleClassName is an empty string", () => { + const result = checkClassName(defaultClassName, ""); + expect(result).toBe(defaultClassName); + }); + + test("should return defaultToggleClassName when toggleClassName is null", () => { + const result = checkClassName(defaultClassName, null); + expect(result).toBe(defaultClassName); + }); + + test("should return defaultToggleClassName when toggleClassName is undefined", () => { + const result = checkClassName(defaultClassName, undefined); + expect(result).toBe(defaultClassName); + }); +}); diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 251d4b82..909c94b0 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -3,7 +3,13 @@ import React, { useCallback, useContext, useEffect, useRef } from "react"; import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants"; import DatepickerContext from "../contexts/DatepickerContext"; -import { clearInvalidInput, dateIsValid, parseFormattedDate, shortString } from "../helpers"; +import { + checkClassName, + clearInvalidInput, + dateIsValid, + parseFormattedDate, + shortString +} from "../helpers"; import ToggleButton from "./ToggleButton"; @@ -43,22 +49,6 @@ const Input: React.FC = (e: Props) => { const buttonRef = useRef(null); const inputRef = useRef(null); - const checkClassName = useCallback( - ( - defaultToggleClassName: string, - toggleClassName?: string | ((className: string) => string) | null - ) => { - if (typeof toggleClassName === "function") { - return toggleClassName(defaultToggleClassName); - } - if (typeof toggleClassName === "string" && toggleClassName !== "") { - return toggleClassName; - } - return defaultToggleClassName; - }, - [] - ); - // Functions const getClassName = useCallback(() => { const input = inputRef.current; @@ -73,7 +63,7 @@ const Input: React.FC = (e: Props) => { const defaultInputClassName = `relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}`; return checkClassName(defaultInputClassName, inputClassName); - }, [checkClassName, classNames, inputClassName, primaryColor]); + }, [classNames, inputClassName, primaryColor]); /** * automatically adds correct separator character to date input @@ -208,7 +198,7 @@ const Input: React.FC = (e: Props) => { if (input) { let lastChar = input.value[input.value.length - 1]; // cut off all non-numeric values - while (lastChar?.match(/\D/)) { + while (RegExp(/\D/).exec(lastChar)) { const shortenedString = shortString(input.value, input.value.length - 1); input.value = shortenedString; lastChar = shortenedString[shortenedString.length - 1]; @@ -254,7 +244,7 @@ const Input: React.FC = (e: Props) => { "absolute right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed"; return checkClassName(defaultToggleClassName, toggleClassName); - }, [toggleClassName, checkClassName, classNames]); + }, [toggleClassName, classNames]); // UseEffects && UseLayoutEffect useEffect(() => { diff --git a/src/helpers/index.ts b/src/helpers/index.ts index a0479dda..83abb85e 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -16,12 +16,28 @@ export function classNames(...classes: (false | null | undefined | string)[]) { * @returns shortened string */ export const clearInvalidInput = (value: string): string => { - if (value && value[value.length - 1].match(/\D/g)) { + if (value[value.length - 1]?.match(/\D/g)) { return shortString(value, value.length - 1); } return value; }; +/** + * checks and returns user-defined className or default className + */ +export const checkClassName = ( + defaultToggleClassName: string, + toggleClassName?: string | ((className: string) => string) | null +) => { + if (typeof toggleClassName === "function") { + return toggleClassName(defaultToggleClassName); + } + if (typeof toggleClassName === "string" && toggleClassName !== "") { + return toggleClassName; + } + return defaultToggleClassName; +}; + export function getTextColorByPrimaryColor(color: string) { switch (color) { case "blue": From be2960b509f8e772002d2df26c46426412fda190 Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 4 Sep 2024 16:24:16 +0200 Subject: [PATCH 13/38] refactor(types): add ClassName type avoiding duplicate code and improve readability --- src/contexts/DatepickerContext.ts | 19 ++++++++++--------- src/types/index.ts | 10 ++++++---- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts index d42aadd8..46174244 100644 --- a/src/contexts/DatepickerContext.ts +++ b/src/contexts/DatepickerContext.ts @@ -3,14 +3,15 @@ import React, { createContext } from "react"; import { DATE_FORMAT, LANGUAGE, START_WEEK } from "../constants"; import { + ClassNamesTypeProp, + ClassType, + ColorKeys, Configs, - Period, - DateValueType, - DateType, DateRangeType, - ClassNamesTypeProp, - PopoverDirectionType, - ColorKeys + DateType, + DateValueType, + Period, + PopoverDirectionType } from "../types"; interface DatepickerStore { @@ -35,9 +36,9 @@ interface DatepickerStore { i18n: string; value: DateValueType; disabled?: boolean; - inputClassName?: ((className: string) => string) | string | null; - containerClassName?: ((className: string) => string) | string | null; - toggleClassName?: ((className: string) => string) | string | null; + inputClassName?: ClassType; + containerClassName?: ClassType; + toggleClassName?: ClassType; toggleIcon?: (open: boolean) => React.ReactNode; readOnly?: boolean; startWeekOn?: string | null; diff --git a/src/types/index.ts b/src/types/index.ts index b9e561cd..940f510c 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -44,6 +44,8 @@ export type DateRangeType = { export type DateValueType = DateRangeType | null; +export type ClassType = ((className: string) => string) | string | null; + export type ClassNamesTypeProp = { container?: (p?: object | null | undefined) => string | undefined; input?: (p?: object | null | undefined) => string | undefined; @@ -67,10 +69,10 @@ export interface DatepickerType { startFrom?: Date | null; i18n?: string; disabled?: boolean; - classNames?: ClassNamesTypeProp | undefined; - containerClassName?: ((className: string) => string) | string | null; - inputClassName?: ((className: string) => string) | string | null; - toggleClassName?: ((className: string) => string) | string | null; + classNames?: ClassNamesTypeProp; + containerClassName?: ClassType; + inputClassName?: ClassType; + toggleClassName?: ClassType; toggleIcon?: (open: boolean) => React.ReactNode; inputId?: string; inputName?: string; From 1462fa61c78e7ba602387714c4794a31dc30b14e Mon Sep 17 00:00:00 2001 From: sri Date: Thu, 5 Sep 2024 13:25:54 +0200 Subject: [PATCH 14/38] fix(Input): check for value length before deletion prevents bug when pressing backspace in empty input --- src/components/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 909c94b0..2473f098 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -195,7 +195,7 @@ const Input: React.FC = (e: Props) => { // force deletion of separators const input = inputRef.current; // necessary because the addSeparator function will overwrite regular deletion - if (input) { + if (input?.value.length) { let lastChar = input.value[input.value.length - 1]; // cut off all non-numeric values while (RegExp(/\D/).exec(lastChar)) { From 1b7c64b8ef105f06b516edc3d5278f08fdfd79a3 Mon Sep 17 00:00:00 2001 From: sri Date: Thu, 5 Sep 2024 13:26:27 +0200 Subject: [PATCH 15/38] build(package): update deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index da98815b..1dfc3533 100644 --- a/package.json +++ b/package.json @@ -63,8 +63,8 @@ "eslint-plugin-react-hooks": "^4.6.0", "husky": "^8.0.0", "jest": "^29.7.0", - "lint-staged": "^13.2.3", - "next": "^13.1.1", + "lint-staged": "^15.2.10", + "next": "^14.1.2", "postcss": "^8.4.19", "prettier": "^2.8.0", "react": "^18.2.0", From d820f3bf257c0b5ae52dcf0bd5a6993974073a1d Mon Sep 17 00:00:00 2001 From: sri Date: Thu, 5 Sep 2024 13:31:45 +0200 Subject: [PATCH 16/38] 1.7.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1dfc3533..83481c8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.6.8", + "version": "1.7.0", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", From 48a6ce132ef89a9f282b63a3066821d3f3ebd53a Mon Sep 17 00:00:00 2001 From: sri Date: Wed, 18 Sep 2024 20:49:24 +0200 Subject: [PATCH 17/38] 1.7.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 83481c8b..42918f48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.7.0", + "version": "1.7.1", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", From a43da417c6a31d8d27cdf591adb4a92c29a14f87 Mon Sep 17 00:00:00 2001 From: sri Date: Fri, 20 Sep 2024 18:29:37 +0200 Subject: [PATCH 18/38] fix(Datepicker): startFrom defaults to new Date makes sure calendar popup updates correctly when date changed manually --- src/components/Datepicker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index e82cabd3..5ea73562 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -24,7 +24,7 @@ const Datepicker: React.FC = ({ asSingle = false, placeholder = null, separator = "~", - startFrom = null, + startFrom = new Date(), i18n = LANGUAGE, disabled = false, inputClassName = null, @@ -52,6 +52,7 @@ const Datepicker: React.FC = ({ const [firstDate, setFirstDate] = useState( startFrom && dayjs(startFrom).isValid() ? dayjs(startFrom) : dayjs() ); + const [secondDate, setSecondDate] = useState(nextMonth(firstDate)); const [period, setPeriod] = useState({ start: null, From 8bf60e15869b7b94e3e7f1eb5d430c3f1f7d69fe Mon Sep 17 00:00:00 2001 From: sri Date: Fri, 20 Sep 2024 18:30:59 +0200 Subject: [PATCH 19/38] build(package): update rollup, deps, and tsconfig --- next-env.d.ts | 2 +- package.json | 14 +++++++------- rollup.config.js | 11 +++-------- tsconfig.json | 3 +++ 4 files changed, 14 insertions(+), 16 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03d..a4a7b3f5 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/package.json b/package.json index 42918f48..5a3a903e 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,14 @@ "license": "MIT", "scripts": { "watch": "rollup -c -w", - "clean": "rm -rf dist", + "clean": "rm -rf dist .rollup.cache tsconfig.tsbuildinfo", "lint": "eslint --ignore-path .gitignore .", "lint:fix": "eslint --ignore-path .gitignore --fix .", "pret": "prettier -c .", "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'", "code-style": "npm run pret && npm run lint", "code-style:fix": "npm run pret:fix && npm run pret:fix", - "build": "npm run code-style && npm run clean && rollup -c", + "build": "npm run code-style && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs", "pub": "npm run build && npm publish", "dev": "next dev -p 8888", "test": "jest", @@ -44,9 +44,9 @@ }, "devDependencies": { "@jest/globals": "^29.7.0", - "@rollup/plugin-commonjs": "^24.0.1", - "@rollup/plugin-node-resolve": "^15.0.1", - "@rollup/plugin-typescript": "^11.0.0", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.6", "@tailwindcss/forms": "^0.5.3", "@types/node": "18.14.5", "@types/react": "^18.0.21", @@ -69,10 +69,10 @@ "prettier": "^2.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "rollup": "^2.77.2", + "rollup": "^4.22.0", "tailwindcss": "^3.2.4", "ts-jest": "^29.2.5", - "tslib": "^2.4.0", + "tslib": "^2.7.0", "typescript": "^4.8.4" }, "lint-staged": { diff --git a/rollup.config.js b/rollup.config.js index 8217c424..b1e3033f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,27 +2,22 @@ import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; import typescript from "@rollup/plugin-typescript"; -const packageJson = require("./package.json"); -const options = require("./tsconfig.json"); - module.exports = { input: "src/index.tsx", output: [ { - file: packageJson.main, + file: "dist/index.cjs.js", format: "cjs", - exports: "auto", sourcemap: true, inlineDynamicImports: true }, { - file: packageJson.module, + file: "dist/index.esm.js", format: "esm", - exports: "auto", sourcemap: true, inlineDynamicImports: true } ], external: ["react", "dayjs"], - plugins: [resolve(), commonjs(), typescript({ ...options.compilerOptions, jsx: "react" })] + plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })] }; diff --git a/tsconfig.json b/tsconfig.json index 0e8307d6..2ca11a41 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,8 @@ "lib": ["dom", "esnext"], "module": "esnext", "jsx": "preserve", + "noUnusedLocals": true, + "noUnusedParameters": true, "moduleResolution": "node", "forceConsistentCasingInFileNames": true, "strict": true, @@ -12,6 +14,7 @@ "esModuleInterop": true, "baseUrl": "src/", "declaration": true, + "declarationDir": "./dist", "outDir": "./dist", "inlineSources": true, "sourceMap": true, From 9cc071e4cfa8222320ce8bd8f507e84bb21c86c1 Mon Sep 17 00:00:00 2001 From: sri Date: Fri, 20 Sep 2024 18:34:00 +0200 Subject: [PATCH 20/38] style(tsc): no ununsed locals underscored locals are no longer flagged --- src/components/utils.tsx | 2 +- src/contexts/DatepickerContext.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/utils.tsx b/src/components/utils.tsx index d20227c4..e61f13ed 100644 --- a/src/components/utils.tsx +++ b/src/components/utils.tsx @@ -119,7 +119,7 @@ export const DoubleChevronRightIcon: React.FC = ({ className = "w-6 h }; // eslint-disable-next-line react/display-name,@typescript-eslint/ban-types -export const Arrow = React.forwardRef((props, ref) => { +export const Arrow = React.forwardRef((_props, ref) => { return (
({ arrowContainer: null, period: { start: null, end: null }, // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars - changePeriod: period => {}, + changePeriod: _period => {}, // eslint-disable-next-line @typescript-eslint/no-empty-function hideDatepicker: () => {}, dayHover: null, // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars - changeDayHover: (day: string | null) => {}, + changeDayHover: (_day: string | null) => {}, inputText: "", // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars - changeInputText: text => {}, + changeInputText: _text => {}, // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars - updateFirstDate: date => {}, + updateFirstDate: _date => {}, // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars - changeDatepickerValue: (value: DateValueType, e: HTMLInputElement | null | undefined) => {}, + changeDatepickerValue: (_value: DateValueType, _e: HTMLInputElement | null | undefined) => {}, showFooter: false, value: null, i18n: LANGUAGE, From 808a90ca4b7eb1fb9854aabf2a203afcbdae7857 Mon Sep 17 00:00:00 2001 From: sri Date: Fri, 20 Sep 2024 18:39:14 +0200 Subject: [PATCH 21/38] test(jest.config): ignore paths dist and rollup cache to be ignored by jest to avoid having test be run multiple times --- jest.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index f56dfa44..6dd60374 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,5 +4,6 @@ module.exports = { testEnvironment: "node", transform: { "^.+.tsx?$": ["ts-jest", {}] - } + }, + testPathIgnorePatterns: [".rollup.cache", "dist"] }; From c3eab32777b89312357b882e3c062ae6afebb02c Mon Sep 17 00:00:00 2001 From: sri Date: Fri, 20 Sep 2024 18:42:27 +0200 Subject: [PATCH 22/38] 1.7.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5a3a903e..233f8cda 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.7.1", + "version": "1.7.2", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", From a3d7ab687b1e151e6091a8a899a8a310ab5b8905 Mon Sep 17 00:00:00 2001 From: sri Date: Mon, 14 Oct 2024 10:50:13 +0200 Subject: [PATCH 23/38] fix(package): replace rollup with tsup; add changesets fix bundling error; upgrade deps --- .changeset/README.md | 9 +++++++++ .changeset/config.json | 11 +++++++++++ .changeset/sweet-tips-mate.md | 5 +++++ CONTRIBUTING.md | 29 +++++++++++++++++++++++++++++ package.json | 22 +++++++++++----------- pages/index.js | 5 +++-- rollup.config.js | 23 ----------------------- src/index.tsx | 1 - tsconfig.json | 6 +++--- 9 files changed, 71 insertions(+), 40 deletions(-) create mode 100644 .changeset/README.md create mode 100644 .changeset/config.json create mode 100644 .changeset/sweet-tips-mate.md delete mode 100644 rollup.config.js diff --git a/.changeset/README.md b/.changeset/README.md new file mode 100644 index 00000000..84fd1276 --- /dev/null +++ b/.changeset/README.md @@ -0,0 +1,9 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool +that works with multi-package repos, or single-package repos to help you version and publish your +code. You can find the full documentation for it +[in our repository](https://github.com/changesets/changesets) + +We have a quick list of common questions to get you started engaging with this project in +[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/.changeset/config.json b/.changeset/config.json new file mode 100644 index 00000000..96cdec90 --- /dev/null +++ b/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "restricted", + "baseBranch": "main", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/.changeset/sweet-tips-mate.md b/.changeset/sweet-tips-mate.md new file mode 100644 index 00000000..cdfb734f --- /dev/null +++ b/.changeset/sweet-tips-mate.md @@ -0,0 +1,5 @@ +--- +"@sciendis/react-tailwindcss-datepicker": patch +--- + +replace bundler diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 66cd2969..a58adbaf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -80,3 +80,32 @@ yarn pret:fix yarn build ``` + +**Add a changeset** + +Everytime you make a change you should add a changeset. Changesets hold two key bits of information: +a version type (following semver), and change information to be added to a changelog. For details, +check out the +[documentation](https://github.com/changesets/changesets/blob/main/docs/intro-to-using-changesets.md) + +```sh +npx changeset +``` + +Follow the prompts to document your changes. + +To release a new version use + +```sh +npx changeset +``` + +This consumes all changesets, and updates to the most appropriate semver version based on those +changesets. It also writes changelog entries for each consumed changeset. + +Make sure to review all changes. Once you are confident that these are correct, and have made any +necessary tweaks to changelogs, you can publish your packages: + +```sh +npx changeset publish +``` diff --git a/package.json b/package.json index 233f8cda..1a64714e 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "@sciendis/react-tailwindcss-datepicker", "version": "1.7.2", "description": " Modern date range picker component for React using Tailwind and dayjs.", - "main": "dist/index.cjs.js", - "module": "dist/index.esm.js", + "main": "dist/index.js", + "module": "dist/index.mjs", "types": "dist/index.d.ts", "author": "sciendis", "license": "MIT", @@ -16,7 +16,7 @@ "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'", "code-style": "npm run pret && npm run lint", "code-style:fix": "npm run pret:fix && npm run pret:fix", - "build": "npm run code-style && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs", + "build": "npm run code-style && npm run clean && tsup src/index.tsx --format cjs,esm --dts", "pub": "npm run build && npm publish", "dev": "next dev -p 8888", "test": "jest", @@ -44,12 +44,9 @@ }, "devDependencies": { "@jest/globals": "^29.7.0", - "@rollup/plugin-commonjs": "^26.0.1", - "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.6", "@tailwindcss/forms": "^0.5.3", - "@types/node": "18.14.5", - "@types/react": "^18.0.21", + "@types/node": "^22.7.5", + "@types/react": "^18.3.11", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.13", @@ -69,11 +66,11 @@ "prettier": "^2.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "rollup": "^4.22.0", "tailwindcss": "^3.2.4", "ts-jest": "^29.2.5", "tslib": "^2.7.0", - "typescript": "^4.8.4" + "tsup": "^8.3.0", + "typescript": "^5.6.2" }, "lint-staged": { "*.{ts,tsx}": [ @@ -86,5 +83,8 @@ "bugs": { "url": "https://github.com/sciendis/react-tailwindcss-datepicker/issues" }, - "homepage": "https://github.com/sciendis/react-tailwindcss-datepicker#readme" + "homepage": "https://github.com/sciendis/react-tailwindcss-datepicker#readme", + "dependencies": { + "@changesets/cli": "^2.27.8" + } } diff --git a/pages/index.js b/pages/index.js index 90299a33..eb23daeb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,16 +1,17 @@ import dayjs from "dayjs"; import Head from "next/head"; -import { useState } from "react"; +import React, { useState } from "react"; import Datepicker from "../src"; import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants"; +import { ColorKeys } from "../src/types"; export default function Playground() { const [value, setValue] = useState({ startDate: null, endDate: null }); - const [primaryColor, setPrimaryColor] = useState("blue"); + const [primaryColor, setPrimaryColor] = useState < ColorKeys > "blue"; const [useRange, setUseRange] = useState(true); const [showFooter, setShowFooter] = useState(false); const [showShortcuts, setShowShortcuts] = useState(false); diff --git a/rollup.config.js b/rollup.config.js deleted file mode 100644 index b1e3033f..00000000 --- a/rollup.config.js +++ /dev/null @@ -1,23 +0,0 @@ -import commonjs from "@rollup/plugin-commonjs"; -import resolve from "@rollup/plugin-node-resolve"; -import typescript from "@rollup/plugin-typescript"; - -module.exports = { - input: "src/index.tsx", - output: [ - { - file: "dist/index.cjs.js", - format: "cjs", - sourcemap: true, - inlineDynamicImports: true - }, - { - file: "dist/index.esm.js", - format: "esm", - sourcemap: true, - inlineDynamicImports: true - } - ], - external: ["react", "dayjs"], - plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })] -}; diff --git a/src/index.tsx b/src/index.tsx index 1a4ded83..15f0ed45 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ import Datepicker from "./components/Datepicker"; -export * from "./types"; export default Datepicker; diff --git a/tsconfig.json b/tsconfig.json index 2ca11a41..64afaa8c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "target": "esnext", "lib": ["dom", "esnext"], "module": "esnext", - "jsx": "preserve", + "jsx": "react-jsx", "noUnusedLocals": true, "noUnusedParameters": true, "moduleResolution": "node", @@ -23,8 +23,8 @@ "skipLibCheck": true, "noEmit": true, "resolveJsonModule": true, - "isolatedModules": true, - "incremental": true + "isolatedModules": true + // "noUncheckedIndexedAccess": true // should be enabled }, "include": ["src/**/*"], "exclude": ["node_modules"] From 1715a0acd31832927cbbfad1a459e329ad7c2930 Mon Sep 17 00:00:00 2001 From: sri Date: Mon, 14 Oct 2024 12:14:39 +0200 Subject: [PATCH 24/38] fix(tsup): export types --- .changeset/fast-berries-rest.md | 5 +++++ package.json | 5 ++--- src/{index.tsx => index.ts} | 1 + tsup.config.ts | 10 ++++++++++ 4 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/fast-berries-rest.md rename src/{index.tsx => index.ts} (75%) create mode 100644 tsup.config.ts diff --git a/.changeset/fast-berries-rest.md b/.changeset/fast-berries-rest.md new file mode 100644 index 00000000..dba8f822 --- /dev/null +++ b/.changeset/fast-berries-rest.md @@ -0,0 +1,5 @@ +--- +"@sciendis/react-tailwindcss-datepicker": patch +--- + +explicitly export types diff --git a/package.json b/package.json index 1a64714e..dcc54dd5 100644 --- a/package.json +++ b/package.json @@ -8,15 +8,14 @@ "author": "sciendis", "license": "MIT", "scripts": { - "watch": "rollup -c -w", - "clean": "rm -rf dist .rollup.cache tsconfig.tsbuildinfo", + "clean": "rm -rf dist tsconfig.tsbuildinfo", "lint": "eslint --ignore-path .gitignore .", "lint:fix": "eslint --ignore-path .gitignore --fix .", "pret": "prettier -c .", "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'", "code-style": "npm run pret && npm run lint", "code-style:fix": "npm run pret:fix && npm run pret:fix", - "build": "npm run code-style && npm run clean && tsup src/index.tsx --format cjs,esm --dts", + "build": "npm run code-style && npm run clean && tsup", "pub": "npm run build && npm publish", "dev": "next dev -p 8888", "test": "jest", diff --git a/src/index.tsx b/src/index.ts similarity index 75% rename from src/index.tsx rename to src/index.ts index 15f0ed45..f8d8aea5 100644 --- a/src/index.tsx +++ b/src/index.ts @@ -1,3 +1,4 @@ import Datepicker from "./components/Datepicker"; export default Datepicker; +export * from "./types"; diff --git a/tsup.config.ts b/tsup.config.ts new file mode 100644 index 00000000..fce01b89 --- /dev/null +++ b/tsup.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from "tsup"; + +export default defineConfig({ + entry: ["./src/index.ts"], + splitting: false, + sourcemap: true, + format: ["cjs", "esm"], + dts: true, + clean: true +}); From 8c0a8e299de37208f3e31fc03a9a713ae694e4cc Mon Sep 17 00:00:00 2001 From: sri Date: Mon, 14 Oct 2024 12:21:02 +0200 Subject: [PATCH 25/38] build(v1.7.3): nnew release bump version, add changelog --- .changeset/fast-berries-rest.md | 5 ----- .changeset/sweet-tips-mate.md | 5 ----- CHANGELOG.md | 7 +++++++ package.json | 2 +- 4 files changed, 8 insertions(+), 11 deletions(-) delete mode 100644 .changeset/fast-berries-rest.md delete mode 100644 .changeset/sweet-tips-mate.md create mode 100644 CHANGELOG.md diff --git a/.changeset/fast-berries-rest.md b/.changeset/fast-berries-rest.md deleted file mode 100644 index dba8f822..00000000 --- a/.changeset/fast-berries-rest.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sciendis/react-tailwindcss-datepicker": patch ---- - -explicitly export types diff --git a/.changeset/sweet-tips-mate.md b/.changeset/sweet-tips-mate.md deleted file mode 100644 index cdfb734f..00000000 --- a/.changeset/sweet-tips-mate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sciendis/react-tailwindcss-datepicker": patch ---- - -replace bundler diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..7fd33633 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,7 @@ +# @sciendis/react-tailwindcss-datepicker + +## 1.7.3 + +### Patch Changes + +- 1715a0a: explicitly export types diff --git a/package.json b/package.json index dcc54dd5..60da0ed6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.7.2", + "version": "1.7.3", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.js", "module": "dist/index.mjs", From 3425909936c4b7300bf42868064240ec6938ebe5 Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 22 Oct 2024 12:23:43 +0200 Subject: [PATCH 26/38] fix(tsup): fix config --- CONTRIBUTING.md | 2 +- pages/index.js | 3 +-- src/index.ts | 1 - tsup.config.ts | 7 +++++-- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a58adbaf..63c7c7ad 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -97,7 +97,7 @@ Follow the prompts to document your changes. To release a new version use ```sh -npx changeset +npx changeset version ``` This consumes all changesets, and updates to the most appropriate semver version based on those diff --git a/pages/index.js b/pages/index.js index eb23daeb..df6ba7f0 100644 --- a/pages/index.js +++ b/pages/index.js @@ -4,14 +4,13 @@ import React, { useState } from "react"; import Datepicker from "../src"; import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants"; -import { ColorKeys } from "../src/types"; export default function Playground() { const [value, setValue] = useState({ startDate: null, endDate: null }); - const [primaryColor, setPrimaryColor] = useState < ColorKeys > "blue"; + const [primaryColor, setPrimaryColor] = useState("blue"); const [useRange, setUseRange] = useState(true); const [showFooter, setShowFooter] = useState(false); const [showShortcuts, setShowShortcuts] = useState(false); diff --git a/src/index.ts b/src/index.ts index f8d8aea5..15f0ed45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ import Datepicker from "./components/Datepicker"; export default Datepicker; -export * from "./types"; diff --git a/tsup.config.ts b/tsup.config.ts index fce01b89..125f75ee 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -4,7 +4,10 @@ export default defineConfig({ entry: ["./src/index.ts"], splitting: false, sourcemap: true, - format: ["cjs", "esm"], + format: ["esm"], dts: true, - clean: true + clean: true, + treeshake: true, + outDir: "dist", + noExternal: [/.*/] }); From cd3253da139ca67f2d766479947f893b847b8fa5 Mon Sep 17 00:00:00 2001 From: Priska Date: Fri, 15 Nov 2024 15:32:35 +0100 Subject: [PATCH 27/38] fix(web): fix dependency array --- src/components/Datepicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 5ea73562..d6bff169 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -236,7 +236,7 @@ const Datepicker: React.FC = ({ setSecondDate(nextMonth(dayjs(startFrom))); } } - }, [asSingle, startFrom, value]); + }, [asSingle, startFrom.getDate(), value]); // Variables const safePrimaryColor = useMemo(() => { From d7b091187e69bd40bbbe6de85aed39e092e8e540 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 12:45:27 +0100 Subject: [PATCH 28/38] docs(docs): updated version and changelog --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fd33633..df061ddf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @sciendis/react-tailwindcss-datepicker +## 1.8.1 + +### Patch Changes + +- e97181d: fix maximum update depth bug + ## 1.7.3 ### Patch Changes diff --git a/package.json b/package.json index 60da0ed6..18c25359 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.7.3", + "version": "1.8.1", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.js", "module": "dist/index.mjs", From ab17142ed297a3bab2955eb0f57c893ce566651b Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 13:24:28 +0100 Subject: [PATCH 29/38] fix(datepicker): fix some eslint and ts error --- src/components/Calendar/Years.tsx | 3 +-- src/components/Calendar/index.tsx | 3 +-- src/components/Datepicker.tsx | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Calendar/Years.tsx b/src/components/Calendar/Years.tsx index 0bbef7b5..0431689d 100644 --- a/src/components/Calendar/Years.tsx +++ b/src/components/Calendar/Years.tsx @@ -1,10 +1,9 @@ import React, { useContext } from "react"; +import DatepickerContext from "../../contexts/DatepickerContext"; import { generateArrayNumber } from "../../helpers"; import { RoundedButton } from "../utils"; -import DatepickerContext from "contexts/DatepickerContext"; - interface Props { year: number; currentYear: number; diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 4a374375..f5ca794c 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -14,6 +14,7 @@ import { nextMonth, previousMonth } from "../../helpers"; +import { DateType } from "../../types"; import { ChevronLeftIcon, ChevronRightIcon, @@ -27,8 +28,6 @@ import Months from "./Months"; import Week from "./Week"; import Years from "./Years"; -import { DateType } from "types"; - interface Props { date: dayjs.Dayjs; minDate?: DateType | null; diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index d6bff169..dd8ad400 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -236,7 +236,7 @@ const Datepicker: React.FC = ({ setSecondDate(nextMonth(dayjs(startFrom))); } } - }, [asSingle, startFrom.getDate(), value]); + }, [asSingle, startFrom?.getDate(), value]); // Variables const safePrimaryColor = useMemo(() => { From 836df22bc3dfdc56f68222da3c0a47f61c5416c6 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 14:39:13 +0100 Subject: [PATCH 30/38] fix(datepicker): export types --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 15f0ed45..d0b0828b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ import Datepicker from "./components/Datepicker"; - +export * from "./types"; export default Datepicker; From 098a408a36f8514006ef9fcd85b77eb364231942 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 14:45:17 +0100 Subject: [PATCH 31/38] docs(docs): update version --- CHANGELOG.md | 6 ++++++ package.json | 3 +-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df061ddf..f3ac4cf3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @sciendis/react-tailwindcss-datepicker +## 1.8.2 + +### Patch Changes + +- 836df22: fix export types + ## 1.8.1 ### Patch Changes diff --git a/package.json b/package.json index 18c25359..043bf5de 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.8.1", + "version": "1.8.2", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.js", "module": "dist/index.mjs", @@ -51,7 +51,6 @@ "autoprefixer": "^10.4.13", "dayjs": "^1.11.7", "eslint": "^8.29.0", - "eslint-config-next": "^13.1.1", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-prettier": "^4.2.1", From 82c206959495b5c9b147ca268e7a53005f8686b7 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 14:47:08 +0100 Subject: [PATCH 32/38] docs(docs): added package again --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 043bf5de..d9a554b2 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "autoprefixer": "^10.4.13", "dayjs": "^1.11.7", "eslint": "^8.29.0", + "eslint-config-next": "^13.1.1", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-prettier": "^4.2.1", From f689819e746fb5f179ef98435f605b44df4d73a4 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 15:09:40 +0100 Subject: [PATCH 33/38] docs(docs): update types declaration in package json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d9a554b2..dcde08dd 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.8.2", + "version": "1.8.3", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.js", "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "types": "dist/index.d.mts", "author": "sciendis", "license": "MIT", "scripts": { From 49b8f0300b7f7b8a446017786b46161aecd3b9f9 Mon Sep 17 00:00:00 2001 From: Priska Date: Mon, 18 Nov 2024 15:10:21 +0100 Subject: [PATCH 34/38] docs(docs): updated changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f3ac4cf3..3eb67f05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @sciendis/react-tailwindcss-datepicker +## 1.8.3 + +### Patch Changes + +- f689819: fix export types + ## 1.8.2 ### Patch Changes From 78f1bd47ad432270ee4580d127937f6102e83ce2 Mon Sep 17 00:00:00 2001 From: Priska Date: Tue, 19 Nov 2024 08:12:39 +0100 Subject: [PATCH 35/38] fix(docs): reverted version back to 1.7.3 and unpublished versions back to 1.7.3 --- CHANGELOG.md | 18 ------------------ package.json | 4 ++-- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3eb67f05..7fd33633 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,23 +1,5 @@ # @sciendis/react-tailwindcss-datepicker -## 1.8.3 - -### Patch Changes - -- f689819: fix export types - -## 1.8.2 - -### Patch Changes - -- 836df22: fix export types - -## 1.8.1 - -### Patch Changes - -- e97181d: fix maximum update depth bug - ## 1.7.3 ### Patch Changes diff --git a/package.json b/package.json index dcde08dd..60da0ed6 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.8.3", + "version": "1.7.3", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.js", "module": "dist/index.mjs", - "types": "dist/index.d.mts", + "types": "dist/index.d.ts", "author": "sciendis", "license": "MIT", "scripts": { From 8f89252a3efc8647747cb4ae83e09d2ebd1e9b99 Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 19 Nov 2024 11:09:08 +0100 Subject: [PATCH 36/38] build(config): switch back to rollup BREAKING CHANGE: tsup did not work; revert to prior bundle setup --- .npmignore | 4 +++- CHANGELOG.md | 14 ++++++++++++++ next.config.js | 6 ++---- package.json | 25 +++++++++++++++---------- rollup.config.js | 23 +++++++++++++++++++++++ src/{index.ts => index.tsx} | 0 tsconfig.json | 10 ++++++++-- tsup.config.ts | 13 ------------- 8 files changed, 65 insertions(+), 30 deletions(-) create mode 100644 rollup.config.js rename src/{index.ts => index.tsx} (100%) delete mode 100644 tsup.config.ts diff --git a/.npmignore b/.npmignore index 943f8cd7..f9f9d267 100644 --- a/.npmignore +++ b/.npmignore @@ -5,7 +5,9 @@ node_modules .idea assets .git -pages +.github +.changeset +app styles .next .rollup.cache diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fd33633..49242a9c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ # @sciendis/react-tailwindcss-datepicker +## 1.8.0 + +### Minor Changes + +- switch back to rollup +- bring back explicit types + +## 1.7.4 (reverted) + +### Patch Changes + +- fix (hopefully) tsup config +- remove type folder from dist + ## 1.7.3 ### Patch Changes diff --git a/next.config.js b/next.config.js index eda88d1a..4678774e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true -}; +const nextConfig = {}; -module.exports = nextConfig; +export default nextConfig; diff --git a/package.json b/package.json index 60da0ed6..f192dfff 100644 --- a/package.json +++ b/package.json @@ -1,25 +1,26 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.7.3", + "version": "1.8.0", "description": " Modern date range picker component for React using Tailwind and dayjs.", - "main": "dist/index.js", - "module": "dist/index.mjs", + "main": "dist/index.cjs.js", + "module": "dist/index.esm.js", "types": "dist/index.d.ts", "author": "sciendis", "license": "MIT", "scripts": { - "clean": "rm -rf dist tsconfig.tsbuildinfo", + "clean": "rm -rf dist tsconfig.tsbuildinfo .rollup.cache", "lint": "eslint --ignore-path .gitignore .", "lint:fix": "eslint --ignore-path .gitignore --fix .", "pret": "prettier -c .", "pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'", "code-style": "npm run pret && npm run lint", "code-style:fix": "npm run pret:fix && npm run pret:fix", - "build": "npm run code-style && npm run clean && tsup", + "build": "npm run code-style && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs", "pub": "npm run build && npm publish", "dev": "next dev -p 8888", "test": "jest", - "prepare": "husky install" + "prepare": "husky install", + "ci": "pnpm run lint && pnpm run test && pnpm run build" }, "repository": { "type": "git", @@ -42,7 +43,11 @@ "react": "^17.0.2 || ^18.2.0" }, "devDependencies": { + "@changesets/cli": "^2.27.9", "@jest/globals": "^29.7.0", + "@rollup/plugin-commonjs": "^28.0.1", + "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-typescript": "^12.1.1", "@tailwindcss/forms": "^0.5.3", "@types/node": "^22.7.5", "@types/react": "^18.3.11", @@ -65,10 +70,10 @@ "prettier": "^2.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "rollup": "^4.24.0", "tailwindcss": "^3.2.4", "ts-jest": "^29.2.5", "tslib": "^2.7.0", - "tsup": "^8.3.0", "typescript": "^5.6.2" }, "lint-staged": { @@ -83,7 +88,7 @@ "url": "https://github.com/sciendis/react-tailwindcss-datepicker/issues" }, "homepage": "https://github.com/sciendis/react-tailwindcss-datepicker#readme", - "dependencies": { - "@changesets/cli": "^2.27.8" - } + "files": [ + "dist" + ] } diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 00000000..b1e3033f --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,23 @@ +import commonjs from "@rollup/plugin-commonjs"; +import resolve from "@rollup/plugin-node-resolve"; +import typescript from "@rollup/plugin-typescript"; + +module.exports = { + input: "src/index.tsx", + output: [ + { + file: "dist/index.cjs.js", + format: "cjs", + sourcemap: true, + inlineDynamicImports: true + }, + { + file: "dist/index.esm.js", + format: "esm", + sourcemap: true, + inlineDynamicImports: true + } + ], + external: ["react", "dayjs"], + plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })] +}; diff --git a/src/index.ts b/src/index.tsx similarity index 100% rename from src/index.ts rename to src/index.tsx diff --git a/tsconfig.json b/tsconfig.json index 64afaa8c..fc9fbef9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,12 +20,18 @@ "sourceMap": true, "rootDir": "src", "allowJs": true, + "plugins": [ + { + "name": "next" + } + ], "skipLibCheck": true, "noEmit": true, "resolveJsonModule": true, - "isolatedModules": true + "isolatedModules": true, // "noUncheckedIndexedAccess": true // should be enabled + "incremental": true }, "include": ["src/**/*"], - "exclude": ["node_modules"] + "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.test.ts", "src/**/__tests__"] } diff --git a/tsup.config.ts b/tsup.config.ts deleted file mode 100644 index 125f75ee..00000000 --- a/tsup.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { defineConfig } from "tsup"; - -export default defineConfig({ - entry: ["./src/index.ts"], - splitting: false, - sourcemap: true, - format: ["esm"], - dts: true, - clean: true, - treeshake: true, - outDir: "dist", - noExternal: [/.*/] -}); From 6f746057e41910474b7c26008f20b0239e5ee72e Mon Sep 17 00:00:00 2001 From: Priska Date: Tue, 19 Nov 2024 13:27:15 +0100 Subject: [PATCH 37/38] docs(docs): updated changelog and version in package json --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49242a9c..3dbd1595 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # @sciendis/react-tailwindcss-datepicker +## 1.8.1 + +### Patch Changes + +- fix dependency array in datepicker to prevent rerenders and fix max update depth bug + ## 1.8.0 ### Minor Changes diff --git a/package.json b/package.json index f192dfff..de3f9df3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sciendis/react-tailwindcss-datepicker", - "version": "1.8.0", + "version": "1.8.1", "description": " Modern date range picker component for React using Tailwind and dayjs.", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", From d7f6b2af72c850ef2f7d6a4ae095670895313718 Mon Sep 17 00:00:00 2001 From: sri Date: Tue, 19 Nov 2024 15:20:52 +0100 Subject: [PATCH 38/38] docs(Contributing): update instructions --- CONTRIBUTING.md | 74 +++++++++++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 30 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 63c7c7ad..fdbacfd7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,27 +3,18 @@ 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/sciendis/react-tailwindcss-datepicker/issues) to first discuss any -significant new features. +- [Publish the updated Datepicker](#publish-the-updated-datepicker) ## Installation -You only require a `yarn install` in the root directory to install everything you need. +You only require a `npm install` in the root directory to install everything you need. ```sh -yarn install +npm install ``` ## Coding standards @@ -31,14 +22,6 @@ yarn install 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 ``` @@ -51,14 +34,6 @@ 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 ``` @@ -71,13 +46,13 @@ Request **Let's clean the code first** ```sh -yarn pret:fix +npm pret:fix ``` **Test a build of your changes** ```sh -yarn build +npm build ``` @@ -94,6 +69,21 @@ npx changeset Follow the prompts to document your changes. +**Commit your changes** + +It is generally advised to create a feature branch for your changes and open a merge request. + +Create a commit, preferrably using [Commitizen](https://commitizen-tools.github.io/commitizen/). + +```sh +git cz commit +git push +``` + +# Publish the updated Datepicker + +**Update npm package** + To release a new version use ```sh @@ -109,3 +99,27 @@ necessary tweaks to changelogs, you can publish your packages: ```sh npx changeset publish ``` + +**Update github repo** + +Make sure to also commit und push the updated package and changelogs to github. + +```sh +git commit -m +git push +``` + +Add a tag with the latest version number to mark a new release. The tag name should reflect the +updated version property in the `package.json` file. + +```sh +git tag + +``` + +Note that tags are not automatically pushed. You will have to explicitly push tags to a shared +server after you have created them. + +```sh +git push origin +```