@julseb-lib/react 0.0.63 → 0.0.65

package/dist/lib/components/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,139 @@
+/*=============================================== ButtonIcon component ===============================================*/
+
+import { forwardRef } from "react"
+import { capitalize } from "@julseb-lib/utils"
+import { Tooltip } from "../../"
+import { roundIconSize } from "../../lib-utils"
+import { ButtonIconFunction } from "./ButtonFunction"
+import type { ILibButtonIcon } from "./types"
+
+/**
+ * @description Returns a ButtonIcon component
+ * @link https://documentation-components-react.vercel.app/components/button-icon
+ * @extends HTMLButtonElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
+ * @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
+ * @prop icon: string | JSX.Element
+ * @prop iconSize?: number
+ * @prop iconBaseUrl?: string
+ * @prop size?: number
+ * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: "xxl" | "xl" | "l" | "m" | "s" | "xs"; hover: "xxl" | "xl" | "l" | "m" | "s" | "xs"; active: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop color?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @prop variant?: "plain" | "ghost" | "transparent"
+ * @prop showBackgroundHover?: boolean => only if variant is set to transparent
+ * @prop isLoading?: boolean
+ * @prop loaderVariant?: 1 | 2 | 3 | 4 => only if isLoading is defined
+ * @prop loaderBorderWidth?: number => only if loaderVariant is set to 1 | 2 | 3
+ * @prop tooltip?: string
+ * @prop showTooltip?: boolean | { position?: "top" | "bottom" | "left" | "right"; offset?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; backgroundColor?: Any color from the library; textColor?: Any color from the library; hideArrow?: boolean } => only if tooltip is defined
+ * @prop containerStyle?: CSSProperties => only if tooltip is defined
+ */
+export const ButtonIcon = forwardRef<
+    HTMLButtonElement & HTMLAnchorElement,
+    ILibButtonIcon
+>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            size = 32,
+            icon,
+            iconSize = roundIconSize(size),
+            shadow,
+            borderRadius = "circle",
+            tooltip,
+            showTooltip,
+            "aria-label": ariaLabel = capitalize(
+                typeof icon === "string" ? icon : "button icon"
+            ),
+            to,
+            href,
+            blank,
+            variant = "plain",
+            showBackgroundHover,
+            isLoading,
+            loaderVariant,
+            loaderBorderWidth = 2,
+            disabled,
+            "aria-disabled": ariaDisabled = isLoading || disabled,
+            color = "primary",
+            className,
+            containerStyle,
+            ...rest
+        },
+        ref
+    ) => {
+        const props = {
+            "data-testid": testid,
+            as,
+            className,
+            showTooltip,
+            to,
+            href,
+            isLoading,
+            disabled,
+            "aria-disabled": ariaDisabled,
+            "aria-label": ariaLabel,
+            blank,
+            variant,
+            showBackgroundHover,
+            borderRadius,
+            color,
+            shadow,
+            size,
+            loaderVariant,
+            icon,
+            iconSize,
+            loaderBorderWidth,
+            ref,
+            ...rest,
+        }
+
+        if (tooltip && showTooltip)
+            return (
+                <Tooltip
+                    data-testid={testid}
+                    className={className}
+                    tooltip={tooltip}
+                    position={
+                        typeof showTooltip === "object" && showTooltip?.position
+                            ? showTooltip.position
+                            : "top"
+                    }
+                    offset={
+                        typeof showTooltip === "object" && showTooltip?.offset
+                            ? showTooltip.offset
+                            : undefined
+                    }
+                    hideArrow={
+                        typeof showTooltip === "object" && showTooltip.hideArrow
+                            ? showTooltip.hideArrow
+                            : false
+                    }
+                    backgroundColor={
+                        typeof showTooltip === "object" &&
+                        showTooltip.backgroundColor
+                            ? showTooltip.backgroundColor
+                            : "black-80"
+                    }
+                    textColor={
+                        typeof showTooltip === "object" && showTooltip.textColor
+                            ? showTooltip.textColor
+                            : "white"
+                    }
+                    style={containerStyle}
+                >
+                    <ButtonIconFunction {...(props as any)} />
+                </Tooltip>
+            )
+
+        return <ButtonIconFunction {...(props as any)} />
+    }
+)

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

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

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

