@julseb-lib/react 0.1.2 → 0.1.4

package/src/lib/components/Avatar/types.ts

@@ -0,0 +1,37 @@
+import type {
+	ClassNames,
+	LibAllColors,
+	LibComponentBase,
+	LibRadiuses,
+	ReactChildren,
+	CSSProperties,
+} from "../../types"
+
+interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
+	borderRadius?: LibRadiuses
+	borderColor?: LibAllColors
+	backgroundColor?: LibAllColors
+	contentColor?: LibAllColors
+}
+
+interface AvatarWithBadge extends ILibAvatarBase {
+	badge?:
+		| boolean
+		| number
+		| {
+				content?: ReactChildren
+				contentColor?: LibAllColors
+				color?: LibAllColors
+				className?: ClassNames
+		  }
+	containerStyle?: CSSProperties
+	containerClassName?: ClassNames
+}
+
+interface AvatarWithoutBadge extends ILibAvatarBase {
+	badge?: undefined | false
+	containerStyle?: never
+	containerClassName?: never
+}
+
+export type ILibAvatar = AvatarWithBadge | AvatarWithoutBadge

package/src/lib/components/BackToTop/BackToTop.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState, type FC } from "react"
+import { BiUpArrowAlt } from "react-icons/bi"
+import { scrollToTop } from "@julseb-lib/utils"
+import { ButtonIcon } from "../ButtonIcon"
+import { clsx } from "../../utils"
+import type { ILibBackToTop } from "./types"
+
+/**
+ * BackToTop component for providing a smooth scroll-to-top functionality with customizable styling and positioning.
+ *
+ * @component
+ *
+ * @example
+ * <BackToTop
+ *   color="primary"
+ *   tooltip="Back to top"
+ *   showTooltip={{ position: "left" }}
+ * />
+ *
+ * @extends ILibButtonIcon
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the back-to-top button.
+ * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
+ * @prop {React.ReactElement} [props.icon=<BiUpArrowAlt />] - Custom icon for the back-to-top button.
+ * @prop {LibColorsShort} [props.color="primary"] - Color theme for the button styling.
+ * @prop {string} [props.tooltip="Back to top"] - Tooltip text displayed on hover.
+ * @prop {LibTooltipPositionOptions} [props.showTooltip] - Configuration for tooltip positioning and styling.
+ *
+ * @returns {JSX.Element} The rendered BackToTop component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/back-to-top
+ */
+export const BackToTop: FC<ILibBackToTop> = ({
+	className,
+	ref,
+	icon = <BiUpArrowAlt />,
+	color = "primary",
+	tooltip = "Back to top",
+	showTooltip,
+	...rest
+}) => {
+	const [isVisible, setIsVisible] = useState(false)
+
+	useEffect(() => {
+		const scrollFn = () => {
+			if (window.scrollY >= 200) {
+				setIsVisible(true)
+			} else {
+				setIsVisible(false)
+			}
+		}
+
+		window.addEventListener("scroll", scrollFn)
+
+		return () => window.removeEventListener("scroll", scrollFn)
+	}, [])
+
+	const smoothScroll = () => {
+		document.body.classList.add("smooth")
+		document.documentElement.classList.add("smooth")
+
+		setTimeout(() => scrollToTop(), 100)
+
+		setTimeout(() => {
+			document.body.classList.remove("smooth")
+			document.documentElement.classList.remove("smooth")
+		}, 1000)
+	}
+
+	return (
+		<ButtonIcon
+			ref={ref}
+			className={clsx(
+				isVisible ? "opacity-100 visible" : "opacity-0 invisible",
+				"back-to-top",
+				className,
+			)}
+			icon={icon}
+			color={color}
+			tooltip={tooltip as any}
+			showTooltip={
+				showTooltip && {
+					position: "left",
+					className: [
+						"fixed bottom-(--spacer-lg) right-(--spacer-lg) [&_.tooltip]:translate-y-[10px] [&_.tooltip]:translate-x-[-50%] transition-all duration-200 ease-in-out",
+						isVisible ? "opacity-100" : "opacity-0",
+					],
+					...(showTooltip as any),
+				}
+			}
+			onClick={smoothScroll}
+			{...rest}
+		/>
+	)
+}

package/src/lib/components/BackToTop/__preview__/BackToTop.preview.tsx

