@arkyn/components 1.4.7 → 1.4.9

package/src/components/AudioUpload/index.tsx

@@ -0,0 +1,121 @@
+import { useFieldErrors } from "@arkyn/components";
+import { AudioUploadProps } from "@arkyn/types";
+import { useState } from "react";
+
+import { AudioUploadError } from "./AudioUploadError";
+import { AudioUploadLabel } from "./AudioUploadLabel";
+import { HasFileContent } from "./HasFileContent";
+import { NoFileContent } from "./NoFileContent";
+
+import "./styles.css";
+
+function AudioUpload(props: AudioUploadProps) {
+  const {
+    name,
+    label,
+    fileName = "file",
+    method = "POST",
+    onUpload,
+    fileResponseName = "url",
+    selectAudioButtonText = "Selecionar arquivo de áudio",
+    dropAudioText = "Ou arraste e solte um arquivo de áudio aqui",
+    changeAudioButtonText = "Trocar arquivo de áudio",
+    acceptAudio = "audio/*",
+    action,
+    defaultValue = "",
+    showAsterisk = false,
+    disabled = false,
+  } = props;
+
+  const fieldErrors = useFieldErrors();
+  const fieldError = fieldErrors[name];
+
+  const [value, setValue] = useState(defaultValue);
+  const [error, setError] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [filePath, setFilePath] = useState(defaultValue);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleUploadAudio(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 audio");
+      })
+      .finally(() => setIsLoading(false));
+  }
+
+  function handleSelectFile(file: File) {
+    if (disabled) return;
+
+    console.log(file.type);
+
+    if (file.type.indexOf("audio") === -1) {
+      setError("O arquivo selecionado não é um arquivo de áudio");
+      return;
+    }
+
+    setFilePath(URL.createObjectURL(file));
+    handleUploadAudio(file);
+  }
+
+  const errorMessage = fieldError || error;
+
+  const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+  const hasImageClassName = filePath ? "hasAudio" : "noHasAudio";
+  const className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;
+
+  return (
+    <div className="arkynAudioUploadContainer">
+      {label && <AudioUploadLabel label={label} showAsterisk={showAsterisk} />}
+
+      <div className={className}>
+        <input type="hidden" name={name} value={value || ""} />
+
+        {!filePath && (
+          <NoFileContent
+            disabled={disabled}
+            isLoading={isLoading}
+            acceptAudio={acceptAudio}
+            dropAudioText={dropAudioText}
+            handleSelectFile={handleSelectFile}
+            selectAudioButtonText={selectAudioButtonText}
+          />
+        )}
+
+        {filePath && (
+          <HasFileContent
+            filePath={filePath}
+            acceptAudio={acceptAudio}
+            changeAudioButtonText={changeAudioButtonText}
+            disabled={disabled}
+            handleSelectFile={handleSelectFile}
+            isLoading={isLoading}
+            reSendAudio={
+              !!errorMessage && file ? () => handleUploadAudio(file) : undefined
+            }
+          />
+        )}
+      </div>
+
+      {errorMessage && <AudioUploadError error={errorMessage} />}
+    </div>
+  );
+}
+
+export { AudioUpload };

package/src/components/AudioUpload/styles.css

@@ -0,0 +1,33 @@
+.arkynAudioUploadContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.arkynAudioUpload {
+  border-width: 1px;
+
+  outline: 1px solid transparent;
+
+  border-color: var(--border);
+  border-radius: var(--rounded-inputs);
+
+  width: 100%;
+  height: 137px;
+  max-width: 475px;
+
+  background: rgba(var(--input-background), 1);
+}
+
+.arkynAudioUpload.hasAudio {
+  border-style: solid;
+}
+
+.arkynAudioUpload.noHasAudio {
+  border-style: dashed;
+}
+
+.arkynAudioUpload.hasError {
+  border-color: rgb(var(--spotlight-danger));
+  outline-color: rgb(var(--spotlight-danger));
+}

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

@@ -1,4 +1,4 @@
-import { HasFileContentProps } from "@arkyn/types";
+import { ImageUploadHasFileContentProps } from "@arkyn/types";
 import { RefreshCw } from "lucide-react";
 
 import { Button } from "../../Button";
@@ -7,8 +7,9 @@ import { Tooltip } from "../../Tooltip";
 
 import "./styles.css";
 
