@julseb-lib/react 0.0.61 → 0.0.64

package/dist/lib/components/Skeleton/SkeletonCard.tsx

@@ -0,0 +1,78 @@
+/*=============================================== SkeletonCard component ===============================================*/
+
+import { forwardRef } from "react"
+import { SkeletonShine } from "./SkeletonShine"
+import { StyledSkeletonCard } from "./styles"
+import type { ILibSkeletonCard } from "./types"
+
+/**
+ * @description Returns a SkeletonCard component
+ * @link https://documentation-components-react.vercel.app/components/skeleton
+ * @extends ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop width?: string | number
+ * @prop maxWidth?: string | number
+ * @prop height?: string | number
+ * @prop backgroundColor?: Any color from the library
+ * @prop aspectRatio?: string
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop flex?: string | number
+ * @prop flexGrow?: string | number
+ * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
+ * @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" }
+ * @prop isShiny?: boolean
+ */
+export const SkeletonCard = forwardRef<HTMLDivElement, ILibSkeletonCard>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            width,
+            maxWidth = "100%",
+            height,
+            backgroundColor,
+            aspectRatio,
+            border,
+            borderRadius,
+            flex,
+            flexGrow,
+            padding,
+            isShiny,
+            children,
+            ...rest
+        },
+        ref
+    ) => {
+        return (
+            <StyledSkeletonCard
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                $width={width}
+                $maxWidth={maxWidth}
+                $height={height}
+                $backgroundColor={backgroundColor}
+                $aspectRatio={aspectRatio}
+                $border={border}
+                $borderRadius={borderRadius}
+                $flex={flex}
+                $flexGrow={flexGrow}
+                $padding={padding}
+                {...rest}
+            >
+                {children}
+
+                {isShiny && (
+                    <SkeletonShine
+                        data-testid={testid && `${testid}.Shine`}
+                        className={className && "Shine"}
+                    />
+                )}
+            </StyledSkeletonCard>
+        )
+    }
+)

package/dist/lib/components/Skeleton/SkeletonShine.tsx

@@ -0,0 +1,26 @@
+/*=============================================== SkeletonShine component ===============================================*/
+
+import { forwardRef } from "react"
+import { StyledSkeletonShine } from "./styles"
+import type { ILibSkeletonShine } from "./types"
+
+/**
+ * @description Returns a Shine component. Add it inside a component with `position: relative`
+ * @link https://documentation-components-react.vercel.app/components/skeleton
+ * @extends HTMLSpanElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ */
+export const SkeletonShine = forwardRef<HTMLSpanElement, ILibSkeletonShine>(
+    ({ "data-testid": testid, as, ...rest }, ref) => {
+        return (
+            <StyledSkeletonShine
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                {...rest}
+            />
+        )
+    }
+)

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

@@ -0,0 +1,5 @@
+/*=============================================== Skeleton exports ===============================================*/
+
+export * from "./Skeleton"
+export * from "./SkeletonCard"
+export * from "./SkeletonShine"

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

