torch-glare 2.3.0 → 2.4.1

package/apps/lib/components/ImageAttachment.tsx

@@ -1,9 +1,21 @@
-import { forwardRef, HTMLAttributes, InputHTMLAttributes, ReactNode, useEffect, useState } from "react";
+import {
+  forwardRef,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
 import { Button } from "./Button";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogCancel } from "./AlertDialog";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogCancel,
+} from "./AlertDialog";
 
 const dropZoneStyles = cva(
   [
@@ -17,17 +29,17 @@ const dropZoneStyles = cva(
         true: "bg-background-presentation-action-hovercontstyle border-border-presentation-badge-gray",
       },
     },
-  }
+  },
 );
 
 interface Props extends InputHTMLAttributes<HTMLInputElement | HTMLDivElement> {
   isDropAreaActive?: boolean;
   mainLabel: string;
   secondaryLabel: string;
-  theme?: Themes
-  expandLabel: ReactNode
-  children?: ReactNode
-  getRootProps?: () => any
+  theme?: Themes;
+  expandLabel: ReactNode;
+  children?: ReactNode;
+  getRootProps?: () => Record<string, unknown>;
 }
 
 const ImageAttachment = forwardRef<HTMLInputElement, Props>(
@@ -42,11 +54,10 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
       children,
       ...props
     }: Props,
-    ref
+    ref,
   ) => {
     return (
-      <section
-        className={cn("flex items-center justify-center gap-1 w-full", className)}>
+      <section className={cn("flex items-center justify-center gap-1 w-full", className)}>
         {children}
         <Button
           {...getRootProps?.()}
@@ -66,28 +77,29 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
           <input ref={ref} {...props} type="file" hidden />
         </Button>
       </section>
-
     );
-  }
+  },
 );
 
-ImageAttachment.displayName = "ImageAttachment"
-
-export {
-  ImageAttachment,
-  ExpandableImage,
-  AttachmentImagePreview
-}
+ImageAttachment.displayName = "ImageAttachment";
 
+export { ImageAttachment, ExpandableImage, AttachmentImagePreview };
 
 interface ExpandableImageProps extends HTMLAttributes<HTMLDivElement> {
-  previewSrc: any
-  expandLabel: ReactNode
-  placeholderLabel?: string
-  theme?: Themes
+  previewSrc: string;
+  expandLabel: ReactNode;
+  placeholderLabel?: string;
+  theme?: Themes;
 }
 
