@julseb-lib/react 0.1.2 → 0.1.4

package/src/lib/components/Fade/Fade.tsx

@@ -0,0 +1,62 @@
+import { useState, useRef, type FC, useEffect } from "react"
+import { useMergeRefs } from "../../hooks"
+import { clsx } from "../../utils"
+import type { ILibFade } from "./types"
+
+/**
+ * Fade component for creating smooth fade-in animations when elements enter the viewport.
+ *
+ * @component
+ *
+ * @example
+ * <Fade>
+ *   <h1>This content will fade in when visible</h1>
+ * </Fade>
+ * 
+ * @extends ILibFade
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the fade container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the fade element.
+ * @prop {React.ReactNode} [props.children] - Content to animate with fade effect.
+ * 
+ * @returns {JSX.Element} The rendered Fade component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/fade
+ */
+export const Fade: FC<ILibFade> = ({
+	className,
+	element = "div",
+	ref,
+	children,
+	...rest
+}) => {
+	const Element = element
+
+	const [isVisible, setIsVisible] = useState(true)
+	const fadeRef = useRef<Element>(null)
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(entries => {
+			entries.forEach(entry => setIsVisible(entry.isIntersecting))
+		})
+
+		observer.observe((fadeRef as any).current)
+	}, [])
+
+	return (
+		<Element
+			ref={useMergeRefs([ref, fadeRef])}
+			className={clsx(
+				"opacity-0 transition-all -translate-x-6 duration-500 ease-out",
+				isVisible && "visible",
+				"[&.visible]:opacity-100 [&.visible]:translate-x-0",
+				"fade",
+				className,
+			)}
+			{...rest}
+		>
+			{children}
+		</Element>
+	)
+}

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

@@ -0,0 +1,33 @@
+import { Fade, generateNumbers, Text } from "../../../"
+import type {} from "../../../types"
+import type { ILibFade } 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 fadePreview: ComponentPreview<ILibFade> = {
+	name: "Fade",
+	component: Fade,
+	category: "components",
+	import: "Fade", // import Component (ex: Skeleton)
+	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
+	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
+	propsImport: "ILibFade", // import ILibComponent (ex: ILibAccordion)
+	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
+	extends: ["HTMLDivElement"],
+	previews: [
+		{
+			demo: (
+				<>
+					{generateNumbers(0, 10).map(i => (
+						<Fade key={i}>
+							<Text>{text}</Text>
+						</Fade>
+					))}
+				</>
+			),
+		},
+	],
+	props: [],
+}

package/src/lib/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,85 @@
+import { type FC } from "react"
+import { InputContainer } from "../InputContainer"
+import { clsx, genBorderRadius } from "../../utils"
+import type { ILibFieldset } from "./types"
+
+/**
+ * Fieldset component for grouping related form controls with a legend, validation states, and customizable styling.
+ *
+ * @component
+ *
+ * @example
+ * <Fieldset
+ *   legend="Personal Information"
+ *   label="User Details"
+ *   borderRadius="lg"
+ * >
+ *   <Input label="First Name" />
+ *   <Input label="Last Name" />
+ *   <Input label="Email" />
+ * </Fieldset>
+ *
+ * @extends HTMLFieldSetElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the fieldset container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the fieldset element.
+ * @prop {React.ReactNode} [props.children] - Form controls and content to display inside the fieldset.
+ * @prop {string} [props.label] - Label text to display above the fieldset.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the fieldset.
+ * @prop {string} [props.id] - Unique identifier for the fieldset element.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {string} [props.legend] - Legend text to display as the fieldset title.
+ * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="md"] - Border radius size for the fieldset.
+ * @prop {any} [props.rest] - Additional props spread to the fieldset element.
+ *
+ * @returns {JSX.Element} The rendered Fieldset component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/fieldset
+ */
+export const Fieldset: FC<ILibFieldset> = ({
+	className,
+	ref,
+	children,
+	label,
+	labelComment,
+	helper,
+	helperBottom,
+	id,
+	validation,
+	legend,
+	borderRadius = "md",
+	...rest
+}) => {
+	return (
+		<InputContainer
+			label={label}
+			labelComment={labelComment}
+			helper={helper}
+			helperBottom={helperBottom}
+			id={id}
+			validation={validation}
+		>
+			<fieldset
+				ref={ref}
+				className={clsx(
+					"flex flex-wrap gap-4 p-3 border border-gray-200",
+					validation?.status === false
+						? "border-danger-500"
+						: validation?.status === true && "border-success-500",
+					genBorderRadius[borderRadius],
+					"fieldset",
+					className,
+				)}
+				{...rest}
+			>
+				<legend className="px-3 font-black fieldset-legend">
+					{legend}
+				</legend>
+
+				{children}
+			</fieldset>
+		</InputContainer>
+	)
+}

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

