@julseb-lib/react 0.0.63 → 0.0.64

package/dist/lib/components/Link/Link.tsx

@@ -0,0 +1,68 @@
+/*=============================================== Link component ===============================================*/
+
+import { forwardRef, type RefObject } from "react"
+import { Link as RouterLink, NavLink } from "react-router-dom"
+import type { ILibLink } from "./types"
+
+/**
+ * @description Returns a Link component
+ * @link https://documentation-components-react.vercel.app/components/link
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, ILibLink>(
+    (
+        { "data-testid": testid, isNavLink, to, href, onClick, blank, end, ...rest },
+        ref
+    ) => {
+        if (onClick)
+            return (
+                <button
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLButtonElement>}
+                    onClick={onClick}
+                    {...rest}
+                />
+            )
+
+        if (href)
+            return (
+                <a
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    href={href}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        if (isNavLink && to)
+            return (
+                <NavLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    end={end}
+                    {...rest}
+                />
+            )
+
+        if (to)
+            return (
+                <RouterLink
+                    data-testid={testid}
+                    ref={ref as RefObject<HTMLAnchorElement>}
+                    to={to}
+                    target={blank ? "_blank" : undefined}
+                    rel={blank ? "noreferrer noopener" : undefined}
+                    {...rest}
+                />
+            )
+
+        return null
+    }
+)

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

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

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

@@ -0,0 +1,9 @@
+/*=============================================== Link types ===============================================*/
+
+import type { LibComponentBase, LibButtonLinkBlank } from "../../types"
+
+export type ILibLink = LibComponentBase<HTMLAnchorElement | HTMLButtonElement> &
+    LibButtonLinkBlank & {
+        isNavLink?: boolean
+        end?: boolean
+    }

package/dist/lib/components/Linkify/Linkify.tsx

@@ -0,0 +1,51 @@
+/*=============================================== Linkify component ===============================================*/
+
+import { forwardRef, Fragment } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { Text } from "../../"
+import type { ILibLinkify } from "./types"
+
+const URL_REGEX =
+    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
+
+/**
+ * @description Transform `http://<url>` to `<a href="http://<url>">http://<url></a>`
+ * @link https://documentation-components-react.vercel.app/components/linkify
+ * @extends ILibText
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
+ * @prop blank?: boolean
+ */
+export const Linkify = forwardRef<
+    HTMLHeadingElement &
+        HTMLParagraphElement &
+        HTMLQuoteElement &
+        HTMLUListElement &
+        HTMLOListElement &
+        HTMLDListElement,
+    ILibLinkify
+>(({ children, blank, className, ...rest }, ref) => {
+    const words: Array<string> = children ? children.split(" ") : []
+
+    return (
+        <Text ref={ref} className={className} {...rest}>
+            {words?.map((word: string) =>
+                word.match(URL_REGEX) ? (
+                    <Fragment key={uuid()}>
+                        <a
+                            href={word}
+                            target={blank ? "_blank" : undefined}
+                            rel={blank ? "noreferrer noopener" : undefined}
+                            className={className && "Linkify"}
+                        >
+                            {word}
+                        </a>{" "}
+                    </Fragment>
+                ) : (
+                    word + " "
+                )
+            )}
+        </Text>
+    )
+})

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

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

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

@@ -0,0 +1,8 @@
+/*=============================================== Linkify types ===============================================*/
+
+import type { ILibText } from "../Text/types"
+
+export type ILibLinkify = ILibText & {
+    blank?: boolean
+    children?: string
+}

package/dist/lib/components/ListGroup/ListGroup.tsx

