@julseb-lib/react 0.0.61 → 0.0.64

package/dist/lib/components/MarkdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,196 @@
+/*=============================================== MarkdownEditor component ===============================================*/
+
+import { forwardRef, useState, useRef, useCallback } from "react"
+import { Flexbox, markdownEditorOptions } from "../../"
+import { appendStyles } from "../../lib-utils"
+import { EditorButtons } from "./MdEditorButtons/EditorButtons"
+import { EditorButtonTitles } from "./MdEditorButtons/EditorButtonTitles"
+import { MarkdownButtons } from "./MdEditorButtons/MarkdownButtons"
+import { MdEditorInput } from "./MdEditorInput"
+import type { LibMdEditorEditor } from "../../types"
+import { InputContainer } from "../InputComponents"
+import { MdEditorContainer, ButtonsContainer } from "./styles"
+import type { ILibMarkdownEditor } from "./types"
+
+/**
+ * @description Returns a MarkdownEditor component
+ * @link https://documentation-components-react.vercel.app/components/markdown-editor
+ * @extends HTMLTextAreaElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLTextAreaElement>
+ * @prop value: string
+ * @prop setValue: Dispatch<SetStateAction<string>>
+ * @prop defaultEditor?: "editorCode" | "editorLive" | "editorPreview"
+ * @prop textButtonTitles?: string
+ * @prop showButtons?: LibMarkdownEditorOptions
+ * @prop icons?: { bold?: string | JSX.Element; italic?: string | JSX.Element; strikethrough?: string | JSX.Element; ul?: string | JSX.Element; ol?: string | JSX.Element; link?: string | JSX.Element; quote?: string | JSX.Element; hr?: string | JSX.Element; code?: string | JSX.Element; codeBlock?: string | JSX.Element; comment?: string | JSX.Element; image?: string | JSX.Element; editorCode?: string | JSX.Element; editorLive?: string | JSX.Element; editorPreview?: string | JSX.Element }
+ * @prop iconsSizes?: { bold?: number; italic?: number; strikethrough?: number; ul?: number; ol?: number; link?: number; quote?: number; hr?: number; code?: number; codeBlock?: number; comment?: number; image?: number; editorCode?: number; editorLive?: number; editorPreview?: number }
+ * @prop id?: string
+ * @prop label?: string
+ * @prop labelComment?: string
+ * @prop helper?: string
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
+ * @prop iconBaseUrl?: string
+ * @prop inputBackground?: "light" | "dark"
+ * @prop containerStyle?: CSSProperties
+ */
+export const MarkdownEditor = forwardRef<
+    HTMLTextAreaElement,
+    ILibMarkdownEditor
+>(
+    (
+        {
+            "data-testid": testid,
+            value,
+            setValue,
+            id,
+            inputBackground,
+            showButtons = markdownEditorOptions,
+            icons,
+            iconsSizes,
+            iconBaseUrl,
+            defaultEditor = "editorLive",
+            className,
+            label,
+            labelComment,
+            helper,
+            helperBottom,
+            validation,
+            counter,
+            maxLength,
+            textButtonTitles = "Titles",
+            containerStyle,
+            ...rest
+        },
+        ref
+    ) => {
+        const [editor, setEditor] = useState<LibMdEditorEditor>(defaultEditor)
+        const [height, setHeight] = useState(250)
+
+        const inputRef = useRef<HTMLTextAreaElement>(null)
+
+        const addCode = useCallback(
+            (code: string) => {
+                const newValue = `${value}${code}`
+                setValue(newValue)
+                inputRef?.current?.focus()
+            },
+            [value, setValue, inputRef]
+        )
+
+        const hasContainer: boolean = !!(
+            label ||
+            labelComment ||
+            helper ||
+            helperBottom ||
+            validation ||
+            counter
+        )
+
+        appendStyles(`
+            :root {
+                --markdown-editor-grid: ${
+                    editor === "editorLive" ? "1fr 2px 1fr" : 1
+                };
+                --markdown-input-height: ${height}px;
+            }
+        `)
+
+        return (
+            <InputContainer
+                data-testid={testid}
+                className={className}
+                label={label}
+                labelComment={labelComment}
+                helper={helper}
+                helperBottom={helperBottom}
+                validation={validation}
+                counter={counter}
+                maxLength={maxLength}
+                id={id}
+                value={value}
+                style={containerStyle}
+                hasListOpen={undefined}
+                iconBaseUrl={undefined}
+            >
+                <MdEditorContainer
+                    data-testid={
+                        testid && hasContainer
+                            ? `${testid}.EditorContainer`
+                            : testid
+                    }
+                    className={
+                        className && hasContainer
+                            ? "EditorContainer"
+                            : className
+                    }
+                    $backgroundColor={inputBackground}
+                    $validationStatus={validation?.status}
+                >
+                    <ButtonsContainer
+                        data-testid={
+                            testid &&
+                            `${testid}.EditorContainer.ButtonsContainer`
+                        }
+                        className={className && "ButtonsContainer"}
+                    >
+                        <Flexbox
+                            data-testid={
+                                testid &&
+                                `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer`
+                            }
+                            className={className && "ActionButtonsContainer"}
+                            gap="xs"
+                            alignItems="center"
+                        >
+                            <EditorButtonTitles
+                                data-testid={testid}
+                                showButtons={showButtons}
+                                className={className}
+                                textButtonTitles={textButtonTitles}
+                                inputRef={inputRef}
+                                addCode={addCode}
+                            />
+
+                            <MarkdownButtons
+                                data-testid={testid}
+                                className={className}
+                                showButtons={showButtons}
+                                icons={icons}
+                                iconsSizes={iconsSizes}
+                                iconsBaseUrl={iconBaseUrl}
+                                addCode={addCode}
+                            />
+                        </Flexbox>
+
+                        <EditorButtons
+                            data-testid={testid}
+                            className={className}
+                            showButtons={showButtons}
+                            editor={editor}
+                            setEditor={setEditor}
+                            icons={icons}
+                            iconsSizes={iconsSizes}
+                            iconsBaseUrl={iconBaseUrl}
+                        />
+                    </ButtonsContainer>
+
+                    <MdEditorInput
+                        data-testid={testid}
+                        ref={ref}
+                        className={className}
+                        editor={editor}
+                        setHeight={setHeight}
+                        inputRef={inputRef}
+                        setValue={setValue}
+                        id={id}
+                        value={value}
+                        maxLength={maxLength}
+                        {...rest}
+                    />
+                </MdEditorContainer>
+            </InputContainer>
+        )
+    }
+)

