@tecsinapse/cortex-react 1.6.0 → 1.7.0-beta.0

package/dist/esm/hooks/useFileUpload.js

@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { v4 } from 'uuid';
+import { FileStatus, AcceptSpecificMap } from '../components/Uploader/types.js';
+
+const useFileUpload = ({
+  accept = {},
+  onAccept,
+  maxSize,
+  allowMultiple = true
+}) => {
+  const [files, setFiles] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpen = useCallback(() => setIsOpen(true), []);
+  const onClose = useCallback(() => setIsOpen(false), []);
+  const updateFiles = useCallback(
+    (prevFiles, newFiles) => {
+      const current = /* @__PURE__ */ new Map();
+      [...prevFiles, ...newFiles].forEach((file) => current.set(file.uid, file));
+      return [...current.values()];
+    },
+    []
+  );
+  const onDrop = async (acceptedFiles) => {
+    const newFiles = acceptedFiles.map((file) => ({
+      file,
+      status: onAccept ? FileStatus.UPLOADING : FileStatus.SUCCESS,
+      uid: v4()
+    }));
+    try {
+      setFiles((prevFiles) => [...prevFiles, ...newFiles]);
+      if (onAccept) {
+        const updatedFiles = await onAccept(newFiles);
+        setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
+      }
+    } catch (e) {
+      const updatedFiles = newFiles.map((f) => ({
+        ...f,
+        status: FileStatus.ERROR
+      }));
+      setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
+    }
+  };
+  const addMimeTypes = (key, acc) => {
+    AcceptSpecificMap[key].forEach((mimeType) => {
+      acc[mimeType] = [];
+    });
+  };
+  const mappedAccept = Object.keys(accept).reduce((acc, key) => {
+    const mimeTypes = accept[key];
+    if (Array.isArray(mimeTypes) && mimeTypes.length === 0) {
+      addMimeTypes(key, acc);
+    } else if (mimeTypes) {
+      mimeTypes.forEach((mimeType) => {
+        acc[mimeType] = [];
+      });
+    }
+    return acc;
+  }, {});
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: mappedAccept,
+    multiple: allowMultiple,
+    maxSize
+  });
+  const handleRemoveFile = useCallback((index) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  }, []);
+  return {
+    onOpen,
+    onClose,
+    onDelete: handleRemoveFile,
+    dropzoneProps: {
+      getInputProps,
+      getRootProps,
+      isDragActive
+    },
+    open: isOpen,
+    files
+  };
+};
+
+export { useFileUpload };

package/dist/esm/index.js

@@ -24,7 +24,7 @@ export { Loading } from './components/Loading.js';
 export { Menubar } from './components/Menubar/index.js';
 export { Modal } from './components/Modal.js';
 export { Popover } from './components/Popover/index.js';
-export { ProgressBar } from './components/ProgressBar.js';
+export { ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { RadioButton } from './components/RadioButton.js';
 export { Select } from './components/Select/index.js';
 export { Skeleton } from './components/Skeleton.js';
@@ -37,6 +37,7 @@ export { TimeField } from './components/TimeField/TimeField.js';
 export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
+export { Uploader } from './components/Uploader/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';
@@ -50,9 +51,12 @@ export { useRangeCalendar } from './hooks/useRangeCalendar.js';
 export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
+export { useFileUpload } from './hooks/useFileUpload.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
 export { MenubarContext } from './provider/MenubarContext.js';
 export { useMenubar } from './provider/useMenubar.js';
 export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';
+export { Root } from './components/Uploader/Root.js';
+export { AcceptSpecificMap, FileStatus } from './components/Uploader/types.js';

package/dist/esm/provider/MenubarProvider.js

@@ -5,6 +5,8 @@ import 'react-stately';
 import '@floating-ui/react';
 import 'currency.js';
 import { useOutsideClickListener } from '../hooks/useOutsideClickListener.js';
+import 'react-dropzone';
+import 'uuid';
 import { MenubarContext } from './MenubarContext.js';
 
 const MenubarProvider = ({ children }) => {

package/dist/esm/styles/progressBar.js

@@ -8,12 +8,42 @@ const progressBarFilled = tv({
       error: "bg-error-medium",
       info: "bg-info-medium",
       warning: "bg-warning-medium",
-      success: "bg-success-medium"
+      success: "bg-success-medium",
+      uploading: ""
     },
     showAnimation: {
       true: "transition-[width] duration-1000 ease-linear"
     }
   }
 });
