@julseb-lib/react 0.1.4 → 0.1.6

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

@@ -1,75 +0,0 @@
-import { Hr } from "../../../"
-import type { ILibHr } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const hrPreview: ComponentPreview<ILibHr> = {
-	name: "Hr",
-	component: Hr,
-	category: "components",
-	import: "Hr",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibHr",
-	additionalTypeImports: null,
-	extends: ["HTMLHrElement"],
-	previews: [
-		{ previewTitle: "Default", props: {} },
-		{
-			previewTitle: "Rounded",
-			props: { isRounded: true, className: "h-1" },
-		},
-	],
-	props: [
-		{
-			name: "maxWidth",
-			type: "string",
-			possibleValues: [
-				"3xs",
-				"2xs",
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"4xl",
-				"5xl",
-				"6xl",
-				"7xl",
-				"none",
-				"px",
-				"full",
-				"dvw",
-				"dvh",
-				"lvw",
-				"lvh",
-				"svw",
-				"svh",
-				"screen",
-				"min",
-				"max",
-				"fit",
-			],
-			defaultValue: "full",
-			description: "Maximum width of the hr.",
-			isRequired: false,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: null,
-			defaultValue: "gray-200",
-			description: "Background color of the hr.",
-			isRequired: false,
-		},
-		{
-			name: "isRounded",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "If true, the hr will have fully rounded borders.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,55 +0,0 @@
-import { Link } from "react-router-dom"
-import { IconMenu } from "../../../"
-import type { LibIconMenuItem } from "../../../types"
-import type { ILibIconMenu } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-import { BiShow, BiLink, BiLinkExternal } from "react-icons/bi"
-
-const items: Array<LibIconMenuItem> = [
-	{
-		icon: <BiLink size={24} />,
-		label: "Link",
-		element: Link,
-		// @ts-ignore
-		to: "/",
-	},
-	{
-		icon: <BiLinkExternal size={24} />,
-		label: "Href",
-		element: "a",
-		// @ts-ignore
-		href: "#",
-	},
-	{
-		icon: <BiShow size={24} />,
-		onClick: () => alert("Clicked"),
-		label: "onClick",
-	},
-]
-
-export const iconMenuPreview: ComponentPreview<ILibIconMenu> = {
-	name: "Icon Menu",
-	component: IconMenu,
-	category: "components",
-	import: "IconMenu", // import Component (ex: Skeleton)
-	additionalImports: [], // import OtherComponent (ex: SkeletonCard)
-	optionalImports: [], // import ComponentItem (ex: AccordionItem) => to build with children instead of prop on component
-	propsImport: "ILibIconMenu", // import ILibComponent (ex: ILibAccordion)
-	additionalTypeImports: [], // import LibComponentItem (ex: LibAccordionItem)
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", props: { items } },
-		{
-			previewTitle: "Left",
-			props: {
-				items,
-				direction: "left",
-				iconOpen: "burger",
-				// color: "secondary",
-			},
-		},
-		{ previewTitle: "Up", props: { items, direction: "up" } },
-		{ previewTitle: "Down", props: { items, direction: "down" } },
-	],
-	props: [],
-}

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

@@ -1,71 +0,0 @@
-import { Image } from "../../../"
-import type { ILibImage } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const IMG_SRC = "/images/image-card.jpg"
-const IMG_ALT = "Image"
-
-export const imagePreview: ComponentPreview<ILibImage> = {
-	name: "Image",
-	component: Image,
-	category: "components",
-	import: "Image",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibImage",
-	additionalTypeImports: null,
-	extends: ["HTMLImgElement"],
-	previews: [
-		{ previewTitle: "Default", props: { src: IMG_SRC, alt: IMG_ALT } },
-		{
-			previewTitle: "With border radius",
-			props: { src: IMG_SRC, alt: IMG_ALT, borderRadius: "2xl" },
-		},
-		{
-			previewTitle: "With caption",
-			props: {
-				src: IMG_SRC,
-				alt: IMG_ALT,
-				caption: "Caption",
-				borderRadius: "md",
-			},
-		},
-	],
-	props: [
-		{
-			name: "caption",
-			type: "string | Object",
-			possibleValues: null,
-			defaultValue: null,
-			description:
-				"Caption for the image. Can be a string or an object with text and optional styling.",
-			isRequired: false,
-		},
-		{
-			name: "borderRadius",
-			type: "string",
-			possibleValues: [
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"3xl",
-				"4xl",
-				"full",
-			],
-			defaultValue: null,
-			description: "Border radius for the image or figure.",
-			isRequired: false,
-		},
-		{
-			name: "fit",
-			type: "string",
-			possibleValues: ["contain", "cover", "fill", "none", "scale-down"],
-			defaultValue: null,
-			description: "How the image should fit within its container.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,237 +0,0 @@
-import { BiEnvelope } from "react-icons/bi"
-import { Input } from "../../../"
-import { PreviewWithValidation, PreviewFull, PreviewSearch } from "./Previews"
-import type { ILibInput } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const inputPreview: ComponentPreview<ILibInput> = {
-	name: "Input",
-	component: Input,
-	category: "components",
-	import: "Input",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibInput",
-	additionalTypeImports: null,
-	extends: ["HTMLInputElement"],
-	previews: [
-		{ previewTitle: "Full", demo: <PreviewFull /> },
-		{ previewTitle: "Color", props: { type: "color" } },
-		{ previewTitle: "Date", props: { type: "date" } },
-		{ previewTitle: "Datetime local", props: { type: "datetime-local" } },
-		{ previewTitle: "Month", props: { type: "month" } },
-		{ previewTitle: "Week", props: { type: "week" } },
-		{ previewTitle: "File", props: { type: "file" } },
-		{ previewTitle: "Password", props: { type: "password" } },
-		{ previewTitle: "Search", demo: <PreviewSearch /> },
-		{
-			previewTitle: "Search with focus keys",
-			demo: <PreviewSearch focusKeys={["Command", "KeyJ"]} showKeys />,
-		},
-		{
-			previewTitle: "Select",
-			props: {
-				type: "select",
-				children: (
-					<>
-						<option value="">Option</option>
-						<option value="">Option</option>
-						<option value="">Option</option>
-					</>
-				),
-			},
-		},
-		{
-			previewTitle: "Textarea",
-			props: { type: "textarea", label: "Textarea" },
-		},
-		{
-			previewTitle: "Text",
-			props: { type: "text", placeholder: "Input text" },
-		},
-		{ previewTitle: "Email", props: { type: "email" } },
-		{ previewTitle: "Number", props: { type: "number" } },
-		{ previewTitle: "Tel", props: { type: "tel" } },
-		{ previewTitle: "Url", props: { type: "url" } },
-		{ previewTitle: "Time", props: { type: "time" } },
-		{ previewTitle: "Disabled", props: { disabled: true, value: "Hello" } },
-		{
-			previewTitle: "Disabled with icon",
-			props: {
-				disabled: true,
-				value: "Hello",
-				icon: <BiEnvelope size={20} />,
-			},
-		},
-		{
-			previewTitle: "With icon",
-			props: { icon: <BiEnvelope size={20} /> },
-		},
-		{ previewTitle: "With validation", demo: <PreviewWithValidation /> },
-		{
-			previewTitle: "With background light",
-			props: { inputBackground: "light" },
-		},
-		{
-			previewTitle: "With background dark",
-			props: { inputBackground: "dark" },
-		},
-		{ previewTitle: "Pill", props: { inputVariant: "pill" } },
-		{
-			previewTitle: "Pill with icon",
-			props: { inputVariant: "pill", icon: <BiEnvelope size={20} /> },
-		},
-		{
-			previewTitle: "Pill with prefix & suffix",
-			props: { inputVariant: "pill", prefix: "Prefix", suffix: "Suffix" },
-		},
-	],
-	props: [
-		{
-			name: "type",
-			type: "string",
-			possibleValues: [
-				"color",
-				"date",
-				"datetime-local",
-				"month",
-				"week",
-				"file",
-				"password",
-				"search",
-				"email",
-				"number",
-				"tel",
-				"text",
-				"url",
-				"time",
-				"select",
-				"textarea",
-			],
-			defaultValue: "text",
-			description: "Type of input to render.",
-			isRequired: false,
-		},
-		{
-			name: "label",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Label text to display above the input.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Additional comment text next to the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Helper text to display below the label.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Helper text to display at the bottom of the input.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Validation state and configuration object.",
-			isRequired: false,
-		},
-		{
-			name: "value",
-			type: "string | number",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Current value of the input.",
-			isRequired: false,
-		},
-		{
-			name: "counter",
-			type: "boolean | Object",
-			possibleValues: null,
-			defaultValue: null,
-			description:
-				"Whether to show character counter or counter configuration.",
-			isRequired: false,
-		},
-		{
-			name: "maxLength",
-			type: "number",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Maximum number of characters allowed.",
-			isRequired: false,
-		},
-		{
-			name: "inputVariant",
-			type: "string",
-			possibleValues: ["rounded", "pill"],
-			defaultValue: "rounded",
-			description: "Visual variant of the input.",
-			isRequired: false,
-		},
-		{
-			name: "inputBackground",
-			type: "string",
-			possibleValues: ["light", "dark"],
-			defaultValue: null,
-			description: "Background theme of the input.",
-			isRequired: false,
-		},
-		{
-			name: "icon",
-			type: "ReactElement",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Icon element to display inside the input.",
-			isRequired: false,
-		},
-		{
-			name: "placeholder",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Placeholder text for the input.",
-			isRequired: false,
-		},
-		{
-			name: "disabled",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Whether the input is disabled.",
-			isRequired: false,
-		},
-		{
-			name: "prefix",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Text to display as a prefix inside the input.",
-			isRequired: false,
-		},
-		{
-			name: "suffix",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Text to display as a suffix inside the input.",
-			isRequired: false,
-		},
-	],
-}

package/src/lib/components/Input/__preview__/Previews.tsx

@@ -1,67 +0,0 @@
-import { useState, type ChangeEvent } from "react"
-import { Input } from "../Input"
-import { BiEnvelope } from "react-icons/bi"
-
-export const PreviewFull = () => {
-	const [value, setValue] = useState("hello")
-
-	return (
-		<Input
-			label="Label"
-			labelComment="- label comment"
-			helper="Helper"
-			helperBottom="Helper bottom"
-			counter
-			maxLength={100}
-			prefix="Prefix"
-			suffix="Suffix"
-			placeholder="Placeholder"
-			icon={<BiEnvelope />}
-			value={value}
-			onChange={e => setValue(e.target.value)}
-		/>
-	)
-}
-
-export const PreviewWithValidation = () => {
-	const [value, setValue] = useState("")
-	const [validation, setValidation] = useState(false)
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-		const { value } = e.target
-
-		setValue(value)
-
-		if (value.length < 3) setValidation(false)
-		else setValidation(true)
-	}
-
-	return (
-		<Input
-			value={value}
-			onChange={handleChange}
-			validation={{ status: validation, message: "Message" }}
-		/>
-	)
-}
-
-export const PreviewSearch = ({
-	focusKeys,
-	showKeys,
-}: {
-	focusKeys?: Array<string>
-	showKeys?: boolean
-}) => {
-	const [value, setValue] = useState("")
-
-	return (
-		<Input
-			type="search"
-			focusKeys={focusKeys}
-			showKeys={showKeys}
-			value={value}
-			onChange={e => setValue(e.target.value)}
-			clearSearch={() => setValue("")}
-		/>
-	)
-}

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

@@ -1,84 +0,0 @@
-import { InputCheck } from "../../../"
-import { DemoCheckbox, DemoRadio } from "./Previews"
-import type { ILibInputCheck } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const inputCheckPreview: ComponentPreview<ILibInputCheck> = {
-	name: "Input Check",
-	component: InputCheck,
-	category: "components",
-	import: "InputCheck",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibInputCheck",
-	additionalTypeImports: [],
-	extends: ["HTMLInputElement"],
-	previews: [
-		{
-			previewTitle: "Checkbox",
-			demo: <DemoCheckbox />,
-		},
-		{
-			previewTitle: "Radio",
-			demo: <DemoRadio />,
-		},
-		{
-			previewTitle: "Checkbox tile",
-			demo: <DemoCheckbox variant="tile" />,
-		},
-		{
-			previewTitle: "Radio tile",
-			demo: <DemoRadio variant="tile" />,
-		},
-		{
-			previewTitle: "Checkbox toggle",
-			demo: <DemoCheckbox variant="toggle">Toggle</DemoCheckbox>,
-		},
-		{
-			previewTitle: "Checkbox selector",
-			demo: <DemoCheckbox variant="selector">Selector</DemoCheckbox>,
-		},
-	],
-	props: [
-		{
-			name: "id",
-			type: "string",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Unique identifier for the input element.",
-			isRequired: true,
-		},
-		{
-			name: "type",
-			type: "string",
-			possibleValues: ["checkbox", "radio"],
-			defaultValue: "checkbox",
-			description: "Type of input check to render.",
-			isRequired: false,
-		},
-		{
-			name: "variant",
-			type: "string",
-			possibleValues: ["tile", "toggle", "selector"],
-			defaultValue: null,
-			description: "Visual variant style of the input check.",
-			isRequired: false,
-		},
-		{
-			name: "iconCheck",
-			type: "ReactElement",
-			possibleValues: null,
-			defaultValue: "BiCheck",
-			description: "Icon element to display in checkbox variant.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "Validation state for error styling.",
-			isRequired: false,
-		},
-	],
-}