fix: apply react/rules-of-hooks (#10840)

.oxlintrc.json

@@ -94,7 +94,8 @@
             "args": "after-used",
             "ignoreRestSiblings": true
           }
-        ]
+        ],
+        "react/rules-of-hooks": "error"
       },
       "plugins": ["eslint", "oxc", "react", "typescript", "import"]
     }

app/components/ActionButton.tsx

@@ -21,7 +21,7 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
  * Button that can be used to trigger an action definition.
  */
 const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
-  function _ActionButton(
+  function ActionButton_(
     { action, tooltip, hideOnActionDisabled, ...rest }: Props,
     ref: React.Ref<HTMLButtonElement>
   ) {

app/components/ContentEditable.tsx

@@ -31,7 +31,7 @@ export type RefHandle = {
  * Defines a content editable component with the same interface as a native
  * HTMLInputElement (or, as close as we can get).
  */
-const ContentEditable = React.forwardRef(function _ContentEditable(
+const ContentEditable = React.forwardRef(function ContentEditable_(
   {
     disabled,
     onChange,

app/components/HoverPreview/HoverPreviewDocument.tsx

@@ -15,7 +15,7 @@ import {
 
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Document], "type">;
 
-const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
+const HoverPreviewDocument = React.forwardRef(function HoverPreviewDocument_(
   { url, id, title, summary, lastActivityByViewer }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {

app/components/HoverPreview/HoverPreviewGroup.tsx

@@ -17,7 +17,7 @@ import ErrorBoundary from "../ErrorBoundary";
 
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Group], "type">;
 
-const HoverPreviewGroup = React.forwardRef(function _HoverPreviewGroup(
+const HoverPreviewGroup = React.forwardRef(function HoverPreviewGroup_(
   { name, description, memberCount, users }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -24,7 +24,7 @@ import {
 
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Issue], "type">;
 
-const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
+const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
   { url, id, title, description, author, labels, state, createdAt }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {

app/components/HoverPreview/HoverPreviewLink.tsx

@@ -20,7 +20,7 @@ type Props = {
   description: string;
 };
 
-const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
+const HoverPreviewLink = React.forwardRef(function HoverPreviewLink_(
   { url, thumbnailUrl, title, description }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -6,7 +6,7 @@ import { Preview, Title, Info, Card, CardContent } from "./Components";
 
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
 
-const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
+const HoverPreviewMention = React.forwardRef(function HoverPreviewMention_(
   { avatarUrl, name, lastActive, color }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -20,7 +20,7 @@ import {
 type Props = Omit<UnfurlResponse[UnfurlResourceType.PR], "type">;
 
 const HoverPreviewPullRequest = React.forwardRef(
-  function _HoverPreviewPullRequest(
+  function HoverPreviewPullRequest_(
     { url, title, id, description, author, state, createdAt }: Props,
     ref: React.Ref<HTMLDivElement>
   ) {

app/components/Lightbox.tsx

@@ -904,7 +904,7 @@ type ImageProps = {
   onMaxZoom: () => void;
 };
 
-const Image = forwardRef<HTMLImageElement, ImageProps>(function _Image(
+const Image = forwardRef<HTMLImageElement, ImageProps>(function Image_(
   {
     src,
     alt,

app/components/OneTimePasswordInput.tsx

@@ -9,7 +9,7 @@ type Props = React.ComponentProps<typeof OneTimePasswordRoot> & {
 };
 
 export const OneTimePasswordInput = React.forwardRef(
-  function _OneTimePasswordInput(
+  function OneTimePasswordInput_(
     { length = 6, ...rest }: Props,
     ref: React.RefObject<HTMLInputElement>
   ) {

app/components/Sharing/components/SearchInput.tsx

@@ -16,7 +16,7 @@ type Props = {
   action: React.ReactNode;
 };
 
-export const SearchInput = React.forwardRef(function _SearchInput(
+export const SearchInput = React.forwardRef(function SearchInput_(
   { onChange, onClick, onKeyDown, query, back, action }: Props,
   ref: React.Ref<HTMLInputElement>
 ) {

app/components/Sharing/components/Suggestions.tsx

@@ -44,7 +44,7 @@ type Props = {
 };
 
 export const Suggestions = observer(
-  React.forwardRef(function _Suggestions(
+  React.forwardRef(function Suggestions_(
     {
       document,
       collection,

app/components/Sidebar/Sidebar.tsx

@@ -37,7 +37,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
+const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
   { children, hidden = false, canCollapse = true, className }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {

app/components/Sidebar/components/SidebarButton.tsx

@@ -18,7 +18,7 @@ export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
 };
 
 const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
-  function _SidebarButton(
+  function SidebarButton_(
     {
       position = "top",
       showMoreMenu,

app/editor/index.tsx

@@ -914,7 +914,7 @@ const EditorContainer = styled(Styles)<{
 `;
 
 const LazyLoadedEditor = React.forwardRef<Editor, Props>(
-  function _LazyLoadedEditor(props: Props, ref) {
+  function LazyLoadedEditor_(props: Props, ref) {
     return (
       <WithTheme>
         {(theme) => <Editor theme={theme} {...props} ref={ref} />}

app/scenes/Collection/index.tsx

@@ -50,7 +50,7 @@ import { Header } from "./components/Header";
 import usePersistedState from "~/hooks/usePersistedState";
 import useCurrentUser from "~/hooks/useCurrentUser";
 
-const CollectionScene = observer(function _CollectionScene() {
+const CollectionScene = observer(function CollectionScene_() {
   const params = useParams<{ collectionSlug?: string }>();
   const history = useHistory();
   const match = useRouteMatch();

app/scenes/Document/components/DocumentTitle.tsx

@@ -56,7 +56,7 @@ type Props = {
 const lineHeight = "1.25";
 const fontSize = "2.25em";
 
-const DocumentTitle = React.forwardRef(function _DocumentTitle(
+const DocumentTitle = React.forwardRef(function DocumentTitle_(
   {
     documentId,
     title,

server/utils/fetch.ts

@@ -1,4 +1,4 @@
-/* oxlint-disable no-restricted-imports */
+/* oxlint-disable no-restricted-imports, react/rules-of-hooks */
 import http from "http";
 import https from "https";
 import nodeFetch, { type RequestInit, type Response } from "node-fetch";