+const progressBarInfiniteVariants = tv({
+  slots: {
+    container: "relative mb-mili",
+    bar: "h-1.5 w-full overflow-hidden",
+    progress: "w-full h-full origin-left-right rounded-b-mili"
+  },
+  variants: {
+    status: {
+      uploading: {
+        progress: "bg-info-medium animate-progress"
+      },
+      success: {
+        progress: "bg-success-medium"
+      },
+      error: {
+        progress: "bg-error-medium"
+      },
+      default: {
+        progress: "bg-primary-medium"
+      },
+      info: {
+        progress: "bg-info-medium"
+      },
+      warning: {
+        progress: "bg-warning-medium"
+      }
+    }
+  }
+});
 
-export { progressBarFilled };
+export { progressBarFilled, progressBarInfiniteVariants };

package/dist/types/components/{ProgressBar.d.ts → ProgressBar/ProgressBar.d.ts}

@@ -3,8 +3,9 @@ export interface ProgressBarProps {
     segments?: number;
     valueMin?: number;
     valueMax?: number;
-    valueCurrent: number;
-    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error';
+    valueCurrent?: number;
+    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
+    type?: 'infinite' | 'default';
     animated?: boolean;
 }
-export declare const ProgressBar: ({ segments: _segments, valueMin, valueMax, valueCurrent, intentProgress, animated, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ segments: _segments, valueMin, valueMax, valueCurrent, intentProgress, type, animated, }: ProgressBarProps) => JSX.Element;

package/dist/types/components/ProgressBar/ProgressBarInfinite.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ProgressBarInfiniteProps {
+    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
+}
+export declare const ProgressBarInfinite: ({ intentProgress, }: ProgressBarInfiniteProps) => JSX.Element;
+export {};

package/dist/types/components/ProgressBar/ProgressBarSegments.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ProgressBarSegmentsProps {
+    segments: number;
+    totalProgress: number;
+    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
+    showAnimation: boolean;
+}
+export declare const ProgressBarSegments: ({ segments, totalProgress, intentProgress, showAnimation, }: ProgressBarSegmentsProps) => JSX.Element;
+export {};

package/dist/types/components/ProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/dist/types/components/Uploader/Dropzone.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DropzoneProps } from './types';
+export declare const Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: DropzoneProps) => JSX.Element;

package/dist/types/components/Uploader/Files.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FilesProps } from './types';
+export declare const Files: <T>({ files, onDelete, uploadProgressText, }: FilesProps<T>) => JSX.Element;

package/dist/types/components/Uploader/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from './types';
+export declare const Modal: ({ open, onClose, children, title, }: ModalProps) => any;

package/dist/types/components/Uploader/Root.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RootUploaderProps } from './types';
+export declare const Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, }: RootUploaderProps<T>) => JSX.Element;

package/dist/types/components/Uploader/Upload.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FileProps } from './types';
+export declare const File: <T>({ file, index, onDelete }: FileProps<T>) => JSX.Element;

package/dist/types/components/Uploader/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export * from './Root';
+export * from './types';
+export declare const Uploader: {
+    Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: import("./types").DropzoneProps) => JSX.Element;
+    Files: <T>({ files, onDelete, uploadProgressText, }: import("./types").FilesProps<T>) => JSX.Element;
+    Modal: ({ open, onClose, children, title, }: import("./types").ModalProps) => any;
+    Root: <T_1>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, }: import("./types").RootUploaderProps<T_1>) => JSX.Element;
+};

