@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,29 @@
+/*=============================================== MessagesContainer ===============================================*/
+
+import { forwardRef } 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
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const MessagesContainer = forwardRef<
+    HTMLDivElement,
+    ILibMessagesContainer
+>(({ "data-testid": testid, as, children, ...rest }, ref) => {
+    return (
+        <StyledMessagesContainer
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            {...rest}
+        >
+            {children}
+        </StyledMessagesContainer>
+    )
+})

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

@@ -0,0 +1,136 @@
+/*=============================================== MessagesList ===============================================*/
+
+import { forwardRef, useRef, useState, useEffect } 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"
+
+/**
+ * @description Returns a MessagesList 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 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
+ */
+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)
+
+        const containerRef = useRef<HTMLDivElement>(null)
+        const bottomRef = useRef<HTMLDivElement>(null)
+
+        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>
+        )
+    }
+)

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

@@ -0,0 +1,123 @@
+/*=============================================== Messaging component ===============================================*/
+
+import { forwardRef, useState } from "react"
+import { getToday, uuid, stringifyPx } from "@julseb-lib/utils"
+import { Hr } from "../../"
+import { appendStyles } from "../../lib-utils"
+import { MessagesContainer } from "./MessagesContainer"
+import { MessagesList } from "./MessagesList"
+import { MessageForm } from "./MessageForm"
+import { Message } from "./Message"
+import type { ILibMessaging } from "./types"
+
+/**
+ * @description Returns a Messaging component
+ * @link https://documentation-components-react.vercel.app/components/messaging
+ * @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
+ *
+ * @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
+ */
+export const Messaging = forwardRef<HTMLDivElement, ILibMessaging>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            items,
+            textDateTime,
+            emptyText,
+            handleSubmit,
+            input,
+            button,
+            ...rest
+        },
+        ref
+    ) => {
+        const [inputHeight, setInputHeight] = useState(32)
+
+        appendStyles(`
+            #message-container-scroll-button, 
+            #messaging-form,
+            #messaging-form-input {
+                --input-height: ${stringifyPx(
+                    inputHeight >= 72 ? 72 : inputHeight
+                )};
+            }
+        `)
+
+        return (
+            <MessagesContainer
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                {...rest}
+            >
+                <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>
+
+                <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>
+        )
+    }
+)

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

@@ -0,0 +1,7 @@
+/*=============================================== Messaging exports ===============================================*/
+
+export * from "./Messaging"
+export * from "./MessagesContainer"
+export * from "./MessagesList"
+export * from "./MessageForm"
+export * from "./Message"

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

@@ -0,0 +1,177 @@
+/*=============================================== Messaging styles ===============================================*/
+
+import styled from "styled-components"
+import {
+    setDefaultTheme,
+    Mixins,
+    FONT_SIZES,
+    FONT_FAMILIES,
+    LINE_HEIGHTS,
+    SPACERS,
+    RADIUSES,
+    ButtonIcon,
+    TRANSITIONS,
+    MEDIA,
+    Flexbox,
+} from "../../"
+
+const VAR_INPUT_HEIGHT = "var(--input-height, 24px)"
+
+const StyledMessagesContainer = styled.div`
+    border: 1px solid ${({ theme }) => theme.GRAY_200};
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    position: relative;
+    border-radius: ${RADIUSES.L};
+    min-height: 400px;
+    max-height: 60vh;
+    padding: ${SPACERS.S};
+    ${Mixins.HideScrollbar}
+    ${Mixins.Flexbox({
+        $flexDirection: "column",
+        $gap: "s",
+    })}
+`
+
+const StyledMessagesList = styled(Flexbox)`
+    flex-grow: 1;
+    overflow-y: scroll;
+`
+
+const MessageListBottom = styled.div`
+    width: 100%;
+    height: 0;
+`
+
+const ScrollButton = styled(ButtonIcon)`
+    position: absolute;
+    bottom: calc(
+        ${VAR_INPUT_HEIGHT} + ${SPACERS.XXS} + ${SPACERS.S} +
+            (${SPACERS.XS} * 2)
+    );
+    right: ${SPACERS.XXS};
+    opacity: 0;
+    visibility: hidden;
+
+    &.Visible {
+        opacity: 1;
+        visibility: visible;
+    }
+`
+
+const StyledMessageForm = styled.form`
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $gap: "xs",
+    })}
+    height: ${VAR_INPUT_HEIGHT};
+`
+
+const StyledMessageInput = styled.textarea`
+    flex-grow: 1;
+    font-size: ${FONT_SIZES.BODY};
+    font-family: ${FONT_FAMILIES.BODY};
+    line-height: ${LINE_HEIGHTS.BODY};
+    resize: none;
+    border: none;
+    color: ${({ theme }) => theme.FONT};
+    background-color: transparent;
+    height: ${VAR_INPUT_HEIGHT};
+    max-height: calc(24px * 3);
+    padding: ${SPACERS.XXS} ${SPACERS.XS};
+    outline: none;
+    border-radius: ${RADIUSES.S};
+    justify-self: flex-end;
+
+    &::placeholder {
+        color: ${({ theme }) => theme.GRAY_200};
+    }
+
+    &:focus {
+        background-color: ${({ theme }) => theme.PRIMARY_50};
+    }
+`
+
+const StyledMessage = styled.p`
+    padding: ${SPACERS.XS};
+    border-radius: ${RADIUSES.S};
+    width: fit-content;
+    max-width: 70%;
+
+    a {
+        transition: ${TRANSITIONS.SHORT};
+        text-decoration: none;
+    }
+
+    &.Sent {
+        background-color: ${({ theme }) => theme.PRIMARY_500};
+        color: ${({ theme }) => theme.BACKGROUND};
+
+        & > * {
+            color: ${({ theme }) => theme.BACKGROUND};
+        }
+
+        a {
+            color: ${({ theme }) =>
+                Mixins.ColorsHoverDefault("background", theme)};
+
+            @media ${MEDIA.HOVER} {
+                &:hover {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverHover("background", theme)};
+                }
+
+                &:active {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverActive("background", theme)};
+                }
+            }
+        }
+    }
+
+    &.Received {
+        background-color: ${({ theme }) => theme.GRAY_100};
+        color: ${({ theme }) => theme.FONT};
+
+        & > * {
+            color: ${({ theme }) => theme.FONT};
+        }
+
+        a {
+            color: ${({ theme }) =>
+                Mixins.ColorsHoverDefault("primary", theme)};
+
+            @media ${MEDIA.HOVER} {
+                &:hover {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverHover("primary", theme)};
+                }
+
+                &:active {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverActive("primary", theme)};
+                }
+            }
+        }
+    }
+`
+
+setDefaultTheme([
+    StyledMessagesContainer,
+    StyledMessagesList,
+    MessageListBottom,
+    ScrollButton,
+    StyledMessageForm,
+    StyledMessageInput,
+    StyledMessage,
+])
+
+export {
+    StyledMessagesContainer,
+    StyledMessagesList,
+    MessageListBottom,
+    ScrollButton,
+    StyledMessageForm,
+    StyledMessageInput,
+    StyledMessage,
+}

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