-const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "Upload Image", className, ...props }: ExpandableImageProps) => {
+const ExpandableImage = ({
+  theme,
+  previewSrc,
+  expandLabel,
+  placeholderLabel = "Upload Image",
+  className,
+  ...props
+}: ExpandableImageProps) => {
   // Calculate the aspect ratio of the image
   const [aspectRatio, setAspectRatio] = useState<number | null>(null);
   useEffect(() => {
@@ -103,76 +115,101 @@ const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "U
   }, [previewSrc]);
 
   return (
-    <section style={props.style} data-theme={theme} className={cn("flex items-center justify-center rounded-md relative overflow-hidden border-none group h-[65px]  max-w-[180px]", className)}>
-      {previewSrc ? <SelectedImg aspectRatio={aspectRatio} src={previewSrc} /> : <PlaceHolder label={placeholderLabel} />}
+    <section
+      style={props.style}
+      data-theme={theme}
+      className={cn(
+        "flex items-center justify-center rounded-md relative overflow-hidden border-none group h-[65px]  max-w-[180px]",
+        className,
+      )}
+    >
+      {previewSrc ? (
+        <SelectedImg aspectRatio={aspectRatio} src={previewSrc} />
+      ) : (
+        <PlaceHolder label={placeholderLabel} />
+      )}
 
-      {
-        previewSrc && (
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <button
-                className='flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100'
+      {previewSrc && (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <button className="flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100">
+              <svg
+                width="25"
+                height="25"
+                viewBox="0 0 25 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
-                </svg>
-                <p className='text-content-presentation-global-primary-inverse typography-labels-small-regular max-w-[50px] break-words m-0'>
-                  {expandLabel}
-                </p>
-              </button>
-            </AlertDialogTrigger>
-            <AlertDialogContent className="w-fit bg-transparent border-none">
-              {props.children}
-            </AlertDialogContent>
-          </AlertDialog>
-        )
-      }
+                <path
+                  d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z"
+                  fill="#F9F9F9"
+                />
+              </svg>
+              <p className="text-content-presentation-global-primary-inverse typography-labels-small-regular max-w-[50px] break-words m-0">
+                {expandLabel}
+              </p>
+            </button>
+          </AlertDialogTrigger>
+          <AlertDialogContent className="w-fit bg-transparent border-none">
+            {props.children}
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
     </section>
   );
-}
+};
 
-
-function PlaceHolder({ label }: any) {
+function PlaceHolder({ label }: { label: string }) {
   return (
-    <section className={cn([
-      'w-[65px] h-full gap-[2px] flex flex-col justify-center items-center px-1 ',
-      ' rounded-lg border-2 border-dashed',
-      ' border-border-presentation-badge-blue-purple',
-      ' bg-background-presentation-badge-blue-purple',
-      ' transition-all duration-300 ease-in-out',
-      ' hover:bg-background-presentation-badge-gray hover:border-border-presentation-badge-gray']
-    )}>
+    <section
+      className={cn([
+        "w-[65px] h-full gap-[2px] flex flex-col justify-center items-center px-1 ",
+        " rounded-lg border-2 border-dashed",
+        " border-border-presentation-badge-blue-purple",
+        " bg-background-presentation-badge-blue-purple",
+        " transition-all duration-300 ease-in-out",
+        " hover:bg-background-presentation-badge-gray hover:border-border-presentation-badge-gray",
+      ])}
+    >
       <i className="ri-attachment-line text-content-presentation-badge-blue-purple group-hover:text-[#797C7F] text-[24px] h-[24px]"></i>
-      <p className='text-content-presentation-badge-blue-purple typography-labels-small-regular group-hover:text-[#797C7F] px-1 py-[2px] text-center'>{label}</p>
+      <p className="text-content-presentation-badge-blue-purple typography-labels-small-regular group-hover:text-[#797C7F] px-1 py-[2px] text-center">
+        {label}
+      </p>
     </section>
-  )
+  );
 }
 
-
-
-function SelectedImg({ src, aspectRatio }: any) {
+function SelectedImg({ src, aspectRatio }: { src: string; aspectRatio: number | null }) {
   return (
-    <section style={{ aspectRatio: aspectRatio }} className='bg-white w-full h-full rounded-md border border-border-presentation-global-primary shrink-0'>
-      <img src={src} className='object-center object-cover h-full w-full' />
+    <section
+      style={{ aspectRatio: aspectRatio ?? undefined }}
+      className="bg-white w-full h-full rounded-md border border-border-presentation-global-primary shrink-0"
+    >
+      <img src={src} className="object-center object-cover h-full w-full" />
     </section>
   );
 }
 
-
 interface AttachmentImagePreviewProps extends HTMLAttributes<HTMLDivElement> {
-  src: any;
+  src: string;
   header?: ReactNode;
-  theme?: Themes
+  theme?: Themes;
 }
 
-function AttachmentImagePreview({ theme, src, header, className, ...props }: AttachmentImagePreviewProps) {
+function AttachmentImagePreview({
+  theme,
+  src,
+  header,
+  className,
+  ...props
+}: AttachmentImagePreviewProps) {
   return (
     <section
       {...props}
       data-theme={theme}
       className={cn(
         " overflow-hidden flex flex-col items-center justify-center w-80 p-2 gap-2 rounded-md border shadow-md border-border-presentation-global-primary bg-background-presentation-form-base",
-        className
+        className,
       )}
     >
       <section className="flex items-center justify-between w-full m-0">
@@ -186,11 +223,12 @@ function AttachmentImagePreview({ theme, src, header, className, ...props }: Att
         </AlertDialogCancel>
       </section>
 
-      <img className="w-full object-cover object-center rounded-md  border shadow-md border-border-presentation-global-primary" src={src} />
+      <img
+        className="w-full object-cover object-center rounded-md  border shadow-md border-border-presentation-global-primary"
+        src={src}
+      />
 
-      <section className="flex items-center justify-end w-full gap-2">
-        {props.children}
-      </section>
+      <section className="flex items-center justify-end w-full gap-2">{props.children}</section>
     </section>
   );
 }

package/apps/lib/components/InnerLabelField.tsx

@@ -6,8 +6,7 @@ import { ToolTipSide } from "./Tooltip";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
 
-interface Props
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
   size?: "S" | "M"; // this is used to change the size style of the component
   variant?: "SystemStyle" | "PresentationStyle";
   icon?: ReactNode; // to add left side icon if you pass it
@@ -18,14 +17,15 @@ interface Props
   label?: string; // to show label
   required?: boolean; // to show required icon
   toolTipSide?: ToolTipSide;
-  theme?: Themes
+  theme?: Themes;
 }
 
 export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
   (
     {
       size = "M",
-      icon,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      icon, // excluded from ...props spread (icon is overridden below)
       childrenSide,
       popoverChildren,
       errorMessage,
@@ -38,7 +38,7 @@ export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
       toolTipSide,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [focus, setFocus] = useState(false);
     const [isEmpty, setIsEmpty] = useState(!props.value);
@@ -80,15 +80,12 @@ export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
         }
       />
     );
-  }
+  },
 );
 
-InnerLabelField.displayName = "InnerLabelField"
-
-
+InnerLabelField.displayName = "InnerLabelField";
 
 const Label = ({
-
   focus,
   isEmpty,
   label,
@@ -121,16 +118,23 @@ const Label = ({
             "ease-in-out",
             "group-hover:text-content-presentation-global-primary group-hover:typography-body-small-regular",
             { "text-content-presentation-global-primary typography-body-small-regular": isEmpty },
-            { "text-content-presentation-global-primary typography-body-small-regular": focus && isEmpty },
-            { "text-content-presentation-global-primary typography-body-small-regular": error && isEmpty },
-            { "text-content-presentation-global-primary typography-body-small-regular": disabled && isEmpty },
+            {
+              "text-content-presentation-global-primary typography-body-small-regular":
+                focus && isEmpty,
+            },
+            {
+              "text-content-presentation-global-primary typography-body-small-regular":
+                error && isEmpty,
+            },
+            {
+              "text-content-presentation-global-primary typography-body-small-regular":
+                disabled && isEmpty,
+            },
           )}
         >
           {label}
         </p>
-        {required && (
-          <p className="text-content-presentation-state-negative">*</p>
-        )}
+        {required && <p className="text-content-presentation-state-negative">*</p>}
       </section>
       <span
         className={cn(