@julseb-lib/react 0.1.2 → 0.1.4

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

@@ -1,81 +0,0 @@
-import type { FC } from "react"
-import { SkeletonShine } from "./SkeletonShine"
-import { StyledSkeletonCard } from "./styles"
-import type { ILibSkeletonCard } from "./types"
-
-/**
- * SkeletonCard component for displaying a card-shaped skeleton placeholder with customizable size, color, border, padding, and optional shine animation.
- *
- * @component
- * @extends ILibFlexbox
- * @param {Object} props - SkeletonCard props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string|number} [props.width] - Width of the skeleton card.
- * @param {string|number} [props.maxWidth="100%"] - Maximum width of the skeleton card.
- * @param {string|number} [props.height] - Height of the skeleton card.
- * @param {string} [props.backgroundColor] - Background color of the skeleton card.
- * @param {string} [props.aspectRatio] - Aspect ratio of the skeleton card.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }} [props.borderRadius] - Border radius of the skeleton card.
- * @param {string|number} [props.flex] - Flex property for the skeleton card.
- * @param {string|number} [props.flexGrow] - Flex grow property for the skeleton card.
- * @param {{ style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: string }} [props.border] - Border style for the skeleton card.
- * @param {"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" }} [props.padding] - Padding for the skeleton card.
- * @param {boolean} [props.isShiny] - Whether to display a shine animation.
- * @param {ReactNode} [props.children] - Content to display inside the skeleton card.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered SkeletonCard component.
- *
- * @see https://documentation-components-react.vercel.app/components/skeleton
- * @example
- * <SkeletonCard width={300} height={180} isShiny />
- */
-export const SkeletonCard: FC<ILibSkeletonCard> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    width,
-    maxWidth = "100%",
-    height,
-    backgroundColor,
-    aspectRatio,
-    border,
-    borderRadius,
-    flex,
-    flexGrow,
-    padding,
-    isShiny,
-    children,
-    ...rest
-}) => {
-    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,30 +0,0 @@
-import type { FC } from "react"
-import { StyledSkeletonShine } from "./styles"
-import type { ILibSkeletonShine } from "./types"
-
-/**
- * SkeletonShine component for displaying a shine animation, typically used inside a skeleton placeholder.
- *
- * @component
- * @extends HTMLSpanElement
- * @param {Object} props - SkeletonShine props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLSpanElement>} [props.ref] - Ref forwarded to the span element.
- * @param {any} [props.rest] - Additional props passed to the span element.
- * @returns {JSX.Element} The rendered SkeletonShine component.
- *
- * @see https://documentation-components-react.vercel.app/components/skeleton
- * @example
- * <SkeletonShine />
- */
-export const SkeletonShine: FC<ILibSkeletonShine> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    ...rest
-}) => {
-    return (
-        <StyledSkeletonShine data-testid={testid} ref={ref} as={as} {...rest} />
-    )
-}

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

@@ -1,3 +0,0 @@
-export * from "./Skeleton"
-export * from "./SkeletonCard"
-export * from "./SkeletonShine"

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

@@ -1,94 +0,0 @@
-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"
-
-const ShineLoad = keyframes`
-    from {
-        left: -150px;
-    }
-
-    to {
-        left: 106%;
-    }
-`
-
-const Pulse = keyframes`
-    0% {
-        opacity: 0.5;
-    }
-
-    100% {
-        opacity: 1;
-    }
-`
-
-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;
-`
-
-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,14 +0,0 @@
-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,37 +0,0 @@
-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,191 +0,0 @@
-import { useState, useCallback, useEffect, type FC } 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"
-
-/**
- * Slideshow component for displaying a carousel of images or custom content with optional controls, pagination, and autoplay.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Slideshow props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {string} [props.className] - Additional class names.
- * @param {Array<string>} [props.images] - Array of image URLs to display (used if children is not defined).
- * @param {ReactNode[]} [props.children] - Custom content to display in the slideshow (used if images is not defined).
- * @param {string|number} [props.height="30vw"] - Height of the slideshow.
- * @param {CssObjectFit} [props.imgFit="cover"] - Object-fit style for images.
- * @param {boolean|Object} [props.controls] - Show controls or provide controls configuration.
- * @param {boolean|Object} [props.pagination] - Show pagination or provide pagination configuration.
- * @param {Object} [props.options] - Slideshow options (e.g., autoPlay, speed).
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Slideshow component.
- *
- * @see https://documentation-components-react.vercel.app/components/slideshow
- * @example
- * <Slideshow
- *   images={["/img1.jpg", "/img2.jpg"]}
- *   height={400}
- *   controls
- *   pagination
- *   options={{ autoPlay: 3000, speed: 1000 }}
- * />
- */
-export const Slideshow: FC<ILibSlideshow> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    children,
-    images,
-    height = "30vw",
-    imgFit = "cover",
-    controls,
-    pagination,
-    options,
-    ...rest
-}) => {
-    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)
-
-    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])
-
-    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,98 +0,0 @@
-import type { FC } from "react"
-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: FC<ILibSlideshowButton> = ({
-    "data-testid": testid,
-    className,
-    onClick,
-    position,
-    controls,
-}) => {
-    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,83 +0,0 @@
-import type { FC } from "react"
-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: FC<ILibSlideshowPagination> = ({
-    "data-testid": testid,
-    className,
-    pagination,
-    images,
-    setActive,
-    contentLength,
-    activeSlide,
-}) => {
-    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>
-    )
-}