@julseb-lib/react 0.0.63 → 0.0.64

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

@@ -0,0 +1,52 @@
+/*=============================================== 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

@@ -0,0 +1,50 @@
+/*=============================================== 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

@@ -0,0 +1,34 @@
+/*=============================================== 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

@@ -0,0 +1,137 @@
+/*=============================================== 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

@@ -0,0 +1,46 @@
+/*=============================================== 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

@@ -0,0 +1,23 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,178 @@
+/*=============================================== 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

@@ -0,0 +1,60 @@
+/*=============================================== 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

@@ -0,0 +1,97 @@
+/*=============================================== 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

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