@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,361 @@
+/*=============================================== Slideshow styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
+import {
+    setDefaultTheme,
+    Mixins,
+    RADIUSES,
+    MEDIA,
+    SPACERS,
+    Flexbox,
+    TRANSITIONS,
+} from "../../"
+import type {
+    LibSlideshowButtonSize,
+    LibColorsHover,
+    LibSlideshowButtonPosition,
+    CssObjectFit,
+    LibSlideshowPaginationPosition,
+    LibSlideshowPagination,
+} from "../../types"
+
+const StyledSlideshow = styled.div`
+    width: 100%;
+    ${Mixins.Flexbox({
+        $gap: "xs",
+        $flexDirection: "column",
+        $alignItems: "center",
+        $justifyItems: "center",
+    })};
+    position: relative;
+`
+
+const SlideshowWrapper = styled(Flexbox).attrs({ flexDirection: "column" })<{
+    $height: string | number
+}>`
+    width: 100%;
+    height: ${({ $height }) => stringifyPx($height)};
+    position: relative;
+    overflow: hidden;
+`
+
+const SlideshowContentWrapper = styled(Flexbox)`
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+`
+
+const SlideshowContent = styled(Flexbox)<{
+    $speed: number
+    $active: number
+    $imgFit: CssObjectFit
+}>`
+    transition: all ${({ $speed }) => $speed}ms ease;
+    width: 100%;
+    transform: ${({ $active }) => `translateX(-${$active * 100}%)`};
+    height: 100%;
+
+    ${Mixins.HideScrollbar}
+
+    & > * {
+        width: 100%;
+        height: 100%;
+        flex-shrink: 0;
+        flex-grow: 1;
+        transition: ${TRANSITIONS.LONG};
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: ${({ $imgFit }) => $imgFit};
+    }
+`
+
+const BUTTON_SIZE = 32
+const BUTTON_SIZE_LARGE = 48
+
+const StyledSlideshowButton = styled.button<{
+    $size: LibSlideshowButtonSize
+    $color: LibColorsHover
+    $position: LibSlideshowButtonPosition
+    $hideOnTouch: boolean
+}>`
+    border-radius: ${({ $position, $size }) =>
+        $size === "small"
+            ? RADIUSES.CIRCLE
+            : $position === "left"
+            ? `0 ${RADIUSES.M} ${RADIUSES.M} 0`
+            : `${RADIUSES.M} 0 0 ${RADIUSES.M}`};
+    padding: 0;
+    border: none;
+    position: absolute;
+    z-index: 2;
+    ${Mixins.Flexbox({
+        $alignItems: "center",
+        $justifyContent: "center",
+    })}
+    color: ${({ $color, theme }) =>
+        $color === "white" || $color === "background"
+            ? theme.PRIMARY_500
+            : theme.BACKGROUND};
+    background-color: ${({ theme, $color }) =>
+        Mixins.ColorsHoverDefault($color, theme)};
+    width: ${({ $size }) =>
+        $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px;
+    height: ${({ $size }) =>
+        $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px;
+    top: calc(
+        50% -
+            ${({ $size }) =>
+                $size === "large" ? BUTTON_SIZE_LARGE : BUTTON_SIZE}px / 2
+    );
+    left: ${({ $position, $size }) => {
+        if ($position === "right") return null
+        if ($size === "large") return "0"
+        if ($position === "left") return SPACERS.XS
+        return null
+    }};
+    right: ${({ $position, $size }) => {
+        if ($position === "left") return null
+        if ($size === "large") return "0"
+        if ($position === "right") return SPACERS.XS
+        return null
+    }};
+
+    @media ${MEDIA.HOVER} {
+        &:hover {
+            background-color: ${({ theme, $color }) =>
+                Mixins.ColorsHoverHover($color, theme)};
+        }
+
+        &:active {
+            background-color: ${({ theme, $color }) =>
+                Mixins.ColorsHoverActive($color, theme)};
+        }
+    }
+
+    ${({ $hideOnTouch }) =>
+        $hideOnTouch &&
+        css`
+            @media ${MEDIA.TOUCH} {
+                display: none;
+            }
+        `}
+`
+
+const StyledSlideshowPagination = styled(Flexbox).attrs({
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "xs",
+})<{ $hideOnTouch: boolean; $position: LibSlideshowPaginationPosition }>`
+    width: 100%;
+    max-width: 70%;
+
+    ${({ $position }) =>
+        $position === "inside" &&
+        css`
+            position: absolute;
+            bottom: 8px;
+        `}
+
+    ${({ $hideOnTouch }) =>
+        $hideOnTouch &&
+        css`
+            @media ${MEDIA.TOUCH} {
+                display: none;
+            }
+        `}
+`
+
+const DOT_SIZE = 8
+
+const SlideshowPaginationItem = styled.button<{
+    $type: LibSlideshowPagination
+    $color: LibColorsHover
+}>`
+    padding: 0;
+    border: none;
+    transition: ${TRANSITIONS.SHORT};
+
+    ${({ $type, $color, theme }) => {
+        switch ($type) {
+            case "bars":
+                return css`
+                    flex-grow: 1;
+                    height: 4px;
+                    border-radius: ${RADIUSES.ROUND};
+                    background-color: ${Mixins.ColorsHoverHover($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:hover {
+                            background-color: ${Mixins.ColorsHoverDefault(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:active {
+                            background-color: ${Mixins.ColorsHoverActive(
+                                $color,
+                                theme
+                            )};
+                        }
+                    }
+
+                    &.Active {
+                        background-color: ${Mixins.ColorsHoverDefault(
+                            $color,
+                            theme
+                        )};
+
+                        @media ${MEDIA.HOVER} {
+                            &:hover {
+                                background-color: ${Mixins.ColorsHoverHover(
+                                    $color,
+                                    theme
+                                )};
+                            }
+                        }
+                    }
+                `
+            case "dots":
+                return css`
+                    width: ${DOT_SIZE}px;
+                    height: ${DOT_SIZE}px;
+                    border-radius: 50%;
+                    background-color: ${Mixins.ColorsHoverHover($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:hover {
+                            background-color: ${Mixins.ColorsHoverDefault(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:active {
+                            background-color: ${Mixins.ColorsHoverActive(
+                                $color,
+                                theme
+                            )};
+                        }
+                    }
+
+                    &.Active {
+                        background-color: ${Mixins.ColorsHoverDefault(
+                            $color,
+                            theme
+                        )};
+
+                        @media ${MEDIA.HOVER} {
+                            &:hover {
+                                background-color: ${Mixins.ColorsHoverHover(
+                                    $color,
+                                    theme
+                                )};
+                            }
+                        }
+                    }
+                `
+            case "dots-outline":
+                return css`
+                    width: ${DOT_SIZE}px;
+                    height: ${DOT_SIZE}px;
+                    border-radius: 50%;
+                    background-color: transparent;
+                    border: 1px solid
+                        ${Mixins.ColorsHoverDefault($color, theme)};
+
+                    @media ${MEDIA.HOVER} {
+                        &:hover {
+                            border-color: ${Mixins.ColorsHoverHover(
+                                $color,
+                                theme
+                            )};
+                        }
+
+                        &:active {
+                            border-color: ${Mixins.ColorsHoverActive(
+                                $color,
+                                theme
+                            )};
+                        }
+                    }
+
+                    &.Active {
+                        background-color: ${Mixins.ColorsHoverDefault(
+                            $color,
+                            theme
+                        )};
+
+                        @media ${MEDIA.HOVER} {
+                            &:hover {
+                                background-color: ${Mixins.ColorsHoverHover(
+                                    $color,
+                                    theme
+                                )};
+                            }
+
+                            &:active {
+                                background-color: ${Mixins.ColorsHoverActive(
+                                    $color,
+                                    theme
+                                )};
+                            }
+                        }
+                    }
+                `
+            default:
+                return null
+        }
+    }}
+`
+
+const THUMBNAIL_SIZE = 48
+
+const SlideshowThumbnail = styled.button`
+    width: ${THUMBNAIL_SIZE}px;
+    height: ${THUMBNAIL_SIZE}px;
+    padding: 0;
+    border: none;
+    opacity: 0.5;
+    transition: ${TRANSITIONS.SHORT};
+
+    @media ${MEDIA.HOVER} {
+        &:hover {
+            opacity: 0.8;
+        }
+
+        &:active {
+            opacity: 0.9;
+        }
+    }
+
+    &.Active {
+        opacity: 1;
+    }
+`
+
+setDefaultTheme([
+    StyledSlideshow,
+    SlideshowWrapper,
+    SlideshowContentWrapper,
+    SlideshowContent,
+    StyledSlideshowButton,
+    StyledSlideshowPagination,
+    SlideshowPaginationItem,
+    SlideshowThumbnail,
+])
+
+export {
+    StyledSlideshow,
+    SlideshowWrapper,
+    SlideshowContentWrapper,
+    SlideshowContent,
+    StyledSlideshowButton,
+    StyledSlideshowPagination,
+    SlideshowPaginationItem,
+    SlideshowThumbnail,
+}

package/dist/lib/components/Slideshow/subtypes.ts

@@ -0,0 +1,22 @@
+/*=============================================== Slideshow sub types ===============================================*/
+
+import type { LibSlideshowButtonPosition, DispatchState } from "../../types"
+import type { ILibSlideshow } from "./types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
+
+export interface ILibSlideshowButton
+    extends Pick<ILibSlideshow, "data-testid" | "className" | "controls"> {
+    position: LibSlideshowButtonPosition
+    onClick: () => void
+}
+
+export interface ILibSlideshowPagination
+    extends Pick<
+        ILibSlideshow,
+        "data-testid" | "className" | "pagination" | "images"
+    > {
+    setActive: DispatchState<number>
+    contentLength: number
+    activeSlide: number
+}

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

