@julseb-lib/react 0.0.51 → 0.0.52

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

@@ -1,292 +0,0 @@
-/*=============================================== InputSlider styles ===============================================*/
-
-import styled, { css } from "styled-components"
-import { getPercentage } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    OVERLAYS,
-    RADIUSES,
-    SHADOWS,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-    COLORS_LIGHT,
-    COLORS_DARK,
-    Mixins,
-} from "../../"
-import type { LibInputBackground, LibValidationStatus } from "../../types"
-
-const SliderContainer = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-const DOT_SIZE = 16
-
-const StyledInputSlider = styled.input<{
-    $validationStatus: LibValidationStatus
-    $inputBackground: LibInputBackground | undefined
-    $value: number
-    $max: number
-}>`
-    -webkit-appearance: none;
-    -moz-appearance: initial;
-    appearance: none;
-    width: 100%;
-    height: 8px;
-    background-color: ${({ $validationStatus, theme }) =>
-        $validationStatus === false ? theme.DANGER_50 : theme.GRAY_200};
-    border: none;
-    border-radius: ${RADIUSES.ROUND};
-    position: relative;
-
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        -moz-appearance: initial;
-        appearance: none;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-        width: ${DOT_SIZE}px;
-        height: ${DOT_SIZE}px;
-        border-radius: ${RADIUSES.CIRCLE};
-        cursor: pointer;
-        transition: ${TRANSITIONS.SHORT};
-        box-shadow: ${SHADOWS.S};
-        position: relative;
-        z-index: 2;
-
-        @media ${MEDIA.HOVER} {
-            &:not(:disabled):hover {
-                background-color: ${({ theme, $validationStatus }) =>
-                    Mixins.ColorsHoverHover(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-            }
-
-            &:not(:disabled):active {
-                background-color: ${({ theme, $validationStatus }) =>
-                    Mixins.ColorsHoverActive(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-            }
-        }
-    }
-
-    &::-moz-range-thumb {
-        border: none;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-    }
-
-    &:before,
-    &::before {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-        height: 100%;
-        width: ${({ $value, $max }) => getPercentage($value, $max)}%;
-        border-radius: ${RADIUSES.ROUND};
-    }
-
-    &:disabled {
-        background-color: ${({ theme }) => theme.GRAY_100};
-        cursor: not-allowed;
-
-        &::-webkit-slider-thumb {
-            background-color: ${({ theme }) => theme.GRAY_500};
-            cursor: not-allowed;
-        }
-
-        &::-moz-range-thumb {
-            background-color: ${({ theme }) => theme.GRAY_500};
-            cursor: not-allowed;
-        }
-
-        &:before,
-        &::before {
-            background-color: ${({ theme }) => theme.GRAY_500};
-        }
-    }
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_50
-                        : COLORS_LIGHT.GRAY_200};
-
-                    &::-webkit-slider-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-
-                            &:not(:disabled):active {
-                                background-color: ${Mixins.ColorsHoverActive(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-                        }
-                    }
-
-                    &::-moz-range-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:before,
-                    &::before {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_LIGHT.GRAY_100};
-
-                        &::-webkit-slider-thumb {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-
-                        &::-moz-range-thumb {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-
-                        &:before,
-                        &::before {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-                    }
-                `
-            case "dark":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_50
-                        : COLORS_DARK.GRAY_200};
-
-                    &::-webkit-slider-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-
-                            &:not(:disabled):active {
-                                background-color: ${Mixins.ColorsHoverActive(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-                        }
-                    }
-
-                    &::-moz-range-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:before,
-                    &::before {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_DARK.GRAY_100};
-
-                        &::-webkit-slider-thumb {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-
-                        &::-moz-range-thumb {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-
-                        &:before,
-                        &::before {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const Tooltip = styled.span<{
-    $value: number
-    $max: number
-}>`
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    transform: translateY(-120%);
-    background-color: ${OVERLAYS.BLACK_50};
-    color: ${({ theme }) => theme.WHITE};
-    padding: ${SPACERS.XXS} ${SPACERS.S};
-    border-radius: ${RADIUSES.S};
-    transition: opacity 200ms ease;
-    left: ${({ $value, $max }) => {
-        const rangeWidth = getPercentage($value, $max)
-        return `calc(${rangeWidth}% + ${-8 - rangeWidth * 0.22}px)`
-    }};
-
-    &.Visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    &:after {
-        content: "";
-        position: absolute;
-        border-style: solid;
-        border-width: 4px;
-        border-color: ${OVERLAYS.BLACK_50} transparent transparent transparent;
-        left: 50%;
-        transform: translateX(-50%);
-        top: 100%;
-    }
-`
-
-setDefaultTheme([SliderContainer, StyledInputSlider, Tooltip])
-
-export { SliderContainer, StyledInputSlider, Tooltip }

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

@@ -1,14 +0,0 @@
-/*=============================================== InputSlider types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
-import type { ILibInputBase } from "../InputComponents/types"
-
-export type ILibInputSlider = InputHTMLAttributes<HTMLInputElement> &
-    Omit<ILibInputBase, "inputVariant" | "iconBaseUrl"> & {
-        type?: never
-        showMinMax?: boolean
-        showValue?: "hover" | "always" | "never"
-        min?: number
-        max?: number
-        value?: number
-    }

package/src/lib/components/Key/Key.tsx

@@ -1,45 +0,0 @@
-/*=============================================== Key component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledKey } from "./styles"
-import type { ILibKey } from "./types"
-
-/**
- * @description Returns a Key component
- * @link https://documentation-components-react.vercel.app/components/key
- * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop keys: Array<string>
- * @prop size?: "large" | "small"
- * @prop accentColor?: Exclude<"primary" | "secondary" | "success" | "danger" | "warning" | "gray">
- * @prop withSeparator?: boolean
- */
-export const Key = forwardRef<HTMLSpanElement, ILibKey>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            keys,
-            size = "small",
-            accentColor = "primary",
-            withSeparator,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledKey
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $accentColor={accentColor}
-                {...rest}
-            >
-                {keys.join(withSeparator ? " + " : "")}
-            </StyledKey>
-        )
-    }
-)

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

@@ -1,45 +0,0 @@
-/*=============================================== KeyPreview ===============================================*/
-
-import { Key, capitalize } from "../../../"
-import { typeValues, type LibKeySize } from "../../../types"
-import type { ComponentPreview } from "../../../../data/components"
-import type { ILibKey } from "../../../types/components-props"
-
-const keys = ["⌘", "K"]
-const sizes: Array<LibKeySize> = Object.keys(
-    typeValues.keySizes
-) as Array<LibKeySize>
-
-export const keyPreview: ComponentPreview<ILibKey> = {
-    name: "Key",
-    component: Key,
-    category: "components",
-    noStretch: true,
-    import: "Key",
-    additionalImports: null,
-    optionalImports: null,
-    propsImport: "ILibKey",
-    additionalTypeImports: null,
-    extends: ["HTMLSpanElement"],
-    previews: [
-        ...sizes.map(size => ({
-            previewTitle: capitalize(size),
-            props: {
-                keys,
-                size,
-                "data-testid": "testid",
-                className: "className",
-            },
-        })),
-        ...sizes.map(size => ({
-            previewTitle: `${capitalize(size)} with separator`,
-            props: {
-                keys,
-                size,
-                withSeparator: true,
-                "data-testid": "testid",
-                className: "className",
-            },
-        })),
-    ],
-}

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

@@ -1,80 +0,0 @@
-/*=============================================== Key tests ===============================================*/
-
-import { Key, LIB_TOKENS } from "../../.."
-import { typeValues, type LibColorsHover } from "../../../types"
-
-const colors = Object.keys(typeValues.colorsHover) as Array<LibColorsHover>
-
-describe("<Key />", () => {
-    const keys = ["⌘", "K"]
-
-    it("renders <Key /> component", () => {
-        cy.mount(<Key data-testid="testid" className="className" keys={keys} />)
-        cy.dataTest()
-            .should("exist")
-            .should("have.class", "className")
-            .should(
-                "have.css",
-                "border-color",
-                LIB_TOKENS.colors.light["primary-500"].rgb
-            )
-            .should(
-                "have.css",
-                "background-color",
-                LIB_TOKENS.colors.light["primary-50"].rgb
-            )
-    })
-
-    {
-        colors.map(c =>
-            it(`renders ${c} color`, () => {
-                cy.mount(
-                    <Key
-                        data-testid="testid"
-                        keys={keys}
-                        accentColor={c as any}
-                    />
-                )
-
-                cy.dataTest().should(
-                    "have.css",
-                    "border-color",
-                    (LIB_TOKENS as any).colors.light[
-                        c === "white"
-                            ? "white"
-                            : c === "font"
-                            ? "font"
-                            : c === "background"
-                            ? "background"
-                            : `${c}-500`
-                    ].rgb
-                )
-            })
-        )
-    }
-
-    it("renders as small", () => {
-        cy.mount(<Key keys={keys} data-testid="testid" size="small" />)
-        cy.dataTest()
-            .should("have.css", "border-radius", LIB_TOKENS.radiuses.xs)
-            .should("have.css", "font-size", LIB_TOKENS["font-sizes"].small.px)
-            .should("have.css", "padding", `0px ${LIB_TOKENS.spacers.xxs}`)
-    })
-
-    it("renders as large", () => {
-        cy.mount(<Key keys={keys} data-testid="testid" size="large" />)
-        cy.dataTest()
-            .should("have.css", "border-radius", LIB_TOKENS.radiuses.s)
-            .should("have.css", "font-size", LIB_TOKENS["font-sizes"].body.px)
-            .should(
-                "have.css",
-                "padding",
-                `${LIB_TOKENS.spacers.xxs} ${LIB_TOKENS.spacers.xs}`
-            )
-    })
-
-    it("renders a separator", () => {
-        cy.mount(<Key keys={keys} data-testid="testid" withSeparator />)
-        cy.dataTest().should("contain.text", "+")
-    })
-})

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

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

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

@@ -1,29 +0,0 @@
-/*=============================================== Key styles ===============================================*/
-
-import styled from "styled-components"
-import { setDefaultTheme, RADIUSES, FONT_SIZES, SPACERS, Mixins } from "../../"
-import type { LibKeySize, LibColorsShort } from "../../types"
-
-const StyledKey = styled.span<{
-    $size?: LibKeySize
-    $accentColor: Exclude<LibColorsShort, "black" | "white">
-}>`
-    border: 1px solid
-        ${({ theme, $accentColor }) => Mixins.AllColors($accentColor, theme)};
-    border-bottom-width: ${({ $size }) => ($size === "small" ? 2 : 3)}px;
-    border-radius: ${({ $size }) =>
-        $size === "small" ? RADIUSES.XS : RADIUSES.S};
-    font-size: ${({ $size }) =>
-        $size === "small" ? FONT_SIZES.SMALL : FONT_SIZES.BODY};
-    padding: ${({ $size }) =>
-        $size === "small"
-            ? `0 ${SPACERS.XXS}`
-            : `${SPACERS.XXS} ${SPACERS.XS}`};
-    background-color: ${({ theme, $accentColor }) =>
-        Mixins.Colors50($accentColor, theme)};
-    color: ${({ theme }) => theme.FONT};
-`
-
-setDefaultTheme([StyledKey])
-
-export { StyledKey }

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

@@ -1,11 +0,0 @@
-/*=============================================== Key types ===============================================*/
-
-import type { LibComponentBase, LibKeySize, LibColorsShort } from "../../types"
-
-export interface ILibKey extends LibComponentBase<HTMLSpanElement> {
-    keys: Array<string>
-    size?: LibKeySize
-    accentColor?: Exclude<LibColorsShort, "black" | "white">
-    withSeparator?: boolean
-    children?: never
-}

package/src/lib/components/LibIcon/LibIcon.tsx

@@ -1,35 +0,0 @@
-/*=============================================== LibIcon component ===============================================*/
-
-import { Icon } from "../../"
-import type { ILibLibIcon } from "./types"
-
-/**
- * @description Icon used to build components from library, use Icon component to build your app.
- * @access Only for building library, do not export
- * @prop icon: string | JSX.Element
- * @prop baseUrl: string | undefined
- * @prop size?: number
- * @prop color?: Any color from the library
- * @prop className?: string
- */
-export const LibIcon = ({
-    "data-testid": testid,
-    icon,
-    size,
-    color,
-    className,
-    baseUrl,
-}: ILibLibIcon) => {
-    if (typeof icon !== "string") return icon
-
-    return (
-        <Icon
-            data-testid={testid}
-            className={className}
-            src={icon}
-            size={size}
-            color={color}
-            baseURL={baseUrl}
-        />
-    )
-}

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

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

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

@@ -1,9 +0,0 @@
-/*=============================================== LibIcon types ===============================================*/
-
-import type { ILibIcon } from "../Icon/types"
-import type { LibIcon as LibIconType } from "../../types"
-
-export interface ILibLibIcon extends Omit<ILibIcon, "src"> {
-    icon: LibIconType
-    baseUrl: string | undefined
-}

package/src/lib/components/Link/Link.tsx

@@ -1,68 +0,0 @@
-/*=============================================== Link component ===============================================*/
-
-import { forwardRef, type RefObject } from "react"
-import { Link as RouterLink, NavLink } from "react-router-dom"
-import type { ILibLink } from "./types"
-
-/**
- * @description Returns a Link component
- * @link https://documentation-components-react.vercel.app/components/link
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- */
-export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, ILibLink>(
-    (
-        { "data-testid": testid, isNavLink, to, href, onClick, blank, end, ...rest },
-        ref
-    ) => {
-        if (onClick)
-            return (
-                <button
-                    data-testid={testid}
-                    ref={ref as RefObject<HTMLButtonElement>}
-                    onClick={onClick}
-                    {...rest}
-                />
-            )
-
-        if (href)
-            return (
-                <a
-                    data-testid={testid}
-                    ref={ref as RefObject<HTMLAnchorElement>}
-                    href={href}
-                    target={blank ? "_blank" : undefined}
-                    rel={blank ? "noreferrer noopener" : undefined}
-                    {...rest}
-                />
-            )
-
-        if (isNavLink && to)
-            return (
-                <NavLink
-                    data-testid={testid}
-                    ref={ref as RefObject<HTMLAnchorElement>}
-                    to={to}
-                    target={blank ? "_blank" : undefined}
-                    rel={blank ? "noreferrer noopener" : undefined}
-                    end={end}
-                    {...rest}
-                />
-            )
-
-        if (to)
-            return (
-                <RouterLink
-                    data-testid={testid}
-                    ref={ref as RefObject<HTMLAnchorElement>}
-                    to={to}
-                    target={blank ? "_blank" : undefined}
-                    rel={blank ? "noreferrer noopener" : undefined}
-                    {...rest}
-                />
-            )
-
-        return null
-    }
-)