@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.41

package/src/components/RichText/functions/toggleBlock.ts

@@ -1,49 +0,0 @@
-import {
-  RichTextAlignFormatType,
-  RichTextElementFormatType,
-} from "@arkyn/types";
-import { Editor, Element as SlateElement, Transforms } from "slate";
-
-import { isBlockActive } from "../helpers/isBlockActive";
-import { LIST_TYPES } from "../template/LIST_TYPES";
-import { TEXT_ALIGN_TYPES } from "../template/TEXT_ALIGN_TYPES";
-
-function toggleBlock(
-  editor: Editor,
-  format: RichTextElementFormatType | RichTextAlignFormatType
-) {
-  const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
-  const isActive = isBlockActive(editor, format, blockType);
-
-  const isList = LIST_TYPES.includes(format);
-
-  Transforms.unwrapNodes(editor, {
-    match: (n) =>
-      !Editor.isEditor(n) &&
-      SlateElement.isElement(n) &&
-      LIST_TYPES.includes(n.type) &&
-      !TEXT_ALIGN_TYPES.includes(format),
-    split: true,
-  });
-
-  let newProperties: Partial<SlateElement>;
-
-  if (TEXT_ALIGN_TYPES.includes(format)) {
-    const formatType = format as RichTextAlignFormatType;
-    newProperties = { align: isActive ? undefined : formatType };
-  } else {
-    const formatType = format as RichTextElementFormatType;
-    newProperties = {
-      type: isActive ? "paragraph" : isList ? "listItem" : formatType,
-    };
-  }
-
-  Transforms.setNodes<SlateElement>(editor, newProperties);
-
-  if (!isActive && isList) {
-    const block = { type: format as RichTextElementFormatType, children: [] };
-    Transforms.wrapNodes(editor, block);
-  }
-}
-
-export { toggleBlock };

package/src/components/RichText/functions/toggleMark.ts

@@ -1,13 +0,0 @@
-import { RichTextMarkFormatType } from "@arkyn/types";
-import { Editor } from "slate";
-
-import { isMarkActive } from "../helpers/isMarkActive";
-
-function toggleMark(editor: Editor, format: RichTextMarkFormatType) {
-  const isActive = isMarkActive(editor, format);
-
-  if (isActive) Editor.removeMark(editor, format);
-  else Editor.addMark(editor, format, true);
-}
-
-export { toggleMark };

package/src/components/RichText/helpers/isBlockActive.ts

@@ -1,28 +0,0 @@
-import {
-  RichTextAlignFormatType,
-  RichTextElementFormatType,
-} from "@arkyn/types";
-import { Editor, Element as SlateElement } from "slate";
-
-function isBlockActive(
-  editor: Editor,
-  format: RichTextElementFormatType | RichTextAlignFormatType,
-  blockType: "type" | "align" = "type"
-) {
-  const { selection } = editor;
-  if (!selection) return false;
-
-  const [match] = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: (n) =>
-        !Editor.isEditor(n) &&
-        SlateElement.isElement(n) &&
-        n[blockType] === format,
-    })
-  );
-
-  return !!match;
-}
-
-export { isBlockActive };

package/src/components/RichText/helpers/isMarkActive.ts

@@ -1,9 +0,0 @@
-import { RichTextMarkFormatType } from "@arkyn/types";
-import { Editor } from "slate";
-
-function isMarkActive(editor: Editor, format: RichTextMarkFormatType) {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
-}
-
-export { isMarkActive };

package/src/components/RichText/index.tsx

