@julseb-lib/react 0.0.50 → 0.0.52

package/dist/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/dist/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/dist/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/dist/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/dist/lib/components/Masonry/index.ts

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

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

package/dist/lib/components/Masonry/utils.ts

@@ -1,30 +0,0 @@
-/*=============================================== Masonry utils ===============================================*/
-
-import { useEffect, useRef, type ReactNode } from "react"
-
-export function useEventListener(
-    eventNames: keyof GlobalEventHandlersEventMap,
-    handler: () => void,
-    element = globalThis
-) {
-    const savedHandler = useRef<() => void>()
-    useEffect(() => (savedHandler.current = handler), [handler])
-
-    useEffect(() => {
-        if (!element.addEventListener) return
-
-        const listener = (e: EventListenerOrEventListenerObject) =>
-            (savedHandler as any).current(e!)
-
-        for (const e of eventNames as any) element.addEventListener(e, listener)
-
-        return () => {
-            for (const e of eventNames as any)
-                element.removeEventListener(e, listener)
-        }
-    }, [element, eventNames])
-}
-
-export function fillCols(children: Array<ReactNode>, cols: Array<any>) {
-    children.forEach((child, i) => cols[i % cols.length].push(child))
-}

package/dist/lib/components/Messaging/Message.tsx

@@ -1,106 +0,0 @@
-/*=============================================== Message ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import {
-    convertDateShort,
-    convertDate,
-    getYesterday,
-    capitalize,
-} from "@julseb-lib/utils"
-import { Flexbox, Text, linkifyText } from "../../"
-import { StyledMessage } from "./styles"
-import type { ILibMessage } from "./types"
-
-/**
- * @description Returns a Message component
- * @link https://documentation-components-react.vercel.app/components/messaging
- * @extends HTMLDivElement & ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop type: "sent" | "received"
- * @prop text: string => only if children is not defined
- * @prop children?: ReactChildren => only if text is not defined
- * @prop id?: string
- * @prop date?: Date | string
- * @prop textToday?: string => only if date is defined
- * @prop textYesterday?: string => only if date is defined
- * @prop dateFormat?: "short" | "long" => only if date is defined
- * @prop time?: string
- * @prop inline?: boolean
- * @prop flexDirection?: CssFlexDirection
- * @prop flexWrap?: CssFlexWrap
- * @prop justifyContent?: CssJustifyContent
- * @prop alignItems?: CssAlignItems
- * @prop justifyItems?: CssJustifyItems
- * @prop alignContent?: CssAlignContent
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- */
-export const Message = forwardRef<HTMLDivElement, ILibMessage>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            type,
-            text,
-            children,
-            date,
-            time,
-            textToday = "Today",
-            textYesterday = "Yesterday",
-            textDateTime = "at",
-            dateFormat = "short",
-            ...rest
-        },
-        ref
-    ) => {
-        const format = dateFormat === "short" ? convertDateShort : convertDate
-
-        return (
-            <Flexbox
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                alignItems={type === "sent" ? "flex-end" : "flex-start"}
-                flexDirection="column"
-                gap="xxs"
-                {...rest}
-            >
-                <StyledMessage
-                    data-testid={testid && `${testid}.Message`}
-                    className={classNames(
-                        { MessageText: className },
-                        capitalize(type)
-                    )}
-                >
-                    {text ? linkifyText(text, true) : children}
-                </StyledMessage>
-
-                {(date || time) && (
-                    <Text
-                        tag="small"
-                        data-testid={testid && `${testid}.DateAndTime`}
-                        className={className && "DateAndTime"}
-                    >
-                        {date &&
-                            (convertDateShort(date) ===
-                            convertDateShort(new Date())
-                                ? textToday
-                                : convertDateShort(date) ===
-                                  convertDateShort(getYesterday())
-                                ? textYesterday
-                                : format(date))}
-                        {date && time && ` ${textDateTime} `}
-                        {time && time}
-                    </Text>
-                )}
-            </Flexbox>
-        )
-    }
-)

package/dist/lib/components/Messaging/MessageForm.tsx

