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

package/src/hooks/useModal.ts

@@ -1,45 +0,0 @@
-import { ModalContextProps } from "@arkyn/types";
-import { useContext } from "react";
-
-import { ModalContext } from "../context/ModalContext";
-
-type OpenModalProps<T = any> = (data?: T) => void;
-
-function useModal<T = any>(): ModalContextProps<T>;
-function useModal<T = any>(
-  key: string
-): {
-  modalIsOpen: boolean;
-  modalData: T;
-  openModal: OpenModalProps<T>;
-  closeModal: () => void;
-};
-
-function useModal(key?: string) {
-  const contextData = useContext(ModalContext);
-
-  if (Object.entries(contextData).length === 0) {
-    throw new Error("useModal must be used within a Provider");
-  }
-
-  if (key) {
-    const {
-      modalData: contextModalData,
-      modalIsOpen: contextModalIsOpen,
-      openModal: contextOpenModal,
-      closeModal: contextCloseModal,
-    } = contextData;
-
-    const modalIsOpen = contextModalIsOpen(key);
-    const modalData = contextModalData(key);
-
-    const openModal: OpenModalProps = (data) => contextOpenModal(key, data);
-    const closeModal = () => contextCloseModal(key);
-
-    return { modalIsOpen, modalData, openModal, closeModal };
-  } else {
-    return contextData;
-  }
-}
-
-export { useModal };

package/src/hooks/useScopedParams.ts

@@ -1,31 +0,0 @@
-import { useLocation } from "react-router";
-
-type ParamsType = Record<string, string | number | boolean | undefined>;
-
-function useScopedParams(scope: string = "") {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const prefix = scope ? `${scope}:` : "";
-
-  const updateSearchParams = (params: ParamsType) => {
-    Object.entries(params).forEach(([key, value]) => {
-      if (value === undefined) {
-        searchParams.delete(`${prefix}${key}`);
-      } else {
-        searchParams.set(`${prefix}${key}`, String(value));
-      }
-    });
-  };
-
-  return {
-    getParam: (key: string) => searchParams.get(`${prefix}${key}`),
-    getScopedSearch: (params: ParamsType) => {
-      updateSearchParams(params);
-      let search = searchParams.toString();
-      if (search) search = "?" + search;
-      return search;
-    },
-  };
-}
-
-export { useScopedParams };

package/src/hooks/useToast.ts

@@ -1,14 +0,0 @@
-import { useContext } from "react";
-import { ToastContext } from "../context/ToastContext";
-
-function useToast() {
-  const contextData = useContext(ToastContext);
-
-  if (Object.entries(contextData).length === 0) {
-    throw new Error("useToast must be used within a Provider");
-  }
-
-  return contextData;
-}
-
-export { useToast };

package/src/index.ts

