nearpay-datepicker-react 0.2.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Onesine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# Nearpay Datepicker
+
+<p align="center">
+    A modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker which uses Vuejs.
+</p>
+
+<div align="center">
+    
+[![npm version](https://img.shields.io/npm/v/nearpay-datepicker?style=flat-square)](https://www.npmjs.com/package/nearpay-datepicker)
+    
+</div>
+
+## Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Simple Usage](#simple-usage)
+- [Playground](#playground)
+- [Contributing](#contributing)
+
+## Features
+
+- ✅ Theming options
+- ✅ Dark mode
+- ✅ Single Date
+- ✅ Single date use Range
+- ✅ Shortcuts
+- ✅ TypeScript support
+- ✅ Localization(i18n)
+- ✅ Date formatting
+- ✅ Disable specific dates
+- ✅ Minimum Date and Maximum Date
+- ✅ Custom shortcuts
+
+## Installation
+
+⚠️ Nearpay Datepicker uses Tailwind CSS 3 (with the
+[@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) &
+[Dayjs](https://day.js.org/en/) under the hood to work.
+
+### Install via npm
+
+```
+npm install nearpay-datepicker
+```
+
+### Install via yarn
+
+```
+yarn add nearpay-datepicker
+```
+
+Make sure you have installed the peer dependencies as well with the below versions.
+
+```
+"dayjs": "^1.11.12",
+"react": "^17.0.2 || ^18.2.0" || "^19.0.0"
+```
+
+## Simple Usage
+
+#### Tailwindcss Configuration
+
+Add the datepicker to your tailwind configuration using this code
+
+```javascript
+// in your tailwind.config.js
+module.exports = {
+    // ...
+    content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/nearpay-datepicker/dist/index.esm.js"]
+    // ...
+};
+```
+
+Then use nearpay-datepicker-select in your app:
+
+```tsx
+import { useState } from "react";
+import Datepicker from "nearpay-datepicker";
+
+const App = () => {
+    const [value, setValue] = useState({
+        startDate: null,
+        endDate: null
+    });
+
+    return (
+        <>
+            <Datepicker value={value} onChange={newValue => setValue(newValue)} />
+        </>
+    );
+};
+
+export default App;
+```
+
+## PlayGround
+
+Clone the `master` branch and run commands:
+
+```sh
+# Using npm
+npm install && npm dev
+
+# Using yarn
+yarn install && yarn dev
+
+```
+
+Open a browser and navigate to `http://localhost:8888`
+
+## Contributing
+
+See [CONTRIBUTING.md](https://github.com/nearpayio/nearpay-datepicker/blob/master/CONTRIBUTING.md)
+
+## Official Documentation repo
+
+[https://github.com/nearpayio/nearpay-datepicker-doc](https://github.com/nearpayio/nearpay-datepicker-doc)
+
+## Thanks to
+
+- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
+- [React](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [dayjs](https://day.js.org/)
+
+I thank you in advance for your contribution to this project.
+
+## License
+
+[MIT](LICENSE) Licensed. Copyright (c) Lewhe nearpayio 2022.

package/dist/components/Calendar/Days.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    days: {
+        previous: Date[];
+        current: Date[];
+        next: Date[];
+    };
+    onClickPreviousDays: (day: Date) => void;
+    onClickDay: (day: Date) => void;
+    onClickNextDays: (day: Date) => void;
+}
+declare const Days: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Days;

package/dist/components/Calendar/Months.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    currentMonth: number;
+    clickMonth: (month: number) => void;
+}
+declare const Months: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Months;

package/dist/components/Calendar/Week.d.ts

@@ -0,0 +1,2 @@
+declare const Week: () => import("react/jsx-runtime").JSX.Element;
+export default Week;

package/dist/components/Calendar/Years.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    year: number;
+    currentYear: number;
+    minYear: number | null;
+    maxYear: number | null;
+    clickYear: (data: number) => void;
+}
+declare const Years: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Years;

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,12 @@
+import { DateType } from "types";
+interface Props {
+    date: Date;
+    minDate?: DateType;
+    maxDate?: DateType;
+    onClickPrevious: () => void;
+    onClickNext: () => void;
+    changeMonth: (month: number) => void;
+    changeYear: (year: number) => void;
+}
+declare const Calendar: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Calendar;

package/dist/components/Datepicker.d.ts

@@ -0,0 +1,3 @@
+import { DatepickerType } from "../types";
+declare const Datepicker: (props: DatepickerType) => import("react/jsx-runtime").JSX.Element;
+export default Datepicker;

package/dist/components/Footer.d.ts

@@ -0,0 +1,2 @@
+declare const Footer: () => import("react/jsx-runtime").JSX.Element;
+export default Footer;

package/dist/components/Input.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+type Props = {
+    setContextRef?: (ref: RefObject<HTMLInputElement>) => void;
+};
+declare const Input: (e: Props) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/PrimaryButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "../types";
+declare const PrimaryButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default PrimaryButton;

package/dist/components/RoundedButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "../types";
+declare const RoundedButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RoundedButton;

package/dist/components/SecondaryButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "../types";
+declare const SecondaryButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SecondaryButton;

package/dist/components/Shortcuts.d.ts

@@ -0,0 +1,2 @@
+declare const Shortcuts: () => import("react/jsx-runtime").JSX.Element | null;
+export default Shortcuts;

package/dist/components/ToggleButton.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    isEmpty: boolean;
+}
+declare const ToggleButton: (e: Props) => import("react/jsx-runtime").JSX.Element;
+export default ToggleButton;

package/dist/components/VerticalDash.d.ts

@@ -0,0 +1,2 @@
+declare const VerticalDash: () => import("react/jsx-runtime").JSX.Element;
+export default VerticalDash;

package/dist/components/icons/Arrow.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface Props {
+    children?: ReactNode;
+}
+declare const Arrow: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default Arrow;

package/dist/components/icons/ChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const ChevronLeftIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default ChevronLeftIcon;

package/dist/components/icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const ChevronRightIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default ChevronRightIcon;

package/dist/components/icons/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const CloseIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default CloseIcon;

package/dist/components/icons/DateIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const DateIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default DateIcon;

package/dist/components/icons/DoubleChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const DoubleChevronLeftIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default DoubleChevronLeftIcon;

package/dist/components/icons/DoubleChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "../../types";
+declare const DoubleChevronRightIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default DoubleChevronRightIcon;

package/dist/constants/index.d.ts

@@ -0,0 +1,16 @@
+import { ColorKeys, Colors, DateLookingType, WeekStringType } from "../types";
+export declare const COLORS: readonly ["blue", "orange", "yellow", "red", "purple", "amber", "lime", "green", "emerald", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "gray"];
+export declare const DEFAULT_COLOR: ColorKeys;
+export declare const DEFAULT_SEPARATOR = "~";
+export declare const LANGUAGE = "en";
+export declare const DATE_FORMAT = "YYYY-MM-DD";
+export declare const START_WEEK: WeekStringType;
+export declare const DATE_LOOKING_OPTIONS: readonly ["forward", "backward", "middle"];
+export declare const DEFAULT_DATE_LOOKING: DateLookingType;
+export declare const DAYS: readonly [0, 1, 2, 3, 4, 5, 6];
+export declare const MONTHS: number[];
+export declare const BG_COLOR: Colors;
+export declare const TEXT_COLOR: Colors;
+export declare const BORDER_COLOR: Colors;
+export declare const RING_COLOR: Colors;
+export declare const BUTTON_COLOR: Colors;

package/dist/constants/shortcuts.d.ts

@@ -0,0 +1,5 @@
+import { ShortcutsItem } from "../types";
+declare const DEFAULT_SHORTCUTS: {
+    [key in string]: ShortcutsItem | ShortcutsItem[];
+};
+export default DEFAULT_SHORTCUTS;

package/dist/contexts/DatepickerContext.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode, RefObject } from "react";
+import { Configs, Period, DateValueType, DateType, DateRangeType, ClassNamesTypeProp, PopoverDirectionType, ColorKeys, WeekStringType, DateLookingType } from "../types";
+interface DatepickerStore {
+    arrowContainer: RefObject<HTMLDivElement> | null;
+    asSingle?: boolean;
+    calendarContainer: RefObject<HTMLDivElement> | null;
+    changeDatepickerValue: (value: DateValueType, e?: HTMLInputElement | null | undefined) => void;
+    changeDayHover: (day: DateType) => void;
+    changeInputText: (text: string) => void;
+    changePeriod: (period: Period) => void;
+    classNames?: ClassNamesTypeProp;
+    configs?: Configs;
+    containerClassName?: ((className: string) => string) | string | null;
+    dateLooking?: DateLookingType;
+    dayHover: DateType;
+    disabled?: boolean;
+    disabledDates?: DateRangeType[] | null;
+    displayFormat: string;
+    hideDatepicker: () => void;
+    i18n: string;
+    input?: RefObject<HTMLInputElement>;
+    inputClassName?: ((className: string) => string) | string | null;
+    inputId?: string;
+    inputName?: string;
+    inputText: string;
+    maxDate?: DateType | null;
+    minDate?: DateType | null;
+    period: Period;
+    placeholder?: string | null;
+    popoverDirection?: PopoverDirectionType;
+    primaryColor: ColorKeys;
+    readOnly?: boolean;
+    required?: boolean;
+    separator: string;
+    showFooter?: boolean;
+    startWeekOn?: WeekStringType | null;
+    toggleClassName?: ((className: string) => string) | string | null;
+    toggleIcon?: (open: boolean) => ReactNode;
+    updateFirstDate: (date: Date) => void;
+    value: DateValueType;
+}
+declare const DatepickerContext: import("react").Context<DatepickerStore>;
+export default DatepickerContext;

package/dist/helpers/index.d.ts

@@ -0,0 +1,4 @@
+export declare function classNames(...classes: (false | null | undefined | string)[]): string;
+export declare function generateArrayNumber(start?: number, end?: number): number[];
+export declare function shortString(value: string, limit?: number): string;
+export declare function ucFirst(value: string): string;

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export default function useOnClickOutside(ref: RefObject<HTMLDivElement>, handler: (e?: MouseEvent | TouchEvent) => void): void;