@@ -0,0 +1,31 @@
+/*=============================================== ButtonIcon styles ===============================================*/
+
+import styled, { css } from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
+import { MEDIA, setDefaultTheme } from "../../"
+import { ButtonMixin } from "../ComponentsMixins"
+import type { ILibButtonIconStyles } from "./subtypes"
+
+const StyledButtonIcon = styled.button<ILibButtonIconStyles>`
+    ${ButtonMixin}
+    position: relative;
+    padding: 0;
+    z-index: 0;
+    width: ${({ $size }) => stringifyPx($size)};
+    height: ${({ $size }) => stringifyPx($size)};
+
+    ${({ $variant, $showBackgroundHover, theme }) =>
+        $variant === "transparent" &&
+        $showBackgroundHover &&
+        css`
+            @media ${MEDIA.HOVER} {
+                &:not(:disabled):hover {
+                    background-color: ${theme.GRAY_50};
+                }
+            }
+        `}
+`
+
+setDefaultTheme([StyledButtonIcon])
+
+export { StyledButtonIcon }

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

@@ -0,0 +1,12 @@
+/*=============================================== ButtonIcon sub components types ===============================================*/
+
+import type { LibButtonVariant } from "../../types"
+import type { ILibButtonMixin } from "../ComponentsMixins"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN BUTTON_ICON COMPONENTS
+
+export interface ILibButtonIconStyles extends ILibButtonMixin {
+    $variant?: Extract<LibButtonVariant, "plain" | "transparent" | "ghost">
+    $size: number
+    $showBackgroundHover?: boolean
+}

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

@@ -0,0 +1,90 @@
+/*=============================================== ButtonIcon types ===============================================*/
+
+import type { ButtonHTMLAttributes, CSSProperties } from "react"
+import type {
+    LibComponentBase,
+    LibIcon,
+    ILibBoxShadow,
+    ILibRadius,
+    LibButtonLinkBlank,
+    LibColorsHover,
+    LibTooltipPosition,
+    LibSpacers,
+    LibButtonIconVariant,
+    LibLoaderVariant,
+    LibAllColors,
+} from "../../types"
+
+type ILibButtonIconBase = LibComponentBase<
+    HTMLButtonElement & HTMLAnchorElement
+> &
+    ButtonHTMLAttributes<HTMLButtonElement & HTMLAnchorElement> &
+    LibButtonLinkBlank & {
+        icon: LibIcon
+        iconSize?: number
+        iconBaseUrl?: string
+        size?: number
+        shadow?: ILibBoxShadow
+        borderRadius?: ILibRadius
+        color?: LibColorsHover
+        children?: never
+    }
+
+type ButtonIconVariantsBackground = ILibButtonIconBase & {
+    variant?: Extract<LibButtonIconVariant, "plain" | "ghost">
+    showBackgroundHover?: never
+}
+
+type ButtonIconVariantsWithoutBackground = ILibButtonIconBase & {
+    variant?: Extract<LibButtonIconVariant, "transparent">
+    showBackgroundHover?: boolean
+}
+
+type ButtonIconVariant =
+    | ButtonIconVariantsBackground
+    | ButtonIconVariantsWithoutBackground
+
+type ButtonIconLoading = ButtonIconVariant & {
+    isLoading?: boolean
+    loaderVariant?: Extract<LibLoaderVariant, 1 | 2 | 3>
+    loaderBorderWidth?: number
+}
+
+type ButtonIconLoadingVariant = ButtonIconVariant & {
+    isLoading?: boolean
+    loaderVariant?: Extract<LibLoaderVariant, 4>
+    loaderBorderWidth?: never
+}
+
+type ButtonIconNotLoading = ButtonIconVariant & {
+    isLoading?: undefined
+    loaderVariant?: never
+    loaderBorderWidth?: never
+}
+
+type ILibButtonIconAndLoader =
+    | ButtonIconLoading
+    | ButtonIconLoadingVariant
+    | ButtonIconNotLoading
+
+type ButtonIconWithTooltip = ILibButtonIconAndLoader & {
+    tooltip?: string
+    showTooltip?:
+        | boolean
+        | {
+              position?: LibTooltipPosition
+              offset?: LibSpacers
+              backgroundColor?: LibAllColors
+              textColor?: LibAllColors
+              hideArrow?: boolean
+          }
+    containerStyle?: CSSProperties
+}
+
+type ButtonIconWithoutTooltip = ILibButtonIconAndLoader & {
+    tooltip?: undefined
+    showTooltip?: never
+    containerStyle?: never
+}
+
+export type ILibButtonIcon = ButtonIconWithTooltip | ButtonIconWithoutTooltip

