@julseb-lib/react 0.0.63 → 0.0.64

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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