@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/MarkdownEditor/buttons/icons.tsx

@@ -1,85 +0,0 @@
-import { type FC } from "react"
-
-interface IIcon {
-	size: number
-}
-
-export const IconCode: FC<IIcon> = ({ size }) => {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M3 5V6.74198H14.0423V16.1893H3V18L15.8769 17.9899V5H3Z"
-				fill="currentColor"
-			/>
-			<path
-				d="M17.85 5H21V6.74198L19.65 6.77634V16.155H21V18L17.85 17.9899V5Z"
-				fill="currentColor"
-			/>
-		</svg>
-	)
-}
-
-export const IconLive: FC<IIcon> = ({ size }) => {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M3 5V6.74198H9.19615V16.1893H3V18L11.0308 17.9899V5H3Z"
-				fill="currentColor"
-			/>
-			<path
-				d="M13.0038 5H21V6.74198L14.8038 6.77634V16.155H21V18L13.0038 17.9899V5Z"
-				fill="currentColor"
-			/>
-		</svg>
-	)
-}
-
-export const IconPreview: FC<IIcon> = ({ size }) => {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M3 5V6.73874L4.31618 6.77303V16.2028L3 16.1685V17.9758L6.1508 18V5.03429L3 5Z"
-				fill="currentColor"
-			/>
-			<path
-				d="M8.12387 5.03429L21 5V6.73874L9.92387 6.80732V16.1685L21 16.1342V17.9758L8.12387 18V5.03429Z"
-				fill="currentColor"
-			/>
-		</svg>
-	)
-}
-
-export const IconSeparator: FC<IIcon> = ({ size }) => {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M3 11H6V13H3V11ZM8 11H11V13H8V11ZM13 11H16V13H13V11ZM18 11H21V13H18V11Z"
-				fill="currentColor"
-			/>
-		</svg>
-	)
-}

package/dist/lib/components/MarkdownEditor/buttons/markdown-buttons.tsx

@@ -1,176 +0,0 @@
-import {
-	BiBold,
-	BiItalic,
-	BiStrikethrough,
-	BiUnderline,
-	BiListUl,
-	BiListOl,
-	BiLink,
-	BiSolidQuoteAltLeft,
-	BiCode,
-	BiCodeBlock,
-	BiComment,
-	BiImage,
-} from "react-icons/bi"
-import { IconSeparator, IconCode, IconLive, IconPreview } from "./icons"
-import type {
-	ReactElement,
-	LibMdEditorViews,
-	LibMdEditorTitles,
-	LibMdEditorButtons,
-} from "../../../types"
-
-const DEFAULT_ICON_SIZE = 16
-
-type LibMdButtonBase = {
-	name: LibMdEditorViews | LibMdEditorTitles | LibMdEditorButtons
-	displayName?: string
-}
-
-type LibMdButtonWithIcon = LibMdButtonBase & {
-	defaultIcon: ReactElement
-}
-
-type LibMdButtonWithCode = LibMdButtonBase & {
-	code: string
-}
-
-export const libMdButtons: Array<LibMdButtonWithIcon & LibMdButtonWithCode> = [
-	{
-		name: "bold",
-		code: "** **",
-		defaultIcon: <BiBold size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "italic",
-		code: "* *",
-		defaultIcon: <BiItalic size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "strikethrough",
-		code: "~~ ~~",
-		defaultIcon: <BiStrikethrough size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "underline",
-		code: "<u> </u>",
-		defaultIcon: <BiUnderline size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		displayName: "Unordered list",
-		name: "ul",
-		code: "\n- ",
-		defaultIcon: <BiListUl size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		displayName: "Ordered list",
-		name: "ol",
-		code: "\n1. ",
-		defaultIcon: <BiListOl size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "link",
-		code: "[](URL here)",
-		defaultIcon: <BiLink size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "quote",
-		displayName: "Blockquote",
-		code: "\n> ",
-		defaultIcon: <BiSolidQuoteAltLeft size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		displayName: "Separator",
-		name: "hr",
-		code: "\n\n---\n\n",
-		defaultIcon: <IconSeparator size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "code",
-		code: "``",
-		defaultIcon: <BiCode size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		displayName: "Code block",
-		name: "codeBlock",
-		code: "\n```\n\n```\n",
-		defaultIcon: <BiCodeBlock size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "comment",
-		code: "\n<!--  -->\n",
-		defaultIcon: <BiComment size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "image",
-		code: "![](https://example.com/your-image.png)",
-		defaultIcon: <BiImage size={DEFAULT_ICON_SIZE} />,
-	},
-]
-
-export const libMdViewButtons: Array<LibMdButtonWithIcon> = [
-	{
-		name: "code",
-		defaultIcon: <IconCode size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "live",
-		defaultIcon: <IconLive size={DEFAULT_ICON_SIZE} />,
-	},
-	{
-		name: "preview",
-		defaultIcon: <IconPreview size={DEFAULT_ICON_SIZE} />,
-	},
-]
-
-export const libMdTitleButtons: Array<LibMdButtonWithCode> = [
-	{
-		displayName: "Title 1",
-		name: "h1",
-		code: "\n# ",
-	},
-	{
-		displayName: "Title 2",
-		name: "h2",
-		code: "\n## ",
-	},
-	{
-		displayName: "Title 3",
-		name: "h3",
-		code: "\n### ",
-	},
-	{
-		displayName: "Title 4",
-		name: "h4",
-		code: "\n#### ",
-	},
-	{
-		displayName: "Title 5",
-		name: "h5",
-		code: "\n##### ",
-	},
-	{
-		displayName: "Title 6",
-		name: "h6",
-		code: "\n###### ",
-	},
-]
-
-export const getFontSizeButton = (tag: LibMdEditorTitles): number | null => {
-	switch (tag) {
-		case "h1":
-			return 17
-		case "h2":
-			return 16
-		case "h3":
-			return 15
-		case "h4":
-			return 14
-		case "h5":
-			return 13
-		case "h6":
-			return 12
-		default:
-			return null
-	}
-}

