@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Flexbox/Flexbox.tsx

@@ -1,69 +1,73 @@
-/*=============================================== Flexbox component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledFlexbox } from "./styles"
 import type { ILibFlexbox } from "./types"
 
 /**
- * @description Returns a Flexbox component
- * @link https://documentation-components-react.vercel.app/layouts/flexbox
+ * Flexbox component for creating flexible layouts with configurable direction, alignment, gap, and padding.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @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" }
+ * @param {Object} props - Flexbox props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {boolean} [props.inline] - Display as inline-flex.
+ * @param {CssFlexDirection} [props.flexDirection] - Flex direction.
+ * @param {CssFlexWrap} [props.flexWrap] - Flex wrap.
+ * @param {CssJustifyContent} [props.justifyContent] - Justify content.
+ * @param {CssAlignItems} [props.alignItems] - Align items.
+ * @param {CssJustifyItems} [props.justifyItems] - Justify items.
+ * @param {CssAlignContent} [props.alignContent] - Align content.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between children.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.columnGap] - Column gap.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.rowGap] - Row gap.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the flexbox container.
+ * @param {ReactNode} [props.children] - Flexbox content.
+ * @returns {JSX.Element} The rendered Flexbox component.
+ *
+ * @example
+ * <Flexbox gap="l" flexDirection="row" alignItems="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flexbox>
  */
