@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.17

package/src/components/Checkbox/index.tsx

@@ -1,59 +0,0 @@
-import { CheckboxProps } from "@arkyn/types";
-import { Check } from "lucide-react";
-import { useState } from "react";
-
-import { useFormController } from "../Form/FormController";
-import "./styles.css";
-
-function Checkbox(props: CheckboxProps) {
-  const {
-    name,
-    className: baseClassName = "",
-    size = "md",
-    isError: defaultIsError,
-    defaultChecked = false,
-    checked: baseChecked = null,
-    onCheck,
-    value,
-    ...rest
-  } = props;
-
-  const { id, inputRef, error } = useFormController();
-  const isError = defaultIsError || !!error;
-
-  const [isChecked, setIsChecked] = useState(defaultChecked || false);
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  const errorClass = isError ? "errorTrue" : "errorFalse";
-  const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-
-  const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass} ${baseClassName}`;
-
-  function handleCheck() {
-    const defaultChecked = isChecked;
-    setIsChecked(!defaultChecked);
-    onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-  }
-
-  return (
-    <button
-      id={id}
-      type="button"
-      className={className}
-      onClick={handleCheck}
-      {...rest}
-    >
-      <input
-        type="hidden"
-        name={name}
-        ref={inputRef}
-        value={currentChecked ? value || "checked" : ""}
-      />
-
-      <Check />
-    </button>
-  );
-}
-
-export { Checkbox };

package/src/components/Checkbox/styles.css

@@ -1,78 +0,0 @@
-.arkynCheckbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 2px solid var(--border);
-  background-color: rgba(var(--input-background), 1);
-}
-
-.arkynCheckbox:hover {
-  cursor: pointer;
-}
-
-.arkynCheckbox > svg {
-  display: none;
-  stroke-width: 3px;
-}
-
-/* SIZE */
-.arkynCheckbox.sm {
-  min-height: 16px;
-  min-width: 16px;
-  max-height: 16px;
-  max-width: 16px;
-  border-radius: calc(var(--rounded-inputs) * 0.3333);
-}
-
-.arkynCheckbox.sm > svg {
-  min-height: 12px;
-  min-width: 12px;
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynCheckbox.md {
-  min-height: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  max-width: 20px;
-  border-radius: calc(var(--rounded-inputs) * 0.6667);
-}
-
-.arkynCheckbox.md > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-.arkynCheckbox.lg {
-  min-height: 24px;
-  min-width: 24px;
-  max-height: 24px;
-  max-width: 24px;
-  border-radius: var(--rounded-inputs);
-}
-
-.arkynCheckbox.lg > svg {
-  min-height: 14px;
-  min-width: 14px;
-  max-height: 14px;
-  max-width: 14px;
-}
-
-/* CHECKED */
-.arkynCheckbox.checkedTrue {
-  background-color: rgb(var(--spotlight-primary), 1);
-  border-color: rgb(var(--spotlight-primary), 1);
-}
-
-.arkynCheckbox.checkedTrue > svg {
-  display: unset;
-  color: #fff;
-}
-
-.arkynCheckbox.errorTrue {
-  border-color: rgb(var(--spotlight-danger), 1);
-}

package/src/components/ClientOnly.tsx

@@ -1,10 +0,0 @@
-import { useHydrated } from "../hooks/useHydrated";
-
-type Props = {
-  children(): React.ReactNode;
-  fallback?: React.ReactNode;
-};
-
-export function ClientOnly({ children, fallback = null }: Props) {
-  return useHydrated() ? <>{children()}</> : <>{fallback}</>;
-}

package/src/components/Divider/index.tsx

@@ -1,16 +0,0 @@
-import { DividerProps } from "@arkyn/types";
-import "./styles.css";
-
-function Divider(props: DividerProps) {
-  const {
-    className: baseClassName,
-    orientation = "horizontal",
-    ...rest
-  } = props;
-
-  const className = `arkynDivider ${orientation} ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { Divider };

