@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react"
+import type { LibComponentBase, CssObjectFit, LibRadiuses } from "../../types"
+import type {
+	ILibPaginationControls,
+	ILibPaginationOptions,
+	ILibSlideshowPagination,
+} from "./subtypes"
+
+interface ILibSlideshowBase extends LibComponentBase<HTMLDivElement> {
+	imgFit?: CssObjectFit
+	hideControls?: boolean
+	controls?: ILibPaginationControls
+	options?: ILibPaginationOptions
+	borderRadius?: LibRadiuses
+}
+
+interface SlideshowWithImages extends ILibSlideshowBase {
+	images?: Array<string>
+	hidePagination?: boolean
+	pagination?: Pick<
+		ILibSlideshowPagination,
+		| "color"
+		| "className"
+		| "hideOnTouch"
+		| "images"
+		| "pagination"
+		| "hidePagination"
+		| "position"
+		| "type"
+	>
+	children?: never
+}
+
+interface SlideshowWithChildren extends ILibSlideshowBase {
+	images?: never
+	hidePagination?: boolean
+	pagination?: ILibSlideshowPagination
+	children?: Array<ReactNode>
+}
+
+export type ILibSlideshow = SlideshowWithImages | SlideshowWithChildren

package/src/lib/components/Sticky/Sticky.tsx

@@ -0,0 +1,58 @@
+import { type FC } from "react"
+import { clsx } from "../../utils"
+import type { LibSpacers } from "../../types"
+import type { ILibSticky } from "./types"
+
+/**
+ * Sticky component for creating elements that stick to a specified position during scroll.
+ *
+ * @component
+ *
+ * @example
+ * <Sticky top="md">
+ *   <nav>Navigation content</nav>
+ * </Sticky>
+ *
+ * @extends HTMLDivElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the sticky container.
+ * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the sticky element.
+ * @prop {React.ReactNode} [props.children] - Content to be positioned sticky.
+ * @prop {"0px" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.top="sm"] - Distance from top when sticky positioning is active.
+ *
+ * @returns {JSX.Element} The rendered Sticky component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/sticky
+ */
+export const Sticky: FC<ILibSticky> = ({
+	className,
+	element = "div",
+	ref,
+	children,
+	top = "sm",
+	...rest
+}) => {
+	const Element = element
+
+	return (
+		<Element
+			ref={ref}
+			className={clsx("sticky", genTop[top], className)}
+			{...rest}
+		>
+			{children}
+		</Element>
+	)
+}
+
+const genTop: Record<LibSpacers, string> = {
+	"0px": "top-0",
+	"2xs": "top-(--spacer-2xs)",
+	xs: "top-(--spacer-xs)",
+	sm: "top-(--spacer-sm)",
+	md: "top-(--spacer-md)",
+	lg: "top-(--spacer-lg)",
+	xl: "top-(--spacer-xl)",
+	"2xl": "top-(--spacer-2xl)",
+}

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

