@julseb-lib/react 0.0.50 → 0.0.52

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

@@ -1,86 +0,0 @@
-/*=============================================== Header sub components types ===============================================*/
-
-import type { FC, RefObject } from "react"
-import type { LibHeaderLink, LibLink } from "../../types"
-import type { ILibHeader } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN THOSE COMPONENTS
-
-/*====================== HeaderNav ======================*/
-export interface ILibHeaderNav
-    extends Pick<
-        ILibHeader,
-        | "data-testid"
-        | "className"
-        | "search"
-        | "children"
-        | "links"
-        | "variant"
-        | "navMobileVariant"
-        | "burgerPosition"
-        | "nav"
-    > {
-    burgerRef: RefObject<HTMLButtonElement>
-    isOpen: boolean
-    headerHeight: number
-    handleClose: () => void
-}
-
-/*====================== HeaderBurger ======================*/
-export interface ILibHeaderBurger
-    extends Pick<
-        ILibHeader,
-        | "data-testid"
-        | "className"
-        | "navMobileVariant"
-        | "variant"
-        | "burgerColor"
-    > {
-    isOpen: boolean
-    handleOpen: () => void
-    handleClose: () => void
-}
-
-/*====================== HeaderLogo ======================*/
-export interface ILibHeaderLogo
-    extends Pick<
-        ILibHeader,
-        "data-testid" | "className" | "logo" | "children"
-    > {
-    isOpen: boolean
-}
-
-/*====================== HeaderNavLink ======================*/
-export interface ILibHeaderNavLink {
-    "data-testid": string | undefined
-    className: string | undefined
-    link: LibHeaderLink | JSX.Element | FC
-}
-
-/*====================== HeaderSearch ======================*/
-export interface ILibHeaderSearch
-    extends Pick<ILibHeader, "data-testid" | "className" | "search"> {
-    handleClose: () => void
-}
-
-/*====================== HeaderNav ======================*/
-
-type HeaderLogoWithText = LibLink & {
-    text: string
-    img?: never
-    imgOpen?: never
-    alt?: never
-    width?: never
-    height?: never
-}
-
-type HeaderLogoWithImg = LibLink & {
-    text?: never
-    img: string
-    imgOpen?: string
-    alt?: string
-    width?: number
-    height?: number
-}
-
-export type LibHeaderLogo = string | HeaderLogoWithText | HeaderLogoWithImg

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

@@ -1,91 +0,0 @@
-/*=============================================== Header types ===============================================*/
-
-import type {
-    LibComponentBase,
-    LibHeaderPosition,
-    LibIcon,
-    LibInputBackground,
-    LibInputVariant,
-    LibNavBurgerPosition,
-    LibNavMobileVariant,
-    LibHeaderLink,
-    ReactChildren,
-    LibHeaderVariant,
-    LibColorsHover,
-    LibAllColors,
-} from "../../types"
-import type { LibHeaderLogo } from "./subtypes"
-
-interface ILibHeaderBase extends LibComponentBase<HTMLDivElement> {
-    logo: LibHeaderLogo
-    burgerPosition?: LibNavBurgerPosition
-    burgerColor?:
-        | LibColorsHover
-        | { closed: LibColorsHover; open: LibColorsHover }
-    navDesktopVariant?: LibNavBurgerPosition
-    navMobileVariant?: LibNavMobileVariant
-    enableScrollingOpen?: boolean
-    search?: {
-        pathname: string
-        queries?: Array<Array<string>>
-        iconLeft?: LibIcon
-        iconLeftSize?: number
-        iconClear?: LibIcon
-        iconClearSize?: number
-        iconBaseUrl?: string
-        placeholder?: string
-        keyboardShortcut?: Array<string>
-        showKeys?: boolean
-        inputBackground?: LibInputBackground
-        maxWidth?: string | number
-        inputVariant?: LibInputVariant
-    }
-}
-
-interface HeaderNotFixed extends ILibHeaderBase {
-    position?: Exclude<LibHeaderPosition, "fixed">
-    hideOnScroll?: never
-}
-
-interface HeaderFixed extends ILibHeaderBase {
-    position?: Extract<LibHeaderPosition, "fixed">
-    hideOnScroll?: boolean | number
-}
-
-type HeaderPosition = HeaderNotFixed | HeaderFixed
-
-type HeaderWithLinks = HeaderPosition & {
-    links: Array<LibHeaderLink | JSX.Element>
-    nav?: never
-    children?: never
-}
-
-type HeaderWithNav = HeaderPosition & {
-    links: Array<LibHeaderLink | JSX.Element>
-    nav?: ReactChildren
-    children?: never
-}
-
-type HeaderWithChildren = HeaderPosition & {
-    links?: never
-    nav?: never
-    children?: ReactChildren
-}
-
-type LibHeaderChildren = HeaderWithLinks | HeaderWithNav | HeaderWithChildren
-
-type HeaderWithBackground = LibHeaderChildren & {
-    variant?: Extract<LibHeaderVariant, "primary">
-    backgroundColor?: LibAllColors
-    textColor?: LibAllColors
-    linkColor?: LibColorsHover
-}
-
-type HeaderWithoutBackground = LibHeaderChildren & {
-    variant?: Exclude<LibHeaderVariant, "primary">
-    backgroundColor?: never
-    textColor?: never
-    linkColor?: never
-}
-
-export type ILibHeader = HeaderWithBackground | HeaderWithoutBackground