@@ -1,80 +0,0 @@
-// Data Display
-export {
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "./components/Alert";
-export { Badge } from "./components/Badge";
-export { Card } from "./components/Card";
-export { Divider } from "./components/Divider";
-export { Skeleton } from "./components/Skeleton";
-export {
-  TableBody,
-  TableCaption,
-  TableContainer,
-  TableFooter,
-  TableHeader,
-} from "./components/Table";
-
-// Form
-export { AudioUpload } from "./components/AudioUpload";
-export { Button } from "./components/Button";
-export { Checkbox } from "./components/Checkbox";
-export { FileUpload } from "./components/FileUpload";
-export { FormController, FormError, FormLabel } from "./components/Form";
-export { IconButton } from "./components/IconButton";
-export { ImageUpload } from "./components/ImageUpload";
-export { Input } from "./components/Input";
-export { MultiSelect } from "./components/MultiSelect";
-export { PhoneInput } from "./components/PhoneInput";
-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";
-
-// Navigation
-export { BreadcrumbContainer, BreadcrumbLink } from "./components/Breadcrumb";
-export { Pagination } from "./components/Pagination";
-export { TabButton, TabContainer } from "./components/Tabs";
-
-// Overlay
-export { DrawerContainer, DrawerHeader } from "./components/Drawer";
-export { ModalContainer, ModalFooter, ModalHeader } from "./components/Modal";
-export { Popover } from "./components/Popover";
-export { Toast } from "./components/Toast";
-export { Tooltip } from "./components/Tooltip";
-
-// Hooks
-export { useFormController } from "./components/Form/FormController";
-export { useAutomation } from "./hooks/useAutomation";
-export { useDrawer } from "./hooks/useDrawer";
-export { useFieldErrors } from "./hooks/useFieldErrors";
-export { useFormKey } from "./hooks/useFormKey";
-export { useHydrated } from "./hooks/useHydrated";
-export { useModal } from "./hooks/useModal";
-export { useScopedParams } from "./hooks/useScopedParams";
-export { useToast } from "./hooks/useToast";
-
-// Providers
-export { DrawerProvider } from "./provider/DrawerProvider";
-export { FormKeyProvider } from "./provider/FormKeyProvider";
-export { GoogleProvider } from "./provider/GoogleProvider";
-export { ModalProvider } from "./provider/ModalProvider";
-export { ToastProvider } from "./provider/ToastProvider";
-
-// Others
-export { ClientOnly } from "./components/ClientOnly";
-export { FacebookPixel } from "./components/FacebookPixel";
-export { GoogleMap } from "./components/GoogleMap";
-export { GoogleSearchPlaces } from "./components/GoogleSearchPlaces";
-export { GoogleTagManager } from "./components/GoogleTagManager";
-
-// Services
-export { getHtmlFromRichTextValue } from "./services/getHtmlFromRichTextValue";
-export { getRichTextValueFromHtml } from "./services/getRichTextValueFromHtml";
-export { isHtml } from "./services/isHtml";
-export { morpheme } from "./services/morpheme";

package/src/provider/DrawerProvider.tsx

@@ -1,41 +0,0 @@
-import { DrawerProviderProps, OpenedDrawers } from "@arkyn/types";
-import { useState } from "react";
-
-import { DrawerContext } from "../context/DrawerContext";
-
-function DrawerProvider(args: DrawerProviderProps) {
-  const { children = false } = args;
-  const [openedDrawers, setOpenedDrawers] = useState<OpenedDrawers>([]);
-
-  function drawerIsOpen(key: string) {
-    return !!openedDrawers.some((drawer) => drawer.key === key);
-  }
-
-  function drawerData(key: string) {
-    return openedDrawers.find((drawer) => drawer.key === key)?.data;
-  }
-
-  function openDrawer(key: string, data?: any) {
-    const alreadyExist = drawerIsOpen(key);
-    if (alreadyExist) {
-      setOpenedDrawers((old) => {
-        const filtered = old.filter((drawer) => drawer.key !== key);
-        return [...filtered, { key, data }];
-      });
-    } else setOpenedDrawers([...openedDrawers, { key, data }]);
-  }
-
-  function closeDrawer(key: string) {
-    setOpenedDrawers(openedDrawers.filter((drawer) => drawer.key !== key));
-  }
-
-  return (
-    <DrawerContext.Provider
-      value={{ drawerIsOpen, drawerData, openDrawer, closeDrawer }}
-    >
-      {children}
-    </DrawerContext.Provider>
-  );
-}
-
-export { DrawerProvider };

package/src/provider/FormKeyProvider.tsx

@@ -1,11 +0,0 @@
-import { FormKeyContext } from "../context/FormKeyContext";
-
-function FormKeyProvider(args: { children: React.ReactNode; rawKey: string }) {
-  const { children, rawKey } = args;
-
-  return (
-    <FormKeyContext.Provider value={rawKey}>{children}</FormKeyContext.Provider>
-  );
-}
-
-export { FormKeyProvider };

package/src/provider/GoogleProvider.tsx

@@ -1,20 +0,0 @@
-import { GoogleProviderProps } from "@arkyn/types";
-import { LoadScript } from "@react-google-maps/api";
-
-function GoogleProvider({
-  googleMapsApiKey,
-  children,
-  ...props
-}: GoogleProviderProps) {
-  return (
-    <LoadScript
-      libraries={["places", "marker", "maps"]}
-      googleMapsApiKey={googleMapsApiKey}
-      {...props}
-    >
-      {children}
-    </LoadScript>
-  );
-}
-
-export { GoogleProvider };

package/src/provider/ModalProvider.tsx

@@ -1,45 +0,0 @@
-import { ModalProviderProps, OpenedModals } from "@arkyn/types";
-import { useState } from "react";
-
-import { ModalContext } from "../context/ModalContext";
-
-function ModalProvider(args: ModalProviderProps) {
-  const { children = false } = args;
-  const [openedModals, setOpenedModals] = useState<OpenedModals>([]);
-
-  function modalIsOpen(key: string) {
-    return !!openedModals.some((modal) => modal.key === key);
-  }
-
-  function modalData(key: string) {
-    return openedModals.find((modal) => modal.key === key)?.data;
-  }
-
-  function openModal(key: string, data?: any) {
-    const alreadyExist = modalIsOpen(key);
-    if (alreadyExist) {
-      setOpenedModals((old) => {
-        const filtered = old.filter((modal) => modal.key !== key);
-        return [...filtered, { key, data }];
-      });
-    } else setOpenedModals([...openedModals, { key, data }]);
-  }
-
-  function closeModal(key: string) {
-    setOpenedModals(openedModals.filter((modal) => modal.key !== key));
-  }
-
-  function closeAll() {
-    setOpenedModals([]);
-  }
-
-  return (
-    <ModalContext.Provider
-      value={{ modalIsOpen, modalData, openModal, closeModal, closeAll }}
-    >
-      {children}
-    </ModalContext.Provider>
-  );
-}
-
-export { ModalProvider };

package/src/provider/ToastProvider.tsx

@@ -1,51 +0,0 @@
-import { ToastProps, ToastProviderProps } from "@arkyn/types";
-import toast, { Toaster } from "react-hot-toast";
-
-import { ToastContext } from "../context/ToastContext";
-
-function ToastProvider({ children }: ToastProviderProps) {
-  function showToast(props: ToastProps) {
-    switch (props.type) {
-      case "success":
-        return toast.success(props.message, {
-          style: {
-            background: "#10B981",
-            color: "#ffffff",
-            padding: "12px 16px",
-            fontSize: "14px",
-            fontWeight: 600,
-          },
-          iconTheme: {
-            primary: "#059669",
-            secondary: "#ffffff",
-          },
-        });
-      case "danger":
-        return toast.error(props.message, {
-          style: {
-            background: "#E11D48",
-            color: "#ffffff",
-            padding: "12px 16px",
-            fontSize: "14px",
-            fontWeight: 600,
-          },
-          iconTheme: {
-            primary: "#BE123C",
-            secondary: "#ffffff",
-          },
-        });
-    }
-  }
-
-  return (
-    <ToastContext.Provider value={{ showToast }}>
-      <Toaster
-        position="top-right"
-        containerStyle={{ zIndex: 999999999999999 }}
-      />
-      {children}
-    </ToastContext.Provider>
-  );
-}
-
-export { ToastProvider };

package/src/services/clearNumber.ts

@@ -1,6 +0,0 @@
-const clearNumber = (number: any) => {
-  if (typeof number === "number") return number;
-  return Number(number.toString().replace(/[^0-9-]/g, ""));
-};
-
-export { clearNumber };

package/src/services/format.ts

@@ -1,21 +0,0 @@
-const SYMBOL_LENGTH = 3;
-
-const formatCurrency = (
-  locale: string = "pt-BR",
-  value: number,
-  currencyType = "BRL",
-  hideSymbol = true
-) => {
-  const formatter = new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: currencyType,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  });
-  const formattedValue = formatter.format(value);
-
-  return formattedValue.slice(hideSymbol ? SYMBOL_LENGTH : 0);
-};
-
-export { formatCurrency };

