@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Text/__preview__/previews/TextDisplay.tsx

@@ -1,30 +0,0 @@
-/*=============================================== TextDisplay preview ===============================================*/
-
-import { Text } from "../.."
-import { Flexbox } from "../../../Flexbox"
-
-export const TextDisplay = () => {
-    return (
-        <Flexbox flexDirection="column" alignItems="stretch">
-            <Text tag="h1" display data-testid="testid" className="className">
-                Title h1 display
-            </Text>
-
-            <Text tag="h2" display data-testid="testid" className="className">
-                Title h2 display
-            </Text>
-
-            <Text tag="h3" display data-testid="testid" className="className">
-                Title h3 display
-            </Text>
-
-            <Text tag="h4" display data-testid="testid" className="className">
-                Title h4 display
-            </Text>
-
-            <Text tag="h5" display data-testid="testid" className="className">
-                Title h5 display
-            </Text>
-        </Flexbox>
-    )
-}

package/src/lib/components/Text/__preview__/previews/TextTitles.tsx

@@ -1,34 +0,0 @@
-/*=============================================== TextDisplay preview ===============================================*/
-
-import { Text } from "../.."
-import { Flexbox } from "../../../Flexbox"
-
-export const TextTitles = () => {
-    return (
-        <Flexbox flexDirection="column" alignItems="stretch">
-            <Text tag="h1" data-testid="testid" className="className">
-                Title h1
-            </Text>
-
-            <Text tag="h2" data-testid="testid" className="className">
-                Title h2
-            </Text>
-
-            <Text tag="h3" data-testid="testid" className="className">
-                Title h3
-            </Text>
-
-            <Text tag="h4" data-testid="testid" className="className">
-                Title h4
-            </Text>
-
-            <Text tag="h5" data-testid="testid" className="className">
-                Title h5
-            </Text>
-
-            <Text tag="h6" data-testid="testid" className="className">
-                Title h6
-            </Text>
-        </Flexbox>
-    )
-}

package/src/lib/components/Text/__preview__/previews/Unordered.tsx

@@ -1,15 +0,0 @@
-/*=============================================== TextDisplay preview ===============================================*/
-
-import { Text } from "../.."
-
-export const Unordered = () => {
-    return (
-        <Text tag="ul" data-testid="testid" className="className">
-            <li>Unordered list</li>
-            <li>Unordered list</li>
-            <li>Unordered list</li>
-            <li>Unordered list</li>
-            <li>Unordered list</li>
-        </Text>
-    )
-}

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

@@ -1,83 +0,0 @@
-/*=============================================== Text tests ===============================================*/
-
-import { Text, LIB_TOKENS } from "../../.."
-import { tags } from "./utils"
-
-describe("<Text />", () => {
-    it("renders <Text /> component with a default tag p", () => {
-        cy.mount(
-            <Text data-testid="testid" className="className">
-                Hello
-            </Text>
-        )
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should("have.prop", "tagName", "P")
-    })
-
-    {
-        tags.map(tag =>
-            it(`renders a "${tag}" tag`, () => {
-                cy.mount(
-                    <Text tag={tag} data-testid="testid">
-                        Text {tag}
-                    </Text>
-                )
-                cy.dataTest().should("have.prop", "tagName", tag.toUpperCase())
-            })
-        )
-    }
-
-    it("renders text with the primary color", () => {
-        cy.mount(
-            <Text data-testid="testid" color="primary">
-                Hello
-            </Text>
-        )
-
-        cy.dataTest().should(
-            "have.css",
-            "color",
-            LIB_TOKENS.colors.light["primary-500"].rgb
-        )
-    })
-
-    it("renders a link inside the text with a secondary color", () => {
-        cy.mount(
-            <Text data-testid="testid" linkColor="secondary">
-                Hello <a href="#">link</a>
-            </Text>
-        )
-
-        const link = cy.dataTest().get("a")
-
-        link.should(
-            "have.css",
-            "color",
-            LIB_TOKENS.colors.light["secondary-500"].rgb
-        )
-    })
-
-    it("centers the text", () => {
-        cy.mount(
-            <Text data-testid="testid" textAlign="center">
-                Hello
-            </Text>
-        )
-        cy.dataTest().should("have.css", "text-align", "center")
-    })
-
-    it("renders a bigger font size with the `display` prop", () => {
-        cy.mount(
-            <Text data-testid="testid" tag="h1" display>
-                Hello
-            </Text>
-        )
-        cy.dataTest().should(
-            "have.css",
-            "font-size",
-            LIB_TOKENS["font-sizes"]["display-h1"].px
-        )
-    })
-})

