@julseb-lib/react 0.0.51 → 0.0.52

package/src/lib/components/Toast/styles.tsx

@@ -1,249 +0,0 @@
-/*=============================================== Toast styles ===============================================*/
-
-import styled, { keyframes, css } from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    FONT_SIZES,
-    LINE_HEIGHTS,
-    Mixins,
-    RADIUSES,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-    Text,
-} from "../../"
-import type {
-    LibAllColors,
-    LibToasterPosition,
-    LibToastStatus,
-} from "../../types"
-
-const OpenFromLeft = keyframes`
-0% { transform: translateX(-100%); }
-
-100% { transform: translateX(0); }
-`
-
-const CloseFromLeft = keyframes`
-0% { transform: translateX(0); }
-
-100% { transform: translateX(-100%); }
-`
-
-const OpenFromRight = keyframes`
-0% { transform: translateX(100%); }
-
-100% { transform: translateX(0); }
-`
-
-const CloseFromRight = keyframes`
-0% { transform: translateX(0); }
-
-100% { transform: translateX(100%); }
-`
-
-const StyledToast = styled.div<{
-    $status: LibToastStatus
-    $toasterPosition?: LibToasterPosition
-    $maxWidth: string | number
-}>`
-    position: relative;
-    width: 100%;
-    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
-    padding: ${SPACERS.S};
-    border-radius: ${RADIUSES.M};
-    transition: ${TRANSITIONS.SHORT};
-    border: 1px solid;
-    overflow: hidden;
-
-    ${({ $toasterPosition }) => {
-        const speedAndFunction = "200ms ease"
-
-        switch ($toasterPosition) {
-            case "top-left":
-            case "bottom-left":
-                return css`
-                    animation: ${CloseFromLeft} ${speedAndFunction};
-
-                    &.Open {
-                        animation: ${OpenFromLeft} ${speedAndFunction};
-                    }
-                `
-            case "top-right":
-            case "bottom-right":
-                return css`
-                    animation: ${CloseFromRight} ${speedAndFunction};
-
-                    &.Open {
-                        animation: ${OpenFromRight} ${speedAndFunction};
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-
-    ${({ $status, theme }) => {
-        switch ($status) {
-            case "success":
-                return css`
-                    background-color: ${Mixins.AllColors("success-50", theme)};
-                    border-color: ${Mixins.AllColors("success", theme)};
-                `
-            case "error":
-                return css`
-                    background-color: ${Mixins.AllColors("danger-50", theme)};
-                    border-color: ${Mixins.AllColors("danger", theme)};
-                `
-            case "warning":
-                return css`
-                    background-color: ${Mixins.AllColors("warning-50", theme)};
-                    border-color: ${Mixins.AllColors("warning", theme)};
-                `
-            case "info":
-                return css`
-                    background-color: ${Mixins.AllColors(
-                        "secondary-50",
-                        theme
-                    )};
-                    border-color: ${Mixins.AllColors("secondary", theme)};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const TitleContainer = styled.div`
-    width: 100%;
-    ${Mixins.Flexbox({
-        $gap: "xs",
-    })}
-
-    & > p {
-        flex-grow: 1;
-    }
-`
-
-const ICON_CONTAINER_SIZE = 24
-
-const IconContainer = styled.span`
-    height: calc(${FONT_SIZES.H6} * ${LINE_HEIGHTS.BODY});
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-`
-
-const CloseButton = styled.button`
-    width: ${ICON_CONTAINER_SIZE}px;
-    height: ${ICON_CONTAINER_SIZE}px;
-    padding: 0;
-    border: none;
-    background-color: transparent;
-    color: ${({ theme }) => Mixins.ColorsHoverDefault("gray", theme)};
-    ${Mixins.Flexbox({
-        $inline: true,
-        $alignItems: "center",
-        $justifyContent: "center",
-    })}
-
-    @media ${MEDIA.HOVER} {
-        &:hover {
-            color: ${({ theme }) => Mixins.ColorsHoverHover("gray", theme)};
-        }
-
-        &:active {
-            color: ${({ theme }) => Mixins.ColorsHoverActive("gray", theme)};
-        }
-    }
-`
-
-const Progress = keyframes`
-0% { width: 100%; }
-
-100% { width: 0; }
-`
-
-const Timer = styled.span<{
-    $backgroundColor: LibAllColors
-    $duration: number
-}>`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    background-color: ${({ theme, $backgroundColor }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    animation: ${Progress} ${({ $duration }) => $duration}ms linear forwards;
-`
-
-const StyledToaster = styled.div<{ $position: LibToasterPosition }>`
-    position: fixed;
-    width: 300px;
-    height: fit-content;
-    max-height: 100vh;
-    z-index: 9999;
-    overflow-y: scroll;
-    ${Mixins.Flexbox({
-        $flexDirection: "column",
-        $justifyContent: "flex-end",
-        $gap: "s",
-    })}
-
-    ${({ $position }) => {
-        const SPACING = SPACERS.S
-
-        switch ($position) {
-            case "top-left":
-                return css`
-                    left: ${SPACING};
-                    top: ${SPACING};
-                `
-            case "top-right":
-                return css`
-                    right: ${SPACING};
-                    top: ${SPACING};
-                `
-            case "bottom-left":
-                return css`
-                    left: ${SPACING};
-                    bottom: ${SPACING};
-                `
-            case "bottom-right":
-                return css`
-                    right: ${SPACING};
-                    bottom: ${SPACING};
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const Title = styled(Text)`
-    width: 100%;
-` as any
-
-setDefaultTheme([
-    StyledToast,
-    TitleContainer,
-    IconContainer,
-    CloseButton,
-    Timer,
-    StyledToaster,
-    Title,
-])
-
-export {
-    StyledToast,
-    TitleContainer,
-    IconContainer,
-    CloseButton,
-    Timer,
-    StyledToaster,
-    Title,
-}

package/src/lib/components/Toast/types.ts

@@ -1,32 +0,0 @@
-/*=============================================== Toast types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibToasterPosition,
-    LibToast,
-    LibToastOptions,
-} from "../../types"
-
-export interface ILibToast extends LibComponentBase<HTMLDivElement>, LibToast {
-    title: string
-    toasterPosition?: LibToasterPosition
-    maxWidth?: string | number
-    hideCloseButton?: boolean
-}
-
-export interface ILibToaster extends LibComponentBase<HTMLDivElement> {
-    className?: string
-    toasts: Array<LibToast>
-    toastsOptions?: Pick<
-        LibToastOptions,
-        | "duration"
-        | "labelClose"
-        | "withTimer"
-        | "icons"
-        | "iconSizes"
-        | "iconsBaseUrl"
-        | "iconLeftColor"
-    >
-    isOpen: boolean
-    position?: LibToasterPosition
-}

package/src/lib/components/Tooltip/Tooltip.tsx

@@ -1,120 +0,0 @@
-/*=============================================== Tooltip component ===============================================*/
-
-import { forwardRef, useState, useRef, useCallback } from "react"
-import classNames from "classnames"
-import { useTouchScreen, useClickOutside } from "../../"
-import type { LibTooltipTrigger } from "../../types"
-import { TooltipWrapper, StyledTooltip } from "./styles"
-import type { ILibTooltip } from "./types"
-
-/**
- * @description Returns a Tooltip component
- * @link https://documentation-components-react.vercel.app/components/tooltip
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop tooltip: string | JSX.Element
- * @prop position?: "top" | "bottom" | "left" | "right"
- * @prop hideArrow?: boolean
- * @prop trigger?: "hover" | "click"
- * @prop backgroundColor?: Any color or overlay from the library
- * @prop textColor?: Any color from the library
- * @prop offset?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop tooltipStyles?: CSSProperties
- */
-export const Tooltip = forwardRef<HTMLDivElement, ILibTooltip>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            children,
-            tooltip,
-            position = "top",
-            hideArrow,
-            trigger,
-            backgroundColor = "black-80",
-            textColor = "white",
-            onClick,
-            onMouseEnter,
-            onMouseLeave,
-            offset = "xs",
-            tooltipStyles,
-            ...rest
-        },
-        ref
-    ) => {
-        const isTouchScreen = useTouchScreen()
-        const defaultTrigger: LibTooltipTrigger =
-            trigger === "click" || isTouchScreen ? "click" : "hover"
-
-        const [isVisible, setIsVisible] = useState(false)
-
-        const el = useRef<HTMLDivElement>(null)
-        useClickOutside(el, () => {
-            if (isVisible && defaultTrigger === "click") setIsVisible(false)
-        })
-
-        const handleClick = useCallback(() => {
-            setIsVisible(!isVisible)
-        }, [isVisible])
-
-        const handleHover = useCallback(() => {
-            setIsVisible(true)
-        }, [])
-        const handleLeave = useCallback(() => {
-            setIsVisible(false)
-        }, [])
-
-        return (
-            <TooltipWrapper
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Visible: isVisible })}
-                onClick={
-                    onClick
-                        ? onClick
-                        : defaultTrigger === "click"
-                        ? handleClick
-                        : undefined
-                }
-                onMouseEnter={
-                    onMouseEnter
-                        ? onMouseEnter
-                        : defaultTrigger === "hover"
-                        ? handleHover
-                        : undefined
-                }
-                onMouseLeave={
-                    onMouseLeave
-                        ? onMouseLeave
-                        : defaultTrigger === "hover"
-                        ? handleLeave
-                        : undefined
-                }
-                {...rest}
-            >
-                <StyledTooltip
-                    data-testid={testid && `${testid}.Tooltip`}
-                    className={classNames(
-                        { Tooltip: className },
-                        { Visible: isVisible }
-                    )}
-                    ref={el}
-                    style={tooltipStyles}
-                    $position={position}
-                    $withArrow={!hideArrow}
-                    $backgroundColor={backgroundColor}
-                    $textColor={textColor}
-                    $offset={offset}
-                >
-                    {tooltip}
-                </StyledTooltip>
-
-                {children}
-            </TooltipWrapper>
-        )
-    }
-)

package/src/lib/components/Tooltip/__preview__/Tooltip.preview.tsx

@@ -1,59 +0,0 @@
-/*=============================================== TooltipPreview ===============================================*/
-
-import { Tooltip, Text } from "../../../"
-import type { ILibTooltip } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const tooltipPreview: ComponentPreview<ILibTooltip> = {
-    name: "Tooltip",
-    component: Tooltip,
-    category: "components",
-    import: "Tooltip",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibTooltip",
-    additionalTypeImports: null,
-    extends: ["HTMLDivElement"],
-    previews: [
-        {
-            previewTitle: "Click",
-            props: {
-                tooltip: "Hello World!",
-                trigger: "click",
-                children: <Text>Hello, trigger on click</Text>,
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Hover",
-            props: {
-                tooltip: "Hello World!",
-                trigger: "hover",
-                hideArrow: true,
-                position: "bottom",
-                children: "Hello, trigger on hover without arrow",
-                "data-testid": "testid",
-                className: "className",
-            },
-        },
-        {
-            previewTitle: "Left",
-            props: {
-                tooltip: "Hello World!",
-                position: "left",
-                children: "Hello tooltip left",
-                offset: -8,
-            },
-        },
-        {
-            previewTitle: "Right",
-            props: {
-                tooltip: "Hello World!",
-                position: "right",
-                children: "Hello tooltip right",
-                offset: -20,
-            },
-        },
-    ],
-}

package/src/lib/components/Tooltip/__tests__/Tooltip.cy.tsx

@@ -1,40 +0,0 @@
-/*=============================================== Tooltip tests ===============================================*/
-
-import { Tooltip, LIB_TOKENS } from "../../.."
-
-describe("<Tooltip />", () => {
-    it("renders <Tooltip /> component", () => {
-        cy.mount(
-            <Tooltip data-testid="testid" className="className" tooltip="Hello">
-                Hello
-            </Tooltip>
-        )
-        cy.dataTest().should("exist").should("have.class", "className")
-        cy.dataTest("testid.Tooltip")
-            .should("exist")
-            .should("have.class", "Tooltip")
-            .should("not.be.visible")
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.overlays["black-80"]
-            )
-
-        cy.dataTest().trigger("mouseover")
-        cy.dataTest("testid.Tooltip").should("be.visible")
-
-        cy.dataTest().trigger("mouseout")
-        cy.dataTest("testid.Tooltip").should("not.be.visible")
-    })
-
-    it("shows the tooltip on click", () => {
-        cy.mount(
-            <Tooltip data-testid="testid" tooltip="Hello" trigger="click">
-                Hello
-            </Tooltip>
-        )
-        cy.dataTest("testid.Tooltip").should("not.be.visible")
-        cy.dataTest().click()
-        cy.dataTest("testid.Tooltip").should("be.visible")
-    })
-})

package/src/lib/components/Tooltip/index.ts

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

package/src/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/src/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
-}