@@ -0,0 +1,113 @@
+/*=============================================== ListGroup component ===============================================*/
+
+import { forwardRef, useRef } from "react"
+import classNames from "classnames"
+import { uuid } from "@julseb-lib/utils"
+import { useMergeRefs } from "../../hooks"
+import { ListGroupTitle } from "./ListGroupTitle"
+import { ListGroupItem } from "./ListGroupItem"
+import { StyledListGroup } from "./styles"
+import type { ILibListGroup } from "./types"
+
+/**
+ * @description Returns a ListGroup component
+ * @link https://documentation-components-react.vercel.app/components/list-group
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop items: Array<LibListGroupItem> => only if children is not defined
+ * @prop children?: ReactChildren => only if items is not defined
+ * @prop title?: string | { text: string; backgroundColor?: Any color from the library; contentColor?: Any color from the library; isFixed?: boolean; id?: string; className?: string; ref?: ForwardedRef<HTMLDivElement>; shadowOnScroll?: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
+ * @prop noSeparator?: boolean
+ * @prop showNumbers?: boolean
+ * @prop maxHeight?: number | string
+ *
+ * @type LibListGroupItem
+ * @prop data-testid?: string
+ * @prop className?: string
+ * @prop id?: string
+ * @prop ref?: ForwardedRef<HTMLLIElement>
+ * @prop text: string
+ * @prop subtext?: string
+ * @prop badge?: boolean | { icon?: string | JSX.Element => only if `number` is not defined; number?: number => only if `icon` is not defined; backgroundColor?: LibAllColors; contentColor?: LibAllColors } => only if `date` is not defined
+ * @prop date?: string | Date => only if `badge` is not defined
+ * @prop onClick?: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to?: string => only if onClick and href are not defined
+ * @prop href?: string => only if onClick and to are not defined
+ * @prop blank?: boolean => only if to or href are defined
+ */
+export const ListGroup = forwardRef<HTMLDivElement, ILibListGroup>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            as,
+            children,
+            showNumbers,
+            items,
+            maxHeight,
+            title,
+            noSeparator,
+            ...rest
+        },
+        ref
+    ) => {
+        const listRef = useRef<HTMLDivElement>(null)
+
+        return (
+            <StyledListGroup
+                data-testid={testid}
+                ref={useMergeRefs([ref, listRef])}
+                as={as}
+                className={className}
+                $maxHeight={maxHeight}
+                $hasTitleFixed={
+                    !!(title && typeof title === "object" && title.isFixed)
+                }
+                {...rest}
+            >
+                {title && (
+                    <ListGroupTitle
+                        data-testid={testid && `${testid}.ListGroupTitle`}
+                        className={className && "ListGroupTitle"}
+                        backgroundColor={
+                            typeof title === "object"
+                                ? title.backgroundColor
+                                : "primary"
+                        }
+                        contentColor={
+                            typeof title === "object"
+                                ? title.contentColor
+                                : "background"
+                        }
+                        noSeparator={noSeparator}
+                        isFixed={typeof title === "object" && title.isFixed}
+                        listRef={listRef}
+                        {...(title as any)}
+                    >
+                        {typeof title === "object" ? title.text : title}
+                    </ListGroupTitle>
+                )}
+
+                {items?.map((item, i) => (
+                    <ListGroupItem
+                        data-testid={item["data-testid"] || testid}
+                        className={classNames(item.className, {
+                            ListGroupItem: !!className,
+                        })}
+                        id={item.id}
+                        ref={item.ref}
+                        item={item}
+                        number={showNumbers ? i + 1 : undefined}
+                        isInArray
+                        noSeparator={noSeparator}
+                        {...(item as any)}
+                        key={uuid()}
+                    />
+                )) ?? children}
+            </StyledListGroup>
+        )
+    }
+)

package/dist/lib/components/ListGroup/ListGroupItem.tsx

