@julseb-lib/react 0.0.56 → 0.0.57

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

@@ -1,151 +0,0 @@
-/*=============================================== Tooltip styles ===============================================*/
-
-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,22 +0,0 @@
-/*=============================================== Tooltip types ===============================================*/
-
-import type { CSSProperties } from "react"
-import type {
-    LibComponentBase,
-    LibAllColorsAndOverlays,
-    LibAllColors,
-    LibTooltipPosition,
-    LibSpacers,
-    LibTooltipTrigger,
-} from "../../types"
-
-export interface ILibTooltip extends LibComponentBase<HTMLDivElement> {
-    tooltip: string | JSX.Element
-    position?: LibTooltipPosition
-    hideArrow?: boolean
-    trigger?: LibTooltipTrigger
-    backgroundColor?: LibAllColorsAndOverlays
-    textColor?: LibAllColors
-    offset?: LibSpacers
-    tooltipStyles?: CSSProperties
-}

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

@@ -1,113 +0,0 @@
-/*=============================================== Truncate component ===============================================*/
-
-import { forwardRef, useLayoutEffect, useState, useRef } from "react"
-import { useMergeRefs } from "../../"
-import { StyledTruncate, StyledTag } from "./styles"
-import type { ILibTruncate } from "./types"
-
-/**
- * @description Returns a Truncate component
- * @link https://documentation-components-react.vercel.app/components/truncate
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- */
-export const Truncate = forwardRef<HTMLDivElement, ILibTruncate>(
-    (
-        { "data-testid": testid, as, className, children, gap = "xs", ...rest },
-        ref
-    ) => {
-        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,3 +0,0 @@
-/*=============================================== Truncate exports ===============================================*/
-
-export * from "./Truncate"

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

@@ -1,37 +0,0 @@
-/*=============================================== Truncate styles ===============================================*/
-
-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;
-    ${({ $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,7 +0,0 @@
-/*=============================================== Truncate types ===============================================*/
-
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibTruncate extends LibComponentBase<HTMLDivElement> {
-    gap?: LibSpacers
-}

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

@@ -1,66 +0,0 @@
-/*=============================================== Video component ===============================================*/
-
-import { forwardRef, Suspense, lazy } from "react"
-import { Fallback } from "../../"
-import type { ILibVideo } from "./types"
-
-const StyledVideo = lazy(() => import("./styles"))
-
-/**
- * @description Returns an HTML Video component
- * @link https://documentation-components-react.vercel.app/components/video
- * @extends HTMLVideoElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLVideoElement>
- * @prop fit?: CssObjectFit
- * @prop aspectRatio?: string
- * @prop emptyText?: string
- * @prop type?: "video/x-flv" | "video/mp4" | "application/x-mpegURL" | "video/MP2T" | "video/3gpp" | "video/quicktime" | "video/x-msvideo" | "video/x-ms-wmv"
- */
-export const Video = forwardRef<HTMLVideoElement, ILibVideo>(
-    (
-        {
-            "data-testid": testid,
-            src,
-            type = "video/mp4",
-            width = "100%",
-            height = "auto",
-            fit,
-            aspectRatio,
-            emptyText = "Your browser doesn't support the video tag.",
-            autoPlay,
-            muted,
-            controls,
-            ...rest
-        },
-        ref
-    ) => {
-        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,3 +0,0 @@
-/*=============================================== Video exports ===============================================*/
-
-export * from "./Video"

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

@@ -1,24 +0,0 @@
-/*=============================================== Video styles ===============================================*/
-
-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,22 +0,0 @@
-/*=============================================== Video types ===============================================*/
-
-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,43 +0,0 @@
-/*=============================================== Wrapper component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledWrapper } from "./styles"
-import type { ILibWrapper } from "./types"
-
-/**
- * @description Returns a Wrapper component
- * @link https://documentation-components-react.vercel.app/layouts/container
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop backgroundColor?: Any color from the library
- * @prop minHeight?: string | number
- */
-export const Wrapper = forwardRef<HTMLDivElement, ILibWrapper>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            gap = "l",
-            backgroundColor = "transparent",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledWrapper
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $gap={gap}
-                $backgroundColor={backgroundColor}
-                {...rest}
-            >
-                {children}
-            </StyledWrapper>
-        )
-    }
-)

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

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

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

@@ -1,29 +0,0 @@
-/*=============================================== Wrapper styles ===============================================*/
-
-import styled from "styled-components"
-import { MEDIA, Mixins, setDefaultTheme } from "../../"
-import type { LibAllColors, LibSpacers } from "../../types"
-
-const StyledWrapper = styled.div<{
-    $gap: LibSpacers
-    $backgroundColor: LibAllColors
-}>`
-    position: relative;
-    background-color: ${({ $backgroundColor, theme }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $gap,
-            $justifyContent: "center",
-        })}
-
-    @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
-        flex-direction: column;
-        align-items: center;
-        min-height: inherit;
-    }
-`
-
-setDefaultTheme([StyledWrapper])
-
-export { StyledWrapper }

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

@@ -1,9 +0,0 @@
-/*=============================================== Wrapper types ===============================================*/
-
-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,44 +0,0 @@
-/*=============================================== Youtube component ===============================================*/
-
-import { forwardRef } from "react"
-import { convertYoutube } from "@julseb-lib/utils"
-import { StyledYoutube } from "./styles"
-import type { ILibYoutube } from "./types"
-
-/**
- * @description Returns a Youtube component
- * @link https://documentation-components-react.vercel.app/components/youtube
- * @extends HTMLIframeElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLIframeElement>
- * @prop aspectRatio?: string
- */
-export const Youtube = forwardRef<HTMLIFrameElement, ILibYoutube>(
-    (
-        {
-            "data-testid": testid,
-            src = "",
-            width = "100%",
-            height = "auto",
-            aspectRatio = "16/9",
-            ...rest
-        },
-        ref
-    ) => {
-        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,3 +0,0 @@
-/*=============================================== Youtube exports ===============================================*/
-
-export * from "./Youtube"

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

@@ -1,20 +0,0 @@
-/*=============================================== Youtube styles ===============================================*/
-
-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,11 +0,0 @@
-/*=============================================== Youtube types ===============================================*/
-
-import type { IframeHTMLAttributes } from "react"
-import type { LibComponentBase } from "../../types"
-
-export interface ILibYoutube
-    extends Exclude<LibComponentBase<HTMLIFrameElement>, "as">,
-        IframeHTMLAttributes<HTMLIFrameElement> {
-    aspectRatio?: string
-    children?: never
-}