@julseb-lib/react 0.0.50 → 0.0.52

package/dist/lib/components/Stepper/Stepper.tsx

@@ -1,96 +0,0 @@
-/*=============================================== Stepper component ===============================================*/
-
-import { forwardRef } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Step } from "./Step"
-import { StyledStepper } from "./styles"
-import type { ILibStepper } from "./types"
-
-/**
- * @description Returns a Stepper component
- * @link https://documentation-components-react.vercel.app/components/stepper
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop steps: Array<LibStep> => only if children is not defined
- * @prop children?: ReactChildren => only if steps is not defined
- * @prop direction?: "column" | "row"
- * @prop activeStep?: number
- * @prop iconActive?: string | JSX.Element
- * @prop iconActiveSize?: number
- * @prop iconBaseUrl?: string
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- *
- * @type LibStep
- * @extends LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop text: string
- * @prop onClick?: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to?: string => only if onClick and href are not defined
- * @prop href?: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
- */
-export const Stepper = forwardRef<HTMLDivElement, ILibStepper>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            steps,
-            className,
-            activeStep = 0,
-            direction = "row",
-            iconActive,
-            iconActiveSize,
-            iconBaseUrl,
-            accentColor = "primary",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledStepper
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $direction={direction}
-                $accentColor={accentColor}
-                {...rest}
-            >
-                {steps
-                    ? steps.map((step, i) => (
-                          <Step
-                              data-testid={
-                                  step["data-testid"] ||
-                                  (testid && `${testid}.Step-${i}`)
-                              }
-                              className={
-                                  step.className || (className && "Step")
-                              }
-                              id={step.id}
-                              ref={step.ref}
-                              number={i + 1}
-                              isActive={activeStep >= i + 1}
-                              isDone={activeStep >= i}
-                              iconActive={iconActive}
-                              iconActiveSize={iconActiveSize}
-                              direction={direction}
-                              accentColor={accentColor}
-                              iconBaseUrl={iconBaseUrl}
-                              key={uuid()}
-                              {...step}
-                          >
-                              {step.text}
-                          </Step>
-                      ))
-                    : children}
-            </StyledStepper>
-        )
-    }
-)

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

@@ -1,4 +0,0 @@
-/*=============================================== Stepper exports ===============================================*/
-
-export * from "./Stepper"
-export * from "./Step"

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

@@ -1,115 +0,0 @@
-/*=============================================== Stepper styles ===============================================*/
-
-import styled from "styled-components"
-import {
-    setDefaultTheme,
-    Mixins,
-    RADIUSES,
-    FONT_WEIGHTS,
-    TRANSITIONS,
-} from "../../"
-import type { LibColorsHover, LibStepperDirection } from "../../types"
-
-const StyledStep = styled.span<{
-    $direction: LibStepperDirection
-    $accentColor: LibColorsHover
-}>`
-    position: relative;
-    z-index: 1;
-    text-decoration: none;
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    ${Mixins.Flexbox({
-        $alignItems: "center",
-        $gap: "xxs",
-        $inline: true,
-    })}
-
-    small {
-        color: ${({ theme }) => theme.FONT};
-    }
-
-    &.StepLink {
-        small {
-            color: ${({ theme, $accentColor }) =>
-                Mixins.ColorsHoverDefault($accentColor, theme)};
-            font-weight: ${FONT_WEIGHTS.BLACK};
-            cursor: pointer;
-            transition: ${TRANSITIONS.SHORT};
-        }
-
-        &:hover small {
-            color: ${({ theme, $accentColor }) =>
-                Mixins.ColorsHoverHover($accentColor, theme)};
-        }
-
-        &:active small {
-            color: ${({ theme, $accentColor }) =>
-                Mixins.ColorsHoverActive($accentColor, theme)};
-        }
-    }
-`
-
-const StyledStepper = styled.div<{
-    $direction: LibStepperDirection
-    $accentColor: LibColorsHover
-}>`
-    position: relative;
-    ${({ $direction }) =>
-        Mixins.Flexbox({
-            $alignItems: "flex-start",
-            $justifyContent:
-                $direction === "column" ? "flex-start" : "space-between",
-            $gap: $direction === "column" ? "l" : "xs",
-            $flexDirection: $direction,
-        })};
-
-    &:before {
-        content: "";
-        position: absolute;
-        left: 12px;
-        top: 12px;
-        background-color: ${({ theme, $accentColor }) =>
-            Mixins.AllColors($accentColor, theme)};
-        z-index: 0;
-        width: ${({ $direction }) =>
-            $direction === "column" ? "2px" : "calc(100% - 24px)"};
-        height: ${({ $direction }) =>
-            $direction === "column" ? "calc(100% - 24px)" : "2px"};
-    }
-
-    ${StyledStep} {
-        flex-direction: ${({ $direction }) =>
-            $direction === "column" ? "row" : "column"};
-        justify-content: ${({ $direction }) =>
-            $direction === "column" ? "flex-start" : "center"};
-    }
-`
-
-const NUMBER_SIZE = 24
-
-const NumberContainer = styled.span<{ $accentColor: LibColorsHover }>`
-    width: ${NUMBER_SIZE}px;
-    height: ${NUMBER_SIZE}px;
-    border-radius: ${RADIUSES.CIRCLE};
-    outline: 2px solid ${({ theme }) => theme.BACKGROUND};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })};
-    font-weight: ${FONT_WEIGHTS.BLACK};
-    background-color: ${({ theme, $accentColor }) =>
-        Mixins.ColorsHoverHover($accentColor, theme)};
-    color: ${({ theme }) => theme.BACKGROUND};
-
-    &.Active {
-        background-color: ${({ theme, $accentColor }) =>
-            Mixins.ColorsHoverDefault($accentColor, theme)};
-    }
-`
-
-setDefaultTheme([StyledStepper, StyledStep, NumberContainer])
-
-export { StyledStepper, StyledStep, NumberContainer }

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