package/src/lib/components/Text/__tests__/utils.ts

@@ -1,7 +0,0 @@
-/*=============================================== Test utils ===============================================*/
-
-import { typeValues, type LibTextAllTag } from "../../../types"
-
-export const tags = Object.values(
-    typeValues.allTextTags
-) as Array<LibTextAllTag>

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

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

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

@@ -1,230 +0,0 @@
-/*=============================================== Text styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import {
-    FONT_SIZES,
-    FONT_WEIGHTS,
-    Mixins,
-    SPACERS,
-    setDefaultTheme,
-} from "../../"
-import { TextBaseMixin } from "../ComponentsMixins"
-import type { ILibTextStyle, ILibTextStyleHeading } from "./subtypes"
-
-const StyledH1 = styled.h1<ILibTextStyleHeading>`
-    ${({ $textAlign, $color, $display, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: $display ? "display-h1" : "h1",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledH2 = styled.h2<ILibTextStyleHeading>`
-    ${({ $textAlign, $color, $display, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: $display ? "display-h2" : "h2",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledH3 = styled.h3<ILibTextStyleHeading>`
-    ${({ $textAlign, $color, $display, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: $display ? "display-h3" : "h3",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledH4 = styled.h4<ILibTextStyleHeading>`
-    ${({ $textAlign, $color, $display, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: $display ? "display-h4" : "h4",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledH5 = styled.h5<ILibTextStyleHeading>`
-    ${({ $textAlign, $color, $display, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: $display ? "display-h5" : "h5",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledH6 = styled.h6<ILibTextStyle>`
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "h6",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledP = styled.p<ILibTextStyle>`
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "body",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledStrong = styled.strong<ILibTextStyle>`
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "inherit",
-            $fontWeight: "black",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledEm = styled.em<ILibTextStyle>`
-    font-style: italic;
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "inherit",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledSmall = styled.small<ILibTextStyle>`
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "small",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledBlockquote = styled.blockquote<ILibTextStyle>`
-    font-style: italic;
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "h6",
-            $fontWeight: "bold",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const ListStyles = css`
-    padding-left: ${SPACERS.S};
-    ${Mixins.Flexbox({
-        $gap: "xxs",
-        $flexDirection: "column",
-        $alignItems: "stretch",
-    })};
-
-    li {
-        padding-inline-start: ${SPACERS.XXS};
-    }
-`
-
-const StyledUl = styled.ul<ILibTextStyle>`
-    ${ListStyles};
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "body",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledOl = styled.ol<ILibTextStyle>`
-    ${ListStyles};
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "body",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-`
-
-const StyledDl = styled.dl<ILibTextStyle>`
-    ${({ $textAlign, $color, $linkColor }) =>
-        TextBaseMixin({
-            $fontSize: "body",
-            $fontWeight: "regular",
-            $textAlign,
-            $color,
-            $linkColor,
-        })}
-
-    dt {
-        font-weight: ${FONT_WEIGHTS.BLACK};
-        font-size: ${FONT_SIZES.H6};
-    }
-
-    dd {
-        padding-inline-start: ${SPACERS.M};
-
-        &:not(:last-of-type) {
-            margin-bottom: ${SPACERS.XS};
-        }
-    }
-`
-
-setDefaultTheme([
-    StyledH1,
-    StyledH2,
-    StyledH3,
-    StyledH4,
-    StyledH5,
-    StyledH6,
-    StyledP,
-    StyledStrong,
-    StyledEm,
-    StyledSmall,
-    StyledBlockquote,
-    StyledUl,
-    StyledOl,
-    StyledDl,
-])
-
-export {
-    StyledH1,
-    StyledH2,
-    StyledH3,
-    StyledH4,
-    StyledH5,
-    StyledH6,
-    StyledP,
-    StyledStrong,
-    StyledEm,
-    StyledSmall,
-    StyledBlockquote,
-    StyledUl,
-    StyledOl,
-    StyledDl,
-}

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

@@ -1,15 +0,0 @@
-/*=============================================== Text sub components types ===============================================*/
-
-import type { LibAllColors, CssTextAlign, LibColorsHover } from "../../types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN TEXT COMPONENTS
-
-export interface ILibTextStyle {
-    $color?: LibAllColors
-    $textAlign?: CssTextAlign
-    $linkColor: LibColorsHover
-}
-
-export interface ILibTextStyleHeading extends ILibTextStyle {
-    $display?: boolean
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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