@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Table/Table.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Table component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { Linkify } from "../../"
 import { THead } from "./THead"
@@ -11,114 +9,120 @@ import { StyledTable } from "./styles"
 import type { ILibTable } from "./types"
 
 /**
- * @description Returns a Table component
- * @link https://documentation-components-react.vercel.app/components/table
+ * Table component for rendering a customizable table with optional headers, data, children, and linkified content.
+ *
+ * @component
  * @extends HTMLTableElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableElement>
- * @prop data: Array<Array<ReactChildren>> => only if children is not defined
- * @prop children?: ReactChildren => only if data is not defined
- * @prop headers?: Array<ReactChildren>
- * @prop variant?: LibTableVariant
- * @prop vAlign?: CssVerticalAlign
- * @prop linkify?: boolean
+ * @param {Object} props - Table props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLTableElement>} [props.ref] - Ref forwarded to the table element.
+ * @param {Array<Array<React.ReactNode>>} [props.data] - Table data as an array of rows (only if children is not defined).
+ * @param {ReactNode} [props.children] - Table content (only if data is not defined).
+ * @param {Array<React.ReactNode>} [props.headers] - Table headers.
+ * @param {"bordered" | "borderless" | "striped"} [props.variant="bordered"] - Table variant style.
+ * @param {CssVerticalAlign} [props.vAlign="top"] - Vertical alignment for table cells.
+ * @param {boolean} [props.linkify] - Whether to automatically linkify string content.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the table element.
+ * @returns {JSX.Element} The rendered Table component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/table
+ * @example
+ * <Table
+ *   headers={["Name", "Email"]}
+ *   data={[
+ *     ["Alice", "alice@email.com"],
+ *     ["Bob", "bob@email.com"]
+ *   ]}
+ *   linkify
+ * />
  */
-export const Table = forwardRef<HTMLTableElement, ILibTable>(
-    (
-        {
-            "data-testid": testid,
-            children,
-            className,
-            variant = "bordered",
-            data,
-            headers,
-            linkify,
-            vAlign = "top",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTable
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                $vAlign={vAlign}
-                $variant={variant}
-                {...rest}
-            >
-                {headers && (
-                    <THead
-                        data-testid={testid && `${testid}.THead`}
-                        className={className && "THead"}
+export const Table: FC<ILibTable> = ({
+    "data-testid": testid,
+    ref,
+    children,
+    className,
+    variant = "bordered",
+    data,
+    headers,
+    linkify,
+    vAlign = "top",
+    ...rest
+}) => {
+    return (
+        <StyledTable
+            data-testid={testid}
+            ref={ref}
+            className={className}
+            $vAlign={vAlign}
+            $variant={variant}
+            {...rest}
+        >
+            {headers && (
+                <THead
+                    data-testid={testid && `${testid}.THead`}
+                    className={className && "THead"}
+                >
+                    <Tr
+                        data-testid={testid && `${testid}.THead.Tr`}
+                        className={className && "TheadTr"}
                     >
-                        <Tr
-                            data-testid={testid && `${testid}.THead.Tr`}
-                            className={className && "TheadTr"}
-                        >
-                            {headers.map(header => (
-                                <Td
-                                    key={uuid()}
-                                    data-testid={
-                                        testid && `${testid}.THead.Tr.Td`
-                                    }
-                                    className={className && "TheadTd"}
-                                >
-                                    {linkify && typeof header === "string" ? (
-                                        <Linkify>{header}</Linkify>
-                                    ) : (
-                                        header
-                                    )}
-                                </Td>
-                            ))}
-                        </Tr>
-                    </THead>
-                )}
+                        {headers.map(header => (
+                            <Td
+                                key={uuid()}
+                                data-testid={testid && `${testid}.THead.Tr.Td`}
+                                className={className && "TheadTd"}
+                            >
+                                {linkify && typeof header === "string" ? (
+                                    <Linkify>{header}</Linkify>
+                                ) : (
+                                    header
+                                )}
+                            </Td>
+                        ))}
+                    </Tr>
+                </THead>
+            )}
 
-                {data ? (
-                    <TBody
-                        data-testid={testid && `${testid}.TBody`}
-                        className={className && "TBody"}
-                    >
-                        {data.map(row => {
-                            return (
-                                <Tr
-                                    key={uuid()}
-                                    data-testid={testid && `${testid}.TBody.Tr`}
-                                    className={className && "TBodyTr"}
-                                >
-                                    {row.map(col => {
-                                        return (
-                                            <Td
-                                                key={uuid()}
-                                                data-testid={
-                                                    testid &&
-                                                    `${testid}.TBody.Tr.Td`
-                                                }
-                                                className={
-                                                    className && "TBodyTd"
-                                                }
-                                                noPadding={
-                                                    typeof col === "object"
-                                                }
-                                            >
-                                                {linkify &&
-                                                typeof col === "string" ? (
-                                                    <Linkify>{col}</Linkify>
-                                                ) : (
-                                                    col
-                                                )}
-                                            </Td>
-                                        )
-                                    })}
-                                </Tr>
-                            )
-                        })}
-                    </TBody>
-                ) : (
-                    children
-                )}
-            </StyledTable>
-        )
-    }
-)
+            {data ? (
+                <TBody
+                    data-testid={testid && `${testid}.TBody`}
+                    className={className && "TBody"}
+                >
+                    {data.map(row => {
+                        return (
+                            <Tr
+                                key={uuid()}
+                                data-testid={testid && `${testid}.TBody.Tr`}
+                                className={className && "TBodyTr"}
+                            >
+                                {row.map(col => {
+                                    return (
+                                        <Td
+                                            key={uuid()}
+                                            data-testid={
+                                                testid &&
+                                                `${testid}.TBody.Tr.Td`
+                                            }
+                                            className={className && "TBodyTd"}
+                                            noPadding={typeof col === "object"}
+                                        >
+                                            {linkify &&
+                                            typeof col === "string" ? (
+                                                <Linkify>{col}</Linkify>
+                                            ) : (
+                                                col
+                                            )}
+                                        </Td>
+                                    )
+                                })}
+                            </Tr>
+                        )
+                    })}
+                </TBody>
+            ) : (
+                children
+            )}
+        </StyledTable>
+    )
+}

