@julseb-lib/react 0.1.2 → 0.1.4

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

@@ -1,57 +0,0 @@
-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,73 +0,0 @@
-import { useEffect, useRef, useState, useCallback, type FC } 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"
-
-/**
- * Masonry component for rendering children in a responsive masonry grid layout with configurable columns and gap.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Masonry props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {ElementType} [props.as] - Custom element type to render as.
- *  * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- *  * @param {ReactNode[]} [props.children] - Elements to display in the masonry grid.
- * @param {number} [props.col=4] - Number of columns in the masonry layout.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="l"] - Gap between columns and items.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Masonry component.
- *
- * @see https://documentation-components-react.vercel.app/components/masonry
- * @example
- * <Masonry col={3} gap="m">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </Masonry>
- */
-export const Masonry: FC<ILibMasonry> = ({
-    "data-testid": testid,
-    ref,
-    as,
-    children = [],
-    col = 4,
-    gap = "l",
-    ...rest
-}) => {
-    const el = useRef<HTMLDivElement>(null as any)
-
-    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/styles.tsx

@@ -1,22 +0,0 @@
-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,8 +0,0 @@
-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,28 +0,0 @@
-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,112 +0,0 @@
-import type { FC } 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"
-
-/**
- * Message component for displaying a chat message with optional date, time, and flexible layout.
- *
- * @component
- * @extends HTMLDivElement & ILibFlexbox
- * @param {Object} props - Message props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {ElementType} [props.as] - Custom element type to render as.
- *  * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {"sent" | "received"} props.type - Message type (sent or received).
- * @param {string} [props.text] - Message text (used if children is not defined).
- *  * @param {ReactNode} [props.children] - Message content (used if text is not defined).
- * @param {string} [props.id] - Message id.
- * @param {Date | string} [props.date] - Date of the message.
- * @param {string} [props.textToday="Today"] - Text to display for today's date.
- * @param {string} [props.textYesterday="Yesterday"] - Text to display for yesterday's date.
- * @param {"short" | "long"} [props.dateFormat="short"] - Date format.
- * @param {string} [props.textDateTime="at"] - Text between date and time.
- * @param {string} [props.time] - Time of the message.
- * @param {boolean} [props.inline] - Display message inline.
- * @param {CssFlexDirection} [props.flexDirection] - Flex direction.
- * @param {CssFlexWrap} [props.flexWrap] - Flex wrap.
- * @param {CssJustifyContent} [props.justifyContent] - Justify content.
- * @param {CssAlignItems} [props.alignItems] - Align items.
- * @param {CssJustifyItems} [props.justifyItems] - Justify items.
- * @param {CssAlignContent} [props.alignContent] - Align content.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between elements.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.columnGap] - Column gap.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.rowGap] - Row gap.
- * @param {"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" }} [props.padding] - Padding for the message container.
- * @returns {JSX.Element} The rendered Message component.
- *
- * @see https://documentation-components-react.vercel.app/components/messaging
- * @example
- * <Message
- *   type="sent"
- *   text="Hello!"
- *   date={new Date()}
- *   time="14:30"
- * />
- */
-export const Message: FC<ILibMessage> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    type,
-    text,
-    children,
-    date,
-    time,
-    textToday = "Today",
-    textYesterday = "Yesterday",
-    textDateTime = "at",
-    dateFormat = "short",
-    ...rest
-}) => {
-    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,153 +0,0 @@
-import {
-    useState,
-    useCallback,
-    type ChangeEvent,
-    type FormEvent,
-    type KeyboardEvent,
-    type FC,
-} 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"
-
-/**
- * MessageForm component for sending chat messages with a flexible input, submit button, and keyboard handling.
- *
- * @component
- * @extends HTMLFormElement
- * @param {Object} props - MessageForm props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {Ref<HTMLFormElement>} [props.ref] - Ref forwarded to the form element.
- * @param {string} [props.className] - Additional class names.
- * @param {number} props.inputHeight - Current height of the textarea input.
- * @param {Dispatch<React.SetStateAction<number>>} props.setInputHeight - Setter for the input height.
- * @param {() => void} props.handleSubmit - Function to call on form submit.
- * @param {{ message: string; setMessage: React.Dispatch<React.SetStateAction<string>>; placeholder?: string; autoFocus?: boolean }} props.input - Input state and handlers.
- * @param {{ icon?: string | JSX.Element; text?: string }} [props.button] - Button configuration (icon or text).
- * @param {string} [props.iconBaseUrl] - Base URL for icons.
- * @param {any} [props.rest] - Additional props passed to the form element.
- * @returns {JSX.Element} The rendered MessageForm component.
- *
- * @see https://documentation-components-react.vercel.app/components/messaging
- * @example
- * <MessageForm
- *   inputHeight={32}
- *   setInputHeight={setInputHeight}
- *   handleSubmit={handleSend}
- *   input={{ message, setMessage, placeholder: "Type a message..." }}
- *   button={{ icon: <Send /> }}
- * />
- */
-export const MessageForm: FC<ILibMessageForm> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    handleSubmit: submiForm,
-    input,
-    button,
-    inputHeight,
-    setInputHeight,
-    iconBaseUrl,
-    ...rest
-}) => {
-    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>
-    )
-}

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

