@julseb-lib/react 0.0.51 → 0.0.52

package/src/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
-    }
-}

package/src/lib/components/MarkdownEditor/styles.tsx

@@ -1,186 +0,0 @@
-/*=============================================== MarkdownEditor styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import Markdown from "markdown-to-jsx"
-import {
-    setDefaultTheme,
-    Flexbox,
-    SPACERS,
-    MEDIA,
-    RADIUSES,
-    Mixins,
-    FONT_FAMILIES,
-    FONT_SIZES,
-    ButtonIcon,
-    Dropdown,
-    DropdownItem,
-} from "../../"
-import { getFontSizeButton } from "./markdown-buttons"
-import type {
-    LibInputBackground,
-    LibMdEditorTitle,
-    LibValidationStatus,
-} from "../../types"
-
-const MdEditorContainer = styled.div<{
-    $backgroundColor?: LibInputBackground
-    $validationStatus: LibValidationStatus
-}>`
-    border-radius: ${RADIUSES.M};
-    height: fit-content;
-    border: 1px solid ${({ theme }) => theme.GRAY_200};
-    background-color: ${({ theme, $validationStatus }) =>
-        $validationStatus === false ? theme.DANGER_50 : theme.BACKGROUND};
-    color: ${({ theme }) => theme.FONT};
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $alignItems: "stretch",
-    })}
-
-    &:has(textarea:focus) {
-        border-color: ${({ theme, $validationStatus }) =>
-            $validationStatus === false ? theme.DANGER_500 : theme.PRIMARY_500};
-    }
-
-    ${({ $backgroundColor, $validationStatus, theme }) => {
-        switch ($backgroundColor) {
-            case "light":
-                return css`
-                    background-color: ${Mixins.AllColors(
-                        $validationStatus === false ? "danger-50" : "white",
-                        theme,
-                        "light"
-                    )};
-                    color: ${Mixins.AllColors("font", theme, "light")};
-                `
-            case "dark":
-                return css`
-                    background-color: ${Mixins.AllColors(
-                        $validationStatus === false
-                            ? "danger-50"
-                            : "background",
-                        theme,
-                        "dark"
-                    )};
-                    color: ${Mixins.AllColors("font", theme, "dark")};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const StyledMarkdownEditor = styled.textarea`
-    font-family: ${FONT_FAMILIES.BODY};
-    font-size: ${FONT_SIZES.BODY};
-    width: 100%;
-    border: none;
-    resize: none;
-    border-radius: 0 0 0 ${RADIUSES.M};
-    background-color: transparent;
-    outline: none;
-    height: 100%;
-    display: none;
-    padding: ${SPACERS.XS};
-    height: var(--markdown-input-height, 250px);
-    min-height: 250px;
-    color: currentColor;
-
-    &.Visible {
-        display: block;
-    }
-`
-
-const ButtonsContainer = styled(Flexbox).attrs({
-    gap: "xs",
-    alignItems: "center",
-    justifyContent: "space-between",
-    flexDirection: "row",
-})`
-    background-color: ${({ theme }) => theme.GRAY_50};
-    border-radius: ${RADIUSES.M} ${RADIUSES.M} 0 0;
-    padding: ${SPACERS.XS};
-
-    @media ${MEDIA.BREAKPOINT_MOBILE} {
-        gap: 0;
-        align-items: flex-start;
-        justify-content: flex-start;
-        flex-direction: column;
-    }
-`
-
-const IconButton = styled(ButtonIcon).attrs({
-    size: 24,
-    variant: "transparent",
-    type: "button",
-})`
-    border-radius: ${RADIUSES.S};
-
-    &.Active {
-        background-color: ${({ theme }) => theme.GRAY_100};
-    }
-`
-
-const TitlesDropdown = styled(Dropdown)`
-    border-radius: 0 0 ${RADIUSES.M} ${RADIUSES.M};
-` as any
-
-const TitleDropdownItem = styled(DropdownItem)<{ $tag: LibMdEditorTitle }>`
-    background-color: ${({ theme }) => theme.GRAY_50};
-    font-size: ${({ $tag }) => getFontSizeButton($tag)}px;
-`
-
-const ContainerGrid = styled.div`
-    flex-grow: 1;
-    ${Mixins.Grid({
-        $gap: "xs",
-        $col: "var(--markdown-editor-grid)",
-    })}
-`
-
-const Separator = styled.span`
-    width: 2px;
-    height: 100%;
-    background-color: ${({ theme }) => theme.GRAY_200};
-`
-
-const MarkdownContainer = styled(Markdown)`
-    height: var(--markdown-input-height, 250px);
-    min-height: 250px;
-    border-radius: 0 0 ${RADIUSES.M} 0;
-    display: none;
-    flex-direction: column;
-    gap: ${SPACERS.S};
-    align-items: stretch;
-    padding: ${SPACERS.XS};
-    overflow-y: scroll;
-    color: currentColor;
-
-    &.Visible {
-        display: flex;
-    }
-`
-
-setDefaultTheme([
-    MdEditorContainer,
-    StyledMarkdownEditor,
-    ButtonsContainer,
-    IconButton,
-    TitlesDropdown,
-    TitleDropdownItem,
-    ContainerGrid,
-    Separator,
-    MarkdownContainer,
-])
-
-export {
-    MdEditorContainer,
-    StyledMarkdownEditor,
-    ButtonsContainer,
-    IconButton,
-    TitlesDropdown,
-    TitleDropdownItem,
-    ContainerGrid,
-    Separator,
-    MarkdownContainer,
-}

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

@@ -1,54 +0,0 @@
-/*=============================================== MarkdownEditor sub components types ===============================================*/
-
-import type { RefObject } from "react"
-import type { LibMdEditorEditor, DispatchState } from "../../types"
-import type { ILibMarkdownEditor } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN MARKDOWN_EDITOR COMPONENTS
-
-export interface ILibMdEditorInput extends ILibMarkdownEditor {
-    editor: LibMdEditorEditor
-    setHeight: DispatchState<number>
-    inputRef: RefObject<HTMLTextAreaElement>
-}
-
-export interface ILibMdEditorButtons
-    extends Pick<
-        Partial<ILibMarkdownEditor>,
-        | "showButtons"
-        | "className"
-        | "data-testid"
-        | "icons"
-        | "iconsSizes"
-        | "iconsBaseUrl"
-    > {
-    editor: LibMdEditorEditor
-    setEditor: DispatchState<LibMdEditorEditor>
-}
-
-export interface ILibMarkdownEditorTitles
-    extends Pick<
-        ILibMarkdownEditor,
-        "data-testid" | "showButtons" | "className" | "textButtonTitles"
-    > {
-    inputRef: RefObject<HTMLTextAreaElement>
-    addCode: (code: string) => void
-}
-
-export interface ILibMarkdownEditorMdButtons
-    extends Pick<
-        ILibMarkdownEditor,
-        | "showButtons"
-        | "icons"
-        | "iconsSizes"
-        | "iconsBaseUrl"
-        | "data-testid"
-        | "className"
-    > {
-    addCode: (code: string) => void
-}
-
-export interface ILibMdEditorHelmet {
-    editor: LibMdEditorEditor
-    height: number
-}

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