package/dist/lib/components/Helmet/Helmet.tsx

@@ -1,67 +0,0 @@
-/*=============================================== Helmet component ===============================================*/
-
-import { Helmet as Meta, HelmetData } from "react-helmet-async"
-import type { ILibHelmet } from "./types"
-
-const helmetData = new HelmetData({})
-
-/**
- * @description Returns a Helmet component
- * @link https://documentation-components-react.vercel.app/components/helmet
- * @extends HelmetProps => imported from react-helmet-async
- * @prop title: string
- * @prop favicon?: string
- * @prop description?: string
- * @prop keywords?: string | Array<string>
- * @prop author?: string
- * @prop type?: string
- * @prop cover?: string
- * @prop siteName?: string
- * @prop language?: string
- * @prop children?: ReactChildren
- */
-export const Helmet = ({
-    title,
-    favicon,
-    description,
-    keywords,
-    author,
-    type,
-    cover,
-    siteName,
-    language = "en",
-    children,
-    ...rest
-}: ILibHelmet) => {
-    return (
-        <Meta helmetData={helmetData} {...rest}>
-            <title>{title}</title>
-            <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-            <meta
-                content="width=device-width, initial-scale=1"
-                name="viewport"
-            />
-            {children && children}
-            {favicon && <link rel="icon" href={favicon} />}
-            {description && <meta name="description" content={description} />}
-            {keywords && (
-                <meta
-                    name="keywords"
-                    content={
-                        typeof keywords === "string"
-                            ? keywords
-                            : keywords?.join(", ")
-                    }
-                />
-            )}
-            {author && <meta name="author" content={author} />}
-            <meta property="og:title" content={title} />
-            {type && <meta property="og:type" content={type} />}
-            {cover && <meta property="og:image" content={cover} />}
-            {siteName && <meta property="og:site_name" content={siteName} />}
-
-            <meta property="og:locale" content={language} />
-            <html lang={language} />
-        </Meta>
-    )
-}

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

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

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

@@ -1,17 +0,0 @@
-/*=============================================== Helmet types ===============================================*/
-
-import type { HelmetProps } from "react-helmet-async"
-import type { ReactChildren } from "../../types"
-
-export interface ILibHelmet extends HelmetProps {
-    title: string
-    favicon?: string
-    description?: string
-    keywords?: string | Array<string>
-    author?: string
-    type?: string
-    cover?: string
-    siteName?: string
-    language?: string
-    children?: ReactChildren
-}

package/dist/lib/components/Highlight/Highlight.tsx

@@ -1,45 +0,0 @@
-/*=============================================== Highlight component ===============================================*/
-
-import { forwardRef } from "react"
-import { Text } from "../../"
-import { getHighlightedText } from "../../lib-utils"
-import type { ILibHighlight } from "./types"
-
-/**
- * @description Highlight selected text
- * @link https://documentation-components-react.vercel.app/components/highlight
- * @extends ILibText
- * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
- * @prop highlightedText: string
- * @prop highlightStyle?: CSSProperties
- * @prop color?: Any color from the library
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop textAlign?: CssTextAlign
- * @prop tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "strong" | "em" | "small" | "blockquote" | "ul" | "ol" | "dl"
- * @prop display?: boolean => only if tag is set to h1 to h5
- */
-export const Highlight = forwardRef<
-    HTMLHeadingElement &
-        HTMLParagraphElement &
-        HTMLQuoteElement &
-        HTMLUListElement &
-        HTMLOListElement &
-        HTMLDListElement,
-    ILibHighlight
->(
-    (
-        { children = "", highlightedText, className, highlightStyle, ...rest },
-        ref
-    ) => {
-        return (
-            <Text ref={ref} className={className} {...rest}>
-                {getHighlightedText(
-                    children,
-                    highlightedText,
-                    className,
-                    highlightStyle
-                )}
-            </Text>
-        )
-    }
-)

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

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

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

