@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -0,0 +1,55 @@
+import { Burger } from "../../../"
+import { BurgerPreview } from "./Preview"
+import type { ILibBurger } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const burgerPreview: ComponentPreview<ILibBurger> = {
+	name: "Burger",
+	component: Burger,
+	category: "components",
+	import: "Burger",
+	additionalImports: null,
+	optionalImports: null,
+	propsImport: "ILibBurger",
+	additionalTypeImports: null,
+	extends: ["HTMLButtonElement"],
+	previews: [
+		{ previewTitle: "Default", demo: <BurgerPreview /> },
+		{
+			previewTitle: "Other color",
+			demo: <BurgerPreview color="secondary" />,
+		},
+		{
+			previewTitle: "Other size",
+			demo: (
+				<BurgerPreview color="gray" className="w-12 h-8 [&>span]:h-1" />
+			),
+		},
+	],
+	props: [
+		{
+			name: "isOpen",
+			type: "boolean",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Whether the burger menu is open or closed.",
+			isRequired: true,
+		},
+		{
+			name: "color",
+			type: "string",
+			possibleValues: [
+				"primary",
+				"secondary",
+				"success",
+				"danger",
+				"warning",
+				"gray",
+				"white",
+			],
+			defaultValue: "primary",
+			description: "Color of the burger lines.",
+			isRequired: false,
+		},
+	],
+}

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

@@ -0,0 +1,11 @@
+import { useState, type FC } from "react"
+import { Burger } from "../Burger"
+import type { ILibBurger } from "../types"
+
+export const BurgerPreview: FC<Omit<ILibBurger, "isOpen">> = props => {
+	const [isOpen, setIsOpen] = useState(false)
+
+	return (
+		<Burger isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} {...props} />
+	)
+}

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

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes } from "react"
+import type { LibColorsHover, LibComponentBase } from "../../types"
+
+export interface ILibBurger
+	extends LibComponentBase<HTMLButtonElement>,
+		ButtonHTMLAttributes<HTMLButtonElement> {
+	children?: never
+	isOpen: boolean
+	color?: LibColorsHover
+	noHover?: boolean
+}

package/src/lib/components/Button/Button.tsx

@@ -0,0 +1,108 @@
+import { type FC } from "react"
+import {
+	clsx,
+	genBgColorHover,
+	genTextAllColor,
+	genBorderColorHover,
+	genTextColorHover,
+	genBgColorGhostHover,
+	genBorderRadius,
+	genButtonDisabled,
+} from "../../utils"
+import { Loader } from "../Loader"
+import type { ILibButton } from "./types"
+
+/**
+ * Button component for user interactions with multiple variants, colors, and loading states.
+ *
+ * @component
+ *
+ * @example
+ * <Button variant="plain" color="primary" size="default">Click me</Button>
+ *
+ * @extends HTMLButtonElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the button.
+ * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the button element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the button.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Button variant style.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
+ * @prop {"default" | "small"} [props.size="default"] - Button size.
+ * @prop {boolean} [props.isLoading] - Whether the button is in a loading state.
+ * @prop {1 | 2 | 3} [props.loaderVariant] - Loader variant to display when loading.
+ * @prop {boolean} [props.disabled] - Whether the button is disabled.
+ * @prop {any} [props.rest] - Additional props spread to the button element.
+ *
+ * @returns {JSX.Element} The rendered Button component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/button
+ */
+export const Button: FC<ILibButton> = ({
+	className,
+	element = "button",
+	ref,
+	children,
+	variant = "plain",
+	color = "primary",
+	size = "default",
+	isLoading,
+	loaderVariant = 1,
+	disabled,
+	borderRadius = "md",
+	type = "button",
+	...rest
+}) => {
+	const Element = element
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				"inline-flex items-center self-start gap-2 px-4 py-2 font-bold text-base",
+				genBorderRadius[borderRadius],
+				variant === "plain" && [
+					genBgColorHover[color],
+					color !== "white" && "text-white",
+					color === "white" && "text-primary",
+				],
+				variant === "ghost" && [
+					genTextAllColor[color],
+					color === "white" && "text-primary",
+					genBgColorGhostHover[color],
+				],
+				variant === "outline" && [
+					"border",
+					genBorderColorHover[color],
+					genTextColorHover[color],
+				],
+				variant === "transparent" && [genTextColorHover[color]],
+				size === "small" && "text-sm px-2 py-1",
+				genButtonDisabled[variant],
+				"button",
+				className,
+			)}
+			type={type}
+			disabled={disabled || isLoading}
+			{...rest}
+		>
+			{children}
+
+			{isLoading && (
+				<Loader
+					variant={loaderVariant}
+					color="gray"
+					className={clsx(
+						loaderVariant === 1
+							? "border-3 size-4"
+							: loaderVariant === 2
+								? "size-4 [&_span]:border-3"
+								: loaderVariant === 3 &&
+									"[&_span]:size-2 translate-y-[5px]",
+						"button-loader",
+					)}
+				/>
+			)}
+		</Element>
+	)
+}

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

