From 53c333829456de576af49f6e06153e70070f7912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Sat, 30 Nov 2024 02:35:34 +0800
Subject: [PATCH] fix(docs): typecheck errors (#4171)

* fix(docs): remove duplicate import

* fix(docs): update type for onChange in range-calendar page

* fix(docs): add missing `@react-types/calendar`

* fix(docs): broken syntax

* fix(docs): typecheck issues

* fix(docs): add missing `@react-types/datepicker`

* fix(docs): typecheck issues
---
 .../components/docs/components/codeblock.tsx  |   2 +-
 .../components/alert/custom-styles.raw.tsx    | 103 ++++++++----------
 .../autocomplete/async-loading-items.raw.tsx  |   3 +
 .../autocomplete/fully-controlled.raw.tsx     |   2 +-
 .../content/components/modal/overflow.raw.tsx |   5 +-
 .../range-calendar/controlled.raw.tsx         |   2 +-
 .../range-calendar/invalid-date.raw.tsx       |   5 +-
 .../components/range-calendar/presets.raw.tsx |   2 +-
 .../select/async-loading-items.raw.tsx        |   1 +
 .../select/custom-render-value.raw.tsx        |   8 +-
 .../docs/components/range-calendar.mdx        |   6 +-
 apps/docs/package.json                        |   2 +
 .../stories/range-calendar.stories.tsx        |   2 +-
 pnpm-lock.yaml                                |   6 +
 14 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx
index 57bd680f7e..e68b99f943 100644
--- a/apps/docs/components/docs/components/codeblock.tsx
+++ b/apps/docs/components/docs/components/codeblock.tsx
@@ -3,7 +3,7 @@ import type {TransformTokensTypes} from "./helper";
 
 import React, {forwardRef, useEffect} from "react";
 import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
-import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
+import BaseHighlight, {defaultProps} from "prism-react-renderer";
 import {debounce, omit} from "@nextui-org/shared-utils";
 import {cn} from "@nextui-org/react";
 
diff --git a/apps/docs/content/components/alert/custom-styles.raw.tsx b/apps/docs/content/components/alert/custom-styles.raw.tsx
index 9056bf91c8..6ef55f3ea8 100644
--- a/apps/docs/content/components/alert/custom-styles.raw.tsx
+++ b/apps/docs/content/components/alert/custom-styles.raw.tsx
@@ -3,65 +3,58 @@ import type {AlertProps} from "@nextui-org/react";
 import React from "react";
 import {Alert, Button, cn} from "@nextui-org/react";
 
-const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
-  (
-    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
-    ref,
-  ) => {
-    const colorClass = React.useMemo(() => {
-      switch (color) {
-        case "default":
-          return "before:bg-default-300";
-        case "primary":
-          return "before:bg-primary";
-        case "secondary":
-          return "before:bg-secondary";
-        case "success":
-          return "before:bg-success";
-        case "warning":
-          return "before:bg-warning";
-        case "danger":
-          return "before:bg-danger";
-        default:
-          return "before:bg-default-200";
-      }
-    }, []);
+const CustomAlert = ({children, variant, color, className, classNames, ...props}: AlertProps) => {
+  const colorClass = React.useMemo(() => {
+    switch (color) {
+      case "default":
+        return "before:bg-default-300";
+      case "primary":
+        return "before:bg-primary";
+      case "secondary":
+        return "before:bg-secondary";
+      case "success":
+        return "before:bg-success";
+      case "warning":
+        return "before:bg-warning";
+      case "danger":
+        return "before:bg-danger";
+      default:
+        return "before:bg-default-200";
+    }
+  }, []);
 
-    return (
-      <Alert
-        ref={ref}
-        classNames={{
-          ...classNames,
-          base: cn(
-            [
-              "bg-default-50 dark:bg-background shadow-sm",
-              "border-1 border-default-200 dark:border-default-100",
-              "relative before:content-[''] before:absolute before:z-10",
-              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
-              "rounded-l-none border-l-0",
-              colorClass,
-            ],
-            classNames?.base,
-            className,
-          ),
-          mainWrapper: cn("pt-1", classNames?.mainWrapper),
-          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
-        }}
-        color={color}
-        title={title}
-        variant={variant}
-        {...props}
-      >
-        {children}
-      </Alert>
-    );
-  },
-);
+  return (
+    <Alert
+      classNames={{
+        ...classNames,
+        base: cn(
+          [
+            "bg-default-50 dark:bg-background shadow-sm",
+            "border-1 border-default-200 dark:border-default-100",
+            "relative before:content-[''] before:absolute before:z-10",
+            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+            "rounded-l-none border-l-0",
+            colorClass,
+          ],
+          classNames?.base,
+          className,
+        ),
+        mainWrapper: cn("pt-1", classNames?.mainWrapper),
+        iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+      }}
+      color={color}
+      variant={variant}
+      {...props}
+    >
+      {children}
+    </Alert>
+  );
+};
 
 CustomAlert.displayName = "CustomAlert";
 
 export default function App() {
-  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"] as any;
 
   return (
     <div className="flex flex-col w-full gap-y-6">
@@ -69,7 +62,7 @@ export default function App() {
         <CustomAlert
           key={color}
           color={color}
-          title="The documents you requested are ready to be viewed"
+          description="The documents you requested are ready to be viewed"
         >
           <div className="flex items-center gap-1 mt-3">
             <Button
diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
index 355ba841b3..4f9816110a 100644
--- a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
+++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
@@ -46,9 +46,12 @@ export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
       // Append new results to existing ones
       setItems((prevItems) => [...prevItems, ...json.results]);
     } catch (error) {
+      // @ts-ignore
       if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
         console.log("Fetch aborted");
       } else {
+        // eslint-disable-next-line no-console
         console.error("There was an error with the fetch operation:", error);
       }
     } finally {
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
index b71890a48f..553ecf6e10 100644
--- a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
+++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
@@ -53,7 +53,7 @@ export default function App() {
   // option is selected from the list box
   const onSelectionChange = (key: React.Key | null) => {
     setFieldState((prevState) => {
-      let selectedItem = prevState.items.find((option) => option.value === key);
+      let selectedItem = prevState.items.find((option) => option.key === key);
 
       return {
         inputValue: selectedItem?.label || "",
diff --git a/apps/docs/content/components/modal/overflow.raw.tsx b/apps/docs/content/components/modal/overflow.raw.tsx
index a3ff752be8..866bd1c396 100644
--- a/apps/docs/content/components/modal/overflow.raw.tsx
+++ b/apps/docs/content/components/modal/overflow.raw.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Modal,
   ModalContent,
@@ -14,7 +15,7 @@ import {
 export default function App() {
   const {isOpen, onOpen, onOpenChange} = useDisclosure();
   const [scrollBehavior, setScrollBehavior] =
-    React.useState < ModalProps["scrollBehavior"] > "inside";
+    React.useState<ModalProps["scrollBehavior"]>("inside");
 
   return (
     <div className="flex flex-col gap-2">
@@ -23,7 +24,7 @@ export default function App() {
         label="Select scroll behavior"
         orientation="horizontal"
         value={scrollBehavior}
-        onValueChange={setScrollBehavior}
+        onValueChange={(v) => setScrollBehavior(v as ModalProps["scrollBehavior"])}
       >
         <Radio value="inside">inside</Radio>
         <Radio value="outside">outside</Radio>
diff --git a/apps/docs/content/components/range-calendar/controlled.raw.tsx b/apps/docs/content/components/range-calendar/controlled.raw.tsx
index 37cdccb0ab..dd4d514223 100644
--- a/apps/docs/content/components/range-calendar/controlled.raw.tsx
+++ b/apps/docs/content/components/range-calendar/controlled.raw.tsx
@@ -6,7 +6,7 @@ import {RangeCalendar} from "@nextui-org/react";
 import {today, getLocalTimeZone} from "@internationalized/date";
 
 export default function App() {
-  let [value, setValue] = React.useState<RangeValue<DateValue>>({
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>({
     start: today(getLocalTimeZone()),
     end: today(getLocalTimeZone()).add({weeks: 1}),
   });
diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.tsx b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx
index 95b9bcf4df..df98335247 100644
--- a/apps/docs/content/components/range-calendar/invalid-date.raw.tsx
+++ b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx
@@ -1,17 +1,18 @@
 import type {DateValue} from "@react-types/calendar";
 import type {RangeValue} from "@react-types/shared";
 
+import React from "react";
 import {RangeCalendar} from "@nextui-org/react";
 import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
 import {useLocale} from "@react-aria/i18n";
 
 export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+  let [date, setDate] = React.useState<RangeValue<DateValue> | null>({
     start: today(getLocalTimeZone()),
     end: today(getLocalTimeZone()).add({weeks: 1}),
   });
   let {locale} = useLocale();
-  let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);
+  let isInvalid = isWeekend(date!.start, locale) || isWeekend(date!.end, locale);
 
   return (
     <RangeCalendar
diff --git a/apps/docs/content/components/range-calendar/presets.raw.tsx b/apps/docs/content/components/range-calendar/presets.raw.tsx
index f1c42cc0e7..51aced67b2 100644
--- a/apps/docs/content/components/range-calendar/presets.raw.tsx
+++ b/apps/docs/content/components/range-calendar/presets.raw.tsx
@@ -14,7 +14,7 @@ import {
 import {useLocale} from "@react-aria/i18n";
 
 export default function App() {
-  let [value, setValue] = React.useState<RangeValue<DateValue>>({
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>({
     start: today(getLocalTimeZone()),
     end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
   });
diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx
index 1353c9b5e2..9d27a59662 100644
--- a/apps/docs/content/components/select/async-loading-items.raw.tsx
+++ b/apps/docs/content/components/select/async-loading-items.raw.tsx
@@ -46,6 +46,7 @@ export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
       // Append new results to existing ones
       setItems((prevItems) => [...prevItems, ...json.results]);
     } catch (error) {
+      // @ts-ignore
       if (error.name === "AbortError") {
         // eslint-disable-next-line no-console
         console.log("Fetch aborted");
diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx
index b46f9def2c..5c2c71f9fb 100644
--- a/apps/docs/content/components/select/custom-render-value.raw.tsx
+++ b/apps/docs/content/components/select/custom-render-value.raw.tsx
@@ -230,14 +230,14 @@ export default function App() {
         return items.map((item) => (
           <div key={item.key} className="flex items-center gap-2">
             <Avatar
-              alt={item.data.name}
+              alt={item.data?.name}
               className="flex-shrink-0"
               size="sm"
-              src={item.data.avatar}
+              src={item.data?.avatar}
             />
             <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
+              <span>{item.data?.name}</span>
+              <span className="text-default-500 text-tiny">({item.data?.email})</span>
             </div>
           </div>
         ));
diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx
index 292a4b8f36..b1521053b4 100644
--- a/apps/docs/content/docs/components/range-calendar.mdx
+++ b/apps/docs/content/docs/components/range-calendar.mdx
@@ -209,8 +209,8 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 | Attribute                 | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default                           |   |
 |---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---|
-| value                     | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | - |
-| defaultValue              | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | - |
+| value                     | `RangeValue`                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | - |
+| defaultValue              | `RangeValue`                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | - |
 | minValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                                 |   |
 | maxValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                                 |   |
 | color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`                         |   |
@@ -243,7 +243,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | Attribute              | Type                            | Description                                                                                                                              |
 | ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | onFocusChange          | `(date: CalendarDate) => void`  | Handler that is called when the focused date changes.                                                                                    |
-| onChange               | `(value: RangeValue>) => void`  | Handler that is called when the value changes.                                                                                           |
+| onChange               | `(value: RangeValue<DateValue> \| null) => void`  | Handler that is called when the value changes.                                                                                           |
 
 #### Supported Calendars
 
diff --git a/apps/docs/package.json b/apps/docs/package.json
index ab21f475d2..c118f6f2fc 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -103,6 +103,8 @@
     "@next/bundle-analyzer": "^13.4.6",
     "@next/env": "^13.4.12",
     "@react-types/shared": "3.25.0",
+    "@react-types/calendar": "3.4.10",
+    "@react-types/datepicker": "3.8.3",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
     "@types/marked": "^5.0.0",
diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx
index 1b916026a3..44f3398531 100644
--- a/packages/components/calendar/stories/range-calendar.stories.tsx
+++ b/packages/components/calendar/stories/range-calendar.stories.tsx
@@ -58,7 +58,7 @@ const ControlledTemplate = (args: RangeCalendarProps) => {
     end: today(getLocalTimeZone()).add({weeks: 1}),
   };
 
-  let [value, setValue] = React.useState<RangeValue<DateValue>>(defaultValue);
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>(defaultValue);
 
   return (
     <div className="flex flex-wrap gap-4">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10d4a352f9..c159a0b711 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -517,6 +517,12 @@ importers:
       '@next/env':
         specifier: ^13.4.12
         version: 13.5.7
+      '@react-types/calendar':
+        specifier: 3.4.10
+        version: 3.4.10(react@18.3.1)
+      '@react-types/datepicker':
+        specifier: 3.8.3
+        version: 3.8.3(react@18.3.1)
       '@react-types/shared':
         specifier: 3.25.0
         version: 3.25.0(react@18.3.1)