@@ -1,59 +0,0 @@
-/*=============================================== MarkdownEditor types ===============================================*/
-
-import type { TextareaHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    LibIcon,
-    LibMdEditorEditor,
-    DispatchState,
-    LibMarkdownEditorOptions,
-} from "../../types"
-import type { ILibExtendedInputBase } from "../InputComponents/types"
-
-export type ILibMarkdownEditor = Exclude<
-    LibComponentBase<HTMLTextAreaElement>,
-    "as"
-> &
-    Omit<ILibExtendedInputBase, "inputVariant"> &
-    TextareaHTMLAttributes<HTMLTextAreaElement> & {
-        value: string
-        setValue: DispatchState<string>
-        onChange?: never
-        defaultEditor?: LibMdEditorEditor
-        textButtonTitles?: string
-        showButtons?: LibMarkdownEditorOptions
-        icons?: {
-            bold?: LibIcon
-            italic?: LibIcon
-            strikethrough?: LibIcon
-            ul?: LibIcon
-            ol?: LibIcon
-            link?: LibIcon
-            quote?: LibIcon
-            hr?: LibIcon
-            code?: LibIcon
-            codeBlock?: LibIcon
-            comment?: LibIcon
-            image?: LibIcon
-            editorCode?: LibIcon
-            editorLive?: LibIcon
-            editorPreview?: LibIcon
-        }
-        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
-        }
-    }

package/src/lib/components/Masonry/Masonry.tsx