-export const Flexbox = forwardRef<HTMLDivElement, ILibFlexbox>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            inline,
-            flexDirection,
-            flexWrap,
-            justifyContent,
-            alignItems,
-            justifyItems,
-            alignContent,
-            gap,
-            columnGap,
-            rowGap,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFlexbox
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $inline={inline}
-                $flexDirection={flexDirection}
-                $flexWrap={flexWrap}
-                $justifyContent={justifyContent}
-                $alignItems={alignItems}
-                $justifyItems={justifyItems}
-                $alignContent={alignContent}
-                $gap={gap}
-                $columnGap={columnGap}
-                $rowGap={rowGap}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledFlexbox>
-        )
-    }
-)
+export const Flexbox: FC<ILibFlexbox> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    inline,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    alignItems,
+    justifyItems,
+    alignContent,
+    gap,
+    columnGap,
+    rowGap,
+    padding,
+    ...rest
+}) => {
+    return (
+        <StyledFlexbox
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $inline={inline}
+            $flexDirection={flexDirection}
+            $flexWrap={flexWrap}
+            $justifyContent={justifyContent}
+            $alignItems={alignItems}
+            $justifyItems={justifyItems}
+            $alignContent={alignContent}
+            $gap={gap}
+            $columnGap={columnGap}
+            $rowGap={rowGap}
+            $padding={padding}
+            {...rest}
+        >
+            {children}
+        </StyledFlexbox>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Flexbox styles ===============================================*/
-
 import styled from "styled-components"
 import { Mixins, setDefaultTheme } from "../../"
 import type {

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

@@ -1,5 +1,3 @@
-/*=============================================== Flexbox types ===============================================*/
-
 import type {
     LibComponentBase,
     CssAlignContent,

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

@@ -1,6 +1,4 @@
-/*=============================================== Footer component ===============================================*/
-
-import { forwardRef, Fragment } from "react"
+import { Fragment, type FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { FooterLogo } from "./FooterLogo"
 import { FooterLink } from "./FooterLink"
@@ -12,95 +10,94 @@ import {
 import type { ILibFooter } from "./types"
 
 /**
- * @description Returns a Footer component
- * @link https://documentation-components-react.vercel.app/components/footer
+ * Footer component for displaying a footer section with links, logo, and optional separators.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop links: Array<LibFooterLink> => required if direction is set to horizontal, only if children is not defined
- * @prop logo: string | { img: string => only if text is not defined; text: string => only if img is not defined; alt?: string => only if img is defined; width?: number => only if img is defined; height?: number => only if img is defined } => required if direction is set to horizontal
- * @prop children?: ReactChildren
- * @prop withSeparator?: boolean
- * @prop linksSeparator?: "dot" | "dash"
- * @prop direction?: "horizontal" | "vertical"
+ * @param {Object} props - Footer props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {Array<LibFooterLink>} [props.links] - Array of footer links (required if direction is horizontal and children is not provided).
+ * @param {string|Object} [props.logo] - Logo for the footer. String for text, or object with { img, text, alt, width, height }.
+ * @param {ReactNode} [props.children] - Custom footer content (used if links is not provided).
+ * @param {boolean} [props.withSeparator] - Show separator between links.
+ * @param {"dot" | "dash"} [props.linksSeparator="dot"] - Separator style between links.
+ * @param {"horizontal" | "vertical"} [props.direction="horizontal"] - Layout direction for the footer.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered Footer component.
  *
- * @type LibFooterLink
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLAnchorElement & HTMLButtonElement>
- * @prop text: string
- * @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
+ * @example
+ * <Footer
+ *   logo={{ img: "/logo.svg", alt: "Logo" }}
+ *   links={[
+ *     { text: "Home", to: "/" },
+ *     { text: "About", to: "/about" }
+ *   ]}
+ *   withSeparator
+ *   linksSeparator="dash"
+ * />
  */
-export const Footer = forwardRef<HTMLDivElement, ILibFooter>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            withSeparator,
-            links,
-            logo,
-            direction = "horizontal",
-            linksSeparator = "dot",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFooter
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                as={as}
-                $withSeparator={withSeparator}
-                $direction={direction}
-                {...rest}
-            >
-                {logo && (
-                    <FooterLogo
-                        data-testid={testid && `${testid}.Logo`}
-                        className={className && "FooterLogo"}
-                        logo={logo}
-                    />
-                )}
+export const Footer: FC<ILibFooter> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    withSeparator,
+    links,
+    logo,
+    direction = "horizontal",
+    linksSeparator = "dot",
+    ...rest
+}) => {
+    return (
+        <StyledFooter
+            data-testid={testid}
+            ref={ref}
+            className={className}
+            as={as}
+            $withSeparator={withSeparator}
+            $direction={direction}
+            {...rest}
+        >
+            {logo && (
+                <FooterLogo
+                    data-testid={testid && `${testid}.Logo`}
+                    className={className && "FooterLogo"}
+                    logo={logo}
+                />
+            )}
 
-                <FooterLinksContainer
-                    data-testid={testid && `${testid}.FooterLinksContainer`}
-                    className={className && "FooterLinksContainer"}
-                >
-                    {links
-                        ? links.map((link, i) => (
-                              <Fragment key={uuid()}>
-                                  <FooterLink
-                                      data-testid={
-                                          testid &&
-                                          `${testid}.FooterLinksContainer.FooterLink`
-                                      }
-                                      className={className && "FooterLink"}
-                                      item={link}
-                                  />
+            <FooterLinksContainer
+                data-testid={testid && `${testid}.FooterLinksContainer`}
+                className={className && "FooterLinksContainer"}
+            >
+                {links
+                    ? links.map((link, i) => (
+                          <Fragment key={uuid()}>
+                              <FooterLink
+                                  data-testid={
+                                      testid &&
+                                      `${testid}.FooterLinksContainer.FooterLink`
+                                  }
+                                  className={className && "FooterLink"}
+                                  item={link}
+                              />
 
-                                  {i !== links.length - 1 && (
-                                      <FooterLinkSeparatorContainer>
-                                          {linksSeparator === "dash"
-                                              ? "-"
-                                              : linksSeparator === "dot"
-                                              ? "•"
-                                              : ""}
-                                      </FooterLinkSeparatorContainer>
-                                  )}
-                              </Fragment>
-                          ))
-                        : children}
-                </FooterLinksContainer>
-            </StyledFooter>
-        )
-    }
-)
+                              {i !== links.length - 1 && (
+                                  <FooterLinkSeparatorContainer>
+                                      {linksSeparator === "dash"
+                                          ? "-"
+                                          : linksSeparator === "dot"
+                                          ? "•"
+                                          : ""}
+                                  </FooterLinkSeparatorContainer>
+                              )}
+                          </Fragment>
+                      ))
+                    : children}
+            </FooterLinksContainer>
+        </StyledFooter>
+    )
+}

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

@@ -1,13 +1,13 @@
-/*=============================================== FooterLinks ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import type { ILibFooterLink } from "./subtypes"
 
-export const FooterLink = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibFooterLink
->(({ "data-testid": testid, className, item }, ref) => {
+export const FooterLink: FC<ILibFooterLink> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    item,
+}) => {
     const commonProps = {
         "data-testid": testid,
         className,
@@ -28,4 +28,4 @@ export const FooterLink = forwardRef<
         return <Link to={item.to} {...blankProps} {...(commonProps as any)} />
 
     return <button onClick={item.onClick} type="button" {...commonProps} />
-})
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Footer styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     setDefaultTheme,

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

@@ -1,5 +1,4 @@
-/*=============================================== Footer sub components types ===============================================*/
-
+import type { Ref } from "react"
 import type { LibFooterLink } from "../../types"
 import type { ILibFooter } from "./types"
 
@@ -8,6 +7,7 @@ import type { ILibFooter } from "./types"
 export interface ILibFooterLink
     extends Pick<ILibFooter, "data-testid" | "className"> {
     item: LibFooterLink
+    ref?: Ref<HTMLAnchorElement & HTMLButtonElement>
 }
 
 export interface ILibFooterLogo

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

@@ -1,5 +1,3 @@
-/*=============================================== Footer types ===============================================*/
-
 import type {
     LibComponentBase,
     LibFooterDirection,
@@ -9,8 +7,6 @@ import type {
     LibFooterLinksSeparator,
 } from "../../types"
 
-/*====================== Footer Content ======================*/
-
 interface FooterWithLogoImg {
     img: string
     alt?: string
@@ -29,8 +25,6 @@ interface FooterWithLogoText {
 
 type LibFooterLogo = FooterWithLogoImg | FooterWithLogoText
 
-/*====================== Footer component ======================*/
-
 interface ILibFooterBase extends LibComponentBase<HTMLDivElement> {
     withSeparator?: boolean
     linksSeparator?: LibFooterLinksSeparator