feat: enhance TypeScript support in examples

- Updated tsconfig.json for examples to include new compiler options and exclude specific files.
- Introduced a new live-provider-globals.d.ts file to declare global variables and types that we configured for react-live.
- Refactored examples to use globally declared DateFNS methods.
- Add the DATEFNS directly to the react-live scope instead of destructuring it, as it avoid declaring all utilities of date-fns
- Fixed the type related issues in the examples.

Author: balajis-qb

docs-site/src/components/Example/index.tsx

@@ -165,7 +165,7 @@ export default class CodeExampleComponent extends React.Component<
                 useState,
                 DatePicker,
                 CalendarContainer,
-                ...DateFNS,
+                DateFNS,
                 range,
                 fi,
                 forwardRef,

docs-site/src/examples/live-provider-globals.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import * as DateFNS from "date-fns";
+import type { ReactDatePickerCustomHeaderProps as ReactDatePickerCustomHeaderPropsType } from "react-datepicker";
+import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react";
+declare global {
+  const useState: typeof React.useState;
+  const DatePicker: any;
+  const CalendarContainer: any;
+  const range: any;
+  const fi: any;
+  const forwardRef: typeof React.forwardRef;
+  const render: (component: React.ComponentType) => void;
+
+  // DateFNS object is available globally
+  const DateFNS: typeof DateFNS;
+
+  // Declare types
+  type ReactNode = React.ReactNode;
+  type ReactDatePickerCustomHeaderProps = ReactDatePickerCustomHeaderPropsType;
+  type MiddlewareState = MiddlewareStateType;
+}
+
+export {};

docs-site/src/examples/ts/customDayClassName.tsx

@@ -6,7 +6,7 @@ const CustomDayClassName = () => {
       selected={startDate}
       onChange={(date: Date | null) => setStartDate(date)}
       dayClassName={(date: Date) =>
-        getDate(date) < Math.random() * 31 ? "random" : undefined
+        DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined
       }
     />
   );

docs-site/src/examples/ts/customInput.tsx

@@ -5,7 +5,7 @@ type ExampleCustomInputProps = {
 };
 
 const CustomInput = () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   const ExampleCustomInput = forwardRef<
     HTMLButtonElement,
@@ -19,7 +19,7 @@ const CustomInput = () => {
   return (
     <DatePicker
       selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      onChange={(date: Date | null) => setStartDate(date)}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );

docs-site/src/examples/ts/customTimeInput.tsx

@@ -1,7 +1,7 @@
 interface ExampleCustomTimeInputProps {
   date?: Date;
-  value: string;
-  onChange: (time: string) => void;
+  value?: string;
+  onChange?: (time: string) => void;
 }
 
 const CustomTimeInput = () => {
@@ -13,8 +13,10 @@ const CustomTimeInput = () => {
   }: ExampleCustomTimeInputProps) => (
     <input
       value={value}
-      onChange={(e) => onChange(e.target.value)}
-      onClick={(e) => e.target?.focus()}
+      onChange={(e) => onChange?.(e.target.value)}
+      onClick={(e: React.MouseEvent<HTMLInputElement>) =>
+        (e.target as HTMLInputElement).focus()
+      }
       style={{ border: "solid 1px pink" }}
     />
   );

docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx

@@ -13,7 +13,7 @@ const DateRangeWithShowDisabledNavigation = () => {
       selected={startDate}
       onChange={onChange}
       minDate={new Date()}
-      maxDate={addMonths(new Date(), 5)}
+      maxDate={DateFNS.addMonths(new Date(), 5)}
       startDate={startDate}
       endDate={endDate}
       selectsRange

docs-site/src/examples/ts/default.tsx

@@ -2,7 +2,10 @@ const Default = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
   );
 };
 

docs-site/src/examples/ts/excludeDateIntervals.tsx

@@ -8,8 +8,8 @@ const ExcludeDateIntervals = () => {
 
   const excludeDateIntervals: TExcludeDateIntervals = [
     {
-      start: subDays(new Date(), 5),
-      end: addDays(new Date(), 5),
+      start: DateFNS.subDays(new Date(), 5),
+      end: DateFNS.addDays(new Date(), 5),
     },
   ];
 

docs-site/src/examples/ts/excludeDates.tsx

@@ -8,7 +8,10 @@ type TExcludeDates =
 const ExcludeDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
 
-  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)];
+  const excludeDates: TExcludeDates = [
+    new Date(),
+    DateFNS.subDays(new Date(), 1),
+  ];
 
   return (
     <DatePicker

docs-site/src/examples/ts/excludeDatesWithMessage.tsx

@@ -10,7 +10,7 @@ const ExcludeDatesWithMessage = () => {
 
   const excludeDates: TExcludeDates = [
     { date: new Date(), message: "Today is excluded" },
-    { date: subDays(new Date(), 1), message: "This day is excluded" },
+    { date: DateFNS.subDays(new Date(), 1), message: "This day is excluded" },
   ];
 
   return (