@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Text/templates/H5.tsx

@@ -1,36 +0,0 @@
-/*=============================================== H5 ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledH5 } from "../styles"
-import type { ILibText } from "../types"
-
-export const H5 = forwardRef<HTMLHeadingElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            display,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledH5
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                $display={display}
-                {...rest}
-            >
-                {children}
-            </StyledH5>
-        )
-    }
-)

package/src/lib/components/Text/templates/H6.tsx

@@ -1,34 +0,0 @@
-/*=============================================== H6 ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledH6 } from "../styles"
-import type { ILibText } from "../types"
-
-export const H6 = forwardRef<HTMLHeadingElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledH6
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledH6>
-        )
-    }
-)

package/src/lib/components/Text/templates/Ol.tsx

@@ -1,34 +0,0 @@
-/*=============================================== Ol ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledOl } from "../styles"
-import type { ILibText } from "../types"
-
-export const Ol = forwardRef<HTMLOListElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledOl
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledOl>
-        )
-    }
-)

package/src/lib/components/Text/templates/P.tsx

@@ -1,34 +0,0 @@
-/*=============================================== P ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledP } from "../styles"
-import type { ILibText } from "../types"
-
-export const P = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledP
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledP>
-        )
-    }
-)

package/src/lib/components/Text/templates/Small.tsx

@@ -1,34 +0,0 @@
-/*=============================================== Small ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledSmall } from "../styles"
-import type { ILibText } from "../types"
-
-export const Small = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledSmall
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledSmall>
-        )
-    }
-)

package/src/lib/components/Text/templates/Strong.tsx

@@ -1,34 +0,0 @@
-/*=============================================== Strong ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledStrong } from "../styles"
-import type { ILibText } from "../types"
-
-export const Strong = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledStrong
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledStrong>
-        )
-    }
-)

package/src/lib/components/Text/templates/Ul.tsx

@@ -1,34 +0,0 @@
-/*=============================================== Ul ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledUl } from "../styles"
-import type { ILibText } from "../types"
-
-export const Ul = forwardRef<HTMLUListElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledUl
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledUl>
-        )
-    }
-)

package/src/lib/components/Text/types.ts

@@ -1,28 +0,0 @@
-/*=============================================== Text types ===============================================*/
-
-import type {
-    LibAllColors,
-    LibColorsHover,
-    LibComponentBase,
-    CssTextAlign,
-    LibTextDisplayTag,
-    LibTextTag,
-} from "../../types"
-
-interface ILibTextBase extends LibComponentBase<HTMLElement> {
-    color?: LibAllColors
-    linkColor?: LibColorsHover
-    textAlign?: CssTextAlign
-}
-
-interface TextDisplay extends ILibTextBase {
-    tag?: LibTextDisplayTag
-    display?: boolean
-}
-
-interface TextOther extends ILibTextBase {
-    tag?: LibTextTag
-    display?: never
-}
-
-export type ILibText = TextDisplay | TextOther

package/src/lib/components/TextIcon/TextIcon.tsx

@@ -1,104 +0,0 @@
-/*=============================================== TextIcon component ===============================================*/
-
-import { forwardRef } from "react"
-import { Text } from "../../"
-import { LibIcon } from "../LibIcon"
-import { getIconHeight } from "./utils"
-import { StyledTextIcon, IconContainer } from "./styles"
-import type { ILibTextIcon } from "./types"
-
-/**
- * @description Returns a Text with Icon component
- * @link https://documentation-components-react.vercel.app/components/text-icon
- * @extends ILibText
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
- * @prop icon: string | JSX.Element
- * @prop iconColor?: Any color from the library
- * @prop iconSize?: number
- * @prop textAs?: ElementType
- * @prop tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "blockquote"
- * @prop iconBaseUrl?: string
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop containerStyle?: CSSProperties
- * @prop color?: Any color from the library
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop textAlign?: CssTextAlign
- * @prop display?: boolean => only if tag is set to h1 to h5
- */
-export const TextIcon = forwardRef<
-    HTMLHeadingElement &
-        HTMLParagraphElement &
-        HTMLQuoteElement &
-        HTMLUListElement &
-        HTMLOListElement &
-        HTMLDListElement,
-    ILibTextIcon
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            textAs,
-            className,
-            children,
-            icon,
-            iconColor,
-            iconSize,
-            iconBaseUrl,
-            tag = "p",
-            display,
-            gap,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
-            "data-testid": testid && `${testid}.Text`,
-            as: textAs,
-            className: "Text",
-            children,
-            ...rest,
-        }
-
-        return (
-            <StyledTextIcon
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                style={containerStyle}
-                $gap={gap}
-            >
-                <IconContainer
-                    data-testid={testid && `${testid}.IconContainer`}
-                    className={className && "IconContainer"}
-                    $tag={tag}
-                    $display={display}
-                    $iconSize={iconSize}
-                >
-                    <LibIcon
-                        data-testid={testid && `${testid}.IconContainer.Icon`}
-                        className={className && "Icon"}
-                        icon={icon}
-                        size={iconSize || getIconHeight(tag, display)}
-                        color={iconColor}
-                        baseUrl={iconBaseUrl}
-                    />
-                </IconContainer>
-
-                {tag === "h1" ||
-                tag === "h2" ||
-                tag === "h3" ||
-                tag === "h4" ||
-                tag === "h5" ? (
-                    <Text display={display} tag={tag} {...textProps} />
-                ) : (
-                    <Text tag={tag} {...textProps} />
-                )}
-            </StyledTextIcon>
-        )
-    }
-)

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

