refactor: remove import * as React from 'react' statements

src/components/dashboard/dashboard-header.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 export function DashboardHeader() {
   return (
     <header className="flex items-center px-6 h-[60px] border-b border-chungking-grey-100 dark:border-chungking-grey-900">

src/components/dashboard/dashboard-root.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { type PropsWithChildren } from 'react';
 
-export function DashboardRoot({ children }: React.PropsWithChildren) {
+export function DashboardRoot({ children }: PropsWithChildren) {
   return (
     <main className="flex flex-col w-full h-full min-h-screen overflow-hidden bg-chungking-white text-chungking-black dark:bg-chungking-black dark:text-chungking-white">
       {children}

src/components/dashboard/dashboard-sidebar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Home } from 'react-feather';
 
 export function DashboardSidebar() {

src/components/dashboard/page/dashboard-page-content.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { type PropsWithChildren } from 'react';
 
-export function DashboardPageContent({ children }: React.PropsWithChildren) {
+export function DashboardPageContent({ children }: PropsWithChildren) {
   return (
     <section className="flex-auto pt-6 px-6 pb-8">
       <div className="mx-auto w-full max-w-5xl">{children}</div>

src/components/dashboard/page/dashboard-page-header.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react';
-
 export interface DashboardPageHeaderProps {
   title: string;
   subtitle?: string;
 }
 
-export const DashboardPageHeader: React.FC<DashboardPageHeaderProps> = ({ title, subtitle }) => {
+export function DashboardPageHeader({ title, subtitle }: DashboardPageHeaderProps) {
   return (
     <header className="pt-6 px-6 pb-4 border-b border-chungking-grey-100 dark:border-chungking-grey-900">
       <div className="mx-auto w-full max-w-5xl">
@@ -14,6 +12,4 @@ export const DashboardPageHeader: React.FC<DashboardPageHeaderProps> = ({ title,
       </div>
     </header>
   );
-};
-
-export default DashboardPageHeader;
+}

src/components/dashboard/section/dashboard-section-header.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { type PropsWithChildren } from 'react';
 
-export function DashboardSectionHeader({ children }: React.PropsWithChildren) {
+export function DashboardSectionHeader({ children }: PropsWithChildren) {
   return <h2 className="text-3xl font-semibold">{children}</h2>;
 }

src/components/dashboard/section/dashboard-section.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { type PropsWithChildren } from 'react';
 
-export function DashboardSection({ children }: React.PropsWithChildren) {
+export function DashboardSection({ children }: PropsWithChildren) {
   return <div className="space-y-6">{children}</div>;
 }

src/components/info-item-card/info-item-card.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
-import * as React from 'react';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 
-export interface InfoItemCardProps extends React.ComponentPropsWithoutRef<'section'> {
+export interface InfoItemCardProps extends ComponentPropsWithoutRef<'section'> {
   title?: string;
   content: string;
 }
 
-export const InfoItemCard = React.forwardRef<HTMLElement, InfoItemCardProps>(
+export const InfoItemCard = forwardRef<HTMLElement, InfoItemCardProps>(
   ({ title, content, className, ...rest }, ref) => {
     return (
       <section

src/components/link-list/link-list-item.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import * as React from 'react';
 
 export interface LinkListItemProps {
   title: string;

src/components/link-list/link-list.tsx

@@ -1,17 +1,15 @@
-import * as React from 'react';
-
 import { LinkListItem, LinkListItemProps } from './link-list-item';
 
 export interface LinkListProps {
   items: LinkListItemProps[];
 }
 
-export const LinkList: React.FC<LinkListProps> = ({ items }) => {
+export function LinkList({ items }: LinkListProps) {
   return (
     <ul className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {items.map(({ title, url }) => (
         <LinkListItem key={url} title={title} url={url} />
       ))}
     </ul>
   );
-};
+}

src/layouts/dashbard-layout.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-
-import * as React from 'react';
 import { DashboardHeader, DashboardRoot } from '~/components/dashboard';
 
 export function DashboardLayout({ children }: React.PropsWithChildren) {

src/layouts/overlay-layout.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { type PropsWithChildren } from 'react';
 import { GoogleFontsPrefetch } from '~/modules/webfonts/google-fonts-prefetch';
 
-export function OverlayLayout({ children }: React.PropsWithChildren) {
+export function OverlayLayout({ children }: PropsWithChildren) {
   return (
     <>
       <GoogleFontsPrefetch />

src/modules/alert-manager/alert-toast.tsx

@@ -2,7 +2,14 @@
 
 import { Transition } from '@headlessui/react';
 import clsx from 'clsx';
-import * as React from 'react';
+import {
+  ComponentPropsWithoutRef,
+  createElement,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   IconBits,
   IconExclamationMark,
@@ -14,7 +21,7 @@ import {
 import alertsAudio from '~/lib/data/alerts-audio';
 import { AlertEventTypes } from '.';
 
-interface AlertToastProps extends React.ComponentPropsWithoutRef<'div'> {
+interface AlertToastProps extends ComponentPropsWithoutRef<'div'> {
   title: string;
   recipient?: string;
   amount?: string;
@@ -51,15 +58,15 @@ function alertToastVariants(variant?: AlertEventTypes) {
   }
 }
 
-export const AlertToast = React.forwardRef<HTMLDivElement, AlertToastProps>(
+export const AlertToast = forwardRef<HTMLDivElement, AlertToastProps>(
   ({ title, recipient, amount, variant = 'follow', content, ...rest }, ref) => {
-    const [isMounted, setIsMounted] = React.useState(false);
-    const audio = React.useMemo(
+    const [isMounted, setIsMounted] = useState(false);
+    const audio = useMemo(
       () => (alertsAudio[variant]?.src ? new Audio(alertsAudio[variant]?.src) : undefined),
       [variant],
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       void audio?.play();
 
       const timeout = setTimeout(() => {
@@ -71,7 +78,7 @@ export const AlertToast = React.forwardRef<HTMLDivElement, AlertToastProps>(
       };
     }, [audio]);
 
-    const currentVariant = React.useMemo(() => alertToastVariants(variant), [variant]);
+    const currentVariant = useMemo(() => alertToastVariants(variant), [variant]);
 
     return (
       <div className={clsx('relative w-full h-[62px]', currentVariant.colors)} ref={ref} {...rest}>
@@ -82,7 +89,7 @@ export const AlertToast = React.forwardRef<HTMLDivElement, AlertToastProps>(
           )}
         >
           <div className="flex items-center flex-shrink-0 h-[40px] space-x-4 pr-4">
-            {React.createElement(currentVariant.icon, {
+            {createElement(currentVariant.icon, {
               className: 'inline-flex w-6 h-6 rounded-full',
               'aria-hidden': true,
             })}

src/modules/alert-manager/alert-wrapper.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Transition } from '@headlessui/react';
 import { AlertSettings } from './types';
 
@@ -15,10 +15,10 @@ export function AlertWrapper({
   onRemove,
   dismissAfter = 5000,
 }: AlertWrapperProps) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const closeTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const closeTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsOpen(true);
 
     closeTimerRef.current = setTimeout(() => {

src/modules/alerts/streamelements-alerts.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react';
 import { nanoid } from 'nanoid';
+import { useEffect, useState } from 'react';
 import {
   allowedEventListeners,
   allowedTestEventListeners,
@@ -19,9 +19,9 @@ const dismissAfter = DEFAULT_DISMISS_DURATION;
 type ProdOrTestEvent = StreamElementsEvent | StreamElementsTestEvent;
 
 export function StreamElementsAlerts() {
-  const [events, setEvents] = React.useState<ProdOrTestEvent[]>([]);
-  const [stale, setStale] = React.useState(false);
-  const [current, setCurrent] = React.useState<ProdOrTestEvent | undefined>(undefined);
+  const [events, setEvents] = useState<ProdOrTestEvent[]>([]);
+  const [stale, setStale] = useState(false);
+  const [current, setCurrent] = useState<ProdOrTestEvent | undefined>(undefined);
 
   const addEvents = (eventData: ProdOrTestEvent) => {
     setEvents(prev => [eventData, ...prev]);
@@ -63,7 +63,7 @@ export function StreamElementsAlerts() {
     },
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     console.log('[Alerts] current event:', current);
     console.log('[Alerts] stale?', stale);
 
@@ -90,7 +90,7 @@ export function StreamElementsAlerts() {
     }
   }, [current, stale]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const [recent] = events;
     console.log('[Alerts] events.length', events.length);
     console.log('[Alerts] events', events);

src/modules/alerts/streamlabs-alerts.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 /* eslint-disable no-underscore-dangle */
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { useStreamlabsSocket, StreamlabsEvent } from '~/lib/streamlabs';
 import { alert, AlertToast, DEFAULT_DISMISS_DURATION } from '../alert-manager';
 
 const dismissAfter = DEFAULT_DISMISS_DURATION;
 
 export function StreamlabsAlerts() {
-  const [events, setEvents] = React.useState<StreamlabsEvent[]>([]);
-  const [stale, setStale] = React.useState(false);
-  const [current, setCurrent] = React.useState<StreamlabsEvent | undefined>(undefined);
+  const [events, setEvents] = useState<StreamlabsEvent[]>([]);
+  const [stale, setStale] = useState(false);
+  const [current, setCurrent] = useState<StreamlabsEvent | undefined>(undefined);
 
   const addEvents = (eventData: StreamlabsEvent) => {
     setEvents(prev => [eventData, ...prev]);
@@ -30,7 +30,7 @@ export function StreamlabsAlerts() {
     }
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     console.log('[Alerts] current event:', current);
     console.log('[Alerts] stale?', stale);
 
@@ -170,7 +170,7 @@ export function StreamlabsAlerts() {
     }
   }, [current, stale, setEvents]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const [recent] = events;
     console.log('[StreamlabsAlerts] events.length', events.length);
     console.log('[StreamlabsAlerts] events', events);

src/modules/alerts/utils/handle-test-toast.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StreamElementsTestEvent } from '~/lib/streamelements';
 import { alert, AlertToast, DEFAULT_DISMISS_DURATION } from '~/modules/alert-manager';
 

src/modules/alerts/utils/handle-toast.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { StreamElementsEvent } from '~/lib/streamelements';
 import { alert, AlertToast, DEFAULT_DISMISS_DURATION } from '~/modules/alert-manager';
 

src/modules/bottom-bar/bottom-bar-clock.tsx

@@ -3,7 +3,7 @@
 import { createStyleObject } from '@capsizecss/core';
 import fontMetrics from '@capsizecss/metrics/inter';
 import { format } from 'date-fns';
-import * as React from 'react';
+import { useState } from 'react';
 import { useClock } from '~/lib/hooks/use-clock';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 
@@ -15,7 +15,7 @@ const styles = createStyleObject({
 
 export function BottomBarClock() {
   const time = useClock();
-  const [mounted, setMounted] = React.useState<boolean>(false);
+  const [mounted, setMounted] = useState<boolean>(false);
 
   useOnMount(() => {
     setMounted(true);

src/modules/bottom-bar/bottom-bar-event-box.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
 import clsx from 'clsx';
+import { SVGProps, createElement } from 'react';
 
 interface BottomBarEventBoxProps {
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>;
 }
 
 export function BottomBarEventBox({ icon }: BottomBarEventBoxProps) {
   return (
     <div className={clsx('flex flex-auto items-center h-6 pr-3')}>
-      {React.createElement(icon, { className: 'h-6 w-6' })}
+      {createElement(icon, { className: 'h-6 w-6' })}
       <div className="flex-auto ml-2 h-6" />
     </div>
   );

src/modules/bottom-bar/bottom-bar-events.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IconChart, IconDollarSign, IconStar } from '~/components/icons';
 import { BottomBarEventBox } from './bottom-bar-event-box';
 

src/modules/bottom-bar/bottom-bar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BottomBarEvents } from './bottom-bar-events';
 import { BottomBarClock } from './bottom-bar-clock';
 

src/modules/deep-dip/dd2-logo.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { SVGProps } from 'react';
 
-export function DD2Logo({ width, height, fill = '#fff', ...rest }: React.SVGProps<SVGSVGElement>) {
+export function DD2Logo({ width, height, fill = '#fff', ...rest }: SVGProps<SVGSVGElement>) {
   return (
     <svg
       width={width}

src/modules/deep-dip/leaderboard.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import * as React from 'react';
 import clsx from 'clsx';
 import { useCurrentProgress, useGlobalLeaderboard } from '../pre-stream/utils/deep-dip';
 import { ResultBlock, ResultBlockDivider, ResultBlockFallback } from './result-block';

src/modules/deep-dip/result-block.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { LeaderboardResult } from '~/server/modules/deepdip/get-global-leaderboard';
 
 export interface ResultBlockProps {

src/modules/flightsim/flight-itinerary.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
 import { InfoItemCard } from '~/components/info-item-card';
 
 export interface FlightItineraryProps {
   origin: string;
   destination: string;
 }
 
-export const FlightItinerary: React.FC<FlightItineraryProps> = ({ origin, destination }) => {
+export function FlightItinerary({ origin, destination }: FlightItineraryProps) {
   return <InfoItemCard content={`${origin} -> ${destination}`} />;
-};
+}

src/modules/flightsim/flight-progress.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
 import clsx from 'clsx';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
 
-export const FlightProgress = React.forwardRef<
-  HTMLProgressElement,
-  React.ComponentPropsWithoutRef<'progress'>
->(({ className, ...rest }, ref) => {
-  return <progress ref={ref} className={clsx('flight-progress', className)} {...rest} />;
-});
+export const FlightProgress = forwardRef<HTMLProgressElement, ComponentPropsWithoutRef<'progress'>>(
+  ({ className, ...rest }, ref) => {
+    return <progress ref={ref} className={clsx('flight-progress', className)} {...rest} />;
+  },
+);
 
 FlightProgress.displayName = 'FlightProgress';