generator-pninja 2.0.1 → 2.0.2

package/generators/client/templates/react/src/components/BlobViewer.tsx.ejs

@@ -26,14 +26,17 @@ function base64ToUint8Array(base64: string): Uint8Array {
   return bytes;
 }
 
+const linkClass =
+  'inline-block rounded-sm  hover:outline-2 hover:outline-offset-2 hover:outline-blue-600 hover:dark:outline-sky-300 focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 focus:dark:outline-sky-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 focus-visible:dark:outline-sky-300';
+
 // ─── Image viewer ────────────────────────────────────────────────────────────
 
 const ImageViewer: React.FC<{ objectUrl: string; name: string }> = ({ objectUrl, name }) => (
-  <a href={objectUrl} target="_blank" rel="noopener noreferrer">
+  <a href={objectUrl} target="_blank" rel="noopener noreferrer" className={linkClass}>
     <img
       src={objectUrl}
       alt={name}
-      className="max-w-xs max-h-80 rounded border border-gray-200 dark:border-gray-700"
+      className="max-w-xs max-h-80 rounded-sm border border-gray-200 dark:border-gray-700"
     />
   </a>
 );
@@ -45,12 +48,13 @@ const VideoViewer: React.FC<{ objectUrl: string; name: string }> = ({ objectUrl,
     href={objectUrl}
     target="_blank"
     rel="noopener noreferrer"
-    className="h-full inline-block relative"
+    // className="h-full inline-block relative"
+    className={`relative ${linkClass}`}
   >
     <video
       src={objectUrl}
       preload="metadata"
-      className="max-w-xs max-h-80 rounded border border-gray-200 dark:border-gray-700"
+      className="max-w-xs max-h-80 rounded-sm border border-gray-200 dark:border-gray-700"
     />
     <div className="absolute inset-0 flex items-center justify-center bg-black/30">
       <Icon icon="play_circle" size={12} className="text-white drop-shadow" />
@@ -123,11 +127,11 @@ const PdfViewer: React.FC<{ blob: BlobValue; objectUrl: string }> = ({ blob, obj
   return (
     <>
       {thumbnailUrl && !pdfError && (
-        <a href={objectUrl} target="_blank" rel="noopener noreferrer" className="block">
+        <a href={objectUrl} target="_blank" rel="noopener noreferrer" className={linkClass}>
           <img
             src={thumbnailUrl}
             alt={blob.name}
-            className="max-w-xs rounded border border-gray-200 dark:border-gray-700"
+            className="max-w-xs rounded-sm border border-gray-200 dark:border-gray-700"
           />
         </a>
       )}
@@ -211,13 +215,17 @@ const BlobViewer: React.FC<BlobViewerProps> = ({ blob, className, compact = fals
     </>
   );
 
+  if (compact && !isInlineImage && !isVideo && !isPdf) return null;
+
   if (compact) {
     return (
       <div
         className={[
-          'w-20 h-20 flex-shrink-0 rounded overflow-hidden bg-slate-200 dark:bg-slate-600 flex items-center justify-center [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_video]:w-full [&_video]:h-full [&_video]:object-cover [&_a]:w-full [&_a]:h-full',
+          'w-20 h-20 p-1 outline-2 -outline-offset-2 focus-within:outline-0 hover:outline-0 flex-shrink-0 rounded-md overflow-hidden bg-slate-200 dark:bg-slate-600 flex items-center justify-center [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_video]:w-full [&_video]:h-full [&_video]:object-cover [&_a]:w-full [&_a]:h-full',
           className,
-        ].filter(Boolean).join(' ')}
+        ]
+          .filter(Boolean)
+          .join(' ')}
       >
         {preview}
       </div>

package/generators/client/templates/react/src/components/formElements/FileField.tsx.ejs

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import { Icon } from '../Icon';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useFormContext, useController, FieldError } from 'react-hook-form';
 import { FormLabel, FormFieldInfo } from './index';
 import { useId } from 'react-aria';
@@ -114,7 +114,7 @@ const FilePreview: React.FC<{
       <button
         type="button"
         onClick={onRemove}
-        className="flex-shrink-0 flex items-center text-sm cursor-pointer font-medium gap-1 text-slate-600 dark:text-slate-300"
+        className="icon-text-button flex-shrink-0 flex items-center text-sm cursor-pointer font-medium gap-1 text-slate-600 dark:text-slate-300"
         aria-label={t('actions.crud.file.removeSelection')}
       >
         <Icon icon="close" size={5} />
@@ -132,6 +132,19 @@ const DropZone: React.FC<{
   hasError: boolean;
 }> = ({ accept, isDisabled, onFileSelected, hasError }) => {
   const { t } = useTranslation();
+  const [isFocused, setIsFocused] = useState(false);
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!dropZoneRef.current) return;
+    // RAC renders an internal button with aria-label for screen reader accessibility.
+    // We remove it from the tab order since our FileTrigger Button handles keyboard interaction.
+    // Screen readers can still reach it via arrow key navigation.
+    const internalButton = dropZoneRef.current.querySelector<HTMLElement>(
+      'button[data-react-aria-pressable][aria-label]'
+    );
+    if (internalButton) internalButton.tabIndex = -1;
+  }, []);
 
   const handleDrop = async (e: import('react-aria-components').DropEvent) => {
     const droppedItem = e.items.find((item) => item.kind === 'file');
@@ -142,13 +155,17 @@ const DropZone: React.FC<{
 
   return (
     <AriaDropZone
+      ref={dropZoneRef}
       onDrop={handleDrop}
       isDisabled={isDisabled}
+      tabIndex={-1}
       className={({ isDropTarget }) =>
         [
-          'flex flex-col items-center justify-center gap-2 p-6 rounded-md border-2 border-dashed transition-colors outline-none',
-          isDropTarget
-            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+          'rounded-md border-2 border-dashed transition-colors',
+          isDropTarget || isFocused
+            ? hasError
+              ? 'border-red-400 bg-red-50 dark:bg-red-900/20'
+              : 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
             : hasError
               ? 'border-red-400 bg-red-50/30 dark:bg-red-900/10'
               : 'border-slate-300 dark:border-slate-600',
@@ -167,14 +184,20 @@ const DropZone: React.FC<{
         >
           <Button
             isDisabled={isDisabled}
-            className="flex flex-col items-center gap-2 cursor-pointer w-full focus:outline-none"
+            isInvalid={hasError}
+            className="drop-zone-button flex flex-col items-center justify-center gap-2 p-6"
+            onFocusChange={setIsFocused}
           >
             <Icon
               icon="cloud_upload"
               size={8}
-              className={isDropTarget ? 'text-blue-500' : 'text-slate-400'}
+              className={isDropTarget || isFocused
+                ? hasError ? 'text-red-400' : 'text-blue-500'
+                : 'text-slate-400'}
             />
-            <span className="text-sm text-slate-600 dark:text-slate-400 text-center">
+            <span className={`text-sm text-center ${isDropTarget || isFocused
+              ? hasError ? 'text-red-600 dark:text-red-400' : 'text-blue-600 dark:text-blue-400'
+              : 'text-slate-600 dark:text-slate-400'}`}>
               {isDropTarget
                 ? t('actions.crud.file.dropHere')
                 : t('actions.crud.file.dragOrClick')}
@@ -207,18 +230,35 @@ const FileField: React.FC<FileFieldProps> = ({
   const { required, minbytes, maxbytes } = validations || {};
   const {
     control,
-    register,
     setValue,
     trigger,
-    formState: { errors },
   } = useFormContext();
 
   const {
+    field: { ref: fieldRef },
     fieldState: { error },
   } = useController({
     name: fieldName,
     control,
-    rules: {},
+    rules: {
+      validate: (value: unknown | undefined) => {
+        const fileData = value as BlobValue | null;
+
+        if (fileData?.type && !fileData.type.startsWith(accept?.replace(/\/\*$/, '') ?? '')) {
+          return `errors.validations.file.invalidType:${accept}:${fileData.type}`;
+        }
+        if (typeof fileData?.size === 'number' && minbytes && fileData?.size < minbytes) {
+          return `errors.validations.file.minSize:${prettyBytes(minbytes)}:${prettyBytes(fileData?.size)}`;
+        }
+        if (typeof fileData?.size === 'number' && maxbytes && fileData?.size > maxbytes) {
+          return `errors.validations.file.maxSize:${prettyBytes(maxbytes)}:${prettyBytes(fileData?.size)}`;
+        }
+        if (required && (isMarkedForDeletion || (!fileData && !existingBlob?.name))) {
+          return 'errors.validations.file.required';
+        }
+        return true;
+      },
+    },
   });
 
   const markForDeletion = (mark: boolean) => {
@@ -226,28 +266,6 @@ const FileField: React.FC<FileFieldProps> = ({
     setValue(fieldName, mark ? null : existingBlob);
     setTimeout(() => trigger(fieldName), 0);
   };
-
-  // Register the field in RHF for validation — not bound to a native input
-  register(fieldName, {
-    validate: (value: unknown | undefined) => {
-      const fileData = value as BlobValue | null;
-
-      if (fileData?.type && !fileData.type.startsWith(accept?.replace(/\/\*$/, '') ?? '')) {
-        return `errors.validations.file.invalidType:${accept}:${fileData.type}`;
-      }
-      if (typeof fileData?.size === 'number' && minbytes && fileData?.size < minbytes) {
-        return `errors.validations.file.minSize:${prettyBytes(minbytes)}:${prettyBytes(fileData?.size)}`;
-      }
-      if (typeof fileData?.size === 'number' && maxbytes && fileData?.size > maxbytes) {
-        return `errors.validations.file.maxSize:${prettyBytes(maxbytes)}:${prettyBytes(fileData?.size)}`;
-      }
-      if (required && (isMarkedForDeletion || (!fileData && !existingBlob?.name))) {
-        return 'errors.validations.file.required';
-      }
-      return true;
-    },
-  });
-
   const processFile = async (file: File) => {
     setSelectedFile(file);
     try {
@@ -281,6 +299,7 @@ const FileField: React.FC<FileFieldProps> = ({
     setTimeout(() => trigger(fieldName), 0);
   };
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const fieldId = useId();
   const labelId = useId();
   const errorId = useId();
@@ -289,11 +308,24 @@ const FileField: React.FC<FileFieldProps> = ({
   const showDropZone = shouldShowInput && !isMarkedForDeletion;
 
   return (
-    <div className={className}>
+    <div className={className} ref={containerRef}>
       <FormLabel id={labelId} validations={validations}>
         {label}
       </FormLabel>
       <div className="space-y-2">
+        {/* Focus anchor for RHF scroll-to-error */}
+        <span
+          ref={fieldRef}
+          tabIndex={-1}
+          className="sr-only"
+          aria-hidden="true"
+          onFocus={() => {
+            const firstButton = containerRef.current?.querySelector<HTMLElement>(
+              'button:not([tabindex="-1"]), [tabindex="0"]'
+            );
+            firstButton?.focus();
+          }}
+        />
 
         {/* File esistente */}
         {hasFile && !shouldShowInput && !isMarkedForDeletion && (
@@ -301,7 +333,7 @@ const FileField: React.FC<FileFieldProps> = ({
             <div className="flex items-center justify-between">
               <a
                 href={`${location.pathname.replace('entities', 'api').replace('edit/', '')}/${fieldName}/${existingBlob?.name}`}
-                className="hover:underline flex items-center gap-2 text-sm"
+                className="icon-text-button hover:underline flex items-center gap-2 text-sm"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label={`${t('actions.crud.file.viewOrDownload')} ${existingBlob?.name} (${t('common.opensInNewWindow')})`}
@@ -316,7 +348,7 @@ const FileField: React.FC<FileFieldProps> = ({
                 <button
                   type="button"
                   onClick={() => setShouldShowInput(true)}
-                  className="flex items-center text-sm cursor-pointer font-medium gap-1"
+                  className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
                 >
                   <Icon icon="swap_horiz" size={5} />
                   {t('actions.crud.edit')}
@@ -324,7 +356,7 @@ const FileField: React.FC<FileFieldProps> = ({
                 <button
                   type="button"
                   onClick={() => markForDeletion(true)}
-                  className="flex items-center text-sm cursor-pointer font-medium gap-1"
+                  className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
                 >
                   <Icon icon="delete" size={5} />
                   {t('actions.crud.delete')}
@@ -350,7 +382,7 @@ const FileField: React.FC<FileFieldProps> = ({
               <button
                 type="button"
                 onClick={() => markForDeletion(false)}
-                className="flex items-center text-sm cursor-pointer font-medium gap-1"
+                className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
               >
                 <Icon icon="undo" size={5} />
                 {t('common.undo')}
@@ -372,7 +404,7 @@ const FileField: React.FC<FileFieldProps> = ({
               <button
                 type="button"
                 onClick={undoEdit}
-                className="flex items-center text-sm cursor-pointer font-medium gap-1"
+                className="icon-text-button flex items-center text-sm cursor-pointer font-medium gap-1"
               >
                 <Icon icon="undo" size={5} />
                 {t('common.cancel')}

package/generators/client/templates/react/src/index.css.ejs

@@ -75,6 +75,14 @@
     focus:inset-ring-0 focus:outline-2 focus:outline-offset-2 focus:outline-red-600 dark:focus:outline-red-500
     inset-ring-2 inset-ring-red-600 dark:inset-ring-red-500;
   }
+  .drop-zone-button {
+    @apply outline-0 rounded-md w-full cursor-pointer transition-colors;
+  }
+  .icon-text-button {
+    @apply rounded-full cursor-pointer
+    focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 focus:dark:outline-sky-300
+    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 focus-visible:dark:outline-sky-300;
+  }
   .kdb-shortcut {
     @apply font-sans text-xs h-5 min-w-5 items-center justify-center rounded border px-1 hidden xl:inline-flex;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-pninja",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Generator for PHP/Laravel + SQL + Vite + React applications",
   "type": "module",
   "files": [