@julseb-lib/react 0.1.3 → 0.1.5

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

@@ -1,40 +0,0 @@
-import type {
-    LibComponentBase,
-    LibTableVariant,
-    ReactChildren,
-    CssVerticalAlign,
-} from "../../types"
-
-interface ILibTableBase
-    extends Exclude<LibComponentBase<HTMLTableElement>, "as"> {
-    variant?: LibTableVariant
-    vAlign?: CssVerticalAlign
-    linkify?: boolean
-    headers?: Array<ReactChildren>
-}
-
-interface TableWithData extends ILibTableBase {
-    data: Array<Array<ReactChildren>>
-    children?: never
-}
-
-interface TableWithChildren extends ILibTableBase {
-    data?: never
-    children?: ReactChildren
-}
-
-export type ILibTable = TableWithData | TableWithChildren
-
-export interface ILibTBody
-    extends Exclude<LibComponentBase<HTMLTableSectionElement>, "as"> {}
-
-export interface ILibTHead
-    extends Exclude<LibComponentBase<HTMLTableSectionElement>, "as"> {}
-
-export interface ILibTr
-    extends Exclude<LibComponentBase<HTMLTableRowElement>, "as"> {}
-
-export interface ILibTd
-    extends Exclude<LibComponentBase<HTMLTableCellElement>, "as"> {
-    noPadding?: boolean
-}

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

@@ -1,54 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { StyledTabButton } from "./styles"
-import type { ILibTabButton } from "./types"
-
-/**
- * TabButton component for rendering a tab button with customizable style, justification, and active state.
- *
- * @component
- * @extends HTMLButtonElement
- * @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: 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,45 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { StyledTabItem } from "./styles"
-import type { ILibTabItem } from "./types"
-
-/**
- * TabItem component for rendering the content of a tab with customizable active state and element type.
- *
- * @component
- * @extends HTMLDivElement
- * @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: 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>
-    )
-}

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

@@ -1,140 +0,0 @@
-import { useState, type FC } from "react"
-import { useSearchParams } from "react-router-dom"
-import { uuid } from "@julseb-lib/utils"
-import { Text } from "../../"
-import { TabsContainer } from "./TabsContainer"
-import { TabsButtonsContainer } from "./TabsButtonsContainer"
-import { TabButton } from "./TabButton"
-import { TabItem } from "./TabItem"
-import type { ILibTabs } from "./types"
-
-/**
- * Tabs component for rendering a set of tabbed panels with customizable tab items, active state, URL sync, and visual variants.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Tabs 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 {string} [props.className] - Additional class names.
- * @param {Array<LibTabItem>} props.tabsItems - Array of tab item objects.
- * @param {boolean} [props.showInUrl] - If true, syncs the active tab with the URL query string (requires react-router).
- * @param {Array<Array<string>>} [props.queries] - Query parameters for URL sync (only if showInUrl is true).
- * @param {"start" | "stretch"} [props.justify="start"] - Justification of the tab buttons.
- * @param {number} [props.active=0] - Index of the initially active tab.
- * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the tabs.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Tabs component.
- *
- * @see https://documentation-components-react.vercel.app/components/tabs
- * @example
- * <Tabs
- *   tabsItems={[
- *     { title: "Tab 1", content: <div>Content 1</div> },
- *     { title: "Tab 2", content: <div>Content 2</div> }
- *   ]}
- *   active={0}
- *   justify="start"
- *   variant="basic"
- * />
- */
-export const Tabs: FC<ILibTabs> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    tabsItems,
-    justify = "start",
-    active = 0,
-    variant = "basic",
-    showInUrl,
-    queries,
-    ...rest
-}) => {
-    const [searchParams, setSearchParams] = useSearchParams()
-    const tab = searchParams.get("tab") || active.toString()
-
-    const [activeTab, setActiveTab] = useState<number>(
-        showInUrl ? Number(tab) : active
-    )
-
-    const handleClick = (activeTab: number) => {
-        setActiveTab(activeTab)
-
-        if (showInUrl) {
-            setSearchParams(
-                queries
-                    ? {
-                          tab: activeTab,
-                          ...Object.fromEntries(queries),
-                      }
-                    : { tab: activeTab }
-            )
-        }
-    }
-
-    return (
-        <TabsContainer
-            data-testid={testid}
-            className={className}
-            ref={ref}
-            as={as}
-            {...rest}
-        >
-            <TabsButtonsContainer
-                data-testid={testid && `${testid}.TabsButtonsContainer`}
-                className={className && "TabsButtonsContainer"}
-                justify={justify}
-                variant={variant}
-            >
-                {tabsItems.map((item, i) => (
-                    <TabButton
-                        key={uuid()}
-                        data-testid={
-                            item["data-testid"]
-                                ? item["data-testid"]
-                                : testid &&
-                                  `${testid}.TabsButtonsContainer.TabButton`
-                        }
-                        className={
-                            item.className
-                                ? `${item.className}.Button`
-                                : className && "TabButton"
-                        }
-                        id={item.id && `${item.id}.TabButton`}
-                        ref={item.ref}
-                        isActive={activeTab === i}
-                        onClick={() => handleClick(i)}
-                        justify={justify}
-                        variant={variant}
-                    >
-                        {item.title}
-                    </TabButton>
-                ))}
-            </TabsButtonsContainer>
-
-            {tabsItems.map((item, i) => (
-                <TabItem
-                    key={uuid()}
-                    data-testid={
-                        item["data-testid"]
-                            ? item["data-testid"]
-                            : testid && `${testid}.TabItem`
-                    }
-                    className={
-                        item.className
-                            ? `${item.className}.Tab`
-                            : className && "TabItem"
-                    }
-                    id={item.id && `${item.id}.Tab`}
-                    ref={item.ref}
-                    as={typeof item.content === "string" ? Text : "span"}
-                    isActive={activeTab.toString() === i.toString()}
-                >
-                    {item.content}
-                </TabItem>
-            ))}
-        </TabsContainer>
-    )
-}

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

