@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Link/__preview__/Link.preview.tsx

@@ -1,55 +0,0 @@
-/*=============================================== LinkPreview ===============================================*/
-
-import { Link, Text } from "../../../"
-import type { ILibLink } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const linkPreview: ComponentPreview<ILibLink> = {
-    name: "Link",
-    component: Link,
-    category: "components",
-    import: "Link",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibLink",
-    additionalTypeImports: null,
-    extends: ["HTMLAnchorElement", "HTMLButtonElement"],
-    previews: [
-        {
-            previewTitle: "As button",
-            demo: (
-                <Text>
-                    <Link onClick={() => alert("Clicked")}>Click me</Link>
-                </Text>
-            ),
-        },
-        {
-            previewTitle: "As router link",
-            demo: (
-                <Text>
-                    <Link to="/">Link to homepage</Link>
-                </Text>
-            ),
-        },
-        {
-            previewTitle: "As router NavLink",
-            demo: (
-                <Text>
-                    <Link to="/link" isNavLink>
-                        Inspect for active class
-                    </Link>
-                </Text>
-            ),
-        },
-        {
-            previewTitle: "As anchor link",
-            demo: (
-                <Text>
-                    <Link href="https://www.google.com" blank>
-                        Link to external page
-                    </Link>
-                </Text>
-            ),
-        },
-    ],
-}

package/src/lib/components/Link/__tests__/Link.cy.tsx

@@ -1,16 +0,0 @@
-/*=============================================== Link tests ===============================================*/
-
-import { Link } from "../../.."
-
-describe("<Link />", () => {
-    it("renders <Link /> component", () => {
-        cy.mount(
-            <Link data-testid="testid" className="className">
-                Hello
-            </Link>
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-
-        // ? check all default props
-    })
-})

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

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

package/src/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/src/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/src/lib/components/Linkify/__preview__/Linkify.preview.tsx

@@ -1,28 +0,0 @@
-/*=============================================== LinkifyPreview ===============================================*/
-
-import { Linkify } from "../../../"
-import type { ILibLinkify } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const linkifyPreview: ComponentPreview<ILibLinkify> = {
-    name: "Linkify",
-    component: Linkify,
-    category: "components",
-    import: "Linkify",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibLinkify",
-    additionalTypeImports: null,
-    extends: ["ILibText"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                children: "Hello world https://julien-sebag.com/ foo baz",
-                blank: true,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

package/src/lib/components/Linkify/__tests__/Linkify.cy.tsx

@@ -1,28 +0,0 @@
-/*=============================================== Linkify tests ===============================================*/
-
-import { Linkify } from "../../../"
-
-describe("<Linkify />", () => {
-    it("renders <Linkify /> component", () => {
-        cy.mount(
-            <Linkify data-testid="testid" className="className">
-                Hello, visit https://julien-sebag.com/
-            </Linkify>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("contain.html", "a")
-            .get("a")
-            .should("have.class", "Linkify")
-    })
-
-    it("renders with a target blank", () => {
-        cy.mount(
-            <Linkify data-testid="testid" className="className" blank>
-                Hello, visit https://julien-sebag.com/
-            </Linkify>
-        )
-        cy.dataTest().get("a").should("have.attr", "target", "_blank")
-    })
-})

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

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

package/src/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/src/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/src/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/src/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/src/lib/components/ListGroup/__preview__/ListGroup.preview.tsx

@@ -1,102 +0,0 @@
-/*=============================================== ListGroupPreview ===============================================*/
-
-import { convertDateShort } from "@julseb-lib/utils"
-import { ListGroup } from "../../../"
-import type { LibListGroupItem } from "../../../types"
-import type { ILibListGroup } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibListGroupItem> = [
-    {
-        text: "Basic item",
-        className: "hello",
-        "data-testid": "world",
-    },
-    {
-        text: "With text",
-        body: "And body",
-    },
-    {
-        text: "With badge and number",
-        badge: {
-            number: 350,
-            backgroundColor: "danger",
-            contentColor: "white",
-        },
-    },
-    {
-        text: "With badge and icon",
-        badge: {
-            icon: "star",
-            backgroundColor: "success",
-            contentColor: "white",
-        },
-    },
-    {
-        text: "With color badge",
-        badge: { backgroundColor: "warning", contentColor: "white" },
-    },
-    {
-        text: "Router link",
-        date: convertDateShort("2022-09-07"),
-        body: "Body",
-        to: "/",
-        blank: true,
-    },
-    {
-        text: "Anchor link",
-        date: convertDateShort("2022-09-07"),
-        body: "Body",
-        href: "#",
-    },
-    {
-        text: "Button",
-        date: convertDateShort("2022-09-07"),
-        body: "Body",
-        onClick: () => alert("Clicked!"),
-    },
-    {
-        text: "Button disabled",
-        date: convertDateShort("2022-09-07"),
-        onClick: () => alert("Clicked!"),
-        disabled: true,
-    },
-]
-
-export const listGroupPreview: ComponentPreview<ILibListGroup> = {
-    name: "ListGroup",
-    component: ListGroup,
-    category: "components",
-    import: "ListGroup",
-    additionalImports: null,
-    optionalImports: ["ListGroupItem"],
-    propsImport: "ILibListGroup",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Default",
-            props: {
-                items,
-                "data-testid": "testid",
-                className: "className",
-                title: "Hello World",
-            },
-        },
-        {
-            previewTitle: "With maxHeight",
-            props: {
-                items,
-                maxHeight: 200,
-                title: {
-                    text: "Hello World",
-                    isFixed: true,
-                    shadowOnScroll: "xl",
-                    backgroundColor: "black",
-                    contentColor: "white",
-                },
-                noSeparator: true,
-            },
-        },
-    ],
-}