@@ -1,29 +0,0 @@
-/*=============================================== TextIconPreview ===============================================*/
-
-import { TextIcon } from "../../../"
-import type { ILibTextIcon } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const textIconPreview: ComponentPreview<ILibTextIcon> = {
-    name: "TextIcon",
-    component: TextIcon,
-    category: "components",
-    import: "TextIcon",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibTextIcon",
-    additionalTypeImports: null,
-    extends: ["ILibText"],
-    previews: [
-        {
-            props: {
-                icon: "arrow-right",
-                tag: "h3",
-                gap: "l",
-                children: "Hello",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

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

@@ -1,131 +0,0 @@
-/*=============================================== TextIcon tests ===============================================*/
-
-import { stringifyPx } from "@julseb-lib/utils"
-import { TextIcon, LIB_TOKENS } from "../../.."
-import { SITE_DATA } from "../../../../data"
-
-describe("<TextIcon />", () => {
-    const testIdIconContainer = (testid: string) =>
-        cy.dataTest(`${testid}.IconContainer`)
-    const testIdIcon = (testid: string) =>
-        cy.dataTest(`${testid}.IconContainer.Icon`)
-    const testIdText = (testid: string) => cy.dataTest(`${testid}.Text`)
-
-    it("renders <TextIcon /> component", () => {
-        cy.mount(
-            <TextIcon
-                data-testid="testid"
-                className="className"
-                icon="close-circle"
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            >
-                Hello
-            </TextIcon>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("contain.html", "svg")
-    })
-
-    it("should have a default font and icon sizes of 16px", () => {
-        const height = Number(
-            LIB_TOKENS["font-sizes"].body.px.replace("px", "")
-        )
-
-        cy.mount(
-            <TextIcon
-                data-testid="testid"
-                icon="heart-full"
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            >
-                Hello
-            </TextIcon>
-        )
-
-        testIdText("testid").should(
-            "have.css",
-            "font-size",
-            stringifyPx(height)
-        )
-        testIdIconContainer("testid").should(
-            "have.css",
-            "height",
-            stringifyPx(height * 1.5)
-        )
-        testIdIcon("testid").invoke("width").should("equal", height)
-    })
-
-    it("renders a h1 tag with a font and icon sizes of 40px", () => {
-        const height = Number(LIB_TOKENS["font-sizes"].h1.px.replace("px", ""))
-
-        cy.mount(
-            <TextIcon
-                data-testid="testid"
-                icon="heart-full"
-                tag="h1"
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            >
-                Hello
-            </TextIcon>
-        )
-
-        testIdText("testid").should(
-            "have.css",
-            "font-size",
-            stringifyPx(height)
-        )
-        testIdIconContainer("testid").should(
-            "have.css",
-            "height",
-            stringifyPx(height * 1.5)
-        )
-        testIdIcon("testid").invoke("width").should("equal", height)
-    })
-
-    it("renders text with color `secondary-400` and icon with `warning-600`", () => {
-        cy.mount(
-            <TextIcon
-                data-testid="testid"
-                icon="heart-full"
-                color="secondary-400"
-                iconColor="warning-600"
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            >
-                Hello
-            </TextIcon>
-        )
-
-        testIdText("testid").should(
-            "have.css",
-            "color",
-            LIB_TOKENS.colors.light["secondary-400"].rgb
-        )
-        testIdIcon("testid").should(
-            "have.css",
-            "fill",
-            LIB_TOKENS.colors.light["warning-600"].rgb
-        )
-    })
-
-    it("renders a `small` tag, icon with size 48px, and a gap of 24px", () => {
-        cy.mount(
-            <TextIcon
-                data-testid="testid"
-                icon="check"
-                tag="small"
-                iconSize={48}
-                gap="l"
-                iconBaseUrl={SITE_DATA.TESTS_ICON_BASE_URL}
-            >
-                Hello
-            </TextIcon>
-        )
-
-        testIdText("testid")
-            .should("have.prop", "tagName", "SMALL")
-            .should("have.css", "font-size", LIB_TOKENS["font-sizes"].small.px)
-        testIdIcon("testid").invoke("width").should("equal", 48)
-        cy.dataTest().should("have.css", "gap", LIB_TOKENS.spacers.l)
-    })
-})

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

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

package/src/lib/components/TextIcon/styles.tsx

@@ -1,38 +0,0 @@
-/*=============================================== TextIcon styles ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { Mixins, setDefaultTheme } from "../../"
-import { getIconHeight } from "./utils"
-import type { LibSpacers, LibTextIconTag } from "../../types"
-
-const StyledTextIcon = styled.div<{ $gap?: LibSpacers }>`
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $gap,
-        })}
-
-    & > *:not(span) {
-        flex-grow: 1;
-    }
-`
-
-const IconContainer = styled.span<{
-    $tag: LibTextIconTag
-    $iconSize?: number
-    $display?: boolean
-}>`
-    height: ${({ $tag, $display, $iconSize }) =>
-        $iconSize
-            ? stringifyPx($iconSize * 1.5)
-            : stringifyPx((getIconHeight($tag, $display) || 16) * 1.5)};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-`
-
-setDefaultTheme([StyledTextIcon, IconContainer])
-
-export { StyledTextIcon, IconContainer }

package/src/lib/components/TextIcon/types.ts

@@ -1,21 +0,0 @@
-/*=============================================== TextIcon types ===============================================*/
-
-import type { ElementType, CSSProperties } from "react"
-import type {
-    LibAllColors,
-    LibIcon,
-    LibSpacers,
-    LibTextIconTag,
-} from "../../types"
-import type { ILibText } from "../Text/types"
-
-export type ILibTextIcon = Omit<ILibText, "tag"> & {
-    icon: LibIcon
-    iconColor?: LibAllColors
-    iconSize?: number
-    textAs?: ElementType
-    tag?: LibTextIconTag
-    iconBaseUrl?: string
-    gap?: LibSpacers
-    containerStyle?: CSSProperties
-}

package/src/lib/components/TextIcon/utils.ts

@@ -1,56 +0,0 @@
-/*=============================================== Utils ===============================================*/
-
-import { LIB_TOKENS } from "../.."
-import type { LibTextIconTag } from "../../types"
-
-export const getIconHeight = (tag: LibTextIconTag, display?: boolean) => {
-    const pxToNumber = (value: string) => Number(value.replace("px", ""))
-
-    const sizesMap = new Map<LibTextIconTag, number>([
-        [
-            "h1",
-            pxToNumber(
-                display
-                    ? LIB_TOKENS["font-sizes"]["display-h1"].px
-                    : LIB_TOKENS["font-sizes"].h1.px
-            ),
-        ],
-        [
-            "h2",
-            pxToNumber(
-                display
-                    ? LIB_TOKENS["font-sizes"]["display-h2"].px
-                    : LIB_TOKENS["font-sizes"].h2.px
-            ),
-        ],
-        [
-            "h3",
-            pxToNumber(
-                display
-                    ? LIB_TOKENS["font-sizes"]["display-h3"].px
-                    : LIB_TOKENS["font-sizes"].h3.px
-            ),
-        ],
-        [
-            "h4",
-            pxToNumber(
-                display
-                    ? LIB_TOKENS["font-sizes"]["display-h4"].px
-                    : LIB_TOKENS["font-sizes"].h4.px
-            ),
-        ],
-        [
-            "h5",
-            pxToNumber(
-                display
-                    ? LIB_TOKENS["font-sizes"]["display-h5"].px
-                    : LIB_TOKENS["font-sizes"].h5.px
-            ),
-        ],
-        ["h6" || "blockquote", pxToNumber(LIB_TOKENS["font-sizes"].h6.px)],
-        ["p", pxToNumber(LIB_TOKENS["font-sizes"].body.px)],
-        ["small", pxToNumber(LIB_TOKENS["font-sizes"].small.px)],
-    ])
-
-    return sizesMap.get(tag)
-}