@@ -0,0 +1,164 @@
+/*=============================================== ListGroupItem component ===============================================*/
+
+import { forwardRef } from "react"
+import { Link } from "react-router-dom"
+import { Text, Badge } from "../../"
+import type { ILibBadge } from "../Badge/types"
+import {
+    StyledListItem,
+    LeftContainer,
+    RightContainer,
+    ListItemContent,
+} from "./styles"
+import type { ILibListGroupItem } from "./types"
+
+/**
+ * @description Returns a ListGroupItem component
+ * @link https://documentation-components-react.vercel.app/components/list-group
+ * @extends HTMLDivElement & LibButtonLinkBlank
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop text: string
+ * @prop body?: string
+ * @prop isInArray?: boolean
+ * @prop noSeparator?: boolean
+ * @prop number?: number
+ * @prop badge?: boolean | { icon?: string | JSX.Element => only if `number` is not defined; number?: number => only if `icon` is not defined; backgroundColor?: Any color from the library; contentColor?: Any color from the library } => only if `date` is not defined
+ * @prop date?: string | Date => only if badge is not defined
+ * @prop onClick?: void => only if to or href are not defined
+ * @prop disabled?: boolean => only if onClick is defined
+ * @prop to?: string => only if onClick and href are not defined
+ * @prop href?: string => only if onClick and to are not defined
+ * @prop blank?: boolean => only if to or href are defined
+ */
+export const ListGroupItem = forwardRef<HTMLDivElement, ILibListGroupItem>(
+    (
+        {
+            "data-testid": testid,
+            className,
+            as,
+            number,
+            isInArray,
+            noSeparator,
+            text,
+            body,
+            badge,
+            date,
+            onClick,
+            to,
+            href,
+            disabled,
+            blank,
+            ...rest
+        },
+        ref
+    ) => {
+        const badgeProps: ILibBadge = {
+            "data-testid": testid && `${testid}.Content.RightContainer.Badge`,
+            className: className && "Badge",
+            backgroundColor:
+                typeof badge === "object" ? badge?.backgroundColor : undefined,
+            contentColor:
+                typeof badge === "object" ? badge?.contentColor : undefined,
+        }
+
+        const asElement = as
+            ? as
+            : to
+            ? Link
+            : href
+            ? "a"
+            : onClick
+            ? "button"
+            : "div"
+
+        return (
+            <StyledListItem
+                data-testid={testid && `${testid}.ListGroupItem`}
+                ref={ref}
+                className={className}
+                as={asElement}
+                onClick={onClick}
+                to={to}
+                href={href}
+                disabled={disabled}
+                target={blank ? "_blank" : undefined}
+                rel={blank ? "noreferrer noopener" : undefined}
+                $isHoverable={!!(to || href || onClick)}
+                $noSeparator={noSeparator}
+                {...rest}
+            >
+                <ListItemContent
+                    data-testid={testid && `${testid}.Content`}
+                    className={className && "Content"}
+                >
+                    {number && (
+                        <LeftContainer
+                            data-testid={
+                                testid && `${testid}.Content.LeftContainer`
+                            }
+                            className={className && "LeftContainer"}
+                        >
+                            {number}.
+                        </LeftContainer>
+                    )}
+
+                    <Text
+                        data-testid={testid && `${testid}.Content.Text`}
+                        className={className && "Text"}
+                        tag="h6"
+                        as="p"
+                    >
+                        {text}
+                    </Text>
+
+                    {(badge || date) && (
+                        <RightContainer
+                            data-testid={
+                                testid && `${testid}.Content.RightContainer`
+                            }
+                            className={className && "RightContainer"}
+                        >
+                            {badge &&
+                                (typeof badge === "object" ? (
+                                    <Badge
+                                        icon={badge.icon}
+                                        iconSize={badge.iconSize}
+                                        number={badge.number}
+                                        {...(badgeProps as any)}
+                                    />
+                                ) : (
+                                    <Badge {...badgeProps} />
+                                ))}
+
+                            {date && (
+                                <Text
+                                    data-testid={
+                                        testid &&
+                                        `${testid}.Content.RightContainer.Date`
+                                    }
+                                    className={className && "Date"}
+                                    tag="small"
+                                    color="gray"
+                                >
+                                    {date.toString()}
+                                </Text>
+                            )}
+                        </RightContainer>
+                    )}
+                </ListItemContent>
+
+                {body && (
+                    <Text
+                        data-testid={testid && `${testid}.Body`}
+                        className={className && "Body"}
+                        tag="small"
+                    >
+                        {body}
+                    </Text>
+                )}
+            </StyledListItem>
+        )
+    }
+)

package/dist/lib/components/ListGroup/ListGroupTitle.tsx

@@ -0,0 +1,56 @@
+/*=============================================== ListGroupTitle component ===============================================*/
+
+import { forwardRef, useState, useEffect } from "react"
+import classNames from "classnames"
+import { StyledListGroupTitle } from "./styles"
+import type { ILibListGroupTitle } from "./types"
+
+export const ListGroupTitle = forwardRef<HTMLDivElement, ILibListGroupTitle>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            children,
+            className,
+            backgroundColor = "primary",
+            contentColor = "background",
+            noSeparator,
+            isFixed,
+            shadowOnScroll,
+            listRef,
+            ...rest
+        },
+        ref
+    ) => {
+        const [isScrolled, setIsScrolled] = useState(false)
+
+        useEffect(() => {
+            listRef?.current?.addEventListener("scroll", () => {
+                const scroll = listRef.current?.scrollTop
+
+                if (scroll && scroll >= 24) {
+                    setIsScrolled(true)
+                } else {
+                    setIsScrolled(false)
+                }
+            })
+        }, [])
+
+        return (
+            <StyledListGroupTitle
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={classNames(className, { Scrolled: isScrolled })}
+                $backgroundColor={backgroundColor}
+                $contentColor={contentColor}
+                $noSeparator={noSeparator}
+                $isFixed={isFixed}
+                $shadow={shadowOnScroll}
+                {...rest}
+            >
+                {children}
+            </StyledListGroupTitle>
+        )
+    }
+)

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

@@ -0,0 +1,5 @@
+/*=============================================== ListGroup exports ===============================================*/
+
+export * from "./ListGroup"
+export * from "./ListGroupItem"
+export * from "./ListGroupTitle"

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