@@ -0,0 +1,102 @@
+/*=============================================== Skeleton styles ===============================================*/
+
+import styled, { css, keyframes } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
+import { setDefaultTheme, Flexbox, Mixins } from "../../"
+import type { ILibBorder, ILibPadding, LibSkeletonAnimation } from "../../types"
+import type { ILibSkeletonCommonStyles } from "./subtypes"
+
+/*====================== Keyframes ======================*/
+
+const ShineLoad = keyframes`
+    from {
+        left: -150px;
+    }
+
+    to {
+        left: 106%;
+    }
+`
+
+const Pulse = keyframes`
+    0% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+`
+
+/*====================== Mixins ======================*/
+
+const Common = ({
+    $width = "100%",
+    $maxWidth,
+    $height,
+    $backgroundColor = "background",
+    $aspectRatio,
+    $borderRadius,
+    $flex,
+    $flexGrow,
+}: ILibSkeletonCommonStyles) => css`
+    position: relative;
+    overflow: hidden;
+    width: ${stringifyPx($width)};
+    max-width: ${$maxWidth && stringifyPx($maxWidth)};
+    height: ${$height && stringifyPx($height)};
+    background-color: ${({ theme }) =>
+        Mixins.AllColors($backgroundColor, theme)};
+    aspect-ratio: ${$aspectRatio};
+    flex: ${$flex};
+    flex-grow: ${$flexGrow};
+    ${Mixins.BorderRadius($borderRadius)}
+`
+
+const Shine = css`
+    position: absolute;
+    top: -200px;
+    bottom: -200px;
+    width: 100px;
+    filter: blur(20px);
+    transform: skew(-15deg);
+    background-color: ${({ theme }) => theme.WHITE};
+    animation: ${ShineLoad} 2000ms infinite;
+    opacity: 0.7;
+`
+
+/*====================== Components ======================*/
+
+const StyledSkeletonCard = styled(Flexbox)<
+    ILibSkeletonCommonStyles & { $border?: ILibBorder; $padding?: ILibPadding }
+>`
+    ${Common}
+    ${({ $border }) => Mixins.Border($border)}
+    ${({ $padding }) => Mixins.Padding($padding)}
+`
+
+const StyledSkeletonShine = styled.span`
+    ${Shine}
+`
+
+const StyledSkeleton = styled.div<
+    ILibSkeletonCommonStyles & { $animation?: LibSkeletonAnimation }
+>`
+    ${Common}
+    ${({ $animation }) =>
+        $animation === "pulse"
+            ? css`
+                  animation: ${Pulse} 1000ms infinite alternate;
+              `
+            : $animation === "shine" &&
+              css`
+                  &:after {
+                      content: "";
+                      ${Shine}
+                  }
+              `}
+`
+
+setDefaultTheme([StyledSkeletonShine, StyledSkeletonCard, StyledSkeleton])
+
+export { StyledSkeletonShine, StyledSkeletonCard, StyledSkeleton }

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

@@ -0,0 +1,16 @@
+/*=============================================== Skeleton sub components types ===============================================*/
+
+import type { LibAllColors, ILibRadius } from "../../types"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN SKELETON COMPONENTS
+
+export interface ILibSkeletonCommonStyles {
+    $width?: string | number
+    $maxWidth?: string | number
+    $height?: string | number
+    $backgroundColor?: LibAllColors
+    $aspectRatio?: string
+    $borderRadius?: ILibRadius
+    $flex?: string | number
+    $flexGrow?: string | number
+}

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

