@arkyn/components 1.4.16 → 1.4.18

package/src/components/FileUpload/HasFileContent/index.tsx

@@ -0,0 +1,92 @@
+import { FileUploadHasFileContentProps } from "@arkyn/types";
+import {
+  File,
+  FileArchive,
+  FileAudio,
+  FileImage,
+  RefreshCw,
+} from "lucide-react";
+
+import { Button } from "../../Button";
+import { Divider } from "../../Divider";
+import { IconButton } from "../../IconButton";
+import { Tooltip } from "../../Tooltip";
+
+import "./styles.css";
+
+function HasFileContent(props: FileUploadHasFileContentProps) {
+  const {
+    disabled,
+    file,
+    isLoading,
+    acceptFile,
+    changeFileButtonText,
+    handleSelectFile,
+    reSendFile,
+  } = props;
+
+  function handleClick() {
+    if (disabled) return;
+
+    const input = document.createElement("input");
+
+    input.type = "file";
+    input.accept = acceptFile;
+
+    input.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (file) handleSelectFile(file);
+    };
+
+    input.click();
+  }
+
+  function FileIcon() {
+    if (file.type.startsWith("image/")) return <FileImage />;
+    if (file.type.startsWith("audio/")) return <FileAudio />;
+    if (file.type.startsWith("application/zip")) return <FileArchive />;
+    return <File />;
+  }
+
+  return (
+    <div className="arkynFileUploadHasFileContent">
+      <section className="arkynFileUploadFileContainer">
+        <FileIcon />
+        <p>{file.name}</p>
+      </section>
+
+      <Divider />
+
+      <div className="arkynFileUploadButtonsContainer">
+        {!!reSendFile && (
+          <Tooltip orientation="bottom" text="Reenviar arquivo">
+            <IconButton
+              type="button"
+              aria-label="resend file"
+              variant="outline"
+              scheme="danger"
+              size="sm"
+              isLoading={isLoading}
+              onClick={reSendFile}
+              icon={RefreshCw}
+              disabled={disabled}
+            />
+          </Tooltip>
+        )}
+
+        <Button
+          isLoading={isLoading}
+          onClick={handleClick}
+          variant="outline"
+          size="sm"
+          type="button"
+          disabled={disabled}
+        >
+          {changeFileButtonText}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { HasFileContent };

package/src/components/FileUpload/HasFileContent/styles.css

@@ -0,0 +1,40 @@
+.arkynFileUploadHasFileContent {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+
+  height: 100%;
+  width: 100%;
+}
+
+.arkynFileUploadFileContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.arkynFileUploadFileContainer svg {
+  min-width: 26px;
+  min-height: 26px;
+
+  color: var(--text-heading);
+}
+
+.arkynFileUploadFileContainer p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  color: var(--text-body);
+}
+
+.arkynFileUploadButtonsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 8px;
+}

package/src/components/FileUpload/NoFileContent/index.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@arkyn/components";
+import { FileUploadNoFileContentProps } from "@arkyn/types";
+import { DragEvent } from "react";
+
+import "./styles.css";
+
+function NoFileContent(props: FileUploadNoFileContentProps) {
+  const {
+    dropFileText,
+    isLoading,
+    acceptFile,
+    handleSelectFile,
+    selectFileButtonText,
+    disabled,
+  } = props;
+
+  function handleDrop(event: DragEvent<HTMLDivElement>) {
+    if (disabled) return;
+
+    event.preventDefault();
+    const file = event.dataTransfer.files[0];
+    if (file) handleSelectFile(file);
+  }
+
+  function handleClick() {
+    if (disabled) return;
+
+    const input = document.createElement("input");
+
+    input.type = "file";
+    input.accept = acceptFile;
+
+    input.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (file) handleSelectFile(file);
+    };
+
+    input.click();
+  }
+
+  return (
+    <div onDrop={handleDrop} className="arkynFileUploadNoFileContent">
+      <Button
+        isLoading={isLoading}
+        onClick={handleClick}
+        variant="ghost"
+        size="sm"
+        type="button"
+        disabled={disabled}
+      >
+        {selectFileButtonText}
+      </Button>
+
+      <p>{dropFileText}</p>
+    </div>
+  );
+}
+
+export { NoFileContent };

package/src/components/FileUpload/NoFileContent/styles.css

@@ -0,0 +1,19 @@
+.arkynFileUploadNoFileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  height: 100%;
+  width: 100%;
+}
+
+.arkynFileUploadNoFileContent > p {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 12px;
+  text-align: center;
+  white-space: nowrap;
+  color: var(--text-body);
+}

package/src/components/FileUpload/index.tsx

