@julseb-lib/react 0.0.51 → 0.0.52

package/src/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/src/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/src/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/src/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/src/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/src/lib/components/MarkdownEditor/__preview__/MarkdownEditor.demo.tsx

@@ -1,11 +0,0 @@
-/*=============================================== MarkdownEditorDemo ===============================================*/
-
-import { useState } from "react"
-import { MarkdownEditor } from "../../../"
-import type { ILibMarkdownEditor } from "../types"
-
-export const MarkdownEditorDemo = (props: Omit<ILibMarkdownEditor, "value" | "setValue">) => {
-    const [value, setValue] = useState("# Hello World\n\nHow are you?")
-
-    return <MarkdownEditor value={value} setValue={setValue} {...props} />
-}

package/src/lib/components/MarkdownEditor/__preview__/MarkdownEditor.preview.tsx

@@ -1,28 +0,0 @@
-/*=============================================== MarkdownEditorPreview ===============================================*/
-
-import { MarkdownEditor } from "../../../"
-import type { ILibMarkdownEditor } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-import { MarkdownEditorDemo } from "./MarkdownEditor.demo"
-
-export const markdownEditorPreview: ComponentPreview<ILibMarkdownEditor> = {
-    name: "MarkdownEditor",
-    component: MarkdownEditor,
-    category: "components",
-    import: "MarkdownEditor",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibMarkdownEditor",
-    additionalTypeImports: ["LibMarkdownEditorOptions"],
-    extends: ["HTMLTextAreaElement"],
-    previews: [
-        {
-            demo: (
-                <MarkdownEditorDemo
-                    data-testid="testid"
-                    className="className"
-                />
-            ),
-        },
-    ],
-}

package/src/lib/components/MarkdownEditor/__tests__/MarkdownEditor.cy.tsx

@@ -1,50 +0,0 @@
-/*=============================================== MarkdownEditor tests ===============================================*/
-
-import { MarkdownEditorPreview } from "./Preview"
-
-describe("<MarkdownEditor />", () => {
-    it("renders <MarkdownEditor /> component", () => {
-        cy.mount(
-            <MarkdownEditorPreview data-testid="testid" className="className" />
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-
-        cy.dataTest("testid.EditorContainer.ContainerGrid.Textarea")
-            .should("exist")
-            .should("have.value", "")
-
-        cy.dataTest("testid.EditorContainer.ContainerGrid.Textarea")
-            .focus()
-            .type("# Hello\nworld")
-
-        cy.dataTest("testid.EditorContainer.ContainerGrid.Textarea").should(
-            "have.value",
-            "# Hello\nworld"
-        )
-        cy.dataTest("testid.EditorContainer.ContainerGrid.MarkdownContent")
-            .should("exist")
-            .children()
-            .eq(0)
-            .should("have.prop", "tagName", "H1")
-    })
-
-    it("adds markdown on click of a button", () => {
-        cy.mount(
-            <MarkdownEditorPreview data-testid="testid" className="className" />
-        )
-        cy.dataTest("testid.EditorContainer.ContainerGrid.Textarea").should(
-            "have.value",
-            ""
-        )
-
-        cy.dataTest(
-            "testid.EditorContainer.ButtonsContainer.ActionButtonsContainer.ActionButton.Button"
-        )
-            .eq(1)
-            .click()
-        cy.dataTest("testid.EditorContainer.ContainerGrid.Textarea").should(
-            "have.value",
-            "* *"
-        )
-    })
-})

package/src/lib/components/MarkdownEditor/__tests__/Preview.tsx

@@ -1,11 +0,0 @@
-/*=============================================== MarkdownEditorPreview ===============================================*/
-
-import { useState } from "react"
-import { MarkdownEditor } from "../../../"
-import type { ILibMarkdownEditor } from "../types"
-
-export const MarkdownEditorPreview = (props: Omit<ILibMarkdownEditor, "value" | "setValue">) => {
-    const [value, setValue] = useState("")
-
-    return <MarkdownEditor value={value} setValue={setValue} {...props} />
-}

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

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