@@ -0,0 +1,188 @@
+import { Sticky, Text, Button } from "../../../"
+import type { ILibSticky } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const StickyDemo: FC<ILibSticky> = props => {
+	return (
+		<>
+			<Text>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+				tempus mi augue. Aenean iaculis dolor purus. Orci varius natoque
+				penatibus et magnis dis parturient montes, nascetur ridiculus
+				mus. Quisque lectus risus, luctus at luctus eget, gravida vitae
+				odio. Aliquam commodo fermentum odio at egestas. Sed rutrum
+				commodo auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
+				Duis non placerat urna. Suspendisse vel mi eros. Mauris rutrum
+				sit amet erat at volutpat. In facilisis molestie gravida. Nullam
+				lorem nisi, porta vel arcu nec, cursus sagittis nisl. Etiam
+				consequat sed urna eu tincidunt. Cras sit amet justo eget est
+				vestibulum aliquet et vitae elit.
+			</Text>
+
+			<Text>
+				Nunc fermentum egestas orci. Aenean vehicula massa a lectus
+				imperdiet sodales. Integer finibus mauris dolor, non aliquam
+				lectus dignissim et. Ut bibendum augue nec mattis consectetur.
+				Vestibulum interdum leo vel tellus fringilla bibendum quis ut
+				tellus. Curabitur lacus diam, condimentum a ullamcorper nec,
+				facilisis faucibus nisl. Quisque euismod massa et erat mollis
+				auctor. Sed aliquet elit enim, in dictum eros fringilla vitae.
+				Nulla laoreet felis leo, eget faucibus tellus tincidunt vel. Nam
+				eget congue felis. Fusce commodo posuere libero, ut vestibulum
+				sem efficitur et. Maecenas eros neque, auctor eget odio vitae,
+				molestie cursus dui. Vestibulum dapibus elit non magna gravida,
+				vel pulvinar dolor tempor. Nunc vehicula sem orci, vel tempor
+				mauris accumsan vitae. Praesent at scelerisque elit.
+			</Text>
+
+			<Sticky {...props}>
+				<Button>Sticky button</Button>
+			</Sticky>
+
+			<Text>
+				Donec ultrices sit amet massa at semper. Cras quam mauris,
+				tempor a luctus vel, lacinia vel dui. In eget pellentesque
+				purus. Integer tempus, tortor vitae malesuada feugiat, velit
+				quam consequat magna, vitae venenatis risus purus a ante. Class
+				aptent taciti sociosqu ad litora torquent per conubia nostra,
+				per inceptos himenaeos. Aenean quis cursus ipsum. Proin
+				scelerisque metus sed pellentesque viverra. Proin consequat ante
+				risus, quis euismod metus varius non. Sed varius tortor sed nunc
+				pulvinar consequat. Etiam tortor odio, aliquam ac est et,
+				consequat fringilla justo. Mauris in nibh nec neque blandit
+				pulvinar. Sed dapibus elit nulla, nec fringilla neque dignissim
+				non. Phasellus eu facilisis urna. Vivamus feugiat convallis
+				ligula, id congue tellus tincidunt vitae. Aliquam bibendum sed
+				erat porta molestie.
+			</Text>
+
+			<Text>
+				Donec non cursus est. Vestibulum ante ipsum primis in faucibus
+				orci luctus et ultrices posuere cubilia curae; Proin elementum
+				consectetur orci ac faucibus. Sed sodales dolor lorem,
+				consectetur sollicitudin nunc viverra eget. Aliquam eget tortor
+				ultrices neque commodo bibendum. Mauris tellus lacus, posuere
+				eget tincidunt ac, maximus sit amet turpis. Donec in quam eget
+				quam pulvinar feugiat. Morbi ante dolor, rhoncus a pharetra in,
+				laoreet eget odio. Donec commodo ligula ac gravida aliquam. Nam
+				ac lorem at turpis facilisis tempus et egestas libero.
+			</Text>
+
+			<Text>
+				Nulla gravida, quam a ultrices molestie, ante nisl commodo nibh,
+				eget elementum ligula ex eget ante. Sed elementum quam nec diam
+				pellentesque vehicula. Phasellus elementum lacus ligula. Vivamus
+				ornare eros at purus vehicula, vel pulvinar diam hendrerit. Sed
+				non nulla fringilla, venenatis dui ut, ultrices nunc. Nam libero
+				arcu, varius eget lacus sit amet, facilisis ullamcorper nibh.
+				Duis vel neque tellus.
+			</Text>
+
+			<Text>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+				tempus mi augue. Aenean iaculis dolor purus. Orci varius natoque
+				penatibus et magnis dis parturient montes, nascetur ridiculus
+				mus. Quisque lectus risus, luctus at luctus eget, gravida vitae
+				odio. Aliquam commodo fermentum odio at egestas. Sed rutrum
+				commodo auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
+				Duis non placerat urna. Suspendisse vel mi eros. Mauris rutrum
+				sit amet erat at volutpat. In facilisis molestie gravida. Nullam
+				lorem nisi, porta vel arcu nec, cursus sagittis nisl. Etiam
+				consequat sed urna eu tincidunt. Cras sit amet justo eget est
+				vestibulum aliquet et vitae elit.
+			</Text>
+
+			<Text>
+				Nunc fermentum egestas orci. Aenean vehicula massa a lectus
+				imperdiet sodales. Integer finibus mauris dolor, non aliquam
+				lectus dignissim et. Ut bibendum augue nec mattis consectetur.
+				Vestibulum interdum leo vel tellus fringilla bibendum quis ut
+				tellus. Curabitur lacus diam, condimentum a ullamcorper nec,
+				facilisis faucibus nisl. Quisque euismod massa et erat mollis
+				auctor. Sed aliquet elit enim, in dictum eros fringilla vitae.
+				Nulla laoreet felis leo, eget faucibus tellus tincidunt vel. Nam
+				eget congue felis. Fusce commodo posuere libero, ut vestibulum
+				sem efficitur et. Maecenas eros neque, auctor eget odio vitae,
+				molestie cursus dui. Vestibulum dapibus elit non magna gravida,
+				vel pulvinar dolor tempor. Nunc vehicula sem orci, vel tempor
+				mauris accumsan vitae. Praesent at scelerisque elit.
+			</Text>
+
+			<Text>
+				Donec ultrices sit amet massa at semper. Cras quam mauris,
+				tempor a luctus vel, lacinia vel dui. In eget pellentesque
+				purus. Integer tempus, tortor vitae malesuada feugiat, velit
+				quam consequat magna, vitae venenatis risus purus a ante. Class
+				aptent taciti sociosqu ad litora torquent per conubia nostra,
+				per inceptos himenaeos. Aenean quis cursus ipsum. Proin
+				scelerisque metus sed pellentesque viverra. Proin consequat ante
+				risus, quis euismod metus varius non. Sed varius tortor sed nunc
+				pulvinar consequat. Etiam tortor odio, aliquam ac est et,
+				consequat fringilla justo. Mauris in nibh nec neque blandit
+				pulvinar. Sed dapibus elit nulla, nec fringilla neque dignissim
+				non. Phasellus eu facilisis urna. Vivamus feugiat convallis
+				ligula, id congue tellus tincidunt vitae. Aliquam bibendum sed
+				erat porta molestie.
+			</Text>
+
+			<Text>
+				Donec non cursus est. Vestibulum ante ipsum primis in faucibus
+				orci luctus et ultrices posuere cubilia curae; Proin elementum
+				consectetur orci ac faucibus. Sed sodales dolor lorem,
+				consectetur sollicitudin nunc viverra eget. Aliquam eget tortor
+				ultrices neque commodo bibendum. Mauris tellus lacus, posuere
+				eget tincidunt ac, maximus sit amet turpis. Donec in quam eget
+				quam pulvinar feugiat. Morbi ante dolor, rhoncus a pharetra in,
+				laoreet eget odio. Donec commodo ligula ac gravida aliquam. Nam
+				ac lorem at turpis facilisis tempus et egestas libero.
+			</Text>
+
+			<Text>
+				Nulla gravida, quam a ultrices molestie, ante nisl commodo nibh,
+				eget elementum ligula ex eget ante. Sed elementum quam nec diam
+				pellentesque vehicula. Phasellus elementum lacus ligula. Vivamus
+				ornare eros at purus vehicula, vel pulvinar diam hendrerit. Sed
+				non nulla fringilla, venenatis dui ut, ultrices nunc. Nam libero
+				arcu, varius eget lacus sit amet, facilisis ullamcorper nibh.
+				Duis vel neque tellus.
+			</Text>
+
+			<Text>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+				tempus mi augue. Aenean iaculis dolor purus. Orci varius natoque
+				penatibus et magnis dis parturient montes, nascetur ridiculus
+				mus. Quisque lectus risus, luctus at luctus eget, gravida vitae
+				odio. Aliquam commodo fermentum odio at egestas. Sed rutrum
+				commodo auctor. Sed eu ullamcorper mi, accumsan lacinia urna.
+				Duis non placerat urna. Suspendisse vel mi eros. Mauris rutrum
+				sit amet erat at volutpat. In facilisis molestie gravida. Nullam
+				lorem nisi, porta vel arcu nec, cursus sagittis nisl. Etiam
+				consequat sed urna eu tincidunt. Cras sit amet justo eget est
+				vestibulum aliquet et vitae elit.
+			</Text>
+		</>
+	)
+}
+
+export const stickyPreview: ComponentPreview<ILibSticky> = {
+	name: "Sticky",
+	component: Sticky,
+	category: "components",
+	import: "Sticky",
+	additionalImports: [],
+	optionalImports: [],
+	propsImport: "ILibSticky",
+	additionalTypeImports: [],
+	extends: ["HTMLDivElement"],
+	previews: [{ demo: <StickyDemo /> }],
+	props: [
+		{
+			name: "top",
+			type: "string",
+			possibleValues: ["0px", "2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
+			defaultValue: "sm",
+			description: "Distance from top when sticky positioning is active.",
+			isRequired: false,
+		},
+	],
+}

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

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

package/src/lib/components/Table/Table.tsx

@@ -0,0 +1,138 @@
+import { type FC } from "react"
+import { uuid } from "@julseb-lib/utils"
+import {
+	clsx,
+	linkifyText,
+	genLinkColor,
+	genButtonColor,
+	genTextAlign,
+	genVAlign,
+} from "../../utils"
+import { TEXT_BASE_CLASSES } from "../Text"
+import type { ILibTable } from "./types"
+
+/**
+ * Table component for creating structured data tables with customizable styling, variants, and automatic link detection.
+ *
+ * @component
+ *
+ * @example
+ * <Table
+ *   variant="bordered"
+ *   headers={["Name", "Email", "Role"]}
+ *   data={[
+ *     ["John Doe", "john@example.com", "Admin"],
+ *     ["Jane Smith", "jane@example.com", "User"]
+ *   ]}
+ *   footers={["Total: 2 users", "", ""]}
+ *   linkify
+ * />
+ *
+ * @extends HTMLTableElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the table.
+ * @prop {React.Ref<HTMLTableElement>} [props.ref] - Ref to the table element.
+ * @prop {React.ReactNode} [props.children] - Table content when not using data prop.
+ * @prop {"bordered" | "stripped" | "border-bottom"} [props.variant="bordered"] - Visual variant for table styling.
+ * @prop {"align-baseline" | "align-top" | "align-middle" | "align-bottom" | "align-text-top" | "align-text-bottom" | "align-sub" | "align-super"} [props.vAlign="align-top"] - Vertical alignment for table cells.
+ * @prop {"left" | "center" | "right" | "justify"} [props.textAlign="left"] - Text alignment for table content.
+ * @prop {boolean} [props.linkify] - Whether to automatically convert URLs in text to clickable links.
+ * @prop {boolean} [props.blank] - Whether links should open in new tab when linkify is enabled.
+ * @prop {Array<React.ReactNode>} [props.headers] - Array of header content for table columns.
+ * @prop {Array<React.ReactNode>} [props.footers] - Array of footer content for table columns.
+ * @prop {Array<Array<React.ReactNode>>} [props.data] - 2D array of table data for automatic table generation.
+ *
+ * @returns {JSX.Element} The rendered Table component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/table
+ */
+export const Table: FC<ILibTable> = ({
+	className,
+	ref,
+	children,
+	variant = "bordered",
+	vAlign = "align-top",
+	textAlign = "left",
+	linkify,
+	blank,
+	headers,
+	footers,
+	data,
+	...rest
+}) => {
+	return (
+		<table
+			ref={ref}
+			className={clsx(
+				"table w-full h-[1px] border-collapse border-spacing-0 table-fixed",
+				TEXT_BASE_CLASSES,
+				"text-(length:--font-size-small)",
+				genLinkColor["primary"],
+				genButtonColor["primary"],
+				"[&_thead]:bg-primary-500 [&_thead]:text-white [&_thead]:font-bold",
+				"[&_td]:overflow-x-scroll [&_td]:px-2 [&_td]:py-1 [&_th]:overflow-x-scroll [&_th]:px-2 [&_th]:py-1",
+				variant === "bordered" && [
+					"border border-gray-200",
+					"[&_thead_th:not(:last-child)]:border-r [&_thead_th:not(:last-child)]:border-background [&_td]:border [&_td]:border-gray-200",
+				],
+				variant === "stripped" && [
+					"[&_tbody_tr:nth-child(even)]:bg-gray-100",
+				],
+				variant === "border-bottom" && [
+					"[&_tbody_tr]:border-b [&_tbody_tr]:border-b-gray-200",
+				],
+				genVAlign[vAlign],
+				genTextAlign[textAlign],
+				"table",
+				className,
+			)}
+			{...rest}
+		>
+			{headers && (
+				<thead>
+					<tr>
+						{headers.map(header => (
+							<th key={uuid()}>
+								{linkify && typeof header === "string"
+									? linkifyText(header, blank)
+									: header}
+							</th>
+						))}
+					</tr>
+				</thead>
+			)}
+
+			{data ? (
+				<tbody>
+					{data.map(row => (
+						<tr key={uuid()}>
+							{row.map(col => (
+								<td key={uuid()}>
+									{linkify && typeof col === "string"
+										? linkifyText(col, blank)
+										: col}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			) : (
+				children
+			)}
+
+			{footers && (
+				<tfoot>
+					<tr>
+						{footers.map(footer => (
+							<td key={uuid()}>
+								{linkify && typeof footer === "string"
+									? linkifyText(footer, blank)
+									: footer}
+							</td>
+						))}
+					</tr>
+				</tfoot>
+			)}
+		</table>
+	)
+}

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

@@ -0,0 +1,173 @@
+import { Table, toTitleCase } from "../../../"
+import type { ReactChildren } from "../../../types"
+import type { ILibTable } from "../../../types/components-props"
+import type { ComponentPreview } from "../../../../data/components"
+
+const users: Array<User> = [
+	{
+		id: 1,
+		firstName: "Anna",
+		lastName: "Fali",
+		facebook: "Anna Fali",
+		twitter: "@anna.fali",
+	},
+	{
+		id: 2,
+		firstName: "Niek",
+		lastName: "Bove",
+		facebook: "Niek Bove",
+		twitter: "@niek.bove",
+	},
+	{
+		id: 3,
+		firstName: "Lacara",
+		lastName: "Jones",
+		facebook: "Lacara Jones",
+		twitter: "@lacara.jones",
+	},
+	{
+		id: 4,
+		firstName: "Pablo",
+		lastName: "Cambeiro",
+		facebook: "Pablo Cambeiro",
+		twitter: "@pablo.cambeiro",
+	},
+	{
+		id: 5,
+		firstName: "Irene",
+		lastName: "Sotelo",
+		facebook: "Irene Sotelo",
+		twitter: "@irene.sotelo",
+	},
+]
+
+const headers: Array<ReactChildren> = [
+	...new Set(
+		users
+			.map(user => Object.keys(user))
+			.flat()
+			.map(key => toTitleCase(key)),
+	),
+]
+
+const data: Array<Array<ReactChildren>> = users.map(user =>
+	Object.values(user).map((v, i) =>
+		i === Object.values(user).length - 1 ? `http://twitter.com/${v}` : v,
+	),
+)
+
+export const tablePreview: ComponentPreview<ILibTable> = {
+	name: "Table",
+	component: Table,
+	category: "components",
+	import: "Table",
+	additionalImports: [],
+	optionalImports: [],
+	propsImport: "ILibTable",
+	additionalTypeImports: [],
+	extends: ["HTMLTableElement"],
+	previews: [
+		{ previewTitle: "Default", props: { headers, data, linkify: true } },
+
+		{
+			previewTitle: "Border bottom",
+			props: {
+				headers,
+				data,
+				linkify: true,
+				variant: "border-bottom",
+				className: "[&_td:last-child]:p-0",
+			},
+		},
+		{
+			previewTitle: "Stripped",
+			props: { headers, data, linkify: true, variant: "stripped" },
+		},
+	],
+	props: [
+		{
+			name: "variant",
+			type: "string",
+			possibleValues: ["bordered", "stripped", "border-bottom"],
+			defaultValue: "bordered",
+			description: "Visual variant for table styling.",
+			isRequired: false,
+		},
+		{
+			name: "vAlign",
+			type: "string",
+			possibleValues: [
+				"align-baseline",
+				"align-top",
+				"align-middle",
+				"align-bottom",
+				"align-text-top",
+				"align-text-bottom",
+				"align-sub",
+				"align-super",
+			],
+			defaultValue: "align-top",
+			description: "Vertical alignment for table cells.",
+			isRequired: false,
+		},
+		{
+			name: "textAlign",
+			type: "string",
+			possibleValues: ["left", "center", "right", "justify"],
+			defaultValue: "left",
+			description: "Text alignment for table content.",
+			isRequired: false,
+		},
+		{
+			name: "headers",
+			type: "Array of React Element",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Array of header content for table columns.",
+			isRequired: false,
+		},
+		{
+			name: "footers",
+			type: "Array of React Element",
+			possibleValues: [],
+			defaultValue: null,
+			description: "Array of footer content for table columns.",
+			isRequired: false,
+		},
+		{
+			name: "data",
+			type: "Array of array of ReactElement",
+			possibleValues: [],
+			defaultValue: null,
+			description:
+				"2D array of table data for automatic table generation. Cannot be used with children.",
+			isRequired: false,
+		},
+		{
+			name: "linkify",
+			type: "boolean",
+			possibleValues: [],
+			defaultValue: "false",
+			description:
+				"Whether to automatically convert URLs in text to clickable links.",
+			isRequired: false,
+		},
+		{
+			name: "blank",
+			type: "boolean",
+			possibleValues: [],
+			defaultValue: "false",
+			description:
+				"Whether links should open in new tab when linkify is enabled. Only available when linkify is true.",
+			isRequired: false,
+		},
+	],
+}
+
+type User = {
+	id: number
+	firstName: string
+	lastName: string
+	facebook: string
+	twitter: string
+}

package/src/lib/components/Table/index.ts

@@ -0,0 +1 @@
+export * from "./Table"

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

@@ -0,0 +1,43 @@
+import type {
+	LibComponentBase,
+	LibTableVariant,
+	CssVerticalAlign,
+	ReactChildren,
+	CssTextAlign,
+} from "../../types"
+
+/*====================== Table ======================*/
+
+interface ILibTableBase
+	extends Omit<LibComponentBase<HTMLTableElement>, "element"> {
+	variant?: LibTableVariant
+	vAlign?: CssVerticalAlign
+	textAlign?: CssTextAlign
+	headers?: Array<ReactChildren>
+	footers?: Array<ReactChildren>
+}
+
+interface TableWithData extends ILibTableBase {
+	headers: Array<ReactChildren>
+	data: Array<Array<ReactChildren>>
+	children?: never
+}
+
+interface TableWithChildren extends ILibTableBase {
+	data?: never
+	children?: ReactChildren
+}
+
+type ILibTableContent = TableWithData | TableWithChildren
+
+type TableWithLinkify = ILibTableContent & {
+	linkify?: boolean
+	blank?: boolean
+}
+
+type TableWithoutLinkify = ILibTableContent & {
+	linkify?: undefined | false
+	blank?: never
+}
+
+export type ILibTable = TableWithLinkify | TableWithoutLinkify