@@ -1,211 +0,0 @@
-import { RichTextHiddenButtonKey, RichTextProps } from "@arkyn/types";
-import isHotkey from "is-hotkey";
-import {
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  Code,
-  Heading1,
-  Heading2,
-  Italic,
-  Quote,
-  Underline,
-} from "lucide-react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { createEditor, Descendant, Transforms } from "slate";
-import { withHistory } from "slate-history";
-import { Editable, Slate, withReact } from "slate-react";
-
-import { useFormController } from "../Form/FormController";
-
-import { BlockButton } from "./components/BlockButton";
-import { Element } from "./components/Element";
-import { InsertImage } from "./components/InsertImage";
-import { Leaf } from "./components/Leaf";
-import { MarkButton } from "./components/MarkButton";
-import { Toolbar } from "./components/Toolbar";
-
-import { extractText } from "./functions/extractText";
-import { toggleMark } from "./functions/toggleMark";
-
-import { HOTKEYS } from "./template/HOTKEYS";
-import { INITIAL_VALUE } from "./template/INITIAL_VALUE";
-
-import "./styles.css";
-
-function RichText(props: RichTextProps) {
-  const {
-    name,
-    hiddenButtons,
-    imageConfig,
-    defaultValue = "[]",
-    enforceCharacterLimit = false,
-    onChangeCharactersCount,
-    maxLimit = 2000,
-    onChange,
-    isError: baseIsError,
-  } = props;
-
-  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
-  const { id, inputRef, error } = useFormController();
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  function getDefaultNodes(): Descendant[] {
-    try {
-      const parsedNodes = JSON.parse(defaultValue);
-      if (!Array.isArray(parsedNodes)) return INITIAL_VALUE;
-      if (parsedNodes.length <= 0) return INITIAL_VALUE;
-
-      const isValidNodes = parsedNodes.every(
-        (node) =>
-          typeof node === "object" &&
-          node !== null &&
-          "type" in node &&
-          "children" in node
-      );
-
-      return isValidNodes ? parsedNodes : INITIAL_VALUE;
-    } catch (error) {
-      return INITIAL_VALUE;
-    }
-  }
-
-  const textFromNodes = extractText(getDefaultNodes());
-
-  const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
-  const [inputValue, setInputValue] = useState(
-    JSON.stringify(getDefaultNodes()) || "[]"
-  );
-
-  const [onFocus, setOnFocus] = useState(false);
-
-  const ref = inputRef || baseRef;
-  const isError = baseIsError || !!error;
-
-  const renderLeaf = useCallback(Leaf, []);
-  const renderElement = useCallback(Element, []);
-
-  function handleChange(value: Descendant[]) {
-    const text = extractText(value);
-
-    setCharactersCount(text.length);
-    onChangeCharactersCount && onChangeCharactersCount(text.length);
-
-    if (enforceCharacterLimit && text.length >= maxLimit) {
-      return;
-    } else {
-      setInputValue(JSON.stringify(value));
-      onChange && onChange(value);
-
-      editor.children = value;
-      Transforms.setNodes(editor, { children: value });
-    }
-  }
-
-  const focusClass = onFocus ? "focusTrue" : "focusFalse";
-  const errorClass = isError
-    ? "errorTrue"
-    : maxLimit < charactersCount
-    ? "errorTrue"
-    : "errorFalse";
-
-  const className = `arkynRichText ${errorClass} ${focusClass}`;
-
-  const restatesCharacters = maxLimit - charactersCount;
-
-  function buttonIsNotHidden(format: RichTextHiddenButtonKey) {
-    return !hiddenButtons?.includes(format);
-  }
-
-  return (
-    <Slate
-      editor={editor}
-      initialValue={getDefaultNodes()}
-      onChange={handleChange}
-      onValueChange={handleChange}
-    >
-      <div className={className}>
-        <Toolbar>
-          {buttonIsNotHidden("headingOne") && (
-            <BlockButton format="headingOne" icon={Heading1} />
-          )}
-
-          {buttonIsNotHidden("headingTwo") && (
-            <BlockButton format="headingTwo" icon={Heading2} />
-          )}
-
-          {buttonIsNotHidden("blockQuote") && (
-            <BlockButton format="blockQuote" icon={Quote} />
-          )}
-
-          {buttonIsNotHidden("bold") && (
-            <MarkButton format="bold" icon={Bold} />
-          )}
-
-          {buttonIsNotHidden("italic") && (
-            <MarkButton format="italic" icon={Italic} />
-          )}
-
-          {buttonIsNotHidden("underline") && (
-            <MarkButton format="underline" icon={Underline} />
-          )}
-
-          {buttonIsNotHidden("code") && (
-            <MarkButton format="code" icon={Code} />
-          )}
-
-          {buttonIsNotHidden("left") && (
-            <BlockButton format="left" icon={AlignLeft} />
-          )}
-
-          {buttonIsNotHidden("right") && (
-            <BlockButton format="right" icon={AlignRight} />
-          )}
-
-          {buttonIsNotHidden("center") && (
-            <BlockButton format="center" icon={AlignCenter} />
-          )}
-
-          {buttonIsNotHidden("justify") && (
-            <BlockButton format="justify" icon={AlignJustify} />
-          )}
-
-          {imageConfig && buttonIsNotHidden("image") && (
-            <InsertImage {...imageConfig} />
-          )}
-        </Toolbar>
-
-        <Editable
-          className="editorContainer"
-          renderElement={renderElement}
-          renderLeaf={renderLeaf}
-          spellCheck
-          id={id}
-          onFocus={() => setOnFocus(true)}
-          onBlur={() => setOnFocus(false)}
-          onKeyDown={(event) => {
-            for (const hotkey in HOTKEYS) {
-              if (isHotkey(hotkey, event as any)) {
-                event.preventDefault();
-                const mark = HOTKEYS[hotkey as keyof typeof HOTKEYS];
-                toggleMark(editor, mark);
-              }
-            }
-          }}
-        />
-
-        {restatesCharacters < 0 && (
-          <div className="restatesCharacters">{restatesCharacters}</div>
-        )}
-      </div>
-
-      <input type="hidden" ref={ref} name={name} value={inputValue} />
-      <input type="hidden" name={`${name}Count`} value={charactersCount} />
-    </Slate>
-  );
-}
-
-export { RichText };