@@ -1,11 +0,0 @@
-/*=============================================== Highlight types ===============================================*/
-
-import type { CSSProperties } from "react"
-import type { ReactChildren } from "../../types"
-import type { ILibText } from "../Text/types"
-
-export type ILibHighlight = ILibText & {
-    children?: ReactChildren
-    highlightedText: string
-    highlightStyle?: CSSProperties
-}

package/dist/lib/components/Hr/Hr.tsx

@@ -1,50 +0,0 @@
-/*=============================================== Hr component ===============================================*/
-
-import { forwardRef } from "react"
-import classNames from "classnames"
-import { StyledHr } from "./styles"
-import type { ILibHr } from "./types"
-
-/**
- * @description Returns a Hr component
- * @link https://documentation-components-react.vercel.app/components/hr
- * @extends HTMLHRElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLHRElement>
- * @prop height?: number
- * @prop maxWidth?: string | number
- * @prop color?: Any color from the library
- * @prop margin?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | "auto" | "0 auto" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop isRounded?: boolean
- */
-export const Hr = forwardRef<HTMLHRElement, ILibHr>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            height = 1,
-            maxWidth = "100%",
-            color = "gray-200",
-            margin = "0 auto",
-            isRounded,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledHr
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Rounded: isRounded })}
-                $height={height}
-                $maxWidth={maxWidth}
-                $color={color}
-                $margin={margin}
-                {...rest}
-            />
-        )
-    }
-)

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

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

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

@@ -1,29 +0,0 @@
-/*=============================================== Hr styles ===============================================*/
-
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins, RADIUSES } from "../../"
-import type { LibAllColors, ILibMargin } from "../../types"
-
-const StyledHr = styled.hr<{
-    $color: LibAllColors
-    $height: number
-    $maxWidth: string | number
-    $margin?: ILibMargin
-}>`
-    display: block;
-    width: 100%;
-    max-width: ${({ $maxWidth }) => stringifyPx($maxWidth)};
-    border: none;
-    background-color: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-    height: ${({ $height }) => stringifyPx($height)};
-    ${({ $margin }) => Mixins.Margin($margin)}
-
-    &.Rounded {
-        border-radius: ${RADIUSES.ROUND};
-    }
-`
-
-setDefaultTheme([StyledHr])
-
-export { StyledHr }

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

@@ -1,12 +0,0 @@
-/*=============================================== Hr types ===============================================*/
-
-import type { LibAllColors, LibComponentBase, ILibMargin } from "../../types"
-
-export interface ILibHr extends LibComponentBase<HTMLHRElement> {
-    height?: number
-    maxWidth?: string | number
-    color?: LibAllColors
-    margin?: ILibMargin
-    isRounded?: boolean
-    children?: never
-}

package/dist/lib/components/Icon/Icon.tsx

@@ -1,42 +0,0 @@
-/*=============================================== Icon component ===============================================*/
-
-import { forwardRef } from "react"
-import { StyledIcon } from "./styles"
-import type { ILibIcon } from "./types"
-
-/**
- * @description Returns an Icon component
- * @link https://documentation-components-react.vercel.app/components/icon
- * @extends Props from react-inlinesvg
- * @tutorial To use this component, add the SVG file for the icon you want to render in `/public/icons` folder
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<SVGElement>
- * @prop src: string
- * @prop size?: number
- * @prop color?: Any color from the library
- * @prop baseUrl?: string
- */
-export const Icon = forwardRef<SVGElement, ILibIcon>(
-    (
-        {
-            "data-testid": testid,
-            src,
-            size = 32,
-            color = "currentColor",
-            baseURL = "/icons",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledIcon
-                data-testid={testid}
-                innerRef={ref}
-                src={`${baseURL}/${src}.svg`}
-                $size={size}
-                $color={color}
-                {...rest}
-            />
-        )
-    }
-)

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

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

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

@@ -1,21 +0,0 @@
-/*=============================================== Icon styles ===============================================*/
-
-import styled from "styled-components"
-import SVG from "react-inlinesvg"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Mixins } from "../../"
-import type { LibAllColors } from "../../types"
-
-const StyledIcon = styled(SVG)<{ $size: number; $color: LibAllColors }>`
-    width: ${({ $size }) => stringifyPx($size)};
-    height: ${({ $size }) => stringifyPx($size)};
-    fill: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-
-    path {
-        fill: ${({ theme, $color }) => Mixins.AllColors($color, theme)};
-    }
-`
-
-setDefaultTheme([StyledIcon])
-
-export { StyledIcon }

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

