@ttoss/components 2.14.20 → 2.14.22

package/dist/FileUploader/index.mjs

@@ -0,0 +1,386 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from "react";
+import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useI18n } from "@ttoss/react-i18n";
+
+//#region src/components/FileUploader/FileUploader.tsx
+const FileUploader = ({
+  onUpload,
+  onUploadStart,
+  onUploadProgress,
+  onUploadComplete,
+  onUploadError,
+  onFilesChange,
+  onRemove,
+  accept,
+  multiple = true,
+  maxSize = 10 * 1024 * 1024,
+  maxFiles = 5,
+  disabled = false,
+  autoUpload = true,
+  retryAttempts = 2,
+  placeholder,
+  error,
+  children,
+  showFileList = true,
+  FileListComponent,
+  files: uploadedFiles = []
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const [files, setFiles] = React.useState([]);
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const formatFileSize = bytes => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+  const validateFiles = newFiles => {
+    const fileArray = Array.from(newFiles);
+    const validFiles = [];
+    const currentFileCount = files.length;
+    if (currentFileCount >= maxFiles) return [];
+    for (const file of fileArray) {
+      if (maxSize && file.size > maxSize) continue;
+      if (validFiles.length + currentFileCount >= maxFiles) break;
+      validFiles.push(file);
+    }
+    return validFiles;
+  };
+  const updateFileState = React.useCallback((file, updates) => {
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.map(f => {
+        return f.file === file ? {
+          ...f,
+          ...updates
+        } : f;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+  }, [onFilesChange]);
+  const uploadFile = React.useCallback(async (fileState, attempts = 0) => {
+    try {
+      onUploadStart?.(fileState.file);
+      updateFileState(fileState.file, {
+        status: "uploading",
+        progress: 0
+      });
+      const result = await onUpload(fileState.file, progress => {
+        updateFileState(fileState.file, {
+          progress
+        });
+        onUploadProgress?.(fileState.file, progress);
+      });
+      updateFileState(fileState.file, {
+        status: "completed",
+        progress: 100,
+        result
+      });
+      onUploadComplete?.(fileState.file, result);
+    } catch (error_) {
+      const error = error_;
+      if (attempts < retryAttempts) setTimeout(() => {
+        return uploadFile(fileState, attempts + 1);
+      }, 1e3 * (attempts + 1));else {
+        updateFileState(fileState.file, {
+          status: "error",
+          error
+        });
+        onUploadError?.(fileState.file, error);
+      }
+    }
+  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = newFiles => {
+    const newFileStates = newFiles.map(file => {
+      return {
+        file,
+        status: "pending"
+      };
+    });
+    setFiles(prevFiles => {
+      const updatedFiles = [...prevFiles, ...newFileStates];
+      onFilesChange?.(updatedFiles);
+      return updatedFiles;
+    });
+    if (autoUpload) for (const fileState of newFileStates) uploadFile(fileState);
+  };
+  const handleFileChange = event => {
+    if (event.target.files) addFiles(validateFiles(event.target.files));
+  };
+  const handleDrop = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (disabled || files.length >= maxFiles) return;
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) addFiles(validateFiles(droppedFiles));
+  };
+  const handleDragOver = event => {
+    event.preventDefault();
+    if (!disabled && files.length < maxFiles) setIsDragOver(true);
+  };
+  const handleDragLeave = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleClick = () => {
+    if (!disabled && files.length < maxFiles && fileInputRef.current) fileInputRef.current.click();
+  };
+  const handleRemoveFile = React.useCallback(index => {
+    const fileToRemove = uploadedFiles[index];
+    onRemove?.(fileToRemove, index);
+  }, [uploadedFiles, onRemove]);
+  const isUploading = files.some(f => {
+    return f.status === "uploading";
+  });
+  const isMaxFilesReached = files.length >= maxFiles;
+  const fileListNode = React.useMemo(() => {
+    if (!showFileList || files.length === 0 && uploadedFiles.length === 0) return null;
+    if (FileListComponent) return /* @__PURE__ */jsx(FileListComponent, {
+      files: uploadedFiles,
+      onRemove: handleRemoveFile
+    });
+    return /* @__PURE__ */jsx(Stack, {
+      sx: {
+        gap: 1,
+        width: "100%"
+      },
+      children: uploadedFiles.map((file, index) => {
+        return /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            width: "full",
+            alignItems: "center",
+            justifyContent: "space-between",
+            p: 2,
+            backgroundColor: "display.background.secondary.default",
+            borderRadius: "md",
+            gap: 2
+          },
+          children: [/* @__PURE__ */jsxs(Flex, {
+            sx: {
+              alignItems: "center",
+              gap: 2,
+              flex: 1
+            },
+            children: [file.imageUrl && /* @__PURE__ */jsx(Box, {
+              sx: {
+                width: 32,
+                height: 32
+              },
+              children: /* @__PURE__ */jsx("img", {
+                src: file.imageUrl,
+                alt: file.name,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  borderRadius: 4
+                }
+              })
+            }), /* @__PURE__ */jsx(Box, {
+              sx: {
+                flex: 1
+              },
+              children: /* @__PURE__ */jsx("a", {
+                href: file.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  textDecoration: "none",
+                  color: "inherit"
+                },
+                children: /* @__PURE__ */jsx(Text, {
+                  variant: "body",
+                  sx: {
+                    fontWeight: "medium",
+                    "&:hover": {
+                      textDecoration: "underline",
+                      color: "primary.default"
+                    }
+                  },
+                  children: file.name
+                })
+              })
+            })]
+          }), /* @__PURE__ */jsx(Button, {
+            variant: "destructive",
+            onClick: () => {
+              return handleRemoveFile(index);
+            },
+            sx: {
+              fontSize: "sm",
+              color: "text.muted",
+              "&:hover": {
+                color: "error.default"
+              }
+            },
+            children: intl.formatMessage({
+              id: "G/yZLu",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Remove"
+              }]
+            })
+          })]
+        }, file.id);
+      })
+    });
+  }, [files.length, uploadedFiles, handleRemoveFile, intl, showFileList, FileListComponent]);
+  const placeholderTexts = React.useMemo(() => {
+    const texts = [];
+    if (isUploading) texts.push(intl.formatMessage({
+      id: "JEsxDw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Uploading..."
+      }]
+    }));else if (isMaxFilesReached) texts.push(intl.formatMessage({
+      id: "eRShvB",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Maximum files reached"
+      }]
+    }));else texts.push(placeholder || intl.formatMessage({
+      id: "gy0Ynb",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Click or drag files here"
+      }]
+    }));
+    if (!isUploading && !isMaxFilesReached) {
+      if (accept) texts.push(accept);
+      if (maxSize) texts.push(`Max ${formatFileSize(maxSize)}`);
+      if (multiple && maxFiles) texts.push(intl.formatMessage({
+        id: "fOOwej",
+        defaultMessage: [{
+          "type": 6,
+          "value": "max_files",
+          "options": {
+            "one": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " file"
+              }]
+            },
+            "other": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " files"
+              }]
+            }
+          },
+          "offset": 0,
+          "pluralType": "cardinal"
+        }]
+      }, {
+        max_files: maxFiles
+      }));
+    }
+    return texts.filter(Boolean).join(" • ");
+  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
+  return /* @__PURE__ */jsxs(Stack, {
+    sx: {
+      gap: 3,
+      justifyContent: "stretch",
+      width: "100%"
+    },
+    children: [/* @__PURE__ */jsxs(Box, {
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: handleClick,
+      sx: {
+        width: "100%",
+        border: "2px dashed",
+        borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
+        borderRadius: "xl",
+        padding: 6,
+        textAlign: "center",
+        cursor: disabled || isUploading || isMaxFilesReached ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
+        transition: "all 0.2s ease",
+        opacity: disabled || isMaxFilesReached ? .6 : 1,
+        "&:hover": {
+          borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
+          backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
+        }
+      },
+      children: [/* @__PURE__ */jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        multiple,
+        onChange: handleFileChange,
+        disabled: disabled || isUploading || isMaxFilesReached,
+        style: {
+          display: "none"
+        }
+      }), children || /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 3,
+          justifyContent: "center"
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "2xl"
+          },
+          children: intl.formatMessage({
+            id: "XKyo5X",
+            defaultMessage: [{
+              "type": 0,
+              "value": "File Upload"
+            }]
+          })
+        }), /* @__PURE__ */jsx(Box, {
+          sx: {
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */jsx(Text, {
+            variant: "body",
+            sx: {
+              color: "text.default",
+              mb: 1
+            },
+            children: placeholderTexts
+          })
+        }), !isUploading && !isMaxFilesReached && /* @__PURE__ */jsx(Button, {
+          variant: "secondary",
+          disabled,
+          children: intl.formatMessage({
+            id: "fDCMA6",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Select Files"
+            }]
+          })
+        })]
+      })]
+    }), error && /* @__PURE__ */jsx(Text, {
+      variant: "caption",
+      sx: {
+        color: "error.default"
+      },
+      children: error
+    }), fileListNode]
+  });
+};
+
+//#endregion
+export { FileUploader };