@@ -0,0 +1,99 @@
+/*=============================================== Slideshow types ===============================================*/
+
+import type { ReactNode } from "react"
+import type {
+    LibColorsHover,
+    LibComponentBase,
+    LibIcon,
+    LibSlideshowButtonSize,
+    LibSlideshowPagination,
+    LibSlideshowPaginationPosition,
+    CssObjectFit,
+} from "../../types"
+
+type PaginationWithThumbnails = {
+    type?: Extract<LibSlideshowPagination, "thumbnails">
+    position?: LibSlideshowPaginationPosition
+    hideOnTouch?: boolean
+    color?: never
+}
+
+type PaginationWithOther = {
+    type?: Exclude<LibSlideshowPagination, "thumbnails">
+    position?: LibSlideshowPaginationPosition
+    hideOnTouch?: boolean
+    color?: LibColorsHover
+}
+
+type Controls = {
+    "data-testid"?: string
+    className?: string
+    size?: LibSlideshowButtonSize
+    color?: LibColorsHover
+    hideOnTouch?: boolean
+    icons?: { prev?: LibIcon; next?: LibIcon }
+    iconsSizes?: { prev?: number; next?: number }
+    iconBaseUrl?: string
+    labelPrev?: string
+    labelNext?: string
+}
+
+type Options = {
+    autoPlay?: number
+    speed?: number
+}
+
+interface ILibSlideshowBase extends LibComponentBase<HTMLDivElement> {
+    height?: string | number
+    imgFit?: CssObjectFit
+    /**
+     * @type Controls
+     * @type boolean or object
+     * @prop data-testid?: string
+     * @prop className?: string
+     * @prop size?: LibSlideshowButtonSize
+     * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+     * @prop hideOnTouch?: boolean
+     * @prop iconPrev?: string | JSX.Element
+     * @prop iconNext?: string | JSX.Element
+     * @prop iconPrevSize?: number
+     * @prop iconNextSize?: number
+     * @prop labelPrev?: string
+     * @prop labelNext?: string
+     */
+    controls?: boolean | Controls
+    /**
+     * @type Options
+     * @prop autoPlay?: number
+     * @prop speed?: number
+     */
+    options?: Options
+}
+
+interface SlideshowWithChildren extends ILibSlideshowBase {
+    images?: never
+    children?: Array<ReactNode>
+    /**
+     * @type PaginationWithOther
+     * @type boolean or object
+     * @prop type?: "dots" | "dots-outline" | "bars"
+     * @prop position?: "inside" | "outside"
+     * @prop hideOnTouch?: boolean
+     * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+     */
+    pagination?: boolean | PaginationWithOther
+}
+
+interface SlideshowWithImages extends ILibSlideshowBase {
+    images: Array<string>
+    children?: never
+    /**
+     * @type PaginationWithThumbnails
+     * @prop type?: "dots" | "dots-outline" | "bars" | "thumbnails"
+     * @prop position?: "inside" | "outside"
+     * @prop hideOnTouch?: boolean
+     */
+    pagination?: boolean | PaginationWithThumbnails
+}
+
+export type ILibSlideshow = SlideshowWithImages | SlideshowWithChildren

