Merge pull request #95 from upneet-betalectic/DatePicker

Date picker Component

.changeset/silent-fireants-sparkle.md

@@ -0,0 +1,10 @@
+---
+"@locoworks/reusejs-react-date-picker": major
+---
+
+Created 3 Components inside DatePicker Component-
+
+1. Calendar which includes all the calendar related UI
+2. SingleDatePicker which includes using dayzed and passing props to Calendar
+3. HeadlessDatePicker which is a custom UI for date input and followed.
+   There also is a useDateHelpers hook being used which extracts the date helper function (isValid) to be used inside DatePicker.

.changeset/thin-moons-dance.md

@@ -0,0 +1,8 @@
+---
+"@locoworks/reusejs-toolkit-react-hooks": major
+---
+
+This include a use-date-helper Hook
+
+- Added the convertGMTDateToTimezone function to convert GMT dates to a specified timezone.
+- Introduced the isValidDate function to validate date strings against a specified format.

components/date-picker/index.ts

@@ -0,0 +1,3 @@
+export { default as HeadlessDatePicker } from "./src/HeadlessDatePicker";
+
+export type { CalendarBaseClassesProps } from "./src/Calendar";

components/date-picker/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@locoworks/reusejs-react-date-picker",
+  "version": "0.0.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "prettier": "@betalectic-reusejs/shared-config-prettier-ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "lint": "yarn eslint '**/*.ts' '**/*.tsx'",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "bundle": "rollup -c --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs"
+  },
+  "dependencies": {
+    "dayzed": "^3.2.3",
+    "tailwind-merge": "^1.12.0",
+    "ts-luxon": "^4.4.0"
+  },
+  "devDependencies": {
+    "@betalectic-reusejs/shared-config-eslint-reactts": "^1.0.1",
+    "@betalectic-reusejs/shared-config-prettier-ts": "^1.0.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "^8.38.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-standard": "^5.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "license": "MIT"
+}

components/date-picker/rollup.config.ts

@@ -0,0 +1,41 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import postcss from "rollup-plugin-postcss";
+
+export default [
+	{
+		input: "./index.ts",
+		output: [
+			{
+				file: "dist/index.cjs.js",
+				format: "cjs",
+			},
+			{
+				file: "dist/index.esm.js",
+				format: "es",
+			},
+		],
+		external: ["react", "react-dom", "tailwind-merge"],
+		plugins: [
+			resolve(),
+			commonjs(),
+			typescript({
+				useTsconfigDeclarationDir: true,
+			}),
+			// mdx(),
+			postcss({
+				extract: "styles.css",
+				config: {
+					path: "./postcss.config.js",
+					ctx: null,
+				},
+				extensions: [".css"],
+				minimize: true,
+				inject: {
+					insertAt: "top",
+				},
+			}),
+		],
+	},
+];