package/dist/types/components/Uploader/types.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone';
+export interface FileItem {
+    file: File;
+    loading: 'loading' | 'success' | 'error';
+}
+export interface FileProps<T> {
+    file: FileUpload<T>;
+    index: number;
+    onDelete: (index: number) => void;
+}
+export interface FilesProps<T> {
+    files: FileUpload<T>[];
+    onDelete: (index: number) => void;
+    uploadProgressText?: string;
+}
+export interface UseDropzoneProps {
+    getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
+    getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
+    isDragActive: boolean;
+}
+export interface DropzoneProps {
+    dropzoneProps: UseDropzoneProps;
+    selectFileText?: string;
+    dropText?: string;
+    buttonText?: string;
+}
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: string;
+}
+export declare enum FileStatus {
+    SUCCESS = "success",
+    ERROR = "error",
+    UPLOADING = "uploading"
+}
+export type FileUpload<T> = {
+    file: File;
+    metadata?: T;
+    uid: string;
+    status: FileStatus;
+};
+export interface RootUploaderProps<T> {
+    open: boolean;
+    onClose: () => void;
+    files: FileUpload<T>[];
+    onDelete: (index: number) => void;
+    dropzoneProps: UseDropzoneProps;
+    selectFileText?: string;
+    dropText?: string;
+    buttonText?: string;
+    uploadProgressText?: string;
+    titleModal?: string;
+}
+export declare const AcceptSpecificMap: {
+    readonly APPLICATION: readonly ["application/pdf", "application/zip", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/x-rar-compressed", "application/x-7z-compressed", "application/json", "application/xml", "application/rtf", "application/x-tar", "application/x-httpd-php", "application/octet-stream"];
+    readonly IMAGE: readonly ["image/jpeg", "image/png", "image/gif", "image/bmp", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon"];
+    readonly VIDEO: readonly ["video/mp4", "video/mpeg", "video/quicktime", "video/x-msvideo", "video/x-ms-wmv", "video/webm", "video/ogg", "video/x-flv"];
+    readonly AUDIO: readonly ["audio/mpeg", "audio/wav", "audio/ogg", "audio/x-aac", "audio/flac", "audio/mp4", "audio/aac", "audio/webm"];
+    readonly TEXT: readonly ["text/plain", "text/csv", "text/html", "text/css", "text/xml", "text/javascript", "text/markdown"];
+};

package/dist/types/components/index.d.ts

@@ -29,3 +29,4 @@ export * from './TextArea';
 export * from './TimeField';
 export * from './Toggle';
 export * from './Tooltip';
+export * from './Uploader';

package/dist/types/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './useRangeCalendar';
 export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
 export * from './useStringMask';
+export * from './useFileUpload';

package/dist/types/hooks/useFileUpload.d.ts

@@ -0,0 +1,23 @@
+import { UseDropzoneProps, AcceptSpecificMap, type FileUpload } from '../components/Uploader/types';
+interface UseFileUploadOptions<T> {
+    accept?: {
+        IMAGE?: (typeof AcceptSpecificMap.IMAGE)[number][];
+        APPLICATION?: (typeof AcceptSpecificMap.APPLICATION)[number][];
+        AUDIO?: (typeof AcceptSpecificMap.AUDIO)[number][];
+        VIDEO?: (typeof AcceptSpecificMap.VIDEO)[number][];
+        TEXT?: (typeof AcceptSpecificMap.TEXT)[number][];
+    };
+    onAccept?: (files: FileUpload<T>[]) => Promise<FileUpload<T>[]>;
+    maxSize?: number;
+    allowMultiple?: boolean;
+    onDelete?: (file: FileUpload<T>) => Promise<void>;
+}
+export declare const useFileUpload: <T>({ accept, onAccept, maxSize, allowMultiple, }: UseFileUploadOptions<T>) => {
+    onOpen: () => void;
+    onClose: () => void;
+    onDelete: (index: number) => void;
+    dropzoneProps: UseDropzoneProps;
+    open: boolean;
+    files: FileUpload<T>[];
+};
+export {};

package/dist/types/styles/progressBar.d.ts

@@ -5,6 +5,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -16,6 +17,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -27,6 +29,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -38,6 +41,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -49,6 +53,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -60,6 +65,7 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
@@ -71,8 +77,169 @@ export declare const progressBarFilled: import("tailwind-variants").TVReturnType
         info: string;
         warning: string;
         success: string;
+        uploading: string;
     };
     showAnimation: {
         true: string;
     };
 }>, unknown, unknown, undefined>>;