@@ -0,0 +1,182 @@
+import { Button, designTokens, Flexbox } from "../../../"
+import type { ReactChildren } from "../../../types"
+import type { ILibButton } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const Flex = ({ children }: { children?: ReactChildren }) => {
+	return (
+		<Flexbox gap="sm" flexWrap="wrap">
+			{children}
+		</Flexbox>
+	)
+}
+
+export const buttonPreview: ComponentPreview<ILibButton> = {
+	name: "Button",
+	component: Button,
+	category: "components",
+	import: "Button",
+	additionalImports: null,
+	optionalImports: null,
+	propsImport: "ILibButton",
+	additionalTypeImports: null,
+	extends: ["HTMLButtonElement"],
+	previews: [
+		{
+			previewTitle: "Plain",
+			demo: (
+				<Flex>
+					{Object.keys(designTokens.libColorsHover).map(
+						(color, i) => (
+							<Button color={color as any} key={i}>
+								Button
+							</Button>
+						),
+					)}
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Ghost",
+			demo: (
+				<Flex>
+					{Object.keys(designTokens.libColorsHover).map(
+						(color, i) => (
+							<Button
+								color={color as any}
+								variant="ghost"
+								key={i}
+							>
+								Button
+							</Button>
+						),
+					)}
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Outline",
+			demo: (
+				<Flex>
+					{Object.keys(designTokens.libColorsHover).map(
+						(color, i) => (
+							<Button
+								color={color as any}
+								variant="outline"
+								key={i}
+							>
+								Button
+							</Button>
+						),
+					)}
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Transparent",
+			demo: (
+				<Flex>
+					{Object.keys(designTokens.libColorsHover).map(
+						(color, i) => (
+							<Button
+								color={color as any}
+								variant="transparent"
+								key={i}
+							>
+								Button
+							</Button>
+						),
+					)}
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Small",
+			demo: (
+				<Flex>
+					<Button size="small">Button</Button>
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Disabled",
+			demo: (
+				<Flex>
+					<Button variant="plain" disabled>
+						Button
+					</Button>
+					<Button variant="ghost" disabled>
+						Button
+					</Button>
+					<Button variant="transparent" disabled>
+						Button
+					</Button>
+				</Flex>
+			),
+		},
+		{
+			previewTitle: "Loading",
+			demo: (
+				<Flex>
+					<Button isLoading>Button</Button>
+					<Button isLoading loaderVariant={2}>
+						Button
+					</Button>
+					<Button isLoading loaderVariant={3}>
+						Button
+					</Button>
+				</Flex>
+			),
+		},
+	],
+	props: [
+		{
+			name: "variant",
+			type: "string",
+			possibleValues: ["plain", "ghost", "outline", "transparent"],
+			defaultValue: "plain",
+			description: "Button variant style.",
+			isRequired: false,
+		},
+		{
+			name: "color",
+			type: "string",
+			possibleValues: [
+				"primary",
+				"secondary",
+				"success",
+				"danger",
+				"warning",
+				"gray",
+				"white",
+			],
+			defaultValue: "primary",
+			description: "Button color theme.",
+			isRequired: false,
+		},
+		{
+			name: "size",
+			type: "string",
+			possibleValues: ["default", "small"],
+			defaultValue: "default",
+			description: "Button size.",
+			isRequired: false,
+		},
+		{
+			name: "isLoading",
+			type: "boolean",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Whether the button is in a loading state.",
+			isRequired: false,
+		},
+		{
+			name: "loaderVariant",
+			type: "number",
+			possibleValues: ["1", "2", "3"],
+			defaultValue: "1",
+			description: "Loader variant to display when loading.",
+			isRequired: false,
+		},
+	],
+}

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

@@ -0,0 +1,30 @@
+import type { ButtonHTMLAttributes } from "react"
+import type {
+	LibButtonSize,
+	LibButtonVariantExtended,
+	LibColorsHover,
+	LibComponentBase,
+	LibLoaderVariant,
+	LibRadiuses,
+} from "../../types"
+
+interface ILibButtonBase
+	extends LibComponentBase<HTMLButtonElement>,
+		ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: LibButtonVariantExtended
+	color?: LibColorsHover
+	size?: LibButtonSize
+	borderRadius?: LibRadiuses
+}
+
+interface ButtonWithLoader extends ILibButtonBase {
+	isLoading?: boolean
+	loaderVariant?: LibLoaderVariant
+}
+
+interface ButtonWithoutLoader extends ILibButtonBase {
+	isLoading?: undefined | null
+	loaderVariant?: never
+}
+
+export type ILibButton = ButtonWithLoader | ButtonWithoutLoader

package/src/lib/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,124 @@
+import { Fragment, type FC } from "react"
+import { Flexbox } from "../Flexbox"
+import {
+	clsx,
+	genBorderColorShort,
+	genBorderRadius,
+	genBgColorShort,
+	genBgColorHover,
+	genBgColorGhostHover,
+	genButtonDisabled,
+	genTextColorShort,
+	genTextColorHover,
+} from "../../utils"
+import type { ILibButtonGroup } from "./types"
+
+/**
+ * ButtonGroup component for displaying a group of related buttons with consistent styling and optional separators.
+ *
+ * @component
+ *
+ * @example
+ * <ButtonGroup
+ *   buttons={[
+ *     { id: "1", buttonContent: "Save" },
+ *     { id: "2", buttonContent: "Cancel" }
+ *   ]}
+ *   variant="plain"
+ *   color="primary"
+ * />
+ *
+ * @extends ILibFlexbox
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the button group.
+ * @prop {React.ComponentType} [props.element=Flexbox] - The component to render as the container element.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the button group element.
+ * @prop {React.ReactNode} [props.children] - Content to display inside the button group when not using buttons prop.
+ * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Color theme for the button group.
+ * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Visual variant style of the button group.
+ * @prop {string} [props.borderRadius="md"] - Border radius of the button group container.
+ * @prop {"default" | "small"} [props.size="default"] - Size of the buttons in the group.
+ * @prop {Array<LibButtonGroupButtonItem>} [props.buttons] - Array of button items to render in the group.
+ * @prop {any} [props.rest] - Additional props spread to the container element.
+ *
+ * @returns {JSX.Element} The rendered ButtonGroup component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/button-group
+ */
+export const ButtonGroup: FC<ILibButtonGroup> = ({
+	className,
+	element = Flexbox,
+	ref,
+	children,
+	color = "primary",
+	variant = "plain",
+	borderRadius = "md",
+	size = "default",
+	buttons,
+	...rest
+}) => {
+	const Element = element
+
+	const elementProps = {
+		ref,
+		className: clsx(
+			"w-fit overflow-hidden",
+			genBorderRadius[borderRadius],
+			variant === "transparent" && ["border", genBorderColorShort[color]],
+			"button-group",
+			className,
+		),
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		...rest,
+	}
+
+	if (buttons)
+		return (
+			<Element {...elementProps}>
+				{buttons.map((button, i) => (
+					<Fragment key={button.id}>
+						<button
+							className={clsx(
+								"px-2 py-1 h-full",
+								size === "small" && "text-sm px-2 py-1",
+								genButtonDisabled[variant],
+								variant === "plain" && [
+									color === "white"
+										? "text-primary-500"
+										: "text-white",
+									genBgColorHover[color],
+								],
+								variant === "ghost" && [
+									genBgColorGhostHover[color],
+									genTextColorShort[color],
+								],
+								variant === "transparent" && [
+									genTextColorHover[color],
+								],
+								"button-group-button",
+								button.className,
+							)}
+							{...(button as any)}
+						>
+							{button.content}
+						</button>
+
+						{variant === "transparent" &&
+							i !== buttons.length - 1 && (
+								<span
+									className={clsx(
+										"inline-block w-[1px] h-full",
+										genBgColorShort[color],
+										"button-group-separator",
+									)}
+								/>
+							)}
+					</Fragment>
+				))}
+			</Element>
+		)
+
+	return <Element {...elementProps}>{children}</Element>
+}

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

@@ -0,0 +1,101 @@
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"
+import { ButtonGroup } from "../../../"
+import type { LibButtonGroupButtonItem } from "../../../types"
+import type { ILibButtonGroup } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const buttons: Array<LibButtonGroupButtonItem> = [
+	{ id: "1", content: <BiLeftArrowAlt /> },
+	{ id: "2", content: "Button", disabled: true },
+	{ id: "3", content: "Button", onClick: () => alert("Clicked") },
+	{ id: "4", content: "Button" },
+	{ id: "5", content: <BiRightArrowAlt /> },
+]
+
+export const buttonGroupPreview: ComponentPreview<ILibButtonGroup> = {
+	name: "Button Group",
+	component: ButtonGroup,
+	category: "components",
+	import: "ButtonGroup",
+	additionalImports: null,
+	optionalImports: null,
+	propsImport: "ILibButtonGroup",
+	additionalTypeImports: ["LibButtonGroupButtonItem"],
+	extends: ["HTMLDivElement"],
+	previews: [
+		{ previewTitle: "Default", props: { buttons } },
+		{ previewTitle: "Ghost", props: { buttons, variant: "ghost" } },
+		{
+			previewTitle: "Transparent",
+			props: { buttons, variant: "transparent" },
+		},
+		{
+			previewTitle: "Success",
+			props: { buttons, color: "success" },
+		},
+		{ previewTitle: "Small", props: { buttons, size: "small" } },
+		{
+			previewTitle: "Border radius",
+			props: { buttons, borderRadius: "full" },
+		},
+	],
+	props: [
+		{
+			name: "buttons",
+			type: "Array of objects",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Array of button items to render in the group.",
+			isRequired: true,
+		},
+		{
+			name: "color",
+			type: "string",
+			possibleValues: [
+				"primary",
+				"secondary",
+				"success",
+				"danger",
+				"warning",
+				"gray",
+				"white",
+			],
+			defaultValue: "primary",
+			description: "Color theme for the button group.",
+			isRequired: false,
+		},
+		{
+			name: "variant",
+			type: "string",
+			possibleValues: ["plain", "ghost", "outline", "transparent"],
+			defaultValue: "plain",
+			description: "Visual variant style of the button group.",
+			isRequired: false,
+		},
+		{
+			name: "borderRadius",
+			type: "string",
+			possibleValues: [
+				"none",
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl",
+				"3xl",
+				"full",
+			],
+			defaultValue: "md",
+			description: "Border radius of the button group container.",
+			isRequired: false,
+		},
+		{
+			name: "size",
+			type: "string",
+			possibleValues: ["default", "small"],
+			defaultValue: "default",
+			description: "Size of the buttons in the group.",
+			isRequired: false,
+		},
+	],
+}

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

@@ -0,0 +1,28 @@
+import type {
+	LibButtonGroupButtonItem,
+	LibColorsHover,
+	LibButtonVariant,
+	LibRadiuses,
+	LibButtonSize,
+	ReactChildren,
+} from "../../types"
+import type { ILibFlexbox } from "../Flexbox/types"
+
+interface ILibButtonGroupBase extends ILibFlexbox {
+	color?: LibColorsHover
+	variant?: LibButtonVariant
+	borderRadius?: LibRadiuses
+	size?: LibButtonSize
+}
+
+interface ButtonGroupWithChildren extends ILibButtonGroupBase {
+	children?: ReactChildren
+	buttons?: never
+}
+
+interface ButtonGroupWithButtons extends ILibButtonGroupBase {
+	children?: never
+	buttons: Array<LibButtonGroupButtonItem>
+}
+
+export type ILibButtonGroup = ButtonGroupWithChildren | ButtonGroupWithButtons