-function HasFileContent(props: HasFileContentProps) {
+function HasFileContent(props: ImageUploadHasFileContentProps) {
   const {
+    disabled,
     filePath,
     isLoading,
     acceptImage,
@@ -18,6 +19,8 @@ function HasFileContent(props: HasFileContentProps) {
   } = props;
 
   function handleClick() {
+    if (disabled) return;
+
     const input = document.createElement("input");
 
     input.type = "file";
@@ -47,6 +50,7 @@ function HasFileContent(props: HasFileContentProps) {
             isLoading={isLoading}
             onClick={reSendImage}
             icon={RefreshCw}
+            disabled={disabled}
           />
         </Tooltip>
       )}
@@ -57,6 +61,7 @@ function HasFileContent(props: HasFileContentProps) {
         variant="outline"
         size="sm"
         type="button"
+        disabled={disabled}
       >
         {changeImageButtonText}
       </Button>

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

@@ -1,26 +1,31 @@
-import { NoFileContentProps } from "@arkyn/types";
+import { ImageUploadNoFileContentProps } from "@arkyn/types";
 import { DragEvent } from "react";
 
 import { Button } from "../../Button";
 
 import "./styles.css";
 
-function NoFileContent(props: NoFileContentProps) {
+function NoFileContent(props: ImageUploadNoFileContentProps) {
   const {
     dropImageText,
     isLoading,
     acceptImage,
     handleSelectFile,
     selectImageButtonText,
+    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";
@@ -42,6 +47,7 @@ function NoFileContent(props: NoFileContentProps) {
         variant="ghost"
         size="sm"
         type="button"
+        disabled={disabled}
       >
         {selectImageButtonText}
       </Button>

package/src/components/ImageUpload/index.tsx

@@ -25,6 +25,7 @@ function ImageUpload(props: ImageUploadProps) {
     selectImageButtonText = "Selecionar imagem",
     dropImageText = "Ou arraste e solte a imagem aqui",
     onUpload,
+    disabled = false,
   } = props;
 
   const fieldErrors = useFieldErrors();
@@ -37,6 +38,8 @@ function ImageUpload(props: ImageUploadProps) {
   const [isLoading, setIsLoading] = useState(false);
 
   async function handleUploadImage(file: File) {
+    if (disabled) return;
+
     setIsLoading(true);
     setFile(file);
     setError("");
@@ -59,6 +62,8 @@ function ImageUpload(props: ImageUploadProps) {
   }
 
   function handleSelectFile(file: File) {
+    if (disabled) return;
+
     setFilePath(URL.createObjectURL(file));
     handleUploadImage(file);
   }
@@ -78,6 +83,7 @@ function ImageUpload(props: ImageUploadProps) {
 
         {!filePath && (
           <NoFileContent
+            disabled={disabled}
             isLoading={isLoading}
             acceptImage={acceptImage}
             dropImageText={dropImageText}
@@ -88,6 +94,7 @@ function ImageUpload(props: ImageUploadProps) {
 
         {filePath && (
           <HasFileContent
+            disabled={disabled}
             isLoading={isLoading}
             acceptImage={acceptImage}
             filePath={filePath}

package/src/components/ImageUpload/styles.css

@@ -5,7 +5,7 @@
 }
 
 .arkynImageUpload {
-  border-width: 2px;
+  border-width: 1px;
   border-color: var(--border);
   border-radius: var(--rounded-inputs);
 

package/src/components/Slider/index.tsx

@@ -0,0 +1,73 @@
+import { SliderProps } from "@arkyn/types";
+import { useEffect, useRef, useState } from "react";
+
+import "./styles.css";
+
+function Slider(props: SliderProps) {
+  const { onChange, value, disableDrag = false, onDragging } = props;
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = () => {
+    setIsDragging(true);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (disableDrag) return;
+    if (!isDragging || !sliderRef.current) return;
+
+    const rect = sliderRef.current.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
+
+    onChange(newValue);
+  };
+
+  const handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!sliderRef.current) return;
+
+    const rect = sliderRef.current.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
+
+    onChange(newValue);
+  };
+
+  useEffect(() => {
+    if (isDragging) {
+      onDragging && onDragging(true);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    } else {
+      onDragging && onDragging(false);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const isDraggingClass = isDragging ? "isDragging" : "isNotDragging";
+  const sliderClassname = `arkynSliderTrack ${isDraggingClass}`;
+
+  return (
+    <div
+      className={sliderClassname}
+      ref={sliderRef}
+      onMouseDown={handleMouseDown}
+      onClick={handleSliderClick}
+    >
+      <div className="arkynSliderFill" style={{ width: `${value}%` }} />
+      <div className="arkynSliderThumb" style={{ left: `${value}%` }} />
+    </div>
+  );
+}
+
+export { Slider };

package/src/components/Slider/styles.css

@@ -0,0 +1,37 @@
+.arkynSliderTrack {
+  width: 100%;
+  max-width: 400px;
+
+  height: 6px;
+  border: 1px solid var(--border);
+  background: rgba(var(--input-background), 1);
+  border-radius: 5px;
+  position: relative;
+  cursor: pointer;
+}
+
+.arkynSliderTrack.isDragging {
+  cursor: grabbing;
+}
+
+.arkynSliderFill {
+  height: 100%;
+  background: rgb(var(--spotlight-primary));
+  border-radius: 5px;
+}
+
+.arkynSliderThumb {
+  width: 12px;
+  cursor: grab;
+  height: 12px;
+  background: rgb(var(--spotlight-primary));
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.arkynSliderValue {
+  margin-top: 10px;
+  font-size: 18px;
+}

package/src/index.ts

@@ -19,6 +19,7 @@ export {
 } from "./components/Table";
 
 // Form
+export { AudioUpload } from "./components/AudioUpload";
 export { Button } from "./components/Button";
 export { Checkbox } from "./components/Checkbox";
 export { FormController, FormError, FormLabel } from "./components/Form";
@@ -29,6 +30,7 @@ export { MultiSelect } from "./components/MultiSelect";
 export { RadioBox, RadioGroup } from "./components/Radio";
 export { RichText } from "./components/RichText";
 export { Select } from "./components/Select";
+export { Slider } from "./components/Slider";
 export { Switch } from "./components/Switch";
 export { Textarea } from "./components/Textarea";