@@ -0,0 +1,99 @@
+import { Fieldset } from "../../../"
+import { ChildrenCheck, ChildrenText, ChildrenCheckValidate } from "./Preview"
+import type { ILibFieldset } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const fieldsetPreview: ComponentPreview<ILibFieldset> = {
+	name: "Fieldset",
+	component: Fieldset,
+	category: "components",
+	import: "Fieldset",
+	additionalImports: [],
+	optionalImports: [],
+	propsImport: "ILibFieldset",
+	additionalTypeImports: [],
+	extends: ["HTMLFieldSetElement"],
+	previews: [
+		{
+			previewTitle: "With check inputs",
+			props: {
+				legend: "Favourite word?",
+				children: <ChildrenCheck />,
+			},
+		},
+		{
+			previewTitle: "With text inputs",
+			props: {
+				legend: "User information",
+				children: <ChildrenText />,
+			},
+		},
+		{
+			previewTitle: "With validation",
+			props: {
+				legend: "Favourite word?",
+				children: <ChildrenCheckValidate />,
+				validation: { status: false, message: "This is required." },
+			},
+		},
+	],
+	props: [
+		{
+			name: "legend",
+			type: "string",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Legend text to display as the fieldset title.",
+			isRequired: true,
+		},
+		{
+			name: "label",
+			type: "string",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Label text to display above the fieldset.",
+			isRequired: false,
+		},
+		{
+			name: "labelComment",
+			type: "string",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Additional comment text next to the label.",
+			isRequired: false,
+		},
+		{
+			name: "helper",
+			type: "string",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Helper text to display below the label.",
+			isRequired: false,
+		},
+		{
+			name: "helperBottom",
+			type: "string",
+			possibleValues: [],
+			defaultValue: null,
+			description:
+				"Helper text to display at the bottom of the fieldset.",
+			isRequired: false,
+		},
+		{
+			name: "validation",
+			type: "Object",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Validation state and configuration object.",
+			isRequired: false,
+		},
+		{
+			name: "borderRadius",
+			type: "string",
+			possibleValues: ["xs", "sm", "md", "lg", "xl", "full"],
+			defaultValue: "md",
+			description: "Border radius size for the fieldset.",
+			isRequired: false,
+		},
+	],
+}

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

@@ -0,0 +1,70 @@
+import { Input, InputCheck } from "../../../"
+
+export const ChildrenCheck = () => {
+	return (
+		<>
+			<InputCheck id="hello" name="inputs-check" type="radio">
+				Hello
+			</InputCheck>
+			<InputCheck id="world" name="inputs-check" type="radio">
+				World
+			</InputCheck>
+			<InputCheck id="foo" name="inputs-check" type="radio">
+				Foo
+			</InputCheck>
+			<InputCheck id="baz" name="inputs-check" type="radio">
+				Bar
+			</InputCheck>
+		</>
+	)
+}
+
+export const ChildrenText = () => {
+	return (
+		<>
+			<Input label="Name" />
+			<Input label="Email" type="email" />
+		</>
+	)
+}
+
+export const ChildrenCheckValidate = () => {
+	return (
+		<>
+			<InputCheck
+				id="hello-validate"
+				name="inputs-check-validate"
+				type="radio"
+				validation={false}
+			>
+				Hello
+			</InputCheck>
+			<InputCheck
+				id="world-validate"
+				name="inputs-check-validate"
+				type="radio"
+				validation={false}
+			>
+				World
+			</InputCheck>
+
+			<InputCheck
+				id="foo-validate"
+				name="inputs-check-validate"
+				type="radio"
+				validation={false}
+			>
+				Foo
+			</InputCheck>
+
+			<InputCheck
+				id="baz-validate"
+				name="inputs-check-validate"
+				type="radio"
+				validation={false}
+			>
+				Bar
+			</InputCheck>
+		</>
+	)
+}

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

