@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Masonry/Masonry.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Masonry component ===============================================*/
-
-import { forwardRef, useEffect, useRef, useState, useCallback } from "react"
+import { useEffect, useRef, useState, useCallback, type FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { useMergeRefs } from "../../"
 import { useEventListener, fillCols } from "./utils"
@@ -8,60 +6,68 @@ import { StyledMasonry, Col } from "./styles"
 import type { ILibMasonry } from "./types"
 
 /**
- * @description Returns a Masonry component
- * @link https://documentation-components-react.vercel.app/components/masonry
+ * Masonry component for rendering children in a responsive masonry grid layout with configurable columns and gap.
+ *
+ * @component
  * @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"
+ * @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 = forwardRef<HTMLDivElement, ILibMasonry>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children = [],
-            col = 4,
-            gap = "l",
-            ...rest
-        },
-        ref
-    ) => {
-        const el = useRef<HTMLDivElement>(null)
+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 [numCols, setNumCols] = useState(col)
+    const cols = [...Array(col)].map(() => [])
+    fillCols(children, cols)
 
-        const resizeHandler = useCallback(
-            () =>
-                setNumCols(
-                    Math.ceil(window.innerWidth / (window.innerWidth / numCols))
-                ),
-            [numCols]
-        )
+    const resizeHandler = useCallback(
+        () =>
+            setNumCols(
+                Math.ceil(window.innerWidth / (window.innerWidth / numCols))
+            ),
+        [numCols]
+    )
 
-        useEffect(resizeHandler, [numCols, resizeHandler])
+    useEffect(resizeHandler, [numCols, resizeHandler])
 
-        useEventListener("resize", 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>
-        )
-    }
-)
+    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 +1 @@
-/*=============================================== Masonry exports ===============================================*/
-
 export * from "./Masonry"

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

@@ -1,5 +1,3 @@
-/*=============================================== Masonry styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { Mixins, setDefaultTheme } from "../../"
 import type { LibSpacers } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Masonry types ===============================================*/
-
 import type { ReactNode } from "react"
 import type { LibComponentBase, LibSpacers } from "../../types"
 

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

@@ -1,5 +1,3 @@
-/*=============================================== Masonry utils ===============================================*/
-
 import { useEffect, useRef, type ReactNode } from "react"
 
 export function useEventListener(

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

@@ -1,6 +1,4 @@
-/*=============================================== Message ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import {
     convertDateShort,
@@ -13,94 +11,102 @@ import { StyledMessage } from "./styles"
 import type { ILibMessage } from "./types"
 
 /**
- * @description Returns a Message component
- * @link https://documentation-components-react.vercel.app/components/messaging
+ * Message component for displaying a chat message with optional date, time, and flexible layout.
+ *
+ * @component
  * @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" }
+ * @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 = 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
+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}
+    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)
+                )}
             >
-                <StyledMessage
-                    data-testid={testid && `${testid}.Message`}
-                    className={classNames(
-                        { MessageText: className },
-                        capitalize(type)
-                    )}
-                >
-                    {text ? linkifyText(text, true) : children}
-                </StyledMessage>
+                {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>
-        )
-    }
-)
+            {(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,12 +1,10 @@
-/*=============================================== MessageForm ===============================================*/
-
 import {
-    forwardRef,
     useState,
     useCallback,
     type ChangeEvent,
     type FormEvent,
     type KeyboardEvent,
+    type FC,
 } from "react"
 import { Button, ButtonIcon, useKeyPress } from "../../"
 import { Send } from "../../icons"
@@ -15,130 +13,141 @@ import type { ILibMessageForm } from "./types"
 import { roundIconSize } from "../../lib-utils"
 
 /**
- * @description Returns a MessageForm component
- * @link https://documentation-components-react.vercel.app/components/messaging
+ * MessageForm component for sending chat messages with a flexible input, submit button, and keyboard handling.
+ *
+ * @component
  * @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
+ * @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 = forwardRef<HTMLFormElement, ILibMessageForm>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            handleSubmit: submiForm,
-            input,
-            button,
-            inputHeight,
-            setInputHeight,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isInputSelected, setIsInputSelected] = useState(false)
+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)
+    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"]
-        )
+            if (!e.target.value.length) setInputHeight(32)
+        },
+        [input.setMessage, setInputHeight]
+    )
 
-        const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-            if (isInputSelected && e.key === "Enter") {
-                e.preventDefault()
+    useKeyPress(
+        ["Enter"],
+        () => {
+            if (isInputSelected && input.message.length) {
+                submiForm()
             }
+        },
+        ["Shift"]
+    )
 
-            if (e.key === "Enter" && e.shiftKey) {
-                e.preventDefault()
-                input.setMessage(`${input.message}\n`)
-                setInputHeight(inputHeight + 24)
-            }
+    const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (isInputSelected && e.key === "Enter") {
+            e.preventDefault()
         }
 
-        const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        if (e.key === "Enter" && e.shiftKey) {
             e.preventDefault()
-            submiForm()
+            input.setMessage(`${input.message}\n`)
+            setInputHeight(inputHeight + 24)
         }
+    }
 
-        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>
-        )
+    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>
+    )
+}