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

package/src/components/Radio/RadioBox/styles.css

@@ -1,95 +0,0 @@
-.arkynRadioBox {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  color: var(--text-body);
-  font-size: 14px;
-  line-height: 19.07px;
-}
-
-.arkynRadioBox > button {
-  position: relative;
-  background-color: rgba(var(--input-background), 1);
-
-  border: 2px solid var(--border);
-  border-radius: 99999px;
-}
-
-.arkynRadioBox > button:not(:disabled):hover {
-  cursor: pointer;
-}
-
-.arkynRadioBox.checkedTrue > button {
-  border-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynRadioBox.errorTrue > button {
-  border-color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynRadioBox.checkedTrue > button::before {
-  content: "  ";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 99999px;
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-
-.arkynRadioBox.sm > button {
-  min-height: 20px;
-  min-width: 20px;
-
-  max-height: 20px;
-  max-width: 20px;
-}
-
-.arkynRadioBox.md > button {
-  min-height: 24px;
-  min-width: 24px;
-
-  max-height: 24px;
-  max-width: 24px;
-}
-
-.arkynRadioBox.lg > button {
-  min-height: 24px;
-  min-width: 24px;
-
-  max-height: 24px;
-  max-width: 24px;
-}
-
-.arkynRadioBox.checkedTrue.sm > button::before {
-  min-height: 10px;
-  min-width: 10px;
-
-  max-height: 10px;
-  max-width: 10px;
-}
-
-.arkynRadioBox.checkedTrue.md > button::before {
-  min-height: 12px;
-  min-width: 12px;
-
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynRadioBox.checkedTrue.lg > button::before {
-  min-height: 12px;
-  min-width: 12px;
-
-  max-height: 12px;
-  max-width: 12px;
-}
-
-.arkynRadioBox.disabledTrue {
-  opacity: 0.5;
-}
-
-.arkynRadioBox.disabledTrue > button {
-  cursor: not-allowed;
-}

package/src/components/Radio/RadioGroup/index.tsx

@@ -1,54 +0,0 @@
-import { RadioGroupContextType, RadioGroupProps } from "@arkyn/types";
-import { createContext, useContext, useState } from "react";
-
-import { useFormController } from "../../Form/FormController";
-
-import "./styles.css";
-
-const RadioContext = createContext({} as RadioGroupContextType);
-
-function useRadioGroup() {
-  return useContext(RadioContext);
-}
-
-function RadioGroup(props: RadioGroupProps) {
-  const {
-    defaultValue,
-    name,
-    value: forceValue,
-    onChange,
-    size = "md",
-    className: baseClassName = "",
-    ...rest
-  } = props;
-
-  const [value, setValue] = useState(defaultValue || "");
-  const { inputRef, id } = useFormController();
-
-  function handleChange(value: string) {
-    setValue(value);
-    onChange && onChange(value);
-  }
-
-  const className = `arkynRadioGroup ${size} ${baseClassName}`;
-
-  return (
-    <RadioContext.Provider
-      value={{ onChange: handleChange, value: forceValue || value, size }}
-    >
-      <input
-        style={{ display: "none" }}
-        type="text"
-        id={id}
-        readOnly
-        name={name}
-        ref={inputRef}
-        value={forceValue || value}
-      />
-
-      <div className={className.trim()} {...rest} />
-    </RadioContext.Provider>
-  );
-}
-
-export { RadioGroup, useRadioGroup };

package/src/components/Radio/RadioGroup/styles.css

@@ -1,5 +0,0 @@
-.arkynRadioGroup {
-  display: flex;
-  align-items: center;
-  gap: 32px;
-}

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