package/dist/lib/components/Table/Td.tsx

@@ -1,26 +1,35 @@
-/*=============================================== Td component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledTd } from "./styles"
 import type { ILibTd } from "./types"
 
 /**
- * @description Returns a Td component
- * @link https://documentation-components-react.vercel.app/components/table
+ * Td component for rendering a table cell with optional padding control.
+ *
+ * @component
  * @extends HTMLTableCellElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableCellElement>
- * @prop noPadding?: boolean
+ * @param {Object} props - Td props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLTableCellElement>} [props.ref] - Ref forwarded to the td element.
+ * @param {boolean} [props.noPadding] - If true, removes the default padding from the cell.
+ * @param {any} [props.rest] - Additional props passed to the td element.
+ * @returns {JSX.Element} The rendered Td component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/table
+ * @example
+ * <Td noPadding>Cell content</Td>
  */
-export const Td = forwardRef<HTMLTableCellElement, ILibTd>(
-    ({ "data-testid": testid, noPadding, ...rest }, ref) => {
-        return (
-            <StyledTd
-                data-testid={testid}
-                ref={ref}
-                $noPadding={noPadding}
-                {...rest}
-            />
-        )
-    }
-)
+export const Td: FC<ILibTd> = ({
+    "data-testid": testid,
+    noPadding,
+    ref,
+    ...rest
+}) => {
+    return (
+        <StyledTd
+            data-testid={testid}
+            ref={ref}
+            $noPadding={noPadding}
+            {...rest}
+        />
+    )
+}

package/dist/lib/components/Table/Tr.tsx

@@ -1,17 +1,23 @@
-/*=============================================== Tr component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import type { ILibTr } from "./types"
 
 /**
- * @description Returns a Tr component
- * @link https://documentation-components-react.vercel.app/components/table
+ * Tr component for rendering a table row.
+ *
+ * @component
  * @extends HTMLTableRowElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableRowElement>
+ * @param {Object} props - Tr props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLTableRowElement>} [props.ref] - Ref forwarded to the tr element.
+ * @param {any} [props.rest] - Additional props passed to the tr element.
+ * @returns {JSX.Element} The rendered Tr component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/table
+ * @example
+ * <Tr>
+ *   <Td>Row content</Td>
+ * </Tr>
  */