package/dist/lib/components/MarkdownEditor/MdEditorButtons/EditorButtonTitles.tsx

@@ -0,0 +1,77 @@
+/*=============================================== EditorButtonTitles component ===============================================*/
+
+import { useState } from "react"
+import { Button, DropdownContainer } from "../../../"
+import { mdTitlesButtons } from "../markdown-buttons"
+import { TitlesDropdown, TitleDropdownItem } from "../styles"
+import type { ILibMarkdownEditorTitles } from "../subtypes"
+
+export const EditorButtonTitles = ({
+    "data-testid": testid,
+    showButtons,
+    className,
+    textButtonTitles,
+    inputRef,
+    addCode,
+}: ILibMarkdownEditorTitles) => {
+    const [isTextOpen, setIsTextOpen] = useState(false)
+
+    if (showButtons?.titles === false) return null
+
+    return (
+        <DropdownContainer
+            data-testid={
+                testid &&
+                `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer.DropdownContainer`
+            }
+            className={className && "DropdownContainer"}
+            isOpen={isTextOpen}
+        >
+            <Button
+                data-testid={
+                    testid &&
+                    `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer.DropdownContainer.ButtonDropdown`
+                }
+                className={className && "ButtonDropdown"}
+                variant="transparent"
+                noPadding
+                onClick={() => setIsTextOpen(!isTextOpen)}
+                size="small"
+                type="button"
+            >
+                {textButtonTitles}
+            </Button>
+
+            <TitlesDropdown
+                isOpen={isTextOpen}
+                setIsOpen={setIsTextOpen}
+                positionFromButton={20}
+                shadow={null}
+                data-testid={
+                    testid &&
+                    `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer.DropdownContainer.Dropdown`
+                }
+                className={className && "Dropdown"}
+            >
+                {mdTitlesButtons.map(tag => (
+                    <TitleDropdownItem
+                        data-testid={
+                            testid &&
+                            `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer.DropdownContainer.Dropdown.Item`
+                        }
+                        className={className && "DropdownItem"}
+                        key={tag.name}
+                        onClick={() => {
+                            addCode(tag!.code)
+                            setIsTextOpen(false)
+                            inputRef?.current?.focus()
+                        }}
+                        $tag={tag.name as any}
+                    >
+                        {tag.displayName || tag.name}
+                    </TitleDropdownItem>
+                ))}
+            </TitlesDropdown>
+        </DropdownContainer>
+    )
+}

