laif-ds/dist/agent-docs/components/FilePreview.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # FilePreview
 
 ## Overview
 
 Compact file chip with name, format/size info, optional remove button, and optional action menu (preview/download/remove). Automatically adapts its preview based on file type (image, text, generic).
 
 ---
 
 ## Props
 
 | Prop             | Type                                                                 | Default       | Description                                                |
 | ---------------- | -------------------------------------------------------------------- | ------------- | ---------------------------------------------------------- |
 | `file`           | `File \| { name: string; url: string; type?: string }`               | **required**  | File object or remote descriptor with `url`.               |
 | `onRemove`       | `(url: string) => void`                                              | `undefined`   | Called when user removes the file.                         |
 | `onPreview`      | `(url: string) => void`                                              | `undefined`   | Called when user clicks Preview from the action menu.      |
 | `onDownload`     | `(url: string) => void`                                              | `undefined`   | Called when user clicks Download from the action menu.     |
 | `showActionMenu` | `boolean`                                                            | `false`       | Show overflow menu (Preview/Download/Delete if provided).  |
 | `className`      | `string`                                                             | `""`         | Additional classes for the wrapper.                         |
 
 ---
 
 ## Behavior
 
 - **Automatic preview**: 
   - Images: thumbnail preview.
   - Text: small snippet (first 100 chars).
   - Generic: file-type icon and labels.
 - **Format & size**: Displays file size (if available) and format label (e.g., PDF, JPG).
 - **Actions**: 
   - Inline remove button if `onRemove` is provided and `showActionMenu` is false.
   - Popover action menu when `showActionMenu` is true, using `onPreview`, `onDownload`, `onRemove`.
 
 ---
 
 ## Examples
 
 ### Image
 
 ```tsx
 import { FilePreview } from "laif-ds";
 
 export function ImagePreview() {
   return (
     <FilePreview
       file={{ name: "photo.jpg", url: "https://picsum.photos/id/237/200/200", type: "image/jpeg" }}
       onPreview={(url) => console.log("preview", url)}
       onDownload={(url) => console.log("download", url)}
     />
   );
 }
 ```
 
 ### With Remove Button
 
 ```tsx
 import { FilePreview } from "laif-ds";
 
 export function RemovablePreview() {
   return (
     <FilePreview
       file={{
         name: "document.docx",
         url: "https://example.com/document.docx",
         type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
       }}
       onRemove={(url) => console.log("remove", url)}
       onPreview={(url) => console.log("preview", url)}
       onDownload={(url) => console.log("download", url)}
     />
   );
 }
 ```
 
 ### With Action Menu
 
 ```tsx
 import { FilePreview } from "laif-ds";
 
 export function WithMenu() {
   return (
     <FilePreview
       file={{ name: "presentation.ppt", url: "https://example.com/presentation.ppt", type: "application/vnd.ms-powerpoint" }}
       showActionMenu
       onPreview={(url) => console.log("preview", url)}
       onDownload={(url) => console.log("download", url)}
       onRemove={(url) => console.log("remove", url)}
     />
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Thumbnails**: Image previews use object-fit to contain within the chip.
 - **Security**: For local `File` previews, temporary object URLs are created; cleanup is handled by the browser GC.
 - **Internationalization**: Text labels in the action menu can be adjusted at call sites when needed.