@arkyn/components 3.0.1-beta.5 → 3.0.1-beta.51

package/src/components/FacebookPixel/defineType.d.ts

@@ -1,17 +0,0 @@
-type Fbq = {
-  (...args: any[]): void;
-  callMethod?: (...args: any[]) => void;
-  queue: any[];
-  push: (...args: any[]) => void;
-  loaded: boolean;
-  version: string;
-};
-
-declare global {
-  interface Window {
-    fbq?: Fbq;
-    _fbq?: Fbq;
-  }
-}
-
-export { Fbq };

package/src/components/FacebookPixel/index.tsx

@@ -1,14 +0,0 @@
-import { FacebookPixelProps } from "@arkyn/types";
-
-import { ClientOnly } from "../ClientOnly";
-import { FacebookPixelClient } from "./FacebookPixel.client";
-
-function FacebookPixel(props: FacebookPixelProps) {
-  if (process.env.NODE_ENV !== "production" && !props.showInDevMode) {
-    return <></>;
-  }
-
-  return <ClientOnly>{() => <FacebookPixelClient {...props} />}</ClientOnly>;
-}
-
-export { FacebookPixel };

package/src/components/FacebookPixel/pixel.ts

@@ -1,130 +0,0 @@
-import { Fbq } from "./defineType";
-
-type Options = {
-  autoConfig?: boolean;
-  debug?: boolean;
-};
-
-class FacebookPixel {
-  pixelId: string;
-  autoConfig: boolean;
-  initialized: boolean;
-
-  constructor(pixelId: string, options?: Options) {
-    this.pixelId = pixelId;
-    this.autoConfig = options?.autoConfig || true;
-    this.initialized = false;
-  }
-
-  private loadFacebookPixel() {
-    // Verifica se o objeto fbq já está definido no objeto window
-    if (window.fbq) return;
-
-    // Define a função fbq que será usada para enviar eventos ao Facebook Pixel
-    const fbq: Fbq = function (...args: any[]) {
-      // Se fbq.callMethod estiver definido, chama o método com os argumentos fornecidos
-      // Caso contrário, adiciona os argumentos à fila de eventos
-      fbq.callMethod ? fbq.callMethod.apply(fbq, args) : fbq.queue.push(args);
-    } as Fbq;
-
-    // Se o objeto _fbq não estiver definido no objeto window, define-o como fbq
-    if (!window._fbq) window._fbq = fbq;
-
-    // Define propriedades e métodos adicionais para fbq
-    fbq.push = fbq;
-    fbq.loaded = true;
-    fbq.version = "2.0";
-    fbq.queue = [];
-
-    // Cria um elemento script e define o atributo src como o URL do script do Facebook Pixel
-    const script = document.createElement("script");
-    script.async = true;
-    script.src = "https://connect.facebook.net/en_US/fbevents.js";
-
-    // Busca o primeiro elemento script no documento
-    const firstScript = document.getElementsByTagName("script")[0];
-
-    // Estoura uma exceção se não houver nenhum elemento script no documento
-    if (!firstScript.parentNode) {
-      throw new Error("No script tag found in the document");
-    }
-
-    // Insere o elemento script no início do documento
-    firstScript.parentNode.insertBefore(script, firstScript);
-    window.fbq = fbq;
-  }
-
-  init(advancedMatching: object = {}) {
-    // Verifica se o pixel já foi inicializado
-    this.initialized = typeof window !== "undefined" && !!window.fbq;
-
-    // Carrega o Facebook Pixel
-    this.loadFacebookPixel();
-
-    // Estoura uma exceção se o fbq não estiver definido
-    if (!window.fbq) {
-      throw new Error("window.fbq is not defined");
-    }
-
-    // Inicializa o pixel com o ID fornecido
-    if (this.autoConfig === false) {
-      window.fbq("set", "autoConfig", false, this.pixelId);
-    } else {
-      window.fbq("init", this.pixelId, advancedMatching);
-    }
-
-    // Marca o pixel como inicializado
-    this.initialized = true;
-  }
-
-  pageView() {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("track", "PageView");
-  }
-
-  track(title: string, data?: object) {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("track", title, data);
-  }
-
-  trackSingle(pixel: string, title: string, data?: object) {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("trackSingle", pixel, title, data);
-  }
-
-  trackCustom(event: string, data?: object) {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("trackCustom", event, data);
-  }
-
-  trackSingleCustom(pixel: string, event: string, data?: object) {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("trackSingle", pixel, event, data);
-  }
-
-  grantConsent() {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("consent", "grant");
-  }
-
-  revokeConsent() {
-    if (!this.initialized) return;
-    if (!window.fbq) return;
-
-    window.fbq("consent", "revoke");
-  }
-}
-
-export { FacebookPixel };

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

