@julseb-lib/react 0.0.63 → 0.0.64

package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx

@@ -0,0 +1,441 @@
+/*=============================================== ComponentsMixins ===============================================*/
+
+import { css } from "styled-components"
+import {
+    MEDIA,
+    FONT_FAMILIES,
+    INPUT_HEIGHT,
+    LINE_HEIGHTS,
+    Mixins,
+    RADIUSES,
+    SPACERS,
+    TRANSITIONS,
+    COLORS_LIGHT,
+    COLORS_DARK,
+    FONT_SIZES,
+    FONT_WEIGHTS,
+} from "../../"
+import type {
+    ILibButtonMixin,
+    ILibInputBaseMixin,
+    ILibTextBaseMixin,
+} from "./types"
+
+/*====================== Button ======================*/
+
+export const ButtonMixin = ({
+    $color,
+    $shadow,
+    $borderRadius,
+    $variant,
+}: ILibButtonMixin) => css`
+    border: 1px solid transparent;
+    text-decoration: none;
+    background-color: transparent;
+    line-height: 100%;
+    transition: ${TRANSITIONS.SHORT};
+    cursor: pointer;
+    ${Mixins.BorderRadius($borderRadius)}
+    ${Mixins.Flexbox({
+        $inline: true,
+        $alignItems: "center",
+        $justifyContent: "center",
+    })}
+    ${Mixins.BoxShadow($shadow)}
+
+    ${({ theme }) => {
+        switch ($variant) {
+            case "plain":
+                return css`
+                    background-color: ${Mixins.ColorsHoverDefault(
+                        $color,
+                        theme
+                    )};
+                    color: ${$color === "white"
+                        ? theme.PRIMARY_500
+                        : $color === "background"
+                        ? theme.FONT
+                        : theme.BACKGROUND};
+
+                    @media ${MEDIA.HOVER} {
+                        &:not(:disabled):hover {
+                            background-color: ${Mixins.ColorsHoverHover(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:not(:disabled):active {
+                            background-color: ${Mixins.ColorsHoverActive(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:disabled {
+                            background-color: ${theme.GRAY_100};
+                            color: ${theme.GRAY_500};
+                        }
+                    }
+                `
+            case "transparent":
+                return css`
+                    color: ${Mixins.ColorsHoverDefault($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:not(:disabled):hover {
+                            color: ${Mixins.ColorsHoverHover($color, theme)};
+                        }
+
+                        &:not(:disabled):active {
+                            color: ${Mixins.ColorsHoverActive($color, theme)};
+                        }
+
+                        &:disabled {
+                            color: ${theme.GRAY_500};
+                        }
+                    }
+                `
+            case "ghost":
+                return css`
+                    background-color: ${Mixins.ColorsGhostDefault(
+                        $color,
+                        theme
+                    )};
+                    color: ${$color === "white" || $color === "background"
+                        ? theme.PRIMARY_500
+                        : $color === "font"
+                        ? theme.BACKGROUND
+                        : Mixins.ColorsHoverDefault($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:not(:disabled):hover {
+                            background-color: ${Mixins.ColorsGhostHover(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:not(:disabled):active {
+                            background-color: ${Mixins.ColorsGhostActive(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:disabled {
+                            background-color: ${theme.GRAY_50};
+                            color: ${theme.GRAY_500};
+                        }
+                    }
+                `
+            case "outline":
+                return css`
+                    border-color: ${Mixins.ColorsHoverDefault($color, theme)};
+                    color: ${Mixins.ColorsHoverDefault($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:not(:disabled):hover {
+                            border-color: ${Mixins.ColorsHoverHover(
+                                $color,
+                                theme
+                            )};
+                            color: ${Mixins.ColorsHoverHover($color, theme)};
+                        }
+
+                        &:not(:disabled):active {
+                            border-color: ${Mixins.ColorsHoverActive(
+                                $color,
+                                theme
+                            )};
+                            color: ${Mixins.ColorsHoverActive($color, theme)};
+                        }
+
+                        &:disabled {
+                            border-color: ${theme.GRAY_500};
+                            color: ${theme.GRAY_500};
+                        }
+                    }
+                `
+            default:
+                return null
+        }
+    }}
+`
+/*====================== Text ======================*/
+
+export const TextBaseMixin = ({
+    $fontSize,
+    $fontWeight,
+    $textAlign,
+    $color = "currentColor",
+    $linkColor = "primary",
+}: ILibTextBaseMixin) => css`
+    font-family: ${FONT_FAMILIES.BODY};
+    font-size: ${Mixins.FontSize($fontSize)};
+    font-weight: ${Mixins.FontWeight($fontWeight)};
+    text-align: ${$textAlign};
+    color: ${({ theme }) => Mixins.AllColors($color, theme)};
+    line-height: ${LINE_HEIGHTS.BODY};
+
+    & > * {
+        font-size: inherit;
+    }
+
+    & > code {
+        font-family: ${FONT_FAMILIES.CODE};
+        line-height: ${LINE_HEIGHTS.CODE};
+        color: ${({ theme }) => theme.PRIMARY_500};
+        padding: ${SPACERS.XXS};
+        background-color: ${({ theme }) => theme.GRAY_50};
+        border-radius: ${RADIUSES.S};
+        font-size: inherit;
+    }
+
+    & > a,
+    & > button {
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        text-decoration: none;
+        font-size: inherit;
+        font-weight: ${FONT_WEIGHTS.BLACK};
+        transition: ${TRANSITIONS.SHORT};
+        color: ${({ theme }) => Mixins.ColorsHoverDefault($linkColor, theme)};
+
+        &:not(:disabled) {
+            @media ${MEDIA.HOVER} {
+                &:hover {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverHover($linkColor, theme)};
+                }
+
+                &:active {
+                    color: ${({ theme }) =>
+                        Mixins.ColorsHoverActive($linkColor, theme)};
+                }
+            }
+        }
+    }
+`
+
+/*====================== Input ======================*/
+
+export const InputBaseMixin = ({
+    $disabled,
+    $inputBackground,
+    $inputVariant,
+    $validationStatus,
+}: ILibInputBaseMixin) => css`
+    height: ${INPUT_HEIGHT}px;
+    width: 100%;
+    flex-grow: 1;
+    border: none;
+    background-color: transparent;
+    outline: none;
+    font-family: ${FONT_FAMILIES.BODY};
+    padding: 0 ${SPACERS.XS};
+    font-size: ${FONT_SIZES.BODY};
+
+    &::placeholder {
+        color: ${({ theme }) => theme.GRAY_400};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: ${({ theme }) => theme.GRAY_100};
+        color: ${({ theme }) => theme.GRAY_500};
+
+        &::placeholder {
+            color: ${({ theme }) => theme.GRAY_500};
+        }
+    }
+
+    &[type="file"],
+    &[type="color"] {
+        padding: 0;
+        cursor: pointer;
+    }
+
+    &[type="file"] {
+        overflow: hidden;
+
+        &::file-selector-button {
+            height: 100%;
+            background-color: ${({ theme }) => theme.GRAY_100};
+            color: ${({ theme }) => theme.FONT};
+            border: none;
+            height: ${INPUT_HEIGHT}px;
+            padding: 0 ${SPACERS.XS};
+            line-height: 100%;
+            transition: ${TRANSITIONS.SHORT};
+            cursor: pointer;
+            transform: translateY(-1px);
+        }
+
+        @media ${MEDIA.HOVER} {
+            &:not(:disabled):hover::file-selector-button {
+                background-color: ${({ theme }) => theme.GRAY_300};
+            }
+
+            &:not(:disabled):active::file-selector-button {
+                background-color: ${({ theme }) => theme.GRAY_200};
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+
+            &::file-selector-button {
+                cursor: not-allowed;
+                color: ${({ theme }) => theme.GRAY_500};
+            }
+        }
+
+        ${() => {
+            switch ($inputBackground) {
+                case "light":
+                    return css`
+                        &::file-selector-button {
+                            background-color: ${COLORS_LIGHT.GRAY_100};
+                            color: ${COLORS_LIGHT.FONT};
+                        }
+
+                        @media ${MEDIA.HOVER} {
+                            &:not(:disabled):hover::file-selector-button {
+                                background-color: ${COLORS_LIGHT.GRAY_300};
+                            }
+
+                            &:not(:disabled):active::file-selector-button {
+                                background-color: ${COLORS_LIGHT.GRAY_200};
+                            }
+                        }
+
+                        &:disabled {
+                            &::file-selector-button {
+                                color: ${COLORS_LIGHT.GRAY_500};
+                            }
+                        }
+                    `
+                case "dark":
+                    return css`
+                        &::file-selector-button {
+                            background-color: ${COLORS_DARK.GRAY_100};
+                            color: ${COLORS_DARK.FONT};
+                        }
+
+                        @media ${MEDIA.HOVER} {
+                            &:not(:disabled):hover::file-selector-button {
+                                background-color: ${COLORS_DARK.GRAY_300};
+                            }
+
+                            &:not(:disabled):active::file-selector-button {
+                                background-color: ${COLORS_DARK.GRAY_200};
+                            }
+                        }
+
+                        &:disabled {
+                            &::file-selector-button {
+                                color: ${COLORS_DARK.GRAY_500};
+                            }
+                        }
+                    `
+                default:
+                    return null
+            }
+        }}
+    }
+
+    &[type="color"] {
+        padding: ${SPACERS.XS};
+        overflow: hidden;
+
+        &::-webkit-color-swatch-wrapper,
+        &::-webkit-color-swatch {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            border-radius: ${$inputVariant === "pill"
+                ? RADIUSES.ROUND
+                : RADIUSES.S};
+        }
+    }
+
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="week"],
+    &[type="time"] {
+        padding-left: ${SPACERS.XS};
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-calendar-picker-indicator {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            display: none;
+        }
+    }
+
+    &[type="search"] {
+        &::-webkit-search-cancel-button {
+            -webkit-appearance: none;
+            appearance: none;
+        }
+    }
+
+    ${() => {
+        switch ($inputBackground) {
+            case "light":
+                return css`
+                    background-color: ${$validationStatus === false
+                        ? COLORS_LIGHT.DANGER_50
+                        : $disabled
+                        ? COLORS_LIGHT.GRAY_100
+                        : COLORS_LIGHT.BACKGROUND};
+                    color: ${$disabled
+                        ? COLORS_LIGHT.GRAY_500
+                        : COLORS_LIGHT.FONT};
+
+                    &::placeholder {
+                        color: ${COLORS_LIGHT.GRAY_400};
+                    }
+
+                    &:disabled {
+                        background-color: ${COLORS_LIGHT.GRAY_100};
+                        color: ${COLORS_LIGHT.GRAY_500};
+
+                        &::placeholder {
+                            color: ${COLORS_LIGHT.GRAY_500};
+                        }
+                    }
+                `
+            case "dark":
+                return css`
+                    background-color: ${$validationStatus === false
+                        ? COLORS_DARK.DANGER_50
+                        : $disabled
+                        ? COLORS_DARK.GRAY_100
+                        : COLORS_DARK.BACKGROUND};
+                    color: ${$disabled
+                        ? COLORS_DARK.GRAY_500
+                        : COLORS_DARK.FONT};
+
+                    &::placeholder {
+                        color: ${COLORS_DARK.GRAY_400};
+                    }
+
+                    &:disabled {
+                        background-color: ${COLORS_DARK.GRAY_100};
+                        color: ${COLORS_DARK.GRAY_500};
+
+                        &::placeholder {
+                            color: ${COLORS_DARK.GRAY_500};
+                        }
+                    }
+                `
+            default:
+                return null
+        }
+    }}
+`

package/dist/lib/components/ComponentsMixins/hooks/useKeyboardNavigation.tsx

@@ -0,0 +1,81 @@
+/*=============================================== Component Hooks ===============================================*/
+
+import { useState, useCallback, useRef, useEffect } from "react"
+import type { DispatchState } from "../../../types"
+
+interface ILibKeyboardNav<T> {
+    data: T
+    value: string
+    setValue: DispatchState<string>
+}
+
+export function useKeyboardNavigation<T>({
+    data,
+    value,
+    setValue,
+}: ILibKeyboardNav<T>) {
+    const [isOpen, setIsOpen] = useState(false)
+    const [cursor, setCursor] = useState(0)
+    const listRef = useRef<HTMLDivElement>(null)
+
+    const handleKeyboardNavigation = useCallback(
+        (e: KeyboardEvent) => {
+            const { key } = e
+            const dataArr: Array<T> = data as Array<T>
+
+            if (isOpen) {
+                if (key === "ArrowDown") {
+                    e.preventDefault()
+
+                    if (dataArr.length) {
+                        setCursor(prev =>
+                            prev < dataArr.length ? prev + 1 : 0
+                        )
+
+                        if (cursor === dataArr.length)
+                            listRef?.current?.scrollTo({ top: 0 })
+                        else listRef?.current?.scrollTo({ top: cursor * 40 })
+                    }
+                }
+
+                if (key === "ArrowUp") {
+                    e.preventDefault()
+
+                    if (dataArr.length) {
+                        setCursor(prev =>
+                            prev > 0 ? prev - 1 : dataArr.length
+                        )
+
+                        if (cursor === 0)
+                            listRef?.current?.scrollTo({
+                                top: listRef?.current?.scrollHeight,
+                            })
+                        else listRef?.current?.scrollTo({ top: cursor * 40 })
+                    }
+                }
+
+                if (key === "Tab" || key === "Enter") {
+                    e.preventDefault()
+
+                    if (cursor === dataArr.length) {
+                        setValue(value)
+                        setIsOpen(false)
+                    } else {
+                        setValue((data as Array<any>)[cursor])
+                        setIsOpen(false)
+                    }
+                }
+            }
+        },
+        [isOpen, cursor, data, value, setValue]
+    )
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleKeyboardNavigation)
+
+        return () =>
+            document.removeEventListener("keydown", handleKeyboardNavigation)
+    }, [handleKeyboardNavigation])
+
+    return { isOpen, setIsOpen, cursor, listRef, handleKeyboardNavigation }
+}

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

@@ -0,0 +1,5 @@
+/*=============================================== ComponentsMixins exports ===============================================*/
+
+export * from "./ComponentsMixins"
+export * from "./hooks/useKeyboardNavigation"
+export * from "./types"

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

@@ -0,0 +1,37 @@
+/*=============================================== ComponentsMixins types ===============================================*/
+
+import type {
+    CssTextAlign,
+    ILibBoxShadow,
+    ILibRadius,
+    LibAllColors,
+    LibButtonVariant,
+    LibColorsHover,
+    LibFontSizes,
+    LibFontWeights,
+    LibInputBackground,
+    LibInputVariant,
+    LibValidationStatus,
+} from "../../types"
+
+export interface ILibButtonMixin {
+    $color: LibColorsHover
+    $shadow?: ILibBoxShadow
+    $borderRadius?: ILibRadius
+    $variant?: LibButtonVariant
+}
+
+export interface ILibTextBaseMixin {
+    $fontSize: LibFontSizes | "inherit"
+    $fontWeight: LibFontWeights
+    $textAlign?: CssTextAlign
+    $color?: LibAllColors
+    $linkColor?: LibColorsHover
+}
+
+export interface ILibInputBaseMixin {
+    $validationStatus: LibValidationStatus | undefined
+    $inputBackground: LibInputBackground | undefined
+    $disabled: boolean | undefined
+    $inputVariant: LibInputVariant | undefined
+}

package/dist/lib/components/Cover/Cover.tsx

@@ -0,0 +1,72 @@
+/*=============================================== Cover component ===============================================*/
+
+import { forwardRef } from "react"
+import { StyledCover, CoverImg, CoverContent } from "./styles"
+import type { ILibCover } from "./types"
+
+/**
+ * @description Returns a Cover component
+ * @link https://documentation-components-react.vercel.app/components/cover
+ * @extends ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop img: string
+ * @prop alt?: string
+ * @prop overlay?: "black-50" | "black-80" | "white-50" | "white-80" | "gradient-black" | "gradient-white"
+ * @prop height?: number | string
+ * @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" }
+ */
+export const Cover = forwardRef<HTMLDivElement, ILibCover>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            children,
+            img,
+            alt,
+            overlay,
+            height = "100vh",
+            gap = "s",
+            flexDirection = "column",
+            justifyContent = "center",
+            alignItems = "center",
+            padding = "xxl",
+            className,
+            ...rest
+        },
+        ref
+    ) => {
+        return (
+            <StyledCover
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                $height={height}
+                $overlay={overlay}
+                {...rest}
+            >
+                <CoverImg
+                    data-testid={testid && `${testid}.CoverImage`}
+                    className={className && "CoverImage"}
+                    src={img}
+                    alt={alt}
+                />
+
+                <CoverContent
+                    data-testid={testid && `${testid}.CoverContent`}
+                    className={className && "CoverContent"}
+                    flexDirection={flexDirection}
+                    gap={gap}
+                    justifyContent={justifyContent}
+                    alignItems={alignItems}
+                    $overlay={overlay}
+                    $padding={padding}
+                >
+                    {children}
+                </CoverContent>
+            </StyledCover>
+        )
+    }
+)

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

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