@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/widgets/upload/UploadResultCategory.tsx

@@ -1,6 +1,6 @@
-import { CheckCircleIcon } from "lucide-react";
-import { useState } from "react";
-import { useUITranslation } from "@vertesia/ui/i18n";
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { CheckCircleIcon } from 'lucide-react';
+import { useId, useState } from 'react';
 
 /**
  * Props for the UploadResultCategory component
@@ -31,53 +31,57 @@ export function UploadResultCategory({
     title,
     count,
     icon = <CheckCircleIcon className="h-4 w-4 text-green-500" />,
-    items
+    items,
 }: UploadResultCategoryProps) {
     const { t } = useUITranslation();
     const [isExpanded, setIsExpanded] = useState(false);
+    const panelId = useId();
 
     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"
+            {/* The header IS the toggle: a real <button> with aria-expanded/aria-controls so
+                keyboard users can operate it (Enter / Space) and screen readers announce state. */}
+            <button
+                type="button"
+                aria-expanded={isExpanded}
+                aria-controls={panelId}
+                className="w-full flex items-center justify-between p-3 bg-color-muted/10 cursor-pointer text-start bg-transparent border-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 onClick={() => setIsExpanded(!isExpanded)}
             >
-                <div className="flex items-center">
-                    <span className="mr-2">{icon}</span>
+                <span className="flex items-center">
+                    <span className="me-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">
+                    <span className="ms-2 px-2 py-0.5 bg-color-muted/20 rounded-full text-xs">{count}</span>
+                </span>
+                <span className="text-muted" aria-hidden="true">
                     <svg
                         className={`h-5 w-5 transition-transform ${isExpanded ? 'transform rotate-180' : ''}`}
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
+                        aria-hidden="true"
                     >
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                     </svg>
-                </button>
-            </div>
+                </span>
+            </button>
 
             {isExpanded && (
-                <div className="p-3 border-t border-color-border max-h-48 overflow-y-auto">
+                <div id={panelId} 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) => (
+                                // biome-ignore lint/suspicious/noArrayIndexKey: list order is stable for this render
                                 <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">
-                            {t('upload.noItems')}
-                        </div>
+                        <div className="text-sm text-muted py-2">{t('upload.noItems')}</div>
                     )}
                 </div>
             )}
         </div>
     );
-}
+}

package/src/widgets/upload/UploadSummary.tsx

@@ -1,6 +1,6 @@
-import { CheckCircleIcon, AlertCircleIcon, XCircleIcon } from "lucide-react";
-import { useUITranslation } from "@vertesia/ui/i18n";
-import { UploadResultCategory } from "./UploadResultCategory";
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { AlertCircleIcon, CheckCircleIcon, XCircleIcon } from 'lucide-react';
+import { UploadResultCategory } from './UploadResultCategory';
 
 /**
  * Processed file information
@@ -30,9 +30,9 @@ export interface UploadSummaryProps {
 
 /**
  * Displays a summary of upload results with collapsible categories
- * 
+ *
  * @example
- * <UploadSummary 
+ * <UploadSummary
  *   files={[
  *     { name: "document1.pdf", status: "success" },
  *     { name: "document2.pdf", status: "skipped" }
@@ -40,36 +40,36 @@ export interface UploadSummaryProps {
  *   location="/reports/2023"
  * />
  */
