@arkyn/components 3.0.1-beta.7 → 3.0.1-beta.70

package/src/components/RichText/components/InsertImage/index.tsx

@@ -1,121 +0,0 @@
-import { RichTextInsertImageProps } from "@arkyn/types";
-import { Image } from "lucide-react";
-import { MouseEvent, useState } from "react";
-import { useSlate } from "slate-react";
-
-import { Button } from "../../../Button";
-import { FormController, FormLabel } from "../../../Form";
-import { ImageUpload } from "../../../ImageUpload";
-import { Input } from "../../../Input";
-import { ModalContainer, ModalFooter, ModalHeader } from "../../../Modal";
-import { TabButton, TabContainer } from "../../../Tabs";
-
-import "./styles.css";
-
-function InsertImage(props: RichTextInsertImageProps) {
-  const {
-    action,
-    tabLabels = ["Adicionar URL", "Upload de arquivo"],
-    modalCancelButton = "Cancelar",
-    modalConfirmButton = "Confirmar",
-    modalInputImageLabel = "Imagem:",
-    modalInputUrlLabel = "URL da imagem:",
-    modalTitle = "Inserir imagem",
-  } = props;
-
-  const editor = useSlate();
-
-  const [modalIsVisibled, setModalIsVisibled] = useState(false);
-  const [imageURL, setImageURL] = useState("");
-  const [uploadType, setUploadType] = useState("url");
-
-  function handleMouseDown(event: MouseEvent<HTMLButtonElement>) {
-    event.preventDefault();
-    if (!imageURL || imageURL === "") return;
-
-    editor.insertNodes([
-      { type: "paragraph", children: [{ text: "" }] },
-      { type: "image", src: imageURL, children: [{ text: "" }] },
-      { type: "paragraph", children: [{ text: "" }] },
-    ]);
-
-    setModalIsVisibled(false);
-  }
-
-  return (
-    <>
-      <button
-        type="button"
-        className="arkynRichTextInsertImage"
-        onMouseDown={() => setModalIsVisibled(true)}
-      >
-        <Image />
-      </button>
-
-      <ModalContainer
-        isVisibled={modalIsVisibled}
-        makeInvisible={() => setModalIsVisibled(false)}
-      >
-        <ModalHeader>{modalTitle}</ModalHeader>
-
-        <div className="arkynRichTextInsertImageModalContent">
-          <TabContainer defaultActive={uploadType} onClick={setUploadType}>
-            <TabButton value="url">{tabLabels[0]}</TabButton>
-            <TabButton value="file">{tabLabels[1]}</TabButton>
-          </TabContainer>
-
-          {uploadType === "url" && (
-            <>
-              <FormController>
-                <FormLabel>{modalInputUrlLabel}</FormLabel>
-                <Input
-                  type="text"
-                  name="richTextimageURL"
-                  defaultValue={imageURL}
-                  onChange={(e) => setImageURL(e.target.value)}
-                />
-              </FormController>
-
-              {imageURL && (
-                <img
-                  className="arkynRichTextInsertImageModalPreviewImage"
-                  src={imageURL}
-                  alt="preview"
-                />
-              )}
-            </>
-          )}
-
-          {uploadType === "file" && (
-            <FormController>
-              <FormLabel>{modalInputImageLabel}</FormLabel>
-              <ImageUpload
-                name="richTextimageURL"
-                action={action}
-                defaultValue={imageURL}
-                onUpload={(url) => setImageURL(url || "")}
-              />
-            </FormController>
-          )}
-        </div>
-
-        <ModalFooter>
-          <Button
-            type="button"
-            scheme="danger"
-            variant="outline"
-            onClick={() => setModalIsVisibled(false)}
-          >
-            {modalCancelButton}
-          </Button>
-
-          <Button type="button" onClick={handleMouseDown}>
-            {modalConfirmButton}
-          </Button>
-        </ModalFooter>
-      </ModalContainer>
-    </>
-  );
-}
-
-export { InsertImage };

package/src/components/RichText/components/InsertImage/styles.css

@@ -1,47 +0,0 @@
-.arkynRichTextInsertImage {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 36px;
-  width: 36px;
-
-  background-color: var(--card-foreground-secondary);
-  border: none;
-  border-radius: 4px;
-}
-
-.arkynRichTextInsertImage svg {
-  height: 20px;
-  width: 20px;
-
-  color: var(--text-heading);
-}
-
-.arkynRichTextInsertImage:hover {
-  cursor: pointer;
-  filter: brightness(0.98);
-}
-
-.arkynRichTextInsertImageModalContent {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px;
-
-  width: 500px;
-}
-
-.arkynRichTextInsertImageModalPreviewImage {
-  width: 100%;
-  border-radius: var(--rounded-cards);
-}
-
-.arkynRichTextInsertImageModalContent .arkynImageUpload {
-  /* height: 174px; */
-}
-
-html.dark .arkynRichTextInsertImage:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}