@@ -0,0 +1,39 @@
+/*=============================================== Skeleton types ===============================================*/
+
+import type {
+    LibAllColors,
+    ILibBorder,
+    LibComponentBase,
+    ILibPadding,
+    ILibRadius,
+    LibSkeletonAnimation,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+interface ILibSkeletonCommon {
+    width?: string | number
+    maxWidth?: string | number
+    height?: string | number
+    backgroundColor?: LibAllColors
+    aspectRatio?: string
+    borderRadius?: ILibRadius
+    flex?: string | number
+    flexGrow?: string | number
+}
+
+export interface ILibSkeletonCard extends ILibFlexbox, ILibSkeletonCommon {
+    border?: ILibBorder
+    padding?: ILibPadding
+    isShiny?: boolean
+}
+
+export type ILibSkeletonShine = LibComponentBase<HTMLSpanElement> & {
+    children?: never
+}
+
+export interface ILibSkeleton
+    extends LibComponentBase<HTMLDivElement>,
+        ILibSkeletonCommon {
+    animation?: LibSkeletonAnimation
+    children?: never
+}

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

@@ -0,0 +1,218 @@
+/*=============================================== Slideshow component ===============================================*/
+
+import { forwardRef, useState, useCallback, useEffect } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { Image } from "../../"
+import { SlideshowButton } from "./SlideshowButton"
+import { SlideshowPagination } from "./SlideshowPagination"
+import {
+    StyledSlideshow,
+    SlideshowWrapper,
+    SlideshowContentWrapper,
+    SlideshowContent,
+} from "./styles"
+import type { ILibSlideshow } from "./types"
+
+/**
+ * @description Returns a Slideshow component
+ * @link https://documentation-components-react.vercel.app/components/slideshow
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop images?: Array<string> => only if children is not defined
+ * @prop children?: Array<ReactNode> => only if images is not defined
+ * @prop height?: string | number
+ * @prop imgFit?: CssObjectFit
+ * @prop controls?: boolean | Controls
+ * @prop options?: Options
+ * @prop pagination?: boolean | PaginationWithThumbnails | PaginationWithOther
+ *
+ * @type Controls
+ * @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 icons?: { prev?: string | JSX.Element; next?: string | JSX.Element }
+ * @prop iconsSizes?: { prev?: number; next?: number }
+ * @prop iconBaseUrl?: string
+ * @prop labelPrev?: string
+ * @prop labelNext?: string
+ *
+ * @type Options
+ * @prop autoPlay?: number
+ * @prop speed?: number
+ *
+ * @type PaginationWithThumbnails
+ * @prop type?: "thumbnails"
+ * @prop position?: "inside" | "outside"
+ * @prop hideOnTouch?: boolean
+ *
+ * @type PaginationWithOther
+ * @prop type?: "dots" | "dots-outline" | "bars"
+ * @prop position?: "inside" | "outside"
+ * @prop hideOnTouch?: boolean
+ * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ */
+export const Slideshow = forwardRef<HTMLDivElement, ILibSlideshow>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            children,
+            images,
+            height = "30vw",
+            imgFit = "cover",
+            controls,
+            pagination,
+            options,
+            ...rest
+        },
+        ref
+    ) => {
+        /*====================== Slideshow with buttons ======================*/
+
+        const [active, setActive] = useState(0)
+        const length = children?.length || images?.length || 0
+
+        const handleNext = () => setActive(active < length - 1 ? active + 1 : 0)
+        const handlePrev = () => setActive(active > 0 ? active - 1 : length - 1)
+
+        /*====================== Automatic slideshow ======================*/
+
+        const autoSlideshow = useCallback(() => {
+            setActive(active < length - 1 ? active + 1 : 0)
+        }, [active, length])
+
+        useEffect(() => {
+            if (!controls && !pagination && !options?.autoPlay) {
+                setInterval(() => autoSlideshow(), 1500)
+            } else if (options?.autoPlay) {
+                setInterval(() => autoSlideshow(), options.autoPlay)
+            }
+        }, [options?.autoPlay, autoSlideshow, controls, pagination])
+
+        /*====================== Swipe ======================*/
+
+        const [touchPosition, setTouchPosition] = useState(null)
+
+        const handleTouchStart = (e: any) =>
+            setTouchPosition(e.touches[0].clientX)
+
+        const handleTouchMove = (e: any) => {
+            if (touchPosition === null) {
+                return
+            }
+
+            const diff = touchPosition - e.touches[0].clientX
+
+            if (diff > 5) {
+                handleNext()
+            }
+
+            if (diff < -5) {
+                handlePrev()
+            }
+
+            setTouchPosition(null)
+        }
+
+        const showControls: boolean = !!(
+            (children && children.length > 1) ||
+            (images && images.length > 1 && controls)
+        )
+        const showPagination: boolean = !!(
+            (children && children.length > 1) ||
+            (images && images.length > 1 && pagination)
+        )
+
+        return (
+            <StyledSlideshow
+                data-testid={testid}
+                ref={ref}
+                as={as}
+                className={className}
+                {...rest}
+            >
+                <SlideshowWrapper
+                    data-testid={testid && `${testid}.SlideshowWrapper`}
+                    className={className && "SlideshowWrapper"}
+                    $height={height}
+                >
+                    {showControls && (
+                        <SlideshowButton
+                            data-testid={testid}
+                            className={className}
+                            onClick={handlePrev}
+                            position="left"
+                            controls={controls}
+                        />
+                    )}
+
+                    <SlideshowContentWrapper
+                        data-testid={
+                            testid &&
+                            `${testid}.SlideshowWrapper.SlideshowContentWrapper`
+                        }
+                        className={className && "SlideshowContentWrapper"}
+                        onTouchStart={handleTouchStart}
+                        onTouchMove={handleTouchMove}
+                    >
+                        <SlideshowContent
+                            data-testid={
+                                testid &&
+                                `${testid}.SlideshowWrapper.SlideshowContentWrapper.SlideshowContent`
+                            }
+                            className={className && "SlideshowContent"}
+                            $active={active}
+                            $speed={options?.speed || 1000}
+                            $imgFit={imgFit}
+                        >
+                            {images
+                                ? images.map((image, i) => (
+                                      <Image
+                                          src={image}
+                                          alt={`Image slideshow ${i}`}
+                                          fit={imgFit}
+                                          data-testid={
+                                              testid &&
+                                              `${testid}.SlideshowWrapper.SlideshowContentWrapper.SlideshowContent.Image`
+                                          }
+                                          className={
+                                              className && "SlideshowImage"
+                                          }
+                                          key={uuid()}
+                                      />
+                                  ))
+                                : children}
+                        </SlideshowContent>
+                    </SlideshowContentWrapper>
+
+                    {showControls && (
+                        <SlideshowButton
+                            data-testid={testid}
+                            className={className}
+                            onClick={handleNext}
+                            position="right"
+                            controls={controls}
+                        />
+                    )}
+                </SlideshowWrapper>
+
+                {showPagination && (
+                    <SlideshowPagination
+                        data-testid={testid}
+                        className={className}
+                        pagination={pagination}
+                        images={images}
+                        setActive={setActive}
+                        contentLength={(images || children)?.length ?? 0}
+                        activeSlide={active}
+                    />
+                )}
+            </StyledSlideshow>
+        )
+    }
+)

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