-export const Tr = forwardRef<HTMLTableRowElement, ILibTr>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tr data-testid={testid} ref={ref} {...rest} />
-    }
-)
+export const Tr: FC<ILibTr> = ({ "data-testid": testid, ref, ...rest }) => {
+    return <tr data-testid={testid} ref={ref} {...rest} />
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== Table exports ===============================================*/
-
 export * from "./Table"
 export * from "./THead"
 export * from "./TBody"

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

@@ -1,5 +1,3 @@
-/*=============================================== Table styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { setDefaultTheme, SPACERS, Mixins, FONT_SIZES, MEDIA } from "../../"
 import { TextBaseMixin } from "../ComponentsMixins"

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

@@ -1,5 +1,3 @@
-/*=============================================== Table types ===============================================*/
-
 import type {
     LibComponentBase,
     LibTableVariant,
@@ -7,8 +5,6 @@ import type {
     CssVerticalAlign,
 } from "../../types"
 
-/*====================== Table ======================*/
-
 interface ILibTableBase
     extends Exclude<LibComponentBase<HTMLTableElement>, "as"> {
     variant?: LibTableVariant
@@ -29,23 +25,15 @@ interface TableWithChildren extends ILibTableBase {
 
 export type ILibTable = TableWithData | TableWithChildren
 
-/*====================== TBody ======================*/
-
 export interface ILibTBody
     extends Exclude<LibComponentBase<HTMLTableSectionElement>, "as"> {}
 
-/*====================== THead ======================*/
-
 export interface ILibTHead
     extends Exclude<LibComponentBase<HTMLTableSectionElement>, "as"> {}
 
-/*====================== Tr ======================*/
-
 export interface ILibTr
     extends Exclude<LibComponentBase<HTMLTableRowElement>, "as"> {}
 
-/*====================== Td ======================*/
-
 export interface ILibTd
     extends Exclude<LibComponentBase<HTMLTableCellElement>, "as"> {
     noPadding?: boolean

package/dist/lib/components/Tabs/TabButton.tsx

@@ -1,50 +1,54 @@
-/*=============================================== TabButton component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledTabButton } from "./styles"
 import type { ILibTabButton } from "./types"
 
 /**
- * @description Returns a TabButton component
- * @link https://documentation-components-react.vercel.app/components/tabs
+ * TabButton component for rendering a tab button with customizable style, justification, and active state.
+ *
+ * @component
  * @extends HTMLButtonElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement>
- * @prop isActive: boolean
- * @prop onClick: () => void
- * @prop justify?: "start" | "stretch"
- * @prop variant?: "basic" | "rounded"
+ * @param {Object} props - TabButton props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement>} [props.ref] - Ref forwarded to the button element.
+ * @param {boolean} props.isActive - Whether the tab is active.
+ * @param {() => void} props.onClick - Click handler for the tab button.
+ * @param {"start" | "stretch"} [props.justify="start"] - Justification of the tab button content.
+ * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the tab button.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Tab button content.
+ * @param {any} [props.rest] - Additional props passed to the button element.
+ * @returns {JSX.Element} The rendered TabButton component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tabs
+ * @example
+ * <TabButton isActive={true} onClick={handleClick}>Tab 1</TabButton>
  */
-export const TabButton = forwardRef<HTMLButtonElement, ILibTabButton>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            children,
-            justify = "start",
-            variant = "basic",
-            isActive,
-            onClick,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTabButton
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Active: isActive })}
-                onClick={onClick}
-                $justify={justify}
-                $variant={variant}
-                {...rest}
-            >
-                {children}
-            </StyledTabButton>
-        )
-    }
-)
+export const TabButton: FC<ILibTabButton> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    children,
+    justify = "start",
+    variant = "basic",
+    isActive,
+    onClick,
+    ...rest
+}) => {
+    return (
+        <StyledTabButton
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Active: isActive })}
+            onClick={onClick}
+            $justify={justify}
+            $variant={variant}
+            {...rest}
+        >
+            {children}
+        </StyledTabButton>
+    )
+}

package/dist/lib/components/Tabs/TabItem.tsx

@@ -1,34 +1,45 @@
-/*=============================================== TabItem component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledTabItem } from "./styles"
 import type { ILibTabItem } from "./types"
 
 /**
- * @description Returns a TabItem component
- * @link https://documentation-components-react.vercel.app/components/tabs
+ * TabItem component for rendering the content of a tab with customizable active state and element type.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isActive: boolean
+ * @param {Object} props - TabItem props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {boolean} props.isActive - Whether the tab item is active.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Tab item content.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered TabItem component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tabs
+ * @example
+ * <TabItem isActive={true}>Tab content</TabItem>
  */
-export const TabItem = forwardRef<HTMLDivElement, ILibTabItem>(
-    (
-        { "data-testid": testid, as, children, className, isActive, ...rest },
-        ref
-    ) => {
-        return (
-            <StyledTabItem
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Active: isActive })}
-                {...rest}
-            >
-                {children}
-            </StyledTabItem>
-        )
-    }
-)
+export const TabItem: FC<ILibTabItem> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    isActive,
+    ...rest
+}) => {
+    return (
+        <StyledTabItem
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Active: isActive })}
+            {...rest}
+        >
+            {children}
+        </StyledTabItem>
+    )
+}