@@ -1,48 +0,0 @@
-import type { FC } from "react"
-import { StyledTabsButtonsContainer } from "./styles"
-import type { ILibTabsButtonsContainer } from "./types"
-
-/**
- * TabsButtonsContainer component for wrapping tab buttons with customizable justification and visual variant.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - TabsButtonsContainer props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {"start" | "stretch"} [props.justify="start"] - Justification of the tab buttons.
- * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the tab buttons.
- * @param {ReactNode} [props.children] - Tab button elements.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered TabsButtonsContainer component.
- *
- * @see https://documentation-components-react.vercel.app/components/tabs
- * @example
- * <TabsButtonsContainer justify="stretch" variant="rounded">
- *   {tabButtons}
- * </TabsButtonsContainer>
- */
-export const TabsButtonsContainer: FC<ILibTabsButtonsContainer> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    justify = "start",
-    variant = "basic",
-    ...rest
-}) => {
-    return (
-        <StyledTabsButtonsContainer
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            $cols={(children as Array<typeof children>)?.length}
-            $justify={justify}
-            $variant={variant}
-            {...rest}
-        >
-            {children}
-        </StyledTabsButtonsContainer>
-    )
-}

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

@@ -1,36 +0,0 @@
-import type { FC } from "react"
-import { StyledTabs } from "./styles"
-import type { ILibTabsContainer } from "./types"
-
-/**
- * TabsContainer component for wrapping tabbed content and buttons.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - TabsContainer 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 {ReactNode} [props.children] - Content to render inside the container.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered TabsContainer component.
- *
- * @see https://documentation-components-react.vercel.app/components/tabs
- * @example
- * <TabsContainer>
- *   {children}
- * </TabsContainer>
- */
-export const TabsContainer: FC<ILibTabsContainer> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    ...rest
-}) => {
-    return (
-        <StyledTabs data-testid={testid} ref={ref} as={as} {...rest}>
-            {children}
-        </StyledTabs>
-    )
-}

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

@@ -1,5 +0,0 @@
-export * from "./Tabs"
-export * from "./TabsContainer"
-export * from "./TabsButtonsContainer"
-export * from "./TabButton"
-export * from "./TabItem"

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