@@ -1,67 +0,0 @@
-/*=============================================== Masonry component ===============================================*/
-
-import { forwardRef, useEffect, useRef, useState, useCallback } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { useMergeRefs } from "../../"
-import { useEventListener, fillCols } from "./utils"
-import { StyledMasonry, Col } from "./styles"
-import type { ILibMasonry } from "./types"
-
-/**
- * @description Returns a Masonry component
- * @link https://documentation-components-react.vercel.app/components/masonry
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop children?: Array<ReactNode>
- * @prop col?: number
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- */
-export const Masonry = forwardRef<HTMLDivElement, ILibMasonry>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children = [],
-            col = 4,
-            gap = "l",
-            ...rest
-        },
-        ref
-    ) => {
-        const el = useRef<HTMLDivElement>(null)
-
-        const [numCols, setNumCols] = useState(col)
-        const cols = [...Array(col)].map(() => [])
-        fillCols(children, cols)
-
-        const resizeHandler = useCallback(
-            () =>
-                setNumCols(
-                    Math.ceil(window.innerWidth / (window.innerWidth / numCols))
-                ),
-            [numCols]
-        )
-
-        useEffect(resizeHandler, [numCols, resizeHandler])
-
-        useEventListener("resize", resizeHandler)
-
-        return (
-            <StyledMasonry
-                data-testid={testid}
-                as={as}
-                ref={useMergeRefs([el, ref])}
-                $gap={gap}
-                {...rest}
-            >
-                {[...Array(numCols)].map((_, i) => (
-                    <Col $gap={gap} key={uuid()}>
-                        {cols[i]}
-                    </Col>
-                ))}
-            </StyledMasonry>
-        )
-    }
-)

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

@@ -1,48 +0,0 @@
-/*=============================================== MasonryPreview ===============================================*/
-
-import { uuid } from "@julseb-lib/utils"
-import { Image, Masonry } from "../../../"
-import type { ILibMasonry } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const images: Array<string> = [
-    "https://images.unsplash.com/photo-1636390785258-f59cd6883a03?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80",
-    "https://images.unsplash.com/photo-1647599708318-1b267bf44fd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzfGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1636390785299-b4df455163dd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80",
-    "https://images.unsplash.com/photo-1634705146926-b8fbca28f431?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80",
-    "https://images.unsplash.com/photo-1647458792028-f9b3599d4208?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1647725280666-bb7f94a15d69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1647831591495-2f9ce7dd3d1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDN8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1647831570034-51d43eac0694?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1647464884405-42bbd541bc17?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDd8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1646330685088-d8a402b0dcc2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE5fGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-    "https://images.unsplash.com/photo-1636207543865-acf3ad382295?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
-]
-
-export const masonryPreview: ComponentPreview<ILibMasonry> = {
-    name: "Masonry",
-    component: Masonry,
-    category: "components",
-    import: "Masonry",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibMasonry",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            demo: (
-                <Masonry
-                    col={3}
-                    gap="xl"
-                    data-testid="testid"
-                    className="className"
-                >
-                    {images.map((image, i) => (
-                        <Image src={image} alt={`Img ${i}`} key={uuid()} />
-                    ))}
-                </Masonry>
-            ),
-        },
-    ],
-}

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

@@ -1,35 +0,0 @@
-/*=============================================== Masonry tests ===============================================*/
-
-import { uuid } from "@julseb-lib/utils"
-import { Masonry, Image } from "../../.."
-import { images } from "../__preview__/Masonry.preview"
-
-describe("<Masonry />", () => {
-    it("renders <Masonry /> component", () => {
-        cy.mount(
-            <Masonry data-testid="testid" className="className">
-                {images.map((image, i) => (
-                    <Image src={image} alt={`Img ${i}`} key={uuid()} />
-                ))}
-            </Masonry>
-        )
-
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .children()
-            .should("have.length", 4)
-    })
-
-    it("renders 3 cols", () => {
-        cy.mount(
-            <Masonry col={3} gap="xl" data-testid="testid">
-                {images.map((image, i) => (
-                    <Image src={image} alt={`Img ${i}`} key={uuid()} />
-                ))}
-            </Masonry>
-        )
-
-        cy.dataTest().should("exist").children().should("have.length", 3)
-    })
-})

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

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

package/src/lib/components/Masonry/styles.tsx

@@ -1,24 +0,0 @@
-/*=============================================== Masonry styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { Mixins, setDefaultTheme } from "../../"
-import type { LibSpacers } from "../../types"
-
-const Common = ({ $gap }: { $gap?: LibSpacers }) => css`
-    display: grid;
-    grid-gap: ${Mixins.Spacer($gap)};
-`
-
-const StyledMasonry = styled.div<{ $gap?: LibSpacers }>`
-    ${Common};
-    grid-auto-flow: column;
-`
-
-const Col = styled.div<{ $gap?: LibSpacers }>`
-    ${Common};
-    height: fit-content;
-`
-
-setDefaultTheme([StyledMasonry, Col])
-
-export { StyledMasonry, Col }

package/src/lib/components/Masonry/types.ts

@@ -1,10 +0,0 @@
-/*=============================================== Masonry types ===============================================*/
-
-import type { ReactNode } from "react"
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibMasonry extends LibComponentBase<HTMLDivElement> {
-    children?: Array<ReactNode>
-    col?: number
-    gap?: LibSpacers
-}