@@ -1,12 +0,0 @@
-import { FileUploadErrorProps } from "@arkyn/types";
-import "./styles.css";
-
-function FileUploadError(props: FileUploadErrorProps) {
-  const { error } = props;
-  const className = `arkynFileUploadError`;
-
-  if (error) return <strong className={className}>{error}</strong>;
-  return <></>;
-}
-
-export { FileUploadError };

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

@@ -1,6 +0,0 @@
-.arkynFileUploadError {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 600;
-  color: rgb(var(--spotlight-danger), 1);
-}

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

@@ -1,13 +0,0 @@
-import { FileUploadLabelProps } from "@arkyn/types";
-import "./styles.css";
-
-function FileUploadLabel(props: FileUploadLabelProps) {
-  const { label, showAsterisk } = props;
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynFileUploadLabel ${show}`;
-
-  return <strong className={className.trim()}>{label}</strong>;
-}
-
-export { FileUploadLabel };

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

@@ -1,15 +0,0 @@
-.arkynFileUploadLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynFileUploadLabel.asteriskTrue::before {
-  content: "* ";
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16.34px;
-  text-align: left;
-  color: rgb(var(--spotlight-danger), 1);
-}

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

@@ -1,92 +0,0 @@
-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

@@ -1,40 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-import { FileUploadNoFileContentProps } from "@arkyn/types";
-import { DragEvent } from "react";
-
-import { Button } from "../../Button";
-
-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

@@ -1,19 +0,0 @@
-.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

@@ -1,111 +0,0 @@
-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

@@ -1,32 +0,0 @@
-.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/Form/FormController/index.tsx

@@ -1,43 +0,0 @@
-import { FormControllerContextProps, FormControllerProps } from "@arkyn/types";
-import { createContext, useContext, useId, useRef } from "react";
-
-import { useFieldErrors } from "../../../hooks/useFieldErrors";
-import "./styles.css";
-
-const FormControllerContext = createContext({} as FormControllerContextProps);
-
-function FormController(props: FormControllerProps) {
-  const {
-    children,
-    className: baseClassName,
-    id: formControllerId,
-    ...rest
-  } = props;
-
-  const fieldErrors = useFieldErrors();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const name = inputRef.current?.name || "";
-  const error = fieldErrors?.[name] || null;
-
-  const id = useId();
-  const className = `arkynFormController ${baseClassName}`;
-
-  return (
-    <FormControllerContext.Provider value={{ error, id, inputRef }}>
-      <section
-        id={formControllerId || name || undefined}
-        className={className.trim()}
-        {...rest}
-      >
-        {children}
-      </section>
-    </FormControllerContext.Provider>
-  );
-}
-
-function useFormController() {
-  return useContext(FormControllerContext);
-}
-
-export { FormController, useFormController };

package/src/components/Form/FormController/styles.css

@@ -1,7 +0,0 @@
-.arkynFormController {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  height: max-content;
-}

package/src/components/Form/FormError/index.tsx

@@ -1,27 +0,0 @@
-import { FormErrorProps } from "@arkyn/types";
-
-import { useFormController } from "../FormController";
-import "./styles.css";
-
-function FormError(props: FormErrorProps) {
-  const { children, className: baseClassName, ...rest } = props;
-  const className = `arkynFormError ${baseClassName}`;
-
-  const { error } = useFormController();
-  if (children) {
-    return (
-      <strong className={className.trim()} {...rest}>
-        {children}
-      </strong>
-    );
-  }
-
-  if (!error) return <></>;
-  return (
-    <strong className={className.trim()} {...rest}>
-      {error}
-    </strong>
-  );
-}
-
-export { FormError };

package/src/components/Form/FormError/styles.css

@@ -1,6 +0,0 @@
-.arkynFormError {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 600;
-  color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/Form/FormLabel/index.tsx

@@ -1,21 +0,0 @@
-import { FormLabelProps } from "@arkyn/types";
-
-import { useFormController } from "../FormController";
-import "./styles.css";
-
-function FormLabel(props: FormLabelProps) {
-  const {
-    showAsterisk = false,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const { id } = useFormController();
-
-  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
-  const className = `arkynFormLabel ${show} ${baseClassName}`;
-
-  return <label className={className.trim()} htmlFor={id} {...rest} />;
-}
-
-export { FormLabel };