@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,52 +0,0 @@
-/*=============================================== Table types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibTableVariant,
-    ReactChildren,
-    CssVerticalAlign,
-} from "../../types"
-
-/*====================== Table ======================*/
-
-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
-
-/*====================== 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 +0,0 @@
-/*=============================================== TabButton component ===============================================*/
-
-import { forwardRef } 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
- * @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"
- */
-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>
-        )
-    }
-)

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

@@ -1,34 +0,0 @@
-/*=============================================== TabItem component ===============================================*/
-
-import { forwardRef } 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
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isActive: boolean
- */
-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>
-        )
-    }
-)

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

@@ -1,137 +0,0 @@
-/*=============================================== Tabs component ===============================================*/
-
-import { forwardRef, useState } 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"
-
-/**
- * @description Returns a Tabs component
- * @link https://documentation-components-react.vercel.app/components/tabs
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop tabsItems: Array<LibTabItem>
- * @prop showInUrl?: boolean
- * @prop queries?: Array<Array<string>> => only if showInUrl is set to true, working only with projects using react-router
- * @prop justify?: "start" | "stretch"
- * @prop active?: number
- * @prop variant?: "basic" | "rounded"
- *
- * @type LibTabItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop content: ReactNode
- */
-export const Tabs = forwardRef<HTMLDivElement, ILibTabs>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            tabsItems,
-            justify = "start",
-            active = 0,
-            variant = "basic",
-            showInUrl,
-            queries,
-            ...rest
-        },
-        ref
-    ) => {
-        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,46 +0,0 @@
-/*=============================================== TabsButtonsContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledTabsButtonsContainer } from "./styles"
-import type { ILibTabsButtonsContainer } from "./types"
-
-/**
- * @description Returns a TabsButtonsContainer component
- * @link https://documentation-components-react.vercel.app/components/tabs
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop justify?: "start" | "stretch"
- * @prop variant?: "basic" | "rounded"
- */
-export const TabsButtonsContainer = forwardRef<
-    HTMLDivElement,
-    ILibTabsButtonsContainer
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            justify = "start",
-            variant = "basic",
-            ...rest
-        },
-        ref
-    ) => {
-        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,23 +0,0 @@
-/*=============================================== TabsContainer component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledTabs } from "./styles"
-import type { ILibTabsContainer } from "./types"
-
-/**
- * @description Returns a TabsContainer component
- * @link https://documentation-components-react.vercel.app/components/tabs
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- */
-export const TabsContainer = forwardRef<HTMLDivElement, ILibTabsContainer>(
-    ({ "data-testid": testid, as, children, ...rest }, ref) => {
-        return (
-            <StyledTabs data-testid={testid} ref={ref} as={as} {...rest}>
-                {children}
-            </StyledTabs>
-        )
-    }
-)

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

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

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

@@ -1,178 +0,0 @@
-/*=============================================== Tabs styles ===============================================*/
-
-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.BACKGROUND};
-                        }
-
-                        &:active {
-                            background-color: ${Mixins.ColorsHoverActive(
-                                "primary",
-                                theme
-                            )};
-                        }
-                    }
-
-                    &.Active {
-                        color: ${theme.BACKGROUND};
-                        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,60 +0,0 @@
-/*=============================================== Tabs types ===============================================*/
-
-import type { ButtonHTMLAttributes } from "react"
-import type {
-    LibComponentBase,
-    LibTabVariant,
-    LibTabJustify,
-    LibTabItem,
-} from "../../types"
-
-/*====================== TabsContainer ======================*/
-
-export interface ILibTabsContainer extends LibComponentBase<HTMLDivElement> {}
-
-/*====================== TabsButtonsContainer ======================*/
-
-export interface ILibTabsButtonsContainer
-    extends LibComponentBase<HTMLDivElement> {
-    justify?: LibTabJustify
-    variant?: LibTabVariant
-}
-
-/*====================== TabsButton ======================*/
-
-export interface ILibTabButton
-    extends LibComponentBase<HTMLButtonElement>,
-        ButtonHTMLAttributes<HTMLButtonElement> {
-    isActive: boolean
-    onClick: () => void
-    justify?: LibTabJustify
-    variant?: LibTabVariant
-}
-
-/*====================== TabItem ======================*/
-
-export interface ILibTabItem extends LibComponentBase<HTMLDivElement> {
-    isActive: boolean
-}
-
-/*====================== Tabs ======================*/
-
-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

package/dist/lib/components/Tag/Tag.tsx

@@ -1,97 +0,0 @@
-/*=============================================== Tag component ===============================================*/
-
-import { forwardRef } from "react"
-import { getIconSizeFromFont } from "../../lib-utils"
-import { LibIcon } from "../LibIcon"
-import { StyledTag } from "./styles"
-import type { ILibTag } from "./types"
-
-/**
- * @description Returns a Tag component
- * @link https://documentation-components-react.vercel.app/components/tag
- * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop backgroundColor?: Any color from the library
- * @prop textColor?: Any color from the library
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop fontSize?: "display-h1" | "display-h2" | "display-h3" | "display-h4" | "display-h5" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small"
- * @prop icons?: { left?: string | JSX.Element; right?: string | JSX.Element }
- * @prop iconSizes?: { left?: number; right?: number } => only if icons is defined
- * @prop iconBaseUrl?: string => only if icons is defined
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" => only if icons is defined
- */
-export const Tag = forwardRef<HTMLSpanElement, ILibTag>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            backgroundColor = "primary",
-            textColor = backgroundColor === "white"
-                ? "primary"
-                : backgroundColor === "black"
-                ? "white"
-                : "background",
-            border,
-            padding = {
-                topBottom: "xxs",
-                leftRight: "s",
-            },
-            borderRadius = "round",
-            fontSize = "small",
-            icons,
-            iconSizes = {
-                left: getIconSizeFromFont(fontSize),
-                right: getIconSizeFromFont(fontSize),
-            },
-            iconBaseUrl,
-            gap = "xs",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTag
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $backgroundColor={backgroundColor}
-                $textColor={textColor}
-                $border={border}
-                $padding={padding}
-                $borderRadius={borderRadius}
-                $gap={gap}
-                $fontSize={fontSize}
-                {...rest}
-            >
-                {icons?.left && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon.Left`}
-                        className={className && "IconLeft"}
-                        icon={icons.left}
-                        size={iconSizes?.left}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
-
-                {children}
-
-                {icons?.right && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon.Right`}
-                        className={className && "IconRight"}
-                        icon={icons.right}
-                        size={iconSizes?.right}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
-            </StyledTag>
-        )
-    }
-)

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

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