@@ -1,48 +0,0 @@
-/*=============================================== Stepper types ===============================================*/
-
-import type {
-    LibColorsHover,
-    LibComponentBase,
-    LibIcon,
-    LibStep,
-    ReactChildren,
-    LibStepperDirection,
-    LibButtonLinkBlank,
-} from "../../types"
-
-/*====================== Stepper ======================*/
-
-interface ILibStepperBase extends LibComponentBase<HTMLDivElement> {
-    direction?: LibStepperDirection
-    activeStep?: number
-    iconActive?: LibIcon
-    iconActiveSize?: number
-    iconBaseUrl?: string
-    accentColor?: LibColorsHover
-}
-
-interface StepperWithSteps extends ILibStepperBase {
-    steps: Array<LibStep>
-    children?: never
-}
-
-interface StepperWithChildren extends ILibStepperBase {
-    steps?: never
-    children?: ReactChildren
-}
-
-export type ILibStepper = StepperWithSteps | StepperWithChildren
-
-/*====================== Step ======================*/
-
-export type ILibStep = LibComponentBase<HTMLSpanElement> &
-    LibButtonLinkBlank & {
-        direction?: LibStepperDirection
-        accentColor?: LibColorsHover
-        isActive?: boolean
-        isDone?: boolean
-        iconActive?: LibIcon
-        iconActiveSize?: number
-        number?: number
-        iconBaseUrl?: string
-    }

package/dist/lib/components/Sticky/Sticky.tsx

@@ -1,30 +0,0 @@
-/*=============================================== Sticky component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledSticky } from "./styles"
-import type { ILibSticky } from "./types"
-
-/**
- * @description Returns a Sticky component
- * @link https://documentation-components-react.vercel.app/components/sticky
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop top?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- */
-export const Sticky = forwardRef<HTMLDivElement, ILibSticky>(
-    ({ "data-testid": testid, as, children, top = "s", ...rest }, ref) => {
-        return (
-            <StyledSticky
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $top={top}
-                {...rest}
-            >
-                {children}
-            </StyledSticky>
-        )
-    }
-)

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

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

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

@@ -1,15 +0,0 @@
-/*=============================================== Sticky styles ===============================================*/
-
-import styled from "styled-components"
-import { Mixins, setDefaultTheme } from "../../"
-import type { LibSpacers } from "../../types"
-
-const StyledSticky = styled.div<{ $top: LibSpacers }>`
-    position: -webkit-sticky;
-    position: sticky;
-    top: ${({ $top }) => Mixins.Spacer($top)};
-`
-
-setDefaultTheme([StyledSticky])
-
-export { StyledSticky }

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

@@ -1,7 +0,0 @@
-/*=============================================== Sticky types ===============================================*/
-
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibSticky extends LibComponentBase<HTMLDivElement> {
-    top?: LibSpacers
-}

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

@@ -1,17 +0,0 @@
-/*=============================================== TBody component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTBody } from "./types"
-
-/**
- * @description Returns a TBody component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
- */
-export const TBody = forwardRef<HTMLTableSectionElement, ILibTBody>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tbody data-testid={testid} ref={ref} {...rest} />
-    }
-)

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

@@ -1,17 +0,0 @@
-/*=============================================== THead component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTHead } from "./types"
-
-/**
- * @description Returns a THead component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
- */
-export const THead = forwardRef<HTMLTableSectionElement, ILibTHead>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <thead data-testid={testid} ref={ref} {...rest} />
-    }
-)

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

