@julseb-lib/react 0.0.56 → 0.0.58

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

@@ -1,196 +0,0 @@
-/*=============================================== 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

@@ -1,77 +0,0 @@
-/*=============================================== 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

@@ -1,75 +0,0 @@
-/*=============================================== 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

@@ -1,54 +0,0 @@
-/*=============================================== 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

@@ -1,98 +0,0 @@
-/*=============================================== 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

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

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

@@ -1,182 +0,0 @@
-/*=============================================== 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
-    }
-}