@arkyn/components 3.0.1-beta.2 → 3.0.1-beta.21

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

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

@@ -1,15 +0,0 @@
-.arkynFormLabel {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19.07px;
-}
-
-.arkynFormLabel.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/Form/index.ts

@@ -1,5 +0,0 @@
-import { FormController } from "./FormController";
-import { FormError } from "./FormError";
-import { FormLabel } from "./FormLabel";
-
-export { FormController, FormError, FormLabel };

package/src/components/GoogleMap/index.tsx

@@ -1,39 +0,0 @@
-import { GoogleMapProps } from "@arkyn/types";
-import { GoogleMap as Map, Marker } from "@react-google-maps/api";
-import { MapPinned } from "lucide-react";
-
-import "./styles.css";
-
-function GoogleMap({
-  coordinates,
-  zoom = 18,
-  draggable = false,
-  className,
-  ...rest
-}: GoogleMapProps) {
-  if (!coordinates) {
-    return (
-      <div className={"arkynGoogleMapPinnedEmpty " + className} {...rest}>
-        <MapPinned />
-      </div>
-    );
-  }
-
-  return (
-    <div className={"arkynGoogleMapPinned " + className} {...rest}>
-      <Map
-        zoom={zoom}
-        center={coordinates}
-        mapContainerStyle={{
-          borderRadius: "var(--rounded-cards)",
-          width: "100%",
-          height: "100%",
-        }}
-      >
-        <Marker draggable={draggable} position={coordinates} />
-      </Map>
-    </div>
-  );
-}
-
-export { GoogleMap };

package/src/components/GoogleMap/styles.css

@@ -1,20 +0,0 @@
-.arkynGoogleMapPinnedEmpty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 2px dashed var(--border);
-  border-radius: var(--rounded-cards);
-  background-color: rgba(var(--input-background), 1);
-}
-
-.arkynGoogleMapPinnedEmpty > svg {
-  height: 64px;
-  width: 64px;
-  color: var(--text-muted);
-  stroke-width: 1px;
-}
-
-.arkynGoogleMapPinned {
-  border-radius: var(--rounded-cards);
-}

package/src/components/GoogleSearchPlaces/index.tsx

@@ -1,79 +0,0 @@
-import { GoogleSearchPlacesProps } from "@arkyn/types";
-import { StandaloneSearchBox } from "@react-google-maps/api";
-import { useState } from "react";
-
-import { Input } from "../Input";
-
-type AddressComponentsType = {
-  long_name: string;
-  short_name: string;
-  types: string[];
-}[];
-
-function GoogleSearchPlaces({
-  onChange,
-  onPlaceChanged,
-  options,
-  ...rest
-}: GoogleSearchPlacesProps) {
-  const [searchBox, setSearchBox] = useState<any>(null);
-  const handleLoad = (ref: any) => setSearchBox(ref);
-
-  const handlePlacesChanged = () => {
-    const places = searchBox.getPlaces();
-    const place = places[0];
-
-    const address_components =
-      place?.address_components as AddressComponentsType;
-
-    function findData(key: string) {
-      const data = address_components.find((item) => item.types[0] === key);
-      if (data) return data.long_name;
-      return "";
-    }
-
-    function findDataShort(key: string) {
-      const data = address_components.find((item) => item.types[0] === key);
-      if (data) return data.short_name;
-      return "";
-    }
-
-    if (place) {
-      const street = findData("route");
-      const streetNumber = findData("street_number");
-      const district = findData("sublocality_level_1");
-      const city = findData("administrative_area_level_2");
-      const state = findData("administrative_area_level_1");
-      const stateShortName = findDataShort("administrative_area_level_1");
-      const cep = findData("postal_code");
-
-      const lat = place.geometry?.location?.lat();
-      const lng = place.geometry?.location?.lng();
-
-      const sendPlace = {
-        street,
-        city,
-        state,
-        district,
-        cep,
-        streetNumber,
-        stateShortName,
-        coordinates: { lat, lng },
-      };
-
-      onPlaceChanged && onPlaceChanged(sendPlace);
-    }
-  };
-
-  return (
-    <StandaloneSearchBox
-      onLoad={handleLoad}
-      onPlacesChanged={handlePlacesChanged}
-      options={options}
-    >
-      <Input type="text" onChange={(e) => onChange(e.target.value)} {...rest} />
-    </StandaloneSearchBox>
-  );
-}
-
-export { GoogleSearchPlaces };

package/src/components/GoogleTagManager/GoogleTagManager.client.tsx

@@ -1,19 +0,0 @@
-import { GoogleTagManager } from "./googleTagManager";
-
-type GoogleTagManagerClientProps = {
-  gtmId: string;
-  events: Record<string, string>;
-  dataLayer: Record<string, string>;
-  dataLayerName: string;
-  auth: string;
-  preview: string;
-};
-
-function GoogleTagManagerClient(props: GoogleTagManagerClientProps) {
-  const googleTagManager = new GoogleTagManager();
-  googleTagManager.initialize(props);
-
-  return <></>;
-}
-
-export { GoogleTagManagerClient };