components/date-picker/src/Calendar.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+const calendardefaultClasses = {
+	defaultSelectableTextStyle: "bg-white hover:bg-gray-100 ",
+	defaultDateButtonStyle: "inline-block w-1/7 border-none rounded-md",
+	selectedOrTodayStyles: "font-semibold border border-blue-300",
+	selectedTextStyles: "text-white font-semibold bg-blue-400",
+	selectableTextStyles: "text-gray-800 ",
+	todayButNotSelectedStyles: "bg-blue-300",
+	weekendStyles: "text-red-400 ",
+	topLeftBorderStyles: "rounded-tl-lg",
+	topRightBorderStyles: "rounded-tr-lg",
+	bottomLeftBorderStyles: "rounded-bl-lg",
+	bottomRightBorderStyles: "rounded-br-lg",
+	notCurrentMonthStyles: "text-gray-800  bg-gray-50  opacity-80",
+	dateButtonsUnSelectableStyles: "bg-gray-50 ",
+};
+
+export interface CalendarBaseClassesProps {
+	calendarWrapperClasses?: string;
+	calenderHeaderButtonsWrapper?: string;
+	headerButtonClasses?: string;
+	singleCalenderSectionWrapper?: string;
+	monthNameClasses?: string;
+	weekNameWrapper?: string;
+	weekNameClasses?: string;
+	selectableClasses?: string;
+	selectedOrTodayClasses?: string;
+	weekendClasses?: string;
+	notCurrentMonthClasses?: string;
+	selectedTextClasses?: string;
+	selectableTextClasses?: string;
+	todayButNotSelectedClasses?: string;
+}
+
+const monthNamesShort = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+];
+const weekdayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export interface CalenderProps {
+	calendars?: any;
+	getBackProps?: any;
+	getForwardProps?: any;
+	getDateProps?: any;
+	prevMonthLabel?: React.ReactNode;
+	nextMonthLabel?: React.ReactNode;
+	calendarBaseClasses?: CalendarBaseClassesProps;
+}
+
+export default function Calendar({
+	calendars,
+	getBackProps,
+	getForwardProps,
+	getDateProps,
+	calendarBaseClasses,
+	prevMonthLabel = "Back",
+	nextMonthLabel = "Next",
+}: CalenderProps) {
+	if (calendars.length) {
+		return (
+			<div className={calendarBaseClasses?.calendarWrapperClasses || ""}>
+				<div
+					className={`flex justify-between ${
+						calendarBaseClasses?.calenderHeaderButtonsWrapper || ""
+					}`}
+				>
+					<button
+						className={`${calendarBaseClasses?.headerButtonClasses || ""}`}
+						{...getBackProps({
+							calendars,
+						})}
+					>
+						{prevMonthLabel}
+					</button>
+					<button
+						className={`${calendarBaseClasses?.headerButtonClasses || ""}`}
+						{...getForwardProps({
+							calendars,
+						})}
+					>
+						{nextMonthLabel}
+					</button>
+				</div>
+				{calendars.map((calendar: any) => (
+					<div
+						key={`${calendar.month}${calendar.year}`}
+						className={`box-border inline-block ${
+							calendarBaseClasses?.singleCalenderSectionWrapper || ""
+						}`}
+					>
+						<div
+							className={`text-center ${
+								calendarBaseClasses?.monthNameClasses || ""
+							}`}
+						>
+							{monthNamesShort[calendar.month]} {calendar.year}
+						</div>
+
+						<div
+							className={`flex justify-between px-1 ${
+								calendarBaseClasses?.weekNameWrapper || ""
+							}`}
+						>
+							{weekdayNamesShort.map((weekday) => (
+								<div
+									key={`${calendar.month}${calendar.year}${weekday}`}
+									className={`inline-block text-center bg-transparent border-none w-1/7 ${
+										calendarBaseClasses?.weekNameClasses || ""
+									}`}
+								>
+									{weekday}
+								</div>
+							))}
+						</div>
+
+						{calendar.weeks.map((week: any, weekIndex: any) =>
+							week.map((dateObj: any, dayIdx: any) => {
+								const key = `${calendar.month}${calendar.year}${weekIndex}${dayIdx}`;
+								if (!dateObj) {
+									return (
+										<div
+											key={key}
+											className="inline-block px-2 bg-transparent border-none w-1/7"
+										/>
+									);
+								}
+								const {
+									date,
+									selected,
+									selectable,
+									today,
+									prevMonth,
+									nextMonth,
+								} = dateObj;
+
+								const isCurrentMonth = !prevMonth && !nextMonth;
+
+								return (
+									<button
+										key={key}
+										{...getDateProps({ dateObj })}
+										className={twMerge(
+											calendardefaultClasses.defaultDateButtonStyle,
+
+											selectable &&
+												twMerge(
+													calendarBaseClasses?.selectableClasses,
+													calendardefaultClasses.defaultSelectableTextStyle,
+												),
+											(selected || today) &&
+												twMerge(
+													calendarBaseClasses?.selectedOrTodayClasses,
+													calendardefaultClasses.selectedOrTodayStyles,
+												),
+											selected &&
+												twMerge(
+													calendarBaseClasses?.selectedTextClasses,
+													calendardefaultClasses.selectedTextStyles,
+												),
+											today &&
+												!selected &&
+												twMerge(
+													calendarBaseClasses?.todayButNotSelectedClasses,
+													calendardefaultClasses.todayButNotSelectedStyles,
+												),
+											selectable &&
+												twMerge(
+													calendarBaseClasses?.selectableTextClasses,
+													calendardefaultClasses.selectableTextStyles,
+												),
+											(dayIdx == 0 || dayIdx == 6) &&
+												twMerge(
+													calendarBaseClasses?.weekendClasses,
+													calendardefaultClasses.weekendStyles,
+												),
+											weekIndex === 0 &&
+												dayIdx === 0 &&
+												calendardefaultClasses.topLeftBorderStyles,
+											weekIndex === 0 &&
+												dayIdx === 6 &&
+												calendardefaultClasses.topRightBorderStyles,
+											weekIndex === calendar.weeks.length - 1 &&
+												dayIdx === 0 &&
+												calendardefaultClasses.bottomLeftBorderStyles,
+											weekIndex === calendar.weeks.length - 1 &&
+												dayIdx === 6 &&
+												calendardefaultClasses.bottomRightBorderStyles,
+											!isCurrentMonth &&
+												twMerge(
+													calendarBaseClasses?.notCurrentMonthClasses,
+													calendardefaultClasses.notCurrentMonthStyles,
+												),
+										)}
+									>
+										{selectable ? date.getDate() : "X"}
+									</button>
+								);
+							}),
+						)}
+					</div>
+				))}
+			</div>
+		);
+	}
+	return null;
+}