Fix a bunch of errors we had

packages/backend/convex/_generated/api.d.ts

@@ -15,7 +15,6 @@ import type * as custom_auth_providers_password from "../custom/auth/providers/p
 import type * as custom_auth_providers_usesend from "../custom/auth/providers/usesend.js";
 import type * as files from "../files.js";
 import type * as http from "../http.js";
-import type * as utils from "../utils.js";
 
 import type {
   ApiFromModules,
@@ -31,7 +30,6 @@ declare const fullApi: ApiFromModules<{
   "custom/auth/providers/usesend": typeof custom_auth_providers_usesend;
   files: typeof files;
   http: typeof http;
-  utils: typeof utils;
 }>;
 
 /**

packages/backend/convex/_generated/dataModel.d.ts

@@ -11,12 +11,11 @@
 import type {
   DataModelFromSchemaDefinition,
   DocumentByName,
-  SystemTableNames,
   TableNamesInDataModel,
-} from 'convex/server';
-import type { GenericId } from 'convex/values';
-
-import schema from '../schema.js';
+  SystemTableNames,
+} from "convex/server";
+import type { GenericId } from "convex/values";
+import schema from "../schema.js";
 
 /**
  * The names of all of your Convex tables.

packages/backend/convex/auth.ts

@@ -8,7 +8,7 @@ import {
 import { ConvexError, v } from 'convex/values';
 
 import type { Doc, Id } from './_generated/dataModel';
-import type { MutationCtx, QueryCtx } from './_generated/server';
+import type { QueryCtx } from './_generated/server';
 import { api } from './_generated/api';
 import { action, mutation, query } from './_generated/server';
 import { Password, validatePassword } from './custom/auth';
@@ -96,11 +96,10 @@ export const updateUserPassword = action({
     if (!userId) throw new ConvexError('Not authenticated.');
     const user = await ctx.runQuery(api.auth.getUser, { userId });
     if (!user?.email) throw new ConvexError('User not found.');
-    const verified = await retrieveAccount(ctx, {
+    await retrieveAccount(ctx, {
       provider: 'password',
       account: { id: user.email, secret: currentPassword },
     });
-    if (!verified) throw new ConvexError('Current password is incorrect.');
 
     if (!validatePassword(newPassword))
       throw new ConvexError('Invalid password.');

packages/backend/convex/custom/auth/providers/usesend.ts

@@ -11,7 +11,7 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
     from: process.env.USESEND_FROM_EMAIL ?? 'noreply@example.com',
     maxAge: 24 * 60 * 60, // 24 hours
 
-    async generateVerificationToken() {
+    generateVerificationToken() {
       const random: RandomReader = {
         read(bytes) {
           crypto.getRandomValues(bytes);
@@ -26,17 +26,20 @@ export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
       const siteUrl = process.env.USESEND_FROM_EMAIL ?? '';
       const appName = siteUrl.split('@')[1]?.split('.')[0] ?? 'App';
 
-      const useSend = new UseSend(
-        process.env.USESEND_API_KEY!,
-        process.env.USESEND_URL!,
-      );
+      const apiKey = process.env.USESEND_API_KEY;
+      const useSendUrl = process.env.USESEND_URL;
+      if (!apiKey || !useSendUrl) {
+        throw new Error('USESEND_API_KEY and USESEND_URL must be set.');
+      }
+
+      const useSend = new UseSend(apiKey, useSendUrl);
 
       // For password reset, we want to send the code, not the magic link
       const isPasswordReset =
-        url.includes('reset') || provider.id?.includes('reset');
+        url.includes('reset') || provider.id.includes('reset');
 
       const result = await useSend.emails.send({
-        from: provider.from!,
+        from: provider.from ?? 'noreply@example.com',
         to: [to],
         subject: isPasswordReset
           ? `Reset your password - ${appName}`

packages/backend/convex/globals.d.ts

@@ -0,0 +1,11 @@
+// Declare process.env for Convex backend environment variables.
+// Convex supports process.env to read variables set in the Convex Dashboard.
+declare const process: {
+  readonly env: {
+    readonly USESEND_API_KEY?: string;
+    readonly USESEND_URL?: string;
+    readonly USESEND_FROM_EMAIL?: string;
+    readonly CONVEX_CLOUD_URL?: string;
+    readonly [key: string]: string | undefined;
+  };
+};

packages/backend/convex/utils.ts

@@ -1,16 +0,0 @@
-export function missingEnvVariableUrl(envVarName: string, whereToGet: string) {
-  const deployment = deploymentName();
-  if (!deployment) return `Missing ${envVarName} in environment variables.`;
-  return (
-    `\n  Missing ${envVarName} in environment variables.\n\n` +
-    `  Get it from ${whereToGet} .\n  Paste it on the Convex dashboard:\n` +
-    `  https://dashboard.convex.dev/d/${deployment}/settings?var=${envVarName}`
-  );
-}
-
-export function deploymentName() {
-  const url = process.env.CONVEX_CLOUD_URL;
-  if (!url) return undefined;
-  const regex = new RegExp('https://(.+).convex.cloud');
-  return regex.exec(url)?.[1];
-}

packages/backend/eslint.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'eslint/config';
+
+import { baseConfig } from '@gib/eslint-config/base';
+
+export default defineConfig(
+  {
+    ignores: ['convex/_generated/**', 'types/**', 'scripts/**', 'dist/**'],
+  },
+  baseConfig,
+);

packages/backend/package.json

@@ -36,6 +36,7 @@
     "@gib/eslint-config": "workspace:*",
     "@gib/prettier-config": "workspace:*",
     "@gib/tsconfig": "workspace:*",
+    "@types/node": "catalog:",
     "eslint": "catalog:",
     "prettier": "catalog:",
     "react-email": "5.2.10",

packages/ui/src/based-progress.tsx

@@ -21,7 +21,7 @@ const BasedProgress = ({
   value = 0,
   ...props
 }: BasedProgressProps) => {
-  const [progress, setProgress] = React.useState<number>(value ?? 0);
+  const [progress, setProgress] = React.useState<number>(value);
 
   React.useEffect(() => {
     const id = window.setInterval(() => {
@@ -45,7 +45,7 @@ const BasedProgress = ({
       <ProgressPrimitive.Indicator
         data-slot='progress-indicator'
         className='bg-primary h-full w-full flex-1 transition-all'
-        style={{ transform: `translateX(-${100 - (progress ?? 0)}%)` }}
+        style={{ transform: `translateX(-${100 - progress}%)` }}
       />
     </ProgressPrimitive.Root>
   );

packages/ui/src/carousel.tsx

@@ -98,7 +98,7 @@ const Carousel = ({
     api.on('select', onSelect);
 
     return () => {
-      api?.off('select', onSelect);
+      api.off('select', onSelect);
     };
   }, [api, onSelect]);
 
@@ -108,8 +108,7 @@ const Carousel = ({
         carouselRef,
         api: api,
         opts,
-        orientation:
-          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        orientation: orientation,
         scrollPrev,
         scrollNext,
         canScrollPrev,

packages/ui/src/chart.tsx

@@ -48,7 +48,7 @@ const ChartContainer = ({
   >['children'];
 }) => {
   const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -72,7 +72,7 @@ const ChartContainer = ({
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
+    ([, config]) => config.theme ?? config.color,
   );
 
   if (!colorConfig.length) {
@@ -89,7 +89,7 @@ ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
       itemConfig.color;
     return color ? `  --color-${key}: ${color};` : null;
   })
@@ -135,11 +135,11 @@ const ChartTooltipContent = ({
     }
 
     const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === 'string'
-        ? config[label]?.label || label
+        ? config[label]?.label ?? label
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -183,9 +183,9 @@ const ChartTooltipContent = ({
         {payload
           .filter((item) => item.type !== 'none')
           .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
+            const indicatorColor = color ?? item.payload.fill ?? item.color;
 
             return (
               <div
@@ -232,7 +232,7 @@ const ChartTooltipContent = ({
                       <div className='grid gap-1.5'>
                         {nestLabel ? tooltipLabel : null}
                         <span className='text-muted-foreground'>
-                          {itemConfig?.label || item.name}
+                          {itemConfig?.label ?? item.name}
                         </span>
                       </div>
                       {item.value && (
@@ -281,7 +281,7 @@ const ChartLegendContent = ({
       {payload
         .filter((item) => item.type !== 'none')
         .map((item) => {
-          const key = `${nameKey || item.dataKey || 'value'}`;
+          const key = `${nameKey ?? item.dataKey ?? 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
           return (

packages/ui/src/form.tsx

@@ -46,10 +46,6 @@ const useFormField = () => {
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
 
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
   const { id } = itemContext;
 
   return {
@@ -138,7 +134,7 @@ const FormDescription = ({
 
 const FormMessage = ({ className, ...props }: React.ComponentProps<'p'>) => {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? '') : props.children;
+  const body = error ? String(error.message ?? '') : props.children;
 
   if (!body) {
     return null;

packages/ui/src/hooks/use-on-click-outside.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { MousePointerClick, X } from 'lucide-react';
 
 type EventType =
   | 'mousedown'

packages/ui/src/image-crop.tsx

@@ -153,7 +153,7 @@ export const ImageCrop = ({
   useEffect(() => {
     const reader = new FileReader();
     reader.addEventListener('load', () =>
-      setImgSrc(reader.result?.toString() || ''),
+      setImgSrc(typeof reader.result === 'string' ? reader.result : ''),
     );
     reader.readAsDataURL(file);
   }, [file]);
@@ -173,12 +173,13 @@ export const ImageCrop = ({
     onChange?.(pixelCrop, percentCrop);
   };
 
-  const handleComplete = async (
+  const handleComplete = (
     pixelCrop: PixelCrop,
     percentCrop: PercentCrop,
-  ) => {
+  ): Promise<void> => {
     setCompletedCrop(pixelCrop);
     onComplete?.(pixelCrop, percentCrop);
+    return Promise.resolve();
   };
 
   const applyCrop = async () => {

packages/ui/src/input-otp.tsx

@@ -47,7 +47,7 @@ const InputOTPSlot = ({
   index: number;
 }) => {
   const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
 
   return (
     <div

packages/ui/src/progress.tsx

@@ -21,7 +21,7 @@ const Progress = ({
     <ProgressPrimitive.Indicator
       data-slot='progress-indicator'
       className='bg-primary size-full flex-1 transition-all'
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </ProgressPrimitive.Root>
 );

packages/ui/src/sidebar.tsx

@@ -602,9 +602,9 @@ const SidebarMenuSkeleton = ({
   showIcon?: boolean;
 }) => {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const [width] = React.useState(
+    () => `${Math.floor(Math.random() * 40) + 50}%`,
+  );
 
   return (
     <div

packages/ui/src/toggle-group.tsx

@@ -58,13 +58,13 @@ const ToggleGroupItem = ({
   return (
     <ToggleGroupPrimitive.Item
       data-slot='toggle-group-item'
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
+      data-variant={context.variant ?? variant}
+      data-size={context.size ?? size}
       data-spacing={context.spacing}
       className={cn(
         toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
+          variant: context.variant ?? variant,
+          size: context.size ?? size,
         }),
         'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
         'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',