fix(ssr): jsx transformer error

Signed-off-by: Innei <tukon479@gmail.com>

apps/ssr/client/App.tsx

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Outlet } from "react-router"
 
 import { RootProviders } from "./providers/root-providers"

apps/ssr/client/components/common/404.tsx

@@ -5,6 +5,7 @@ import { Button } from "@follow/components/ui/button/index.jsx"
 import { useSyncThemeWebApp, useTitle } from "@follow/hooks"
 import { m, useAnimationControls } from "motion/react"
 import { Fragment, useEffect, useState } from "react"
+import * as React from "react"
 
 const NotFoundContent = () => {
   const [glitchText, setGlitchText] = useState("404")

apps/ssr/client/components/common/PoweredByFooter.tsx

@@ -1,5 +1,6 @@
 import { SocialMediaLinks } from "@follow/constants"
 import { cn } from "@follow/utils/utils"
+import * as React from "react"
 
 export const PoweredByFooter: Component = ({ className }) => (
   <footer className={cn("border-border/40 bg-background/60 border-t backdrop-blur-sm", className)}>

apps/ssr/client/components/items/grid.tsx

@@ -3,6 +3,7 @@ import { TitleMarquee } from "@follow/components/ui/marquee/index.jsx"
 import type { ParsedEntry } from "@follow-app/client-sdk"
 import dayjs from "dayjs"
 import type { FC } from "react"
+import * as React from "react"
 
 import { FeedIcon } from "../ui/feed-icon"
 import { LazyImage } from "../ui/image"

apps/ssr/client/components/items/index.tsx

@@ -6,6 +6,7 @@ import { FeedViewType } from "@follow/constants"
 import type { ParsedEntry } from "@follow-app/client-sdk"
 import type { FC } from "react"
 import { useMemo } from "react"
+import * as React from "react"
 
 const viewsRenderType = {
   Normal: [

apps/ssr/client/components/items/normal.tsx

@@ -3,6 +3,7 @@ import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typogra
 import { cn } from "@follow/utils/utils"
 import type { FeedSchema, ParsedEntry } from "@follow-app/client-sdk"
 import { memo } from "react"
+import * as React from "react"
 
 import { FeedIcon } from "../ui/feed-icon"
 import { LazyImage } from "../ui/image"

apps/ssr/client/components/items/picture.tsx

@@ -21,6 +21,7 @@ import type { RenderComponentProps } from "masonic"
 import { AnimatePresence, m } from "motion/react"
 import type { FC, PropsWithChildren } from "react"
 import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+import * as React from "react"
 import { PhotoProvider, PhotoView } from "react-photo-view"
 import inlineStyle from "react-photo-view/dist/react-photo-view.css?raw"
 

apps/ssr/client/components/ui/feed-certification.tsx

@@ -8,6 +8,7 @@ import {
 } from "@follow/components/ui/tooltip/index.jsx"
 import { cn } from "@follow/utils/utils"
 import type { FeedSchema } from "@follow-app/client-sdk"
+import * as React from "react"
 import { useTranslation } from "react-i18next"
 
 export const FeedCertification = ({

apps/ssr/client/components/ui/feed-icon.tsx

@@ -8,6 +8,7 @@ import type { MediaModel } from "@folo-services/drizzle"
 import { m } from "motion/react"
 import type { ReactNode } from "react"
 import { useMemo } from "react"
+import * as React from "react"
 
 const getFeedIconSrc = ({
   src,

apps/ssr/client/components/ui/image.tsx

@@ -3,6 +3,7 @@ import { cn } from "@follow/utils/utils"
 import * as Avatar from "@radix-ui/react-avatar"
 import type { MouseEvent, PropsWithChildren } from "react"
 import { useMemo } from "react"
+import * as React from "react"
 import { Blurhash } from "react-blurhash"
 
 type LazyImageProps = PropsWithChildren<{

apps/ssr/client/components/ui/user-avatar.tsx

@@ -4,6 +4,7 @@ import { UserRole } from "@follow/constants"
 import { getBackgroundGradient } from "@follow/utils/color"
 import { cn } from "@follow/utils/utils"
 import { useMemo } from "react"
+import * as React from "react"
 
 export const UserAvatar = ({ className }: { className?: string }) => {
   let user = useWhoami()

apps/ssr/client/modules/login/index.tsx

@@ -24,6 +24,7 @@ import { cn } from "@follow/utils/utils"
 import HCaptcha from "@hcaptcha/react-hcaptcha"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import * as React from "react"
 import { useForm } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 import { Link, useLocation, useNavigate } from "react-router"

apps/ssr/client/modules/referral/index.tsx

@@ -15,6 +15,7 @@ import { cn } from "@follow/utils/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery } from "@tanstack/react-query"
 import { useEffect } from "react"
+import * as React from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"

apps/ssr/client/pages/(login)/forget-password.tsx

@@ -21,6 +21,7 @@ import HCaptcha from "@hcaptcha/react-hcaptcha"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
 import { useRef } from "react"
+import * as React from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router"

apps/ssr/client/pages/(login)/layout.tsx

@@ -3,6 +3,7 @@ import { setIntegrationIdentify } from "@client/initialize/helper"
 import { useSession } from "@client/query/auth"
 import type { AuthUser } from "@follow-app/client-sdk"
 import { useEffect } from "react"
+import * as React from "react"
 import { Outlet } from "react-router"
 
 export function Component() {

apps/ssr/client/pages/(login)/login/index.tsx

@@ -1,4 +1,5 @@
 import { Login } from "@client/modules/login"
+import * as React from "react"
 
 export function Component() {
   return <Login />

apps/ssr/client/pages/(login)/register.tsx

@@ -21,6 +21,7 @@ import { cn } from "@follow/utils/utils"
 import HCaptcha from "@hcaptcha/react-hcaptcha"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRef, useState } from "react"
+import * as React from "react"
 import { useForm } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 import { useNavigate } from "react-router"

apps/ssr/client/pages/(login)/reset-password.tsx

@@ -18,6 +18,7 @@ import {
 import { Input } from "@follow/components/ui/input/index.js"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
+import * as React from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router"

apps/ssr/client/pages/(main)/index.tsx

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 export const Component = () => {
   return <div>(*‘ v`*) Hello, Folo</div>
 }

apps/ssr/client/pages/(main)/layout.tsx

@@ -1,4 +1,5 @@
 import { NotFound } from "@client/components/common/404"
+import * as React from "react"
 import { Outlet } from "react-router"
 
 export const Component = () => {

apps/ssr/client/pages/(main)/share/feeds/[id]/index.tsx

@@ -11,6 +11,7 @@ import { useTitle } from "@follow/hooks"
 import { cn } from "@follow/utils/utils"
 import type { FeedSchema } from "@follow-app/client-sdk"
 import { Fragment } from "react"
+import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { useParams, useSearchParams } from "react-router"
 

apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx

@@ -11,6 +11,7 @@ import { useTitle } from "@follow/hooks"
 import { cn, formatNumber } from "@follow/utils/utils"
 import type { FeedSchema } from "@follow-app/client-sdk"
 import { Fragment, memo } from "react"
+import * as React from "react"
 import { useTranslation } from "react-i18next"
 import { useParams } from "react-router"
 

apps/ssr/client/pages/(main)/share/users/[id]/index.tsx

@@ -10,6 +10,7 @@ import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import { useTitle } from "@follow/hooks"
 import { cn } from "@follow/utils/utils"
 import type { SubscriptionWithFeed, UserProfile } from "@follow-app/client-sdk"
+import * as React from "react"
 import { Fragment, memo, useState } from "react"
 import { useParams } from "react-router"
 

apps/ssr/client/pages/layout.tsx

@@ -1,6 +1,7 @@
 import { PoweredByFooter } from "@client/components/common/PoweredByFooter"
 import { Header } from "@client/components/layout/header"
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.jsx"
+import * as React from "react"
 import { Outlet } from "react-router"
 
 export const Component = () => {

apps/ssr/client/providers/root-providers.tsx

@@ -7,6 +7,7 @@ import { QueryClientProvider } from "@tanstack/react-query"
 import { Provider } from "jotai"
 import { ModalStackContainer } from "rc-modal-sheet/m"
 import type { FC, PropsWithChildren } from "react"
+import * as React from "react"
 
 import { queryClient } from "../lib/query-client"
 import { jotaiStore } from "../lib/store"

apps/ssr/client/router.tsx

@@ -1,4 +1,5 @@
 import { wrapCreateBrowserRouterV7 } from "@sentry/react"
+import * as React from "react"
 import { createBrowserRouter, createHashRouter } from "react-router"
 
 import { NotFound } from "./components/common/404"

packages/internal/components/src/common/MemoedDangerousHTMLStyle.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react"
 import { memo, useMemo } from "react"
+import * as React from "react"
 
 export const MemoedDangerousHTMLStyle: FC<
   {

packages/internal/components/src/common/MotionProvider.tsx

@@ -1,4 +1,5 @@
 import { domMax, LazyMotion, MotionConfig } from "motion/react"
+import * as React from "react"
 
 export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
   return (

packages/internal/components/src/icons/follow.tsx

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 export const FollowIcon: Component = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
     <path

packages/internal/components/src/icons/folo.tsx

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 export const Folo = ({
   ref,
   ...props

packages/internal/components/src/icons/logo.tsx

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 export const Logo = ({
   ref,
   ...props

packages/internal/components/src/ui/datetime/index.tsx

@@ -1,6 +1,7 @@
 import { stopPropagation } from "@follow/utils/dom"
 import dayjs from "dayjs"
 import type { FC } from "react"
+import * as React from "react"
 import { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 

packages/internal/components/src/ui/divider/Divider.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@follow/utils/utils"
 import type { DetailedHTMLProps, FC, HTMLAttributes } from "react"
+import * as React from "react"
 
 export const Divider: FC<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>> = (
   props,

packages/internal/components/src/ui/input/DateTimePicker.tsx

@@ -2,6 +2,7 @@ import { cn } from "@follow/utils/utils"
 import { useDatePicker } from "@rehookify/datepicker"
 import dayjs from "dayjs"
 import { memo, useMemo, useState } from "react"
+import * as React from "react"
 
 import { Button } from "../button"
 import { Popover, PopoverContent, PopoverTrigger } from "../popover"

packages/internal/components/src/ui/input/Input.tsx

@@ -2,7 +2,7 @@ import { useInputComposition } from "@follow/hooks"
 import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import type { DetailedHTMLProps, InputHTMLAttributes } from "react"
-
+import * as React from "react"
 // This composition handler is not perfect
 // @see https://foxact.skk.moe/use-composition-input
 export const Input = ({

packages/internal/components/src/ui/input/InputV2.tsx

@@ -2,6 +2,7 @@ import { useInputComposition } from "@follow/hooks"
 import { cn, stopPropagation } from "@follow/utils"
 import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react"
 import { useState } from "react"
+import * as React from "react"
 
 export const InputV2 = ({
   ref,

packages/internal/components/src/ui/input/TextArea.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx"
 import { useMotionValue } from "motion/react"
 import type { DetailedHTMLProps, PropsWithChildren, TextareaHTMLAttributes } from "react"
 import { useCallback, useState } from "react"
+import * as React from "react"
 
 const roundedMap = {
   sm: "rounded-sm",

packages/internal/components/src/ui/input/TimeSelect.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@follow/utils/utils"
 import { memo, useMemo } from "react"
+import * as React from "react"
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
 

packages/internal/components/src/ui/marquee/index.tsx

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from "react"
+import * as React from "react"
 import { useCallback, useRef, useState } from "react"
 import type { MarqueeProps } from "react-fast-marquee"
 import Marquee from "react-fast-marquee"

packages/internal/components/src/ui/platform-icon/index.tsx

@@ -2,6 +2,7 @@ import * as LinkParsers from "@follow/utils/link-parser"
 import { cn } from "@follow/utils/utils"
 import { Slot } from "@radix-ui/react-slot"
 import type { FC } from "react"
+import * as React from "react"
 
 import { getSupportedPlatformIconName } from "./utils"
 

packages/internal/components/src/ui/toast/index.tsx

@@ -1,4 +1,5 @@
 import { useIsDark } from "@follow/hooks"
+import * as React from "react"
 import { Toaster as Sonner } from "sonner"
 
 import { ZIndexProvider } from "../z-index"

packages/internal/components/src/ui/typography/EllipsisWithTooltip.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@follow/utils/utils"
 import type { PropsWithChildren } from "react"
+import * as React from "react"
 import { useEffect, useState } from "react"
 
 import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "../tooltip"

packages/internal/components/src/ui/z-index/index.tsx

@@ -1,3 +1,5 @@
+import * as React from "react"
+
 import { ZIndexContext } from "./ctx"
 
 export const ZIndexProvider: Component<{