@@ -0,0 +1,179 @@
+/*=============================================== ListGroup styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
+import {
+    MEDIA,
+    FONT_SIZES,
+    FONT_WEIGHTS,
+    LINE_HEIGHTS,
+    Mixins,
+    RADIUSES,
+    SPACERS,
+    TRANSITIONS,
+    setDefaultTheme,
+} from "../../"
+import type { LibAllColors, LibShadows } from "../../types"
+
+const StyledListGroup = styled.div<{
+    $maxHeight?: number | string
+    $hasTitleFixed: boolean
+}>`
+    border: 1px solid ${({ theme }) => theme.GRAY_200};
+    border-radius: ${RADIUSES.M};
+    max-height: ${({ $maxHeight }) => $maxHeight && stringifyPx($maxHeight)};
+    overflow: hidden;
+    overflow-y: scroll;
+    position: relative;
+    ${Mixins.Flexbox({
+        $flexDirection: "column",
+        $alignItems: "stretch",
+    })}
+
+    ${({ $hasTitleFixed }) =>
+        $hasTitleFixed &&
+        css`
+            /* padding-top: 49px; */
+        `}
+`
+
+const CommonItemAndTitle = ({
+    $noSeparator,
+}: {
+    $noSeparator: boolean | undefined
+}) => css`
+    padding: ${SPACERS.S};
+    border: none;
+    width: 100%;
+    text-align: left;
+
+    ${!$noSeparator &&
+    css`
+        &:not(:last-child) {
+            border-bottom: 1px solid ${({ theme }) => theme.GRAY_200};
+        }
+    `}
+`
+
+const StyledListItem = styled.div<{
+    $isHoverable?: boolean
+    $noSeparator: boolean | undefined
+}>`
+    text-decoration: none;
+    color: ${({ theme }) => theme.FONT};
+    background-color: transparent;
+    ${Mixins.Flexbox({
+        $flexDirection: "column",
+    })}
+    ${CommonItemAndTitle}
+
+    ${({ $isHoverable, theme }) =>
+        $isHoverable &&
+        css`
+            transition: ${TRANSITIONS.SHORT};
+            color: ${Mixins.ColorsHoverDefault("primary", theme)};
+
+            @media ${MEDIA.HOVER} {
+                &:not(:disabled):hover {
+                    background-color: ${Mixins.ColorsHoverHover(
+                        "primary",
+                        theme
+                    )};
+                    color: ${theme.BACKGROUND};
+                }
+
+                &:not(:disabled):active {
+                    background-color: ${Mixins.ColorsHoverActive(
+                        "primary",
+                        theme
+                    )};
+                }
+            }
+
+            &:disabled {
+                background-color: ${theme.GRAY_100};
+                color: ${theme.GRAY_500};
+            }
+        `}
+
+    & > div {
+        & > p {
+            flex-grow: 1;
+        }
+
+        & > span:first-child {
+            font-weight: ${FONT_WEIGHTS.REGULAR};
+        }
+    }
+`
+
+const ListItemContent = styled.div`
+    width: 100%;
+    ${Mixins.Flexbox({
+        $alignItems: "flex-start",
+        $justifyContent: "stretch",
+        $gap: "xs",
+    })}
+`
+
+const CommonContainer = css`
+    height: calc(${FONT_SIZES.H6} * ${LINE_HEIGHTS.BODY});
+    ${Mixins.Flexbox({
+        $inline: true,
+        $alignItems: "center",
+    })}
+`
+
+const LeftContainer = styled.span`
+    ${CommonContainer}
+`
+
+const RightContainer = styled.span`
+    ${CommonContainer}
+`
+
+const StyledListGroupTitle = styled.div<{
+    $backgroundColor: LibAllColors
+    $contentColor: LibAllColors
+    $noSeparator: boolean | undefined
+    $isFixed?: boolean
+    $shadow?: LibShadows
+}>`
+    ${CommonItemAndTitle}
+    font-weight: ${FONT_WEIGHTS.BLACK};
+    background-color: ${({ theme, $backgroundColor }) =>
+        Mixins.AllColors($backgroundColor, theme)};
+    color: ${({ theme, $contentColor }) =>
+        Mixins.AllColors($contentColor, theme)};
+
+    ${({ $isFixed }) =>
+        $isFixed &&
+        css`
+            position: sticky;
+            top: 0;
+            left: 0;
+        `}
+
+    &.Scrolled {
+        box-shadow: ${({ $shadow }) => Mixins.Shadow($shadow)};
+        transition: ${TRANSITIONS.SHORT};
+    }
+`
+
+setDefaultTheme([
+    StyledListGroup,
+    StyledListItem,
+    ListItemContent,
+    LeftContainer,
+    RightContainer,
+    StyledListGroupTitle,
+])
+
+export {
+    StyledListGroup,
+    StyledListItem,
+    ListItemContent,
+    LeftContainer,
+    RightContainer,
+    StyledListGroupTitle,
+}