package/dist/lib/components/MarkdownEditor/index.ts

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

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

@@ -1,42 +0,0 @@
-import type {
-	DispatchState,
-	LibComponentBase,
-	LibMdEditorViews,
-	LibMdEditorOptions,
-	ReactElement,
-} from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputWithValidation,
-} from "../InputComponents"
-
-export type ILibMarkdownEditor = Omit<
-	LibComponentBase<HTMLTextAreaElement>,
-	"element"
-> &
-	Omit<ILibInputCommon, "inputVariant"> &
-	ILibInputWithValidation & {
-		value: string
-		setValue: DispatchState<string>
-		onChange?: never
-		defaultView?: LibMdEditorViews
-		options?: LibMdEditorOptions
-		textButtonTitles?: string
-		icons?: {
-			bold?: ReactElement
-			italic?: ReactElement
-			strikethrough?: ReactElement
-			ul?: ReactElement
-			ol?: ReactElement
-			link?: ReactElement
-			quote?: ReactElement
-			hr?: ReactElement
-			code?: ReactElement
-			codeBlock?: ReactElement
-			comment?: ReactElement
-			image?: ReactElement
-			editorCode?: ReactElement
-			editorLive?: ReactElement
-			editorPreview?: ReactElement
-		}
-	}

package/dist/lib/components/Masonry/Masonry.tsx

@@ -1,83 +0,0 @@
-import { type FC, useCallback, useEffect, useRef, useState } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx, genGap } from "../../utils"
-import { useMergeRefs } from "../../hooks"
-import { fillCols, useEventListener } from "./utils"
-import type { ILibMasonry } from "./types"
-
-/**
- * Masonry component for displaying content in a responsive masonry grid layout.
- *
- * @component
- *
- * @example
- * <Masonry col={3} gap="md">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </Masonry>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the container.
- * @prop {React.RefObject<HTMLDivElement>} [props.ref] - Ref for the container element.
- * @prop {React.ReactNode[]} [props.children=[]] - The content to display in the masonry grid.
- * @prop {number} [props.col=4] - Number of columns in the masonry grid.
- * @prop {"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.gap="lg"] - Gap between grid items.
- *
- * @returns {JSX.Element} The rendered Masonry component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/masonry
- */
-export const Masonry: FC<ILibMasonry> = ({
-	className,
-	element = "div",
-	ref,
-	children = [],
-	col = 4,
-	gap = "lg",
-	...rest
-}) => {
-	const el = useRef<HTMLDivElement>(null as any)
-
-	const [numCols, setNumCols] = useState(col)
-	const cols = [...Array(col)].map(() => [])
-	fillCols(children, cols)
-
-	const resizeHandler = useCallback(
-		() =>
-			setNumCols(
-				Math.ceil(window.innerWidth / (window.innerWidth / numCols)),
-			),
-		[numCols],
-	)
-
-	useEffect(resizeHandler, [numCols, resizeHandler])
-
-	useEventListener("resize", resizeHandler)
-
-	const Element = element
-
-	return (
-		<Element
-			ref={useMergeRefs([el, ref])}
-			className={clsx(
-				"grid grid-flow-col",
-				genGap[gap],
-				"masonry",
-				className,
-			)}
-			{...rest}
-		>
-			{[...Array(numCols)].map((_, i) => (
-				<div
-					className={clsx("grid h-fit", genGap[gap], "masonry-item")}
-					key={uuid()}
-				>
-					{cols[i]}
-				</div>
-			))}
-		</Element>
-	)
-}

package/dist/lib/components/Masonry/index.ts

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

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