package/dist/lib/components/Card/Card.tsx

@@ -0,0 +1,133 @@
+/*=============================================== Card component ===============================================*/
+
+import { forwardRef } from "react"
+import { Link } from "react-router-dom"
+import { StyledCard } from "./styles"
+import type { ILibCard } from "./types"
+
+/**
+ * @description Returns a Card component
+ * @link https://documentation-components-react.vercel.app/components/card
+ * @extends ILibFlexbox
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @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
+ * @prop inline?: boolean
+ * @prop flexDirection?: CssFlexDirection
+ * @prop flexWrap?: CssFlexWrap
+ * @prop justifyContent?: CssJustifyContent
+ * @prop alignItems?: CssAlignItems
+ * @prop justifyItems?: CssJustifyItems
+ * @prop alignContent?: CssAlignContent
+ * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
+ * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
+ * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
+ * @prop cursor?: CssCursor
+ * @prop width?: string | number
+ * @prop height?: string | number
+ * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | { default: "xxl" | "xl" | "l" | "m" | "s" | "xs"; hover: "xxl" | "xl" | "l" | "m" | "s" | "xs"; active: "xxl" | "xl" | "l" | "m" | "s" | "xs" }
+ * @prop backgroundColor?: Any color from the library
+ * @prop textColor?: Any color from the library
+ * @prop backgroundImg?: { img: string; clip?: CssBackgroundClip; origin?: CssBackgroundOrigin; position?: CssBackgroundPosition; repeat?: CssBackgroundRepeat; size?: CssBackgroundSize }
+ * @prop textAlign?: CssTextAlign
+ */
+export const Card = forwardRef<HTMLDivElement, ILibCard>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            children,
+            border,
+            borderRadius,
+            padding,
+            cursor,
+            width = "100%",
+            height,
+            shadow,
+            backgroundColor = "background",
+            textColor = "font",
+            backgroundImg,
+            textAlign = "left",
+            href,
+            to,
+            blank,
+            onClick,
+            inline,
+            flexDirection,
+            flexWrap,
+            justifyContent,
+            alignItems,
+            justifyItems,
+            alignContent,
+            gap,
+            columnGap,
+            rowGap,
+            ...rest
+        },
+        ref
+    ) => {
+        return (
+            <StyledCard
+                data-testid={testid}
+                ref={ref}
+                as={
+                    as
+                        ? as
+                        : to
+                        ? Link
+                        : href
+                        ? "a"
+                        : onClick
+                        ? "button"
+                        : "div"
+                }
+                to={to}
+                href={href}
+                target={blank ? "_blank" : undefined}
+                rel={blank ? "noreferrer noopener" : undefined}
+                onClick={onClick}
+                $border={border}
+                $borderRadius={borderRadius}
+                $padding={padding}
+                $cursor={cursor}
+                $width={width}
+                $height={height}
+                $shadow={shadow}
+                $backgroundColor={backgroundColor}
+                $textColor={textColor}
+                $backgroundImg={
+                    backgroundImg && {
+                        $img: backgroundImg.img,
+                        $clip: backgroundImg.clip,
+                        $origin: backgroundImg.origin,
+                        $position: backgroundImg.position,
+                        $repeat: backgroundImg.repeat,
+                        $size: backgroundImg.size,
+                    }
+                }
+                $textAlign={textAlign}
+                $inline={inline}
+                $flexDirection={flexDirection}
+                $flexWrap={flexWrap}
+                $justifyContent={justifyContent}
+                $alignItems={alignItems}
+                $justifyItems={justifyItems}
+                $alignContent={alignContent}
+                $gap={gap}
+                $columnGap={columnGap}
+                $rowGap={rowGap}
+                {...rest}
+            >
+                {children}
+            </StyledCard>
+        )
+    }
+)

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

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

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