@@ -1,176 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-    setDefaultTheme,
-    Mixins,
-    RADIUSES,
-    MEDIA,
-    SPACERS,
-    TRANSITIONS,
-} from "../../"
-import type { LibTabVariant, LibTabJustify } from "../../types"
-
-const StyledTabsContainer = styled.div`
-    ${Mixins.Flexbox({
-        $gap: "m",
-        $flexDirection: "column",
-    })};
-`
-
-const StyledTabsButtonsContainer = styled.div<{
-    $variant: LibTabVariant
-    $justify: LibTabJustify
-    $cols: number
-}>`
-    position: relative;
-
-    ${({ $variant, $justify, theme }) => {
-        switch ($variant) {
-            case "basic":
-                return css`
-                    width: ${$justify === "start" && "100%"};
-
-                    &:after {
-                        content: "";
-                        position: absolute;
-                        bottom: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 1px;
-                        background-color: ${theme.GRAY_200};
-                        z-index: 0;
-                    }
-                `
-            case "rounded":
-                return css`
-                    width: ${$justify === "start" ? "fit-content" : ""};
-                    background-color: ${theme.GRAY_50};
-                    border-radius: ${RADIUSES.M};
-                    padding: ${RADIUSES.XS};
-                `
-            default:
-                return null
-        }
-    }}
-
-    ${({ $justify, $cols }) => {
-        switch ($justify) {
-            case "start":
-                return css`
-                    ${Mixins.Flexbox({
-                        $alignItems: "center",
-                        $gap: "xs",
-                        $flexWrap: "wrap",
-                        $inline: true,
-                    })};
-
-                    @media ${MEDIA.BREAKPOINT_MOBILE} {
-                        flex-direction: column;
-                    }
-                `
-            case "stretch":
-                return css`
-                    ${Mixins.Grid({
-                        $gap: "xs",
-                        $col: $cols,
-                    })};
-
-                    @media ${MEDIA.BREAKPOINT_MOBILE} {
-                        grid-template-columns: repeat(1, 1fr);
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const StyledTabButton = styled.button<{
-    $variant: LibTabVariant
-    $justify: LibTabJustify
-}>`
-    border: none;
-    padding: 0;
-    background-color: transparent;
-
-    ${({ $variant, $justify, theme }) => {
-        switch ($variant) {
-            case "basic":
-                return css`
-                    min-width: 100px;
-                    text-align: left;
-                    padding-bottom: ${SPACERS.XXS};
-                    border-bottom: 2px solid transparent;
-                    z-index: 2;
-                    color: ${theme.FONT};
-
-                    @media ${MEDIA.BREAKPOINT_MOBILE} {
-                        width: 100%;
-                    }
-
-                    &.Active {
-                        border-bottom-color: ${theme.PRIMARY_500};
-                    }
-                `
-            case "rounded":
-                return css`
-                    border-radius: ${RADIUSES.S};
-                    padding: ${SPACERS.XXS};
-                    transition: ${TRANSITIONS.SHORT};
-                    min-width: ${$justify === "start" && "100px"};
-                    color: ${theme.FONT};
-
-                    @media ${MEDIA.HOVER} {
-                        &:hover {
-                            background-color: ${Mixins.ColorsHoverHover(
-                                "primary",
-                                theme
-                            )};
-                            color: ${theme.WHITE};
-                        }
-
-                        &:active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                "primary",
-                                theme
-                            )};
-                        }()
-                    }
-
-                    &.Active {
-                        color: ${theme.WHITE};
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            "primary",
-                            theme
-                        )};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const StyledTabItem = styled.div`
-    display: none;
-
-    &.Active {
-        ${Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "stretch",
-        })}
-    }
-`
-
-setDefaultTheme([
-    StyledTabsContainer,
-    StyledTabsButtonsContainer,
-    StyledTabButton,
-    StyledTabItem,
-])
-
-export {
-    StyledTabsContainer as StyledTabs,
-    StyledTabsButtonsContainer,
-    StyledTabButton,
-    StyledTabItem,
-}

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

@@ -1,48 +0,0 @@
-import type { ButtonHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    LibTabVariant,
-    LibTabJustify,
-    LibTabItem,
-} from "../../types"
-
-export interface ILibTabsContainer extends LibComponentBase<HTMLDivElement> {}
-
-export interface ILibTabsButtonsContainer
-    extends LibComponentBase<HTMLDivElement> {
-    justify?: LibTabJustify
-    variant?: LibTabVariant
-}
-
-export interface ILibTabButton
-    extends LibComponentBase<HTMLButtonElement>,
-        ButtonHTMLAttributes<HTMLButtonElement> {
-    isActive: boolean
-    onClick: () => void
-    justify?: LibTabJustify
-    variant?: LibTabVariant
-}
-
-export interface ILibTabItem extends LibComponentBase<HTMLDivElement> {
-    isActive: boolean
-}
-
-interface ILibTabsBase extends LibComponentBase<HTMLDivElement> {
-    tabsItems: Array<LibTabItem>
-    justify?: LibTabJustify
-    active?: number
-    variant?: LibTabVariant
-    children?: never
-}
-
-interface TabsInUrl extends ILibTabsBase {
-    showInUrl?: true
-    queries?: Array<Array<string>>
-}
-
-interface TabsNotInUrl extends ILibTabsBase {
-    showInUrl?: false | undefined | null | never
-    queries?: never
-}
-
-export type ILibTabs = TabsInUrl | TabsNotInUrl