@julseb-lib/react 0.0.50 → 0.0.52

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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