@@ -0,0 +1,75 @@
+/*=============================================== Card styles ===============================================*/
+
+import styled from "styled-components"
+import type { Property } from "csstype"
+import { stringifyPx } from "@julseb-lib/utils"
+import { setDefaultTheme, Mixins } from "../../"
+import type {
+    CssCursor,
+    LibAllColors,
+    ILibBorder,
+    ILibBoxShadow,
+    ILibPadding,
+    ILibRadius,
+    CssTextAlign,
+    CssAlignContent,
+    CssAlignItems,
+    CssFlexDirection,
+    CssFlexWrap,
+    CssJustifyContent,
+    CssJustifyItems,
+    LibSpacers,
+} from "../../types"
+
+const StyledCard = styled.div<{
+    $border?: ILibBorder
+    $borderRadius?: ILibRadius
+    $padding?: ILibPadding
+    $cursor?: CssCursor
+    $width?: string | number
+    $height?: string | number
+    $shadow?: ILibBoxShadow
+    $backgroundColor: LibAllColors
+    $textColor: LibAllColors
+    $backgroundImg?: {
+        $img: string
+        $clip?: Property.BackgroundClip
+        $origin?: Property.BackgroundOrigin
+        $position?: Property.BackgroundPosition
+        $repeat?: Property.BackgroundRepeat
+        $size?: Property.BackgroundSize
+    }
+    $textAlign?: CssTextAlign
+    $inline?: boolean
+    $flexDirection?: CssFlexDirection
+    $flexWrap?: CssFlexWrap
+    $justifyContent?: CssJustifyContent
+    $alignItems?: CssAlignItems
+    $justifyItems?: CssJustifyItems
+    $alignContent?: CssAlignContent
+    $gap?: LibSpacers
+    $columnGap?: LibSpacers
+    $rowGap?: LibSpacers
+}>`
+    ${Mixins.Flexbox};
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    cursor: ${({ $cursor }) => $cursor};
+    width: ${({ $width }) => $width && stringifyPx($width)};
+    height: ${({ $height }) => $height && stringifyPx($height)};
+    background-color: ${({ theme, $backgroundColor }) =>
+        Mixins.AllColors($backgroundColor, theme)};
+    color: ${({ theme, $textColor }) => Mixins.AllColors($textColor, theme)};
+    text-align: ${({ $textAlign }) => $textAlign};
+    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
+    ${({ $border }) => Mixins.Border($border)};
+    ${({ $padding }) => Mixins.Padding($padding)};
+    ${({ $shadow }) => Mixins.BoxShadow($shadow)};
+    ${({ $backgroundImg }) =>
+        Mixins.BackgroundImage({ ...($backgroundImg as any) })};
+`
+
+setDefaultTheme([StyledCard])
+
+export { StyledCard }

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