@@ -1,13 +0,0 @@
-/*=============================================== Icon types ===============================================*/
-
-import type { Props as SVGProps } from "react-inlinesvg"
-import type { LibAllColors } from "../../types"
-
-export interface ILibIcon extends SVGProps {
-    "data-testid"?: string
-    src: string
-    size?: number
-    color?: LibAllColors
-    baseUrl?: string
-    children?: never
-}

package/dist/lib/components/IconMenu/IconMenu.tsx

@@ -1,157 +0,0 @@
-/*=============================================== IconMenu component ===============================================*/
-
-import { forwardRef, useState, useRef } from "react"
-import classNames from "classnames"
-import { Burger, useClickOutside, useMergeRefs } from "../../"
-import { IconMenuItem } from "./IconMenuItem"
-import {
-    StyledIconMenu,
-    OpenButton,
-    OpenIcon,
-    DEFAULT_BUTTON_SIZE,
-} from "./styles"
-import type { ILibIconMenu } from "./types"
-
-/**
- * @description Returns a IconMenu component
- * @link https://documentation-components-react.vercel.app/components/icon-menu
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibIconMenuItem> => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop direction?: "left" | "up" | "right" | "down"
- * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop position?: "relative" | "absolute" | "fixed"
- * @prop hideTooltips?: boolean
- * @prop buttonsVariant?: "plain" | "transparent" | "ghost"
- * @prop iconBaseUrl?: string
- * @prop icon?: "plus" | "burger" | { open: string | JSX.Element; close: string | JSX.Element; openSize?: number; closeSize?: number }
- *
- * @type LibIconMenuItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
- * @prop label: string
- * @prop icon: string | JSX.Element
- * @prop iconSize?: number
- * @prop onClick: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to: string => only if onClick and href are not defined
- * @prop href: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
- */
-export const IconMenu = forwardRef<HTMLDivElement, ILibIconMenu>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            icon = "plus",
-            position,
-            direction = "right",
-            color = "primary",
-            items,
-            hideTooltips,
-            buttonsVariant,
-            iconBaseUrl,
-            ...rest
-        },
-        ref
-    ) => {
-        const [isOpen, setIsOpen] = useState(false)
-
-        const el = useRef<HTMLDivElement>(null)
-
-        useClickOutside(el, () => {
-            if (isOpen) setIsOpen(false)
-        })
-
-        return (
-            <StyledIconMenu
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                className={className}
-                $position={position?.position || "relative"}
-                $left={position?.left}
-                $top={position?.top}
-                $right={position?.right}
-                $bottom={position?.bottom}
-                $zIndex={position?.zIndex || 999}
-                as={as}
-                {...rest}
-            >
-                {/* @ts-ignore */}
-                <OpenButton
-                    data-testid={testid && `${testid}.OpenButton`}
-                    className={className && "OpenButton"}
-                    icon={
-                        typeof icon === "object" ? (
-                            isOpen ? (
-                                icon.open
-                            ) : (
-                                icon.close
-                            )
-                        ) : icon === "burger" ? (
-                            <Burger
-                                data-testid={
-                                    testid && `${testid}.OpenButton.Burger`
-                                }
-                                className={className && "OpenBurger"}
-                                isOpen={isOpen}
-                                color={color === "white" ? "primary" : "white"}
-                                as="span"
-                                width={DEFAULT_BUTTON_SIZE * 0.5}
-                                height={DEFAULT_BUTTON_SIZE * 0.4}
-                                noHover
-                            />
-                        ) : (
-                            <OpenIcon
-                                data-testid={
-                                    testid && `${testid}.OpenButton.Icon`
-                                }
-                                className={classNames(
-                                    { OpenIcon: className },
-                                    { Open: isOpen }
-                                )}
-                            />
-                        )
-                    }
-                    color={color}
-                    onClick={() => setIsOpen(!isOpen)}
-                />
-
-                {items
-                    ? items?.map((item, i) => (
-                          <IconMenuItem
-                              key={i}
-                              data-testid={
-                                  item["data-testid"] ||
-                                  (testid && `${testid}.Item`)
-                              }
-                              className={classNames(
-                                  item.className,
-                                  { IconMenuItem: className },
-                                  { Open: isOpen }
-                              )}
-                              id={item.id}
-                              ref={item.ref}
-                              {...(item as any)}
-                              direction={direction}
-                              indexPosition={i + 1}
-                              isOpen={isOpen}
-                              size={DEFAULT_BUTTON_SIZE}
-                              tooltip={item?.label}
-                              showTooltip={!hideTooltips && { offset: -12 }}
-                              variant={buttonsVariant}
-                              iconBaseUrl={iconBaseUrl}
-                          />
-                      ))
-                    : children}
-            </StyledIconMenu>
-        )
-    }
-)