@@ -1,8 +0,0 @@
-import type { ReactNode } from "react"
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibMasonry extends LibComponentBase<HTMLDivElement> {
-	children?: Array<ReactNode>
-	col?: number
-	gap?: LibSpacers
-}

package/dist/lib/components/Masonry/utils.tsx

@@ -1,28 +0,0 @@
-import { useEffect, useRef, type ReactNode } from "react"
-
-export function useEventListener(
-	eventNames: keyof GlobalEventHandlersEventMap,
-	handler: () => void,
-	element = globalThis,
-) {
-	const savedHandler = useRef<() => void>(null)
-	useEffect(() => (savedHandler.current = handler), [handler])
-
-	useEffect(() => {
-		if (!element.addEventListener) return
-
-		const listener = (e: EventListenerOrEventListenerObject) =>
-			(savedHandler as any).current(e!)
-
-		for (const e of eventNames as any) element.addEventListener(e, listener)
-
-		return () => {
-			for (const e of eventNames as any)
-				element.removeEventListener(e, listener)
-		}
-	}, [element, eventNames])
-}
-
-export function fillCols(children: Array<ReactNode>, cols: Array<any>) {
-	children.forEach((child, i) => cols[i % cols.length].push(child))
-}

package/dist/lib/components/Meta/Meta.tsx

@@ -1,125 +0,0 @@
-import { type FC } from "react"
-import type { ILibMeta } from "./types"
-
-/**
- * Meta component for managing HTML head metadata including SEO, Open Graph, and Twitter Card properties.
- *
- * @component
- *
- * @example
- * <Meta
- *   title="My Website"
- *   description="A description of my website"
- *   favicon="/favicon.ico"
- *   cover="/og-image.jpg"
- *   siteName="My Site"
- *   author="John Doe"
- *   url="https://mywebsite.com"
- * />
- *
- * @prop {React.ReactNode} [props.children] - Additional meta tags or head elements to include.
- * @prop {string} [props.title] - Page title for the document and social media.
- * @prop {string} [props.favicon] - URL path to the favicon icon file.
- * @prop {string} [props.description] - Page description for SEO and social media.
- * @prop {string} [props.generator] - Name of the generator used to create the page.
- * @prop {string[]} [props.keywords] - Array of keywords for SEO purposes.
- * @prop {string} [props.author] - Author name for the page content.
- * @prop {string} [props.authorUrl] - URL to the author's profile or website.
- * @prop {string} [props.publisher] - Publisher name for the content.
- * @prop {string} [props.type] - Open Graph type (e.g., "website", "article").
- * @prop {string} [props.cover] - URL to the cover image for social media sharing.
- * @prop {string} [props.siteName] - Name of the website or application.
- * @prop {string} [props.language] - Language locale code (e.g., "en-US").
- * @prop {string} [props.url] - Canonical URL of the page.
- * @prop {string} [props.email] - Contact email address.
- * @prop {string} [props.creator] - Creator name for the content.
- * @prop {string} [props.manifest] - URL path to the web app manifest file.
- * @prop {string} [props.category] - Category classification for the content.
- * @prop {string} [props.twitterCard] - Twitter Card type (e.g., "summary", "summary_large_image").
- *
- * @returns {JSX.Element} The rendered Meta component with HTML head elements.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/meta
- */
-export const Meta: FC<ILibMeta> = ({
-	children,
-	title,
-	favicon,
-	description,
-	generator,
-	keywords,
-	author,
-	authorUrl,
-	publisher,
-	type = "website",
-	cover,
-	siteName,
-	language,
-	url,
-	email,
-	creator,
-	manifest,
-	category,
-	twitterCard = "summary",
-}) => {
-	return (
-		<>
-			<meta charSet="utf-8" />
-			<meta
-				name="viewport"
-				content="width=device-width, initial-scale=1"
-			/>
-			{title && (
-				<>
-					<title>{title}</title>
-					<meta property="og:title" content={title} />
-					<meta name="twitter:title" content={title} />
-				</>
-			)}
-			{description && (
-				<>
-					<meta name="description" content={description} />
-					<meta property="og:description" content={description} />
-					<meta name="twitter:description" content={description} />
-				</>
-			)}
-			{siteName && (
-				<>
-					<meta name="application-name" content={siteName} />
-					<meta property="og:site_name" content={siteName} />
-				</>
-			)}
-			{author && (
-				<>
-					<meta name="author" content={author} />
-					<meta name="twitter:creator" content={author} />
-				</>
-			)}
-			{url && (
-				<>
-					<meta property="og:url" content={url} />
-					<meta name="twitter:site" content={url} />
-				</>
-			)}
-			{cover && (
-				<>
-					<meta property="og:image" content={cover} />
-					<meta name="twitter:image" content={cover} />
-				</>
-			)}
-			{authorUrl && <link rel="author" href={authorUrl} />}
-			{manifest && <link rel="manifest" href={manifest} />}
-			{generator && <meta name="generator" content={generator} />}
-			{keywords && <meta name="keywords" content={keywords?.join(",")} />}
-			{creator && <meta name="creator" content={creator} />}
-			{publisher && <meta name="publisher" content={publisher} />}
-			{category && <meta name="category" content={category} />}
-			{language && <meta property="og:locale" content={language} />}
-			{email && <meta property="og:email" content={email} />}
-			{type && <meta property="og:type" content={type} />}
-			{twitterCard && <meta name="twitter:card" content={twitterCard} />}
-			{favicon && <link rel="icon" href={favicon} />}
-			{children}
-		</>
-	)
-}

