@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Drawer/Drawer.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Drawer component ===============================================*/
-
-import { forwardRef, useEffect } from "react"
+import { useEffect, type FC } from "react"
 import classNames from "classnames"
 import {
     enableScroll,
@@ -11,100 +9,105 @@ import { StyledDrawer, Overlay, DrawerContent } from "./styles"
 import type { ILibDrawer } from "./types"
 
 /**
- * @description Returns a Drawer component
- * @link https://documentation-components-react.vercel.app/components/drawer
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isOpen: boolean
- * @prop setIsOpen: Dispatch<SetStateAction<boolean>>
- * @prop position?: "left" | "right"
- * @prop enableScrollingOpen?: boolean
- * @prop disableEsc?: boolean
- * @prop backgroundColor?: Any color from the library
- * @prop contentColor?: Any color from the library
- * @prop linksColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop width?: string | number
- * @prop zIndex?: number
- * @prop overlayColor?: Any color or overlay from the library
- * @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" }
+ * Drawer component for displaying a sliding panel from the left or right side of the screen.
+ *
+ * @component
+ * @param {Object} props - Drawer 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 {ReactNode} [props.children] - Content of the drawer.
+ * @param {string} [props.className] - Additional class names.
+ * @param {boolean} props.isOpen - Whether the drawer is open.
+ * @param {Dispatch<SetStateAction<boolean>>} props.setIsOpen - Setter for the open state.
+ * @param {boolean} [props.enableScrollingOpen] - Allow scrolling when drawer is open.
+ * @param {boolean} [props.disableEsc] - Disable closing the drawer with Escape key.
+ * @param {string} [props.backgroundColor="primary"] - Drawer background color.
+ * @param {string} [props.contentColor="background"] - Drawer content color.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linksColor="background"] - Color for links inside the drawer.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="s"] - Gap between drawer content elements.
+ * @param {string|number} [props.width="30vw"] - Width of the drawer.
+ * @param {number} [props.zIndex=998] - z-index of the drawer.
+ * @param {string} [props.overlayColor="black-80"] - Overlay color.
+ * @param {"left" | "right"} [props.position="right"] - Drawer position.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="l"] - Padding for the drawer content.
+ * @returns {JSX.Element} The rendered Drawer component.
+ *
+ * @example
+ * <Drawer isOpen={open} setIsOpen={setOpen} position="left">
+ *   <p>Drawer content</p>
+ * </Drawer>
  */
-export const Drawer = forwardRef<HTMLDivElement, ILibDrawer>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            isOpen,
-            setIsOpen,
-            enableScrollingOpen,
-            disableEsc,
-            backgroundColor = "primary",
-            contentColor = "background",
-            linksColor = "background",
-            gap = "s",
-            width = "30vw",
-            zIndex = 998,
-            overlayColor = "black-80",
-            position = "right",
-            padding = "l",
-            ...rest
-        },
-        ref
-    ) => {
-        useEffect(() => {
-            if (isOpen && !enableScrollingOpen) disableScrollFn()
-            else enableScroll()
-        }, [isOpen])
+export const Drawer: FC<ILibDrawer> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    isOpen,
+    setIsOpen,
+    enableScrollingOpen,
+    disableEsc,
+    backgroundColor = "primary",
+    contentColor = "background",
+    linksColor = "background",
+    gap = "s",
+    width = "30vw",
+    zIndex = 998,
+    overlayColor = "black-80",
+    position = "right",
+    padding = "l",
+    ...rest
+}) => {
+    useEffect(() => {
+        if (isOpen && !enableScrollingOpen) disableScrollFn()
+        else enableScroll()
+    }, [isOpen])
 
-        const handleClose = () => {
-            setIsOpen(false)
-            enableScroll()
-        }
+    const handleClose = () => {
+        setIsOpen(false)
+        enableScroll()
+    }
 
-        useKeyPress("Escape", () => {
-            if (!disableEsc && isOpen) handleClose()
-        })
+    useKeyPress("Escape", () => {
+        if (!disableEsc && isOpen) handleClose()
+    })
 
-        return (
-            <StyledDrawer
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, { Open: isOpen })}
-                $zIndex={zIndex}
-                {...rest}
-            >
-                <Overlay
-                    data-testid={testid && `${testid}.Overlay`}
-                    onClick={handleClose}
-                    className={classNames(
-                        { DrawerOverlay: className },
-                        { Open: isOpen }
-                    )}
-                    $overlayColor={overlayColor}
-                />
+    return (
+        <StyledDrawer
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, { Open: isOpen })}
+            $zIndex={zIndex}
+            {...rest}
+        >
+            <Overlay
+                data-testid={testid && `${testid}.Overlay`}
+                onClick={handleClose}
+                className={classNames(
+                    { DrawerOverlay: className },
+                    { Open: isOpen }
+                )}
+                $overlayColor={overlayColor}
+            />
 
