@julseb-lib/react 0.0.85 → 0.0.87

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

@@ -1,6 +1,4 @@
-/*=============================================== Slideshow component ===============================================*/
-
-import { forwardRef, useState, useCallback, useEffect } from "react"
+import { useState, useCallback, useEffect, type FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { Image } from "../../"
 import { SlideshowButton } from "./SlideshowButton"
@@ -14,205 +12,180 @@ import {
 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
+ * Slideshow component for displaying a carousel of images or custom content with optional controls, pagination, and autoplay.
  *
- * @type Options
- * @prop autoPlay?: number
- * @prop speed?: number
- *
- * @type PaginationWithThumbnails
- * @prop type?: "thumbnails"
- * @prop position?: "inside" | "outside"
- * @prop hideOnTouch?: boolean
+ * @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.
  *
- * @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"
+ * @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 = 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)
+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()
         }
 
-        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}
+        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}
             >
-                <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}
                 >
-                    {showControls && (
-                        <SlideshowButton
-                            data-testid={testid}
-                            className={className}
-                            onClick={handlePrev}
-                            position="left"
-                            controls={controls}
-                        />
-                    )}
-
-                    <SlideshowContentWrapper
+                    <SlideshowContent
                         data-testid={
                             testid &&
-                            `${testid}.SlideshowWrapper.SlideshowContentWrapper`
+                            `${testid}.SlideshowWrapper.SlideshowContentWrapper.SlideshowContent`
                         }
-                        className={className && "SlideshowContentWrapper"}
-                        onTouchStart={handleTouchStart}
-                        onTouchMove={handleTouchMove}
+                        className={className && "SlideshowContent"}
+                        $active={active}
+                        $speed={options?.speed || 1000}
+                        $imgFit={imgFit}
                     >
-                        <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
+                        {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}
-                        pagination={pagination}
-                        images={images}
-                        setActive={setActive}
-                        contentLength={(images || children)?.length ?? 0}
-                        activeSlide={active}
+                        onClick={handleNext}
+                        position="right"
+                        controls={controls}
                     />
                 )}
-            </StyledSlideshow>
-        )
-    }
-)
+            </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,5 +1,4 @@
-/*=============================================== SlideshowButton ===============================================*/
-
+import type { FC } from "react"
 import { LibIcon } from "../LibIcon"
 import { ChevronLeft, ChevronRight } from "../../icons"
 import { StyledSlideshowButton } from "./styles"
@@ -8,13 +7,13 @@ import type { ILibSlideshowButton } from "./subtypes"
 const DEFAULT_ICON_SIZE_SMALL = 24
 const DEFAULT_ICON_SIZE_LARGE = 32
 
-export const SlideshowButton = ({
+export const SlideshowButton: FC<ILibSlideshowButton> = ({
     "data-testid": testid,
     className,
     onClick,
     position,
     controls,
-}: ILibSlideshowButton) => {
+}) => {
     const {
         "data-testid": controlTestid,
         className: controlClassName,

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

@@ -1,5 +1,4 @@
-/*=============================================== SlideshowNav ===============================================*/
-
+import type { FC } from "react"
 import classNames from "classnames"
 import { uuid, generateNumbers } from "@julseb-lib/utils"
 import { Image } from "../.."
@@ -10,7 +9,7 @@ import {
 } from "./styles"
 import type { ILibSlideshowPagination } from "./subtypes"
 
-export const SlideshowPagination = ({
+export const SlideshowPagination: FC<ILibSlideshowPagination> = ({
     "data-testid": testid,
     className,
     pagination,
@@ -18,7 +17,7 @@ export const SlideshowPagination = ({
     setActive,
     contentLength,
     activeSlide,
-}: ILibSlideshowPagination) => {
+}) => {
     const {
         position = "outside",
         hideOnTouch,

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Slideshow styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import {

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

@@ -1,5 +1,3 @@
-/*=============================================== Slideshow sub types ===============================================*/
-
 import type { LibSlideshowButtonPosition, DispatchState } from "../../types"
 import type { ILibSlideshow } from "./types"
 

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

@@ -1,5 +1,3 @@
-/*=============================================== Slideshow types ===============================================*/
-
 import type { ReactNode } from "react"
 import type {
     LibColorsHover,

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

@@ -1,23 +1,34 @@
-/*=============================================== SrOnly component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } 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
+ * SrOnly component for rendering content that is only accessible to screen readers.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @param {Object} props - SrOnly 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 {ReactNode} [props.children] - Content to be read by screen readers.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered SrOnly component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/sr-only
+ * @example
+ * <SrOnly>This text is only visible to screen readers.</SrOnly>
  */
-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>
-        )
-    }
-)
+export const SrOnly: FC<ILibSrOnly> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    ...rest
+}) => {
+    return (
+        <StyledSrOnly data-testid={testid} ref={ref} as={as} {...rest}>
+            {children}
+        </StyledSrOnly>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== SrOnly styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme } from "../../"
 

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

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