@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -1,149 +0,0 @@
-import styled, { css } from "styled-components"
-import {
-    FONT_SIZES,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-} from "../../"
-import type {
-    LibAllColors,
-    LibAllColorsAndOverlays,
-    LibSpacers,
-    LibTooltipPosition,
-} from "../../types"
-
-const TooltipWrapper = styled.div<{ $isVisible: boolean }>`
-    position: relative;
-    width: fit-content;
-    display: inline-block;
-
-    &.Visible {
-        z-index: 20;
-    }
-`
-
-const StyledTooltip = styled.div<{
-    $position?: LibTooltipPosition
-    $withArrow?: boolean
-    $backgroundColor: LibAllColorsAndOverlays
-    $textColor: LibAllColors
-    $offset: LibSpacers | number
-}>`
-    max-width: unset;
-    white-space: nowrap;
-    font-size: ${FONT_SIZES.SMALL};
-    transition: ${TRANSITIONS.SHORT};
-    padding: ${SPACERS.XXS} ${SPACERS.XS};
-    border-radius: ${RADIUSES.M};
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-    background-color: ${({ theme, $backgroundColor }) =>
-        Mixins.ColorsAndOverlays($backgroundColor, theme)};
-    color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
-
-    &.Visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    ${({ $position, $offset }) => {
-        switch ($position) {
-            case "left":
-                return css`
-                    left: calc(-100% - ${Mixins.Spacer($offset)});
-                    top: 50%;
-                    transform: translateY(-50%);
-                `
-            case "top":
-                return css`
-                    top: calc(-100% - ${Mixins.Spacer($offset)});
-                    left: 50%;
-                    transform: translateX(-50%);
-                `
-            case "right":
-                return css`
-                    right: calc(-100% - ${Mixins.Spacer($offset)});
-                    top: 50%;
-                    transform: translateY(-50%);
-                `
-            case "bottom":
-                return css`
-                    bottom: calc(-100% - ${Mixins.Spacer($offset)});
-                    left: 50%;
-                    transform: translateX(-50%);
-                `
-            default:
-                return null
-        }
-    }}
-
-    ${({ $withArrow, $position, $backgroundColor, theme }) =>
-        $withArrow &&
-        css`
-            &:after {
-                content: "";
-                position: absolute;
-                border-style: solid;
-                border-width: 4px;
-
-                ${() => {
-                    switch ($position) {
-                        case "left":
-                            return css`
-                                right: -8px;
-                                top: 50%;
-                                transform: translateY(-50%);
-                                border-color: transparent transparent
-                                    transparent
-                                    ${Mixins.ColorsAndOverlays(
-                                        $backgroundColor,
-                                        theme
-                                    )};
-                            `
-                        case "top":
-                            return css`
-                                top: 100%;
-                                left: 50%;
-                                transform: translateX(-50%);
-                                border-color: ${Mixins.ColorsAndOverlays(
-                                        $backgroundColor,
-                                        theme
-                                    )}
-                                    transparent transparent transparent;
-                            `
-                        case "right":
-                            return css`
-                                left: -8px;
-                                top: 50%;
-                                transform: translateY(-50%);
-                                border-color: transparent
-                                    ${Mixins.ColorsAndOverlays(
-                                        $backgroundColor,
-                                        theme
-                                    )}
-                                    transparent transparent;
-                            `
-                        case "bottom":
-                            return css`
-                                bottom: 100%;
-                                left: 50%;
-                                transform: translateX(-50%);
-                                border-color: transparent transparent
-                                    ${Mixins.ColorsAndOverlays(
-                                        $backgroundColor,
-                                        theme
-                                    )}
-                                    transparent;
-                            `
-                    }
-                }}
-            }
-        `}
-`
-
-setDefaultTheme([TooltipWrapper, StyledTooltip])
-
-export { TooltipWrapper, StyledTooltip }

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

@@ -1,21 +0,0 @@
-import type { CSSProperties } from "react"
-import type {
-	LibComponentBase,
-	LibAllColorsAndOverlays,
-	LibAllColors,
-	LibTooltipPosition,
-	LibSpacers,
-	LibTooltipTrigger,
-	ReactChildren,
-} from "../../types"
-
-export interface ILibTooltip extends LibComponentBase<HTMLDivElement> {
-	tooltip: string | ReactChildren
-	position?: LibTooltipPosition
-	hideArrow?: boolean
-	trigger?: LibTooltipTrigger
-	backgroundColor?: LibAllColorsAndOverlays
-	textColor?: LibAllColors
-	offset?: LibSpacers
-	tooltipStyles?: CSSProperties
-}

package/dist/lib/components/Truncate/Truncate.tsx

