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

package/dist/cjs/components/Calendar/Calendar.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/Calendar/CalendarCell.js

@@ -7,6 +7,8 @@ require('react-stately');
 var useCalendarCell = require('../../hooks/useCalendarCell.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var calendarCell = require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');

package/dist/cjs/components/Calendar/CalendarGrid.js

@@ -7,6 +7,8 @@ require('react-stately');
 var useCalendarGrid = require('../../hooks/useCalendarGrid.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
 

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -7,6 +7,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useRangeCalendar = require('../../hooks/useRangeCalendar.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -8,6 +8,8 @@ var utils = require('../utils.js');
 var useDatePickerInput = require('../../hooks/useDatePickerInput.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Calendar = require('../Calendar/Calendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -8,6 +8,8 @@ var utils = require('../utils.js');
 var useDateRangePickerInput = require('../../hooks/useDateRangePickerInput.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');

package/dist/cjs/components/Input/Mask.js

@@ -7,6 +7,8 @@ require('react-stately');
 require('@floating-ui/react');
 var useNumberMask = require('../../hooks/useNumberMask.js');
 var useStringMask = require('../../hooks/useStringMask.js');
+require('react-dropzone');
+require('uuid');
 var Root = require('./Root.js');
 
 const InputMask = React.forwardRef(

package/dist/cjs/components/Input/Search.js

@@ -8,6 +8,8 @@ require('react-stately');
 var useDebouncedState = require('../../hooks/useDebouncedState.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 var Left = require('./Left.js');

package/dist/cjs/components/Menubar/Dropdown.js

@@ -8,6 +8,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/Header.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/ItemLink.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/Search.js

@@ -9,6 +9,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Popover/Provider.js

@@ -6,6 +6,8 @@ require('react-aria');
 require('react-stately');
 var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('./Context.js');
 
 const PopoverProvider = ({

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var ProgressBarInfinite = require('./ProgressBarInfinite.js');
+var ProgressBarSegments = require('./ProgressBarSegments.js');
+
+const ProgressBar = ({
+  segments: _segments = 1,
+  valueMin = 0,
+  valueMax = 100,
+  valueCurrent = 50,
+  intentProgress = "default",
+  type = "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 totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
+  const segments = Math.max(1, _segments);
+  return type === "infinite" ? /* @__PURE__ */ React.createElement(ProgressBarInfinite.ProgressBarInfinite, { intentProgress }) : /* @__PURE__ */ React.createElement(
+    ProgressBarSegments.ProgressBarSegments,
+    {
+      segments,
+      totalProgress,
+      intentProgress,
+      showAnimation
+    }
+  );
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/cjs/components/ProgressBar/ProgressBarInfinite.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+var progressBar = require('../../styles/progressBar.js');
+
+const { container, bar, progress } = progressBar.progressBarInfiniteVariants();
+const ProgressBarInfinite = ({
+  intentProgress
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: container() }, /* @__PURE__ */ React.createElement("div", { className: bar(), "data-testid": "infinite-progress-bar" }, /* @__PURE__ */ React.createElement("div", { className: progress({ status: intentProgress }) })));
+};
+
+exports.ProgressBarInfinite = ProgressBarInfinite;

package/dist/cjs/components/ProgressBar/ProgressBarSegments.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+var progressBar = require('../../styles/progressBar.js');
+
+const ProgressBarSegments = ({
+  segments,
+  totalProgress,
+  intentProgress,
+  showAnimation
+}) => {
+  const lengthSeg = 100 / segments;
+  const items = [...Array(segments).keys()];
+  const progressStyle = React.useCallback(
+    (width, index) => {
+      return {
+        width: `${width}%`,
+        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
+      };
+    },
+    [showAnimation]
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row", "data-testid": "progress-bar" }, 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",
+      {
+        key: index,
+        className: "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: progressStyle(width, index),
+          "data-testid": "div-segment-filled",
+          className: progressBar.progressBarFilled({ intentProgress, showAnimation })
+        }
+      )
+    );
+  }));
+};
+
+exports.ProgressBarSegments = ProgressBarSegments;

package/dist/cjs/components/Select/GroupedOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Select/MultiGroupedOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
+require('react-dropzone');
+require('uuid');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');

package/dist/cjs/components/Select/MultiOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
+require('react-dropzone');
+require('uuid');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');

package/dist/cjs/components/Select/Options.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Tooltip.js

@@ -8,6 +8,8 @@ require('react-stately');
 var utils = require('./utils.js');
 var useFloatingLogic = require('../hooks/useFloatingLogic.js');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 
 const Tooltip = React.forwardRef(
   (props, ref) => {

package/dist/cjs/components/Uploader/Dropzone.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var hi2 = require('react-icons/hi2');
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+
+const Dropzone = ({
+  dropzoneProps,
+  selectFileText = "Select a file to start",
+  dropText = "By dragging and dropping it here or clicking the button below",
+  buttonText = "Select File"
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...dropzoneProps.getRootProps(),
+      className: clsx(
+        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili",
+        {
+          "border-success-medium bg-gray-100": dropzoneProps.isDragActive
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement("input", { ...dropzoneProps.getInputProps() }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center text-center items-center gap-deca" }, /* @__PURE__ */ React.createElement(hi2.HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }), /* @__PURE__ */ React.createElement("div", { className: "gap-mili" }, /* @__PURE__ */ React.createElement("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone" }, selectFileText), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-secondary-medium" }, dropText)), /* @__PURE__ */ React.createElement("button", { className: cortexCore.button() }, buttonText))
+  );
+};
+
+exports.Dropzone = Dropzone;

package/dist/cjs/components/Uploader/Files.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var Upload = require('./Upload.js');
+
+const Files = ({
+  files,
+  onDelete,
+  uploadProgressText = "Upload(s) in progress"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-mili items-center mb-deca" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white" }, `${files.length}`), /* @__PURE__ */ React.createElement("h2", { className: "text-md font-semibold", "data-testid": "upload-progress" }, uploadProgressText)), files.map((file, index) => /* @__PURE__ */ React.createElement(Upload.File, { key: file.uid, file, index, onDelete })));
+};
+
+exports.Files = Files;

package/dist/cjs/components/Uploader/Modal.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var md = require('react-icons/md');
+var cortexCore = require('@tecsinapse/cortex-core');
+var Modal$1 = require('../Modal.js');
+var reactDom = require('react-dom');
+
+const Modal = ({
+  open,
+  onClose,
+  children,
+  title = "File Upload"
+}) => {
+  return reactDom.createPortal(
+    /* @__PURE__ */ React.createElement(
+      Modal$1.Modal,
+      {
+        open,
+        onClose,
+        className: "flex-col w-[70%] h-[50%] bg-secondary-xlight rounded-mili"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between mb-deca" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("h2", { className: "text-deca font-semibold" }, title), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: cortexCore.button({ size: "square" }),
+          onClick: onClose,
+          "data-testid": "close-button"
+        },
+        /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row w-full h-full max-h-[85%] gap-deca" }, children)
+    ),
+    document.body
+  );
+};
+
+exports.Modal = Modal;

package/dist/cjs/components/Uploader/Root.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var Modal = require('./Modal.js');
+var Dropzone = require('./Dropzone.js');
+var Files = require('./Files.js');
+
+const Root = ({
+  open,
+  onClose,
+  files,
+  onDelete,
+  dropzoneProps,
+  selectFileText,
+  dropText,
+  buttonText,
+  uploadProgressText,
+  titleModal
+}) => {
+  return /* @__PURE__ */ React.createElement(Modal.Modal, { onClose, open, title: titleModal }, /* @__PURE__ */ React.createElement(
+    Dropzone.Dropzone,
+    {
+      dropzoneProps,
+      selectFileText,
+      dropText,
+      buttonText
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Files.Files,
+    {
+      files,
+      onDelete,
+      uploadProgressText
+    }
+  ));
+};
+
+exports.Root = Root;

package/dist/cjs/components/Uploader/Upload.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var fa6 = require('react-icons/fa6');
+var cortexCore = require('@tecsinapse/cortex-core');
+var md = require('react-icons/md');
+var ProgressBar = require('../ProgressBar/ProgressBar.js');
+
+const File = ({ file, index, onDelete }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", key: index }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-centi" }, file.file && file.file.type.startsWith("image/") ? /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: URL.createObjectURL(file.file),
+      alt: "Preview",
+      className: "w-tera h-tera rounded-mili"
+    }
+  ) : /* @__PURE__ */ React.createElement("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili" }, /* @__PURE__ */ React.createElement(fa6.FaRegFileLines, null)), /* @__PURE__ */ React.createElement("div", { className: "flex-col" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold truncate max-w-[200px]" }, file.file.name), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500" }, (file.file.size / 1024).toFixed(2), " KB"))), file.status === "success" && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => onDelete(index),
+      "data-testid": "remove-button",
+      className: cortexCore.button({
+        className: " bg-inherit border-2 border-primary-light text-primary-light",
+        size: "small"
+      })
+    },
+    /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(ProgressBar.ProgressBar, { intentProgress: file.status, type: "infinite" }));
+};
+
+exports.File = File;