@@ -0,0 +1,115 @@
+import { BackToTop, generateNumbers, Text } from "../../../"
+import type { ILibBackToTop } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const text =
+	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ullamcorper risus. Sed porttitor dolor eget leo accumsan ultricies. Morbi feugiat libero a mi sollicitudin, et varius eros porttitor. Aliquam ac elementum erat, interdum cursus tortor. Maecenas faucibus mollis nisl. Integer vel justo leo. Donec ac magna vel est blandit tristique. Cras nec mauris dictum elit blandit pellentesque sed vel sem. Nam ullamcorper malesuada orci, ac cursus mi convallis at. Donec aliquet pharetra velit, non suscipit elit consectetur vitae. Praesent suscipit, mi a interdum maximus, tellus metus feugiat urna, sed semper felis enim sed magna. Donec vestibulum commodo sapien quis lobortis. Maecenas et venenatis elit. Sed sed porttitor ante. Curabitur eu orci tristique, tristique justo eu, tempus elit."
+
+export const backToTopPreview: ComponentPreview<ILibBackToTop> = {
+	name: "Back To Top",
+	component: BackToTop,
+	category: "components",
+	import: "BackToTop", // import Component (ex: Skeleton)
+	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
+	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
+	propsImport: "ILibBackToTop", // import ILibComponent (ex: ILibAccordion)
+	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
+	extends: ["HTMLButtonElement"],
+	previews: [
+		{
+			demo: (
+				<>
+					{generateNumbers(0, 10).map(i => (
+						<Text key={i}>{text}</Text>
+					))}
+
+					<BackToTop showTooltip={{}} />
+				</>
+			),
+		},
+	],
+	props: [
+		{
+			name: "icon",
+			type: "ReactElement",
+			possibleValues: null,
+			defaultValue: "BiUpArrowAlt",
+			description: "Icon element to display inside the button.",
+			isRequired: false,
+		},
+		{
+			name: "color",
+			type: "string",
+			possibleValues: [
+				"primary",
+				"secondary",
+				"success",
+				"danger",
+				"warning",
+				"gray",
+				"white",
+			],
+			defaultValue: "primary",
+			description: "Button color theme.",
+			isRequired: false,
+		},
+		{
+			name: "borderRadius",
+			type: "string",
+			possibleValues: [
+				"none",
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl",
+				"3xl",
+				"full",
+			],
+			defaultValue: "full",
+			description: "Border radius of the button.",
+			isRequired: false,
+		},
+		{
+			name: "variant",
+			type: "string",
+			possibleValues: ["plain", "ghost", "outline", "transparent"],
+			defaultValue: "plain",
+			description: "Button variant style.",
+			isRequired: false,
+		},
+		{
+			name: "tooltip",
+			type: "string",
+			possibleValues: [],
+			defaultValue: "Back to top",
+			description: "Tooltip text displayed on hover.",
+			isRequired: false,
+		},
+		{
+			name: "showTooltip",
+			type: "boolean | Object",
+			possibleValues: null,
+			defaultValue: "true",
+			description:
+				"Whether to show tooltip or tooltip configuration object.",
+			isRequired: false,
+		},
+		{
+			name: "containerStyle",
+			type: "CSSProperties",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Inline styles for the container.",
+			isRequired: false,
+		},
+		{
+			name: "containerClasses",
+			type: "string",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Additional CSS classes for the container.",
+			isRequired: false,
+		},
+	],
+}

package/src/lib/components/BackToTop/types.ts

@@ -0,0 +1,9 @@
+import type { ILibButtonIcon } from "../ButtonIcon/types"
+import type { ReactElement } from "../../types"
+
+export type ILibBackToTop = Omit<
+	Partial<ILibButtonIcon>,
+	"icon" | "isLoading" | "loaderVariant" | "loaderClasses"
+> & {
+	icon?: ReactElement
+}

package/src/lib/components/Badge/Badge.tsx

@@ -0,0 +1,61 @@
+import { type FC } from "react"
+import {
+	clsx,
+	genBgAllColors,
+	genTextAllColor,
+	genBorderRadius,
+} from "../../utils"
+import type { ILibBadge } from "./types"
+
+/**
+ * Badge component for displaying a colored label or status.
+ *
+ * @component
+ *
+ * @example
+ * <Badge backgroundColor="primary" contentColor="white" borderRadius="full">New</Badge>
+ *
+ * @extends HTMLSpanElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the badge.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the badge.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the badge element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the badge.
+ * @prop {LibAllColors} [props.color="primary"] - Background color of the badge.
+ * @prop {LibAllColors} [props.contentColor="white"] - Text color of the badge.
+ * @prop {LibRadius} [props.borderRadius="full"] - Border radius of the badge.
+ * @prop {any} [props.rest] - Additional props spread to the badge element.
+ *
+ * @returns {JSX.Element} The rendered Badge component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/badge
+ */
+export const Badge: FC<ILibBadge> = ({
+	className,
+	element = "span",
+	ref,
+	children,
+	color = "primary",
+	contentColor = "white",
+	borderRadius = "full",
+	...rest
+}) => {
+	const Element = element
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				"inline-flex justify-center items-center w-fit min-w-6 h-6",
+				genBgAllColors[color],
+				genTextAllColor[contentColor],
+				genBorderRadius[borderRadius],
+				"badge",
+				className,
+			)}
+			{...rest}
+		>
+			{children}
+		</Element>
+	)
+}