package/dist/InstallPwa/index.d.mts

@@ -0,0 +1,13 @@
+
+import * as React from "react";
+
+//#region src/components/InstallPwa/InstallPwa.d.ts
+type InstallPwaUiProps = {
+  onInstall: React.MouseEventHandler<HTMLButtonElement>;
+};
+declare const InstallPwaUi: ({
+  onInstall
+}: InstallPwaUiProps) => import("react/jsx-runtime").JSX.Element;
+declare const InstallPwa: () => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { InstallPwa, InstallPwaUi, InstallPwaUiProps };

package/dist/InstallPwa/index.mjs

@@ -0,0 +1,64 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from "react";
+import { Button, Flex, Text } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/InstallPwa/InstallPwa.tsx
+const InstallPwaUi = ({
+  onInstall
+}) => {
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "absolute",
+      bottom: 4,
+      width: "100%",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        backgroundColor: "background",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 3,
+        width: "auto",
+        border: "1px solid",
+        borderColor: "muted",
+        borderRadius: 1,
+        padding: 4
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        children: "Deseja instalar o nosso aplicativo?"
+      }), /* @__PURE__ */jsx(Button, {
+        onClick: onInstall,
+        children: "Instalar"
+      })]
+    })
+  });
+};
+const InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React.useState(false);
+  const [promptInstall, setPromptInstall] = React.useState(null);
+  React.useEffect(() => {
+    const handler = e => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => {
+      return window.removeEventListener("transitionend", handler);
+    };
+  }, []);
+  const onInstall = e => {
+    e.preventDefault();
+    if (!promptInstall) return;
+    promptInstall.prompt();
+  };
+  if (!supportsPwa) return null;
+  return /* @__PURE__ */jsx(InstallPwaUi, {
+    onInstall
+  });
+};
+
+//#endregion
+export { InstallPwa, InstallPwaUi };