package/src/components/RichText/components/Leaf/index.tsx

@@ -1,12 +0,0 @@
-import { RenderLeafProps } from "slate-react";
-
-function Leaf({ attributes, children, leaf }: RenderLeafProps) {
-  if (leaf.bold) children = <strong>{children}</strong>;
-  if (leaf.code) children = <code>{children}</code>;
-  if (leaf.italic) children = <em>{children}</em>;
-  if (leaf.underline) children = <u>{children}</u>;
-
-  return <span {...attributes}>{children}</span>;
-}
-
-export { Leaf };

package/src/components/RichText/components/MarkButton/index.tsx

@@ -1,38 +0,0 @@
-import { RichTextMarkFormatType } from "@arkyn/types";
-import { LucideIcon } from "lucide-react";
-import { MouseEvent } from "react";
-import { useSlate } from "slate-react";
-
-import { toggleMark } from "../../functions/toggleMark";
-import { isMarkActive } from "../../helpers/isMarkActive";
-
-import "./styles.css";
-
-type MarkButtonProps = {
-  format: RichTextMarkFormatType;
-  icon: LucideIcon;
-};
-
-function MarkButton({ format, icon: Icon }: MarkButtonProps) {
-  const editor = useSlate();
-
-  const isActive = isMarkActive(editor, format);
-  const activeClass = isActive ? "activeTrue" : "activeFalse";
-
-  function handleMouseDown(event: MouseEvent<HTMLButtonElement>) {
-    event.preventDefault();
-    toggleMark(editor, format);
-  }
-
-  return (
-    <button
-      type="button"
-      className={"arkynRichTextMarkButton " + activeClass}
-      onMouseDown={handleMouseDown}
-    >
-      <Icon />
-    </button>
-  );
-}
-
-export { MarkButton };

package/src/components/RichText/components/MarkButton/styles.css

@@ -1,41 +0,0 @@
-.arkynRichTextMarkButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: 36px;
-  width: 36px;
-
-  background-color: var(--card-foreground-secondary);
-  border: none;
-  border-radius: 4px;
-}
-
-.arkynRichTextMarkButton svg {
-  height: 20px;
-  width: 20px;
-
-  color: var(--text-heading);
-}
-
-.arkynRichTextMarkButton:hover {
-  cursor: pointer;
-  filter: brightness(0.97);
-}
-
-html.dark .arkynRichTextMarkButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-.arkynRichTextMarkButton.activeTrue {
-  filter: brightness(0.97);
-}
-
-html.dark .arkynRichTextMarkButton.activeTrue {
-  filter: brightness(0.9);
-}
-
-.arkynRichTextMarkButton.activeTrue svg {
-  color: rgba(var(--spotlight-primary), 1);
-}

package/src/components/RichText/components/Toolbar/index.tsx

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-import "./styles.css";
-
-type ToolbarProps = {
-  children: ReactNode;
-};
-
-function Toolbar({ children }: ToolbarProps) {
-  return <div className="arkynRichTextToolbar">{children}</div>;
-}
-
-export { Toolbar };

package/src/components/RichText/components/Toolbar/styles.css

@@ -1,14 +0,0 @@
-.arkynRichTextToolbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  border-radius: var(--rounded-inputs) var(--rounded-inputs) 0 0;
-
-  padding: 12px 16px;
-  column-gap: 24px;
-  row-gap: 12px;
-
-  background-color: var(--card-foreground-secondary);
-  border-bottom: 1px solid var(--border);
-}

package/src/components/RichText/defineType.d.ts

@@ -1,13 +0,0 @@
-import { BaseEditor } from "slate";
-import { HistoryEditor } from "slate-history";
-import { ReactEditor } from "slate-react";
-
-import { RichTextCustomElement, RichTextCustomText } from "@arkyn/types";
-
-declare module "slate" {
-  interface CustomTypes {
-    Editor: BaseEditor & ReactEditor & HistoryEditor;
-    Element: RichTextCustomElement;
-    Text: RichTextCustomText;
-  }
-}

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

@@ -1,7 +0,0 @@
-import { Descendant, Node } from "slate";
-
-function extractText(nodes: Descendant[]) {
-  return nodes.map((n) => Node.string(n)).join("");
-}
-
-export { extractText };

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