@@ -1,144 +0,0 @@
-/*=============================================== MessageForm ===============================================*/
-
-import {
-    forwardRef,
-    useState,
-    useCallback,
-    type ChangeEvent,
-    type FormEvent,
-    type KeyboardEvent,
-} from "react"
-import { Button, ButtonIcon, useKeyPress } from "../../"
-import { Send } from "../../icons"
-import { StyledMessageForm, StyledMessageInput } from "./styles"
-import type { ILibMessageForm } from "./types"
-import { roundIconSize } from "../../lib-utils"
-
-/**
- * @description Returns a MessageForm component
- * @link https://documentation-components-react.vercel.app/components/messaging
- * @extends HTMLFormElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLFormElement>
- * @prop inputHeight: number
- * @prop setInputHeight: Dispatch<SetStateAction<number>>
- * @prop handleSubmit: () => void
- * @prop input: { message: string; setMessage: Dispatch<SetStateAction<string>>; placeholder?: string; autoFocus?: boolean }
- * @prop button?: { icon?: string | JSX.Element => only if text is not defined; text?: string => only if icon is not defined }
- * @prop iconBaseUrl?: string
- */
-export const MessageForm = forwardRef<HTMLFormElement, ILibMessageForm>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            handleSubmit: submiForm,
-            input,
-            button,
-            inputHeight,
-            setInputHeight,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isInputSelected, setIsInputSelected] = useState(false)
-
-        const handleInput = useCallback(
-            (e: ChangeEvent<HTMLTextAreaElement>) => {
-                input.setMessage(e.target.value)
-                setInputHeight(e.target.scrollHeight)
-
-                if (!e.target.value.length) setInputHeight(32)
-            },
-            [input.setMessage, setInputHeight]
-        )
-
-        useKeyPress(
-            ["Enter"],
-            () => {
-                if (isInputSelected && input.message.length) {
-                    submiForm()
-                }
-            },
-            ["Shift"]
-        )
-
-        const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-            if (isInputSelected && e.key === "Enter") {
-                e.preventDefault()
-            }
-
-            if (e.key === "Enter" && e.shiftKey) {
-                e.preventDefault()
-                input.setMessage(`${input.message}\n`)
-                setInputHeight(inputHeight + 24)
-            }
-        }
-
-        const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            submiForm()
-        }
-
-        return (
-            <StyledMessageForm
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                onSubmit={handleSubmit}
-                id="messaging-form"
-                {...rest}
-            >
-                <StyledMessageInput
-                    data-testid={testid && `${testid}.Input`}
-                    className={className && "MessageInput"}
-                    value={input.message}
-                    onChange={handleInput}
-                    autoFocus={input?.autoFocus}
-                    placeholder={input?.placeholder || "Type your message..."}
-                    onFocus={() => setIsInputSelected(true)}
-                    onBlur={() => setIsInputSelected(false)}
-                    onKeyDown={handleKeyPress}
-                    id="messaging-form-input"
-                />
-
-                {button?.text ? (
-                    <Button
-                        data-testid={testid && `${testid}.SubmitButton`}
-                        className={className && "SubmitButton"}
-                        type="submit"
-                        variant="transparent"
-                        disabled={!input.message.length}
-                        noPadding
-                        iconBaseUrl={iconBaseUrl}
-                    >
-                        {button.text}
-                    </Button>
-                ) : (
-                    <ButtonIcon
-                        data-testid={testid && `${testid}.SubmitButton`}
-                        className={className && "SubmitButton"}
-                        type="submit"
-                        icon={
-                            button?.icon ?? (
-                                <Send
-                                    data-testid={
-                                        testid && `${testid}.SubmitButton.Icon`
-                                    }
-                                    className={className && "IconSubmit"}
-                                    size={roundIconSize(32)}
-                                />
-                            )
-                        }
-                        disabled={!input.message.length}
-                        size={32}
-                        variant="transparent"
-                        iconBaseUrl={iconBaseUrl}
-                        showBackgroundHover
-                    />
-                )}
-            </StyledMessageForm>
-        )
-    }
-)