@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,187 @@
+/*=============================================== 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;
+    }
+`
+
+// @ts-ignore
+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

@@ -0,0 +1,55 @@
+// @ts-nocheck
+/*=============================================== 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

@@ -0,0 +1,59 @@
+/*=============================================== 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

@@ -0,0 +1,67 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,24 @@
+/*=============================================== 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

@@ -0,0 +1,10 @@
+/*=============================================== 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

@@ -0,0 +1,30 @@
+/*=============================================== 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

@@ -0,0 +1,106 @@
+/*=============================================== 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

@@ -0,0 +1,144 @@
+/*=============================================== 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>
+        )
+    }
+)