package/dist/lib/components/MarkdownEditor/MdEditorButtons/EditorButtons.tsx

@@ -0,0 +1,75 @@
+/*=============================================== EditorButtons component ===============================================*/
+
+import classNames from "classnames"
+import { uuid, toSentenceCase } from "@julseb-lib/utils"
+import { Flexbox } from "../../../"
+import type { LibMdEditorEditor } from "../../../types"
+import { mdEditorButtons } from "../markdown-buttons"
+import { IconButton } from "../styles"
+import type { ILibMdEditorButtons } from "../subtypes"
+
+export const EditorButtons = ({
+    "data-testid": testid,
+    className,
+    showButtons,
+    icons,
+    iconsSizes,
+    iconsBaseUrl,
+    editor,
+    setEditor,
+}: ILibMdEditorButtons) => {
+    return (
+        <Flexbox
+            data-testid={
+                testid &&
+                `${testid}.EditorContainer.ButtonsContainer.EditorButtonsContainer`
+            }
+            className={className && "EditorButtonsContainer"}
+            gap="xs"
+            alignItems="center"
+        >
+            {mdEditorButtons.map(button => {
+                if (
+                    showButtons &&
+                    showButtons[button.name as keyof typeof showButtons] ===
+                        false
+                )
+                    return null
+
+                const icon =
+                    icons && icons[button.name as keyof typeof icons]
+                        ? icons[button.name as keyof typeof icons]
+                        : button.defaultIcon
+                const iconSize =
+                    iconsSizes &&
+                    iconsSizes[button.name as keyof typeof iconsSizes]
+                        ? iconsSizes[button.name as keyof typeof iconsSizes]
+                        : 24
+
+                return (
+                    <IconButton
+                        key={uuid()}
+                        data-testid={
+                            testid &&
+                            `${testid}.EditorContainer.ButtonsContainer.EditorButtonsContainer.EditorButton`
+                        }
+                        className={classNames(
+                            { EditorButton: className },
+                            { Active: editor === button.name }
+                        )}
+                        icon={icon}
+                        iconSize={iconSize}
+                        iconBaseUrl={iconsBaseUrl}
+                        onClick={() => {
+                            setEditor(button.name as LibMdEditorEditor)
+                        }}
+                        tooltip={
+                            button.displayName || toSentenceCase(button.name)
+                        }
+                        showTooltip
+                    />
+                )
+            })}
+        </Flexbox>
+    )
+}

package/dist/lib/components/MarkdownEditor/MdEditorButtons/MarkdownButtons.tsx