-export function UploadSummary({ files, className = "", location, collection }: UploadSummaryProps) {
+export function UploadSummary({ files, className = '', location, collection }: UploadSummaryProps) {
     const { t } = useUITranslation();
     // 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');
-    
+    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">
+                <div className="size-8 me-4 rounded-full bg-success/10 flex items-center justify-center">
                     <CheckCircleIcon className="size-4 text-success" />
                 </div>
                 <div>
                     <p className="text-muted">
                         {t('upload.filesProcessed', { count: totalCount })}
-                        {collection ? t('upload.inCollection', { collection }) : ""}
-                        {location ? t('upload.inFolder', { location }) : ""}
+                        {collection ? t('upload.inCollection', { collection }) : ''}
+                        {location ? t('upload.inFolder', { location }) : ''}
                     </p>
                 </div>
             </div>
-            
+
             {/* Upload results categories */}
             <div className="space-y-3 mt-2">
                 {/* Successful uploads */}
@@ -78,40 +78,40 @@ export function UploadSummary({ files, className = "", location, collection }: U
                         title={t('upload.successfullyUploaded')}
                         count={successCount}
                         icon={<CheckCircleIcon className="h-4 w-4 text-green-500" />}
-                        items={successFiles.map(f => f.name)}
+                        items={successFiles.map((f) => f.name)}
                     />
                 )}
-                
+
                 {/* Updated files */}
                 {updatedCount > 0 && (
                     <UploadResultCategory
                         title={t('upload.successfullyUpdated')}
                         count={updatedCount}
                         icon={<CheckCircleIcon className="h-4 w-4 text-blue-500" />}
-                        items={updatedFiles.map(f => f.name)}
+                        items={updatedFiles.map((f) => f.name)}
                     />
                 )}
-                
+
                 {/* Skipped files */}
                 {skippedCount > 0 && (
                     <UploadResultCategory
                         title={t('upload.skippedAlreadyExisted')}
                         count={skippedCount}
                         icon={<AlertCircleIcon className="h-4 w-4 text-amber-500" />}
-                        items={skippedFiles.map(f => f.name)}
+                        items={skippedFiles.map((f) => f.name)}
                     />
                 )}
-                
+
                 {/* Failed uploads */}
                 {failedCount > 0 && (
                     <UploadResultCategory
                         title={t('upload.failedToUpload')}
                         count={failedCount}
                         icon={<XCircleIcon className="h-4 w-4 text-red-500" />}
-                        items={failedFiles.map(f => f.name)}
+                        items={failedFiles.map((f) => f.name)}
                     />
                 )}
             </div>
         </div>
     );
-}
+}

package/src/widgets/upload/index.ts

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

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

@@ -1,27 +1,27 @@
 import { useXMLViewerContext } from '../../context/xml-viewer-context';
-import { AttributesObject } from '../../types';
+import type { AttributesObject } from '../../types';
 
 export interface AttributesProps {
-  attributes?: AttributesObject;
+    attributes?: AttributesObject;
 }
 
 export function Attributes(props: AttributesProps) {
-  const { attributes } = props;
-  const { theme } = useXMLViewerContext();
+    const { attributes } = props;
+    const { theme } = useXMLViewerContext();
 
-  if (!attributes) {
-    return null;
-  }
+    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>
+    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>
-      ))}
-    </span>
-  );
+    );
 }

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

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

@@ -1,32 +1,30 @@
-import { SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
 import { useXMLViewerContext } from '../../context/xml-viewer-context';
 
 export interface CollapseIconProps {
-  collapsed: boolean;
+    collapsed: boolean;
 }
 
 export function CollapseIcon(props: CollapseIconProps): React.ReactElement | null {
-  const { collapsible, theme } = useXMLViewerContext();
-  const { collapsed } = props;
+    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;
+    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>
-  )
-}
+    return (
+        <svg width="16px" height="16px" viewBox="0 0 24 24" aria-hidden="true" {...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

@@ -1,30 +1,30 @@
-import { ReactNode } from 'react';
+import type { 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;
+    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);
+    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>
-  );
+    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

@@ -1,23 +1,23 @@
 import { Attributes } from '../../components/Attributes';
 import { useXMLViewerContext } from '../../context/xml-viewer-context';
-import { AttributesObject } from '../../types';
+import type { AttributesObject } from '../../types';
 
 export interface DeclarationTagProps {
-  indentation: string;
-  tagKey: string;
-  attributes: AttributesObject;
+    indentation: string;
+    tagKey: string;
+    attributes: AttributesObject;
 }
 
 export function DeclarationTag(props: DeclarationTagProps) {
-  const { indentation, tagKey, attributes } = props;
-  const { theme } = useXMLViewerContext();
+    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>
-  );
+    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

@@ -6,78 +6,78 @@ 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';
+import type { Element } from '../../types';
 
 export interface ElementsProps {
-  elements: Element[];
-  level?: number;
-  isText?: boolean;
+    elements: Element[];
+    level?: number;
+    isText?: boolean;
 }
 export function Elements(props: ElementsProps) {
-  const { elements, level = 0, isText = true } = props;
-  const { indentSize } = useXMLViewerContext();
+    const { elements, level = 0, isText = true } = props;
+    const { indentSize } = useXMLViewerContext();
 
-  if (!Array.isArray(elements) || elements.length === 0) {
-    return null;
-  }
+    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);
+    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>
-            );
-        }
-      })}
-    </>
-  );
+                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

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