package/src/services/generateIcon.tsx

@@ -1,8 +0,0 @@
-import { LucideIcon } from "lucide-react";
-
-function GenerateIcon(iconSize: number, Icon?: LucideIcon) {
-  if (!Icon) return <></>;
-  return <Icon size={iconSize} strokeWidth={2.5} />;
-}
-
-export { GenerateIcon };

package/src/services/generatePagerArray.ts

@@ -1,9 +0,0 @@
-function generatePagesArray(from: number, to: number) {
-  return [...new Array(to - from)]
-    .map((_, index) => {
-      return from + index + 1;
-    })
-    .filter((page) => page > 0);
-}
-
-export { generatePagesArray };

package/src/services/getHtmlFromRichTextValue.ts

@@ -1,55 +0,0 @@
-import { Element as SlateElement, Text } from "slate";
-import { RichTextValue } from "@arkyn/types";
-
-const serialize = (node: any): string => {
-  if (Text.isText(node)) {
-    let text = node.text;
-    if (node.bold) {
-      text = `<strong>${text}</strong>`;
-    }
-    if (node.code) {
-      text = `<code>${text}</code>`;
-    }
-    if (node.italic) {
-      text = `<em>${text}</em>`;
-    }
-    if (node.underline) {
-      text = `<u>${text}</u>`;
-    }
-    return text;
-  }
-
-  if (SlateElement.isElement(node)) {
-    const children = node.children.map((n: any) => serialize(n)).join("");
-    const alignStyle = node.align || "left";
-
-    switch (node.type) {
-      case "image":
-        return `<img src="${node.src}" class="align_${alignStyle}" />`;
-      case "paragraph":
-        return `<p class="align_${alignStyle}">${children}</p>`;
-      case "blockQuote":
-        return `<blockquote class="align_${alignStyle}">${children}</blockquote>`;
-      case "bulletedList":
-        return `<ul class="align_${alignStyle}">${children}</ul>`;
-      case "headingOne":
-        return `<h1 class="align_${alignStyle}">${children}</h1>`;
-      case "headingTwo":
-        return `<h2 class="align_${alignStyle}">${children}</h2>`;
-      case "listItem":
-        return `<li class="align_${alignStyle}">${children}</li>`;
-      case "numberedList":
-        return `<ol class="align_${alignStyle}">${children}</ol>`;
-      default:
-        return children;
-    }
-  }
-
-  return "";
-};
-
-const getHtmlFromRichTextValue = (value: RichTextValue): string => {
-  return value.map((node) => serialize(node)).join("");
-};
-
-export { getHtmlFromRichTextValue };