package/dist/cjs/components/Uploader/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var Dropzone = require('./Dropzone.js');
+var Files = require('./Files.js');
+var Modal = require('./Modal.js');
+var Root = require('./Root.js');
+
+const Uploader = {
+  Dropzone: Dropzone.Dropzone,
+  Files: Files.Files,
+  Modal: Modal.Modal,
+  Root: Root.Root
+};
+
+exports.Root = Root.Root;
+exports.Uploader = Uploader;

package/dist/cjs/components/Uploader/types.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var FileStatus = /* @__PURE__ */ ((FileStatus2) => {
+  FileStatus2["SUCCESS"] = "success";
+  FileStatus2["ERROR"] = "error";
+  FileStatus2["UPLOADING"] = "uploading";
+  return FileStatus2;
+})(FileStatus || {});
+const AcceptSpecificMap = {
+  APPLICATION: [
+    "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"
+  ],
+  IMAGE: [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/bmp",
+    "image/svg+xml",
+    "image/tiff",
+    "image/webp",
+    "image/x-icon"
+  ],
+  VIDEO: [
+    "video/mp4",
+    "video/mpeg",
+    "video/quicktime",
+    "video/x-msvideo",
+    "video/x-ms-wmv",
+    "video/webm",
+    "video/ogg",
+    "video/x-flv"
+  ],
+  AUDIO: [
+    "audio/mpeg",
+    "audio/wav",
+    "audio/ogg",
+    "audio/x-aac",
+    "audio/flac",
+    "audio/mp4",
+    "audio/aac",
+    "audio/webm"
+  ],
+  TEXT: [
+    "text/plain",
+    "text/csv",
+    "text/html",
+    "text/css",
+    "text/xml",
+    "text/javascript",
+    "text/markdown"
+  ]
+};
+
+exports.AcceptSpecificMap = AcceptSpecificMap;
+exports.FileStatus = FileStatus;