package/src/lib/components/Badge/__preview__/Badge.preview.tsx

@@ -0,0 +1,84 @@
+import { BiStar } from "react-icons/bi"
+import { Badge, designTokens, Flexbox } from "../../../"
+import type { ILibBadge } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const badgePreview: ComponentPreview<ILibBadge> = {
+	name: "Badge",
+	component: Badge,
+	category: "components",
+	import: "Badge",
+	additionalImports: null,
+	optionalImports: null,
+	propsImport: "ILibBadge",
+	additionalTypeImports: null,
+	extends: ["HTMLSpanElement"],
+	previews: [
+		{
+			previewTitle: "Default",
+			demo: (
+				<Flexbox gap="sm">
+					{Object.keys(designTokens.libColorsShort).map(
+						(color, i) => (
+							<Badge color={color as any} key={i} />
+						),
+					)}
+				</Flexbox>
+			),
+		},
+		{
+			previewTitle: "With icon",
+			props: { children: <BiStar size={32} />, className: "size-12" },
+		},
+		{
+			previewTitle: "With short number",
+			props: {
+				children: 2,
+				color: "danger",
+			},
+		},
+		{
+			previewTitle: "With long number",
+			props: {
+				children: 300,
+				className: "w-fit px-2",
+				color: "success",
+			},
+		},
+	],
+	props: [
+		{
+			name: "backgroundColor",
+			type: "string",
+			possibleValues: "Any color from the library",
+			defaultValue: "primary",
+			description: "Background color of the badge.",
+			isRequired: false,
+		},
+		{
+			name: "contentColor",
+			type: "string",
+			possibleValues: "Any color from the library",
+			defaultValue: "white",
+			description: "Text color of the badge.",
+			isRequired: false,
+		},
+		{
+			name: "borderRadius",
+			type: "string",
+			possibleValues: [
+				"none",
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl",
+				"3xl",
+				"full",
+			],
+			defaultValue: "full",
+			description: "Border radius of the badge.",
+			isRequired: false,
+		},
+	],
+}

package/src/lib/components/Badge/types.ts

@@ -0,0 +1,7 @@
+import type { LibAllColors, LibComponentBase, LibRadiuses } from "../../types"
+
+export interface ILibBadge extends LibComponentBase<HTMLSpanElement> {
+	color?: LibAllColors
+	contentColor?: LibAllColors
+	borderRadius?: LibRadiuses
+}

package/src/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,72 @@
+import { Children, Fragment, type FC } from "react"
+import { uuid } from "@julseb-lib/utils"
+import { Text } from "../Text"
+import { clsx } from "../../utils"
+import type { ILibBreadcrumbs } from "./types"
+
+/**
+ * Breadcrumbs component for displaying navigational breadcrumb trails with customizable separators and flexible content.
+ *
+ * @component
+ *
+ * @example
+ * <Breadcrumbs separator=">">
+ *   <Link to="/">Home</Link>
+ *   <Link to="/products">Products</Link>
+ *   <Text>Current Page</Text>
+ * </Breadcrumbs>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the breadcrumbs container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the breadcrumbs container element.
+ * @prop {React.ReactNode} [props.children] - Navigation items to display in the breadcrumb trail.
+ * @prop {string | React.ReactNode} [props.separator="/"] - Separator to display between breadcrumb items.
+ * @prop {any} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/breadcrumbs
+ */
+export const Breadcrumbs: FC<ILibBreadcrumbs> = ({
+	className,
+	element = "div",
+	ref,
+	children,
+	separator = "/",
+	...rest
+}) => {
+	const Element = element
+	const childrenArray = Children.toArray(children)
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				"flex flex-wrap items-center gap-2",
+				"breadcrumbs",
+				className,
+			)}
+			{...rest}
+		>
+			{childrenArray.map((child, i) => (
+				<Fragment key={uuid()}>
+					{child}
+
+					{i !== childrenArray.length - 1 &&
+						(typeof separator === "string" ? (
+							<Text
+								element="span"
+								className="breadcrumbs-separator"
+							>
+								{separator}
+							</Text>
+						) : (
+							separator
+						))}
+				</Fragment>
+			))}
+		</Element>
+	)
+}

package/src/lib/components/Breadcrumbs/__preview__/Breadcrumbs.preview.tsx

