Fixed formatting issues

Author: SwarnimDoegar

packages/imagekit-editor-dev/src/components/RetryableImage.tsx

@@ -156,7 +156,11 @@ export default function RetryableImage(props: RetryableImageProps) {
   }
 
   return (
-    <Box ref={rootRef as React.RefObject<HTMLDivElement>} position="relative" display="inline-block">
+    <Box
+      ref={rootRef as React.RefObject<HTMLDivElement>}
+      position="relative"
+      display="inline-block"
+    >
       {error ? (
         <Center
           w={imgProps.width || "full"}

packages/imagekit-editor-dev/src/components/common/ColorPickerField.tsx

@@ -7,7 +7,9 @@ import {
   PopoverTrigger,
 } from "@chakra-ui/react"
 import { memo, useEffect, useState } from "react"
-import ColorPicker, { type ColorPickerProps } from "react-best-gradient-color-picker"
+import ColorPicker, {
+  type ColorPickerProps,
+} from "react-best-gradient-color-picker"
 import { useDebounce } from "../../hooks/useDebounce"
 
 const ColorPickerField = ({

packages/imagekit-editor-dev/src/components/common/Hover.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps, Flex, type FlexProps } from "@chakra-ui/react"
-import { useState, useEffect, useRef, useCallback } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 interface FlexHoverProps extends FlexProps {
   children(isHover: boolean): JSX.Element
@@ -20,29 +20,29 @@ const Hover = ({
 
   const handleClickOutside = useCallback((event: MouseEvent): void => {
     const hoverArea = hoverAreaRef.current
-    if (
-      hoverArea &&
-      !hoverArea.contains(event.target as Node)
-    ) {
+    if (hoverArea && !hoverArea.contains(event.target as Node)) {
       setIsHover(false)
     }
   }, [])
 
-  const debouncedHandleClickOutside = useCallback((event: MouseEvent): void => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current)
-    }
-    debounceTimerRef.current = setTimeout(() => {
-      handleClickOutside(event)
-    }, 100)
-  }, [handleClickOutside])
+  const debouncedHandleClickOutside = useCallback(
+    (event: MouseEvent): void => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        handleClickOutside(event)
+      }, 100)
+    },
+    [handleClickOutside],
+  )
 
   useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside)
-    document.addEventListener('mouseover', debouncedHandleClickOutside)
+    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("mouseover", debouncedHandleClickOutside)
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-      document.removeEventListener('mouseover', debouncedHandleClickOutside)
+      document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("mouseover", debouncedHandleClickOutside)
       if (debounceTimerRef.current) {
         clearTimeout(debounceTimerRef.current)
       }

packages/imagekit-editor-dev/src/components/common/ZoomInput.tsx

@@ -43,7 +43,9 @@ export const ZoomInput: React.FC<ZoomInputFieldProps> = ({
   defaultValue = 100,
   value,
 }) => {
-  const [zoomValue, setZoomValue] = useState<number>(value ?? (defaultValue as number))
+  const [zoomValue, setZoomValue] = useState<number>(
+    value ?? (defaultValue as number),
+  )
   const [inputValue, setInputValue] = useState<string>(
     (value ?? (defaultValue as number)).toString(),
   )

packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx

@@ -448,7 +448,11 @@ export const TransformationConfigSidebar: React.FC = () => {
                   {...register(field.name)}
                   {...(field.fieldProps ?? {})}
                   defaultValue={
-                    field.fieldProps?.defaultValue as string | number | readonly string[] | undefined
+                    field.fieldProps?.defaultValue as
+                      | string
+                      | number
+                      | readonly string[]
+                      | undefined
                   }
                 />
               ) : null}

packages/imagekit-editor-dev/src/schema/transformation.ts

@@ -77,9 +77,7 @@ export const aspectRatioValidator = z.any().superRefine((val, ctx) => {
   })
 })
 