package/dist/cjs/hooks/useFileUpload.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var React = require('react');
+var reactDropzone = require('react-dropzone');
+var uuid = require('uuid');
+var types = require('../components/Uploader/types.js');
+
+const useFileUpload = ({
+  accept = {},
+  onAccept,
+  maxSize,
+  allowMultiple = true
+}) => {
+  const [files, setFiles] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onOpen = React.useCallback(() => setIsOpen(true), []);
+  const onClose = React.useCallback(() => setIsOpen(false), []);
+  const updateFiles = React.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 ? types.FileStatus.UPLOADING : types.FileStatus.SUCCESS,
+      uid: uuid.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: types.FileStatus.ERROR
+      }));
+      setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
+    }
+  };
+  const addMimeTypes = (key, acc) => {
+    types.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 } = reactDropzone.useDropzone({
+    onDrop,
+    accept: mappedAccept,
+    multiple: allowMultiple,
+    maxSize
+  });
+  const handleRemoveFile = React.useCallback((index) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  }, []);
+  return {
+    onOpen,
+    onClose,
+    onDelete: handleRemoveFile,
+    dropzoneProps: {
+      getInputProps,
+      getRootProps,
+      isDragActive
+    },
+    open: isOpen,
+    files
+  };
+};
+
+exports.useFileUpload = useFileUpload;