partial packages eslint conformance

dubinc · versecafe · Jan 19, 2024 · Jan 19, 2024 · Jan 20, 2024 · Jan 20, 2024
commit 698d09aa706fec1b085d6d6c26fcae084a2e8e7a
diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion.tsx
@@ -10,11 +10,11 @@ const AccordionItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
-    ref={ref}
     className={cn(
       "border-b border-b-slate-200 py-3 last:border-none",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -26,11 +26,11 @@ const AccordionTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
-      ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between font-medium transition-all sm:text-lg [&[data-state=open]>svg]:rotate-180",
         className,
       )}
+      ref={ref}
       {...props}
     >
       {children}
@@ -45,11 +45,11 @@ const AccordionContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
-    ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm text-gray-500 transition-all sm:text-base",
       className,
     )}
+    ref={ref}
     {...props}
   >
     {children}

diff --git a/packages/ui/src/avatar.tsx b/packages/ui/src/avatar.tsx
@@ -10,7 +10,7 @@ export function Avatar({
     image?: string | null | undefined;
   };
   className?: string;
-}) {
+}): JSX.Element {
   if (!user) {
     return (
       <div
@@ -24,25 +24,25 @@ export function Avatar({
 
   return (
     <img
-      alt={`Avatar for ${user?.name || user?.email}`}
+      alt={`Avatar for ${user.name || user.email}`}
+      className={cn("h-10 w-10 rounded-full border border-gray-300", className)}
+      draggable={false}
       referrerPolicy="no-referrer"
       src={
-        user?.image ||
-        `https://api.dicebear.com/7.x/micah/svg?seed=${user?.email}`
+        user.image ||
+        `https://api.dicebear.com/7.x/micah/svg?seed=${user.email}`
       }
-      className={cn("h-10 w-10 rounded-full border border-gray-300", className)}
-      draggable={false}
     />
   );
 }
 
 export function TokenAvatar({ id }: { id: string }) {
   return (
     <img
-      src={`https://api.dicebear.com/7.x/shapes/svg?seed=${id}`}
       alt="avatar"
       className="h-10 w-10 rounded-full"
       draggable={false}
+      src={`https://api.dicebear.com/7.x/shapes/svg?seed=${id}`}
     />
   );
 }
diff --git a/packages/ui/src/background.tsx b/packages/ui/src/background.tsx
@@ -1,4 +1,4 @@
-export function Background() {
+export function Background(): JSX.Element {
   return (
     <div style={styles.backgroundMain}>
       <div style={styles.backgroundMainBefore} />
@@ -8,7 +8,7 @@ export function Background() {
   );
 }
 
-const styles: { [key: string]: React.CSSProperties } = {
+const styles: Record<string, React.CSSProperties> = {
   backgroundMain: {
     width: "100vw",
     minHeight: "100vh",

diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx
@@ -27,7 +27,7 @@ interface BadgeProps
   extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, ...props }: BadgeProps): JSX.Element {
   return (
     <span className={cn(badgeVariants({ variant }), className)} {...props} />
   );

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@dub/utils";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { LoadingSpinner } from "./icons";
 import { Tooltip } from "./tooltip";
 
@@ -22,25 +22,22 @@ export function Button({
   shortcut,
   disabledTooltip,
   ...props
-}: ButtonProps) {
+}: ButtonProps): JSX.Element {
   if (disabledTooltip) {
     return (
       <Tooltip content={disabledTooltip}>
         <div className="flex h-10 w-full cursor-not-allowed items-center justify-center space-x-2 rounded-md border border-gray-200 bg-gray-100 px-4 text-sm text-gray-400 transition-all focus:outline-none">
           <p>{text}</p>
-          {shortcut && (
-            <kbd className="hidden rounded bg-zinc-200 px-2 py-0.5 text-xs font-light text-gray-400 md:inline-block">
+          {shortcut ? <kbd className="hidden rounded bg-zinc-200 px-2 py-0.5 text-xs font-light text-gray-400 md:inline-block">
               {shortcut}
-            </kbd>
-          )}
+            </kbd> : null}
         </div>
       </Tooltip>
     );
   }
   return (
     <button
       // if onClick is passed, it's a "button" type, otherwise it's being used in a form, hence "submit"
-      type={props.onClick ? "button" : "submit"}
       className={cn(
         "group flex h-10 w-full items-center justify-center space-x-2 rounded-md border px-4 text-sm transition-all focus:outline-none",
         props.disabled || loading
@@ -60,15 +57,14 @@ export function Button({
         props.className,
       )}
       disabled={props.disabled || loading}
+      type={props.onClick ? "button" : "submit"}
       {...props}
     >
       {loading ? <LoadingSpinner /> : icon ? icon : null}
       <p>{text}</p>
-      {shortcut && (
-        <kbd className="hidden rounded bg-zinc-700 px-2 py-0.5 text-xs font-light text-gray-400 transition-all duration-75 group-hover:bg-gray-100 group-hover:text-gray-500 md:inline-block">
+      {shortcut ? <kbd className="hidden rounded bg-zinc-700 px-2 py-0.5 text-xs font-light text-gray-400 transition-all duration-75 group-hover:bg-gray-100 group-hover:text-gray-500 md:inline-block">
           {shortcut}
-        </kbd>
-      )}
+        </kbd> : null}
     </button>
   );
 }
diff --git a/packages/ui/src/checkbox.tsx b/packages/ui/src/checkbox.tsx
@@ -3,19 +3,18 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import * as React from "react";
-
 import { cn } from "@dub/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     className={cn(
       "peer h-5 w-5 shrink-0 rounded-md border border-gray-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500",
       className,
     )}
+    ref={ref}
     {...props}
   >
     <CheckboxPrimitive.Indicator className="flex items-center justify-center">

diff --git a/packages/ui/src/copy-button.tsx b/packages/ui/src/copy-button.tsx
@@ -11,22 +11,22 @@ export function CopyButton({
 }: {
   value: string;
   className?: string;
-}) {
+}): JSX.Element {
   const [copied, setCopied] = useState(false);
   return (
     <button
+      className={cn(
+        "group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 hover:bg-blue-100 active:scale-95",
+        className,
+      )}
        => {
         e.stopPropagation();
         setCopied(true);
         navigator.clipboard.writeText(value).then(() => {
           toast.success("Copied to clipboard!");
         });
-        setTimeout(() => setCopied(false), 3000);
+        setTimeout(() => { setCopied(false); }, 3000);
       }}
-      className={cn(
-        "group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 hover:bg-blue-100 active:scale-95",
-        className,
-      )}
     >
       <span className="sr-only">Copy</span>
       {copied ? (

diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@dub/utils";
-import { InputHTMLAttributes, ReactNode, useMemo, useState } from "react";
+import type { InputHTMLAttributes, ReactNode} from "react";
+import { useMemo, useState } from "react";
 import { Button } from "./button";
 
 export function Form({
@@ -18,7 +19,7 @@ export function Form({
   buttonText?: string;
   disabledTooltip?: string | ReactNode;
   handleSubmit: (data: any) => Promise<any>;
-}) {
+}): JSX.Element {
   const [value, setValue] = useState(inputData.defaultValue);
   const [saving, setSaving] = useState(false);
   const saveDisabled = useMemo(() => {
@@ -27,15 +28,15 @@ export function Form({
 
   return (
     <form
+      className="rounded-lg border border-gray-200 bg-white"
        (e) => {
         e.preventDefault();
         setSaving(true);
         await handleSubmit({
-          [inputData.name as string]: value,
+          [inputData.name!]: value,
         });
         setSaving(false);
       }}
-      className="rounded-lg border border-gray-200 bg-white"
     >
       <div className="relative flex flex-col space-y-6 p-5 sm:p-10">
         <div className="flex flex-col space-y-3">
@@ -45,16 +46,16 @@ export function Form({
         {typeof inputData.defaultValue === "string" ? (
           <input
             {...inputData}
-            type="text"
-            required
-            disabled={disabledTooltip ? true : false}
-             => setValue(e.target.value)}
             className={cn(
               "w-full max-w-md rounded-md border border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm",
               {
                 "cursor-not-allowed bg-gray-100 text-gray-400": disabledTooltip,
               },
             )}
+            disabled={Boolean(disabledTooltip)}
+             => { setValue(e.target.value); }}
+            required
+            type="text"
           />
         ) : (
           <div className="h-[2.35rem] w-full max-w-md animate-pulse rounded-md bg-gray-200" />
@@ -68,10 +69,10 @@ export function Form({
         />
         <div className="shrink-0">
           <Button
-            text={buttonText}
-            loading={saving}
             disabled={saveDisabled}
             disabledTooltip={disabledTooltip}
+            loading={saving}
+            text={buttonText}
           />
         </div>
       </div>

diff --git a/packages/ui/src/hooks/use-cookies.ts b/packages/ui/src/hooks/use-cookies.ts
@@ -14,7 +14,7 @@ export default function useCookies<T>(
 
   useEffect(() => {
     // Update state if the cookie changes
-    const handleStorageChange = () => {
+    const handleStorageChange = (): void => {
       const item = Cookies.get(key);
       if (item) {
         setStoredValue(JSON.parse(item));
@@ -30,7 +30,7 @@ export default function useCookies<T>(
     };
   }, [key]);
 
-  const setValue = (value: T) => {
+  const setValue = (value: T): void => {
     // Save state
     setStoredValue(value);
     // Save to Cookies

diff --git a/packages/ui/src/hooks/use-current-anchor.ts b/packages/ui/src/hooks/use-current-anchor.ts
@@ -53,8 +53,8 @@ export default function useCurrentAnchor() {
 
     const siblings = new Map();
 
-    const anchors = mdxContainer?.querySelectorAll("[data-mdx-heading]");
-    anchors.forEach((anchor) => observer.observe(anchor));
+    const anchors = mdxContainer.querySelectorAll("[data-mdx-heading]");
+    anchors.forEach((anchor) => { observer.observe(anchor); });
 
     return () => {
       observer.disconnect();

diff --git a/packages/ui/src/hooks/use-intersection-observer.ts b/packages/ui/src/hooks/use-intersection-observer.ts
@@ -1,4 +1,5 @@
-import { RefObject, useEffect, useState } from "react";
+import type { RefObject} from "react";
+import { useEffect, useState } from "react";
 
 interface Args extends IntersectionObserverInit {
   freezeOnceVisible?: boolean;
@@ -22,8 +23,8 @@ export default function useIntersectionObserver(
   };
 
   useEffect(() => {
-    const node = elementRef?.current; // DOM Ref
-    const hasIOSupport = !!window.IntersectionObserver;
+    const node = elementRef.current; // DOM Ref
+    const hasIOSupport = Boolean(window.IntersectionObserver);
 
     if (!hasIOSupport || frozen || !node) return;
 
@@ -32,7 +33,7 @@ export default function useIntersectionObserver(
 
     observer.observe(node);
 
-    return () => observer.disconnect();
+    return () => { observer.disconnect(); };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);

diff --git a/packages/ui/src/hooks/use-media-query.ts b/packages/ui/src/hooks/use-media-query.ts
@@ -10,7 +10,7 @@ export default function useMediaQuery() {
   } | null>(null);
 
   useEffect(() => {
-    const checkDevice = () => {
+    const checkDevice = (): void => {
       if (window.matchMedia("(max-width: 640px)").matches) {
         setDevice("mobile");
       } else if (

diff --git a/packages/ui/src/hooks/use-router-stuff.ts b/packages/ui/src/hooks/use-router-stuff.ts
@@ -14,10 +14,10 @@ export default function useRouterStuff() {
   ) => {
     const newParams = new URLSearchParams(searchParams);
     if (kv) {
-      Object.entries(kv).forEach(([k, v]) => newParams.set(k, v));
+      Object.entries(kv).forEach(([k, v]) => { newParams.set(k, v); });
     }
     if (opts?.ignore) {
-      opts.ignore.forEach((k) => newParams.delete(k));
+      opts.ignore.forEach((k) => { newParams.delete(k); });
     }
     const queryString = newParams.toString();
     return queryString.length > 0 ? `?${queryString}` : "";
@@ -33,14 +33,14 @@ export default function useRouterStuff() {
     del?: string | string[];
     replace?: boolean;
     getNewPath?: boolean;
-  }) => {
+  }): string | undefined => {
     const newParams = new URLSearchParams(searchParams);
     if (set) {
-      Object.entries(set).forEach(([k, v]) => newParams.set(k, v));
+      Object.entries(set).forEach(([k, v]) => { newParams.set(k, v); });
     }
     if (del) {
       if (Array.isArray(del)) {
-        del.forEach((k) => newParams.delete(k));
+        del.forEach((k) => { newParams.delete(k); });
       } else {
         newParams.delete(del);
       }

diff --git a/packages/ui/src/hooks/use-scroll.ts b/packages/ui/src/hooks/use-scroll.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-export default function useScroll(threshold: number) {
+export default function useScroll(threshold: number): boolean {
   const [scrolled, setScrolled] = useState(false);
 
   const  => {
@@ -9,7 +9,7 @@ export default function useScroll(threshold: number) {
 
   useEffect(() => {
     window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
+    return () => { window.removeEventListener("scroll", onScroll); };
   }, [onScroll]);
 
   // also check on first load