-                <DrawerContent
-                    data-testid={testid && `${testid}.Content`}
-                    className={classNames(
-                        { DrawerContent: className },
-                        { Open: isOpen }
-                    )}
-                    $gap={gap}
-                    $backgroundColor={backgroundColor}
-                    $contentColor={contentColor}
-                    $linksColor={linksColor}
-                    $width={width}
-                    $position={position}
-                    $padding={padding}
-                >
-                    {children}
-                </DrawerContent>
-            </StyledDrawer>
-        )
-    }
-)
+            <DrawerContent
+                data-testid={testid && `${testid}.Content`}
+                className={classNames(
+                    { DrawerContent: className },
+                    { Open: isOpen }
+                )}
+                $gap={gap}
+                $backgroundColor={backgroundColor}
+                $contentColor={contentColor}
+                $linksColor={linksColor}
+                $width={width}
+                $position={position}
+                $padding={padding}
+            >
+                {children}
+            </DrawerContent>
+        </StyledDrawer>
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Drawer types ===============================================*/
-
 import type {
     DispatchState,
     LibAllColors,

package/dist/lib/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Dropdown component ===============================================*/
-
-import { forwardRef, useRef, useCallback } from "react"
+import { useRef, useCallback, type FC } from "react"
 import classNames from "classnames"
 import { uuid } from "@julseb-lib/utils"
 import { useMergeRefs, useClickOutside } from "../../"
@@ -9,81 +7,92 @@ import { StyledDropdown } from "./styles"
 import type { ILibDropdown } from "./types"
 
 /**
- * @description Returns a Dropdown component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends HTMLDivElement
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop data-testid?: string
- * @prop isOpen: boolean
- * @prop setIsOpen: Dispatch<SetStateAction<boolean>>
- * @prop items: Array<LibDropdownItem> => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop direction?: "up" | "down"
- * @prop maxHeightOpen?: number
- * @prop positionFromButton?: number
- * @prop shadow?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | null
+ * Dropdown component for displaying a list of selectable items or custom children, with flexible direction and styling.
+ *
+ * @component
+ * @param {Object} props - Dropdown 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 {string} [props.className] - Additional class names.
+ * @param {boolean} props.isOpen - Whether the dropdown is open.
+ * @param {Dispatch<SetStateAction<boolean>>} props.setIsOpen - Setter for the open state.
+ * @param {Array<LibDropdownItem>} [props.items] - Array of dropdown items (used if children is not provided).
+ * @param {ReactNode} [props.children] - Dropdown items as children (used if items is not provided).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for the dropdown.
+ * @param {"up" | "down"} [props.direction="down"] - Direction in which the dropdown appears.
+ * @param {number} [props.maxHeightOpen] - Maximum height of the open dropdown.
+ * @param {number} [props.positionFromButton=34] - Position offset from the button.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | null} [props.shadow="m"] - Shadow style for the dropdown.
+ * @returns {JSX.Element} The rendered Dropdown component.
+ *
+ * @example
+ * <Dropdown
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   items={[
+ *     { id: "1", text: "Option 1" },
+ *     { id: "2", text: "Option 2" }
+ *   ]}
+ *   accentColor="secondary"
+ *   direction="up"
+ * />
  */
-export const Dropdown = forwardRef<HTMLDivElement, ILibDropdown>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            children,
-            isOpen,
-            setIsOpen,
-            accentColor = "primary",
-            direction = "down",
-            items,
-            maxHeightOpen = items ? items.length * 40 : 300,
-            positionFromButton = 34,
-            shadow = "m",
-            ...rest
-        },
-        ref
-    ) => {
-        const el = useRef<HTMLDivElement>(null)
+export const Dropdown: FC<ILibDropdown> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    children,
+    isOpen,
+    setIsOpen,
+    accentColor = "primary",
+    direction = "down",
+    items,
+    maxHeightOpen = items ? items.length * 40 : 300,
+    positionFromButton = 34,
+    shadow = "m",
+    ...rest
+}) => {
+    const el = useRef<HTMLDivElement>(null as any)
 
-        useClickOutside(
-            el,
-            useCallback(() => setIsOpen(false), [setIsOpen])
-        )
+    useClickOutside(
+        el,
+        useCallback(() => setIsOpen(false), [setIsOpen])
+    )
 
-        return (
-            <StyledDropdown
-                data-testid={testid}
-                ref={useMergeRefs([ref, el])}
-                as={as}
-                className={classNames(className, { Open: isOpen })}
-                $direction={direction}
-                $maxHeight={maxHeightOpen}
-                $buttonOpenHeight={positionFromButton}
-                $shadow={shadow}
-                {...rest}
-            >
-                {items
-                    ? items.map(item => (
-                          <DropdownItem
-                              data-testid={
-                                  item["data-testid"] ||
-                                  (testid && `${testid}.DropdownItem`)
-                              }
-                              className={
-                                  item.className ||
-                                  (className && "DropdownItem")
-                              }
-                              id={item.id}
-                              ref={item.ref}
-                              accentColor={accentColor}
-                              {...item}
-                              key={uuid()}
-                          >
-                              {item.text}
-                          </DropdownItem>
-                      ))
-                    : children}
-            </StyledDropdown>
-        )
-    }
-)
+    return (
+        <StyledDropdown
+            data-testid={testid}
+            ref={useMergeRefs([ref, el])}
+            as={as}
+            className={classNames(className, { Open: isOpen })}
+            $direction={direction}
+            $maxHeight={maxHeightOpen}
+            $buttonOpenHeight={positionFromButton}
+            $shadow={shadow}
+            {...rest}
+        >
+            {items
+                ? items.map(item => (
+                      <DropdownItem
+                          data-testid={
+                              item["data-testid"] ||
+                              (testid && `${testid}.DropdownItem`)
+                          }
+                          className={
+                              item.className || (className && "DropdownItem")
+                          }
+                          id={item.id}
+                          ref={item.ref}
+                          accentColor={accentColor}
+                          {...item}
+                          key={uuid()}
+                      >
+                          {item.text}
+                      </DropdownItem>
+                  ))
+                : children}
+        </StyledDropdown>
+    )
+}

