@julseb-lib/react 0.0.63 → 0.0.65

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

@@ -0,0 +1,86 @@
+/*=============================================== 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

@@ -0,0 +1,91 @@
+/*=============================================== 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

@@ -0,0 +1,67 @@
+/*=============================================== 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} />}
+w            <meta property="og:locale" content={language} />
+
+            <html lang={language} />
+        </Meta>
+    )
+}

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

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

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

@@ -0,0 +1,17 @@
+/*=============================================== 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

@@ -0,0 +1,45 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,11 @@
+/*=============================================== 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

@@ -0,0 +1,50 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,29 @@
+/*=============================================== 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

@@ -0,0 +1,12 @@
+/*=============================================== 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

@@ -0,0 +1,42 @@
+/*=============================================== 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

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

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

@@ -0,0 +1,21 @@
+/*=============================================== 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

@@ -0,0 +1,13 @@
+/*=============================================== 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

@@ -0,0 +1,157 @@
+/*=============================================== 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>
+        )
+    }
+)