@julseb-lib/react 0.1.5 → 0.1.7

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

@@ -1,154 +0,0 @@
-import { Link } from "react-router-dom"
-import { Cover, Text } from "../../../"
-import type { ILibCover } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const coverPreview: ComponentPreview<ILibCover> = {
-	name: "Cover",
-	component: Cover,
-	category: "components",
-	import: "Cover",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibCover",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			demo: (
-				<>
-					<Text>
-						<Link
-							to="/cover/demo-center"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo center
-						</Link>
-					</Text>
-					<Text>
-						<Link
-							to="/cover/demo-center-overlay"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo center overlay
-						</Link>
-					</Text>
-					<Text>
-						<Link
-							to="/cover/demo-bottom"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo bottom
-						</Link>
-					</Text>
-					<Text>
-						<Link
-							to="/cover/demo-bottom-overlay"
-							target="_blank"
-							rel="noreferrer noopener"
-						>
-							Demo bottom overlay
-						</Link>
-					</Text>
-				</>
-			),
-		},
-	],
-	props: [
-		{
-			name: "img",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "URL of the background image to display.",
-			isRequired: true,
-		},
-		{
-			name: "alt",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Alt text for the background image.",
-			isRequired: false,
-		},
-		{
-			name: "overlay",
-			type: "string",
-			possibleValues: [
-				"black-50",
-				"black-100",
-				"white-50",
-				"white-100",
-				"gradient-black",
-				"gradient-white",
-			],
-			defaultValue: null,
-			description: "Overlay variant to apply over the background image.",
-			isRequired: false,
-		},
-		{
-			name: "alignItems",
-			type: "string",
-			possibleValues: ["start", "center", "end", "stretch", "baseline"],
-			defaultValue: "center",
-			description: "How flex items are aligned along the cross axis.",
-			isRequired: false,
-		},
-		{
-			name: "justifyContent",
-			type: "string",
-			possibleValues: [
-				"start",
-				"center",
-				"end",
-				"between",
-				"around",
-				"evenly",
-			],
-			defaultValue: "center",
-			description: "How flex items are aligned along the main axis.",
-			isRequired: false,
-		},
-		{
-			name: "flexDirection",
-			type: "string",
-			possibleValues: ["row", "row-reverse", "column", "column-reverse"],
-			defaultValue: "column",
-			description: "Direction of the flex container's main axis.",
-			isRequired: false,
-		},
-		{
-			name: "flexWrap",
-			type: "string",
-			possibleValues: ["nowrap", "wrap", "wrap-reverse"],
-			defaultValue: "nowrap",
-			description: "Whether flex items should wrap to new lines.",
-			isRequired: false,
-		},
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: [
-				"0",
-				"1",
-				"2",
-				"3",
-				"4",
-				"5",
-				"6",
-				"8",
-				"10",
-				"12",
-				"16",
-				"20",
-				"24",
-			],
-			defaultValue: null,
-			description: "Gap between flex items.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/DragList/__preview__/Draglist.preview.tsx

@@ -1,156 +0,0 @@
-import { useState } from "react"
-import { DragList, Badge, Text, Flexbox, convertDateShort } from "../../.."
-import type { LibDragListItem } from "../../../types"
-import type { ILibDragList } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const DragListDemo = (
-	props: Omit<ILibDragList, "items" | "setItems" | "children">,
-) => {
-	const [items, setItems] = useState<Array<LibDragListItem>>([
-		{ id: "0", title: "First", body: "Body" },
-		{
-			id: "1",
-			title: (
-				<Flexbox
-					alignItems="center"
-					justifyContent="space-between"
-					gap="xs"
-					className="w-full"
-				>
-					<Text tag="h6">Second</Text>
-					<Badge color="success" className="min-w-2 size-2" />
-				</Flexbox>
-			),
-		},
-		{
-			id: "2",
-			title: (
-				<Flexbox
-					alignItems="center"
-					justifyContent="space-between"
-					gap="xs"
-					className="w-full"
-				>
-					<Text tag="strong">Third</Text>
-					<Text color="gray" tag="small">
-						{convertDateShort(new Date())}
-					</Text>
-				</Flexbox>
-			),
-			body: "Item",
-		},
-	])
-
-	return <DragList items={items} setItems={setItems} {...props} />
-}
-
-export const draglistPreview: ComponentPreview<ILibDragList> = {
-	name: "Drag List",
-	component: DragList,
-	category: "components",
-	import: "DragList",
-	additionalImports: [],
-	optionalImports: ["DragListItem"],
-	propsImport: "ILibDraglist",
-	additionalTypeImports: ["LibDragListItem"],
-	extends: ["HTMLDivElement"],
-	previews: [{ previewTitle: "Default", demo: <DragListDemo /> }],
-	propsTitle: "DragList",
-	props: [
-		{
-			name: "iconDrag",
-			type: "ReactElement",
-			possibleValues: [],
-			defaultValue: "BiDotsVerticalRounded",
-			description: "Icon to display as the drag handle for each item.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: ["xs", "sm", "md", "lg", "xl", "full"],
-			defaultValue: null,
-			description: "Border radius size for the drag list container.",
-			isRequired: false,
-		},
-		{
-			name: "items",
-			type: "Array of objects",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Array of draggable items with id, title, and body properties.",
-			isRequired: false,
-		},
-		{
-			name: "setItems",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Function to update the items array when items are reordered.",
-			isRequired: false,
-		},
-		{
-			name: "hideSeparator",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to hide separators between draggable items.",
-			isRequired: false,
-		},
-	],
-	propsSecondTitle: "DragListItem",
-	propsSecond: [
-		{
-			name: "item",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Item object containing id, title, and body properties. Only when children is not defined.",
-			isRequired: true,
-		},
-		{
-			name: "index",
-			type: "number",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Index position of the item in the drag list.",
-			isRequired: true,
-		},
-		{
-			name: "handleDragStart",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function called when drag operation starts.",
-			isRequired: true,
-		},
-		{
-			name: "handleDragOver",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function called when dragging over this item.",
-			isRequired: true,
-		},
-		{
-			name: "iconDrag",
-			type: "ReactElement",
-			possibleValues: [],
-			defaultValue: "BiDotsVerticalRounded",
-			description: "Icon to display as the drag handle.",
-			isRequired: false,
-		},
-		{
-			name: "iconLabel",
-			type: "string",
-			possibleValues: [],
-			defaultValue: "Drag",
-			description: "Aria label for the drag handle button.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,159 +0,0 @@
-import { useState } from "react"
-import { Link } from "react-router-dom"
-import { Drawer, Button, Text } from "../../../"
-import type {} from "../../../types"
-import type { ILibDrawer } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const links: Array<{ id: number; to: string; text: string }> = [
-	{ id: 0, text: "Link", to: "#" },
-	{ id: 1, text: "Link", to: "#" },
-	{ id: 2, text: "Link", to: "#" },
-	{ id: 3, text: "Link", to: "#" },
-	{ id: 4, text: "Link", to: "#" },
-]
-
-const Preview: FC<Omit<ILibDrawer, "isOpen" | "setIsOpen">> = props => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<>
-			<Button onClick={() => setIsOpen(true)}>
-				Open {props?.position}
-			</Button>
-
-			<Drawer isOpen={isOpen} setIsOpen={setIsOpen} {...props}>
-				{links.map(link => (
-					<Link key={link.id} to={link.to}>
-						{link.text}
-					</Link>
-				))}
-				<Text>Text</Text>
-				<button>Button</button>
-			</Drawer>
-		</>
-	)
-}
-
-export const drawerPreview: ComponentPreview<ILibDrawer> = {
-	name: "Drawer",
-	component: Drawer,
-	category: "components",
-	import: "Drawer", // import Component (ex: Skeleton)
-	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-	propsImport: "ILibDrawer", // import ILibComponent (ex: ILibAccordion)
-	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Left", demo: <Preview position="left" /> },
-		{ previewTitle: "Right", demo: <Preview position="right" /> },
-	],
-	props: [
-		{
-			name: "isOpen",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether the drawer is currently open.",
-			isRequired: true,
-		},
-		{
-			name: "setIsOpen",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to control the drawer's open/closed state.",
-			isRequired: true,
-		},
-		{
-			name: "position",
-			type: "string",
-			possibleValues: ["left", "right", "top", "bottom"],
-			defaultValue: "right",
-			description: "Position of the drawer relative to the viewport.",
-			isRequired: false,
-		},
-		{
-			name: "enableScrollingOpen",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to allow page scrolling when drawer is open.",
-			isRequired: false,
-		},
-		{
-			name: "disableEsc",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description:
-				"Whether to disable closing the drawer with the Escape key.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "primary",
-			description: "Background color for the drawer content area.",
-			isRequired: false,
-		},
-		{
-			name: "contentColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "white",
-			description: "Text color for the drawer content.",
-			isRequired: false,
-		},
-		{
-			name: "linksColor",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-				"white",
-			],
-			defaultValue: "white",
-			description: "Color for links and buttons within the drawer.",
-			isRequired: false,
-		},
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["0px", "2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: "md",
-			description: "Gap between child elements in the drawer.",
-			isRequired: false,
-		},
-		{
-			name: "maxWidth",
-			type: "string | number",
-			possibleValues: [],
-			defaultValue: "400",
-			description: "Maximum width of the drawer in pixels.",
-			isRequired: false,
-		},
-		{
-			name: "overlayColor",
-			type: "string",
-			possibleValues: "Any color or overlay from the library",
-			defaultValue: "black-80",
-			description: "Background color for the overlay behind the drawer.",
-			isRequired: false,
-		},
-		{
-			name: "hideCloseButton",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description: "Whether to hide the close button in the drawer.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,83 +0,0 @@
-import { Dropdown } from "../../../"
-import { Preview } from "./Preview"
-import type { ILibDropdown } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const dropdownPreview: ComponentPreview<ILibDropdown> = {
-	name: "Dropdown",
-	component: Dropdown,
-	category: "components",
-	import: "Dropdown",
-	additionalImports: [],
-	optionalImports: ["DropdownItem"],
-	propsImport: "ILibDropdown",
-	additionalTypeImports: ["LibDropdownItem"],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview /> },
-		{ previewTitle: "Up", demo: <Preview direction="up" /> },
-	],
-	propsTitle: "Dropdown",
-	props: [
-		{
-			name: "isOpen",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether the dropdown is currently visible.",
-			isRequired: true,
-		},
-		{
-			name: "setIsOpen",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to control the dropdown open/closed state.",
-			isRequired: true,
-		},
-		{
-			name: "direction",
-			type: "string",
-			possibleValues: ["up", "down"],
-			defaultValue: "down",
-			description:
-				"Direction for the dropdown to appear relative to its trigger.",
-			isRequired: false,
-		},
-		{
-			name: "shadow",
-			type: "string",
-			possibleValues: [
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"inner",
-				"none",
-			],
-			defaultValue: null,
-			description: "Shadow variant to apply when dropdown is open.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: ["xs", "sm", "md", "lg", "xl", "full"],
-			defaultValue: "md",
-			description: "Border radius size for the dropdown container.",
-			isRequired: false,
-		},
-		{
-			name: "items",
-			type: "Array of objects",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Array of dropdown item objects with content and click handlers.",
-			isRequired: false,
-		},
-	],
-	propsSecondTitle: "DropdownItem",
-}

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

@@ -1,52 +0,0 @@
-import { useState, type FC } from "react"
-import { Link } from "react-router-dom"
-import { BiEnvelope } from "react-icons/bi"
-import { clsx } from "../../../utils"
-import { Dropdown } from "../Dropdown"
-import { Button } from "../../Button"
-import type { ILibDropdown } from "../types"
-import type { LibDropdownItem } from "../../../types"
-
-const items: Array<LibDropdownItem> = [
-	{
-		content: "Link",
-		element: Link,
-		// @ts-ignore
-		to: "/",
-	},
-	{
-		content: "Button",
-		onClick: () => alert("Clicked"),
-	},
-	{
-		content: (
-			<>
-				<BiEnvelope />
-				Button with icon
-			</>
-		),
-		onClick: () => alert("Clicked icon"),
-	},
-	{
-		content: "Disabled",
-		disabled: true,
-		onClick: () => alert("This shouldn't work"),
-	},
-]
-
-export const Preview: FC<Partial<ILibDropdown>> = props => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<div className={clsx("relative", isOpen && "z-10")}>
-			<Button onClick={() => setIsOpen(!isOpen)}>Open dropdown</Button>
-			<Dropdown
-				{...(props as any)}
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				items={items}
-				shadow="xl"
-			/>
-		</div>
-	)
-}

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

@@ -1,33 +0,0 @@
-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: [],
-}