@@ -0,0 +1,54 @@
+/*=============================================== MarkdownButtons component ===============================================*/
+
+import { uuid, toSentenceCase } from "@julseb-lib/utils"
+import { roundIconSize } from "../../../lib-utils"
+import { mdButtons } from "../markdown-buttons"
+import { IconButton } from "../styles"
+import type { ILibMarkdownEditorMdButtons } from "../subtypes"
+
+const DEFAULT_ICON_SIZE = roundIconSize(24)
+
+export function MarkdownButtons({
+    "data-testid": testid,
+    className,
+    showButtons,
+    icons,
+    iconsSizes,
+    iconsBaseUrl,
+    addCode,
+}: ILibMarkdownEditorMdButtons) {
+    return mdButtons.map(button => {
+        if (
+            showButtons &&
+            showButtons[button.name as keyof typeof showButtons] === false
+        )
+            return null
+
+        const icon =
+            icons && icons[button.name as keyof typeof icons]
+                ? icons[button.name as keyof typeof icons]
+                : button.defaultIcon
+
+        const iconSize =
+            iconsSizes && iconsSizes[button.name as keyof typeof iconsSizes]
+                ? iconsSizes[button.name as keyof typeof iconsSizes]
+                : DEFAULT_ICON_SIZE
+
+        return (
+            <IconButton
+                key={uuid()}
+                data-testid={
+                    testid &&
+                    `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer.ActionButton`
+                }
+                className={className && "ActionButton"}
+                icon={icon}
+                iconSize={iconSize}
+                onClick={() => addCode(button.code)}
+                tooltip={button.displayName || toSentenceCase(button.name)}
+                iconBaseUrl={iconsBaseUrl}
+                showTooltip
+            />
+        )
+    })
+}

package/dist/lib/components/MarkdownEditor/MdEditorInput.tsx

@@ -0,0 +1,98 @@
+/*=============================================== MdEditorInput ===============================================*/
+
+import { forwardRef, useCallback, type ChangeEvent } from "react"
+import classNames from "classnames"
+import { useMergeRefs, optionsMarkdown } from "../../"
+import {
+    StyledMarkdownEditor,
+    ContainerGrid,
+    Separator,
+    MarkdownContainer,
+} from "./styles"
+import type { ILibMdEditorInput } from "./subtypes"
+
+export const MdEditorInput = forwardRef<HTMLTextAreaElement, ILibMdEditorInput>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            editor,
+            setValue,
+            setHeight,
+            inputRef,
+            id,
+            value,
+            maxLength,
+            ...rest
+        },
+        ref
+    ) => {
+        const handleChange = useCallback(
+            (e: ChangeEvent<HTMLTextAreaElement>) => {
+                setValue(e.target.value)
+                setHeight(e.target.scrollHeight)
+
+                if (!e.target.value.length) setHeight(250)
+            },
+            [setValue, setHeight]
+        )
+
+        return (
+            <ContainerGrid
+                data-testid={
+                    testid && `${testid}.EditorContainer.ContainerGrid`
+                }
+                className={className && "ContainerGrid"}
+            >
+                <StyledMarkdownEditor
+                    data-testid={
+                        testid &&
+                        `${testid}.EditorContainer.ContainerGrid.Textarea`
+                    }
+                    className={classNames(
+                        { Textarea: className },
+                        {
+                            Visible:
+                                editor === "editorCode" ||
+                                editor === "editorLive",
+                        }
+                    )}
+                    ref={useMergeRefs([ref, inputRef])}
+                    id={id}
+                    value={value}
+                    onChange={handleChange}
+                    maxLength={maxLength}
+                    {...rest}
+                />
+
+                {editor === "editorLive" && (
+                    <Separator
+                        data-testid={
+                            testid &&
+                            `${testid}.EditorContainer.ContainerGrid.Separator`
+                        }
+                        className={className && "Separator"}
+                    />
+                )}
+
+                <MarkdownContainer
+                    data-testid={
+                        testid &&
+                        `${testid}.EditorContainer.ContainerGrid.MarkdownContent`
+                    }
+                    className={classNames(
+                        { MarkdownContent: className },
+                        {
+                            Visible:
+                                editor === "editorPreview" ||
+                                editor === "editorLive",
+                        }
+                    )}
+                    options={optionsMarkdown as any}
+                >
+                    {value}
+                </MarkdownContainer>
+            </ContainerGrid>
+        )
+    }
+)

package/dist/lib/components/MarkdownEditor/index.ts

@@ -0,0 +1,3 @@
+/*=============================================== MarkdownEditor exports ===============================================*/
+
+export * from "./MarkdownEditor"

package/dist/lib/components/MarkdownEditor/markdown-buttons.tsx

