@campxdev/react-blueprint 3.0.0-alpha.5 → 3.0.0-alpha.6

package/src/components/Navigation/UploadDialog/UploadDialog.tsx

@@ -6,17 +6,81 @@ import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
 import { LoadingUploadDialogContainer } from './LoadingUploadDialogContainer';
 import { UploadDialogContainer } from './UploadDialogContainer';
 
+/**
+ * Props for the UploadDialog component
+ */
 export type UploadDialogProps = {
+  /** Function that renders the dialog trigger element. Receives open callback to open the dialog */
   anchor: (props: { open: () => void }) => ReactNode;
+  /** Optional callback fired when the dialog opens */
   onDialogOpen?: () => void;
+  /** Optional callback fired when the dialog closes */
   onDialogClose?: () => void;
+  /** Title displayed in the dialog header. Defaults to 'Upload File' */
   title?: string;
+  /** Optional URL to a sample file for download */
   sampleFileUrl?: string;
+  /** Callback function fired when the Upload Now button is clicked. Receives single File or File[] */
   onUpload: (file: File | File[]) => void;
+  /** HTML accept attribute value for the file input (e.g., '.pdf,.doc', 'image/*'). Defaults to all files */
   acceptFileType?: string;
+  /** Whether the upload is currently in progress. Defaults to false */
   loading?: boolean;
 };
 
+/**
+ * UploadDialog component that provides a file upload interface with preview and download sample options.
+ *
+ * This component manages file selection, displays selected file previews with delete capability,
+ * and provides options to download sample files. It supports loading states and file type filtering.
+ * The upload is triggered via an anchor element (trigger) that's configurable.
+ *
+ * @component
+ * @param {UploadDialogProps} props - The component props
+ * @param {(props: { open: () => void }) => ReactNode} props.anchor - Render function for the trigger element
+ * @param {(file: File | File[]) => void} props.onUpload - Callback when upload button is clicked
+ * @param {string} [props.title='Upload File'] - Dialog header title
+ * @param {string} [props.sampleFileUrl] - URL to download a sample file
+ * @param {string} [props.acceptFileType] - File type filter for the input (e.g., '.pdf', 'image/*')
+ * @param {boolean} [props.loading=false] - Whether upload is in progress
+ * @param {() => void} [props.onDialogOpen] - Callback when dialog opens
+ * @param {() => void} [props.onDialogClose] - Callback when dialog closes
+ *
+ * @returns {React.ReactElement} A fragment with the anchor element and Upload Dialog
+ *
+ * @example
+ * // Basic file upload
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Upload</button>}
+ *   title="Upload Document"
+ *   onUpload={(file) => uploadToServer(file)}
+ * />
+ *
+ * @example
+ * // Upload with sample file and type restriction
+ * <UploadDialog
+ *   anchor={({ open }) => <IconButton icon={<UploadIcon />} onClick={open} />}
+ *   title="Upload CSV File"
+ *   acceptFileType=".csv"
+ *   sampleFileUrl="https://example.com/sample.csv"
+ *   onUpload={async (file) => {
+ *     await uploadFile(file);
+ *     setUploadComplete(true);
+ *   }}
+ *   loading={isUploading}
+ *   onDialogClose={() => setIsUploading(false)}
+ * />
+ *
+ * @example
+ * // Image upload with loading state
+ * <UploadDialog
+ *   anchor={({ open }) => <button onClick={open}>Choose Avatar</button>}
+ *   title="Select Avatar"
+ *   acceptFileType="image/*"
+ *   onUpload={(file) => updateAvatar(file)}
+ *   loading={uploadInProgress}
+ * />
+ */
 export const UploadDialog = ({
   onUpload,
   sampleFileUrl,

package/src/shadcn-components/Layout/Sheet/Sheet.tsx

@@ -34,7 +34,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0  bg-black/50',
         className,
       )}
       {...props}
@@ -56,7 +56,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed  flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
           side === 'right' &&
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
           side === 'left' &&