-const layerXNumber = z.coerce
-  .string()
-  .regex(/^[N-]?\d+(\.\d{1,2})?$/)
+const layerXNumber = z.coerce.string().regex(/^[N-]?\d+(\.\d{1,2})?$/)
 
 const layerXExpr = z
   .string()
@@ -99,9 +97,7 @@ export const layerXValidator = z.any().superRefine((val, ctx) => {
   })
 })
 
-const layerYNumber = z.coerce
-  .string()
-  .regex(/^[N-]?\d+(\.\d{1,2})?$/)
+const layerYNumber = z.coerce.string().regex(/^[N-]?\d+(\.\d{1,2})?$/)
 
 const layerYExpr = z
   .string()
@@ -121,40 +117,41 @@ export const layerYValidator = z.any().superRefine((val, ctx) => {
   })
 })
 
-
 const commonNumber = z.coerce
   .number({ invalid_type_error: "Should be a number." })
   .min(0, {
     message: "Must be a positive number.",
   })
 const commonExpr = z
   .string()
-  .regex(/^(?:ih|bh|ch|iw|bw|cw)_(?:add|sub|mul|div|mod|pow)_(?:\d+(\.\d{1,2})?)$/, {
-    message: "String must be a valid expression string.",
-  })
-
-
-export const commonNumberAndExpressionValidator = z.any().superRefine((val, ctx) => {
-  if (commonNumber.safeParse(val).success) {
-    return
-  }
-  if (commonExpr.safeParse(val).success) {
-    return
-  }
-  ctx.addIssue({
-    code: z.ZodIssueCode.custom,
-    message: "Must be a positive number or a valid expression string.",
+  .regex(
+    /^(?:ih|bh|ch|iw|bw|cw)_(?:add|sub|mul|div|mod|pow)_(?:\d+(\.\d{1,2})?)$/,
+    {
+      message: "String must be a valid expression string.",
+    },
+  )
+
+export const commonNumberAndExpressionValidator = z
+  .any()
+  .superRefine((val, ctx) => {
+    if (commonNumber.safeParse(val).success) {
+      return
+    }
+    if (commonExpr.safeParse(val).success) {
+      return
+    }
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Must be a positive number or a valid expression string.",
+    })
   })
-})
-
 
 const overlayBlockExpr = z
   .string()
   .regex(/^(?:bh|bw|bar)_(?:add|sub|mul|div|mod|pow)_(?:\d+(\.\d{1,2})?)$/, {
     message: "String must be a valid expression string.",
   })
 
-
 export const overlayBlockExprValidator = z.any().superRefine((val, ctx) => {
   if (commonNumber.safeParse(val).success) {
     return
@@ -168,21 +165,24 @@ export const overlayBlockExprValidator = z.any().superRefine((val, ctx) => {
   })
 })
 
-
-
-
 export const optionalPositiveFloatNumberValidator = z.preprocess(
-  (val) => (val === "" || val === undefined || val === null) ? undefined : val,
-  z.coerce.number().positive({ message: "Should be a positive floating point number." }).optional()
+  (val) => (val === "" || val === undefined || val === null ? undefined : val),
+  z.coerce
+    .number()
+    .positive({ message: "Should be a positive floating point number." })
+    .optional(),
 )
 
-export const refineUnsharpenMask = (val: {
-  unsharpenMask?: boolean
-  unsharpenMaskRadius?: number
-  unsharpenMaskSigma?: number
-  unsharpenMaskAmount?: number
-  unsharpenMaskThreshold?: number
-}, ctx: z.RefinementCtx) => {
+export const refineUnsharpenMask = (
+  val: {
+    unsharpenMask?: boolean
+    unsharpenMaskRadius?: number
+    unsharpenMaskSigma?: number
+    unsharpenMaskAmount?: number
+    unsharpenMaskThreshold?: number
+  },
+  ctx: z.RefinementCtx,
+) => {
   if (val.unsharpenMask === true) {
     if (!val.unsharpenMaskRadius) {
       ctx.addIssue({
@@ -213,4 +213,4 @@ export const refineUnsharpenMask = (val: {
       })
     }
   }
-}
+}