package/dist/lib/components/Meta/index.ts

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

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

@@ -1,35 +0,0 @@
-import type { ReactChildren } from "../../types"
-
-export interface ILibMeta {
-	title: string
-	favicon?: string
-	description?: string
-	generator?: string
-	keywords?: Array<string>
-	author?: string
-	authorUrl?: string
-	publisher?: string
-	type?:
-		| "article"
-		| "book"
-		| "music.album"
-		| "music.playlist"
-		| "music.radio_station"
-		| "music.song"
-		| "profile"
-		| "video.episode"
-		| "video.movie"
-		| "video.other"
-		| "video. tv_show"
-		| "website"
-	cover?: string
-	siteName?: string
-	language?: string
-	url?: string
-	email?: string
-	creator?: string
-	manifest?: string
-	category?: string
-	twitterCard?: "app" | "player" | "summary" | "summary_large_image"
-	children?: ReactChildren
-}

package/dist/lib/components/Modal/Modal.tsx

@@ -1,107 +0,0 @@
-import { useRef, type FC } from "react"
-import { BiX } from "react-icons/bi"
-import { enableScroll } from "@julseb-lib/utils"
-import { useKeyPress, useClickOutside } from "../../hooks"
-import { clsx } from "../../utils"
-import type { ILibModal } from "./types"
-
-/**
- * Modal component for displaying overlay content with backdrop, close functionality, and keyboard navigation support.
- *
- * @component
- *
- * @example
- * <Modal
- *   isOpen={isOpen}
- *   setIsOpen={setIsOpen}
- *   labelClose="Close dialog"
- * >
- *   <div className="bg-white p-6 rounded-lg">
- *     <h2>Modal Content</h2>
- *     <p>This is a modal dialog.</p>
- *   </div>
- * </Modal>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the modal container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the modal element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the modal.
- * @prop {boolean} [props.isOpen] - Whether the modal is currently visible.
- * @prop {function} [props.setIsOpen] - Function to control the modal open/closed state.
- * @prop {boolean} [props.disableEsc] - Whether to disable closing the modal with the Escape key.
- * @prop {boolean} [props.hideCloseButton] - Whether to hide the close button in the modal.
- * @prop {React.ReactNode} [props.closeIcon=<BiX size={32} />] - Custom close icon for the modal.
- * @prop {string} [props.labelClose="Close modal"] - Aria label for the close button.
- *
- * @returns {JSX.Element} The rendered Modal component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/modal
- */
-export const Modal: FC<ILibModal> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	isOpen,
-	setIsOpen,
-	disableEsc,
-	hideCloseButton,
-	closeIcon = <BiX size={32} />,
-	labelClose = "Close modal",
-	...rest
-}) => {
-	const Element = element
-
-	const el = useRef<HTMLDivElement>(null)
-
-	const handleClose = () => {
-		if (isOpen) {
-			setIsOpen(false)
-			enableScroll()
-		}
-	}
-
-	useClickOutside(el as any, handleClose)
-	useKeyPress("Escape", () => {
-		if (isOpen && !disableEsc) handleClose()
-	})
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"top-0 left-0 z-999 fixed flex justify-center items-center bg-overlay-black-80 w-full h-svh",
-				isOpen && "open",
-				"invisible opacity-0 [&.open]:visible [&.open]:opacity-100",
-				"modal",
-				className,
-			)}
-			{...rest}
-		>
-			<button
-				className={clsx(
-					"top-2 right-2 z-10 absolute flex justify-center items-center size-12 text-white hover:text-gray-300 active:text-gray-100",
-					"modal-close",
-				)}
-				onClick={() => setIsOpen(false)}
-				aria-label={labelClose}
-				role="button"
-				type="button"
-			>
-				{closeIcon}
-			</button>
-
-			<div
-				ref={el}
-				className={clsx(
-					"z-0 relative flex justify-center items-center w-full max-w-[90%]",
-					"modal-content",
-				)}
-			>
-				{children}
-			</div>
-		</Element>
-	)
-}