@@ -0,0 +1,182 @@
+/*=============================================== MarkdownEditor buttons ===============================================*/
+
+import { roundIconSize } from "../../lib-utils"
+import {
+    Bold,
+    Italic,
+    Strikethrough,
+    UnorderedList,
+    OrderedList,
+    Link,
+    Quote,
+    Separator,
+    Code,
+    CodeBlock,
+    Comment,
+    Image,
+    EditorCode,
+    EditorLive,
+    EditorPreview,
+    Underline,
+} from "../../icons"
+import type {
+    LibMdEditorTitle,
+    LibMdEditorButton,
+    LibMdEditorEditor,
+    LibIcon,
+} from "../../types"
+
+const DEFAULT_ICON_SIZE = roundIconSize(24)
+
+export type ButtonBase = {
+    name: LibMdEditorButton | LibMdEditorEditor | LibMdEditorTitle
+    displayName?: string
+}
+
+export type ButtonWithIcon = ButtonBase & {
+    defaultIcon: LibIcon
+}
+
+export type ButtonWithCode = ButtonBase & {
+    code: string
+}
+
+export const mdButtons: Array<ButtonWithCode & ButtonWithIcon> = [
+    {
+        name: "bold",
+        code: "** **",
+        defaultIcon: <Bold size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "italic",
+        code: "* *",
+        defaultIcon: <Italic size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "strikethrough",
+        code: "~~ ~~",
+        defaultIcon: <Strikethrough size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "underline",
+        code: "<u> </u>",
+        defaultIcon: <Underline size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        displayName: "Unordered list",
+        name: "ul",
+        code: "\n- ",
+        defaultIcon: <UnorderedList size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        displayName: "Ordered list",
+        name: "ol",
+        code: "\n1. ",
+        defaultIcon: <OrderedList size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "link",
+        code: "[](URL here)",
+        defaultIcon: <Link size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "quote",
+        displayName: "Blockquote",
+        code: "\n> ",
+        defaultIcon: <Quote size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        displayName: "Separator",
+        name: "hr",
+        code: "\n\n---\n\n",
+        defaultIcon: <Separator size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "code",
+        code: "``",
+        defaultIcon: <Code size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        displayName: "Code block",
+        name: "codeBlock",
+        code: "\n```\n\n```\n",
+        defaultIcon: <CodeBlock size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "comment",
+        code: "\n<!--  -->\n",
+        defaultIcon: <Comment size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "image",
+        code: "![](https://example.com/your-image.png)",
+        defaultIcon: <Image size={DEFAULT_ICON_SIZE} />,
+    },
+]
+
+export const mdEditorButtons: Array<ButtonWithIcon> = [
+    {
+        name: "editorCode",
+        defaultIcon: <EditorCode size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "editorLive",
+        defaultIcon: <EditorLive size={DEFAULT_ICON_SIZE} />,
+    },
+    {
+        name: "editorPreview",
+        defaultIcon: <EditorPreview size={DEFAULT_ICON_SIZE} />,
+    },
+]
+
+export const mdTitlesButtons: Array<ButtonBase & ButtonWithCode> = [
+    {
+        displayName: "Title 1",
+        name: "h1",
+        code: "\n# ",
+    },
+    {
+        displayName: "Title 2",
+        name: "h2",
+        code: "\n## ",
+    },
+    {
+        displayName: "Title 3",
+        name: "h3",
+        code: "\n### ",
+    },
+    {
+        displayName: "Title 4",
+        name: "h4",
+        code: "\n#### ",
+    },
+    {
+        displayName: "Title 5",
+        name: "h5",
+        code: "\n##### ",
+    },
+    {
+        displayName: "Title 6",
+        name: "h6",
+        code: "\n###### ",
+    },
+]
+
+export function getFontSizeButton(tag: LibMdEditorTitle): number | null {
+    switch (tag) {
+        case "h1":
+            return 17
+        case "h2":
+            return 16
+        case "h3":
+            return 15
+        case "h4":
+            return 14
+        case "h5":
+            return 13
+        case "h6":
+            return 12
+        default:
+            return null
+    }
+}