@@ -1,42 +0,0 @@
-import type { FC } from "react"
-import { StyledMessagesContainer } from "./styles"
-import type { ILibMessagesContainer } from "./types"
-
-/**
- * MessagesContainer component for wrapping chat messages in a styled scrollable container.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - MessagesContainer props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {ReactNode} [props.children] - Messages or content to display inside the container.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered MessagesContainer component.
- *
- * @see https://documentation-components-react.vercel.app/components/messaging
- * @example
- * <MessagesContainer>
- *   <Message type="sent" text="Hello!" />
- *   <Message type="received" text="Hi!" />
- * </MessagesContainer>
- */
-export const MessagesContainer: FC<ILibMessagesContainer> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    ...rest
-}) => {
-    return (
-        <StyledMessagesContainer
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            {...rest}
-        >
-            {children}
-        </StyledMessagesContainer>
-    )
-}

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

@@ -1,140 +0,0 @@
-import { useRef, useState, useEffect, type FC } from "react"
-import classNames from "classnames"
-import { Text, useMergeRefs } from "../../"
-import { roundIconSize } from "../../lib-utils"
-import { ChevronDown } from "../../icons"
-import { StyledMessagesList, MessageListBottom, ScrollButton } from "./styles"
-import type { ILibMessagesList } from "./types"
-
-/**
- * MessagesList component for displaying a scrollable list of chat messages with optional empty state and scroll-to-bottom button.
- *
- * @component
- * @extends HTMLDivElement & ILibFlexbox
- * @param {Object} props - MessagesList props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {ReactNode[]} [props.children] - Array of message elements to display.
- * @param {string} [props.emptyText="No message yet."] - Text to display when there are no messages.
- * @param {boolean} [props.hideScrollButton] - Hide the scroll-to-bottom button.
- * @param {{ icon?: string | JSX.Element; iconSize?: number; positionFromBottom?: number; iconBaseUrl?: string }} [props.scrollButton] - Customization for the scroll button (only if hideScrollButton is false or undefined).
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered MessagesList component.
- *
- * @see https://documentation-components-react.vercel.app/components/messaging
- * @example
- * <MessagesList>
- *   <Message type="sent" text="Hello!" />
- *   <Message type="received" text="Hi!" />
- * </MessagesList>
- */
-export const MessagesList: FC<ILibMessagesList> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    children,
-    emptyText: textEmpty = "No message yet.",
-    scrollButton,
-    hideScrollButton,
-    ...rest
-}) => {
-    const [isButtonVisible, setIsButtonVisible] = useState(false)
-
-    const containerRef = useRef<HTMLDivElement>(null as any)
-    const bottomRef = useRef<HTMLDivElement>(null as any)
-
-    const scrollToBottom = () => {
-        if (containerRef && containerRef.current) {
-            const scrollHeight = containerRef?.current?.scrollHeight
-            const height = containerRef?.current?.clientHeight
-            const maxScrollTop = scrollHeight - height
-
-            containerRef.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0
-
-            setIsButtonVisible(false)
-        }
-    }
-
-    useEffect(() => {
-        if (children?.length) scrollToBottom()
-
-        containerRef?.current?.addEventListener("scroll", () => {
-            const scroll = containerRef.current?.scrollTop
-            const height = containerRef?.current?.clientHeight
-
-            if (scroll && height) {
-                if (scroll < height) {
-                    setIsButtonVisible(true)
-                } else {
-                    setIsButtonVisible(false)
-                }
-            }
-        })
-    }, [children?.length])
-
-    const isEmpty: boolean = !children?.length
-
-    return (
-        <StyledMessagesList
-            data-testid={testid}
-            ref={useMergeRefs([ref, containerRef])}
-            as={as}
-            className={className}
-            flexDirection="column"
-            gap="s"
-            justifyContent={isEmpty ? "center" : "flex-start"}
-            alignItems={isEmpty ? "center" : "stretch"}
-            {...rest}
-        >
-            {children?.length ? (
-                <>
-                    {children}
-
-                    <MessageListBottom
-                        data-testid={testid && `${testid}.ListBottom`}
-                        ref={bottomRef}
-                        className={className && "MessageListBottom"}
-                    />
-                </>
-            ) : (
-                <Text
-                    data-testid={testid && `${testid}.EmptyText`}
-                    color="gray"
-                    className={className && "MessageListEmptyText"}
-                >
-                    {textEmpty}
-                </Text>
-            )}
-
-            {!hideScrollButton && (
-                <ScrollButton
-                    data-testid={testid && `${testid}.ScrollButton`}
-                    className={classNames(
-                        {
-                            MessagesListScrollButton: className,
-                        },
-                        { Visible: isButtonVisible }
-                    )}
-                    id="message-container-scroll-button"
-                    icon={
-                        scrollButton?.icon ?? (
-                            <ChevronDown
-                                data-testid={
-                                    testid && `${testid}.ScrollButton.Icon`
-                                }
-                                className={className && "ScrollIcon"}
-                                size={roundIconSize(32)}
-                            />
-                        )
-                    }
-                    onClick={scrollToBottom}
-                    variant="ghost"
-                    shadow="s"
-                    iconBaseUrl={scrollButton?.iconBaseUrl}
-                />
-            )}
-        </StyledMessagesList>
-    )
-}