refactor: Clean up imports and formatting across multiple components for improved readability

Author: bchapuis

apps/api/src/nodes/cloudflare-node-registry.ts

@@ -19,6 +19,7 @@ import { WhisperLargeV3TurboNode } from "./audio/whisper-large-v3-turbo-node";
 import { WhisperNode } from "./audio/whisper-node";
 import { WhisperTinyEnNode } from "./audio/whisper-tiny-en-node";
 import { BaseNodeRegistry } from "./base-node-registry";
+import { BlobNode } from "./blob/blob-node";
 import { CloudflareBrowserContentNode } from "./browser/cloudflare-browser-content-node";
 import { CloudflareBrowserJsonNode } from "./browser/cloudflare-browser-json-node";
 import { CloudflareBrowserLinksNode } from "./browser/cloudflare-browser-links-node";
@@ -38,7 +39,6 @@ import { ListGuildChannelsDiscordNode } from "./discord/list-guild-channels-disc
 import { ListUserGuildsDiscordNode } from "./discord/list-user-guilds-discord-node";
 import { SendDMDiscordNode } from "./discord/send-dm-discord-node";
 import { SendMessageDiscordNode } from "./discord/send-message-discord-node";
-import { BlobNode } from "./blob/blob-node";
 import { DocumentNode } from "./document/document-node";
 import { ToMarkdownNode } from "./document/to-markdown-node";
 import { ParseEmailNode } from "./email/parse-email-node";

apps/api/src/nodes/types.ts

@@ -1,10 +1,5 @@
 // Types for workflows
-import {
-  GeoJSON,
-  Node,
-  NodeExecution,
-  NodeType,
-} from "@dafthunk/types";
+import { GeoJSON, Node, NodeExecution, NodeType } from "@dafthunk/types";
 
 import { BaseToolRegistry } from "./base-tool-registry";
 import { ToolReference } from "./tool-types";

