@julseb-lib/react 0.1.5 → 0.1.7

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

@@ -1,154 +0,0 @@
-import { useState, type FC, type FormEvent } from "react"
-import { InputPin } from "../../../"
-import type { LibValueInputPin } from "../../../types"
-import type { ILibInputPin } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const initialState = { 0: "", 1: "", 2: "", 3: "" }
-
-const Preview: FC<Partial<ILibInputPin>> = props => {
-	const [values, setValues] = useState<LibValueInputPin>(initialState as any)
-	const [validation, setValidation] = useState<undefined | boolean>(undefined)
-
-	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault()
-
-		if (Object.values(values).filter(v => v === "").length) {
-			setValidation(false)
-			return
-		} else {
-			setValidation(undefined)
-			alert(`Pin: ${Object.values(values).join("")}`)
-			setValues(initialState as any)
-			return
-		}
-	}
-
-	return (
-		<form onSubmit={handleSubmit}>
-			<InputPin
-				{...props}
-				values={values}
-				setValues={setValues}
-				validation={
-					validation !== undefined
-						? {
-								status: validation,
-								message: "All inputs are required.",
-							}
-						: undefined
-				}
-			/>
-			<button type="submit">Submit</button>
-		</form>
-	)
-}
-
-export const inputPinPreview: ComponentPreview<ILibInputPin> = {
-	name: "Input Pin",
-	component: InputPin,
-	category: "components",
-	import: "InputPin",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibInputPin",
-	additionalTypeImports: ["LibValueInputPin"],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview label="Pin" /> },
-		{ previewTitle: "Hidden", demo: <Preview hideValues /> },
-		{ previewTitle: "Disabled", demo: <Preview disabled /> },
-		{
-			previewTitle: "Background light",
-			demo: <Preview inputBackground="light" />,
-		},
-		{
-			previewTitle: "Background dark",
-			demo: <Preview inputBackground="dark" />,
-		},
-	],
-	props: [
-		{
-			name: "values",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Object containing the current values for each pin input field.",
-			isRequired: true,
-		},
-		{
-			name: "setValues",
-			type: "function",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Function to update the pin input values.",
-			isRequired: true,
-		},
-		{
-			name: "label",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Label text to display above the pin inputs.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Additional comment text next to the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display below the label.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Helper text to display at the bottom of the pin inputs.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Validation state and configuration object.",
-			isRequired: false,
-		},
-		{
-			name: "placeholders",
-			type: "Array<string>",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Array of placeholder texts for each pin input field.",
-			isRequired: false,
-		},
-		{
-			name: "hideValues",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to hide the input values (password mode).",
-			isRequired: false,
-		},
-		{
-			name: "inputBackground",
-			type: "string",
-			possibleValues: ["light", "dark"],
-			defaultValue: "light",
-			description: "Background theme of the input fields.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,128 +0,0 @@
-import { InputSlider } from "../../../"
-import { Preview } from "./Preview"
-import type { ILibInputSlider } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const inputSliderPreview: ComponentPreview<ILibInputSlider> = {
-	name: "Input Slider",
-	component: InputSlider,
-	category: "components",
-	import: "InputSlider",
-	additionalImports: [],
-	optionalImports: [],
-	propsImport: "ILibInputSlider",
-	additionalTypeImports: [],
-	extends: ["HTMLInputElement"],
-	previews: [
-		{ previewTitle: "Default", demo: <Preview /> },
-		{
-			previewTitle: "With min max & value",
-			demo: <Preview showMinMax showValue="always" />,
-		},
-		{
-			previewTitle: "Show value hover",
-			demo: <Preview showValue="hover" />,
-		},
-		{
-			previewTitle: "With validation",
-			demo: (
-				<Preview
-					showValue="always"
-					validation={{ status: false, message: "Message" }}
-				/>
-			),
-		},
-		{
-			previewTitle: "With validation",
-			demo: (
-				<Preview
-					showValue="always"
-					validation={{ status: true, message: "Message" }}
-				/>
-			),
-		},
-	],
-	props: [
-		{
-			name: "label",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Label text to display above the slider.",
-			isRequired: false,
-		},
-		{
-			name: "labelComment",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Additional comment text next to the label.",
-			isRequired: false,
-		},
-		{
-			name: "helper",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display below the label.",
-			isRequired: false,
-		},
-		{
-			name: "helperBottom",
-			type: "string",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Helper text to display at the bottom of the slider.",
-			isRequired: false,
-		},
-		{
-			name: "validation",
-			type: "Object",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Validation state and configuration object.",
-			isRequired: false,
-		},
-		{
-			name: "showMinMax",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether to display min and max values on the sides of the slider.",
-			isRequired: false,
-		},
-		{
-			name: "showValue",
-			type: "string",
-			possibleValues: ["never", "always", "hover"],
-			defaultValue: "never",
-			description: "When to show the current value tooltip.",
-			isRequired: false,
-		},
-		{
-			name: "min",
-			type: "number",
-			possibleValues: [],
-			defaultValue: "0",
-			description: "Minimum value for the slider range.",
-			isRequired: false,
-		},
-		{
-			name: "max",
-			type: "number",
-			possibleValues: [],
-			defaultValue: "100",
-			description: "Maximum value for the slider range.",
-			isRequired: false,
-		},
-		{
-			name: "value",
-			type: "number",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Current value of the slider.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,17 +0,0 @@
-import { useState, type FC, type ChangeEvent } from "react"
-import { InputSlider } from "../InputSlider"
-import type { ILibInputSlider } from "../types"
-
-export const Preview: FC<ILibInputSlider> = props => {
-	const [value, setValue] = useState(50)
-
-	return (
-		<InputSlider
-			{...props}
-			value={value}
-			onChange={(e: ChangeEvent<HTMLInputElement>) =>
-				setValue(Number(e.target.value))
-			}
-		/>
-	)
-}

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

@@ -1,80 +0,0 @@
-import { designTokens, Key, capitalize } from "../../../"
-import type { LibKeySize } from "../../../types"
-import type { ILibKey } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const children = "⌘K"
-const sizes: Array<LibKeySize> = Object.keys(
-	designTokens.libKeySizes,
-) as Array<LibKeySize>
-
-export const keyPreview: ComponentPreview<ILibKey> = {
-	name: "Key",
-	component: Key,
-	category: "components",
-	import: "Key",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibKey",
-	additionalTypeImports: null,
-	extends: ["HTMLSpanElement"],
-	previews: [
-		...sizes.map(size => ({
-			previewTitle: capitalize(size),
-			props: {
-				children,
-				size,
-			},
-		})),
-		...sizes.map(size => ({
-			previewTitle: `${capitalize(size)} with separator`,
-			props: {
-				children,
-				size,
-				withSeparator: true,
-			},
-		})),
-	],
-	props: [
-		{
-			name: "keys",
-			type: "Array<string>",
-			possibleValues: null,
-			defaultValue: null,
-			description: "The list of keys to display.",
-			isRequired: true,
-		},
-		{
-			name: "withSeparator",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "If true, displays a separator between keys.",
-			isRequired: false,
-		},
-		{
-			name: "size",
-			type: "string",
-			possibleValues: ["default", "large", "form"],
-			defaultValue: null,
-			description: "The size of the key component.",
-			isRequired: false,
-		},
-		{
-			name: "accentColor",
-			type: "string",
-			possibleValues: [
-				"primary",
-				"secondary",
-				"success",
-				"danger",
-				"warning",
-				"gray",
-			],
-			defaultValue: null,
-			description:
-				"Accent color for the key, excluding black, white, transparent, background, and current.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,33 +0,0 @@
-import { Linkify } from "../../../"
-import type { ILibLinkify } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const linkifyPreview: ComponentPreview<ILibLinkify> = {
-	name: "Linkify",
-	component: Linkify,
-	category: "components",
-	import: "Linkify",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibLinkify",
-	additionalTypeImports: null,
-	extends: ["HTMLHeadingElement"],
-	previews: [
-		{
-			props: {
-				children: "Hello world https://julien-sebag.com/ foo baz",
-				blank: true,
-			},
-		},
-	],
-	props: [
-		{
-			name: "blank",
-			type: "boolean",
-			possibleValues: null,
-			defaultValue: null,
-			description: "If true, links open in a new tab.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,246 +0,0 @@
-import { Link } from "react-router-dom"
-import { BiStar } from "react-icons/bi"
-import { ListGroup, convertDateShort, Badge, Text } from "../../../"
-import type { LibListGroupItem } from "../../../types"
-import type { ILibListGroup } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-const items: Array<LibListGroupItem> = [
-	{
-		title: "Basic item",
-	},
-	{
-		title: "With text",
-		body: "And body",
-	},
-	{
-		title: "With badge and number",
-		contentRight: (
-			<Badge color="danger" className="px-2">
-				350
-			</Badge>
-		),
-	},
-	{
-		title: "With badge and icon",
-		contentRight: (
-			<Badge color="success">
-				<BiStar />
-			</Badge>
-		),
-		className: "bg-danger-500",
-	},
-	{
-		title: "With color badge",
-		contentRight: <Badge color="warning" />,
-	},
-	{
-		title: "Router link",
-		contentRight: (
-			<Text tag="small" color="gray">
-				{convertDateShort("2022-09-07")}
-			</Text>
-		),
-		body: "Body",
-		element: Link,
-		// @ts-ignore
-		to: "/",
-	},
-	{
-		title: "Anchor link",
-		contentRight: (
-			<Text tag="small" color="gray">
-				{convertDateShort("2022-09-07")}
-			</Text>
-		),
-		body: "Body",
-		element: "a",
-		// @ts-ignore
-		href: "#",
-	},
-	{
-		title: "Button",
-		contentRight: (
-			<Text tag="small" color="gray">
-				{convertDateShort("2022-09-07")}
-			</Text>
-		),
-		body: "Body",
-		element: "button",
-		// @ts-ignore
-		onClick: () => alert("Clicked!"),
-	},
-	{
-		title: "Button disabled",
-		contentRight: (
-			<Text tag="small" color="gray">
-				{convertDateShort("2022-09-07")}
-			</Text>
-		),
-		element: "button",
-		// @ts-ignore
-		onClick: () => alert("Clicked!"),
-		// @ts-ignore
-		disabled: true,
-	},
-]
-
-export const listGroupPreview: ComponentPreview<ILibListGroup> = {
-	name: "List Group",
-	component: ListGroup,
-	category: "components",
-	import: "ListGroup",
-	additionalImports: [],
-	optionalImports: ["ListGroupTitle", "ListGroupItem"],
-	propsImport: "ILibListGroup",
-	additionalTypeImports: ["LibListGroupItem"],
-	extends: ["HTMLDivElement"],
-	previews: [
-		{
-			previewTitle: "Default",
-			props: { items, title: "Hello World", showNumbers: true },
-		},
-		{
-			previewTitle: "With max height",
-			props: {
-				items,
-				title: {
-					text: "Title",
-					isFixed: true,
-					shadowOnScroll: "lg",
-					className: "bg-black",
-				},
-				className: "max-h-[300px]",
-				noSeparator: true,
-			},
-		},
-	],
-	propsTitle: "ListGroup",
-	props: [
-		{
-			name: "title",
-			type: "string | Object",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Title text or configuration object for the list group header.",
-			isRequired: false,
-		},
-		{
-			name: "noSeparator",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to hide separators between list items.",
-			isRequired: false,
-		},
-		{
-			name: "showNumbers",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to display numbers next to each list item.",
-			isRequired: false,
-		},
-		{
-			name: "items",
-			type: "Array of objects",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Array of item objects to render as list items.",
-			isRequired: false,
-		},
-	],
-	propsSecondTitle: "ListGroupTitle",
-	propsSecond: [
-		{
-			name: "isFixed",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether the title should be sticky positioned at the top.",
-			isRequired: false,
-		},
-		{
-			name: "noSeparator",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Whether to hide the bottom border separator.",
-			isRequired: false,
-		},
-		{
-			name: "shadow",
-			type: "string",
-			possibleValues: [
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl",
-				"2xl",
-				"inner",
-				"none",
-			],
-			defaultValue: null,
-			description: "Shadow variant to apply when scrolled.",
-			isRequired: false,
-		},
-		{
-			name: "listRef",
-			type: "Ref",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Ref to the scrollable list container for scroll detection.",
-			isRequired: false,
-		},
-	],
-	propsThirdTitle: "ListGroupItem",
-	propsThird: [
-		{
-			name: "title",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Title text to display for the list item.",
-			isRequired: true,
-		},
-		{
-			name: "body",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: null,
-			description: "Body text or description to display below the title.",
-			isRequired: false,
-		},
-		{
-			name: "contentRight",
-			type: "ReactNode",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Content to display on the right side of the list item.",
-			isRequired: false,
-		},
-		{
-			name: "noSeparator",
-			type: "boolean",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Whether to hide the separator border between list items.",
-			isRequired: false,
-		},
-		{
-			name: "number",
-			type: "number",
-			possibleValues: [],
-			defaultValue: null,
-			description:
-				"Number to display before the title when using numbered lists.",
-			isRequired: false,
-		},
-	],
-}

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

@@ -1,38 +0,0 @@
-import { Loader } from "../../../"
-import type { ILibLoader } from "../../../types/components-props"
-import type { ComponentPreview } from "../../../../data/components"
-
-export const loaderPreview: ComponentPreview<ILibLoader> = {
-	name: "Loader",
-	component: Loader,
-	category: "components",
-	import: "Loader",
-	additionalImports: null,
-	optionalImports: null,
-	propsImport: "ILibLoader",
-	additionalTypeImports: null,
-	extends: ["HTMLSpanElement"],
-	previews: [
-		{ previewTitle: "Default", props: {} },
-		{ previewTitle: "Variant 2", props: { variant: 2 } },
-		{ previewTitle: "Variant 3", props: { variant: 3 } },
-	],
-	props: [
-		{
-			name: "variant",
-			type: "number",
-			possibleValues: ["1", "2", "3"],
-			defaultValue: "1",
-			description: "Loader variant style.",
-			isRequired: false,
-		},
-		{
-			name: "color",
-			type: "string",
-			possibleValues: "Any color from the library",
-			defaultValue: "primary",
-			description: "Loader color.",
-			isRequired: false,
-		},
-	],
-}