@julseb-lib/react 0.1.3 → 0.1.5

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

@@ -1,20 +0,0 @@
-import type { DispatchState, ReactChildren } from "../../types"
-import type { ILibAccordion } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN ACCORDION COMPONENTS
-
-export interface ILibAccordionButton
-    extends Pick<
-        ILibAccordion,
-        "data-testid" | "className" | "variant" | "icon"
-    > {
-    isOpen: boolean
-    setIsOpen: DispatchState<boolean>
-    title: string
-}
-
-export interface ILibAccordionContent
-    extends Pick<ILibAccordion, "data-testid" | "className" | "variant"> {
-    isOpen: boolean
-    children?: ReactChildren
-}

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

@@ -1,31 +0,0 @@
-import type {
-    LibComponentBase,
-    LibAccordionItem,
-    ReactChildren,
-    LibAccordionVariant,
-    LibAccordionIcon,
-} from "../../types"
-
-interface ILibAccordionBase extends LibComponentBase<HTMLDivElement> {
-    variant?: LibAccordionVariant
-    icon?: LibAccordionIcon
-}
-
-interface AccordionWithItems extends ILibAccordionBase {
-    items: Array<LibAccordionItem>
-    children?: never
-}
-
-interface AccordionWithChildren extends ILibAccordionBase {
-    items?: never
-    children?: ReactChildren
-}
-
-export type ILibAccordion = AccordionWithItems | AccordionWithChildren
-
-export interface ILibAccordionItem extends LibComponentBase<HTMLDivElement> {
-    title: string
-    icon?: LibAccordionIcon
-    variant?: LibAccordionVariant
-    defaultOpen?: boolean
-}

package/dist/lib/components/Alert/Alert.tsx