package/src/services/getRichTextValueFromHtml.ts

@@ -1,82 +0,0 @@
-import { RichTextValue } from "@arkyn/types";
-import parse from "html-react-parser";
-
-type ParseElement = {
-  type: string;
-  props: {
-    src?: string;
-    children: ParseElement[] | string;
-    className?: string;
-  };
-};
-
-const deserialize = (el: ParseElement): any => {
-  if (typeof el === "string") {
-    return { text: el };
-  }
-
-  const children = Array.isArray(el.props.children)
-    ? el.props.children.map((child) => deserialize(child))
-    : [{ text: el.props.children || "" }];
-
-  const align = el.props.className?.replace("align_", "") as
-    | "left"
-    | "center"
-    | "right"
-    | "justify";
-
-  switch (el.type) {
-    case "img":
-      return {
-        type: "image",
-        align,
-        src: el.props.src,
-        children: [{ text: "" }],
-      };
-    case "p":
-      return { type: "paragraph", align, children };
-    case "blockquote":
-      return { type: "blockQuote", align, children };
-    case "ul":
-      return { type: "bulletedList", align, children };
-    case "ol":
-      return { type: "numberedList", align, children };
-    case "li":
-      return { type: "listItem", align, children };
-    case "h1":
-      return { type: "headingOne", align, children };
-    case "h2":
-      return { type: "headingTwo", align, children };
-    case "strong":
-      return { text: el.props.children, bold: true };
-    case "code":
-      return { text: el.props.children, code: true };
-    case "em":
-      return { text: el.props.children, italic: true };
-    case "u":
-      return { text: el.props.children, underline: true };
-    default:
-      return { text: el.props.children || "" };
-  }
-};
-
-const getRichTextValueFromHtml = (html: string): RichTextValue => {
-  const parsed = parse(html);
-
-  if (Array.isArray(parsed)) {
-    return parsed.map((node) => {
-      if (typeof node === "string") {
-        return { text: node };
-      }
-      return deserialize(node as ParseElement);
-    });
-  }
-
-  if (typeof parsed === "string") {
-    return [{ text: parsed }];
-  }
-
-  return [deserialize(parsed as ParseElement)];
-};
-
-export { getRichTextValueFromHtml };

