Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): typecheck errors #4171

Merged
merged 7 commits into from
Nov 29, 2024
Merged

fix(docs): typecheck errors #4171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d4e3311
fix(docs): remove duplicate import
wingkwong Nov 29, 2024
fa0ebbe
fix(docs): update type for onChange in range-calendar page
wingkwong Nov 29, 2024
bb8c3df
fix(docs): add missing `@react-types/calendar`
wingkwong Nov 29, 2024
c8f5506
fix(docs): broken syntax
wingkwong Nov 29, 2024
34f6a39
fix(docs): typecheck issues
wingkwong Nov 29, 2024
64da403
fix(docs): add missing `@react-types/datepicker`
wingkwong Nov 29, 2024
daad8a8
fix(docs): typecheck issues
wingkwong Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/docs/components/docs/components/codeblock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
103 changes: 48 additions & 55 deletions apps/docs/content/components/alert/custom-styles.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,73 +3,66 @@ 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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about as const ?


return (
<div className="flex flex-col w-full gap-y-6">
{colors.map((color) => (
<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
Expand Down
3 changes: 3 additions & 0 deletions apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || "",
Expand Down
5 changes: 3 additions & 2 deletions apps/docs/content/components/modal/overflow.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from "react";
import {
Modal,
ModalContent,
Expand All @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/range-calendar/controlled.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}),
});
Expand Down
5 changes: 3 additions & 2 deletions apps/docs/content/components/range-calendar/invalid-date.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/range-calendar/presets.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}),
});
Expand Down
1 change: 1 addition & 0 deletions apps/docs/content/components/select/async-loading-items.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/content/components/select/custom-render-value.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
));
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/docs/components/range-calendar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` | |
Expand Down Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions apps/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/calendar/stories/range-calendar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 6 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.