@@ -0,0 +1,15 @@
+import type { LibComponentBase, LibRadiuses } from "../../types"
+import type {
+	ILibInputCommon,
+	ILibInputWithValidation,
+} from "../InputComponents"
+
+export type ILibFieldset = Omit<
+	LibComponentBase<HTMLFieldSetElement>,
+	"element"
+> &
+	Omit<ILibInputCommon, "inputBackground" | "inputVariant"> &
+	ILibInputWithValidation & {
+		legend: string
+		borderRadius?: LibRadiuses
+	}

package/src/lib/components/Flexbox/Flexbox.tsx

@@ -0,0 +1,99 @@
+import { type FC } from "react"
+import {
+	clsx,
+	genJustifyContent,
+	genAlignItems,
+	genAlignContent,
+	genColGap,
+	genGap,
+	genJustifyItems,
+	genRowGap,
+} from "../../utils"
+import type { ILibFlexbox } from "./types"
+
+/**
+ * Flexbox component for flexible layouts using CSS flexbox.
+ *
+ * @component
+ * @example
+ * <Flexbox flexDirection="row" gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flexbox>
+ *
+ * @prop {object} props - Component props.
+ * @prop {string} [props.className] - Additional class names to apply.
+ * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the flex container.
+ * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the flex container.
+ * @prop {ReactNode} props.children - Flexbox content.
+ * @prop {boolean} [props.inline] - Use inline-flex instead of flex.
+ * @prop {"row"|"row-reverse"|"col"|"col-reverse"} [props.flexDirection="row"] - Flex direction.
+ * @prop {"nowrap"|"wrap"|"wrap-reverse"} [props.flexWrap="nowrap"] - Flex wrap.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-sage"|"space-between"|"space-around"|"space-evenly"|"stretch"|"baseline"|"normal"} [props.justifyContent="start"] - Justify content property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"baseline"|"baseline-start"|"stretch"} [props.alignItems="stretch"] - Align items property.
+ * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"stretch"|"normal"} [props.justifyItems="stretch"] - Justify items property.
+ * @prop {"normal"|"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"|"baseline"|"stretch"} [props.alignContent="normal"] - Align content property.
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="0px"] - Gap between items (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.colGap="0px"] - Column gap (can use spacer tokens).
+ * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.rowGap="0px"] - Row gap (can use spacer tokens).
+ * @prop {object} [props.rest] - Additional props spread to the container.
+ *
+ * @returns {JSX.Element} The rendered flexbox container.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/layouts/flexbox
+ */
+export const Flexbox: FC<ILibFlexbox> = ({
+	className,
+	element = "div",
+	ref,
+	children,
+	inline,
+	flexDirection = "row",
+	flexWrap = "nowrap",
+	justifyContent = "start",
+	alignItems = "stretch",
+	justifyItems = "stretch",
+	alignContent = "normal",
+	gap = "0px",
+	colGap = "0px",
+	rowGap = "0px",
+	...rest
+}) => {
+	const Element = element
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx(
+				inline ? "inline-flex" : "flex",
+				genFlexWrap[flexWrap],
+				genFlexDirection[flexDirection],
+				genJustifyContent[justifyContent],
+				genAlignItems[alignItems],
+				genJustifyItems[justifyItems],
+				genAlignContent[alignContent],
+				genGap[gap],
+				genColGap[colGap],
+				genRowGap[rowGap],
+				"flexbox",
+				className,
+			)}
+			{...rest}
+		>
+			{children}
+		</Element>
+	)
+}
+
+const genFlexDirection = {
+	row: "flex-row",
+	"row-reverse": "flex-row-reverse",
+	col: "flex-col",
+	"col-reverse": "flex-col-reverse",
+}
+
+const genFlexWrap = {
+	nowrap: "flex-nowrap",
+	wrap: "flex-wrap",
+	"wrap-reverse": "flex-wrap-reverse",
+}

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