@@ -0,0 +1,99 @@
+/*=============================================== SlideshowButton ===============================================*/
+
+import { LibIcon } from "../LibIcon"
+import { ChevronLeft, ChevronRight } from "../../icons"
+import { StyledSlideshowButton } from "./styles"
+import type { ILibSlideshowButton } from "./subtypes"
+
+const DEFAULT_ICON_SIZE_SMALL = 24
+const DEFAULT_ICON_SIZE_LARGE = 32
+
+export const SlideshowButton = ({
+    "data-testid": testid,
+    className,
+    onClick,
+    position,
+    controls,
+}: ILibSlideshowButton) => {
+    const {
+        "data-testid": controlTestid,
+        className: controlClassName,
+        size = "small",
+        color = "primary",
+        hideOnTouch,
+        "aria-label": label = position === "right" ? "Previous" : "Next",
+        iconsSizes = {
+            prev:
+                size === "large"
+                    ? DEFAULT_ICON_SIZE_LARGE
+                    : DEFAULT_ICON_SIZE_SMALL,
+            next:
+                size === "large"
+                    ? DEFAULT_ICON_SIZE_LARGE
+                    : DEFAULT_ICON_SIZE_SMALL,
+        },
+        icons = {
+            prev: (
+                <ChevronLeft
+                    data-testid={
+                        controlTestid ??
+                        (testid &&
+                            `${testid}.SlideshowButton.${
+                                position === "right" ? "Next" : "Prev"
+                            }.Icon`)
+                    }
+                    size={iconsSizes?.prev}
+                />
+            ),
+            next: (
+                <ChevronRight
+                    data-testid={
+                        controlTestid ??
+                        (testid &&
+                            `${testid}.SlideshowButton.${
+                                position === "right" ? "Next" : "Prev"
+                            }.Icon`)
+                    }
+                    size={iconsSizes?.next}
+                />
+            ),
+        },
+        iconBaseUrl,
+    } = controls as any
+
+    return (
+        <StyledSlideshowButton
+            data-testid={
+                controlTestid ??
+                (testid &&
+                    `${testid}.SlideshowButton.${
+                        position === "right" ? "Next" : "Prev"
+                    }`)
+            }
+            className={controlClassName ?? (className && "SlideshowButton")}
+            onClick={onClick}
+            type="button"
+            role="button"
+            aria-label={label}
+            $hideOnTouch={hideOnTouch}
+            $color={color}
+            $position={position}
+            $size={size}
+        >
+            <LibIcon
+                data-testid={
+                    controlTestid ??
+                    (testid &&
+                        `${testid}.SlideshowButton.${
+                            position === "right" ? "Next" : "Prev"
+                        }.Icon`)
+                }
+                className={(className || controlClassName) && "SlideshowIcon"}
+                icon={position === "right" ? icons.next : icons.prev}
+                size={position === "right" ? iconsSizes.next : iconsSizes.prev}
+                color="currentColor"
+                baseUrl={iconBaseUrl}
+            />
+        </StyledSlideshowButton>
+    )
+}

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

