@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/components/Form/Form.tsx

@@ -1,148 +1,157 @@
-/*=============================================== Form component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Flexbox, Button } from "../../"
 import type { ILibButton } from "../Button/types"
 import { StyledForm } from "./styles"
 import type { ILibForm } from "./types"
 
 /**
- * @description Returns a Form component
- * @link https://documentation-components-react.vercel.app/components/form
+ * Form component for rendering a styled form with optional primary and secondary buttons.
+ *
+ * @component
  * @extends HTMLFormElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLFormElement>
- * @prop buttonPrimary?: string | { text: string; iconLeft?: string | JSX.Element; iconRight?: string | JSX.Element; iconLeftSize?: number; iconRightSize?: number }
- * @prop buttonSecondary?: { onClick?: void => only if to or href are not defined; disabled?: boolean => only if onClick is defined; to?: string => only if onClick and href are not defined; href?: string => only if onClick and to are not defined; text: string; iconLeft?: string | JSX.Element; iconRight?: string | JSX.Element; iconLeftSize?: number; iconRightSize?: number }
- * @prop isLoading?: boolean
- * @prop disabled?: boolean
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop maxWidth?: string | number
+ * @param {Object} props - Form props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ForwardedRef<HTMLFormElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string|Object} [props.buttonPrimary] - Primary button: string for label or object with { text, iconLeft, iconRight, iconLeftSize, iconRightSize }.
+ * @param {Object} [props.buttonSecondary] - Secondary button: object with { onClick, disabled, to, href, text, iconLeft, iconRight, iconLeftSize, iconRightSize }.
+ * @param {boolean} [props.isLoading] - Show loading indicator on the primary button.
+ * @param {boolean} [props.disabled] - Disable the primary button.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="s"] - Gap between form elements.
+ * @param {string|number} [props.maxWidth="100%"] - Maximum width of the form.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Form content.
+ * @returns {JSX.Element} The rendered Form component.
+ *
+ * @example
+ * <Form
+ *   buttonPrimary="Submit"
+ *   buttonSecondary={{ text: "Cancel", onClick: handleCancel }}
+ *   gap="m"
+ *   maxWidth={400}
+ * >
+ *   <Input label="Email" />
+ *   <Input label="Password" />
+ * </Form>
  */