package/dist/JsonEditor/index.d.mts

@@ -0,0 +1,3 @@
+
+import { JsonEditor } from "json-edit-react";
+export { JsonEditor };

package/dist/{esm/JsonEditor/index.js → JsonEditor/index.mjs}

@@ -1,6 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import "../chunk-V4MHYKRI.js";
-
-// src/components/JsonEditor/index.ts
 import { JsonEditor } from "json-edit-react";
 export { JsonEditor };

package/dist/JsonView/index.d.mts

@@ -0,0 +1,3 @@
+
+import { JsonView } from "react-json-view-lite";
+export { JsonView };

package/dist/{esm/JsonView/index.js → JsonView/index.mjs}

@@ -1,6 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import "../chunk-V4MHYKRI.js";
-
-// src/components/JsonView/index.ts
 import { JsonView } from "react-json-view-lite";
 export { JsonView };

package/dist/List/{index.d.ts → index.d.mts}

@@ -1,13 +1,16 @@
-import * as React from 'react';
 
+import * as React from "react";
+
+//#region src/components/List/List.d.ts
 interface ListProps extends React.HTMLProps<HTMLUListElement> {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }
 declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
-
+//#endregion
+//#region src/components/List/ListItem.d.ts
 interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }
 declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-
-export { List, ListItem, type ListItemProps, type ListProps };
+//#endregion
+export { List, ListItem, ListItemProps, ListProps };

package/dist/List/index.mjs

@@ -0,0 +1,34 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/List/List.tsx
+const List = React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx("ul", {
+    ...props,
+    ref,
+    children
+  });
+});
+List.displayName = "List";
+
+//#endregion
+//#region src/components/List/ListItem.tsx
+const ListItem = React.forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */jsx("li", {
+    ...rest,
+    ref,
+    children
+  });
+});
+ListItem.displayName = "ListItem";
+
+//#endregion
+export { List, ListItem };