package/src/components/Drawer/Container/index.tsx

@@ -1,55 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { DrawerContainerProps } from "@arkyn/types";
-import { createContext } from "react";
-
-import "./styles.css";
-
-type DrawerContext = { makeInvisible: () => void };
-const drawerContext = createContext({} as DrawerContext);
-
-function DrawerContainer(props: DrawerContainerProps) {
-  const {
-    isVisibled,
-    makeInvisible,
-    orientation = "left",
-    children,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const translateX = orientation === "left" ? "-100%" : "100%";
-
-  const visibledClass = isVisibled ? "visibleTrue" : "visibleFalse";
-  const className = `arkynDrawerContainer ${orientation} ${visibledClass} ${baseClassName}`;
-
-  return (
-    <drawerContext.Provider value={{ makeInvisible }}>
-      <AnimatePresence>
-        {isVisibled && (
-          <aside className={className.trim()} {...rest}>
-            <motion.div
-              className="arkynDrawerContainerOverlay"
-              transition={{ duration: 0.15, ease: "easeOut" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={makeInvisible}
-            />
-
-            <motion.div
-              className="arkynDrawerContainerContent"
-              transition={{ ease: "easeOut", duration: 0.15 }}
-              initial={{ transform: `translateX(${translateX})` }}
-              animate={{ transform: "translateX(0px)" }}
-              exit={{ transform: `translateX(${translateX})` }}
-            >
-              {children}
-            </motion.div>
-          </aside>
-        )}
-      </AnimatePresence>
-    </drawerContext.Provider>
-  );
-}
-
-export { DrawerContainer, drawerContext };

package/src/components/Drawer/Header/index.tsx

@@ -1,38 +0,0 @@
-import { ModalHeaderProps } from "@arkyn/types";
-
-import { X } from "lucide-react";
-import { useContext } from "react";
-
-import { drawerContext } from "../Container";
-import "./styles.css";
-
-function DrawerHeader(props: ModalHeaderProps) {
-  const {
-    showCloseButton = true,
-    className: baseClassName,
-    children,
-    ...rest
-  } = props;
-
-  const { makeInvisible } = useContext(drawerContext);
-  const className = `arkynDrawerHeader ${baseClassName}`;
-
-  return (
-    <header className={className.trim()} {...rest}>
-      {children}
-
-      {showCloseButton && (
-        <button
-          className="arkynDrawerHeaderCloseButton"
-          type="button"
-          onClick={makeInvisible}
-          aria-label="Close drawer"
-        >
-          <X size={24} />
-        </button>
-      )}
-    </header>
-  );
-}
-
-export { DrawerHeader };

package/src/components/Drawer/index.ts

@@ -1,4 +0,0 @@
-import { DrawerContainer } from "./Container";
-import { DrawerHeader } from "./Header";
-
-export { DrawerContainer, DrawerHeader };

package/src/components/FacebookPixel/FacebookPixel.client.tsx

@@ -1,33 +0,0 @@
-import { FacebookPixelProps } from "@arkyn/types";
-import { FacebookPixel } from "./pixel";
-
-function FacebookPixelClient(props: FacebookPixelProps) {
-  const {
-    pixelId,
-    options,
-    pageView,
-    track,
-    trackCustom,
-    trackSingle,
-    trackSingleCustom,
-    grantConsent,
-    revokeConsent,
-  } = props;
-
-  const pixel = new FacebookPixel(pixelId, options);
-
-  pixel.init();
-
-  if (pageView) pixel.pageView();
-  if (grantConsent) pixel.grantConsent();
-  if (revokeConsent) pixel.revokeConsent();
-
-  if (track) pixel.track(...track);
-  if (trackCustom) pixel.trackCustom(...trackCustom);
-  if (trackSingle) pixel.trackSingle(pixelId, ...trackSingle);
-  if (trackSingleCustom) pixel.trackSingleCustom(pixelId, ...trackSingleCustom);
-
-  return <></>;
-}
-
-export { FacebookPixelClient };

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;
-}