@julseb-lib/react 0.0.51 → 0.0.52

package/src/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/src/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/src/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/src/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/src/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/src/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/src/lib/components/Tabs/__preview__/Tabs.preview.tsx

@@ -1,64 +0,0 @@
-/*=============================================== TabsPreview ===============================================*/
-
-import { Tabs, Text } from "../../../"
-import type { LibTabItem } from "../../../types"
-import type { ILibTabs } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const tabsItems: Array<LibTabItem> = [
-    {
-        title: "First",
-        content: "Content tab 1",
-    },
-    {
-        title: "Second",
-        content: (
-            <>
-                <Text>Hello</Text>
-                <Text>World</Text>
-            </>
-        ),
-    },
-    {
-        title: "Third",
-        content: "Content tab 3",
-    },
-]
-
-export const tabsPreview: ComponentPreview<ILibTabs> = {
-    name: "Tabs",
-    component: Tabs,
-    category: "components",
-    import: "Tabs",
-    additionalImports: null,
-    optionalImports: [
-        "TabsContainer",
-        "TabsButtonsContainer",
-        "TabButton",
-        "TabItem",
-    ],
-    propsImport: "ILibTabs",
-    additionalTypeImports: ["LibTabItem"],
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Basic",
-            props: {
-                tabsItems,
-                showInUrl: true,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Rounded",
-            props: {
-                tabsItems,
-                variant: "rounded",
-                justify: "stretch",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-    ],
-}

package/src/lib/components/Tabs/__tests__/Tabs.cy.tsx

@@ -1,62 +0,0 @@
-/*=============================================== Tabs tests ===============================================*/
-
-import { Tabs, LIB_TOKENS } from "../../.."
-import { tabsItems } from "./data"
-
-describe("<Tabs />", () => {
-    it("renders <Tabs /> component", () => {
-        cy.mount(
-            <Tabs
-                data-testid="testid"
-                className="className"
-                tabsItems={tabsItems}
-            />
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest("testid.TabsButtonsContainer")
-            .should("exist")
-            .should("have.class", "TabsButtonsContainer")
-        cy.dataTest("testid.TabsButtonsContainer.TabButton")
-            .should("exist")
-            .should("have.class", "TabButton")
-            .should("have.length", 3)
-
-        cy.dataTest("testid.TabItem")
-            .should("exist")
-            .should("have.class", "TabItem")
-            .should("have.length", 3)
-
-        cy.dataTest("testid.TabItem").eq(0).should("be.visible")
-        cy.dataTest("testid.TabItem").eq(1).should("not.be.visible")
-    })
-
-    it("renders a rounded variant", () => {
-        cy.mount(
-            <Tabs
-                data-testid="testid"
-                className="className"
-                tabsItems={tabsItems}
-                variant="rounded"
-            />
-        )
-
-        cy.dataTest("testid.TabsButtonsContainer").should(
-            "have.css",
-            "background-color",
-            LIB_TOKENS.colors.light["gray-50"].rgb
-        )
-    })
-
-    it("changes page on click", () => {
-        cy.mount(
-            <Tabs
-                data-testid="testid"
-                className="className"
-                tabsItems={tabsItems}
-            />
-        )
-
-        cy.dataTest("testid.TabsButtonsContainer.TabButton").eq(2).click()
-        cy.dataTest("testid.TabItem").eq(2).should("have.text", "Content tab 3")
-    })
-})

package/src/lib/components/Tabs/__tests__/data.tsx

@@ -1,24 +0,0 @@
-/*=============================================== Tabs tests demo ===============================================*/
-
-import { Text } from "../../Text"
-import type { LibTabItem } from "../../../types"
-
-export const tabsItems: Array<LibTabItem> = [
-    {
-        title: "First",
-        content: "Content tab 1",
-    },
-    {
-        title: "Second",
-        content: (
-            <>
-                <Text>Hello</Text>
-                <Text>World</Text>
-            </>
-        ),
-    },
-    {
-        title: "Third",
-        content: "Content tab 3",
-    },
-]

package/src/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/src/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,
-}