@@ -0,0 +1,84 @@
+/*=============================================== SlideshowNav ===============================================*/
+
+import classNames from "classnames"
+import { uuid, generateNumbers } from "@julseb-lib/utils"
+import { Image } from "../.."
+import {
+    SlideshowThumbnail,
+    SlideshowPaginationItem,
+    StyledSlideshowPagination,
+} from "./styles"
+import type { ILibSlideshowPagination } from "./subtypes"
+
+export const SlideshowPagination = ({
+    "data-testid": testid,
+    className,
+    pagination,
+    images,
+    setActive,
+    contentLength,
+    activeSlide,
+}: ILibSlideshowPagination) => {
+    const {
+        position = "outside",
+        hideOnTouch,
+        type = "dots",
+        color = "primary",
+    } = pagination as any
+
+    return (
+        <StyledSlideshowPagination
+            data-testid={testid && `${testid}.SlideshowPagination`}
+            className={className && "SlideshowPagination"}
+            $position={position}
+            $hideOnTouch={hideOnTouch}
+        >
+            {type === "thumbnails"
+                ? images?.map((img, i) => (
+                      <SlideshowThumbnail
+                          key={uuid()}
+                          data-testid={
+                              testid &&
+                              `${testid}.SlideshowPagination.Thumbnail`
+                          }
+                          className={classNames(
+                              {
+                                  SlideshowThumbnail: className,
+                              },
+                              { Active: activeSlide === i }
+                          )}
+                          onClick={() => setActive(i)}
+                      >
+                          <Image
+                              data-testid={
+                                  testid &&
+                                  `${testid}.SlideshowPagination.Thumbnail.Image`
+                              }
+                              className={className && "SlideshowThumbnailImage"}
+                              src={img}
+                              alt={`Thumbnail ${img}`}
+                              width="100%"
+                              height="100%"
+                              fit="cover"
+                          />
+                      </SlideshowThumbnail>
+                  ))
+                : generateNumbers(0, contentLength - 1).map((_, i) => (
+                      <SlideshowPaginationItem
+                          data-testid={
+                              testid &&
+                              `${testid}.SlideshowPagination.PaginationItem`
+                          }
+                          className={classNames(
+                              { SlideshowPaginationItem: className },
+                              { Active: activeSlide === i }
+                          )}
+                          key={uuid()}
+                          onClick={() => setActive(i)}
+                          $type={type}
+                          $color={color}
+                      />
+                  ))}
+        </StyledSlideshowPagination>
+    )
+}

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

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