apps/web/src/components/ui/calendar.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+} from "lucide-react";
+import * as React from "react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { cn } from "@/utils/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@/utils/utils";
 
 function Calendar({
   className,
@@ -19,9 +19,9 @@ function Calendar({
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
@@ -131,13 +131,13 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
               <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            );
           }
 
           if (orientation === "right") {
@@ -146,12 +146,12 @@ function Calendar({
                 className={cn("size-4", className)}
                 {...props}
               />
-            )
+            );
           }
 
           return (
             <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -161,13 +161,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -176,12 +176,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -205,7 +205,7 @@ function CalendarDayButton({
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

apps/web/src/components/ui/popover.tsx

@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
-import { cn } from "@/utils/utils"
+import { cn } from "@/utils/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -25,7 +25,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

apps/web/src/components/workflow/fields/blob-field.tsx

@@ -173,7 +173,11 @@ export function BlobField({
               Download
             </a>
           </div>
-          <video src={objectUrl} controls className="w-full rounded-md border" />
+          <video
+            src={objectUrl}
+            controls
+            className="w-full rounded-md border"
+          />
         </div>
       );
     }

apps/web/src/components/workflow/fields/boolean-field.tsx

@@ -17,10 +17,7 @@ export function BooleanField({
 
   return (
     <div
-      className={cn(
-        "flex items-center justify-start gap-2 w-full",
-        className
-      )}
+      className={cn("flex items-center justify-start gap-2 w-full", className)}
     >
       {!disabled && clearable && hasValue && (
         <ClearButton onClick={onClear} label="Clear boolean" />

apps/web/src/components/workflow/fields/date-field.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
 import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -61,11 +61,12 @@ export function DateField({
   value,
 }: FieldProps) {
   // Value can be an ISO string or old format object { date: string, offset: number }
-  const isoValue = typeof value === "string"
-    ? value
-    : (value && typeof value === "object" && "date" in value)
-      ? (value as { date: string }).date
-      : "";
+  const isoValue =
+    typeof value === "string"
+      ? value
+      : value && typeof value === "object" && "date" in value
+        ? (value as { date: string }).date
+        : "";
 
   // Timezone offset is for display/editing only (not persisted)
   const [offset, setOffset] = useState(0);
@@ -133,7 +134,9 @@ export function DateField({
     const [hours, minutes, seconds] = timeStr.split(":").map(Number);
 
     // Create a date in UTC with these components
-    const utcDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds));
+    const utcDate = new Date(
+      Date.UTC(year, month, day, hours, minutes, seconds)
+    );
 
     // Adjust for the GMT offset to get the actual UTC time
     // If offset is -5 (GMT-5), and user selects 14:00, that's 19:00 UTC
@@ -157,29 +160,33 @@ export function DateField({
     const [hours, minutes, seconds = 0] = time.split(":").map(Number);
 
     // Get the date part - if no date is set yet, use today's date in the GMT offset
-    const dateInOffset = dateValue ? getOffsetTime(dateValue) : (() => {
-      const now = new Date();
-      const offsetMs = offset * 60 * 60 * 1000;
-      const offsetNow = new Date(now.getTime() + offsetMs);
-      return {
-        year: offsetNow.getUTCFullYear(),
-        month: offsetNow.getUTCMonth(),
-        day: offsetNow.getUTCDate(),
-        hours: offsetNow.getUTCHours(),
-        minutes: offsetNow.getUTCMinutes(),
-        seconds: offsetNow.getUTCSeconds(),
-      };
-    })();
+    const dateInOffset = dateValue
+      ? getOffsetTime(dateValue)
+      : (() => {
+          const now = new Date();
+          const offsetMs = offset * 60 * 60 * 1000;
+          const offsetNow = new Date(now.getTime() + offsetMs);
+          return {
+            year: offsetNow.getUTCFullYear(),
+            month: offsetNow.getUTCMonth(),
+            day: offsetNow.getUTCDate(),
+            hours: offsetNow.getUTCHours(),
+            minutes: offsetNow.getUTCMinutes(),
+            seconds: offsetNow.getUTCSeconds(),
+          };
+        })();
 
     // Create UTC date representing the selected date/time in GMT offset
-    const utcDate = new Date(Date.UTC(
-      dateInOffset.year,
-      dateInOffset.month,
-      dateInOffset.day,
-      hours,
-      minutes,
-      seconds
-    ));
+    const utcDate = new Date(
+      Date.UTC(
+        dateInOffset.year,
+        dateInOffset.month,
+        dateInOffset.day,
+        hours,
+        minutes,
+        seconds
+      )
+    );
 
     // Convert from GMT offset to UTC
     const offsetMs = offset * 60 * 60 * 1000;

apps/web/src/components/workflow/widgets/blob.tsx

@@ -14,11 +14,7 @@ interface BlobWidgetProps extends BaseWidgetProps {
   value: any;
 }
 
-function BlobWidget({
-  value,
-  onChange,
-  readonly = false,
-}: BlobWidgetProps) {
+function BlobWidget({ value, onChange, readonly = false }: BlobWidgetProps) {
   const [error, setError] = useState<string | null>(null);
   const [fileName, setFileName] = useState<string | null>(() => {
     if (value && isObjectReference(value)) {

apps/web/src/components/workflow/workflow-builder.tsx

@@ -226,16 +226,19 @@ export function WorkflowBuilder({
     }
   }, [initialWorkflowExecution, nodes, updateNodeData]);
 
-  const resetNodeStates = useCallback((state: NodeExecutionState = "idle") => {
-    nodes.forEach((node) => {
-      updateNodeExecution(node.id, {
-        state,
-        outputs: {},
-        error: undefined,
+  const resetNodeStates = useCallback(
+    (state: NodeExecutionState = "idle") => {
+      nodes.forEach((node) => {
+        updateNodeExecution(node.id, {
+          state,
+          outputs: {},
+          error: undefined,
+        });
       });
-    });
-    setWorkflowErrorMessage(undefined);
-  }, [nodes, updateNodeExecution]);
+      setWorkflowErrorMessage(undefined);
+    },
+    [nodes, updateNodeExecution]
+  );
 
   const handleExecute = useCallback(() => {
     if (!executeWorkflow) return null;

apps/web/src/components/workflow/workflow-canvas.tsx

@@ -322,7 +322,6 @@ export function DeployButton({
   );
 }
 
-
 type SidebarToggleProps = {
   onClick: (e: React.MouseEvent) => void;
   isSidebarVisible: boolean;
@@ -809,7 +808,10 @@ export function WorkflowCanvas({
             {/* Publishing Actions Group - Deploy */}
             {!disabled && onDeploy && (
               <ActionBarGroup>
-                <DeployButton onClick={onDeploy} disabled={nodes.length === 0} />
+                <DeployButton
+                  onClick={onDeploy}
+                  disabled={nodes.length === 0}
+                />
               </ActionBarGroup>
             )}