-export const Form = forwardRef<HTMLFormElement, ILibForm>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            children,
-            buttonPrimary,
-            buttonSecondary,
-            isLoading,
-            disabled,
-            gap = "s",
-            maxWidth = "100%",
-            ...rest
+export const Form: FC<ILibForm> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    children,
+    buttonPrimary,
+    buttonSecondary,
+    isLoading,
+    disabled,
+    gap = "s",
+    maxWidth = "100%",
+    ...rest
+}) => {
+    const buttonSecondaryProps: Pick<
+        ILibButton,
+        | "variant"
+        | "icons"
+        | "iconSizes"
+        | "children"
+        | "data-testid"
+        | "className"
+    > = {
+        variant: "transparent",
+        icons: {
+            left:
+                typeof buttonSecondary === "object"
+                    ? buttonSecondary.iconLeft
+                    : undefined,
+            right:
+                typeof buttonSecondary === "object"
+                    ? buttonSecondary.iconRight
+                    : undefined,
+        },
+        iconSizes: {
+            left:
+                typeof buttonSecondary === "object"
+                    ? buttonSecondary.iconLeftSize
+                    : undefined,
+            right:
+                typeof buttonSecondary === "object"
+                    ? buttonSecondary.iconRightSize
+                    : undefined,
         },
-        ref
-    ) => {
-        const buttonSecondaryProps: Pick<
-            ILibButton,
-            | "variant"
-            | "icons"
-            | "iconSizes"
-            | "children"
-            | "data-testid"
-            | "className"
-        > = {
-            variant: "transparent",
-            icons: {
-                left:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconLeft
-                        : undefined,
-                right:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconRight
-                        : undefined,
-            },
-            iconSizes: {
-                left:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconLeftSize
-                        : undefined,
-                right:
-                    typeof buttonSecondary === "object"
-                        ? buttonSecondary.iconRightSize
-                        : undefined,
-            },
-            children: buttonSecondary?.text,
-            "data-testid":
-                testid && `${testid}.ButtonsContainer.ButtonSecondary`,
-            className: className && "ButtonSecondary",
-        }
+        children: buttonSecondary?.text,
+        "data-testid": testid && `${testid}.ButtonsContainer.ButtonSecondary`,
+        className: className && "ButtonSecondary",
+    }
 
-        return (
-            <StyledForm
-                data-testid={testid}
-                ref={ref}
-                className={className}
-                $gap={gap}
-                $maxWidth={maxWidth}
-                {...rest}
-            >
-                {children}
+    return (
+        <StyledForm
+            data-testid={testid}
+            ref={ref}
+            className={className}
+            $gap={gap}
+            $maxWidth={maxWidth}
+            {...rest}
+        >
+            {children}
 
-                {(buttonPrimary || buttonSecondary) && (
-                    <Flexbox
-                        gap="xxs"
-                        data-testid={testid && `${testid}.ButtonsContainer`}
-                        className={className && "ButtonsContainer"}
-                    >
-                        {buttonPrimary && (
-                            <Button
-                                data-testid={
-                                    testid &&
-                                    `${testid}.ButtonsContainer.ButtonSubmit`
-                                }
-                                className={className && "ButtonSubmit"}
-                                type="submit"
-                                isLoading={isLoading}
-                                disabled={disabled}
-                                icons={{
-                                    left:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconLeft
-                                            : undefined,
-                                    right:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconRight
-                                            : undefined,
-                                }}
-                                iconSizes={{
-                                    left:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconLeftSize
-                                            : undefined,
-                                    right:
-                                        typeof buttonPrimary === "object"
-                                            ? buttonPrimary.iconRightSize
-                                            : undefined,
-                                }}
-                            >
-                                {typeof buttonPrimary === "object"
-                                    ? buttonPrimary.text
-                                    : buttonPrimary}
-                            </Button>
-                        )}
+            {(buttonPrimary || buttonSecondary) && (
+                <Flexbox
+                    gap="xxs"
+                    data-testid={testid && `${testid}.ButtonsContainer`}
+                    className={className && "ButtonsContainer"}
+                >
+                    {buttonPrimary && (
+                        <Button
+                            data-testid={
+                                testid &&
+                                `${testid}.ButtonsContainer.ButtonSubmit`
+                            }
+                            className={className && "ButtonSubmit"}
+                            type="submit"
+                            isLoading={isLoading}
+                            disabled={disabled}
+                            icons={{
+                                left:
+                                    typeof buttonPrimary === "object"
+                                        ? buttonPrimary.iconLeft
+                                        : undefined,
+                                right:
+                                    typeof buttonPrimary === "object"
+                                        ? buttonPrimary.iconRight
+                                        : undefined,
+                            }}
+                            iconSizes={{
+                                left:
+                                    typeof buttonPrimary === "object"
+                                        ? buttonPrimary.iconLeftSize
+                                        : undefined,
+                                right:
+                                    typeof buttonPrimary === "object"
+                                        ? buttonPrimary.iconRightSize
+                                        : undefined,
+                            }}
+                        >
+                            {typeof buttonPrimary === "object"
+                                ? buttonPrimary.text
+                                : buttonPrimary}
+                        </Button>
+                    )}
 
-                        {buttonSecondary &&
-                            (buttonSecondary.onClick ? (
-                                <Button
-                                    type="button"
-                                    onClick={buttonSecondary.onClick}
-                                    {...(buttonSecondaryProps as any)}
-                                    {...buttonSecondary}
-                                />
-                            ) : (
-                                <Button
-                                    to={buttonSecondary.to}
-                                    {...(buttonSecondaryProps as any)}
-                                    {...buttonSecondary}
-                                />
-                            ))}
-                    </Flexbox>
-                )}
-            </StyledForm>
-        )
-    }
-)
+                    {buttonSecondary &&
+                        (buttonSecondary.onClick ? (
+                            <Button
+                                type="button"
+                                onClick={buttonSecondary.onClick}
+                                {...(buttonSecondaryProps as any)}
+                                {...buttonSecondary}
+                            />
+                        ) : (
+                            <Button
+                                to={buttonSecondary.to}
+                                {...(buttonSecondaryProps as any)}
+                                {...buttonSecondary}
+                            />
+                        ))}
+                </Flexbox>
+            )}
+        </StyledForm>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Form styles ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { Mixins, setDefaultTheme } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== Form types ===============================================*/
-
 import type {
     LibButtonLinkRequired,
     LibComponentBase,

package/dist/lib/components/FullBleed/FullBleed.tsx

@@ -1,45 +1,48 @@
-/*=============================================== FullBleed component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledFullBleed } from "./styles"
 import type { ILibFullBleed } from "./types"
 
 /**
- * @description Returns a FullBleed component
- * @link https://documentation-components-react.vercel.app/components/full-bleed
+ * FullBleed component for rendering a full-width section with optional height, aspect ratio, and padding.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop height?: number | string
- * @prop aspectRatio?: string
- * @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 - FullBleed props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {number|string} [props.height] - Height of the full-bleed section.
+ * @param {string} [props.aspectRatio] - Aspect ratio for the section (e.g., "16/9").
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the section.
+ * @param {ReactNode} [props.children] - Content to display inside the section.
+ * @returns {JSX.Element} The rendered FullBleed component.
+ *
+ * @example
+ * <FullBleed height="300px" aspectRatio="16/9" padding="l">
+ *   <img src="/banner.jpg" alt="Banner" />
+ * </FullBleed>
  */
-export const FullBleed = forwardRef<HTMLDivElement, ILibFullBleed>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            height,
-            aspectRatio,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledFullBleed
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $height={height}
-                $aspectRatio={aspectRatio}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledFullBleed>
-        )
-    }
-)
+export const FullBleed: FC<ILibFullBleed> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    height,
+    aspectRatio,
+    padding,
+    ...rest
+}) => {
+    return (
+        <StyledFullBleed
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $height={height}
+            $aspectRatio={aspectRatio}
+            $padding={padding}
+            {...rest}
+        >
+            {children}
+        </StyledFullBleed>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== FullBleed styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { Mixins, setDefaultTheme } from "../../"

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

@@ -1,5 +1,3 @@
-/*=============================================== FullBleed types ===============================================*/
-
 import type { LibComponentBase, ILibPadding } from "../../types"
 
 export interface ILibFullBleed extends LibComponentBase<HTMLDivElement> {

package/dist/lib/components/Grid/Grid.tsx

@@ -1,66 +1,71 @@
-/*=============================================== Grid component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledGrid } from "./styles"
 import type { ILibGrid } from "./types"
 
 /**
- * @description Returns a Grid component
- * @link https://documentation-components-react.vercel.app/layouts/grid
+ * Grid component for creating flexible grid layouts with configurable columns, gaps, alignment, and padding.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop inline?: boolean
- * @prop col?: number | string
- * @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 justifyItems?: CssJustifyItems
- * @prop alignItems?: CssAlignItems
- * @prop justifyContent?: CssJustifyContent
- * @prop alignContent?: CssAlignContent
- * @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 - Grid 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-grid.
+ * @param {number|string} [props.col] - Number or string for grid columns.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between grid items.
+ * @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 {CssJustifyItems} [props.justifyItems] - Justify items.
+ * @param {CssAlignItems} [props.alignItems] - Align items.
+ * @param {CssJustifyContent} [props.justifyContent] - Justify content.
+ * @param {CssAlignContent} [props.alignContent] - Align content.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding] - Padding for the grid container.
+ * @param {ReactNode} [props.children] - Grid content.
+ * @returns {JSX.Element} The rendered Grid component.
+ *
+ * @example
+ * <Grid col={3} gap="l" padding="m">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Grid>
  */
-export const Grid = forwardRef<HTMLDivElement, ILibGrid>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            inline,
-            col,
-            gap,
-            columnGap,
-            rowGap,
-            justifyItems,
-            alignItems,
-            justifyContent,
-            alignContent,
-            padding,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledGrid
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $inline={inline}
-                $col={col}
-                $gap={gap}
-                $columnGap={columnGap}
-                $rowGap={rowGap}
-                $justifyItems={justifyItems}
-                $alignItems={alignItems}
-                $justifyContent={justifyContent}
-                $alignContent={alignContent}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
-            </StyledGrid>
-        )
-    }
-)
+export const Grid: FC<ILibGrid> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    inline,
+    col,
+    gap,
+    columnGap,
+    rowGap,
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    padding,
+    ...rest
+}) => {
+    return (
+        <StyledGrid
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $inline={inline}
+            $col={col}
+            $gap={gap}
+            $columnGap={columnGap}
+            $rowGap={rowGap}
+            $justifyItems={justifyItems}
+            $alignItems={alignItems}
+            $justifyContent={justifyContent}
+            $alignContent={alignContent}
+            $padding={padding}
+            {...rest}
+        >
+            {children}
+        </StyledGrid>
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Grid types ===============================================*/
-
 import type {
     CssAlignContent,
     CssAlignItems,