@julseb-lib/react 0.0.84 → 0.0.86

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

@@ -1,21 +1,34 @@
-/*=============================================== MessagesContainer ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledMessagesContainer } from "./styles"
 import type { ILibMessagesContainer } from "./types"
 
 /**
- * @description Returns a MessagesContainer component
- * @link https://documentation-components-react.vercel.app/components/messaging
+ * MessagesContainer component for wrapping chat messages in a styled scrollable container.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<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 = forwardRef<
-    HTMLDivElement,
-    ILibMessagesContainer
->(({ "data-testid": testid, as, children, ...rest }, ref) => {
+export const MessagesContainer: FC<ILibMessagesContainer> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    ...rest
+}) => {
     return (
         <StyledMessagesContainer
             data-testid={testid}
@@ -26,4 +39,4 @@ export const MessagesContainer = forwardRef<
             {children}
         </StyledMessagesContainer>
     )
-})
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== MessagesList ===============================================*/
-
-import { forwardRef, useRef, useState, useEffect } from "react"
+import { useRef, useState, useEffect, type FC } from "react"
 import classNames from "classnames"
 import { Text, useMergeRefs } from "../../"
 import { roundIconSize } from "../../lib-utils"
@@ -9,128 +7,134 @@ import { StyledMessagesList, MessageListBottom, ScrollButton } from "./styles"
 import type { ILibMessagesList } from "./types"
 
 /**
- * @description Returns a MessagesList component
- * @link https://documentation-components-react.vercel.app/components/messaging
+ * MessagesList component for displaying a scrollable list of chat messages with optional empty state and scroll-to-bottom button.
+ *
+ * @component
  * @extends HTMLDivElement & ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop children?: Array<ReactNode>
- * @prop emptyText?: string
- * @prop hideScrollButton?: boolean
- * @prop scrollButton?: { icon?: string | JSX.Element; iconSize?: number; positionFromBottom?: number; iconBaseUrl?: string } => only if hideScrollButton is false or undefined
+ * @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 = forwardRef<HTMLDivElement, ILibMessagesList>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            children,
-            emptyText: textEmpty = "No message yet.",
-            scrollButton,
-            hideScrollButton,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isButtonVisible, setIsButtonVisible] = useState(false)
+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)
-        const bottomRef = useRef<HTMLDivElement>(null)
+    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
+    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
+            containerRef.current.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0
 
-                setIsButtonVisible(false)
-            }
+            setIsButtonVisible(false)
         }
+    }
 
-        useEffect(() => {
-            if (children?.length) scrollToBottom()
+    useEffect(() => {
+        if (children?.length) scrollToBottom()
 
-            containerRef?.current?.addEventListener("scroll", () => {
-                const scroll = containerRef.current?.scrollTop
-                const height = containerRef?.current?.clientHeight
+        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)
-                    }
+            if (scroll && height) {
+                if (scroll < height) {
+                    setIsButtonVisible(true)
+                } else {
+                    setIsButtonVisible(false)
                 }
-            })
-        }, [children?.length])
-
-        const isEmpty: boolean = !children?.length
+            }
+        })
+    }, [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}
+    const isEmpty: boolean = !children?.length
 
-                        <MessageListBottom
-                            data-testid={testid && `${testid}.ListBottom`}
-                            ref={bottomRef}
-                            className={className && "MessageListBottom"}
-                        />
-                    </>
-                ) : (
-                    <Text
-                        data-testid={testid && `${testid}.EmptyText`}
-                        color="gray"
-                        className={className && "MessageListEmptyText"}
-                    >
-                        {textEmpty}
-                    </Text>
-                )}
+    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}
 
-                {!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}
+                    <MessageListBottom
+                        data-testid={testid && `${testid}.ListBottom`}
+                        ref={bottomRef}
+                        className={className && "MessageListBottom"}
                     />
-                )}
-            </StyledMessagesList>
-        )
-    }
-)
+                </>
+            ) : (
+                <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>
+    )
+}

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

@@ -1,6 +1,4 @@
-/*=============================================== Messaging component ===============================================*/
-
-import { forwardRef, useState } from "react"
+import { useState, type FC } from "react"
 import { getToday, uuid, stringifyPx } from "@julseb-lib/utils"
 import { Hr } from "../../"
 import { appendStyles } from "../../lib-utils"