@@ -1,124 +0,0 @@
-/*=============================================== Table component ===============================================*/
-
-import { forwardRef } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Linkify } from "../../"
-import { THead } from "./THead"
-import { TBody } from "./TBody"
-import { Tr } from "./Tr"
-import { Td } from "./Td"
-import { StyledTable } from "./styles"
-import type { ILibTable } from "./types"
-
-/**
- * @description Returns a Table component
- * @link https://documentation-components-react.vercel.app/components/table
- * @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
- */
-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"}
-                    >
-                        <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>
-                )}
-
-                {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 +0,0 @@
-/*=============================================== Td component ===============================================*/
-
-import { forwardRef } 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
- * @extends HTMLTableCellElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableCellElement>
- * @prop noPadding?: boolean
- */
-export const Td = forwardRef<HTMLTableCellElement, ILibTd>(
-    ({ "data-testid": testid, noPadding, ...rest }, ref) => {
-        return (
-            <StyledTd
-                data-testid={testid}
-                ref={ref}
-                $noPadding={noPadding}
-                {...rest}
-            />
-        )
-    }
-)

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

@@ -1,17 +0,0 @@
-/*=============================================== Tr component ===============================================*/
-
-import { forwardRef } from "react"
-import type { ILibTr } from "./types"
-
-/**
- * @description Returns a Tr component
- * @link https://documentation-components-react.vercel.app/components/table
- * @extends HTMLTableRowElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableRowElement>
- */
-export const Tr = forwardRef<HTMLTableRowElement, ILibTr>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tr data-testid={testid} ref={ref} {...rest} />
-    }
-)

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

@@ -1,7 +0,0 @@
-/*=============================================== Table exports ===============================================*/
-
-export * from "./Table"
-export * from "./THead"
-export * from "./TBody"
-export * from "./Tr"
-export * from "./Td"

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

@@ -1,114 +0,0 @@
-/*=============================================== Table styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { setDefaultTheme, SPACERS, Mixins, FONT_SIZES, MEDIA } from "../../"
-import { TextBaseMixin } from "../ComponentsMixins"
-import type { CssVerticalAlign, LibTableVariant } from "../../types"
-
-const StyledTable = styled.table<{
-    $vAlign: CssVerticalAlign
-    $variant: LibTableVariant
-}>`
-    ${TextBaseMixin({
-        $fontSize: "small",
-        $fontWeight: "regular",
-        $linkColor: "primary",
-    })};
-    display: table;
-    border-collapse: collapse;
-    border-spacing: 0;
-    table-layout: fixed;
-    width: 100%;
-    vertical-align: ${({ $vAlign }) => $vAlign};
-    height: 1px;
-
-    td {
-        vertical-align: ${({ $vAlign }) => $vAlign};
-
-        & > * {
-            height: 100%;
-        }
-    }
-
-    td,
-    th {
-        padding: ${SPACERS.XXS} ${SPACERS.XS};
-        display: table-cell;
-        overflow-x: scroll;
-        ${Mixins.HideScrollbar};
-
-        & > * {
-            font-size: ${FONT_SIZES.SMALL};
-        }
-
-        @media ${MEDIA.BREAKPOINT_MOBILE} {
-            display: block;
-        }
-    }
-
-    thead {
-        background-color: ${({ theme }) => theme.PRIMARY_500};
-        text-align: left;
-        color: ${({ theme }) => theme.BACKGROUND};
-
-        && {
-            a {
-                color: ${({ theme }) =>
-                    Mixins.ColorsHoverDefault("background", theme)};
-
-                &:hover {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverHover("background", theme)};
-                }
-
-                &:active {
-                    color: ${({ theme }) =>
-                        Mixins.ColorsHoverActive("background", theme)};
-                }
-            }
-        }
-    }
-
-    ${({ $variant, theme }) => {
-        switch ($variant) {
-            case "border-bottom":
-                return css`
-                    tbody tr {
-                        border-bottom: 1px solid ${theme.GRAY_200};
-                    }
-                `
-            case "bordered":
-                return css`
-                    border: 1px solid ${theme.GRAY_200};
-
-                    thead th:not(:last-child) {
-                        border-right: 1px solid ${theme.BACKGROUND};
-                    }
-
-                    td {
-                        border: 1px solid ${theme.GRAY_200};
-                    }
-                `
-            case "stripped":
-                return css`
-                    tbody tr:nth-child(odd) {
-                        background-color: ${theme.BACKGROUND};
-                    }
-
-                    tbody tr:nth-child(even) {
-                        background-color: ${theme.GRAY_50};
-                    }
-                `
-        }
-    }}
-`
-
-const StyledTd = styled.td<{ $noPadding: boolean | undefined }>`
-    && {
-        padding: ${({ $noPadding }) => $noPadding && 0};
-    }
-`
-
-setDefaultTheme([StyledTable, StyledTd])
-
-export { StyledTable, StyledTd }