From f4c69292df9216e8c4ed1ea597eec1bc175d3fa1 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Mon, 19 May 2025 17:58:03 -0400 Subject: [PATCH] =?UTF-8?q?do=20react=20types=20more=20better=20too=20?= =?UTF-8?q?=F0=9F=A7=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/notes/page.tsx | 6 ++-- app/zip/page.mdx | 2 +- components/activity-calendar.tsx | 6 ++-- components/code-block.tsx | 9 +++-- components/comments/comment-form.tsx | 3 +- components/copy-button.tsx | 7 ++-- components/image-diff.tsx | 4 +-- components/layout/footer.tsx | 3 +- components/layout/header.tsx | 3 +- components/layout/menu-item.tsx | 23 ++++++------ components/layout/menu.tsx | 53 ++++++++++++++++++---------- components/layout/page-title.tsx | 3 +- components/layout/theme-context.tsx | 3 +- components/layout/theme-toggle.tsx | 15 ++++---- components/link.tsx | 5 ++- components/marquee.tsx | 3 +- components/relative-time.tsx | 3 +- components/third-party/codepen.tsx | 3 +- components/third-party/gist.tsx | 3 +- components/third-party/youtube.tsx | 3 +- components/ui/alert-dialog.tsx | 23 ++++++------ components/ui/aspect-ratio.tsx | 3 +- components/ui/avatar.tsx | 7 ++-- components/ui/badge.tsx | 5 ++- components/ui/button.tsx | 3 +- components/ui/card.tsx | 15 ++++---- components/ui/dropdown-menu.tsx | 31 ++++++++-------- components/ui/input.tsx | 3 +- components/ui/label.tsx | 3 +- components/ui/popover.tsx | 9 +++-- components/ui/scroll-area.tsx | 9 +++-- components/ui/separator.tsx | 3 +- components/ui/skeleton.tsx | 3 +- components/ui/textarea.tsx | 3 +- components/ui/tooltip.tsx | 12 +++---- components/video.tsx | 3 +- lib/build-feed.ts | 3 +- lib/config/menu.ts | 30 ---------------- lib/metadata.ts | 1 - mdx-components.tsx | 2 -- notes/tailwind-hater/index.mdx | 4 +-- 41 files changed, 141 insertions(+), 194 deletions(-) delete mode 100644 lib/config/menu.ts diff --git a/app/notes/page.tsx b/app/notes/page.tsx index d3e19289..24f9f989 100644 --- a/app/notes/page.tsx +++ b/app/notes/page.tsx @@ -1,13 +1,11 @@ import { env } from "@/lib/env"; import { EyeIcon } from "lucide-react"; import Link from "@/components/link"; -import { getFrontMatter, POSTS_DIR } from "@/lib/posts"; +import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts"; import { createMetadata } from "@/lib/metadata"; import { formatDate, formatDateISO } from "@/lib/date"; import authorConfig from "@/lib/config/author"; import { getViews } from "@/lib/views"; -import type { ReactElement } from "react"; -import type { FrontMatter } from "@/lib/posts"; export const revalidate = 300; // 5 minutes @@ -33,7 +31,7 @@ const Page = async () => { }); }); - const sections: ReactElement[] = []; + const sections: React.ReactNode[] = []; Object.entries(postsByYear).forEach(([year, posts]) => { sections.push( diff --git a/app/zip/page.mdx b/app/zip/page.mdx index 67aa6a6c..610b8d52 100644 --- a/app/zip/page.mdx +++ b/app/zip/page.mdx @@ -16,7 +16,7 @@ export const Terminal = () => ( backgroundImage: `url(${backgroundImg.src})`, }} > - + sundar@google: ~$ mv /root diff --git a/components/activity-calendar.tsx b/components/activity-calendar.tsx index 55974a4c..305d148c 100644 --- a/components/activity-calendar.tsx +++ b/components/activity-calendar.tsx @@ -1,9 +1,7 @@ "use client"; -import { ActivityCalendar } from "react-activity-calendar"; +import { ActivityCalendar, type Activity } from "react-activity-calendar"; import { formatDate } from "@/lib/date"; -import type { ComponentPropsWithoutRef } from "react"; -import type { Activity } from "react-activity-calendar"; import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; @@ -12,7 +10,7 @@ const Calendar = ({ noun = "thing", className, ...rest -}: ComponentPropsWithoutRef<"div"> & { +}: React.ComponentProps<"div"> & { data: Activity[]; noun?: string; }) => { diff --git a/components/code-block.tsx b/components/code-block.tsx index 7aaa3580..a2cafca3 100644 --- a/components/code-block.tsx +++ b/components/code-block.tsx @@ -3,7 +3,6 @@ import reactToText from "react-to-text"; import { CodeIcon, TerminalIcon } from "lucide-react"; import CopyButton from "@/components/copy-button"; import { cn } from "@/lib/utils"; -import type { ComponentProps, ComponentPropsWithoutRef } from "react"; const CodeBlock = async ({ showLineNumbers = false, @@ -11,7 +10,7 @@ const CodeBlock = async ({ className, children, ...rest -}: ComponentPropsWithoutRef<"pre"> & { +}: React.ComponentProps<"pre"> & { showLineNumbers?: boolean; showCopyButton?: boolean; }) => { @@ -24,7 +23,7 @@ const CodeBlock = async ({ ); } - const codeProps = children.props as ComponentProps<"code">; + const codeProps = children.props as React.ComponentProps<"code">; const codeString = reactToText(codeProps.children).trim(); // the language set in the markdown is passed as a className @@ -51,7 +50,7 @@ const CodeBlock = async ({ dangerouslySetInnerHTML={{ __html: codeHighlighted }} /> {lang && ( - + {["sh", "bash", "zsh"].includes(lang) ? ( <> @@ -68,7 +67,7 @@ const CodeBlock = async ({ {showCopyButton && ( )} diff --git a/components/comments/comment-form.tsx b/components/comments/comment-form.tsx index 77063115..df869def 100644 --- a/components/comments/comment-form.tsx +++ b/components/comments/comment-form.tsx @@ -12,7 +12,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover import { MarkdownIcon } from "@/components/icons"; import { useSession } from "@/lib/auth-client"; import { createComment, updateComment } from "@/lib/server/comments"; -import type { FormEvent } from "react"; const CommentForm = ({ slug, @@ -36,7 +35,7 @@ const CommentForm = ({ const { data: session } = useSession(); - const handleSubmit = (e: FormEvent) => { + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!content.trim()) { diff --git a/components/copy-button.tsx b/components/copy-button.tsx index 786d8cc5..ed6b2127 100644 --- a/components/copy-button.tsx +++ b/components/copy-button.tsx @@ -4,7 +4,6 @@ import { forwardRef, useState, useEffect } from "react"; import copy from "copy-to-clipboard"; import { ClipboardIcon, CheckIcon } from "lucide-react"; import { cn } from "@/lib/utils"; -import type { Ref, ComponentPropsWithoutRef, ComponentRef, MouseEventHandler } from "react"; const CopyButton = ( { @@ -12,15 +11,15 @@ const CopyButton = ( timeout = 2000, className, ...rest - }: ComponentPropsWithoutRef<"button"> & { + }: React.ComponentProps<"button"> & { source: string; timeout?: number; }, - ref: Ref> + ref: React.Ref> ) => { const [copied, setCopied] = useState(false); - const handleCopy: MouseEventHandler> = (e) => { + const handleCopy: React.MouseEventHandler> = (e) => { // prevent unintentional double-clicks by unfocusing button e.currentTarget.blur(); diff --git a/components/image-diff.tsx b/components/image-diff.tsx index 6bdec4cd..b16acf53 100644 --- a/components/image-diff.tsx +++ b/components/image-diff.tsx @@ -1,12 +1,12 @@ /* eslint-disable jsx-a11y/alt-text, @next/next/no-img-element */ "use client"; -import { ReactElement, Children, useState, useRef, useEffect } from "react"; +import { useState, useRef, useEffect, Children } from "react"; import { getImageProps } from "next/image"; import { cn } from "@/lib/utils"; import { ChevronsLeftRightIcon } from "lucide-react"; -const ImageDiff = ({ children, className }: { children: ReactElement[]; className?: string }) => { +const ImageDiff = ({ children, className }: { children: React.ReactElement[]; className?: string }) => { const containerRef = useRef(null); const [sliderPosition, setSliderPosition] = useState(50); const [isDragging, setIsDragging] = useState(false); diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index aa49ac20..64dc73c9 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -4,9 +4,8 @@ import Link from "@/components/link"; import { NextjsIcon } from "@/components/icons"; import { cn } from "@/lib/utils"; import siteConfig from "@/lib/config/site"; -import type { ComponentPropsWithoutRef } from "react"; -const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => { +const Footer = ({ className, ...rest }: React.ComponentProps<"footer">) => { return (