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

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

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

@@ -1,43 +0,0 @@
-import { appendToDataLayer } from "./appendToDataLayer";
-
-type GenerateGTMElementsProps = {
-  id: string;
-  events: Record<string, string>;
-  dataLayer: Record<string, string>;
-  dataLayerName: string;
-  preview: string;
-  auth: string;
-};
-
-function generateGTMElements(props: GenerateGTMElementsProps) {
-  const { id, events, dataLayer, dataLayerName, preview, auth } = props;
-
-  const gtmAuth = `&gtm_auth=${auth}`;
-  const gtmPreview = `&gtm_preview=${preview}`;
-
-  if (!id) console.warn("GTM Id is required");
-
-  const iframe = `
-    <iframe src="https://www.googletagmanager.com/ns.html?id=${id}${gtmAuth}${gtmPreview}&gtm_cookies_win=x"
-      height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>`;
-
-  const script = `
-    (function(w,d,s,l,i){w[l]=w[l]||[];
-      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(
-        events
-      ).slice(1, -1)}});
-      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
-      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+'${gtmAuth}${gtmPreview}&gtm_cookies_win=x';
-      f.parentNode.insertBefore(j,f);
-    })(window,document,'script','${dataLayerName}','${id}');`;
-
-  const dataLayerVar = appendToDataLayer({ dataLayer, dataLayerName });
-
-  return {
-    iframe,
-    script,
-    dataLayerVar,
-  };
-}
-
-export { generateGTMElements };

package/src/components/IconButton/index.tsx

@@ -1,39 +0,0 @@
-import { IconButtonProps } from "@arkyn/types";
-import { Loader2 } from "lucide-react";
-
-import "./styles.css";
-
-function IconButton(props: IconButtonProps) {
-  const {
-    isLoading = false,
-    scheme = "primary",
-    variant = "solid",
-    size = "md",
-    icon: Icon,
-    disabled,
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
-  const loading = isLoading ? "loadingTrue" : "loadingFalse";
-  const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
-
-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={className.trim()}
-      {...rest}
-    >
-      <div className="arkynIconButtonSpinner">
-        <Loader2 size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-
-      <div className="arkynIconButtonContent">
-        <Icon size={iconSize[size]} strokeWidth={2.5} />
-      </div>
-    </button>
-  );
-}
-
-export { IconButton };

package/src/components/IconButton/styles.css

@@ -1,183 +0,0 @@
-/* BASE */
-.arkynIconButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(0.95);
-}
-
-html.dark .arkynIconButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynIconButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynIconButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* VARIANTS */
-.arkynIconButton.solid {
-  color: #fff;
-}
-
-.arkynIconButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.outline {
-  background-color: rgba(var(--input-background), 1);
-  border-color: var(--border);
-}
-
-.arkynIconButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynIconButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-
-.arkynIconButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-
-.arkynIconButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-
-.arkynIconButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-
-.arkynIconButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynIconButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynIconButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynIconButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynIconButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-
-.arkynIconButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* SIZE */
-.arkynIconButton.lg {
-  border-radius: var(--rounded-inputs);
-  height: 44px;
-  width: 44px;
-}
-
-.arkynIconButton.md {
-  border-radius: var(--rounded-inputs);
-  height: 40px;
-  width: 40px;
-}
-
-.arkynIconButton.sm {
-  border-radius: var(--rounded-inputs);
-  height: 32px;
-  width: 32px;
-}
-
-.arkynIconButton.xs {
-  border-radius: calc(var(--rounded-inputs) * 0.6667); /* 2/3 */
-  height: 24px;
-  width: 24px;
-}
-
-/* SPIN */
-.arkynIconButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
-
-.arkynIconButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynIconButton.loadingTrue .arkynIconButtonSpinner {
-  opacity: 1;
-}
-
-.arkynIconButton.loadingTrue .arkynIconButtonContent {
-  opacity: 0;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

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

@@ -1,72 +0,0 @@
-import { ImageUploadHasFileContentProps } from "@arkyn/types";
-import { RefreshCw } from "lucide-react";
-
-import { Button } from "../../Button";
-import { IconButton } from "../../IconButton";
-import { Tooltip } from "../../Tooltip";
-
-import "./styles.css";
-
-function HasFileContent(props: ImageUploadHasFileContentProps) {
-  const {
-    disabled,
-    filePath,
-    isLoading,
-    acceptImage,
-    changeImageButtonText,
-    handleSelectFile,
-    reSendImage,
-  } = props;
-
-  function handleClick() {
-    if (disabled) return;
-
-    const input = document.createElement("input");
-
-    input.type = "file";
-    input.accept = acceptImage;
-
-    input.onchange = (event) => {
-      const file = (event.target as HTMLInputElement).files?.[0];
-      if (file) handleSelectFile(file);
-    };
-
-    input.click();
-  }
-
-  return (
-    <div
-      className="arkynImageUploadHasFileContent"
-      style={{ backgroundImage: `url("${filePath}")` }}
-    >
-      {reSendImage && (
-        <Tooltip orientation="bottom" text="Reenviar imagem">
-          <IconButton
-            type="button"
-            aria-label="resend image"
-            variant="outline"
-            scheme="danger"
-            size="sm"
-            isLoading={isLoading}
-            onClick={reSendImage}
-            icon={RefreshCw}
-            disabled={disabled}
-          />
-        </Tooltip>
-      )}
-
-      <Button
-        isLoading={isLoading}
-        onClick={handleClick}
-        variant="outline"
-        size="sm"
-        type="button"
-        disabled={disabled}
-      >
-        {changeImageButtonText}
-      </Button>
-    </div>
-  );
-}
-
-export { HasFileContent };

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

@@ -1,17 +0,0 @@
-.arkynImageUploadHasFileContent {
-  display: flex;
-  align-items: end;
-  justify-content: end;
-
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  height: 100%;
-  width: 100%;
-
-  padding: 6px;
-  gap: 8px;
-
-  border-radius: calc(var(--rounded-inputs) - 2px);
-}