package/dist/lib/components/Dropdown/DropdownContainer.tsx

@@ -1,34 +1,43 @@
-/*=============================================== DropdownContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledDropdownContainer } from "./styles"
 import type { ILibDropdownContainer } from "./types"
 
 /**
- * @description Returns a DropdownContainer component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop isOpen: boolean
- * @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" }
+ * DropdownContainer component for wrapping dropdown content with flexible layout and open state styling.
+ *
+ * @component
+ * @param {Object} props - DropdownContainer 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.isOpen - Whether the dropdown is open.
+ * @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 container.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered DropdownContainer component.
+ *
+ * @example
+ * <DropdownContainer isOpen={isOpen} gap="m" padding="l">
+ *   <DropdownItem>Option 1</DropdownItem>
+ *   <DropdownItem>Option 2</DropdownItem>
+ * </DropdownContainer>
  */
-export const DropdownContainer = forwardRef<
-    HTMLDivElement,
-    ILibDropdownContainer
->(({ isOpen, className, ...rest }, ref) => {
+export const DropdownContainer: FC<ILibDropdownContainer> = ({
+    ref,
+    isOpen,
+    className,
+    ...rest
+}) => {
     return (
         <StyledDropdownContainer
             ref={ref}
@@ -36,4 +45,4 @@ export const DropdownContainer = forwardRef<
             {...rest}
         />
     )
-})
+}