@julseb-lib/react 0.0.16 → 0.0.20

package/dist/lib/components/Accordion/AccordionButton.tsx

@@ -8,7 +8,7 @@ import { Plus, ChevronDown } from "../../icons"
 import { StyledAccordionButton, StyledAccordionIcon } from "./styles"
 import type { ILibAccordionButton } from "./subtypes"
 
-export function AccordionButton({
+export const AccordionButton = ({
     "data-testid": testid,
     className,
     variant = "basic",
@@ -16,7 +16,7 @@ export function AccordionButton({
     isOpen,
     setIsOpen,
     title,
-}: ILibAccordionButton) {
+}: ILibAccordionButton) => {
     const iconProps = {
         "data-testid":
             testid &&

package/dist/lib/components/Accordion/AccordionContent.tsx

@@ -5,13 +5,13 @@ import { capitalize } from "@julseb-lib/utils"
 import { StyledAccordionContent } from "./styles"
 import type { ILibAccordionContent } from "./subtypes"
 
-export function AccordionContent({
+export const AccordionContent = ({
     "data-testid": testid,
     className,
     children,
     isOpen,
     variant = "basic",
-}: ILibAccordionContent) {
+}: ILibAccordionContent) => {
     return (
         <StyledAccordionContent
             data-testid={testid && `${testid}.AccordionContent`}

package/dist/lib/components/Autocomplete/Autocomplete.tsx

@@ -54,7 +54,7 @@ import type { ILibAutocomplete } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -4,12 +4,12 @@ import { Link } from "react-router-dom"
 import { uuid } from "@julseb-lib/utils"
 import type { ILibBreadcrumbItem } from "./subtypes"
 
-export function BreadcrumbItem({
+export const BreadcrumbItem = ({
     "data-testid": testid,
     className,
     item,
     index,
-}: ILibBreadcrumbItem) {
+}: ILibBreadcrumbItem) => {
     if (item.to)
         return (
             <Link

package/dist/lib/components/Datepicker/Calendar.tsx

@@ -18,7 +18,7 @@ import {
 } from "./styles"
 import type { ILibDatepicker } from "./types"
 
-export function Calendar({
+export const Calendar = ({
     "data-testid": testid,
     className,
     minDate,
@@ -52,7 +52,7 @@ export function Calendar({
 > & {
     isOpen: boolean
     setIsOpen: DispatchState<boolean>
-}) {
+}) => {
     const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
     const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
 

package/dist/lib/components/Datepicker/Datepicker.tsx

@@ -41,7 +41,7 @@ import type { ILibDatepicker } from "./types"
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/Footer/FooterLogo.tsx

@@ -3,11 +3,11 @@
 import { LogoText, LogoImg } from "./styles"
 import type { ILibFooterLogo } from "./subtypes"
 
-export function FooterLogo({
+export const FooterLogo = ({
     "data-testid": testid,
     className,
     logo,
-}: ILibFooterLogo) {
+}: ILibFooterLogo) => {
     const { text, img, alt = "Logo", width = 100, height = 30 } = logo as any
 
     if (text || typeof logo === "string")

package/dist/lib/components/Header/HeaderLogo.tsx

@@ -4,13 +4,13 @@ import { Link } from "react-router-dom"
 import { Logo, LogoImg } from "./styles"
 import type { ILibHeaderLogo } from "./subtypes"
 
-export function HeaderLogo({
+export const HeaderLogo = ({
     "data-testid": testid,
     className,
     logo,
     children,
     isOpen,
-}: ILibHeaderLogo) {
+}: ILibHeaderLogo) => {
     const {
         to = "/",
         href,

package/dist/lib/components/Header/HeaderNav.tsx

@@ -1,6 +1,6 @@
 /*=============================================== HeaderNav ===============================================*/
 
-import { useRef, isValidElement, type ReactNode, Fragment } from "react"
+import { useRef, type ReactNode } from "react"
 import classNames from "classnames"
 import { uuid } from "@julseb-lib/utils"
 import { useMaxWidth, useClickOutside } from "../../"
@@ -8,9 +8,9 @@ import { HeaderNavLink } from "./HeaderNavLink"
 import { HeaderSearch } from "./HeaderSearch"
 import { Nav } from "./styles"
 import type { ILibHeaderNav } from "./subtypes"
-import { LibHeaderLink } from "../../types"
+import type { LibHeaderLink } from "../../types"
 
-export function HeaderNav({
+export const HeaderNav = ({
     "data-testid": testid,
     className,
     search,
@@ -24,7 +24,7 @@ export function HeaderNav({
     burgerRef,
     handleClose,
     nav,
-}: ILibHeaderNav) {
+}: ILibHeaderNav) => {
     const isMobile = useMaxWidth(600)
 
     const el = useRef<HTMLDivElement>(null)
@@ -64,20 +64,15 @@ export function HeaderNav({
                 />
             )}
 
-            {links
-                ? links.map(link =>
-                      isValidElement(link) ? (
-                          <Fragment>{link}</Fragment>
-                      ) : (
-                          <HeaderNavLink
-                              data-testid={testid}
-                              className={className}
-                              link={link as LibHeaderLink | JSX.Element}
-                              key={uuid()}
-                          />
-                      )
-                  )
-                : null}
+            {links &&
+                links.map(link => (
+                    <HeaderNavLink
+                        data-testid={testid}
+                        className={className}
+                        link={link as LibHeaderLink | JSX.Element}
+                        key={uuid()}
+                    />
+                ))}
 
             {children && children}
 

package/dist/lib/components/Header/HeaderNavLink.tsx

@@ -1,13 +1,17 @@
+// @ts-nocheck
 /*=============================================== HeaderNavLink ===============================================*/
 
+import { isValidElement } from "react"
 import { NavLink } from "react-router-dom"
 import type { ILibHeaderNavLink } from "./subtypes"
 
-export function HeaderNavLink({
+export const HeaderNavLink = ({
     "data-testid": testid,
     link,
     className,
-}: ILibHeaderNavLink) {
+}: ILibHeaderNavLink) => {
+    if (isValidElement(link)) return link
+
     if (link.to)
         return (
             <NavLink

package/dist/lib/components/Header/HeaderSearch.tsx

@@ -6,12 +6,12 @@ import { Input } from "../../"
 import { SearchForm } from "./styles"
 import type { ILibHeaderSearch } from "./subtypes"
 
-export function HeaderSearch({
+export const HeaderSearch = ({
     "data-testid": testid,
     className,
     search,
     handleClose,
-}: ILibHeaderSearch) {
+}: ILibHeaderSearch) => {
     if (!search) return null
 
     const {

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

@@ -1,6 +1,5 @@
 /*=============================================== Header types ===============================================*/
 
-import type { FC } from "react"
 import type {
     LibComponentBase,
     LibHeaderPosition,

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

@@ -20,7 +20,7 @@ const helmetData = new HelmetData({})
  * @prop language?: string
  * @prop children?: ReactChildren
  */
-export function Helmet({
+export const Helmet = ({
     title,
     favicon,
     description,
@@ -32,7 +32,7 @@ export function Helmet({
     language = "en",
     children,
     ...rest
-}: ILibHelmet) {
+}: ILibHelmet) => {
     return (
         <Meta helmetData={helmetData} {...rest}>
             <title>{title}</title>

package/dist/lib/components/Input/Input.tsx

@@ -63,7 +63,7 @@ const InputFunction = forwardRef<
  * @prop label?: string
  * @prop labelComment?: string
  * @prop helper?: string
- * @prop helperBottom?: string | { text: string; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
+ * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
  * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  * @prop iconBaseUrl?: string
  * @prop inputBackground?: "light" | "dark"

package/dist/lib/components/InputComponents/components/InputButton.tsx

@@ -19,7 +19,7 @@ import type { ILibInputButton } from "../types"
  * @prop validationStatus: boolean | undefined | undefined
  * @prop className: string | undefined
  */
-export function InputButton({
+export const InputButton = ({
     "data-testid": testid,
     "aria-label": ariaLabel,
     onClick,
@@ -31,7 +31,7 @@ export function InputButton({
     inputBackground,
     validationStatus,
     className,
-}: ILibInputButton) {
+}: ILibInputButton) => {
     return (
         <StyledInputButton
             aria-label={ariaLabel}

package/dist/lib/components/InputComponents/components/InputContainer.tsx

@@ -20,7 +20,7 @@ import type { ILibInputContainer } from "../../InputContainer/types"
  * @prop style: CSSProperties | undefined
  * @prop iconBaseUrl: string | undefined
  */
-export function InputContainer({
+export const InputContainer = ({
     "data-testid": testid,
     id,
     label,
@@ -36,7 +36,7 @@ export function InputContainer({
     hasListOpen,
     iconBaseUrl,
     style,
-}: ILibInputContainer) {
+}: ILibInputContainer) => {
     if (
         !label &&
         !labelComment &&

package/dist/lib/components/InputComponents/components/InputIcon.tsx

@@ -17,7 +17,7 @@ import type { ILibInputIconContainer } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop inputVariant: "rounded" | "pill" | undefined
  */
-export function InputIcon({
+export const InputIcon = ({
     "data-testid": testid,
     className,
     icon,
@@ -27,7 +27,7 @@ export function InputIcon({
     inputBackground,
     disabled,
     inputVariant,
-}: ILibInputIconContainer) {
+}: ILibInputIconContainer) => {
     if (!icon) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputPrefix.tsx

@@ -11,12 +11,12 @@ import type { ILibInputPrefix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export function InputPrefix({
+export const InputPrefix = ({
     "data-testid": testid,
     className,
     prefix,
     inputBackground,
-}: ILibInputPrefix) {
+}: ILibInputPrefix) => {
     if (!prefix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputRightContainer.tsx

@@ -13,14 +13,14 @@ import type { ILibInputRightContainer } from "../types"
  * @prop withBorder: boolean | undefined
  * @prop children?: ReactChildren
  */
-export function InputRightContainer({
+export const InputRightContainer = ({
     "data-testid": testid,
     className,
     children,
     disabled,
     withPadding,
     withBorder,
-}: ILibInputRightContainer) {
+}: ILibInputRightContainer) => {
     return (
         <StyledInputRightContainer
             data-testid={testid && `${testid}.RightContainer`}

package/dist/lib/components/InputComponents/components/InputSuffix.tsx

@@ -11,12 +11,12 @@ import type { ILibInputSuffix } from "../types"
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop prefix: string | JSX.Element | undefined
  */
-export function InputSuffix({
+export const InputSuffix = ({
     "data-testid": testid,
     className,
     suffix,
     inputBackground,
-}: ILibInputSuffix) {
+}: ILibInputSuffix) => {
     if (!suffix) return null
 
     return (

package/dist/lib/components/InputComponents/components/InputValidationHelper.tsx

@@ -6,7 +6,7 @@ import { CloseCircle, CheckCircle } from "../../../icons"
 import {
     HelperBottomContainer,
     HelperBottomIconContainer,
-    HelperBottom,
+    StyledHelperBottom,
 } from "../../InputContainer/styles"
 import type { ILibInputValidationHelper } from "../types"
 
@@ -17,11 +17,11 @@ import type { ILibInputValidationHelper } from "../types"
  * @prop className: string | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export function InputValidationHelper({
+export const InputValidationHelper = ({
     "data-testid": testid,
     className,
     validation,
-}: ILibInputValidationHelper) {
+}: ILibInputValidationHelper) => {
     const {
         status,
         message,
@@ -81,7 +81,7 @@ export function InputValidationHelper({
                 />
             </HelperBottomIconContainer>
 
-            <HelperBottom
+            <StyledHelperBottom
                 data-testid={testid && `${testid}.ValidationHelper.Text`}
                 className={className && "ValidationTextBottom"}
                 $hasIcon
@@ -92,7 +92,7 @@ export function InputValidationHelper({
                 }
             >
                 {message}
-            </HelperBottom>
+            </StyledHelperBottom>
         </HelperBottomContainer>
     )
 }

package/dist/lib/components/InputComponents/components/InputValidationIcon.tsx

@@ -15,12 +15,12 @@ const DEFAULT_ICON_SIZE = 16
  * @prop inputBackground: "light" | "dark" | undefined
  * @prop validation: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
  */
-export function InputValidationIcon({
+export const InputValidationIcon = ({
     "data-testid": testid,
     className,
     validation,
     inputBackground,
-}: ILibInputValidationIcon) {
+}: ILibInputValidationIcon) => {
     const commonIconProps = {
         className: className && "ValidationIcon",
         size: DEFAULT_ICON_SIZE,

package/dist/lib/components/InputComponents/components/InputWrapper.tsx

@@ -17,7 +17,7 @@ import type { ILibInputWrapper } from "../types"
  * @prop validationStatus: boolean | undefined
  * @prop children?: ReactChildren
  */
-export function InputWrapper({
+export const InputWrapper = ({
     "data-testid": testid,
     className,
     hasContainer,
@@ -27,7 +27,7 @@ export function InputWrapper({
     inputBackground,
     inputVariant,
     validationStatus,
-}: ILibInputWrapper) {
+}: ILibInputWrapper) => {
     return (
         <StyledInputWrapper
             data-testid={hasContainer && testid ? `${testid}.Wrapper` : testid}

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

@@ -3,15 +3,14 @@
 import type { CSSProperties, MouseEventHandler } from "react"
 import type {
     ReactChildren,
-    CssFontStyle,
     LibInputListDirection,
-    LibAllColors,
     LibIcon,
     LibInputBackground,
     LibInputVariant,
     LibValidationStatus,
     RequireAtLeastOne,
     LibInputPrefixAndSuffix,
+    LibHelperBottom,
 } from "../../types"
 
 /*====================== Validation ======================*/
@@ -109,17 +108,7 @@ export interface ILibInputContainer {
     label: string | undefined
     labelComment: string | undefined
     helper: string | undefined
-    helperBottom:
-        | string
-        | {
-              text: string
-              textColor?: LibAllColors
-              fontStyle?: CssFontStyle
-              icon?: LibIcon
-              iconColor?: LibAllColors
-              iconSize?: number
-          }
-        | undefined
+    helperBottom: LibHelperBottom | undefined
     validation: LibValidationHelper | undefined
     children?: ReactChildren
     value: any | undefined

package/dist/lib/components/InputContainer/HelperBottom.tsx

@@ -0,0 +1,96 @@
+/*=============================================== HelperBottom ===============================================*/
+
+import type { FC } from "react"
+import { LibIcon } from "../LibIcon"
+import { getIconSizeFromFont } from "../../lib-utils"
+import {
+    StyledHelperBottom,
+    HelperBottomContainer,
+    HelperBottomIconContainer,
+} from "./styles"
+import type { ILibHelperBottom } from "./subtypes"
+
+export const HelperBottom: FC<ILibHelperBottom> = ({
+    "data-testid": testid,
+    className,
+    helperBottom,
+    iconBaseUrl,
+}) => {
+    if (typeof helperBottom === "string") {
+        return <StyledHelperBottom>{helperBottom}</StyledHelperBottom>
+    }
+
+    if (typeof helperBottom === "object") {
+        const {
+            element,
+            text,
+            textColor,
+            fontStyle,
+            icon,
+            iconColor = "primary",
+            iconSize = getIconSizeFromFont("small") as number,
+            linkColor,
+        } = helperBottom
+
+        if (element)
+            return (
+                <StyledHelperBottom linkColor={linkColor}>
+                    {element}
+                </StyledHelperBottom>
+            )
+
+        if (icon)
+            return (
+                <HelperBottomContainer
+                    data-testid={testid && `${testid}.HelperBottomContainer`}
+                    className={className && "HelperBottomContainer"}
+                >
+                    <HelperBottomIconContainer
+                        data-testid={
+                            testid && `${testid}.HelperBottom.IconContainer`
+                        }
+                        className={className && "BottomIconContainer"}
+                        $iconSize={iconSize}
+                    >
+                        <LibIcon
+                            data-testid={
+                                testid &&
+                                `${testid}.HelperBottom.IconContainer.Icon`
+                            }
+                            className={className && "HelperBottomIcon"}
+                            icon={icon}
+                            color={iconColor}
+                            size={iconSize || getIconSizeFromFont("small")}
+                            baseUrl={iconBaseUrl}
+                        />
+                    </HelperBottomIconContainer>
+
+                    <StyledHelperBottom
+                        data-testid={testid && `${testid}.HelperBottom.Text`}
+                        className={className && "HelperBottomText"}
+                        color={textColor}
+                        linkColor={linkColor}
+                        $fontStyle={fontStyle}
+                        $iconSize={iconSize}
+                        $hasIcon
+                    >
+                        {helperBottom.text}
+                    </StyledHelperBottom>
+                </HelperBottomContainer>
+            )
+
+        return (
+            <StyledHelperBottom
+                data-testid={testid && `${testid}.HelperBottom`}
+                className={className && "HelperBottom"}
+                color={textColor}
+                $fontStyle={fontStyle}
+                $hasIcon={false}
+            >
+                {text}
+            </StyledHelperBottom>
+        )
+    }
+
+    return null
+}