package/dist/lib/components/SrOnly/SrOnly.tsx

@@ -0,0 +1,23 @@
+/*=============================================== SrOnly component ===============================================*/
+
+import { forwardRef } from "react"
+import { StyledSrOnly } from "./styles"
+import type { ILibSrOnly } from "./types"
+
+/**
+ * @description Returns a component only for ScreenReaders
+ * @link https://documentation-components-react.vercel.app/components/sr-only
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const SrOnly = forwardRef<HTMLDivElement, ILibSrOnly>(
+    ({ "data-testid": testid, as, children, ...rest }, ref) => {
+        return (
+            <StyledSrOnly data-testid={testid} ref={ref} as={as} {...rest}>
+                {children}
+            </StyledSrOnly>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,21 @@
+/*=============================================== SrOnly styles ===============================================*/
+
+import styled from "styled-components"
+import { setDefaultTheme } from "../../"
+
+const StyledSrOnly = styled.div`
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+`
+
+setDefaultTheme([StyledSrOnly])
+
+export { StyledSrOnly }

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

@@ -0,0 +1,5 @@
+/*=============================================== SrOnly types ===============================================*/
+
+import type { LibComponentBase } from "../../types"
+
+export interface ILibSrOnly extends LibComponentBase<HTMLDivElement> {}

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

