@ttoss/components 2.10.2 → 2.11.0

package/dist/esm/Drawer/index.js

@@ -0,0 +1,59 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Drawer/Drawer.tsx
+import { Box } from "@ttoss/ui";
+import * as React from "react";
+import DrawerUi from "react-modern-drawer";
+var Drawer = /* @__PURE__ */__name(({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */React.createElement(Box, {
+    "data-testid": "drawer-container",
+    sx: {
+      /**
+      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+      */
+      zIndex: "overlay",
+      width: "100%",
+      height: "100%",
+      ".EZDrawer__checkbox": {
+        display: "none"
+      },
+      ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
+        display: "block",
+        opacity: 1
+      },
+      ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
+        visibility: "visible",
+        transform: "translate3d(0, 0, 0) !important"
+      },
+      ".EZDrawer__overlay ": {
+        display: "none",
+        height: "100vh",
+        left: "0",
+        position: "fixed",
+        top: "0",
+        width: "100%"
+      },
+      ".EZDrawer__container": {
+        position: "fixed",
+        visibility: "hidden",
+        backgroundColor: "navigation.background.muted.default",
+        transition: "all",
+        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
+        paddingX: "6",
+        overflowY: "auto"
+      },
+      ...sx
+    }
+  }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: "100%",
+      height: "100%"
+    }
+  }, children)));
+}, "Drawer");
+export { Drawer };

package/dist/esm/FileUploader/index.js