@@ -11,47 +9,51 @@ import { Message } from "./Message"
 import type { ILibMessaging } from "./types"
 
 /**
- * @description Returns a Messaging component
- * @link https://documentation-components-react.vercel.app/components/messaging
+ * Messaging component for displaying a complete chat interface with messages list, input form, and scroll handling.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibMessage>
- * @prop textDateTime?: string
- * @prop emptyText?: string
- * @prop iconScroll?: string | JSX.Element
- * @prop iconScrollSize?: number
+ * @param {Object} props - Messaging 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 {string} [props.className] - Additional class names.
+ * @param {Array<LibMessage>} props.items - Array of message objects to display.
+ * @param {string} [props.textDateTime] - Text between date and time in messages.
+ * @param {string} [props.emptyText] - Text to display when there are no messages.
+ * @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 for the message form.
+ * @param {{ icon?: string | JSX.Element; text?: string }} [props.button] - Button configuration for the message form.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Messaging component.
  *
- * @type LibMessage
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop type: "sent" | "received"
- * @prop text: string
- * @prop date?: Date | string
- * @prop time?: string
+ * @see https://documentation-components-react.vercel.app/components/messaging
+ * @example
+ * <Messaging
+ *   items={[
+ *     { type: "sent", text: "Hello!", date: new Date(), time: "14:30" },
+ *     { type: "received", text: "Hi!", date: new Date(), time: "14:31" }
+ *   ]}
+ *   input={{ message, setMessage, placeholder: "Type a message..." }}
+ *   handleSubmit={handleSend}
+ * />
  */
