@julseb-lib/react 0.1.4 → 0.1.6

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

@@ -1,67 +0,0 @@
-import { Link } from "react-router-dom"
-import { Main, Text } from "../../../"
-import type { ILibMain } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const links: Array<{ text: string; url: string }> = [
-	{ text: "Main default", url: "/main/demo-default" },
-	{ text: "Main large", url: "/main/demo-large" },
-	{ text: "Main form", url: "/main/demo-form" },
-]
-
-export const mainPreview: ComponentPreview<ILibMain> = {
-	name: "Main",
-	component: Main,
-	category: "styles",
-	import: "Main",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibMain",
-	additionalTypeImports: null,
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			demo: (
-				<div className="flex flex-col gap-1">
-					{links.map((link, i) => (
-						<Text key={i}>
-							<Link
-								to={link.url}
-								target="_blank"
-								rel="noreferrer noopener"
-							>
-								{link.text}
-							</Link>
-						</Text>
-					))}
-				</div>
-			),
-		},
-	],
-	props: [
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: null,
-			description: "Spacing between children elements.",
-			isRequired: false,
-		},
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: null,
-			description: "Background color of the main container.",
-			isRequired: false,
-		},
-		{
-			name: "size",
-			type: "string",
-			possibleValues: ["default", "large", "form"],
-			defaultValue: "default",
-			description: "Size of the main container.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,34 +0,0 @@
-import { MarkdownContainer } from "../../../"
-import type { ILibMarkdownContainer } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const markdownContainerPreview: ComponentPreview<ILibMarkdownContainer> =
-	{
-		name: "Markdown Container",
-		component: MarkdownContainer,
-		category: "components",
-		import: "MarkdownContainer",
-		additionalImports: [],
-		optionalImports: [],
-		propsImport: "ILibMarkdownContainer",
-		additionalTypeImports: [],
-		extends: ["HTMLDivElement"],
-		previews: [
-			{
-				props: {
-					children:
-						"## Hello world \n\n I'm some markdown content **compiled** to *jsx*",
-				},
-			},
-		],
-		props: [
-			{
-				name: "options",
-				type: "Object",
-				possibleValues: [],
-				defaultValue: "libOptionsMarkdown",
-				description: "Markdown parsing options and configurations.",
-				isRequired: false,
-			},
-		],
-	}

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

@@ -1,143 +0,0 @@
-import { useState } from "react"
-import { BiEnvelope } from "react-icons/bi"
-import { MarkdownEditor } from "../../../"
-import type { ILibMarkdownEditor } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Preview: FC<Omit<ILibMarkdownEditor, "value" | "setValue">> = props => {
-	const [value, setValue] = useState("# Hello World\n\nHow are you?")
-
-	return <MarkdownEditor value={value} setValue={setValue} {...props} />
-}
-
-export const markdownEditorPreview: ComponentPreview<ILibMarkdownEditor> = {
-	name: "Markdown Editor",
-	component: MarkdownEditor,
-	category: "components",
-	import: "MarkdownEditor",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibMarkdownEditor",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ demo: <Preview /> },
-		{
-			previewTitle: "With dark bg",
-			demo: <Preview inputBackground="dark" label="Label" />,
-		},
-		{
-			previewTitle: "With validation",
-			demo: (
-				<Preview validation={{ status: false, message: "Message" }} />
-			),
-		},
-		{
-			previewTitle: "With icon & less buttons",
-			demo: (
-				<Preview
-					icons={{ bold: <BiEnvelope /> }}
-					options={{ italic: false }}
-				/>
-			),
-		},
-	],
-	props: [
-		{
-			name: "value",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Current markdown content value.",
-			isRequired: true,
-		},
-		{
-			name: "setValue",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to update the markdown content.",
-			isRequired: true,
-		},
-		{
-			name: "label",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Label text for the editor.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Additional comment text for the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text displayed above the editor.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text displayed below the editor.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Validation state and messages.",
-			isRequired: false,
-		},
-		{
-			name: "inputBackground",
-			type: "string",
-			possibleValues: ["light", "dark"],
-			defaultValue: null,
-			description: "Background theme for the editor.",
-			isRequired: false,
-		},
-		{
-			name: "defaultView",
-			type: "string",
-			possibleValues: ["code", "live", "preview"],
-			defaultValue: "live",
-			description: "Initial view mode for the editor.",
-			isRequired: false,
-		},
-		{
-			name: "options",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Configuration for which toolbar buttons to show.",
-			isRequired: false,
-		},
-		{
-			name: "textButtonTitles",
-			type: "string",
-			possibleValues: [],
-			defaultValue: "Titles",
-			description: "Text for the titles dropdown button.",
-			isRequired: false,
-		},
-		{
-			name: "icons",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Custom icons for toolbar buttons.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,58 +0,0 @@
-import { Masonry, Image, uuid } from "../../../"
-import type { ILibMasonry } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const images: Array<string> = [
-	"https://images.unsplash.com/photo-1636390785258-f59cd6883a03?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80",
-	"https://images.unsplash.com/photo-1647599708318-1b267bf44fd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzfGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1636390785299-b4df455163dd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80",
-	"https://images.unsplash.com/photo-1634705146926-b8fbca28f431?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80",
-	"https://images.unsplash.com/photo-1647458792028-f9b3599d4208?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1647725280666-bb7f94a15d69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1647831591495-2f9ce7dd3d1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDN8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1647831570034-51d43eac0694?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1647464884405-42bbd541bc17?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDd8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1646330685088-d8a402b0dcc2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE5fGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
-	"https://images.unsplash.com/photo-1636207543865-acf3ad382295?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
-]
-
-export const masonryPreview: ComponentPreview<ILibMasonry> = {
-	name: "Masonry",
-	component: Masonry,
-	category: "components",
-	import: "Masonry",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibMasonry",
-	additionalTypeImports: null,
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			demo: (
-				<Masonry col={3} gap="xl">
-					{images.map((image, i) => (
-						<Image src={image} alt={`Img ${i}`} key={uuid()} />
-					))}
-				</Masonry>
-			),
-		},
-	],
-	props: [
-		{
-			name: "col",
-			type: "number",
-			possibleValues: null,
-			defaultValue: "4",
-			description: "Number of columns in the masonry grid.",
-			isRequired: false,
-		},
-		{
-			name: "gap",
-			type: "string",
-			possibleValues: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"],
-			defaultValue: "lg",
-			description: "Gap between grid items.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,125 +0,0 @@
-import { useState, type FC } from "react"
-import {
-	Modal,
-	Button,
-	disableScroll,
-	Image,
-	Alert,
-	Text,
-	Flexbox,
-} from "../../../"
-import type { ILibModal } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const Preview: FC<Omit<ILibModal, "isOpen" | "setIsOpen">> = props => {
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<>
-			<Button
-				onClick={() => {
-					setIsOpen(true)
-					disableScroll()
-				}}
-			>
-				Open modal
-			</Button>
-
-			<Modal {...(props as any)} isOpen={isOpen} setIsOpen={setIsOpen} />
-		</>
-	)
-}
-
-export const modalPreview: ComponentPreview<ILibModal> = {
-	name: "Modal",
-	component: Modal,
-	category: "components",
-	import: "Modal",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibModal",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			previewTitle: "With image",
-			demo: (
-				<Preview>
-					<Image
-						src="/images/image-card.jpg"
-						alt="Img"
-						className="h-[90svh]"
-						fit="contain"
-					/>
-				</Preview>
-			),
-		},
-		{
-			previewTitle: "With alert",
-			demo: (
-				<Preview>
-					<Alert color="danger">
-						<Text>Modal text</Text>
-						<Flexbox gap="sm">
-							<Button color="danger">Button</Button>
-							<Button color="danger" variant="transparent">
-								Button
-							</Button>
-						</Flexbox>
-					</Alert>
-				</Preview>
-			),
-		},
-	],
-	props: [
-		{
-			name: "isOpen",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether the modal is currently visible.",
-			isRequired: true,
-		},
-		{
-			name: "setIsOpen",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to control the modal open/closed state.",
-			isRequired: true,
-		},
-		{
-			name: "disableEsc",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether to disable closing the modal with the Escape key.",
-			isRequired: false,
-		},
-		{
-			name: "hideCloseButton",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to hide the close button in the modal.",
-			isRequired: false,
-		},
-		{
-			name: "closeIcon",
-			type: "ReactElement",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Custom close icon for the modal.",
-			isRequired: false,
-		},
-		{
-			name: "labelClose",
-			type: "string",
-			possibleValues: [],
-			defaultValue: "Close modal",
-			description: "Aria label for the close button.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,66 +0,0 @@
-import { Link } from "react-router-dom"
-import { PageLoading, Text } from "../../../"
-import type { ILibPageLoading } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const pageLoadingPreview: ComponentPreview<ILibPageLoading> = {
-	name: "Page Loading",
-	component: PageLoading,
-	category: "components",
-	import: "PageLoading",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibPageLoading",
-	additionalTypeImports: [],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			demo: (
-				<Text>
-					<Link
-						to="/page-loading/demo"
-						target="_blank"
-						rel="noreferrer noopener"
-					>
-						Demo here
-					</Link>
-				</Text>
-			),
-		},
-	],
-	props: [
-		{
-			name: "backgroundColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "primary-500",
-			description: "Background color for the loading overlay.",
-			isRequired: false,
-		},
-		{
-			name: "loaderColor",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "white",
-			description: "Color of the loading spinner.",
-			isRequired: false,
-		},
-		{
-			name: "loaderVariant",
-			type: "number",
-			possibleValues: [1, 2, 3],
-			defaultValue: "1",
-			description: "Visual variant of the loading spinner.",
-			isRequired: false,
-		},
-		{
-			name: "stopScrolling",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: "false",
-			description:
-				"Whether to disable page scrolling while loading is visible.",
-			isRequired: false,
-		},
-	],
-}