@@ -0,0 +1,131 @@
+/*=============================================== Messaging types ===============================================*/
+
+import type { ReactNode } from "react"
+import type {
+    LibComponentBase,
+    LibMessage,
+    DispatchState,
+    LibIcon,
+    ReactChildren,
+    LibMessagingDateFormat,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+/*====================== Messaging ======================*/
+
+export interface ILibMessaging
+    extends LibComponentBase<HTMLDivElement>,
+        MessageFormCommon {
+    items: Array<LibMessage>
+    textDateTime?: string
+    emptyText?: string
+    iconScroll?: LibIcon
+    iconScrollSize?: number
+    children?: never
+}
+
+/*====================== MessagesContainer ======================*/
+
+export interface ILibMessagesContainer
+    extends LibComponentBase<HTMLDivElement> {}
+
+/*====================== MessagesList ======================*/
+
+interface ILibMessagesListBase
+    extends LibComponentBase<HTMLDivElement>,
+        ILibFlexbox {
+    children?: Array<ReactNode>
+    emptyText?: string
+}
+
+interface MessagesListWithScrollButton extends ILibMessagesListBase {
+    hideScrollButton?: false | undefined
+    scrollButton?: {
+        icon?: LibIcon
+        iconSize?: number
+        positionFromBottom?: number
+        iconBaseUrl?: string
+    }
+}
+
+interface MessagesListWithoutScrollButton extends ILibMessagesListBase {
+    hideScrollButton: true
+    scrollButton?: never
+}
+
+export type ILibMessagesList =
+    | MessagesListWithScrollButton
+    | MessagesListWithoutScrollButton
+
+/*====================== MessageForm ======================*/
+
+type MessageFormButtonWithIcon = {
+    icon?: LibIcon
+    text?: never
+}
+
+type MessageFormButtonWithText = {
+    icon?: never
+    text?: string
+}
+
+interface MessageFormCommon {
+    handleSubmit: () => void
+    input: {
+        message: string
+        setMessage: DispatchState<string>
+        placeholder?: string
+        autoFocus?: boolean
+    }
+    button?: MessageFormButtonWithIcon | MessageFormButtonWithText
+}
+
+export interface ILibMessageForm
+    extends Exclude<LibComponentBase<HTMLFormElement>, "as">,
+        MessageFormCommon {
+    inputHeight: number
+    setInputHeight: DispatchState<number>
+    iconBaseUrl?: string
+}
+
+/*====================== Message ======================*/
+
+interface ILibMessageBase
+    extends LibComponentBase<HTMLDivElement>,
+        ILibFlexbox,
+        Omit<LibMessage, "text" | "ref"> {
+    textDateTime?: string
+}
+
+interface MessageWithText extends ILibMessageBase {
+    text: string
+    children?: never
+}
+
+interface MessageWithChildren extends ILibMessageBase {
+    text?: never
+    children?: ReactChildren
+}
+
+type ILibMessageContent = MessageWithText | MessageWithChildren
+
+type MessageWithDate = ILibMessageContent & {
+    date?: Date | string
+    textToday?: string
+    textYesterday?: string
+    dateFormat?: LibMessagingDateFormat
+}
+
+type MessageWithoutDate = ILibMessageContent & {
+    date?: undefined
+    textToday?: never
+    textYesterday?: never
+    dateFormat?: never
+}
+
+/**
+ * @extends HTMLDivElement & ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ */
+export type ILibMessage = MessageWithDate | MessageWithoutDate