@@ -0,0 +1,155 @@
+import { Flexbox } from "../../../"
+import { GridItem } from "../../../../components"
+import type { ILibFlexbox } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+export const flexboxPreview: ComponentPreview<ILibFlexbox> = {
+	name: "Flexbox",
+	component: Flexbox,
+	category: "layouts",
+	import: "Flexbox",
+	additionalImports: null,
+	optionalImports: null,
+	propsImport: "ILibFlexbox",
+	additionalTypeImports: null,
+	extends: ["HTMLDivElement"],
+	previews: [
+		{
+			props: {
+				flexDirection: "col-reverse",
+				rowGap: "xs",
+				alignItems: "end",
+				justifyContent: "end",
+				children: (
+					<>
+						<GridItem />
+						<GridItem>Longer item</GridItem>
+						<GridItem />
+						<GridItem>Even longer item</GridItem>
+					</>
+				),
+			},
+		},
+	],
+	props: [
+		{
+			name: "inline",
+			type: "boolean",
+			possibleValues: null,
+			defaultValue: null,
+			description: "Use inline-flex instead of flex.",
+			isRequired: false,
+		},
+		{
+			name: "flexDirection",
+			type: "string",
+			possibleValues: ["row", "row-reverse", "col", "col-reverse"],
+			defaultValue: "row",
+			description: "Flex direction.",
+			isRequired: false,
+		},
+		{
+			name: "flexWrap",
+			type: "string",
+			possibleValues: ["nowrap", "wrap", "wrap-reverse"],
+			defaultValue: "nowrap",
+			description: "Flex wrap.",
+			isRequired: false,
+		},
+		{
+			name: "justifyContent",
+			type: "string",
+			possibleValues: [
+				"start",
+				"end",
+				"end-safe",
+				"center",
+				"center-sage",
+				"space-between",
+				"space-around",
+				"space-evenly",
+				"stretch",
+				"baseline",
+				"normal",
+			],
+			defaultValue: "start",
+			description: "Justify content property.",
+			isRequired: false,
+		},
+		{
+			name: "alignItems",
+			type: "string",
+			possibleValues: [
+				"start",
+				"end",
+				"end-safe",
+				"center",
+				"center-safe",
+				"baseline",
+				"baseline-start",
+				"stretch",
+			],
+			defaultValue: "stretch",
+			description: "Align items property.",
+			isRequired: false,
+		},
+		{
+			name: "justifyItems",
+			type: "string",
+			possibleValues: [
+				"start",
+				"end",
+				"end-safe",
+				"center",
+				"center-safe",
+				"stretch",
+				"normal",
+			],
+			defaultValue: "stretch",
+			description: "Justify items property.",
+			isRequired: false,
+		},
+		{
+			name: "alignContent",
+			type: "string",
+			possibleValues: [
+				"normal",
+				"center",
+				"start",
+				"end",
+				"space-between",
+				"space-around",
+				"space-evenly",
+				"baseline",
+				"stretch",
+			],
+			defaultValue: "normal",
+			description: "Align content property.",
+			isRequired: false,
+		},
+		{
+			name: "gap",
+			type: "string",
+			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "0px"],
+			defaultValue: "0px",
+			description: "Gap between items (can use spacer tokens).",
+			isRequired: false,
+		},
+		{
+			name: "colGap",
+			type: "string",
+			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "0px"],
+			defaultValue: "0px",
+			description: "Column gap (can use spacer tokens).",
+			isRequired: false,
+		},
+		{
+			name: "rowGap",
+			type: "string",
+			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "0px"],
+			defaultValue: "0px",
+			description: "Row gap (can use spacer tokens).",
+			isRequired: false,
+		},
+	],
+}

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

@@ -0,0 +1,23 @@
+import type {
+	CssAlignContent,
+	CssAlignItems,
+	CssFlexDirection,
+	CssFlexWrap,
+	CssJustifyContent,
+	CssJustifyItems,
+	LibComponentBase,
+	LibSpacers,
+} from "../../types"
+
+export interface ILibFlexbox extends LibComponentBase<HTMLDivElement> {
+	inline?: boolean
+	flexDirection?: CssFlexDirection
+	flexWrap?: CssFlexWrap
+	justifyContent?: CssJustifyContent
+	alignItems?: CssAlignItems
+	justifyItems?: CssJustifyItems
+	alignContent?: CssAlignContent
+	gap?: LibSpacers
+	colGap?: LibSpacers
+	rowGap?: LibSpacers
+}