@julseb-lib/react 0.0.84 → 0.0.86

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

@@ -1,5 +1,3 @@
-/*=============================================== Tag types ===============================================*/
-
 import type {
     LibAllColors,
     ILibBorder,

package/dist/lib/components/Text/Text.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Text component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { H1 } from "./templates/H1"
 import { H2 } from "./templates/H2"
 import { H3 } from "./templates/H3"
@@ -18,52 +16,56 @@ import { Dl } from "./templates/Dl"
 import type { ILibText } from "./types"
 
 /**
- * @description Returns a Text component
- * @link https://documentation-components-react.vercel.app/styles/text
+ * Text component for rendering semantic HTML text elements with flexible tag, color, alignment, and display options.
+ *
+ * @component
  * @extends HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
- * @prop color?: Any color from the library
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop textAlign?: CssTextAlign
- * @prop tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"
- * @prop display?: boolean => only if tag is set to h1 to h5
+ * @param {Object} props - Text props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.color] - Any color from the library.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linkColor] - Link color for text links.
+ * @param {CssTextAlign} [props.textAlign] - Text alignment.
+ * @param {"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"} [props.tag="p"] - HTML tag to render as.
+ * @param {boolean} [props.display] - Display property (only if tag is set to h1 to h5).
+ * @returns {JSX.Element} The rendered Text component.
+ *
+ * @see https://documentation-components-react.vercel.app/styles/text
+ * @example
+ * <Text tag="h2" color="primary" textAlign="center">
+ *   Welcome to the documentation!
+ * </Text>
  */
-export const Text = forwardRef<
-    HTMLHeadingElement &
-        HTMLParagraphElement &
-        HTMLQuoteElement &
-        HTMLUListElement &
-        HTMLOListElement &
-        HTMLDListElement,
-    ILibText
->(({ tag = "p", ...rest }, ref) => {
-    if (tag === "h1") return <H1 ref={ref} {...rest} />
-
-    if (tag === "h2") return <H2 ref={ref} {...rest} />
-
-    if (tag === "h3") return <H3 ref={ref} {...rest} />
-
-    if (tag === "h4") return <H4 ref={ref} {...rest} />
-
-    if (tag === "h5") return <H5 ref={ref} {...rest} />
-
-    if (tag === "h6") return <H6 ref={ref} {...rest} />
-
-    if (tag === "strong") return <Strong ref={ref} {...rest} />
-
-    if (tag === "em") return <Em ref={ref} {...rest} />
-
-    if (tag === "small") return <Small ref={ref} {...rest} />
-
-    if (tag === "blockquote") return <Blockquote ref={ref} {...rest} />
-
-    if (tag === "ul") return <Ul ref={ref} {...rest} />
-
-    if (tag === "ol") return <Ol ref={ref} {...rest} />
-
-    if (tag === "dl") return <Dl ref={ref} {...rest} />
-
-    return <P ref={ref} {...rest} />
-})
+export const Text: FC<ILibText> = ({ tag = "p", ...rest }) => {
+    switch (tag) {
+        case "h1":
+            return <H1 {...rest} />
+        case "h2":
+            return <H2 {...rest} />
+        case "h3":
+            return <H3 {...rest} />
+        case "h4":
+            return <H4 {...rest} />
+        case "h5":
+            return <H5 {...rest} />
+        case "h6":
+            return <H6 {...rest} />
+        case "strong":
+            return <Strong {...rest} />
+        case "em":
+            return <Em {...rest} />
+        case "small":
+            return <Small {...rest} />
+        case "blockquote":
+            return <Blockquote {...rest} />
+        case "ul":
+            return <Ul {...rest} />
+        case "ol":
+            return <Ol {...rest} />
+        case "dl":
+            return <Dl {...rest} />
+        default:
+            return <P {...rest} />
+    }
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Text styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     FONT_SIZES,
@@ -157,6 +155,17 @@ const StyledUl = styled.ul<ILibTextStyle>`
             $color,
             $linkColor,
         })}
+
+    li {
+        ${({ $textAlign, $color, $linkColor }) =>
+            TextBaseMixin({
+                $fontSize: "body",
+                $fontWeight: "regular",
+                $textAlign,
+                $color,
+                $linkColor,
+            })}
+    }
 `
 
 const StyledOl = styled.ol<ILibTextStyle>`
@@ -169,6 +178,17 @@ const StyledOl = styled.ol<ILibTextStyle>`
             $color,
             $linkColor,
         })}
+
+    li {
+        ${({ $textAlign, $color, $linkColor }) =>
+            TextBaseMixin({
+                $fontSize: "body",
+                $fontWeight: "regular",
+                $textAlign,
+                $color,
+                $linkColor,
+            })}
+    }
 `
 
 const StyledDl = styled.dl<ILibTextStyle>`

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

@@ -1,5 +1,3 @@
-/*=============================================== Text sub components types ===============================================*/
-
 import type { LibAllColors, CssTextAlign, LibColorsHover } from "../../types"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN TEXT COMPONENTS

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

@@ -1,34 +1,28 @@
-/*=============================================== Blockquote ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const Blockquote: FC<ILibText> = ({
+    "data-testid": testid,
+    ref,
+    as,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledBlockquote
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledBlockquote>
+    )
+}

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

@@ -1,34 +1,28 @@
-/*=============================================== Dl ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const Dl: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledDl
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledDl>
+    )
+}

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

@@ -1,34 +1,28 @@
-/*=============================================== Em ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const Em: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledEm
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledEm>
+    )
+}

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

@@ -1,36 +1,30 @@
-/*=============================================== H1 ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const H1: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    display,
+    ...rest
+}) => {
+    return (
+        <StyledH1
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            $display={display}
+            {...rest}
+        >
+            {children}
+        </StyledH1>
+    )
+}

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

@@ -1,36 +1,30 @@
-/*=============================================== H2 ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const H2: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    display,
+    ...rest
+}) => {
+    return (
+        <StyledH2
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            $display={display}
+            {...rest}
+        >
+            {children}
+        </StyledH2>
+    )
+}

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

@@ -1,36 +1,30 @@
-/*=============================================== H3 ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const H3: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    display,
+    ...rest
+}) => {
+    return (
+        <StyledH3
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            $display={display}
+            {...rest}
+        >
+            {children}
+        </StyledH3>
+    )
+}

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

@@ -1,36 +1,30 @@
-/*=============================================== H4 ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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>
-        )
-    }
-)
+export const H4: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    display,
+    ...rest
+}) => {
+    return (
+        <StyledH4
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            $display={display}
+            {...rest}
+        >
+            {children}
+        </StyledH4>
+    )
+}