@@ -1,122 +0,0 @@
-import type { FC } from "react"
-import classNames from "classnames"
-import { stringifyPx, getRandomString } from "@julseb-lib/utils"
-import { Text } from "../../"
-import { appendStyles } from "../../lib-utils"
-import type { LibAllColors } from "../../types"
-import { StyledAlert } from "./styles"
-import type { ILibAlert } from "./types"
-
-const alertStyles: {
-	[key: string]: {
-		backgroundColor: LibAllColors
-		borderColor: LibAllColors
-	}
-} = {
-	primary: {
-		backgroundColor: "primary-50",
-		borderColor: "primary-500",
-	},
-	secondary: {
-		backgroundColor: "secondary-50",
-		borderColor: "secondary-500",
-	},
-	success: {
-		backgroundColor: "success-50",
-		borderColor: "success-500",
-	},
-	danger: {
-		backgroundColor: "danger-50",
-		borderColor: "danger-500",
-	},
-	warning: {
-		backgroundColor: "warning-50",
-		borderColor: "warning-500",
-	},
-	gray: {
-		backgroundColor: "gray-50",
-		borderColor: "gray-500",
-	},
-}
-
-/**
- * Alert component for displaying important messages or notifications.
- *
- * @component
- * @param {Object} props - Alert 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 {string} [props.id] - HTML id attribute.
- * @param {ReactNode} [props.children] - Content of the alert.
- * @param {number} [props.maxWidth] - Maximum width of the alert.
- * @param {LibAllColors} [props.textColor="font"] - Text color.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="s"] - Padding for the alert.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="m"] - Border radius for the alert.
- * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between alert content.
- * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"} [props.alertColor="primary"] - Predefined alert color.
- * @param {LibAllColors} [props.backgroundColor] - Custom background color (overrides alertColor).
- * @param {Object} [props.border] - Border style, width, and color.
- * @returns {JSX.Element} The rendered Alert component.
- *
- * @example
- * <Alert alertColor="success" padding="m" borderRadius="l">
- *   This is a success alert!
- * </Alert>
- */
-export const Alert: FC<ILibAlert> = ({
-	"data-testid": testid,
-	as,
-	ref,
-	className,
-	id,
-	role = "alert",
-	children,
-	maxWidth,
-	textColor = "font",
-	padding = "s",
-	borderRadius = "m",
-	gap = "xs",
-	alertColor = "primary",
-	backgroundColor,
-	border,
-	...rest
-}) => {
-	const styles = alertStyles[alertColor]
-	const randomClass = getRandomString(10, true)
-	const withClass = className?.split(" ")[0] || randomClass
-
-	appendStyles(`
-            ${id ? `#${id}` : `.${withClass}`} {
-                --alert-max-width: ${stringifyPx(maxWidth || "100%")};
-            }
-        `)
-
-	return (
-		<>
-			<StyledAlert
-				data-testid={testid}
-				ref={ref}
-				as={as || typeof children === "string" ? Text : "div"}
-				className={classNames(className, randomClass)}
-				id={id}
-				role={role}
-				$backgroundColor={
-					backgroundColor || styles.backgroundColor || "primary-50"
-				}
-				$border={{
-					color: styles.borderColor || "primary",
-					...border,
-				}}
-				$borderRadius={borderRadius}
-				$gap={gap}
-				$padding={padding}
-				$textColor={textColor}
-				{...rest}
-			>
-				{children}
-			</StyledAlert>
-		</>
-	)
-}

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

@@ -1,37 +0,0 @@
-import styled from "styled-components"
-import { Mixins, setDefaultTheme } from "../../"
-import type {
-    LibAllColors,
-    ILibBorder,
-    ILibPadding,
-    ILibRadius,
-    LibSpacers,
-} from "../../types"
-
-const StyledAlert = styled.div<{
-    $textColor: LibAllColors
-    $padding?: ILibPadding
-    $borderRadius?: ILibRadius
-    $gap?: LibSpacers
-    $backgroundColor: LibAllColors
-    $border?: ILibBorder
-}>`
-    width: 100%;
-    max-width: var(--alert-max-width, 100%);
-    color: ${({ $textColor, theme }) => Mixins.AllColors($textColor, theme)};
-    background-color: ${({ $backgroundColor, theme }) =>
-        Mixins.AllColors($backgroundColor, theme)};
-    ${({ $padding }) => Mixins.Padding($padding)};
-    ${({ $borderRadius }) => Mixins.BorderRadius($borderRadius)};
-    ${({ $border }) => Mixins.Border($border)};
-    ${({ $gap }) =>
-        Mixins.Flexbox({
-            $flexDirection: "column",
-            $alignItems: "stretch",
-            $gap,
-        })}
-`
-
-setDefaultTheme([StyledAlert])
-
-export { StyledAlert }

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

@@ -1,31 +0,0 @@
-import type {
-    LibAllColors,
-    ILibBorder,
-    LibColorsShort,
-    LibComponentBase,
-    ILibPadding,
-    ILibRadius,
-    LibSpacers,
-} from "../../types"
-
-interface ILibAlertBase extends LibComponentBase<HTMLDivElement> {
-    maxWidth?: number
-    textColor?: LibAllColors
-    padding?: ILibPadding
-    borderRadius?: ILibRadius
-    gap?: LibSpacers
-}
-
-interface AlertColorsShort extends ILibAlertBase {
-    alertColor?: Exclude<LibColorsShort, "black" | "white">
-    backgroundColor?: never
-    border?: Omit<ILibBorder, "color">
-}
-
-interface AlertAllColors extends ILibAlertBase {
-    alertColor?: never
-    backgroundColor?: LibAllColors
-    border?: ILibBorder
-}
-
-export type ILibAlert = AlertColorsShort | AlertAllColors

package/dist/lib/components/Aside/Aside.tsx

@@ -1,41 +0,0 @@
-import type { FC } from "react"
-import { StyledAside } from "./styles"
-import type { ILibAside } from "./types"
-
-/**
- * Aside component for displaying complementary content.
- *
- * @component
- * @param {Object} props - Aside 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 {"default" | "small" | number} [props.size] - Size of the aside.
- * @param {ReactNode} [props.children] - Content of the aside.
- * @returns {JSX.Element} The rendered Aside component.
- *
- * @example
- * <Aside size="small">
- *   Sidebar content here
- * </Aside>
- */
-export const Aside: FC<ILibAside> = ({
-	"data-testid": testid,
-	as,
-	ref,
-	children,
-	size = "default",
-	...rest
-}) => {
-	return (
-		<StyledAside
-			data-testid={testid}
-			ref={ref}
-			as={as}
-			$size={size}
-			{...rest}
-		>
-			{children}
-		</StyledAside>
-	)
-}

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

@@ -1,47 +0,0 @@
-import styled from "styled-components"
-import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, LAYOUTS, Mixins, SPACERS, MEDIA } from "../../"
-import type { LibAsideSize } from "../../types"
-
-const getAsideSize = (size: LibAsideSize) => {
-	if (typeof size === "number") return stringifyPx(size)
-
-	const sizesMap = new Map<LibAsideSize, LAYOUTS>([
-		["default", LAYOUTS.ASIDE_DEFAULT],
-		["small", LAYOUTS.ASIDE_SMALL],
-	])
-
-	return sizesMap.get(size)
-}
-
-const StyledAside = styled.aside<{
-	$size?: LibAsideSize
-}>`
-	position: relative;
-	width: 100%;
-	min-height: 100%;
-	max-width: ${({ $size }) => getAsideSize($size || "default")};
-	padding: ${SPACERS.XXL} 0;
-	${Mixins.Flexbox({
-		$flexDirection: "column",
-		$alignItems: "flex-start",
-		$gap: "l",
-	})}
-	${Mixins.StretchTags}
-
-    & > * {
-		flex-shrink: 0;
-	}
-
-	@media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
-		width: 100%;
-		max-width: unset;
-		height: unset;
-		min-height: unset;
-		padding: ${SPACERS.L} 0;
-	}
-`
-
-setDefaultTheme([StyledAside])
-
-export { StyledAside }

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

@@ -1,5 +0,0 @@
-import type { LibComponentBase, LibAsideSize } from "../../types"
-
-export interface ILibAside extends LibComponentBase<HTMLDivElement> {
-    size?: LibAsideSize
-}

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

@@ -1,356 +0,0 @@
-import {
-    useCallback,
-    useMemo,
-    useRef,
-    memo,
-    type ChangeEvent,
-    type FC,
-} from "react"
-import Fuse from "fuse.js"
-import classNames from "classnames"
-import { uuid } from "@julseb-lib/utils"
-import {
-    Key,
-    useKeyPress,
-    useTouchScreen,
-    useMergeRefs,
-    Highlight,
-} from "../../"
-import {
-    InputContainer,
-    InputIcon,
-    InputRightContainer,
-    InputValidationIcon,
-    InputWrapper,
-    ListInput,
-    ListInputItem,
-    InputButton,
-    InputLeftContainer,
-    InputAndListContainer,
-} from "../InputComponents"
-import { Close } from "../../icons"
-import { transformSearchKeys } from "../../lib-utils"
-import { useKeyboardNavigation } from "../ComponentsMixins"
-import { StyledAutocomplete } from "./styles"
-import type { ILibAutocomplete } from "./types"
-
-/**
- * Autocomplete input component with fuzzy search and keyboard navigation.
- *
- * @component
- * @param {Object} props - Autocomplete props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
- * @param {string} props.value - Current value of the input.
- * @param {Dispatch<SetStateAction<string>>} props.setValue - Setter for the input value.
- * @param {Array<string>} props.listResults - List of possible results to display.
- * @param {string} [props.emptyText="No result."] - Text to display when there are no results.
- * @param {"up" | "down"} [props.listDirection] - Direction in which the result list appears.
- * @param {IFuseOptions<string>} [props.fuzzyOptions] - Options for fuzzy search (from fuse.js).
- * @param {Object} [props.icons] - Icons for the input ({ left, clear }).
- * @param {Object} [props.iconSizes] - Sizes for the icons ({ left, clear }).
- * @param {string} [props.id] - HTML id attribute.
- * @param {string} [props.label] - Label for the input.
- * @param {string} [props.labelComment] - Comment for the label.
- * @param {string} [props.helper] - Helper text above the input.
- * @param {string|Object} [props.helperBottom] - Helper text or element below the input.
- * @param {Object} [props.validation] - Validation status and message.
- * @param {string} [props.iconBaseUrl] - Base URL for icons.
- * @param {"light" | "dark"} [props.inputBackground] - Input background style.
- * @param {"rounded" | "pill"} [props.inputVariant="rounded"] - Input variant style.
- * @param {Array<string>} [props.focusKeys] - Keyboard shortcuts to focus the input.
- * @param {boolean} [props.showKeys] - Show keyboard shortcut hints.
- * @param {boolean} [props.disabled] - Disable the input.
- * @param {CSSProperties} [props.containerStyle] - Style for the outer container.
- * @param {CSSProperties} [props.inputAndListContainerStyle] - Style for the input and list container.
- * @returns {JSX.Element} The rendered Autocomplete component.
- *
- * @example
- * <Autocomplete
- *   value={value}
- *   setValue={setValue}
- *   listResults={["Apple", "Banana", "Orange"]}
- *   label="Fruits"
- *   icons={{ left: <FruitIcon /> }}
- * />
- */
-
-const AutocompleteFn: FC<ILibAutocomplete> = ({
-    "data-testid": testid,
-    ref,
-    id,
-    className,
-    label,
-    labelComment,
-    helper,
-    helperBottom,
-    validation,
-    inputBackground,
-    inputVariant = "rounded",
-    value,
-    setValue,
-    listResults,
-    emptyText = "No result.",
-    listDirection,
-    fuzzyOptions = {},
-    icons,
-    iconSizes,
-    iconBaseUrl,
-    focusKeys,
-    showKeys,
-    disabled,
-    containerStyle,
-    inputAndListContainerStyle,
-    ...rest
-}) => {
-    const hasContainer: boolean = !!(
-        label ||
-        labelComment ||
-        helper ||
-        helperBottom ||
-        validation
-    )
-
-    const defaultIconSizes = { left: 16, clear: 16 }
-
-    const isTouchScreen = useTouchScreen()
-
-    const inputRef = useRef<HTMLDivElement>(null)
-    const keys = focusKeys || [""]
-    useKeyPress(
-        keys,
-        useCallback(() => inputRef?.current?.focus(), [])
-    )
-
-    const fuzzyResults = useMemo(() => {
-        const fuse = new Fuse(listResults, fuzzyOptions)
-
-        return fuse
-            .search(value)
-            ?.slice(0, 20)
-            ?.map(res => res.item)
-    }, [fuzzyOptions, listResults, value])
-
-    const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
-        typeof fuzzyResults
-    >({
-        data: fuzzyResults,
-        value,
-        setValue,
-    })
-
-    const handleChange = useCallback(
-        (e: ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value)
-        },
-        [setValue]
-    )
-    const handleClear = useCallback(() => {
-        setValue("")
-    }, [setValue])
-    const handleSelectValue = useCallback(
-        (value: string) => {
-            setValue(value)
-        },
-        [setValue]
-    )
-
-    const handleOpen = useCallback(() => {
-        setIsOpen(true)
-    }, [setIsOpen])
-    const handleClose = useCallback(
-        () =>
-            setTimeout(() => {
-                setIsOpen(false)
-            }, 100),
-        [setIsOpen]
-    )
-
-    return (
-        <InputContainer
-            data-testid={testid}
-            className={className}
-            id={id}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            validation={validation}
-            value={value}
-            counter={false}
-            maxLength={undefined}
-            style={containerStyle}
-            hasListOpen={isOpen}
-            iconBaseUrl={iconBaseUrl}
-        >
-            <InputAndListContainer
-                data-testid={testid}
-                className={className}
-                hasListOpen={isOpen}
-                inputAndListContainerStyle={inputAndListContainerStyle}
-                isParent={!hasContainer}
-            >
-                <InputWrapper
-                    data-testid={testid}
-                    className={className}
-                    hasContainer={hasContainer}
-                    hasListOpen={isOpen}
-                    isTextArea={false}
-                    inputVariant={inputVariant}
-                    inputBackground={inputBackground}
-                    validationStatus={validation?.status}
-                >
-                    {icons?.left && (
-                        <InputLeftContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                        >
-                            <InputIcon
-                                data-testid={testid}
-                                className={className}
-                                icon={icons.left}
-                                iconSize={
-                                    iconSizes?.left || defaultIconSizes.left
-                                }
-                                validationStatus={validation?.status}
-                                disabled={disabled}
-                                inputBackground={inputBackground}
-                                inputVariant={inputVariant}
-                                iconBaseUrl={iconBaseUrl}
-                            />
-                        </InputLeftContainer>
-                    )}
-
-                    <StyledAutocomplete
-                        data-testid={testid && `${testid}.Input`}
-                        className={classNames(
-                            { Input: className },
-                            { WithListOpen: isOpen }
-                        )}
-                        ref={useMergeRefs([ref, inputRef])}
-                        id={id}
-                        value={value}
-                        disabled={disabled}
-                        onChange={handleChange}
-                        type="search"
-                        onFocus={handleOpen}
-                        onBlur={handleClose}
-                        $disabled={disabled}
-                        $validationStatus={validation?.status}
-                        $inputBackground={inputBackground}
-                        $inputVariant={inputVariant}
-                        {...rest}
-                    />
-
-                    {(value.length || validation || showKeys) && (
-                        <InputRightContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                            withPadding
-                            withBorder={false}
-                        >
-                            {value.length ? (
-                                <InputButton
-                                    data-testid={testid}
-                                    className={className}
-                                    onClick={handleClear}
-                                    icon={
-                                        icons?.clear || (
-                                            <Close
-                                                data-testid={
-                                                    testid &&
-                                                    `${testid}.Button.Icon`
-                                                }
-                                                className={
-                                                    className && "ClearIcon"
-                                                }
-                                                size={
-                                                    iconSizes?.clear ||
-                                                    defaultIconSizes.clear
-                                                }
-                                            />
-                                        )
-                                    }
-                                    iconSize={
-                                        iconSizes?.clear ||
-                                        defaultIconSizes.clear
-                                    }
-                                    inputBackground={inputBackground}
-                                    disabled={disabled}
-                                    aria-label="Clear"
-                                    validationStatus={validation?.status}
-                                />
-                            ) : null}
-
-                            {showKeys &&
-                                focusKeys &&
-                                !isTouchScreen &&
-                                !disabled && (
-                                    <Key
-                                        data-testid={testid && `${testid}.Keys`}
-                                        className={className && "Keys"}
-                                        keys={transformSearchKeys(keys)}
-                                    />
-                                )}
-
-                            {validation && (
-                                <InputValidationIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    validation={validation}
-                                    inputBackground={inputBackground}
-                                />
-                            )}
-                        </InputRightContainer>
-                    )}
-                </InputWrapper>
-
-                <ListInput
-                    data-testid={testid}
-                    className={className}
-                    direction={listDirection}
-                    inputBackground={inputBackground}
-                    inputVariant={inputVariant}
-                    validationStatus={validation?.status}
-                    isOpen={!!(value && isOpen)}
-                    ref={listRef}
-                >
-                    {fuzzyResults?.length ? (
-                        <>
-                            {fuzzyResults.map((result, i) => (
-                                <ListInputItem
-                                    data-testid={testid}
-                                    className={className}
-                                    validationStatus={validation?.status}
-                                    inputBackground={inputBackground}
-                                    onClick={() => handleSelectValue(result)}
-                                    isActive={i === cursor}
-                                    isHovered={value === result}
-                                    key={uuid()}
-                                >
-                                    <Highlight highlightedText={value}>
-                                        {result}
-                                    </Highlight>
-                                </ListInputItem>
-                            ))}
-                        </>
-                    ) : (
-                        <ListInputItem
-                            data-testid={testid}
-                            className={className}
-                            validationStatus={validation?.status}
-                            inputBackground={inputBackground}
-                            readOnly
-                        >
-                            {emptyText}
-                        </ListInputItem>
-                    )}
-                </ListInput>
-            </InputAndListContainer>
-        </InputContainer>
-    )
-}
-
-export const Autocomplete = memo(AutocompleteFn)