@@ -0,0 +1,118 @@
+/*=============================================== Step ===============================================*/
+
+import { forwardRef, type ElementType } from "react"
+import { Link } from "react-router-dom"
+import classNames from "classnames"
+import { Text } from "../../"
+import { LibIcon } from "../LibIcon"
+import { CheckCircle } from "../../icons"
+import { StyledStep, NumberContainer } from "./styles"
+import type { ILibStep } from "./types"
+
+/**
+ * @description Returns a Step component
+ * @link https://documentation-components-react.vercel.app/components/stepper
+ * @extends HTMLSpanElement & LibButtonLinkBlank
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLSpanElement>
+ * @prop direction?: "column" | "row"
+ * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @prop isActive?: boolean
+ * @prop isDone?: boolean
+ * @prop iconActive?: string | JSX.Element
+ * @prop iconActiveSize?: number
+ * @prop number?: number
+ * @prop iconBaseUrl?: 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 Step = forwardRef<HTMLSpanElement, ILibStep>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            children,
+            className,
+            direction = "row",
+            accentColor = "primary",
+            isActive,
+            isDone,
+            iconActiveSize = 16,
+            iconActive = (
+                <CheckCircle
+                    data-testid={testid && `${testid}.NumberContainer.Icon`}
+                    className={className && "Icon"}
+                    size={iconActiveSize}
+                />
+            ),
+            iconBaseUrl,
+            number,
+            to,
+            href,
+            blank,
+            onClick,
+            ...rest
+        },
+        ref
+    ) => {
+        const getAs: ElementType = as
+            ? as
+            : to
+            ? Link
+            : onClick
+            ? "button"
+            : href
+            ? "a"
+            : "span"
+
+        const isLink: boolean = !!(to || href || onClick)
+
+        return (
+            <StyledStep
+                data-testid={testid}
+                className={classNames(className, { StepLink: isLink })}
+                ref={ref}
+                as={getAs}
+                to={to}
+                onClick={onClick}
+                href={href}
+                target={blank ? "blank" : null}
+                rel={blank ? "noreferrer noopener" : null}
+                $direction={direction}
+                $accentColor={accentColor}
+                {...rest}
+            >
+                <NumberContainer
+                    data-testid={testid && `${testid}.NumberContainer`}
+                    className={classNames(
+                        { NumberContainer: className },
+                        { Active: isActive }
+                    )}
+                    $accentColor={accentColor}
+                >
+                    {isActive && isDone ? (
+                        <LibIcon
+                            icon={iconActive}
+                            size={iconActiveSize}
+                            baseUrl={iconBaseUrl}
+                        />
+                    ) : (
+                        number
+                    )}
+                </NumberContainer>
+
+                <Text
+                    tag="small"
+                    data-testid={testid && `${testid}.Text`}
+                    className={className && "Text"}
+                >
+                    {children}
+                </Text>
+            </StyledStep>
+        )
+    }
+)