From 94c906b377a6c8aa98680d1977d8297260966d40 Mon Sep 17 00:00:00 2001 From: Charis <26616127+charislam@users.noreply.github.com> Date: Mon, 6 May 2024 15:57:44 -0400 Subject: [PATCH] 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 | 4 ---- .../ui/src/components/Accordion/Accordion.tsx | 2 ++ packages/ui/src/components/Alert/Alert.tsx | 2 ++ .../ui/src/components/Checkbox/Checkbox.tsx | 2 ++ .../ui/src/components/CodeBlock/CodeBlock.tsx | 2 ++ .../src/components/Collapsible/Collapsible.tsx | 2 ++ .../ui/src/components/ContextMenu/index.tsx | 2 ++ .../components/CustomHTMLElements/Heading.tsx | 2 ++ packages/ui/src/components/Form/Form.tsx | 2 ++ packages/ui/src/components/Icon/Icon.tsx | 2 ++ packages/ui/src/components/Icon/IconBase.tsx | 2 ++ .../ui/src/components/Icon/IconContext.tsx | 2 ++ packages/ui/src/components/Input/Input.tsx | 2 ++ .../src/components/InputNumber/InputNumber.tsx | 2 ++ .../ui/src/components/Listbox/Listbox2.tsx | 2 ++ packages/ui/src/components/Menu/Menu.tsx | 2 ++ packages/ui/src/components/Popover/Popover.tsx | 2 ++ .../src/components/PromoToast/PromoToast.tsx | 2 ++ packages/ui/src/components/Radio/Radio.tsx | 2 ++ packages/ui/src/components/Select/Select.tsx | 2 ++ .../ui/src/components/SidePanel/SidePanel.tsx | 2 ++ packages/ui/src/components/Tabs/Tabs.tsx | 2 ++ .../components/ThemeProvider/ThemeProvider.tsx | 2 ++ packages/ui/src/components/Toggle/Toggle.tsx | 2 ++ packages/ui/src/components/Upload/Upload.tsx | 2 ++ packages/ui/src/components/Upload/index.tsx | 3 --- .../ui/src/components/shadcn/ui/accordion.tsx | 2 ++ .../src/components/shadcn/ui/collapsible.tsx | 4 ++-- .../ui/src/components/shadcn/ui/command.tsx | 2 ++ .../src/components/shadcn/ui/dropdown-menu.tsx | 2 ++ packages/ui/src/components/shadcn/ui/form.tsx | 2 ++ .../ui/src/components/shadcn/ui/popover.tsx | 2 ++ packages/ui/src/components/shadcn/ui/toast.tsx | 2 ++ .../ui/src/components/shadcn/ui/use-toast.ts | 2 ++ .../ui/src/layout/PortalToast/PortalToast.tsx | 2 ++ .../ai-icon-animation/ai-icon-animation.tsx | 18 ++++++++++-------- .../ui/src/layout/banners/Announcement.tsx | 2 ++ .../LW11CountdownBanner.tsx | 2 ++ packages/ui/src/lib/Hooks.tsx | 2 ++ packages/ui/src/lib/Markdown/index.tsx | 3 ++- 40 files changed, 84 insertions(+), 18 deletions(-) diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 5baa7c3317dfa..03506633fc6d9 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -1,7 +1,3 @@ -'use client' - -import * as React from 'react' - // Markdown components export * from './src/lib/Markdown' diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx index 3383be41c2fff..50e7f35cc549a 100644 --- a/packages/ui/src/components/Accordion/Accordion.tsx +++ b/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' diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx index 540dbae061805..1aaa740e408fb 100644 --- a/packages/ui/src/components/Alert/Alert.tsx +++ b/packages/ui/src/components/Alert/Alert.tsx @@ -1,3 +1,5 @@ +'use client' + import React, { useState } from 'react' import { IconAlertTriangle } from '../Icon/icons/IconAlertTriangle' diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx index d9253eae2d951..20b82a003e546 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/ui/src/components/Checkbox/Checkbox.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import { FormLayout } from '../../lib/Layout/FormLayout/FormLayout' diff --git a/packages/ui/src/components/CodeBlock/CodeBlock.tsx b/packages/ui/src/components/CodeBlock/CodeBlock.tsx index 3e985c4dffa12..9b57436118320 100644 --- a/packages/ui/src/components/CodeBlock/CodeBlock.tsx +++ b/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' diff --git a/packages/ui/src/components/Collapsible/Collapsible.tsx b/packages/ui/src/components/Collapsible/Collapsible.tsx index 60eb89ee4f897..89efba7ae975b 100644 --- a/packages/ui/src/components/Collapsible/Collapsible.tsx +++ b/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' diff --git a/packages/ui/src/components/ContextMenu/index.tsx b/packages/ui/src/components/ContextMenu/index.tsx index c87ee1b10ab09..9b96c831639bd 100644 --- a/packages/ui/src/components/ContextMenu/index.tsx +++ b/packages/ui/src/components/ContextMenu/index.tsx @@ -1 +1,3 @@ +'use client' + export { default as ContextMenu } from './ContextMenu' diff --git a/packages/ui/src/components/CustomHTMLElements/Heading.tsx b/packages/ui/src/components/CustomHTMLElements/Heading.tsx index bb3eed1a3d982..63ee8f47e0d62 100644 --- a/packages/ui/src/components/CustomHTMLElements/Heading.tsx +++ b/packages/ui/src/components/CustomHTMLElements/Heading.tsx @@ -1,3 +1,5 @@ +'use client' + import { getAnchor, removeAnchor, diff --git a/packages/ui/src/components/Form/Form.tsx b/packages/ui/src/components/Form/Form.tsx index df7778bf6f864..348f370ed0503 100644 --- a/packages/ui/src/components/Form/Form.tsx +++ b/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' diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx index a1a629b3ee81b..f9717d9882a43 100644 --- a/packages/ui/src/components/Icon/Icon.tsx +++ b/packages/ui/src/components/Icon/Icon.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import { IconContext } from './IconContext' diff --git a/packages/ui/src/components/Icon/IconBase.tsx b/packages/ui/src/components/Icon/IconBase.tsx index 3ab5bd7dee456..e4d7ee9a8bd2e 100644 --- a/packages/ui/src/components/Icon/IconBase.tsx +++ b/packages/ui/src/components/Icon/IconBase.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import styleHandler from '../../lib/theme/styleHandler' diff --git a/packages/ui/src/components/Icon/IconContext.tsx b/packages/ui/src/components/Icon/IconContext.tsx index 270d3b4841199..d6ee7b048d8f9 100644 --- a/packages/ui/src/components/Icon/IconContext.tsx +++ b/packages/ui/src/components/Icon/IconContext.tsx @@ -1,3 +1,5 @@ +'use client' + import { createContext } from 'react' import { SizeVariantProps } from '../../lib/commonCva' diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx index dda2098fcacff..48374dc9e5eef 100644 --- a/packages/ui/src/components/Input/Input.tsx +++ b/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' diff --git a/packages/ui/src/components/InputNumber/InputNumber.tsx b/packages/ui/src/components/InputNumber/InputNumber.tsx index 78b7e06b03ace..a9beaa6cd8dbe 100644 --- a/packages/ui/src/components/InputNumber/InputNumber.tsx +++ b/packages/ui/src/components/InputNumber/InputNumber.tsx @@ -1,3 +1,5 @@ +'use client' + import React, { useEffect } from 'react' // import { IconChevronDown } from '../Icon/icons/IconChevronDown' diff --git a/packages/ui/src/components/Listbox/Listbox2.tsx b/packages/ui/src/components/Listbox/Listbox2.tsx index 1b2c39b087fe7..39957d0152ff0 100644 --- a/packages/ui/src/components/Listbox/Listbox2.tsx +++ b/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' diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx index 74ce68fdb120c..ed699be2f1d03 100644 --- a/packages/ui/src/components/Menu/Menu.tsx +++ b/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' diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx index 9becd336a51ac..d27df078479ef 100644 --- a/packages/ui/src/components/Popover/Popover.tsx +++ b/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' diff --git a/packages/ui/src/components/PromoToast/PromoToast.tsx b/packages/ui/src/components/PromoToast/PromoToast.tsx index f75a8b0d40485..6db9b00e075a0 100644 --- a/packages/ui/src/components/PromoToast/PromoToast.tsx +++ b/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' diff --git a/packages/ui/src/components/Radio/Radio.tsx b/packages/ui/src/components/Radio/Radio.tsx index 7f6a5a6c91cb5..470ee5786a14c 100644 --- a/packages/ui/src/components/Radio/Radio.tsx +++ b/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' diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx index c1d98737db9ac..9004999391a02 100644 --- a/packages/ui/src/components/Select/Select.tsx +++ b/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' diff --git a/packages/ui/src/components/SidePanel/SidePanel.tsx b/packages/ui/src/components/SidePanel/SidePanel.tsx index d3e57942d5112..20114edf3a97d 100644 --- a/packages/ui/src/components/SidePanel/SidePanel.tsx +++ b/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' diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx index adf935eb932ef..b993c8b5167d2 100644 --- a/packages/ui/src/components/Tabs/Tabs.tsx +++ b/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' diff --git a/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx b/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx index 1fd4fedce9c64..668127d4662a7 100644 --- a/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx +++ b/packages/ui/src/components/ThemeProvider/ThemeProvider.tsx @@ -1,3 +1,5 @@ +'use client' + import { createContext } from 'react' import defaultTheme from '../../lib/theme/defaultTheme' diff --git a/packages/ui/src/components/Toggle/Toggle.tsx b/packages/ui/src/components/Toggle/Toggle.tsx index afbb4f078e36b..89869ed08f443 100644 --- a/packages/ui/src/components/Toggle/Toggle.tsx +++ b/packages/ui/src/components/Toggle/Toggle.tsx @@ -1,3 +1,5 @@ +'use client' + import clsx from 'clsx' import React, { useEffect, useState } from 'react' diff --git a/packages/ui/src/components/Upload/Upload.tsx b/packages/ui/src/components/Upload/Upload.tsx index 8b6686d8d1eb2..63ec67ad8af27 100644 --- a/packages/ui/src/components/Upload/Upload.tsx +++ b/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 diff --git a/packages/ui/src/components/Upload/index.tsx b/packages/ui/src/components/Upload/index.tsx index 5a64039fd8eb2..d261516b70177 100644 --- a/packages/ui/src/components/Upload/index.tsx +++ b/packages/ui/src/components/Upload/index.tsx @@ -1,6 +1,3 @@ - import Upload from './Upload' export default Upload export { default as Upload } from './Upload' - - diff --git a/packages/ui/src/components/shadcn/ui/accordion.tsx b/packages/ui/src/components/shadcn/ui/accordion.tsx index 42981fef008e1..b27c31f4447fb 100644 --- a/packages/ui/src/components/shadcn/ui/accordion.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/collapsible.tsx b/packages/ui/src/components/shadcn/ui/collapsible.tsx index 9fa48946afd1e..1bbaed5a8d194 100644 --- a/packages/ui/src/components/shadcn/ui/collapsible.tsx +++ b/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 diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx index 6f72174fab5e8..0bd1ab0f50f4c 100644 --- a/packages/ui/src/components/shadcn/ui/command.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx b/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx index 83e6ab6ef0032..6046919aea67b 100644 --- a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx index 068ed96cfaaa3..5d26078dcb299 100644 --- a/packages/ui/src/components/shadcn/ui/form.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/popover.tsx b/packages/ui/src/components/shadcn/ui/popover.tsx index 3ffac8e68df60..1c6892287154b 100644 --- a/packages/ui/src/components/shadcn/ui/popover.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/toast.tsx b/packages/ui/src/components/shadcn/ui/toast.tsx index 9f86525415782..cf6682d872b0b 100644 --- a/packages/ui/src/components/shadcn/ui/toast.tsx +++ b/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' diff --git a/packages/ui/src/components/shadcn/ui/use-toast.ts b/packages/ui/src/components/shadcn/ui/use-toast.ts index 4d5c3aebb1a26..cd7988bb73134 100644 --- a/packages/ui/src/components/shadcn/ui/use-toast.ts +++ b/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' diff --git a/packages/ui/src/layout/PortalToast/PortalToast.tsx b/packages/ui/src/layout/PortalToast/PortalToast.tsx index 69d808ff15e28..d2ba31cdb06af 100644 --- a/packages/ui/src/layout/PortalToast/PortalToast.tsx +++ b/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' diff --git a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx index 9095e58e42d38..35cc3475c772f 100644 --- a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx +++ b/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`] )} >
diff --git a/packages/ui/src/layout/banners/Announcement.tsx b/packages/ui/src/layout/banners/Announcement.tsx index 5c6694fc7e009..b0752c5ae4817 100644 --- a/packages/ui/src/layout/banners/Announcement.tsx +++ b/packages/ui/src/layout/banners/Announcement.tsx @@ -1,3 +1,5 @@ +'use client' + import { useEffect, useState } from 'react' import _announcement from './data/Announcement.json' diff --git a/packages/ui/src/layout/banners/LW11CountdownBanner/LW11CountdownBanner.tsx b/packages/ui/src/layout/banners/LW11CountdownBanner/LW11CountdownBanner.tsx index 3938c6ef279e2..eebd3520da7c8 100644 --- a/packages/ui/src/layout/banners/LW11CountdownBanner/LW11CountdownBanner.tsx +++ b/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' diff --git a/packages/ui/src/lib/Hooks.tsx b/packages/ui/src/lib/Hooks.tsx index a68fa4ce894d3..db43acc6275ef 100644 --- a/packages/ui/src/lib/Hooks.tsx +++ b/packages/ui/src/lib/Hooks.tsx @@ -1,3 +1,5 @@ +'use client' + import { useEffect } from 'react' /* diff --git a/packages/ui/src/lib/Markdown/index.tsx b/packages/ui/src/lib/Markdown/index.tsx index debed4efd69f9..a38f1cfdfb0a4 100644 --- a/packages/ui/src/lib/Markdown/index.tsx +++ b/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'