refactor: clean up useClient (#23280)

Move useClients to the actual file instead of index files, so that (a) we don't
ship unnecessary client-side code and (b) we don't get the "can't dot into
client component from server" error when trying to use MDX in RSCs.

packages/ui/index.tsx

@@ -1,7 +1,3 @@
-'use client'
-
-import * as React from 'react'
-
 // Markdown components
 
 export * from './src/lib/Markdown'

packages/ui/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as RadixAccordion from '@radix-ui/react-accordion'
 import React, { createContext, useContext, useState } from 'react'
 

packages/ui/src/components/Alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { IconAlertTriangle } from '../Icon/icons/IconAlertTriangle'
 

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'

packages/ui/src/components/CodeBlock/CodeBlock.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Check, Copy } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Children, ReactNode, useState } from 'react'

packages/ui/src/components/Collapsible/Collapsible.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as RadixCollapsible from '@radix-ui/react-collapsible'
 import React from 'react'
 import styleHandler from '../../lib/theme/styleHandler'

packages/ui/src/components/ContextMenu/index.tsx

@@ -1 +1,3 @@
+'use client'
+
 export { default as ContextMenu } from './ContextMenu'

packages/ui/src/components/CustomHTMLElements/Heading.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   getAnchor,
   removeAnchor,

packages/ui/src/components/Form/Form.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useReducer } from 'react'
 import { useFormik, FormikConfig } from 'formik'
 import { FormContextProvider } from './FormContext'

packages/ui/src/components/Icon/Icon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { IconContext } from './IconContext'
 

packages/ui/src/components/Icon/IconBase.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import styleHandler from '../../lib/theme/styleHandler'

packages/ui/src/components/Icon/IconContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createContext } from 'react'
 
 import { SizeVariantProps } from '../../lib/commonCva'

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

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'

packages/ui/src/components/InputNumber/InputNumber.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect } from 'react'
 
 // import { IconChevronDown } from '../Icon/icons/IconChevronDown'

packages/ui/src/components/Listbox/Listbox2.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { flatten } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'

packages/ui/src/components/Menu/Menu.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import styleHandler from '../../lib/theme/styleHandler'
 import { cn } from '../../lib/utils/cn'

packages/ui/src/components/Popover/Popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import type * as RadixPopoverTypes from '@radix-ui/react-popover'
 import * as RadixPopover from '@radix-ui/react-popover'
 import * as React from 'react'

packages/ui/src/components/PromoToast/PromoToast.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'

packages/ui/src/components/Radio/Radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'

packages/ui/src/components/Select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect } from 'react'
 
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'

packages/ui/src/components/SidePanel/SidePanel.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as Dialog from '@radix-ui/react-dialog'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import React from 'react'

packages/ui/src/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { Children, useMemo, useState, type KeyboardEvent, type PropsWithChildren } from 'react'
 import styleHandler from '../../lib/theme/styleHandler'

packages/ui/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createContext } from 'react'
 
 import defaultTheme from '../../lib/theme/defaultTheme'

packages/ui/src/components/Toggle/Toggle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
 

packages/ui/src/components/Upload/Upload.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout'
 // @ts-ignore

packages/ui/src/components/Upload/index.tsx

@@ -1,6 +1,3 @@
-
 import Upload from './Upload'
 export default Upload
 export { default as Upload } from './Upload'
-
-

packages/ui/src/components/shadcn/ui/accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDown } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/shadcn/ui/collapsible.tsx

@@ -1,6 +1,6 @@
-"use client"
+'use client'
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
 const Collapsible = CollapsiblePrimitive.Root
 

packages/ui/src/components/shadcn/ui/command.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { DialogProps } from '@radix-ui/react-dialog'
 import { Command as CommandPrimitive } from 'cmdk'
 import { Search } from 'lucide-react'

packages/ui/src/components/shadcn/ui/dropdown-menu.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/shadcn/ui/form.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'

packages/ui/src/components/shadcn/ui/popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
 

packages/ui/src/components/shadcn/ui/toast.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as ToastPrimitives from '@radix-ui/react-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { X } from 'lucide-react'

packages/ui/src/components/shadcn/ui/use-toast.ts

@@ -1,3 +1,5 @@
+'use client'
+
 // Inspired by react-hot-toast library
 import * as React from 'react'
 

packages/ui/src/layout/PortalToast/PortalToast.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { X } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { Toaster, ToastBar, toast } from 'react-hot-toast'

packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 // make a function that returns a component
 
 import { useState, useEffect } from 'react'
@@ -55,8 +57,8 @@ const AiIconAnimation = ({ loading = false, className, allowHoverEffect = false
             loading
               ? styles[`ai-icon__grid__square--step-${step}`]
               : isAnimating
-              ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-              : styles[`ai-icon__grid__square--static`]
+                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
+                : styles[`ai-icon__grid__square--static`]
           )}
         ></div>
         <div
@@ -65,8 +67,8 @@ const AiIconAnimation = ({ loading = false, className, allowHoverEffect = false
             loading
               ? styles[`ai-icon__grid__square--step-${step}`]
               : isAnimating
-              ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-              : styles[`ai-icon__grid__square--static`]
+                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
+                : styles[`ai-icon__grid__square--static`]
           )}
         ></div>
         <div
@@ -75,8 +77,8 @@ const AiIconAnimation = ({ loading = false, className, allowHoverEffect = false
             loading
               ? styles[`ai-icon__grid__square--step-${step}`]
               : isAnimating
-              ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-              : styles[`ai-icon__grid__square--static`]
+                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
+                : styles[`ai-icon__grid__square--static`]
           )}
         ></div>
         <div
@@ -85,8 +87,8 @@ const AiIconAnimation = ({ loading = false, className, allowHoverEffect = false
             loading
               ? styles[`ai-icon__grid__square--step-${step}`]
               : isAnimating
-              ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
-              : styles[`ai-icon__grid__square--static`]
+                ? styles[`ai-icon__grid__square--exiting--step-${exitStep}`]
+                : styles[`ai-icon__grid__square--static`]
           )}
         ></div>
       </div>

packages/ui/src/layout/banners/Announcement.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useState } from 'react'
 
 import _announcement from './data/Announcement.json'

packages/ui/src/layout/banners/LW11CountdownBanner/LW11CountdownBanner.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useRouter } from 'next/router'
 import { Button, cn } from 'ui'
 import announcement from '../data/Announcement.json'

packages/ui/src/lib/Hooks.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 
 /*

packages/ui/src/lib/Markdown/index.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+'use client'
+
 import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
 import Image from 'next/image'
 import { cn } from '../utils'