@@ -0,0 +1,401 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/FileUploader/FileUploader.tsx
+import { useI18n } from "@ttoss/react-i18n";
+import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
+import * as React from "react";
+var FileUploader = /* @__PURE__ */__name(({
+  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 = /* @__PURE__ */__name(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];
+  }, "formatFileSize");
+  const validateFiles = /* @__PURE__ */__name(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;
+  }, "validateFiles");
+  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 error2 = error_;
+      if (attempts < retryAttempts) {
+        setTimeout(() => {
+          return uploadFile(fileState, attempts + 1);
+        }, 1e3 * (attempts + 1));
+      } else {
+        updateFileState(fileState.file, {
+          status: "error",
+          error: error2
+        });
+        onUploadError?.(fileState.file, error2);
+      }
+    }
+  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = /* @__PURE__ */__name(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);
+      }
+    }
+  }, "addFiles");
+  const handleFileChange = /* @__PURE__ */__name(event => {
+    if (event.target.files) {
+      const validFiles = validateFiles(event.target.files);
+      addFiles(validFiles);
+    }
+  }, "handleFileChange");
+  const handleDrop = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (disabled || files.length >= maxFiles) return;
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) {
+      const validFiles = validateFiles(droppedFiles);
+      addFiles(validFiles);
+    }
+  }, "handleDrop");
+  const handleDragOver = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    if (!disabled && files.length < maxFiles) {
+      setIsDragOver(true);
+    }
+  }, "handleDragOver");
+  const handleDragLeave = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    setIsDragOver(false);
+  }, "handleDragLeave");
+  const handleClick = /* @__PURE__ */__name(() => {
+    if (!disabled && files.length < maxFiles && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, "handleClick");
+  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__ */React.createElement(FileListComponent, {
+        files: uploadedFiles,
+        onRemove: handleRemoveFile
+      });
+    }
+    return /* @__PURE__ */React.createElement(Stack, {
+      sx: {
+        gap: 1,
+        width: "100%"
+      }
+    }, uploadedFiles.map((file, index) => {
+      return /* @__PURE__ */React.createElement(Flex, {
+        key: file.id,
+        sx: {
+          width: "full",
+          alignItems: "center",
+          justifyContent: "space-between",
+          p: 2,
+          backgroundColor: "display.background.secondary.default",
+          borderRadius: "md",
+          gap: 2
+        }
+      }, /* @__PURE__ */React.createElement(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: 2,
+          flex: 1
+        }
+      }, file.imageUrl && /* @__PURE__ */React.createElement(Box, {
+        sx: {
+          width: 32,
+          height: 32
+        }
+      }, /* @__PURE__ */React.createElement("img", {
+        src: file.imageUrl,
+        alt: file.name,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: 4
+        }
+      })), /* @__PURE__ */React.createElement(Box, {
+        sx: {
+          flex: 1
+        }
+      }, /* @__PURE__ */React.createElement("a", {
+        href: file.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          textDecoration: "none",
+          color: "inherit"
+        }
+      }, /* @__PURE__ */React.createElement(Text, {
+        variant: "body",
+        sx: {
+          fontWeight: "medium",
+          "&:hover": {
+            textDecoration: "underline",
+            color: "primary.default"
+          }
+        }
+      }, file.name)))), /* @__PURE__ */React.createElement(Button, {
+        variant: "destructive",
+        onClick: /* @__PURE__ */__name(() => {
+          return handleRemoveFile(index);
+        }, "onClick"),
+        sx: {
+          fontSize: "sm",
+          color: "text.muted",
+          "&:hover": {
+            color: "error.default"
+          }
+        }
+      }, intl.formatMessage({
+        id: "G/yZLu",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Remove"
+        }]
+      })));
+    }));
+  }, [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(" \u2022 ");
+  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      gap: 3,
+      justifyContent: "stretch",
+      width: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(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 ? 0.6 : 1,
+      "&:hover": {
+        borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
+        backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
+      }
+    }
+  }, /* @__PURE__ */React.createElement("input", {
+    ref: fileInputRef,
+    type: "file",
+    accept,
+    multiple,
+    onChange: handleFileChange,
+    disabled: disabled || isUploading || isMaxFilesReached,
+    style: {
+      display: "none"
+    }
+  }), children || /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 3,
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "2xl"
+    }
+  }, intl.formatMessage({
+    id: "XKyo5X",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File Upload"
+    }]
+  })), /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      textAlign: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    variant: "body",
+    sx: {
+      color: "text.default",
+      mb: 1
+    }
+  }, placeholderTexts)), !isUploading && !isMaxFilesReached && /* @__PURE__ */React.createElement(Button, {
+    variant: "secondary",
+    disabled
+  }, intl.formatMessage({
+    id: "fDCMA6",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Select Files"
+    }]
+  })))), error && /* @__PURE__ */React.createElement(Text, {
+    variant: "caption",
+    sx: {
+      color: "error.default"
+    }
+  }, error), fileListNode);
+}, "FileUploader");
+export { FileUploader };

package/dist/esm/InstallPwa/index.js

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

package/dist/esm/JsonEditor/index.js

@@ -0,0 +1,6 @@
+/** 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/esm/JsonView/index.js

@@ -0,0 +1,6 @@
+/** 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/esm/List/index.js

@@ -0,0 +1,30 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-V4MHYKRI.js";
+
+// src/components/List/List.tsx
+import * as React from "react";
+var List = /* @__PURE__ */React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */React.createElement("ul", {
+    ...props,
+    ref
+  }, children);
+});
+List.displayName = "List";
+
+// src/components/List/ListItem.tsx
+import * as React2 from "react";
+var ListItem = /* @__PURE__ */React2.forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */React2.createElement("li", {
+    ...rest,
+    ref
+  }, children);
+});
+ListItem.displayName = "ListItem";
+export { List, ListItem };

package/dist/esm/Markdown/index.js

@@ -0,0 +1,23 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Markdown/Markdown.tsx
+import { BaseStyles } from "@ttoss/ui";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+var Markdown = /* @__PURE__ */__name(({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */React.createElement(BaseStyles, {
+    sx
+  }, /* @__PURE__ */React.createElement(ReactMarkdown, {
+    rehypePlugins: [rehypeRaw],
+    remarkPlugins: [remarkGfm],
+    ...props
+  }, children));
+}, "Markdown");
+export { Markdown };