@vertesia/ui 0.24.0-dev.202601221707

package/src/widgets/upload/DropZone.tsx

@@ -0,0 +1,259 @@
+import { useState, useRef } from "react";
+import { UploadIcon } from "lucide-react";
+import { Button } from "@vertesia/ui/core";
+
+/**
+ * Props for the DropZone component
+ */
+export interface DropZoneProps {
+    /**
+     * Callback when files are dropped or selected
+     */
+    onDrop: (files: File[], customMessage?: { count: number; message: string }) => void;
+
+    /**
+     * Message to display in the drop zone
+     */
+    message: string;
+
+    /**
+     * Label for the upload button
+     */
+    buttonLabel?: string;
+
+    /**
+     * Allow selection of folders
+     * @default true
+     */
+    allowFolders?: boolean;
+
+    /**
+     * CSS class to apply to the container
+     */
+    className?: string;
+}
+
+/**
+ * A reusable drop zone component for file uploads
+ *
+ * @example
+ * <DropZone
+ *   onDrop={handleFileSelect}
+ *   message="Drag and drop files here"
+ *   buttonLabel="Select Files"
+ * />
+ */
+export function DropZone({
+    onDrop,
+    message,
+    buttonLabel = "Upload Files",
+    allowFolders = true,
+    className = ""
+}: DropZoneProps) {
+    const [isDragging, setIsDragging] = useState(false);
+    const dropZoneRef = useRef<HTMLDivElement>(null);
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        if (e.dataTransfer.types.includes('Files')) {
+            setIsDragging(true);
+        }
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+        e.preventDefault();
+
+        // Only set dragging to false if leaving the container (not entering a child)
+        if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget as Node)) {
+            setIsDragging(false);
+        }
+    };
+
+    const handleDrop = async (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            // Handle folders using the DataTransferItemList API which supports directory reading
+            const items = Array.from(e.dataTransfer.items);
+            const files: File[] = [];
+            const folders = new Set<string>();
+
+            const processEntry = async (entry: any) => {
+                if (entry.isFile) {
+                    // Get file
+                    const file = await new Promise<File>((resolve) => {
+                        entry.file((file: File) => {
+                            // Store full path in the file object for location use
+                            Object.defineProperty(file, "webkitRelativePath", {
+                                writable: true,
+                                value: entry.fullPath.substring(1), // Remove leading slash
+                            });
+                            resolve(file);
+                        });
+                    });
+
+                    // Skip hidden files
+                    if (!file.name.startsWith(".") && file.size > 0) {
+                        files.push(file);
+                    }
+
+                    // Add folder path to tracking
+                    const folderPath = entry.fullPath.substring(1).split("/").slice(0, -1).join("/");
+                    if (folderPath) {
+                        folders.add(folderPath);
+                    }
+                } else if (entry.isDirectory) {
+                    // Get folder reader
+                    const reader = entry.createReader();
+                    const entries = await new Promise<any[]>((resolve) => {
+                        reader.readEntries((entries: any[]) => {
+                            resolve(entries);
+                        });
+                    });
+
+                    // Process all entries
+                    await Promise.all(entries.map(processEntry));
+
+                    // Add this folder to tracking
+                    const folderPath = entry.fullPath.substring(1);
+                    if (folderPath) {
+                        folders.add(folderPath);
+                    }
+                }
+            };
+
+            try {
+                // Process all dropped items
+                await Promise.all(
+                    items.map((item) => {
+                        const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : item;
+                        if (entry) {
+                            return processEntry(entry);
+                        }
+                        return Promise.resolve();
+                    }),
+                );
+
+                if (files.length > 0) {
+                    const topLevelFolders = new Set(
+                        Array.from(folders)
+                            .map((path) => path.split("/")[0])
+                            .filter(Boolean),
+                    );
+
+                    const folderCount = topLevelFolders.size;
+                    const fileCount = files.length;
+
+                    let message = "";
+                    if (folderCount > 0) {
+                        message =
+                            folderCount === 1
+                                ? `Preparing to upload 1 folder with ${fileCount} files...`
+                                : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
+                    } else {
+                        message = `Preparing to upload ${fileCount} file${fileCount === 1 ? "" : "s"}...`;
+                    }
+
+                    onDrop(files, { count: files.length, message });
+                }
+            } catch (error) {
+                console.error("Error processing dropped files:", error);
+                // Fallback to simple file array if folder processing fails
+                const fileArray = Array.from(e.dataTransfer.files);
+                if (fileArray.length > 0) {
+                    onDrop(fileArray);
+                }
+            }
+        } else if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            // Fallback for browsers that don't support items API
+            const fileArray = Array.from(e.dataTransfer.files);
+            onDrop(fileArray);
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const fileArray = Array.from(e.target.files);
+
+            // Check if there are directories (with webkitRelativePath)
+            const hasDirectories = fileArray.some(
+                (file) => (file as any).webkitRelativePath && (file as any).webkitRelativePath.includes("/"),
+            );
+
+            if (hasDirectories) {
+                // Count the unique top-level directories
+                const topLevelDirs = new Set(
+                    fileArray.map((file) => (file as any).webkitRelativePath?.split("/")[0]).filter(Boolean),
+                );
+
+                const folderCount = topLevelDirs.size;
+                const fileCount = fileArray.length;
+
+                // Create custom message with folder info
+                const formattedMessage =
+                    folderCount === 1
+                        ? `Preparing to upload 1 folder with ${fileCount} files...`
+                        : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
+
+                const customMessage = {
+                    count: fileArray.length,
+                    message: formattedMessage,
+                };
+
+                onDrop(fileArray, customMessage);
+            } else {
+                // Regular file upload
+                const feedback = {
+                    count: fileArray.length,
+                    message: `Preparing to upload ${fileArray.length} file${fileArray.length === 1 ? "" : "s"}...`,
+                };
+                onDrop(fileArray, feedback);
+            }
+        }
+    };
+
+    const selectFile = () => {
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.multiple = true;
+        fileInput.accept = "*";
+        fileInput?.click();
+        fileInput.onchange = (event) => {
+            handleChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
+        };
+    };
+
+    const selectFolder = () => {
+        const folderInput = document.createElement("input");
+        folderInput.type = "file";
+        folderInput.multiple = true;
+        folderInput.accept = "*";
+        (folderInput as any).webkitdirectory = true; // webkitdirectory is not standard but widely supported
+        folderInput?.click();
+        folderInput.onchange = (event) => {
+            handleChange(event as unknown as React.ChangeEvent<HTMLInputElement>);
+        };
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${isDragging ? "border-color-primary bg-color-primary/10" : "border-dashed border-color-border"
+                } ${className}`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+        >
+            <UploadIcon
+                className={`h-12 w-12 mb-3 transition-colors ${isDragging ? "text-primary" : "text-muted/50"}`}
+            />
+            <p className="text-muted">{message}</p>
+
+            <div className="flex gap-2 justify-center mt-2">
+                <Button onClick={selectFile}>{buttonLabel}</Button>
+                {allowFolders && (<Button onClick={selectFolder}>Select Folder</Button>)}
+            </div>
+
+        </div>
+    );
+}

package/src/widgets/upload/UploadResultCategory.tsx

@@ -0,0 +1,81 @@
+import { CheckCircleIcon } from "lucide-react";
+import { useState } from "react";
+
+/**
+ * Props for the UploadResultCategory component
+ */
+export interface UploadResultCategoryProps {
+    /** Category title */
+    title: string;
+    /** Number of items in this category */
+    count: number;
+    /** Icon to display next to the title */
+    icon?: React.ReactNode;
+    /** List of items to display */
+    items: string[];
+}
+
+/**
+ * Displays a collapsible category of upload results
+ *
+ * @example
+ * <UploadResultCategory
+ *   title="Successfully Uploaded"
+ *   count={3}
+ *   icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
+ *   items={["document1.pdf", "document2.pdf", "document3.pdf"]}
+ * />
+ */
+export function UploadResultCategory({
+    title,
+    count,
+    icon = <CheckCircleIcon className="h-4 w-4 text-green-500" />,
+    items
+}: UploadResultCategoryProps) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <div className="border border-color-border rounded-md overflow-hidden">
+            <div
+                className="flex items-center justify-between p-3 bg-color-muted/10 cursor-pointer"
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className="flex items-center">
+                    <span className="mr-2">{icon}</span>
+                    <span className="font-medium">{title}</span>
+                    <span className="ml-2 px-2 py-0.5 bg-color-muted/20 rounded-full text-xs">
+                        {count}
+                    </span>
+                </div>
+                <button className="text-muted">
+                    <svg
+                        className={`h-5 w-5 transition-transform ${isExpanded ? 'transform rotate-180' : ''}`}
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </button>
+            </div>
+
+            {isExpanded && (
+                <div className="p-3 border-t border-color-border max-h-48 overflow-y-auto">
+                    {items.length > 0 ? (
+                        <ul className="space-y-1">
+                            {items.map((item, index) => (
+                                <li key={index} className="text-sm py-1 px-2 rounded hover:bg-color-muted/10">
+                                    {item}
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <div className="text-sm text-muted py-2">
+                            No items to display
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/widgets/upload/UploadSummary.tsx

@@ -0,0 +1,115 @@
+import { CheckCircleIcon, AlertCircleIcon, XCircleIcon } from "lucide-react";
+import { UploadResultCategory } from "./UploadResultCategory";
+
+/**
+ * Processed file information
+ */
+export interface ProcessedFile {
+    /** The name of the file */
+    name: string;
+    /** The status of the file upload */
+    status: 'success' | 'updated' | 'skipped' | 'failed';
+    /** Error message if status is 'failed' */
+    error?: string;
+}
+
+/**
+ * Props for the UploadSummary component
+ */
+export interface UploadSummaryProps {
+    /** List of processed files */
+    files: ProcessedFile[];
+    /** Optional class name for styling */
+    className?: string;
+    /** Optional folder location where files were uploaded */
+    location?: string;
+    /** Optional collection name where files were uploaded */
+    collection?: string;
+}
+
+/**
+ * Displays a summary of upload results with collapsible categories
+ * 
+ * @example
+ * <UploadSummary 
+ *   files={[
+ *     { name: "document1.pdf", status: "success" },
+ *     { name: "document2.pdf", status: "skipped" }
+ *   ]}
+ *   location="/reports/2023"
+ * />
+ */
+export function UploadSummary({ files, className = "", location, collection }: UploadSummaryProps) {
+    // Group files by status
+    const successFiles = files.filter(f => f.status === 'success');
+    const updatedFiles = files.filter(f => f.status === 'updated');
+    const skippedFiles = files.filter(f => f.status === 'skipped');
+    const failedFiles = files.filter(f => f.status === 'failed');
+    
+    // Calculate counts
+    const successCount = successFiles.length;
+    const updatedCount = updatedFiles.length;
+    const skippedCount = skippedFiles.length;
+    const failedCount = failedFiles.length;
+    const totalCount = files.length;
+    
+    return (
+        <div className={`flex flex-col py-2 ${className}`}>
+            <div className="flex items-center mb-4">
+                <div className="size-8 mr-4 rounded-full bg-success/10 flex items-center justify-center">
+                    <CheckCircleIcon className="size-4 text-success" />
+                </div>
+                <div>
+                    <p className="text-muted">
+                        {totalCount} file{totalCount !== 1 ? "s" : ""} processed
+                        {collection ? ` in collection '${collection}'` : ""}
+                        {location ? ` in folder '${location}'` : ""}
+                    </p>
+                </div>
+            </div>
+            
+            {/* Upload results categories */}
+            <div className="space-y-3 mt-2">
+                {/* Successful uploads */}
+                {successCount > 0 && (
+                    <UploadResultCategory 
+                        title="Successfully Uploaded"
+                        count={successCount}
+                        icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
+                        items={successFiles.map(f => f.name)}
+                    />
+                )}
+                
+                {/* Updated files */}
+                {updatedCount > 0 && (
+                    <UploadResultCategory 
+                        title="Successfully Updated"
+                        count={updatedCount}
+                        icon={<CheckCircleIcon className="h-4 w-4 text-blue-500" />}
+                        items={updatedFiles.map(f => f.name)}
+                    />
+                )}
+                
+                {/* Skipped files */}
+                {skippedCount > 0 && (
+                    <UploadResultCategory 
+                        title="Skipped (Already Existed)"
+                        count={skippedCount}
+                        icon={<AlertCircleIcon className="h-4 w-4 text-amber-500" />}
+                        items={skippedFiles.map(f => f.name)}
+                    />
+                )}
+                
+                {/* Failed uploads */}
+                {failedCount > 0 && (
+                    <UploadResultCategory 
+                        title="Failed to Upload"
+                        count={failedCount}
+                        icon={<XCircleIcon className="h-4 w-4 text-red-500" />}
+                        items={failedFiles.map(f => f.name)}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

package/src/widgets/upload/index.ts

@@ -0,0 +1,3 @@
+export * from './DropZone';
+export * from './UploadResultCategory';
+export * from './UploadSummary';

package/src/widgets/xml-viewer/components/Attributes/index.tsx

@@ -0,0 +1,27 @@
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { AttributesObject } from '../../types';
+
+export interface AttributesProps {
+  attributes?: AttributesObject;
+}
+
+export function Attributes(props: AttributesProps) {
+  const { attributes } = props;
+  const { theme } = useXMLViewerContext();
+
+  if (!attributes) {
+    return null;
+  }
+
+  return (
+    <span>
+      {Object.entries(attributes).map(([key, value]) => (
+        <span key={`attribute-${key}`}>
+          <span style={{ color: theme.attributeKeyColor }}>{` ${key}`}</span>
+          <span style={{ color: theme.separatorColor }}>=</span>
+          <span style={{ color: theme.attributeValueColor }}>{`"${value}"`}</span>
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/widgets/xml-viewer/components/CDataTag/index.tsx

@@ -0,0 +1,21 @@
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { ReactNode } from 'react';
+
+export interface CDataTagProps {
+  indentation: string;
+  children: ReactNode;
+  isInline: boolean;
+}
+
+export function CDataTag(props: CDataTagProps) {
+  const { indentation, children, isInline } = props;
+  const { theme } = useXMLViewerContext();
+
+  return (
+    <div style={{ color: theme.cdataColor }}>
+      <span>{`${indentation}<![CDATA[`}</span>
+      {children}
+      <span>{`${isInline ? '' : indentation}]]>`}</span>
+    </div>
+  );
+}

package/src/widgets/xml-viewer/components/CollapseIcon/index.tsx

@@ -0,0 +1,32 @@
+import { SVGAttributes } from 'react';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+
+export interface CollapseIconProps {
+  collapsed: boolean;
+}
+
+export function CollapseIcon(props: CollapseIconProps): React.ReactElement | null {
+  const { collapsible, theme } = useXMLViewerContext();
+  const { collapsed } = props;
+
+  return collapsible ? (
+    <span style={{ position: 'relative' }}>
+      <span style={{ position: 'absolute', right: '0', border: 0, padding: 0, background: 'none' }}>
+        <Caret
+          fill={theme.separatorColor}
+          style={{ transform: `rotate(${collapsed ? 0 : 90}deg)`, transition: 'transform 0.2s' }}
+        />
+      </span>
+    </span>
+  ) : null;
+}
+
+function Caret({ ...attrs }: SVGAttributes<SVGElement>): React.ReactElement {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 24 24" {...attrs}>
+      <path
+        d="M9 17.898C9 18.972 10.2649 19.546 11.0731 18.8388L17.3838 13.3169C18.1806 12.6197 18.1806 11.3801 17.3838 10.6829L11.0731 5.16108C10.2649 4.45388 9 5.02785 9 6.1018V17.898Z"
+      />
+    </svg>
+  )
+}

package/src/widgets/xml-viewer/components/CommentTag/index.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { CollapseIcon } from '../../components/CollapseIcon';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { useCollapsible } from '../../hooks/useCollapsible';
+
+export interface CommentTagProps {
+  indentation: string;
+  children: ReactNode;
+  isInline: boolean;
+  level: number;
+}
+
+export function CommentTag(props: CommentTagProps) {
+  const { indentation, children, isInline, level } = props;
+  const { theme } = useXMLViewerContext();
+  const { collapsed, buttonProps } = useCollapsible(level);
+
+  return (
+    <div style={{ color: theme.commentColor }}>
+      <span {...buttonProps}>
+        <span>{indentation}</span>
+        <CollapseIcon collapsed={collapsed} />
+        <span>{'<!-- '}</span>
+      </span>
+      {!collapsed && children}
+      {collapsed && '...'}
+      <span>{`${isInline || collapsed ? ' ' : indentation}-->`}</span>
+    </div>
+  );
+}

package/src/widgets/xml-viewer/components/DeclarationTag/index.tsx

@@ -0,0 +1,23 @@
+import { Attributes } from '../../components/Attributes';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { AttributesObject } from '../../types';
+
+export interface DeclarationTagProps {
+  indentation: string;
+  tagKey: string;
+  attributes: AttributesObject;
+}
+
+export function DeclarationTag(props: DeclarationTagProps) {
+  const { indentation, tagKey, attributes } = props;
+  const { theme } = useXMLViewerContext();
+
+  return (
+    <div>
+      <span style={{ color: theme.separatorColor }}>{`${indentation}<?`}</span>
+      <span style={{ color: theme.tagColor }}>{`${tagKey.slice(1)}`}</span>
+      <Attributes attributes={attributes} />
+      <span style={{ color: theme.separatorColor }}>{'?>'}</span>
+    </div>
+  );
+}

package/src/widgets/xml-viewer/components/Elements/index.tsx

@@ -0,0 +1,83 @@
+import { CDataTag } from '../../components/CDataTag';
+import { CommentTag } from '../../components/CommentTag';
+import { DeclarationTag } from '../../components/DeclarationTag';
+import { Tag } from '../../components/Tag';
+import { TextElement } from '../../components/TextElement';
+import { ATTRIBUTE_CDATA, ATTRIBUTE_COMMENT, ATTRIBUTE_TEXT, DECLARATION_TAG } from '../../constants';
+import { useXMLViewerContext } from '../../context/xml-viewer-context';
+import { getIndentationString, getTagProps, isInlineTextElement } from '../../helpers';
+import { Element } from '../../types';
+
+export interface ElementsProps {
+  elements: Element[];
+  level?: number;
+  isText?: boolean;
+}
+export function Elements(props: ElementsProps) {
+  const { elements, level = 0, isText = true } = props;
+  const { indentSize } = useXMLViewerContext();
+
+  if (!Array.isArray(elements) || elements.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {elements.map((element, index) => {
+        const { tagKey, attributes, subElements, type } = getTagProps(element);
+        const hasSiblings = elements.length > 1;
+        const indentation = getIndentationString(indentSize, level);
+        const key = `${level}-${index}`;
+        const isInline = isInlineTextElement(subElements);
+
+        switch (type) {
+          case ATTRIBUTE_TEXT:
+            return (
+              <TextElement
+                key={key}
+                text={subElements as string}
+                indentation={indentation}
+                hasSiblings={hasSiblings}
+                isText={isText}
+              />
+            );
+          case ATTRIBUTE_COMMENT:
+            return (
+              <CommentTag key={key} isInline={isInline} indentation={indentation} level={level}>
+                <Elements elements={subElements as Element[]} level={level + 1} isText={false} />
+              </CommentTag>
+            );
+          case ATTRIBUTE_CDATA:
+            return (
+              <CDataTag key={key} indentation={indentation} isInline={isInline}>
+                <Elements elements={subElements as Element[]} level={level + 1} isText={false} />
+              </CDataTag>
+            );
+          case DECLARATION_TAG:
+            return (
+              <DeclarationTag
+                key={key}
+                indentation={indentation}
+                tagKey={tagKey}
+                attributes={attributes}
+              />
+            );
+          default:
+            return (
+              <Tag
+                key={key}
+                indentation={indentation}
+                tagKey={tagKey}
+                attributes={attributes}
+                isInline={isInline}
+                hasChildren={subElements.length > 0}
+                level={level}
+              >
+                <Elements elements={subElements as Element[]} level={level + 1} />
+              </Tag>
+            );
+        }
+      })}
+    </>
+  );
+}

package/src/widgets/xml-viewer/components/InvalidXml/index.tsx

@@ -0,0 +1,3 @@
+export function InvalidXml() {
+  return <div>Invalid XML!</div>;
+}