@@ -0,0 +1,29 @@
+/*=============================================== Card types ===============================================*/
+
+import type {
+    LibComponentBase,
+    LibButtonLinkBlank,
+    ILibBackgroundImage,
+    ILibBorder,
+    ILibRadius,
+    CssCursor,
+    ILibBoxShadow,
+    LibAllColors,
+    CssTextAlign,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+export type ILibCard = LibComponentBase<HTMLDivElement> &
+    LibButtonLinkBlank &
+    ILibFlexbox & {
+        border?: ILibBorder
+        borderRadius?: ILibRadius
+        cursor?: CssCursor
+        width?: string | number
+        height?: string | number
+        shadow?: ILibBoxShadow
+        backgroundColor?: LibAllColors
+        textColor?: LibAllColors
+        backgroundImg?: ILibBackgroundImage
+        textAlign?: CssTextAlign
+    }

package/dist/lib/components/CodeContainer/CodeContainer.tsx

@@ -0,0 +1,135 @@
+/*=============================================== CodeContainer component ===============================================*/
+
+import { forwardRef, useState } from "react"
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
+import { roundIconSize } from "../../lib-utils"
+import { Clipboard, Check } from "../../icons"
+import {
+    StyledCodeContainer,
+    StyledSyntaxHighlighter,
+    StyledButtonIcon,
+} from "./styles"
+import type { ILibCodeContainer } from "./types"
+
+const DEFAULT_ICON_SIZE = 24
+
+/**
+ * @description Returns a CodeContainer component
+ * @link https://documentation-components-react.vercel.app/components/code-container
+ * @extends HTMLDivElement
+ * @prop data-testid?: string
+ * @prop as?: ElementType
+ * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @prop language?: string => language name
+ * @prop highlighterProps?: SyntaxHighlighterProps => imported from react-syntax-highlighter
+ * @prop color?: Any color from the library
+ * @prop highlighterStyle?: CSSProperties
+ * @prop hideCopyButton?: boolean
+ * @prop tooltipTexts?: { copy?: string; copied?: string } => only if hideCopyButton is not set to true
+ * @prop icons?: { copy?: string | JSX.Element; copied?: string | JSX.Element }
+ * @prop iconsSizes?: { copy?: number; copied?: number }
+ * @prop iconsBaseUrl?: string
+ */
+export const CodeContainer = forwardRef<HTMLDivElement, ILibCodeContainer>(
+    (
+        {
+            "data-testid": testid,
+            as,
+            className,
+            children,
+            highlighterProps,
+            highlighterStyle = atomOneDark,
+            color,
+            hideCopyButton,
+            tooltipTexts,
+            icons,
+            iconsSizes,
+            iconsBaseUrl,
+            ...rest
+        },
+        ref
+    ) => {
+        const [hasCopied, setHasCopied] = useState(false)
+
+        const copyToClipboard = () => {
+            if (children) {
+                let copyString = children.toString()
+
+                if (copyString[0] === "$") {
+                    copyString = copyString.replace("$ ", "")
+                }
+
+                navigator.clipboard.writeText(copyString)
+                setHasCopied(true)
+            }
+
+            setTimeout(() => setHasCopied(false), 1000)
+        }
+
+        const copyButtonCopy = {
+            icon: icons?.copy ?? (
+                <Clipboard
+                    data-testid={testid && `${testid}.CopyButton.IconCopy`}
+                    className={className && "IconCopy"}
+                    size={iconsSizes?.copy ?? roundIconSize(DEFAULT_ICON_SIZE)}
+                />
+            ),
+            tooltip: tooltipTexts?.copy ?? "Copy",
+        }
+
+        const copyButtonCopied = {
+            icon: icons?.copied ?? (
+                <Check
+                    data-testid={testid && `${testid}.CopyButton.IconCopied`}
+                    className={className && "IconCopied"}
+                    size={
+                        iconsSizes?.copied ?? roundIconSize(DEFAULT_ICON_SIZE)
+                    }
+                />
+            ),
+            tooltip: tooltipTexts?.copy ?? "Copied!",
+        }
+
+        return (
+            <StyledCodeContainer
+                data-testid={testid}
+                ref={ref}
+                className={className}
+                as={as || color ? "pre" : "div"}
+                {...rest}
+            >
+                <StyledSyntaxHighlighter
+                    data-testid={testid && `${testid}.SyntaxHighlighter`}
+                    className={className && "SyntaxHighlighter"}
+                    style={highlighterStyle}
+                    $color={color}
+                    {...highlighterProps}
+                >
+                    {children}
+                </StyledSyntaxHighlighter>
+
+                {!hideCopyButton && (
+                    <StyledButtonIcon
+                        data-testid={testid && `${testid}.CopyButton`}
+                        className={className && "CopyButton"}
+                        onClick={copyToClipboard}
+                        icon={
+                            hasCopied
+                                ? copyButtonCopied.icon
+                                : copyButtonCopy.icon
+                        }
+                        size={32}
+                        color={hasCopied ? "success" : "white"}
+                        tooltip={
+                            hasCopied
+                                ? copyButtonCopied.tooltip
+                                : copyButtonCopy.tooltip
+                        }
+                        iconBaseUrl={iconsBaseUrl}
+                        showTooltip
+                    />
+                )}
+            </StyledCodeContainer>
+        )
+    }
+)

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

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