@julseb-lib/react 0.0.56 → 0.0.57

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

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

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

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

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

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

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

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

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

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

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

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