package/src/services/index.ts

@@ -1,15 +0,0 @@
-import { GenerateIcon } from "./generateIcon";
-import { generatePagesArray } from "./generatePagerArray";
-import { getHtmlFromRichTextValue } from "./getHtmlFromRichTextValue";
-import { getRichTextValueFromHtml } from "./getRichTextValueFromHtml";
-import { isHtml } from "./isHtml";
-import { morpheme } from "./morpheme";
-
-export {
-  GenerateIcon,
-  generatePagesArray,
-  morpheme,
-  getHtmlFromRichTextValue,
-  isHtml,
-  getRichTextValueFromHtml,
-};

package/src/services/isHtml.ts

@@ -1,6 +0,0 @@
-const isHtml = (str: string): boolean => {
-  const htmlRegex = /<\/?[a-z][\s\S]*>/i;
-  return htmlRegex.test(str);
-};
-
-export { isHtml };

package/src/services/maskValues.ts

@@ -1,17 +0,0 @@
-import { formatCurrency } from "./format";
-import { normalizeValue } from "./normalizeValue";
-
-const maskValues = (
-  locale: string,
-  inputFieldValue: string | number | undefined,
-  currency: string
-): [number, string] => {
-  if (!inputFieldValue) return [0, ""];
-
-  const value = normalizeValue(inputFieldValue);
-  const maskedValue = formatCurrency(locale, value, currency);
-
-  return [value, maskedValue];
-};
-
-export { maskValues };

package/src/services/morpheme.tsx

@@ -1,19 +0,0 @@
-import { LucideIcon } from "lucide-react";
-
-function morpheme(
-  data: LucideIcon | string | undefined,
-  iconSize: number,
-  type?: "prefix" | "sufix"
-) {
-  if (!data) return <></>;
-  if (typeof data === "string") return <p className={type}>{data}</p>;
-
-  const Data = data;
-  return (
-    <p className={type}>
-      <Data color="var(--secondary-600)" size={iconSize} strokeWidth={2.5} />
-    </p>
-  );
-}
-
-export { morpheme };

package/src/services/normalizeValue.ts

@@ -1,21 +0,0 @@
-import { MAXIMUM_FRACTION_DIGITS } from "../constants/decimals";
-import { clearNumber } from "./clearNumber";
-
-const normalizeValue = (number: string | number) => {
-  let safeNumber = number;
-
-  if (typeof number === "string") {
-    safeNumber = clearNumber(number);
-    if (safeNumber % 1 !== 0) {
-      safeNumber = safeNumber.toFixed(MAXIMUM_FRACTION_DIGITS);
-    }
-  } else {
-    safeNumber = Number.isInteger(number)
-      ? Number(number) * 10 ** MAXIMUM_FRACTION_DIGITS
-      : number.toFixed(MAXIMUM_FRACTION_DIGITS);
-  }
-
-  return clearNumber(safeNumber) / 10 ** MAXIMUM_FRACTION_DIGITS;
-};
-
-export { normalizeValue };

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/.server/**/*.ts",
-    "**/.server/**/*.tsx",
-    "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
-  ],
-  "exclude": ["node_modules", "dist"],
-  "compilerOptions": {
-    "outDir": "./dist",
-    "composite": false,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "declarationMap": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": false,
-    "isolatedModules": true,
-    "moduleResolution": "node",
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "preserveWatchOutput": true,
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "module": "ESNext",
-    "target": "ESNext"
-  }
-}