package/src/components/RichText/styles.css

@@ -1,35 +0,0 @@
-.arkynRichText {
-  display: flex;
-  flex-direction: column;
-
-  background-color: rgba(var(--input-background), 1);
-  border: 1px solid var(--border);
-  border-radius: var(--rounded-inputs);
-  outline: 1px solid transparent;
-}
-
-.arkynRichText.errorTrue {
-  outline-color: rgba(var(--spotlight-danger), 1);
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynRichText.focusTrue {
-  outline-color: rgba(var(--spotlight-primary), 1);
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynRichText .editorContainer {
-  padding: 16px;
-  outline: none;
-  min-height: 300px;
-}
-
-.arkynRichText .restatesCharacters {
-  display: block;
-  margin-left: auto;
-  padding: 8px;
-
-  font-size: 16px;
-  font-weight: 600;
-  color: rgba(var(--spotlight-danger), 1);
-}

package/src/components/RichText/template/HOTKEYS.ts

@@ -1,14 +0,0 @@
-import { RichTextMarkFormatType } from "@arkyn/types";
-
-type HotKeys = {
-  [key: string]: RichTextMarkFormatType;
-};
-
-const HOTKEYS: HotKeys = {
-  "mod+b": "bold",
-  "mod+i": "italic",
-  "mod+u": "underline",
-  "mod+`": "code",
-};
-
-export { HOTKEYS };

package/src/components/RichText/template/INITIAL_VALUE.ts

@@ -1,10 +0,0 @@
-import { Descendant } from "slate";
-
-const INITIAL_VALUE: Descendant[] = [
-  {
-    type: "paragraph",
-    children: [{ text: "" }],
-  },
-];
-
-export { INITIAL_VALUE };

package/src/components/RichText/template/LIST_TYPES.ts

@@ -1,3 +0,0 @@
-const LIST_TYPES = ["listItem", "numberedList"];
-
-export { LIST_TYPES };

package/src/components/RichText/template/TEXT_ALIGN_TYPES.ts

@@ -1,3 +0,0 @@
-const TEXT_ALIGN_TYPES = ["left", "center", "right", "justify"];
-
-export { TEXT_ALIGN_TYPES };

package/src/components/Select/getConfig.tsx

@@ -1,51 +0,0 @@
-import { Loader2 } from "lucide-react";
-
-import { morpheme } from "../../services";
-import { SelectProps } from ".";
-
-function getConfig(props: SelectProps, isFocused: boolean) {
-  const {
-    isLoading,
-    isError,
-    size = "md",
-    className: baseClassName = "",
-    variant = "solid",
-    prefix: basePrefix,
-    leftIcon: LeftIcon,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlur,
-    title,
-    style,
-    closeOnSelect = true,
-    ...rest
-  } = props;
-
-  const hasPrefix = !!basePrefix ? "hasPrefix" : "";
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
-
-  const className = `arkyn_select ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-  const iconSizes = { md: 20, lg: 20 };
-  const iconSize = iconSizes[size];
-
-  return {
-    isLoading,
-    className,
-    prefix: morpheme(basePrefix, iconSize, "prefix"),
-    LeftIcon,
-    disabled: disabled || isLoading || readOnly,
-    onFocus,
-    onBlur,
-    title,
-    closeOnSelect,
-    style,
-    iconSize: iconSize,
-    Spinner: <Loader2 className="spinner" size={iconSize} strokeWidth={2.5} />,
-    ...rest,
-  };
-}
-
-export { getConfig };

package/src/components/Select/index.tsx

@@ -1,220 +0,0 @@
-import type { FocusEvent, InputHTMLAttributes } from "react";
-
-import { Check, ChevronDown, LucideIcon, Search } from "lucide-react";
-import { useRef, useState } from "react";
-
-import { getConfig } from "./getConfig";
-
-import { useFormController } from "../../components/Form/FormController";
-import { Input } from "../Input";
-import "./styles.css";
-
-export type SelectProps = {
-  isLoading?: boolean;
-  isError?: boolean;
-  isSearchable?: boolean;
-  onSearch?: (value: string) => void;
-  closeOnSelect?: boolean;
-
-  size?: "md" | "lg";
-  variant?: "solid" | "outline" | "underline";
-
-  prefix?: string | LucideIcon;
-  leftIcon?: LucideIcon;
-
-  name: string;
-
-  value?: string;
-  defaultValue?: string;
-  searchPlaceholder?: string;
-
-  optionMaxHeight?: number;
-
-  options: { label: string; value: string }[];
-  onSelect?: (value: { label: string; value: string }) => void;
-} & Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  | "size"
-  | "prefix"
-  | "type"
-  | "name"
-  | "defaultValue"
-  | "value"
-  | "onChange"
-  | "onSelect"
->;
-
-function Select(props: SelectProps) {
-  const [search, setSearch] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  const { inputRef, id, error } = useFormController();
-
-  const baseRef = useRef<HTMLInputElement>(null);
-
-  const ref = inputRef || baseRef;
-  const isError = props.isError || !!error;
-
-  const {
-    disabled,
-    title,
-    style,
-    className,
-    prefix,
-    iconSize,
-    isLoading,
-    LeftIcon,
-    value: baseValue = null,
-    defaultValue = "",
-    onFocus,
-    onBlur,
-    Spinner,
-    name,
-    placeholder,
-    searchPlaceholder,
-    onSelect,
-    options,
-    optionMaxHeight,
-    closeOnSelect,
-    isSearchable,
-    onSearch,
-    ...rest
-  } = getConfig({ ...props, id, isError }, isFocused);
-
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-
-  function handleSectionClick() {
-    if (disabled || !ref?.current || isFocused) return;
-    setIsFocused(true);
-    ref.current.focus();
-  }
-
-  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
-    if (onSearch) {
-      setSearch("");
-      onSearch(e.target.value);
-    }
-
-    if (!onSearch) setSearch(e.target.value);
-  }
-
-  function handleFocus(e: FocusEvent<HTMLInputElement>) {
-    if (isFocused) return;
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  }
-
-  function handleBlur() {
-    setIsFocused(false);
-    if (onBlur && ref.current) ref.current.blur();
-  }
-
-  function handleChangeValue(option: { label: string; value: string }) {
-    const { label, value } = option;
-
-    if (selectedValue !== value) setSelectedValue(value);
-    else setSelectedValue("");
-
-    if (onSelect) onSelect({ label, value });
-    if (closeOnSelect) handleBlur();
-  }
-
-  const currentValue =
-    typeof baseValue === "string" ? baseValue : selectedValue;
-
-  const currentLabel =
-    options.find((option) => option.value === currentValue)?.label || "";
-
-  const placeholderDark = () => {
-    if (!isFocused && !!currentLabel) return true;
-    if (!isFocused && !currentLabel) return false;
-    if (isFocused && !!currentLabel) return true;
-    if (isFocused && !currentLabel) return false;
-  };
-
-  return (
-    <>
-      <section
-        title={title}
-        style={style}
-        onClick={handleSectionClick}
-        className={`${className} placeholder_dark_${placeholderDark()}`}
-      >
-        {prefix}
-        {LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}
-
-        <input
-          disabled={disabled}
-          readOnly
-          placeholder={currentLabel || placeholder}
-          onFocus={handleFocus}
-          {...rest}
-        />
-
-        <input
-          type="hidden"
-          ref={ref}
-          name={name}
-          value={currentValue || ""}
-          readOnly
-        />
-
-        {isFocused && (
-          <div
-            className="arkyn_select_content"
-            style={{ overflow: "auto", maxHeight: optionMaxHeight }}
-          >
-            {isSearchable && (
-              <Input
-                type="search"
-                name="search-select"
-                variant="underline"
-                leftIcon={Search}
-                placeholder={searchPlaceholder}
-                onChange={handleSearch}
-              />
-            )}
-
-            {options
-              .filter((option) => {
-                if (props.onSearch) return true;
-                if (!props.isSearchable) return true;
-                if (option.label.toLowerCase().includes(search.toLowerCase()))
-                  return true;
-                return false;
-              })
-              .map(({ label, value }) => (
-                <div
-                  key={value}
-                  onClick={() => handleChangeValue({ label, value })}
-                  className={
-                    currentValue === value
-                      ? "arkyn_select_option active"
-                      : "arkyn_select_option"
-                  }
-                >
-                  {label} <Check />
-                </div>
-              ))}
-
-            {options.length <= 0 && <p>Sem opções disponíveis</p>}
-          </div>
-        )}
-
-        {!isLoading && (
-          <ChevronDown
-            className="arkyn_select_arrow"
-            size={iconSize}
-            strokeWidth={2.5}
-          />
-        )}
-        {isLoading && Spinner}
-      </section>
-
-      {isFocused && (
-        <aside className="arkyn_select_overlay" onClick={handleBlur} />
-      )}
-    </>
-  );
-}
-
-export { Select };