chore(zbugs): Fix react-refresh/only-export-components warnings (#3415)

By splitting files as needed.

apps/zbugs/src/components/emoji-data-source.ts

@@ -0,0 +1,3 @@
+import emojiDataSource from 'emoji-picker-element-data/en/emojibase/data.json?url';
+
+export {emojiDataSource};

apps/zbugs/src/components/emoji-picker.tsx

@@ -1,15 +1,15 @@
 import 'emoji-picker-element';
-import dataSource from 'emoji-picker-element-data/en/emojibase/data.json?url';
 import Database from 'emoji-picker-element/database.js';
 import type Picker from 'emoji-picker-element/picker.js';
 import type {
   EmojiClickEvent,
   NativeEmoji,
   SkinToneChangeEvent,
 } from 'emoji-picker-element/shared.js';
-import {createElement, memo, useEffect, useRef, type RefCallback} from 'react';
+import {createElement, memo, useRef, type RefCallback} from 'react';
 import {setUserPref, useUserPref} from '../hooks/use-user-pref.js';
 import {useZero} from '../hooks/use-zero.js';
+import {emojiDataSource} from './emoji-data-source.js';
 
 export const SKIN_TONE_PREF = 'emojiSkinTone';
 
@@ -28,7 +28,7 @@ export const EmojiPicker = memo(({onEmojiChange}: Props) => {
   if (skinTonePref !== undefined) {
     const v = parseInt(skinTonePref, 10);
     if (!isNaN(v)) {
-      const db = new Database({dataSource});
+      const db = new Database({dataSource: emojiDataSource});
       db.setPreferredSkinTone(v).catch(err => {
         console.error('Failed to set preferred skin tone:', err);
       });
@@ -101,20 +101,6 @@ export const EmojiPicker = memo(({onEmojiChange}: Props) => {
   return createElement('emoji-picker', {
     'class': 'dark',
     ref,
-    'data-source': dataSource,
+    'data-source': emojiDataSource,
   });
 });
-
-// eslint-disable-next-line react-refresh/only-export-components
-export function useEmojiDataSourcePreload() {
-  useEffect(() => {
-    // Do this on a timer to not compete with other work.
-    const timer = setTimeout(
-      () => {
-        new Database({dataSource});
-      },
-      1000 + Math.random() * 1000,
-    );
-    return () => clearTimeout(timer);
-  }, []);
-}

apps/zbugs/src/components/filter.tsx

@@ -5,7 +5,7 @@ import labelIcon from '../assets/icons/label.svg';
 import {useZero} from '../hooks/use-zero.js';
 import {Button} from './button.js';
 import {Combobox} from './combobox.js';
-import UserPicker from './user-picker.js';
+import {UserPicker} from './user-picker.js';
 
 export type Selection =
   | {creator: string}

apps/zbugs/src/components/issue-link.tsx

@@ -1,7 +1,7 @@
 import {links, type ListContext} from '../routes.js';
 import {Link, type Props as LinkProps} from './link.js';
 
-export default function IssueLink({
+export function IssueLink({
   issue,
   title,
   children,

apps/zbugs/src/components/label-picker.tsx

@@ -12,7 +12,7 @@ const focusInput = (input: HTMLInputElement | null) => {
   }
 };
 
-export default function LabelPicker({
+export function LabelPicker({
   selected,
   onDisassociateLabel,
   onAssociateLabel,

apps/zbugs/src/components/login-provider.tsx

@@ -0,0 +1,25 @@
+import {useCallback, useSyncExternalStore} from 'react';
+import {loginContext} from '../hooks/use-login.js';
+import {clearJwt} from '../jwt.js';
+import {authRef} from '../zero-setup.js';
+
+export function LoginProvider({children}: {children: React.ReactNode}) {
+  const loginState = useSyncExternalStore(
+    authRef.onChange,
+    useCallback(() => authRef.value, []),
+  );
+
+  return (
+    <loginContext.Provider
+      value={{
+        logout: () => {
+          clearJwt();
+          authRef.value = undefined;
+        },
+        loginState,
+      }}
+    >
+      {children}
+    </loginContext.Provider>
+  );
+}

apps/zbugs/src/components/markdown.tsx

@@ -121,7 +121,7 @@ const rehypeImageToVideo: Plugin = () => {
   };
 };
 
-const Markdown = memo(({children}: {children: string}) => {
+export const Markdown = memo(({children}: {children: string}) => {
   return (
     <MarkdownBase
       remarkPlugins={[remarkGfm]}
@@ -152,5 +152,3 @@ const Markdown = memo(({children}: {children: string}) => {
     </MarkdownBase>
   );
 });
-
-export default Markdown;

apps/zbugs/src/components/nav.tsx

@@ -8,7 +8,7 @@ import logoURL from '../assets/images/logo.svg';
 import markURL from '../assets/images/mark.svg';
 import {useLogin} from '../hooks/use-login.js';
 import {useZero} from '../hooks/use-zero.js';
-import IssueComposer from '../pages/issue/issue-composer.js';
+import {IssueComposer} from '../pages/issue/issue-composer.js';
 import {
   links,
   routes,

apps/zbugs/src/components/relative-time.tsx

@@ -12,7 +12,7 @@ interface Props {
   };
 }
 
-function RelativeTime({timestamp, absolute = false, format}: Props) {
+export function RelativeTime({timestamp, absolute = false, format}: Props) {
   const now = useNow();
   const fullTimestamp = fullTimestampFormat.format(timestamp);
   return (
@@ -22,8 +22,6 @@ function RelativeTime({timestamp, absolute = false, format}: Props) {
   );
 }
 
-export default RelativeTime;
-
 const fullTimestampFormat = Intl.DateTimeFormat('en-US', {
   year: 'numeric',
   month: 'short',

apps/zbugs/src/components/user-picker.tsx

@@ -18,7 +18,7 @@ type Props = {
 
 type User = Row<Schema['tables']['user']>;
 
-export default function UserPicker({
+export function UserPicker({
   onSelect,
   selected,
   disabled,

apps/zbugs/src/hooks/use-emoji-data-source-preload.ts

@@ -0,0 +1,16 @@
+import Database from 'emoji-picker-element/database.js';
+import {useEffect} from 'react';
+import {emojiDataSource} from '../components/emoji-data-source.js';
+
+export function useEmojiDataSourcePreload() {
+  useEffect(() => {
+    // Do this on a timer to not compete with other work.
+    const timer = setTimeout(
+      () => {
+        new Database({dataSource: emojiDataSource});
+      },
+      1000 + Math.random() * 1000,
+    );
+    return () => clearTimeout(timer);
+  }, []);
+}

apps/zbugs/src/hooks/use-is-scrolling.ts

@@ -1,6 +1,6 @@
-import {useState, useEffect} from 'react';
+import {useEffect, useState} from 'react';
 
-const useIsScrolling = () => {
+export function useIsScrolling() {
   const [isScrolling, setIsScrolling] = useState(false);
 
   useEffect(() => {
@@ -29,6 +29,4 @@ const useIsScrolling = () => {
   }, []);
 
   return isScrolling;
-};
-
-export default useIsScrolling;
+}

apps/zbugs/src/hooks/use-login.tsx

@@ -1,45 +1,17 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useSyncExternalStore,
-} from 'react';
-import {clearJwt} from '../jwt.js';
-import {type LoginState, authRef} from '../zero-setup.js';
+import {createContext, useContext} from 'react';
+import {type LoginState} from '../zero-setup.js';
 
 export type LoginContext = {
   logout: () => void;
   loginState: LoginState | undefined;
 };
 
-const loginContext = createContext<LoginContext | undefined>(undefined);
+export const loginContext = createContext<LoginContext | undefined>(undefined);
 
-// eslint-disable-next-line react-refresh/only-export-components
-export function useLogin() {
+export function useLogin(): LoginContext {
   const state = useContext(loginContext);
   if (state === undefined) {
     throw new Error('useLogin must be used within a LoginProvider');
   }
   return state;
 }
-
-export function LoginProvider({children}: {children: React.ReactNode}) {
-  const loginState = useSyncExternalStore(
-    authRef.onChange,
-    useCallback(() => authRef.value, []),
-  );
-
-  return (
-    <loginContext.Provider
-      value={{
-        logout: () => {
-          clearJwt();
-          authRef.value = undefined;
-        },
-        loginState,
-      }}
-    >
-      {children}
-    </loginContext.Provider>
-  );
-}

apps/zbugs/src/main.tsx

@@ -4,9 +4,9 @@ import {StrictMode} from 'react';
 import {createRoot} from 'react-dom/client';
 import 'react-toastify/dist/ReactToastify.css';
 import {must} from 'shared/src/must.js';
-import {LoginProvider} from './hooks/use-login.js';
+import {LoginProvider} from './components/login-provider.js';
 import './index.css';
-import Root from './root.js';
+import {Root} from './root.js';
 
 createRoot(must(document.getElementById('root'))).render(
   <LoginProvider>

apps/zbugs/src/pages/issue/comment-composer.tsx

@@ -5,7 +5,7 @@ import {useLogin} from '../../hooks/use-login.js';
 import {useZero} from '../../hooks/use-zero.js';
 import {isCtrlEnter} from './is-ctrl-enter.js';
 
-export default function CommentComposer({
+export function CommentComposer({
   id,
   body,
   issueID,