package/src/components/GoogleTagManager/googleTagManager.ts

@@ -1,100 +0,0 @@
-import { appendToDataLayer } from "./snippets/appendToDataLayer";
-import { generateGTMElements } from "./snippets/generateGTMElements";
-
-type InitializeDataLayerProps = {
-  dataLayerName: string;
-  dataLayer: Record<string, string>;
-};
-
-type InitializeGTMProps = {
-  id: string;
-  events: Record<string, string>;
-  dataLayer: Record<string, string>;
-  dataLayerName: string;
-  preview: string;
-  auth: string;
-};
-
-type InitializeProps = {
-  gtmId: string;
-  events: Record<string, string>;
-  dataLayer: Record<string, string>;
-  dataLayerName: string;
-  auth: string;
-  preview: string;
-};
-
-interface Window {
-  [key: string]: any;
-}
-
-declare var window: Window;
-
-class GoogleTagManager {
-  private initializeDataScript(dataLayer: string) {
-    const script = document.createElement("script");
-    script.innerHTML = dataLayer;
-    return script;
-  }
-
-  private initializeGTMElements(props: InitializeGTMProps) {
-    const snippets = generateGTMElements(props);
-
-    const noScript = () => {
-      const noscript = document.createElement("noscript");
-      noscript.innerHTML = snippets.iframe;
-      return noscript;
-    };
-
-    const script = () => {
-      const script = document.createElement("script");
-      script.innerHTML = snippets.script;
-      return script;
-    };
-
-    const dataScript = this.initializeDataScript(snippets.dataLayerVar);
-
-    return {
-      noScript,
-      script,
-      dataScript,
-    };
-  }
-
-  initializeDataLayer(props: InitializeDataLayerProps) {
-    const { dataLayer, dataLayerName } = props;
-
-    if (window[dataLayerName]) return window[dataLayerName].push(dataLayer);
-
-    const snippets = appendToDataLayer({ dataLayer, dataLayerName });
-    const dataScript = this.initializeDataScript(snippets);
-
-    document.head.insertBefore(dataScript, document.head.childNodes[0]);
-  }
-
-  initialize(props: InitializeProps) {
-    const {
-      events,
-      gtmId,
-      dataLayer,
-      auth = "",
-      preview = "",
-      dataLayerName = "dataLayer",
-    } = props;
-
-    const gtm = this.initializeGTMElements({
-      id: gtmId,
-      events: events,
-      dataLayer: dataLayer || undefined,
-      dataLayerName: dataLayerName,
-      auth,
-      preview,
-    });
-
-    if (dataLayer) document.head.appendChild(gtm.dataScript);
-    document.head.insertBefore(gtm.script(), document.head.childNodes[0]);
-    document.body.insertBefore(gtm.noScript(), document.body.childNodes[0]);
-  }
-}
-
-export { GoogleTagManager };

package/src/components/GoogleTagManager/index.tsx

@@ -1,45 +0,0 @@
-import { ClientOnly } from "../../components/ClientOnly";
-import { GoogleTagManagerClient } from "./GoogleTagManager.client";
-
-type GoogleTagManagerProps = {
-  gtmId: string;
-  events?: Record<string, string>;
-  dataLayer?: Record<string, string>;
-  dataLayerName?: string;
-  auth?: string;
-  preview?: string;
-  showInDevMode?: boolean;
-};
-
-function GoogleTagManager(props: GoogleTagManagerProps) {
-  const {
-    gtmId,
-    auth = "",
-    preview = "",
-    dataLayerName = "dataLayer",
-    events = {},
-    dataLayer = {},
-    showInDevMode = false,
-  } = props;
-
-  if (process.env.NODE_ENV !== "production" && !showInDevMode) {
-    return <></>;
-  }
-
-  return (
-    <ClientOnly>
-      {() => (
-        <GoogleTagManagerClient
-          auth={auth}
-          dataLayer={dataLayer}
-          dataLayerName={dataLayerName}
-          events={events}
-          gtmId={gtmId}
-          preview={preview}
-        />
-      )}
-    </ClientOnly>
-  );
-}
-
-export { GoogleTagManager };

package/src/components/GoogleTagManager/snippets/appendToDataLayer.ts

@@ -1,14 +0,0 @@
-type AppendToDataLayer = {
-  dataLayer: Record<string, string>;
-  dataLayerName: string;
-};
-
-function appendToDataLayer(props: AppendToDataLayer) {
-  const { dataLayer, dataLayerName } = props;
-
-  return `
-  window.${dataLayerName} = window.${dataLayerName} || [];
-  window.${dataLayerName}.push(${JSON.stringify(dataLayer)})`;
-}
-
-export { appendToDataLayer };