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

package/src/components/Radio/index.ts

@@ -1,4 +0,0 @@
-import { RadioBox } from "./RadioBox";
-import { RadioGroup } from "./RadioGroup";
-
-export { RadioBox, RadioGroup };

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

@@ -1,44 +0,0 @@
-import {
-  RichTextAlignFormatType,
-  RichTextElementFormatType,
-} from "@arkyn/types";
-import { LucideIcon } from "lucide-react";
-import { MouseEvent } from "react";
-import { useSlate } from "slate-react";
-
-import { toggleBlock } from "../../functions/toggleBlock";
-import { isBlockActive } from "../../helpers/isBlockActive";
-import { TEXT_ALIGN_TYPES } from "../../template/TEXT_ALIGN_TYPES";
-
-import "./styles.css";
-
-type BlockButtonProps = {
-  format: RichTextElementFormatType | RichTextAlignFormatType;
-  icon: LucideIcon;
-};
-
-function BlockButton({ format, icon: Icon }: BlockButtonProps) {
-  const editor = useSlate();
-
-  const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
-  const isActive = isBlockActive(editor, format, blockType);
-
-  const activeClass = isActive ? "activeTrue" : "activeFalse";
-
-  function handleMouseDown(event: MouseEvent<HTMLButtonElement>) {
-    event.preventDefault();
-    toggleBlock(editor, format);
-  }
-
-  return (
-    <button
-      type="button"
-      className={"arkynRichTextBlockButton " + activeClass}
-      onMouseDown={handleMouseDown}
-    >
-      <Icon />
-    </button>
-  );
-}
-
-export { BlockButton };

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

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

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

@@ -1,70 +0,0 @@
-import { RenderElementProps } from "slate-react";
-import "./styles.css";
-
-function Element({ attributes, children, element }: RenderElementProps) {
-  const style = { textAlign: element.align };
-
-  switch (element.type) {
-    case "blockQuote":
-      return (
-        <blockquote
-          className="arkynElementBlockquote"
-          style={style}
-          {...attributes}
-        >
-          {children}
-        </blockquote>
-      );
-    case "bulletedList":
-      return (
-        <ul className="arkynElementBulletList" style={style} {...attributes}>
-          {children}
-        </ul>
-      );
-    case "headingOne":
-      return (
-        <h1 className="arkynElementHeadingOne" style={style} {...attributes}>
-          {children}
-        </h1>
-      );
-    case "headingTwo":
-      return (
-        <h2 className="arkynElementHeadingTwo" style={style} {...attributes}>
-          {children}
-        </h2>
-      );
-    case "listItem":
-      return (
-        <li className="arkynElementListItem" style={style} {...attributes}>
-          {children}
-        </li>
-      );
-    case "numberedList":
-      return (
-        <ol className="arkynElementNumberedList" style={style} {...attributes}>
-          {children}
-        </ol>
-      );
-    case "image":
-      return (
-        <div style={style} {...attributes}>
-          <img
-            className="arkynElementImage"
-            alt="arkynElementImage"
-            src={element?.src || ""}
-          />
-
-          {children}
-        </div>
-      );
-
-    default:
-      return (
-        <p className="arkynElementParagraph" style={style} {...attributes}>
-          {children}
-        </p>
-      );
-  }
-}
-
-export { Element };

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

@@ -1,27 +0,0 @@
-.arkynElementBlockquote,
-.arkynElementBulletList,
-.arkynElementListItem,
-.arkynElementNumberedList,
-.arkynElementParagraph {
-  color: var(--text-body);
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.arkynElementHeadingOne,
-.arkynElementHeadingTwo {
-  color: var(--text-heading);
-  font-weight: 600;
-}
-
-.arkynElementHeadingOne {
-  font-size: 18px;
-}
-
-.arkynElementHeadingTwo {
-  font-size: 16px;
-}
-
-.arkynElementImage {
-  max-width: 100%;
-}

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