+export declare const progressBarInfiniteVariants: import("tailwind-variants").TVReturnType<{
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}, {
+    container: string;
+    bar: string;
+    progress: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}, {
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}>, {
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}, {
+    container: string;
+    bar: string;
+    progress: string;
+}, import("tailwind-variants").TVReturnType<{
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}, {
+    container: string;
+    bar: string;
+    progress: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}, {
+    status: {
+        uploading: {
+            progress: string;
+        };
+        success: {
+            progress: string;
+        };
+        error: {
+            progress: string;
+        };
+        default: {
+            progress: string;
+        };
+        info: {
+            progress: string;
+        };
+        warning: {
+            progress: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.6.0",
+  "version": "1.7.0-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,17 +20,19 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.3",
+    "@tecsinapse/cortex-core": "0.4.0-beta.0",
     "clsx": "*",
     "currency.js": "~2.0.4",
     "react-aria": "^3.33.1",
+    "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-imask": "7.6.1",
     "react-spring": "^9.7.4",
     "react-spring-carousel": "^2.0.19",
     "react-stately": "^3.31.1",
     "sonner": "^1.5.0",
-    "tailwind-merge": "*"
+    "tailwind-merge": "*",
+    "uuid": "^10.0.0"
   },
   "repository": {
     "type": "git",
@@ -46,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "138b41dd9a73cbec37c7b026858b6ab7ffd23206"
+  "gitHead": "5031f62ebd62cf2e07f26aec3ca08eebf6d3d11c"
 }

package/dist/cjs/components/ProgressBar.js

@@ -1,71 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var React = require('react');
-require('../styles/calendar-cell.js');
-require('../styles/groupButton.js');
-var progressBar = require('../styles/progressBar.js');
-
-const ProgressBar = ({
-  segments: _segments = 1,
-  valueMin = 0,
-  valueMax = 100,
-  valueCurrent = 50,
-  intentProgress = "default",
-  animated = true
-}) => {
-  const [displayedValue, setDisplayedValue] = React.useState(0);
-  const [showAnimation, setShowAnimation] = React.useState(true);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (valueCurrent < displayedValue) {
-        setShowAnimation(false);
-      }
-      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
-      setDisplayedValue(valueCurrent);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [valueCurrent]);
-  const progressStyle = React.useCallback(
-    (width, index) => {
-      return {
-        width: `${width}%`,
-        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
-      };
-    },
-    [showAnimation]
-  );
-  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
-  const segments = Math.max(1, _segments);
-  const lengthSeg = 100 / Math.max(segments);
-  const items = [...Array(segments).keys()];
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
-    const max = lengthSeg * (index + 1);
-    const min = lengthSeg * index;
-    const minmax = (totalProgress - min) / (max - min);
-    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        "data-testid": "progress-bar",
-        key: index,
-        className: clsx(
-          "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          "data-testid": "div-segment-filled",
-          style: progressStyle(width, index),
-          className: progressBar.progressBarFilled({
-            intentProgress,
-            showAnimation
-          })
-        }
-      )
-    );
-  }));
-};
-
-exports.ProgressBar = ProgressBar;