@@ -0,0 +1,55 @@
+import type { FC } from "react"
+import { Link } from "react-router-dom"
+import { BiChevronRight } from "react-icons/bi"
+import { Breadcrumbs, Text } from "../../../"
+import type { ILibBreadcrumbs } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const Preview: FC<ILibBreadcrumbs> = props => {
+	return (
+		<Breadcrumbs {...props}>
+			<Text>
+				<Link to="/">Home</Link>
+			</Text>
+			<Text>
+				<Link to="#">Page</Link>
+			</Text>
+			<Text>
+				<Link to="#">Page</Link>
+			</Text>
+			<Text>
+				<Link to="#">Page</Link>
+			</Text>
+			<Text>Current page</Text>
+		</Breadcrumbs>
+	)
+}
+
+export const breadcrumbsPreview: ComponentPreview<ILibBreadcrumbs> = {
+	name: "Breadcrumbs",
+	component: Breadcrumbs,
+	category: "components",
+	import: "Breadcrumbs",
+	additionalImports: [],
+	optionalImports: [],
+	propsImport: "ILibBreadcrumbs",
+	additionalTypeImports: [],
+	extends: ["HTMLDivElement"],
+	previews: [
+		{ previewTitle: "Default", demo: <Preview /> },
+		{
+			previewTitle: "With different separator",
+			demo: <Preview separator={<BiChevronRight />} />,
+		},
+	],
+	props: [
+		{
+			name: "separator",
+			type: "ReactNode",
+			possibleValues: [],
+			defaultValue: "/",
+			description: "Separator to display between breadcrumb items.",
+			isRequired: false,
+		},
+	],
+}

package/src/lib/components/Breadcrumbs/types.ts

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

package/src/lib/components/Burger/Burger.tsx

@@ -0,0 +1,103 @@
+import { type FC } from "react"
+import { clsx, genBgAllColors } from "../../utils"
+import type { ILibBurger } from "./types"
+import type { LibColorsHover } from "../../types"
+
+const SPAN_COMMON =
+	"left-0 absolute w-full h-0.5 transition-all duration-200 ease-in-out"
+
+/**
+ * Burger component for displaying a hamburger menu icon with open/closed states and hover effects.
+ *
+ * @component
+ *
+ * @example
+ * <Burger isOpen={true} color="primary" />
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the burger.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the burger.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the burger element.
+ * @prop {string} [props.role="button"] - ARIA role for accessibility.
+ * @prop {string} [props.aria-label="Burger"] - ARIA label for accessibility.
+ * @prop {boolean} [props.isOpen] - Whether the burger menu is open or closed.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "white"} [props.color="primary"] - Color of the burger lines.
+ * @prop {any} [props.rest] - Additional props spread to the burger element.
+ *
+ * @returns {JSX.Element} The rendered Burger component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/burger
+ */
+export const Burger: FC<ILibBurger> = ({
+	className,
+	element = "button",
+	ref,
+	role = "button",
+	"aria-label": ariaLabel = "Burger",
+	isOpen,
+	color = "primary",
+	type = "button",
+	noHover,
+	...rest
+}) => {
+	const Element = element
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				"relative w-8 h-6",
+				!noHover && genHover[color],
+				"burger",
+				className,
+			)}
+			role={role}
+			aria-label={ariaLabel}
+			type={type}
+			{...rest}
+		>
+			<span
+				className={clsx(
+					SPAN_COMMON,
+					"top-0",
+					genBgAllColors[color],
+					isOpen && "open",
+					"[&.open]:rotate-45 [&.open]:top-[45%]",
+					"burger-span",
+				)}
+			/>
+			<span
+				className={clsx(
+					SPAN_COMMON,
+					"top-[50%] -translate-y-[50%]",
+					genBgAllColors[color],
+					isOpen && "open",
+					"[&.open]:w-0",
+					"burger-span",
+				)}
+			/>
+			<span
+				className={clsx(
+					SPAN_COMMON,
+					"bottom-0 ",
+					genBgAllColors[color],
+					isOpen && "open",
+					"[&.open]:-rotate-45 [&.open]:bottom-[45%]",
+					"burger-span",
+				)}
+			/>
+		</Element>
+	)
+}
+
+const genHover: Record<LibColorsHover, string> = {
+	primary: "hover:[&>span]:bg-primary-300 active:[&>span]:bg-primary-600",
+	secondary:
+		"hover:[&>span]:bg-secondary-300 active:[&>span]:bg-secondary-600",
+	success: "hover:[&>span]:bg-success-300 active:[&>span]:bg-success-600",
+	danger: "hover:[&>span]:bg-danger-300 active:[&>span]:bg-danger-600",
+	warning: "hover:[&>span]:bg-warning-300 active:[&>span]:bg-warning-600",
+	gray: "hover:[&>span]:bg-gray-300 active:[&>span]:bg-gray-600",
+	white: "hover:[&>span]:bg-gray-300 active:[&>span]:bg-gray-100",
+}