@@ -1,128 +0,0 @@
-import { useLayoutEffect, useState, useRef, type FC } from "react"
-import { useMergeRefs } from "../../"
-import { StyledTruncate, StyledTag } from "./styles"
-import type { ILibTruncate } from "./types"
-
-/**
- * Truncate component for displaying a list of items in a single line, truncating overflow items and showing a "+ N" tag for hidden items.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Truncate props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between items.
- * @param {ReactNode} [props.children] - Items to display in the truncate container.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Truncate component.
- *
- * @see https://documentation-components-react.vercel.app/components/truncate
- * @example
- * <Truncate>
- *   <Tag>Item 1</Tag>
- *   <Tag>Item 2</Tag>
- *   <Tag>Item 3</Tag>
- *   <Tag>Item 4</Tag>
- * </Truncate>
- */
-export const Truncate: FC<ILibTruncate> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    className,
-    children,
-    gap = "xs",
-    ...rest
-}) => {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [invisibleNumber, setInvisibleNumber] = useState<number>(0)
-
-    useLayoutEffect(() => {
-        const truncate = () => {
-            if (!containerRef.current) return
-
-            const childNodes = Array.from(
-                containerRef.current.children
-            ) as Array<HTMLElement>
-
-            for (const node of childNodes) {
-                node.hidden = true
-            }
-
-            if (childNodes.length === 0) return
-
-            for (let i = 0; i < childNodes.length; i += 1) {
-                const itemEl = childNodes[i]
-                itemEl.hidden = false
-
-                const itemRect = itemEl.getBoundingClientRect()
-                const containerRect =
-                    containerRef.current.getBoundingClientRect()
-
-                if (
-                    itemRect.bottom > containerRect.bottom ||
-                    itemRect.right > containerRect.right
-                ) {
-                    itemEl.hidden = true
-
-                    if (i > 0) {
-                        childNodes[i - 1].hidden = true
-                    }
-
-                    if (i) break
-                }
-            }
-
-            const getInvisibleNumber =
-                containerRef.current.querySelectorAll("[hidden]").length - 1
-
-            setInvisibleNumber(getInvisibleNumber)
-        }
-
-        truncate()
-
-        const resizeObserver = new ResizeObserver((entries: any) => {
-            window.requestAnimationFrame(() => {
-                // eslint-disable-next-line
-                for (const _ of entries) {
-                    truncate()
-                }
-            })
-        })
-
-        const containerEl = containerRef.current
-
-        if (containerEl) {
-            resizeObserver.observe(containerEl)
-        }
-
-        return () => {
-            if (containerEl) {
-                resizeObserver.unobserve(containerEl)
-            }
-        }
-    }, [children])
-
-    return (
-        <StyledTruncate
-            data-testid={testid}
-            ref={useMergeRefs([ref, containerRef])}
-            as={as}
-            className={className}
-            $gap={gap}
-            {...rest}
-        >
-            {children}
-
-            {invisibleNumber > 0 && (
-                <StyledTag
-                    data-testid={testid && `${testid}.Plus`}
-                    className={className && "Plus"}
-                >
-                    {`+ ${invisibleNumber}`}
-                </StyledTag>
-            )}
-        </StyledTruncate>
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./Truncate"

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

@@ -1,36 +0,0 @@
-import type { FC } from "react"
-import styled from "styled-components"
-import { FONT_WEIGHTS, Mixins, setDefaultTheme, Tag } from "../../"
-import type { LibSpacers } from "../../types"
-
-const StyledTruncate = styled.div<{ $gap?: LibSpacers }>`
-    overflow: hidden;
-    ${Mixins.HideScrollbar};
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "row",
-            $alignItems: "center",
-            $justifyContent: "flex-start",
-            $gap,
-            $flexWrap: "nowrap",
-        })}
-`
-
-const StyledTag = styled(Tag).attrs({
-    backgroundColor: "transparent",
-    textColor: "font",
-    padding: "0px",
-})`
-    margin-left: auto;
-    font-weight: ${FONT_WEIGHTS.BLACK};
-    white-space: nowrap;
-    display: block !important;
-
-    &[hidden] {
-        display: block !important;
-    }
-` as FC<any>
-
-setDefaultTheme([StyledTruncate, StyledTag])
-
-export { StyledTruncate, StyledTag }

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

@@ -1,5 +0,0 @@
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibTruncate extends LibComponentBase<HTMLDivElement> {
-    gap?: LibSpacers
-}

package/dist/lib/components/Video/Video.tsx

@@ -1,74 +0,0 @@
-import { Suspense, lazy, type FC } from "react"
-import { Fallback } from "../../"
-import type { ILibVideo } from "./types"
-
-const StyledVideo = lazy(() => import("./styles"))
-
-/**
- * Video component for rendering an HTML video element with customizable source, aspect ratio, fit, and fallback.
- *
- * @component
- * @extends HTMLVideoElement
- * @param {Object} props - Video props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ForwardedRef<HTMLVideoElement>} [props.ref] - Ref forwarded to the video element.
- * @param {string} props.src - Source URL of the video.
- * @param {"video/x-flv" | "video/mp4" | "application/x-mpegURL" | "video/MP2T" | "video/3gpp" | "video/quicktime" | "video/x-msvideo" | "video/x-ms-wmv"} [props.type="video/mp4"] - Video MIME type.
- * @param {string|number} [props.width="100%"] - Width of the video.
- * @param {string|number} [props.height="auto"] - Height of the video.
- * @param {CssObjectFit} [props.fit] - Object-fit style for the video.
- * @param {string} [props.aspectRatio] - Aspect ratio for the video.
- * @param {string} [props.emptyText="Your browser doesn't support the video tag."] - Fallback text if the video is not supported.
- * @param {boolean} [props.autoPlay] - Whether the video should play automatically.
- * @param {boolean} [props.muted] - Whether the video should be muted.
- * @param {boolean} [props.controls] - Whether to show video controls.
- * @param {any} [props.rest] - Additional props passed to the video element.
- * @returns {JSX.Element} The rendered Video component.
- *
- * @see https://documentation-components-react.vercel.app/components/video
- * @example
- * <Video src="/video.mp4" aspectRatio="16/9" controls />
- */
-export const Video: FC<ILibVideo> = ({
-    "data-testid": testid,
-    ref,
-    src,
-    type = "video/mp4",
-    width = "100%",
-    height = "auto",
-    fit,
-    aspectRatio,
-    emptyText = "Your browser doesn't support the video tag.",
-    autoPlay,
-    muted,
-    controls,
-    ...rest
-}) => {
-    return (
-        <Suspense
-            fallback={
-                <Fallback
-                    $width={width}
-                    $height={height}
-                    $aspectRatio={aspectRatio}
-                />
-            }
-        >
-            <StyledVideo
-                data-testid={testid}
-                ref={ref}
-                autoPlay={autoPlay}
-                muted={muted || autoPlay}
-                controls={controls || !autoPlay}
-                $width={width}
-                $height={height}
-                $aspectRatio={aspectRatio}
-                $fit={fit}
-                {...rest}
-            >
-                <source src={src} type={type} />
-                {emptyText}
-            </StyledVideo>
-        </Suspense>
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./Video"

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

@@ -1,22 +0,0 @@
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme } from "../../"
-import type { CssObjectFit } from "../../types"
-
-const StyledVideo = styled.video<{
-    $width: string | number
-    $height: string | number
-    $fit?: CssObjectFit
-    $aspectRatio?: string
-}>`
-    display: block;
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-    object-fit: ${({ $fit }) => $fit};
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-`
-
-setDefaultTheme([StyledVideo])
-
-// eslint-disable-next-line
-export default StyledVideo

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

@@ -1,20 +0,0 @@
-import type { VideoHTMLAttributes, SourceHTMLAttributes } from "react"
-import type { LibComponentBase, CssObjectFit } from "../../types"
-
-export interface ILibVideo
-    extends Exclude<LibComponentBase<HTMLVideoElement>, "as">,
-        VideoHTMLAttributes<HTMLVideoElement>,
-        SourceHTMLAttributes<HTMLVideoElement> {
-    fit?: CssObjectFit
-    aspectRatio?: string
-    emptyText?: string
-    type?:
-        | "video/x-flv"
-        | "video/mp4"
-        | "application/x-mpegURL"
-        | "video/MP2T"
-        | "video/3gpp"
-        | "video/quicktime"
-        | "video/x-msvideo"
-        | "video/x-ms-wmv"
-}

package/dist/lib/components/Wrapper/Wrapper.tsx

@@ -1,50 +0,0 @@
-import type { FC } from "react"
-import { StyledWrapper } from "./styles"
-import type { ILibWrapper } from "./types"
-
-/**
- * Wrapper component for creating a container with customizable gap, background color, and minimum height.
- *
- * @component
- * @extends HTMLDivElement
- * @param {Object} props - Wrapper props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {React.ElementType} [props.as] - Custom element type to render as.
- * @param {React.ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="l"] - Gap between children.
- * @param {string} [props.backgroundColor="transparent"] - Background color (any color from the library).
- * @param {string|number} [props.minHeight="100svh"] - Minimum height of the container.
- * @param {React.ReactNode} [props.children] - Content to render inside the wrapper.
- * @param {any} [props.rest] - Additional props passed to the root element.
- * @returns {JSX.Element} The rendered Wrapper component.
- *
- * @see https://documentation-components-react.vercel.app/layouts/container
- * @example
- * <Wrapper gap="m" backgroundColor="white">
- *   <div>Content</div>
- * </Wrapper>
- */
-export const Wrapper: FC<ILibWrapper> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    children,
-    gap = "l",
-    backgroundColor = "transparent",
-    minHeight = "100svh",
-    ...rest
-}) => {
-    return (
-        <StyledWrapper
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            $gap={gap}
-            $backgroundColor={backgroundColor}
-            $minHeight={minHeight}
-            {...rest}
-        >
-            {children}
-        </StyledWrapper>
-    )
-}

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

@@ -1,33 +0,0 @@
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { MEDIA, Mixins, setDefaultTheme, SPACERS } from "../../"
-import type { LibAllColors, LibSpacers } from "../../types"
-
-const StyledWrapper = styled.section<{
-	$gap: LibSpacers
-	$backgroundColor: LibAllColors
-	$minHeight: string | number
-}>`
-	position: relative;
-	background-color: ${({ $backgroundColor, theme }) =>
-		Mixins.AllColors($backgroundColor, theme)};
-	min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
-	padding: 0 ${SPACERS.XXL};
-	${({ $gap }) =>
-		Mixins.Flexbox({
-			$gap,
-			$justifyContent: "center",
-		})}
-
-	@media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-		min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
-		padding: ${SPACERS.L} ${SPACERS.M};
-	}
-`
-
-setDefaultTheme([StyledWrapper])
-
-export { StyledWrapper }

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

@@ -1,7 +0,0 @@
-import type { LibComponentBase, LibSpacers, LibAllColors } from "../../types"
-
-export interface ILibWrapper extends LibComponentBase<HTMLDivElement> {
-    gap?: LibSpacers
-    backgroundColor?: LibAllColors
-    minHeight?: string | number
-}

package/dist/lib/components/Youtube/Youtube.tsx

@@ -1,49 +0,0 @@
-import type { FC } from "react"
-import { convertYoutube } from "@julseb-lib/utils"
-import { StyledYoutube } from "./styles"
-import type { ILibYoutube } from "./types"
-
-/**
- * Youtube component for embedding a YouTube video with customizable aspect ratio, width, and height.
- *
- * @component
- * @extends HTMLIframeElement
- * @param {Object} props - Youtube props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {ElementType} [props.as] - Custom element type to render as.
- * @param {ForwardedRef<HTMLIframeElement>} [props.ref] - Ref forwarded to the iframe element.
- * @param {string} [props.src=""] - YouTube video URL or ID.
- * @param {string|number} [props.width="100%"] - Width of the iframe.
- * @param {string|number} [props.height="auto"] - Height of the iframe.
- * @param {string} [props.aspectRatio="16/9"] - Aspect ratio for the iframe.
- * @param {any} [props.rest] - Additional props passed to the iframe element.
- * @returns {JSX.Element} The rendered Youtube component.
- *
- * @see https://documentation-components-react.vercel.app/components/youtube
- * @example
- * <Youtube src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aspectRatio="16/9" />
- */
-export const Youtube: FC<ILibYoutube> = ({
-    "data-testid": testid,
-    ref,
-    src = "",
-    width = "100%",
-    height = "auto",
-    aspectRatio = "16/9",
-    ...rest
-}) => {
-    return (
-        <StyledYoutube
-            data-testid={testid}
-            ref={ref}
-            src={convertYoutube(src)}
-            frameborder="0"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-            $width={width}
-            $height={height}
-            $aspectRatio={aspectRatio}
-            {...rest}
-        />
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./Youtube"

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

@@ -1,18 +0,0 @@
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme } from "../../"
-
-const StyledYoutube = styled.iframe<{
-    $width: string | number
-    $height: string | number
-    $aspectRatio?: string
-}>`
-    display: block;
-    aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
-    width: ${({ $width }) => stringifyPx($width)};
-    height: ${({ $height }) => stringifyPx($height)};
-`
-
-setDefaultTheme([StyledYoutube])
-
-export { StyledYoutube }

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

@@ -1,10 +0,0 @@
-import type { IframeHTMLAttributes } from "react"
-import type { LibComponentBase } from "../../types"
-
-export interface ILibYoutube
-	extends Exclude<LibComponentBase<HTMLIFrameElement>, "as">,
-		IframeHTMLAttributes<HTMLIFrameElement> {
-	src: string
-	aspectRatio?: string
-	children?: never
-}