-export const Messaging = forwardRef<HTMLDivElement, ILibMessaging>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            items,
-            textDateTime,
-            emptyText,
-            handleSubmit,
-            input,
-            button,
-            ...rest
-        },
-        ref
-    ) => {
-        const [inputHeight, setInputHeight] = useState(32)
+export const Messaging: FC<ILibMessaging> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    items,
+    textDateTime,
+    emptyText,
+    handleSubmit,
+    input,
+    button,
+    ...rest
+}) => {
+    const [inputHeight, setInputHeight] = useState(32)
 
-        appendStyles(`
+    appendStyles(`
             #message-container-scroll-button, 
             #messaging-form,
             #messaging-form-input {
@@ -61,63 +63,61 @@ export const Messaging = forwardRef<HTMLDivElement, ILibMessaging>(
             }
         `)
 
-        return (
-            <MessagesContainer
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                {...rest}
+    return (
+        <MessagesContainer
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            {...rest}
+        >
+            <MessagesList
+                data-testid={testid && `${testid}.MessagesList`}
+                className={className && "MessagesList"}
+                emptyText={emptyText}
             >
-                <MessagesList
-                    data-testid={testid && `${testid}.MessagesList`}
-                    className={className && "MessagesList"}
-                    emptyText={emptyText}
-                >
-                    {items
-                        ?.sort(
-                            (a, b) =>
-                                new Date(
-                                    `${a.date}-${a.time}` || getToday()
-                                )?.getTime() -
-                                new Date(
-                                    `${b.date}-${b.time}` || getToday()
-                                ).getTime()
-                        )
-                        .map(message => (
-                            <Message
-                                key={uuid()}
-                                data-testid={
-                                    message["data-testid"] ||
-                                    (testid && `${testid}.MessagesList.Message`)
-                                }
-                                className={
-                                    message.className ||
-                                    (className && "Message")
-                                }
-                                id={message.id}
-                                ref={message.ref}
-                                textDateTime={textDateTime}
-                                {...message}
-                            />
-                        ))}
-                </MessagesList>
+                {items
+                    ?.sort(
+                        (a, b) =>
+                            new Date(
+                                `${a.date}-${a.time}` || getToday()
+                            )?.getTime() -
+                            new Date(
+                                `${b.date}-${b.time}` || getToday()
+                            ).getTime()
+                    )
+                    .map(message => (
+                        <Message
+                            key={uuid()}
+                            data-testid={
+                                message["data-testid"] ||
+                                (testid && `${testid}.MessagesList.Message`)
+                            }
+                            className={
+                                message.className || (className && "Message")
+                            }
+                            id={message.id}
+                            ref={message.ref}
+                            textDateTime={textDateTime}
+                            {...message}
+                        />
+                    ))}
+            </MessagesList>
 
-                <Hr
-                    data-testid={testid && `${testid}.Separator`}
-                    className={className && "Separator"}
-                />
+            <Hr
+                data-testid={testid && `${testid}.Separator`}
+                className={className && "Separator"}
+            />
 
-                <MessageForm
-                    data-testid={testid && `${testid}.Form`}
-                    className={className && "Form"}
-                    handleSubmit={handleSubmit}
-                    input={input}
-                    button={button}
-                    inputHeight={inputHeight}
-                    setInputHeight={setInputHeight}
-                />
-            </MessagesContainer>
-        )
-    }
-)
+            <MessageForm
+                data-testid={testid && `${testid}.Form`}
+                className={className && "Form"}
+                handleSubmit={handleSubmit}
+                input={input}
+                button={button}
+                inputHeight={inputHeight}
+                setInputHeight={setInputHeight}
+            />
+        </MessagesContainer>
+    )
+}

package/dist/lib/components/Messaging/index.ts

@@ -1,5 +1,3 @@
-/*=============================================== Messaging exports ===============================================*/
-
 export * from "./Messaging"
 export * from "./MessagesContainer"
 export * from "./MessagesList"

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

@@ -1,5 +1,3 @@
-/*=============================================== Messaging styles ===============================================*/
-
 import styled from "styled-components"
 import {
     setDefaultTheme,
@@ -36,6 +34,7 @@ const StyledMessagesContainer = styled.div`
 const StyledMessagesList = styled(Flexbox)`
     flex-grow: 1;
     overflow-y: scroll;
+    ${Mixins.HideScrollbar};
 `
 
 const MessageListBottom = styled.div`

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

@@ -1,5 +1,3 @@
-/*=============================================== Messaging types ===============================================*/
-
 import type { ReactNode } from "react"
 import type {
     LibComponentBase,
@@ -11,8 +9,6 @@ import type {
 } from "../../types"
 import type { ILibFlexbox } from "../Flexbox/types"
 
-/*====================== Messaging ======================*/
-
 export interface ILibMessaging
     extends LibComponentBase<HTMLDivElement>,
         MessageFormCommon {
@@ -24,13 +20,9 @@ export interface ILibMessaging
     children?: never
 }
 
-/*====================== MessagesContainer ======================*/
-
 export interface ILibMessagesContainer
     extends LibComponentBase<HTMLDivElement> {}
 
-/*====================== MessagesList ======================*/
-
 interface ILibMessagesListBase
     extends LibComponentBase<HTMLDivElement>,
         ILibFlexbox {
@@ -57,8 +49,6 @@ export type ILibMessagesList =
     | MessagesListWithScrollButton
     | MessagesListWithoutScrollButton
 
-/*====================== MessageForm ======================*/
-
 type MessageFormButtonWithIcon = {
     icon?: LibIcon
     text?: never
@@ -88,8 +78,6 @@ export interface ILibMessageForm
     iconBaseUrl?: string
 }
 
-/*====================== Message ======================*/
-
 interface ILibMessageBase
     extends LibComponentBase<HTMLDivElement>,
         ILibFlexbox,

package/dist/lib/components/Meta/Meta.tsx

@@ -0,0 +1,69 @@
+import type { FC } from "react"
+import type { ILibMeta } from "./types"
+
+/**
+ * Meta component for setting document metadata such as title, description, favicon, keywords, author, and Open Graph tags.
+ *
+ * @component
+ * @param {Object} props - Meta props.
+ * @param {React.ReactNode} [props.children] - Additional meta or link tags to include.
+ * @param {string} [props.title] - Document title.
+ * @param {string} [props.favicon] - URL to the favicon.
+ * @param {string} [props.description] - Meta description for SEO.
+ * @param {string[]} [props.keywords] - Array of keywords for SEO.
+ * @param {string} [props.author] - Author of the document.
+ * @param {string} [props.type] - Open Graph type (e.g., "website", "article").
+ * @param {string} [props.cover] - Open Graph image URL.
+ * @param {string} [props.siteName] - Open Graph site name.
+ * @param {string} [props.language] - Document language (used for <html lang=""> and og:locale).
+ * @returns {JSX.Element} The rendered meta tags.
+ *
+ * @see https://documentation-components-react.vercel.app/components/meta
+ * @example
+ * <Meta
+ *   title="My Page"
+ *   description="This is my page"
+ *   keywords={["react", "meta", "seo"]}
+ *   author="Julien Sebag"
+ *   favicon="/favicon.ico"
+ *   type="website"
+ *   cover="/cover.png"
+ *   siteName="My Site"
+ *   language="en"
+ * />
+ */
+export const Meta: FC<ILibMeta> = ({
+	children,
+	title,
+	favicon,
+	description,
+	keywords,
+	author,
+	type,
+	cover,
+	siteName,
+	language,
+}) => {
+	return (
+		<>
+			<title>{title}</title>
+			<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
+			<meta
+				content="width=device-width, initial-scale=1"
+				name="viewport"
+			/>
+			{children && children}
+			{favicon && <link rel="icon" href={favicon} />}
+			{description && <meta name="description" content={description} />}
+			{keywords && (
+				<meta name="keywords" content={keywords?.join(", ")} />
+			)}
+			{author && <meta name="author" content={author} />}
+			<meta property="og:title" content={title} />
+			{type && <meta property="og:type" content={type} />}
+			{cover && <meta property="og:image" content={cover} />}
+			{siteName && <meta property="og:site_name" content={siteName} />}
+			{language && <meta property="og:locale" content={language} />}
+		</>
+	)
+}