@@ -0,0 +1,111 @@
+import { FileUploadProps } from "@arkyn/types";
+import { useState } from "react";
+
+import { FileUploadError } from "./FileUploadError";
+import { FileUploadLabel } from "./FileUploadLabel";
+import { HasFileContent } from "./HasFileContent";
+import { NoFileContent } from "./NoFileContent";
+
+import { useFieldErrors } from "../../hooks/useFieldErrors";
+
+import "./styles.css";
+
+function FileUpload(props: FileUploadProps) {
+  const {
+    name,
+    label,
+    showAsterisk = false,
+    action,
+    fileName = "file",
+    method = "POST",
+    acceptFile = "*",
+    fileResponseName = "url",
+    changeFileButtonText = "Alterar arquivo",
+    selectFileButtonText = "Selecionar arquivo",
+    dropFileText = "Ou arraste e solte o arquivo aqui",
+    onUpload,
+    disabled = false,
+  } = props;
+
+  const fieldErrors = useFieldErrors();
+  const fieldError = fieldErrors[name];
+
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleUploadFile(file: File) {
+    if (disabled) return;
+
+    setIsLoading(true);
+    setFile(file);
+    setError("");
+
+    const formData = new FormData();
+    formData.append(fileName, file);
+
+    await fetch(action, { method: method, body: formData })
+      .then(async (response) => await response.json())
+      .then((response) => {
+        if (!!response?.error) setError(response.error);
+        else setValue(response?.[fileResponseName]);
+        onUpload && onUpload(response?.[fileResponseName]);
+      })
+      .catch((error) => {
+        console.error(error);
+        setError("Erro ao enviar o arquivo");
+      })
+      .finally(() => setIsLoading(false));
+  }
+
+  function handleSelectFile(file: File) {
+    if (disabled) return;
+    handleUploadFile(file);
+  }
+
+  const errorMessage = fieldError || error;
+
+  const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+  const hasFileClassName = file ? "hasFile" : "noHasFile";
+  const className = `arkynFileUpload ${hasErrorClassName} ${hasFileClassName}`;
+
+  return (
+    <div className="arkynFileUploadContainer">
+      {label && <FileUploadLabel label={label} showAsterisk={showAsterisk} />}
+
+      <div className={className}>
+        <input type="hidden" name={name} value={value || ""} />
+
+        {!file && (
+          <NoFileContent
+            disabled={disabled}
+            isLoading={isLoading}
+            acceptFile={acceptFile}
+            dropFileText={dropFileText}
+            handleSelectFile={handleSelectFile}
+            selectFileButtonText={selectFileButtonText}
+          />
+        )}
+
+        {file && (
+          <HasFileContent
+            disabled={disabled}
+            isLoading={isLoading}
+            acceptFile={acceptFile}
+            file={file}
+            handleSelectFile={handleSelectFile}
+            changeFileButtonText={changeFileButtonText}
+            reSendFile={
+              !!errorMessage && file ? () => handleUploadFile(file) : undefined
+            }
+          />
+        )}
+      </div>
+
+      {errorMessage && <FileUploadError error={errorMessage} />}
+    </div>
+  );
+}
+
+export { FileUpload };

package/src/components/FileUpload/styles.css

@@ -0,0 +1,32 @@
+.arkynFileUploadContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.arkynFileUpload {
+  outline: 1px solid transparent;
+
+  border-width: 1px;
+  border-color: var(--border);
+  border-radius: var(--rounded-inputs);
+
+  width: 100%;
+  height: 127px;
+  max-width: 475px;
+
+  background: rgba(var(--input-background), 1);
+}
+
+.arkynFileUpload.hasFile {
+  border-style: solid;
+}
+
+.arkynFileUpload.noHasFile {
+  border-style: dashed;
+}
+
+.arkynFileUpload.hasError {
+  border-color: rgb(var(--spotlight-danger));
+  outline-color: rgb(var(--spotlight-danger));
+}

package/src/components/ImageUpload/styles.css

@@ -5,6 +5,8 @@
 }
 
 .arkynImageUpload {
+  outline: 1px solid transparent;
+
   border-width: 1px;
   border-color: var(--border);
   border-radius: var(--rounded-inputs);
@@ -26,4 +28,5 @@
 
 .arkynImageUpload.hasError {
   border-color: rgb(var(--spotlight-danger));
+  outline-color: Ørgb(var(--spotlight-danger));
 }

package/src/index.ts

@@ -22,6 +22,7 @@ export {
 export { AudioUpload } from "./components/AudioUpload";
 export { Button } from "./components/Button";
 export { Checkbox } from "./components/Checkbox";
+export { FileUpload } from "./components/FileUpload";
 export { FormController, FormError, FormLabel } from "./components/Form";
 export { IconButton } from "./components/IconButton";
 export { ImageUpload } from "./components/ImageUpload";