laif-ds 0.2.74 → 0.2.76

package/dist/agent-docs/components/FilePreviewer.md

@@ -1,139 +1,138 @@
- # FilePreviewer
- 
- ## Overview
- 
- Modal file preview component with support for images, PDFs (including secure read-only mode), audio, video, text, and Office documents (via online viewers). Use helper functions to open the modal from anywhere; mount the component once.
- 
- ---
- 
- ## API
- 
- ### Functions
- 
- | Function                | Signature                                                     | Description                                               |
- | ----------------------- | ------------------------------------------------------------- | --------------------------------------------------------- |
- | `previewFileModal`      | `(arg: string | PreviewOptions) => Promise<void>`             | Opens the preview modal. Resolves when closed.            |
- | `safePreviewFileModal`  | `(arg: string | PreviewOptions) => Promise<void | undefined>` | Safe variant that never throws on close.                   |
- 
- ```ts
- export type PreviewOptions = {
-   url?: string;
-   filename?: string;
-   mimeType?: string;
-   title?: React.ReactNode;
-   readOnly?: boolean; // Enables SecurePdfViewer for PDFs
-   page?: number;      // Initial page for PDFs (1-based)
- };
- ```
- 
- ### Component
- 
- - `FilePreviewer`: Mount once near the app root. Controls the dialog UI and renders the appropriate preview body.
- 
- ---
- 
- ## Behavior
- 
- - **Kind detection**: Determines preview type from `mimeType`, `filename` or `url`.
- - **Image**: Responsive `<img>` with contain fit.
- - **PDF**: 
-   - `readOnly=true` uses `SecurePdfViewer` with `page` support.
-   - Otherwise embedded via `<iframe>` (supports `#page=` parameter).
- - **Audio/Video**: Native `<audio>`/`<video>` players.
- - **Text**: Rendered in an `<iframe>` for remote text URLs.
- - **Office**: Uses an online viewer when `url` is HTTP(S); otherwise shows a fallback notice.
- - **Dialog**: Uses `Dialog` with `size="xl"` and a heading showing `title` or `filename` with a file icon.
- 
- ---
- 
- ## Examples
- 
- ### Preview an Image (URL)
- 
- ```tsx
- import { Button } from "laif-ds";
- import { FilePreviewer, previewFileModal } from "laif-ds";
- 
- export function PreviewImageButton() {
-   return (
-     <>
-       <Button
-         onClick={() =>
-           previewFileModal({
-             url: "https://picsum.photos/id/1003/1200/800",
-             filename: "image.jpg",
-             title: "Random Image",
-           })
-         }
-       >
-         Preview Image
-       </Button>
-       <FilePreviewer />
-     </>
-   );
- }
- ```
- 
- ### PDF with Read-only Secure Viewer
- 
- ```tsx
- import { Button } from "laif-ds";
- import { FilePreviewer, previewFileModal } from "laif-ds";
- 
- export function PreviewPdf() {
-   return (
-     <>
-       <Button
-         onClick={() =>
-           previewFileModal({
-             url: "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf",
-             filename: "dummy.pdf",
-             title: "PDF Document",
-             readOnly: true,
-             page: 1,
-           })
-         }
-       >
-         Preview PDF
-       </Button>
-       <FilePreviewer />
-     </>
-   );
- }
- ```
- 
- ### Office Document (XLSX)
- 
- ```tsx
- import { Button } from "laif-ds";
- import { FilePreviewer, previewFileModal } from "laif-ds";
- 
- export function PreviewSpreadsheet() {
-   return (
-     <>
-       <Button
-         onClick={() =>
-           previewFileModal({
-             url: "https://filesamples.com/samples/document/xlsx/sample3.xlsx",
-             filename: "spreadsheet.xlsx",
-             title: "Excel Spreadsheet",
-             readOnly: true,
-           })
-         }
-       >
-         Preview XLSX
-       </Button>
-       <FilePreviewer />
-     </>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **Mount**: Add a single `<FilePreviewer />` near app root or in Storybook decorators.
- - **Filenames**: If `filename` is omitted, it is inferred from `url`.
- - **Security**: For local files, prefer read-only mode for PDFs when appropriate.
- 
+# FilePreviewer
+
+## Overview
+
+Modal file preview component with support for images, PDFs (including secure read-only mode), audio, video, text, and Office documents (via online viewers). Use helper functions to open the modal from anywhere; mount the component once.
+
+---
+
+## API
+
+### Functions
+
+| Function               | Signature     | Description                       |
+| ---------------------- | ------------- | --------------------------------- | ---------------------------------------------- | ---------------------------------------- |
+| `previewFileModal`     | `(arg: string | PreviewOptions) => Promise<void>` | Opens the preview modal. Resolves when closed. |
+| `safePreviewFileModal` | `(arg: string | PreviewOptions) => Promise<void   | undefined>`                                    | Safe variant that never throws on close. |
+
+```ts
+export type PreviewOptions = {
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  title?: React.ReactNode;
+  readOnly?: boolean; // Enables SecurePdfViewer for PDFs
+  page?: number; // Initial page for PDFs (1-based)
+};
+```
+
+### Component
+
+- `FilePreviewer`: Mount once near the app root. Controls the dialog UI and renders the appropriate preview body.
+
+---
+
+## Behavior
+
+- **Kind detection**: Determines preview type from `mimeType`, `filename` or `url`.
+- **Image**: Responsive `<img>` with contain fit.
+- **PDF**:
+  - `readOnly=true` uses `SecurePdfViewer` with `page` support.
+  - Otherwise embedded via `<iframe>` (supports `#page=` parameter).
+- **Audio/Video**: Native `<audio>`/`<video>` players.
+- **Text**: Rendered in an `<iframe>` for remote text URLs.
+- **Office**: Uses an online viewer when `url` is HTTP(S); otherwise shows a fallback notice.
+- **Dialog**: Uses `Dialog` with `size="xl"` and a heading showing `title` or `filename` with a file icon.
+
+---
+
+## Examples
+
+### Preview an Image (URL)
+
+```tsx
+import { Button } from "laif-ds";
+import { FilePreviewer, previewFileModal } from "laif-ds";
+
+export function PreviewImageButton() {
+  return (
+    <>
+      <Button
+        onClick={() =>
+          previewFileModal({
+            url: "https://picsum.photos/id/1003/1200/800",
+            filename: "image.jpg",
+            title: "Random Image",
+          })
+        }
+      >
+        Preview Image
+      </Button>
+      <FilePreviewer />
+    </>
+  );
+}
+```
+
+### PDF with Read-only Secure Viewer
+
+```tsx
+import { Button } from "laif-ds";
+import { FilePreviewer, previewFileModal } from "laif-ds";
+
+export function PreviewPdf() {
+  return (
+    <>
+      <Button
+        onClick={() =>
+          previewFileModal({
+            url: "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf",
+            filename: "dummy.pdf",
+            title: "PDF Document",
+            readOnly: true,
+            page: 1,
+          })
+        }
+      >
+        Preview PDF
+      </Button>
+      <FilePreviewer />
+    </>
+  );
+}
+```
+
+### Office Document (XLSX)
+
+```tsx
+import { Button } from "laif-ds";
+import { FilePreviewer, previewFileModal } from "laif-ds";
+
+export function PreviewSpreadsheet() {
+  return (
+    <>
+      <Button
+        onClick={() =>
+          previewFileModal({
+            url: "https://filesamples.com/samples/document/xlsx/sample3.xlsx",
+            filename: "spreadsheet.xlsx",
+            title: "Excel Spreadsheet",
+            readOnly: true,
+          })
+        }
+      >
+        Preview XLSX
+      </Button>
+      <FilePreviewer />
+    </>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Mount**: Add a single `<FilePreviewer />` near app root or in Storybook decorators.
+- **Filenames**: If `filename` is omitted, it is inferred from `url`.
+- **Security**: For local files, prefer read-only mode for PDFs when appropriate.

package/dist/agent-docs/components/FileUploader.md

@@ -1,129 +1,149 @@
- # FileUploader
- 
- ## Overview
- 
- Drag-and-drop uploader with keyboard activation, file type filtering, limits (count/total size), previews via `FilePreview`, and external upload integration.
- 
- ---
- 
- ## Props
- 
- | Prop               | Type                                    | Default                                                   | Description                                                |
- | ------------------ | --------------------------------------- | --------------------------------------------------------- | ---------------------------------------------------------- |
- | `extensions`       | `AcceptItem[]`                          | `["pdf","image","video","audio"]`                    | Allowed extensions/categories (maps to accept attribute).  |
- | `multiple`         | `boolean`                               | `false`                                                   | Enables multiple file selection.                           |
- | `onUpload`         | `(files: File[]) => void`               | `undefined`                                               | Called whenever selected files change.                     |
- | `description`      | `string`                                | `"Trascina un file o clicca per selezionare"`            | Dropzone hint.                                             |
- | `formatDescription`| `string`                                | `"Formato accettato: PDF, Immagini, Video, Audio"`       | Accepted formats hint.                                     |
- | `selectedLabel`    | `string`                                | `"File selezionati"`                                     | Title shown above selected files list.                     |
- | `removeAllLabel`   | `string`                                | `"rimuovi tutto"`                                        | Label for the "remove all" button.                        |
- | `maxTotalSize`     | `number` (bytes)                        | `undefined`                                               | Maximum total size of selected files.                      |
- | `maxFiles`         | `number`                                | `undefined`                                               | Maximum number of files (when `multiple` is true).         |
- 
- `AcceptItem` includes: `pdf | doc | docx | xls | xlsx | ppt | pptx | txt | csv | jpg | jpeg | png | gif | image | video | audio`.
- 
- ---
- 
- ## Behavior
- 
- - **Dropzone**: Click or drag files; keyboard accessible (Enter/Space opens file dialog).
- - **Filtering**: `extensions` map to accept string; only matching files are added.
- - **Limits**: Enforces `maxFiles` and `maxTotalSize` (with compact error caption).
- - **Previews**: Renders selected files with `FilePreview`; supports remove per file and remove-all.
- - **Integration**: `onUpload` provides the current `File[]`; perform the actual upload externally.
- 
- ---
- 
- ## Examples
- 
- ### Default
- 
- ```tsx
- import { FileUploader } from "laif-ds";
- 
- export function DefaultUploader() {
-   return <FileUploader multiple={false} />;
- }
- ```
- 
- ### Multiple + Custom Extensions
- 
- ```tsx
- import { FileUploader, type AcceptItem } from "laif-ds";
- 
- const exts: AcceptItem[] = [
-   "pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","jpg","jpeg","png","gif","image","video","audio",
- ];
- 
- export function MultiUploader() {
-   return (
-     <FileUploader
-       multiple
-       extensions={exts}
-       description="Seleziona più file"
-       formatDescription="Trascina o clicca per selezionare più file"
-     />
-   );
- }
- ```
- 
- ### With Limits
- 
- ```tsx
- import { FileUploader } from "laif-ds";
- 
- export function LimitedUploader() {
-   return (
-     <FileUploader
-       multiple
-       maxFiles={3}
-       maxTotalSize={10 * 1024 * 1024} // 10 MB
-       description="Con limiti su numero e dimensione totale"
-       formatDescription="Esempio: max 3 file, max totale 10 MB"
-     />
-   );
- }
- ```
- 
- ### External Upload Flow
- 
- ```tsx
- import * as React from "react";
- import { Button } from "laif-ds";
- import { FileUploader } from "laif-ds";
- 
- export function ExternalUploadExample() {
-   const [files, setFiles] = React.useState<File[]>([]);
-   const [loading, setLoading] = React.useState(false);
- 
-   const handleSubmit = async () => {
-     setLoading(true);
-     // ...upload files
-     await new Promise((r) => setTimeout(r, 1500));
-     setLoading(false);
-     alert(`Upload completato: ${files.length} file`);
-   };
- 
-   return (
-     <div className="space-y-4">
-       <FileUploader multiple onUpload={setFiles} />
-       {files.length > 0 && (
-         <div className="flex justify-end">
-           <Button onClick={handleSubmit} isLoading={loading} iconLeft="Upload">
-             {loading ? "Caricamento..." : `Carica ${files.length} file`}
-           </Button>
-         </div>
-       )}
-     </div>
-   );
- }
- ```
- 
- ---
- 
- ## Notes
- 
- - **A11y**: Dropzone is a button-like region with `aria-describedby` hints and keyboard support.
- - **Errors**: Limit violations are summarized in a compact caption.
- - **Localization**: Provide localized `description`/`formatDescription`/labels when needed.
- 
+# FileUploader
+
+## Overview
+
+Drag-and-drop uploader with keyboard activation, file type filtering, limits (count/total size), previews via `FilePreview`, and external upload integration.
+
+---
+
+## Props
+
+| Prop                | Type                      | Default                                            | Description                                               |
+| ------------------- | ------------------------- | -------------------------------------------------- | --------------------------------------------------------- |
+| `extensions`        | `AcceptItem[]`            | `["pdf","image","video","audio"]`                  | Allowed extensions/categories (maps to accept attribute). |
+| `multiple`          | `boolean`                 | `false`                                            | Enables multiple file selection.                          |
+| `onUpload`          | `(files: File[]) => void` | `undefined`                                        | Called whenever selected files change.                    |
+| `description`       | `string`                  | `"Trascina un file o clicca per selezionare"`      | Dropzone hint.                                            |
+| `formatDescription` | `string`                  | `"Formato accettato: PDF, Immagini, Video, Audio"` | Accepted formats hint.                                    |
+| `selectedLabel`     | `string`                  | `"File selezionati"`                               | Title shown above selected files list.                    |
+| `removeAllLabel`    | `string`                  | `"rimuovi tutto"`                                  | Label for the "remove all" button.                        |
+| `maxTotalSize`      | `number` (bytes)          | `undefined`                                        | Maximum total size of selected files.                     |
+| `maxFiles`          | `number`                  | `undefined`                                        | Maximum number of files (when `multiple` is true).        |
+
+`AcceptItem` includes: `pdf | doc | docx | xls | xlsx | ppt | pptx | txt | csv | jpg | jpeg | png | gif | image | video | audio | zip | rar | 7z | tar | gz | tgz`.
+
+---
+
+## Behavior
+
+- **Dropzone**: Click or drag files; keyboard accessible (Enter/Space opens file dialog).
+- **Filtering**: `extensions` map to accept string; only matching files are added.
+- **Limits**: Enforces `maxFiles` and `maxTotalSize` (with compact error caption).
+- **Previews**: Renders selected files with `FilePreview`; supports remove per file and remove-all.
+- **Integration**: `onUpload` provides the current `File[]`; perform the actual upload externally.
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import { FileUploader } from "laif-ds";
+
+export function DefaultUploader() {
+  return <FileUploader multiple={false} />;
+}
+```
+
+### Multiple + Custom Extensions
+
+```tsx
+import { FileUploader, type AcceptItem } from "laif-ds";
+
+const exts: AcceptItem[] = [
+  "pdf",
+  "doc",
+  "docx",
+  "xls",
+  "xlsx",
+  "ppt",
+  "pptx",
+  "txt",
+  "csv",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "image",
+  "video",
+  "audio",
+  "zip",
+  "rar",
+  "7z",
+  "tar",
+  "gz",
+  "tgz",
+];
+
+export function MultiUploader() {
+  return (
+    <FileUploader
+      multiple
+      extensions={exts}
+      description="Seleziona più file"
+      formatDescription="Trascina o clicca per selezionare più file"
+    />
+  );
+}
+```
+
+### With Limits
+
+```tsx
+import { FileUploader } from "laif-ds";
+
+export function LimitedUploader() {
+  return (
+    <FileUploader
+      multiple
+      maxFiles={3}
+      maxTotalSize={10 * 1024 * 1024} // 10 MB
+      description="Con limiti su numero e dimensione totale"
+      formatDescription="Esempio: max 3 file, max totale 10 MB"
+    />
+  );
+}
+```
+
+### External Upload Flow
+
+```tsx
+import * as React from "react";
+import { Button } from "laif-ds";
+import { FileUploader } from "laif-ds";
+
+export function ExternalUploadExample() {
+  const [files, setFiles] = React.useState<File[]>([]);
+  const [loading, setLoading] = React.useState(false);
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    // ...upload files
+    await new Promise((r) => setTimeout(r, 1500));
+    setLoading(false);
+    alert(`Upload completato: ${files.length} file`);
+  };
+
+  return (
+    <div className="space-y-4">
+      <FileUploader multiple onUpload={setFiles} />
+      {files.length > 0 && (
+        <div className="flex justify-end">
+          <Button onClick={handleSubmit} isLoading={loading} iconLeft="Upload">
+            {loading ? "Caricamento..." : `Carica ${files.length} file`}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **A11y**: Dropzone is a button-like region with `aria-describedby` hints and keyboard support.
+- **Errors**: Limit violations are summarized in a compact caption.
+- **Localization**: Provide localized `description`/`formatDescription`/labels when needed.

package/dist/agent-docs/components/Form.md

@@ -54,7 +54,9 @@ export function ProfileForm() {
             </FormItem>
           )}
         />
-        <Button type="submit" className="mt-4">Save</Button>
+        <Button type="submit" className="mt-4">
+          Save
+        </Button>
       </form>
     </Form>
   );