Core DatePicker Input Component

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.196",
+  "version": "1.0.197",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {
@@ -150,6 +150,7 @@
     "prosemirror-state": "1.4.3",
     "react-colorful": "5.6.1",
     "react-copy-to-clipboard": "5.1.0",
+    "react-datepicker": "7.5.0",
     "react-image-crop": "11.0.5",
     "react-select": "5.8.0",
     "react-select-async-paginate": "0.7.3",

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+import DatePicker from ".";
+
+export default {
+  title: "Input/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered"
+  },
+  argTypes: {
+    onChange: { action: "changed" }
+  }
+};
+
+export const Default = () => {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <DatePicker
+      name='datetime'
+      selected={date}
+      showTimeSelect
+      timeCaption='Time'
+      onChange={input => {
+        if (!input.datetime) {
+          return;
+        }
+
+        setDate(input.datetime);
+      }}
+    />
+  );
+};

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,50 @@
+import { FC } from "react";
+import BaseDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+import InputHeader from "../Common/InputHeader";
+import "./style.css";
+import { IDatePickerProps } from "./types";
+
+const DatePicker: FC<IDatePickerProps> = props => {
+  const {
+    selected = undefined,
+    onChange,
+    name,
+    showTimeSelect,
+    timeFormat = "HH:mm",
+    timeCaption = "time",
+    timeIntervals = 15,
+    dateFormat = "MMMM d, yyyy h:mm aa"
+  } = props;
+
+  const handleChange = (date: Date | null) => {
+    if (!onChange) {
+      throw new Error(`💣 Input is missing "onChange" handler 💣`);
+    }
+
+    if (!name) {
+      throw new Error('💣 Input is missing a "name" prop 💣');
+    }
+
+    onChange?.({ [name]: date });
+  };
+
+  return (
+    <div className='yl-bg-primary-background-color'>
+      <InputHeader {...props} />
+      <BaseDatePicker
+        selected={selected}
+        onChange={handleChange}
+        showTimeSelect={showTimeSelect}
+        timeFormat={timeFormat}
+        timeIntervals={timeIntervals}
+        timeCaption={timeCaption}
+        dateFormat={dateFormat}
+        showPopperArrow={false}
+      />
+    </div>
+  );
+};
+
+export default DatePicker;

src/Components/Inputs/DatePicker/index.tsx

@@ -0,0 +1,94 @@
+/* Global Rules -- Avoid Declaring These Globally */
+.react-datepicker * {
+  /* 
+    This degrades the performance and accessibility of the date picker.
+    TODO: Remove this line and explicitly target specific elements for hover, focus, etc.
+  */
+  @apply yl-outline-none !important;
+}
+
+/* Main Datepicker Container */
+.react-datepicker {
+  @apply yl-select-none yl-border-2 yl-border-primary-text-color/20 yl-bg-primary-background-color yl-font-sans yl-shadow-lg !important;
+}
+
+.react-datepicker,
+.react-datepicker__day {
+  @apply yl-text-primary-text-color !important;
+}
+
+/* Header Section */
+.react-datepicker__header {
+  @apply yl-border-0 yl-bg-primary-background-color !important;
+}
+
+.react-datepicker__current-month,
+.react-datepicker__day-name,
+.react-datepicker-time__header {
+  @apply yl-text-primary-text-color !important;
+}
+
+/* Month Container */
+.react-datepicker__month-container {
+  @apply yl-bg-primary-background-color !important;
+}
+
+/* Day Cell Styles */
+.react-datepicker__day:not([aria-disabled="true"]):hover {
+  @apply yl-bg-primary yl-text-white !important;
+}
+
+.react-datepicker__day--selected {
+  @apply yl-bg-primary yl-text-white !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  @apply yl-bg-primary/70 yl-text-white !important;
+}
+
+.react-datepicker__day--keyboard-selected:focus-visible {
+  @apply yl-text-white yl-outline-primary-text-color !important;
+}
+
+/* Time Picker Section */
+.react-datepicker__time-container {
+  @apply yl-border-l-primary-text-color/20 yl-px-0 !important;
+}
+
+.react-datepicker__time-container .react-datepicker__time {
+  @apply yl-bg-primary-background-color !important;
+}
+
+.react-datepicker__time-box {
+  @apply yl-pl-1 !important;
+}
+
+.react-datepicker__time-list-item--selected {
+  @apply yl-bg-primary yl-font-normal yl-text-white !important;
+}
+
+li.react-datepicker__time-list-item {
+  @apply hover:yl-bg-primary hover:yl-text-white !important;
+}
+
+/* Scrollbar Styles */
+.react-datepicker__time-list::-webkit-scrollbar {
+  width: 5px;
+}
+
+.react-datepicker__time-list::-webkit-scrollbar-track {
+  background: "##";
+}
+
+.react-datepicker__time-list::-webkit-scrollbar-thumb {
+  background: rgb(var(--text-color));
+}
+
+.react-datepicker__time-list::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--text-color));
+}
+
+/* Input Styles */
+.react-datepicker__input-container input {
+  @apply yl-w-full yl-appearance-none yl-rounded-md yl-border-2 yl-border-primary-text-color yl-bg-transparent yl-p-2 yl-text-primary-text-color hover:yl-cursor-pointer hover:yl-border-primary focus:yl-border-primary focus:yl-outline-none focus:yl-ring-transparent !important;
+}

src/Components/Inputs/DatePicker/style.css

@@ -0,0 +1,11 @@
+import { InputHeaderProps } from "../Common/InputHeader/types";
+
+export interface IDatePickerProps extends InputHeaderProps {
+  selected?: Date;
+  onChange: (value: Record<string, Date | null>) => void;
+  timeFormat?: string;
+  timeIntervals?: number;
+  timeCaption?: string;
+  dateFormat?: string;
+  showTimeSelect?: boolean;
+}

src/Components/Inputs/DatePicker/types.ts

@@ -11,3 +11,4 @@ export { default as Textarea } from "./Textarea";
 export { default as Tiptap } from "./Tiptap";
 export { default as TiptapToHTML } from "./Tiptap/TiptapToHTML";
 export { default as TiptapUtils } from "./Tiptap/TiptapUtils";
+export { default as DatePicker } from "./DatePicker";

src/Components/Inputs/index.ts

@@ -1,6 +1,7 @@
 import * as AsyncSelectTypes from "./AsyncSelect/types";
 import * as CheckboxTypes from "./Checkbox/types";
 import * as CommonTypes from "./Common/types";
+import * as DatePickerTypes from "./DatePicker/types";
 import * as DomainInputTypes from "./DomainInput/types";
 import * as InputTypes from "./Input/types";
 import * as SelectTypes from "./Select/types";
@@ -17,5 +18,6 @@ export {
   SelectTypes,
   SwitchTypes,
   TextareaTypes,
-  TiptapTypes
+  TiptapTypes,
+  DatePickerTypes
 };