@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -0,0 +1,130 @@
+import { type FC } from "react"
+import { InputContainer } from "../InputContainer"
+import { ColorInput } from "./templates/ColorInput"
+import { DateInput } from "./templates/DateInput"
+import { FileInput } from "./templates/FileInput"
+import { PasswordInput } from "./templates/PasswordInput"
+import { SearchInput } from "./templates/SearchInput"
+import { SelectInput } from "./templates/SelectInput"
+import { TextareaInput } from "./templates/TextareaInput"
+import { TextInput } from "./templates/TextInput"
+import { TimeInput } from "./templates/TimeInput"
+import type { LibInputType } from "../../types"
+import type { ILibInput } from "./types"
+
+const renderComponent = (props: any, type: LibInputType) => {
+	switch (type) {
+		case "color":
+			return <ColorInput type={type} {...props} />
+		case "date":
+		case "datetime-local":
+		case "week":
+		case "month":
+			return <DateInput type={type} {...props} />
+		case "file":
+			return <FileInput type={type} {...props} />
+		case "password":
+			return <PasswordInput type={type} {...props} />
+		case "search":
+			return <SearchInput type={type} {...props} />
+		case "select":
+			return <SelectInput type={type} {...props} />
+		case "textarea":
+			return <TextareaInput type={type} {...props} />
+		case "time":
+			return <TimeInput type={type} {...props} />
+		case "text":
+		case "email":
+		case "number":
+		case "tel":
+		case "url":
+		default:
+			return <TextInput type={type} {...props} />
+	}
+}
+
+// @ts-ignore
+const InputFunction: FC<ILibInput> = ({ type, ...rest }) =>
+	renderComponent(rest, type as LibInputType)
+
+/**
+ * Input component with multiple types and variants for form data collection.
+ *
+ * @component
+ *
+ * @example
+ * <Input type="text" label="Name" placeholder="Enter your name" />
+ * <Input type="email" label="Email" validation={{ status: true }} />
+ * <Input type="select" label="Country">
+ *   <option value="us">United States</option>
+ *   <option value="ca">Canada</option>
+ * </Input>
+ *
+ * @extends InputHTMLAttributes
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the input element.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {string} [props.label] - Label text to display above the input.
+ * @prop {string} [props.labelComment] - Additional comment text next to the label.
+ * @prop {string} [props.helper] - Helper text to display below the label.
+ * @prop {string} [props.helperBottom] - Helper text to display at the bottom of the input.
+ * @prop {"color" | "date" | "datetime-local" | "month" | "week" | "file" | "password" | "search" | "email" | "number" | "tel" | "text" | "url" | "time" | "select" | "textarea"} [props.type="text"] - Type of input to render.
+ * @prop {LibValidation} [props.validation] - Validation state and configuration object.
+ * @prop {string | number} [props.value] - Current value of the input.
+ * @prop {boolean | object} [props.counter] - Whether to show character counter or counter configuration.
+ * @prop {number} [props.maxLength] - Maximum number of characters allowed.
+ * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input.
+ * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input.
+ * @prop {React.ReactNode} [props.icon] - Icon element to display inside the input.
+ * @prop {string} [props.placeholder] - Placeholder text for the input.
+ * @prop {boolean} [props.disabled] - Whether the input is disabled.
+ * @prop {React.ReactNode} [props.children] - Child elements for select and textarea types.
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered Input component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input
+ */
+export const Input: FC<ILibInput> = ({
+	className,
+	ref,
+	id,
+	label,
+	labelComment,
+	helper,
+	helperBottom,
+	// @ts-ignore
+	validation,
+	value,
+	// @ts-ignore
+	counter,
+	// @ts-ignore
+	maxLength,
+	...rest
+}) => {
+	return (
+		<InputContainer
+			label={label}
+			labelComment={labelComment}
+			helper={helper}
+			helperBottom={helperBottom}
+			validation={validation}
+			value={value}
+			counter={counter as any}
+			maxLength={maxLength}
+			id={id}
+		>
+			<InputFunction
+				ref={ref}
+				value={value}
+				maxLength={maxLength as any}
+				className={className}
+				id={id}
+				// @ts-ignore
+				validation={validation as any}
+				{...rest}
+			/>
+		</InputContainer>
+	)
+}

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

@@ -0,0 +1,237 @@
+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

@@ -0,0 +1,67 @@
+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/Input/classes.ts

@@ -0,0 +1 @@
+export const INPUT_VALIDATION_CONTAINER = []

package/src/lib/components/Input/subtypes.ts

@@ -0,0 +1,173 @@
+import type {
+	InputHTMLAttributes,
+	MouseEventHandler,
+	Ref,
+	SelectHTMLAttributes,
+	TextareaHTMLAttributes,
+} from "react"
+import type { ReactChildren, ReactElement } from "../../types"
+import type {
+	ILibInputCommon,
+	ILibInputExtended,
+	ILibInputWithIcon,
+	ILibInputWithValidation,
+	ILibInputWithPrefix,
+	ILibInputWithSuffix,
+} from "../InputComponents"
+
+// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT COMPONENTS
+
+/*====================== Color ======================*/
+
+export type ILibColorInput = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputCommon &
+	ILibInputWithValidation & {
+		type: "color"
+	}
+
+/*====================== Date ======================*/
+
+export type ILibDateInput = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputCommon &
+	ILibInputWithIcon &
+	ILibInputWithValidation & {
+		type: "date" | "datetime-local" | "month" | "week"
+		iconCalendar?: ReactElement
+	}
+
+/*====================== File ======================*/
+
+export type ILibFileInput = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputCommon &
+	ILibInputWithValidation & {
+		type: "file"
+	}
+
+/*====================== Password ======================*/
+
+type ILibPasswordInputBase = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputExtended &
+	ILibInputWithIcon &
+	ILibInputWithValidation &
+	ILibInputWithPrefix & {
+		type: "password"
+	}
+
+type PasswordInputWithButtonIcon = ILibPasswordInputBase & {
+	hideButton?: false
+	button?: {
+		iconShow?: ReactElement
+		iconHide?: ReactElement
+		textShow?: never
+		textHide?: never
+	}
+}
+
+type PasswordWithButtonText = ILibPasswordInputBase & {
+	hideButton?: false
+	button?: {
+		iconShow?: never
+		iconHide?: never
+		textShow?: string
+		textHide?: string
+	}
+}
+
+type PasswordWithoutButton = ILibPasswordInputBase & {
+	hideButton?: true
+	button?: never
+}
+
+export type ILibPasswordInput =
+	| PasswordInputWithButtonIcon
+	| PasswordWithButtonText
+	| PasswordWithoutButton
+
+/*====================== Search ======================*/
+
+type ILibSearchInputBase = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputExtended &
+	ILibInputWithIcon &
+	ILibInputWithPrefix & {
+		type: "search"
+		clearSearch?: MouseEventHandler<HTMLButtonElement>
+		iconClear?: ReactElement
+	}
+
+type SearchInputShowKeys = ILibSearchInputBase & {
+	focusKeys?: Array<string>
+	showKeys?: boolean
+}
+
+type SearchInputHideKeys = ILibSearchInputBase & {
+	focusKeys?: undefined
+	showKeys?: never
+}
+
+export type ILibSearchInput = SearchInputShowKeys | SearchInputHideKeys
+
+/*====================== Select ======================*/
+
+export type ILibSelectInput = Omit<
+	SelectHTMLAttributes<HTMLSelectElement>,
+	"prefix"
+> &
+	ILibInputCommon &
+	ILibInputWithIcon &
+	ILibInputWithValidation & {
+		type: "select"
+		iconSelect?: ReactElement
+		children?: ReactChildren
+	}
+
+/*====================== Textarea ======================*/
+
+export type ILibTextareaInput = TextareaHTMLAttributes<HTMLTextAreaElement> &
+	Omit<ILibInputCommon, "inputVariant"> &
+	ILibInputWithValidation & {
+		ref?: Ref<HTMLTextAreaElement>
+		type: "textarea"
+	}
+
+/*====================== Text ======================*/
+
+export type ILibTextInput = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputExtended &
+	ILibInputWithIcon &
+	ILibInputWithValidation &
+	ILibInputWithPrefix &
+	ILibInputWithSuffix & {
+		type?: "email" | "number" | "tel" | "text" | "url" | undefined
+	}
+
+/*====================== Time ======================*/
+
+export type ILibTimeInput = Omit<
+	InputHTMLAttributes<HTMLInputElement>,
+	"prefix"
+> &
+	ILibInputCommon &
+	ILibInputWithIcon &
+	ILibInputWithValidation &
+	ILibInputWithPrefix & {
+		type: "time"
+		iconClock?: ReactElement
+	}

package/src/lib/components/Input/templates/ColorInput.tsx

@@ -0,0 +1,40 @@
+import { type FC } from "react"
+import { clsx } from "../../../utils"
+import {
+	InputValidation,
+	InputWrapper,
+	INPUT_COMMON_CLASSES,
+} from "../../InputComponents"
+import type { ILibColorInput } from "../subtypes"
+
+export const ColorInput: FC<ILibColorInput> = ({
+	className,
+	type = "color",
+	validation,
+	inputBackground,
+	inputVariant,
+	...rest
+}) => {
+	return (
+		<InputWrapper
+			className={className}
+			validation={validation}
+			inputBackground={inputBackground}
+			inputVariant={inputVariant}
+		>
+			<input
+				{...rest}
+				type={type}
+				className={clsx(
+					INPUT_COMMON_CLASSES({
+						inputBackground,
+						validationStatus: validation?.status,
+					}),
+					"input-color",
+				)}
+			/>
+
+			<InputValidation validation={validation} />
+		</InputWrapper>
+	)
+}

package/src/lib/components/Input/templates/DateInput.tsx

@@ -0,0 +1,63 @@
+import { useRef, type FC } from "react"
+import { BiCalendar } from "react-icons/bi"
+import { clsx } from "../../../utils"
+import { useMergeRefs } from "../../../hooks"
+import {
+	InputValidation,
+	InputButton,
+	InputIcon,
+	InputWrapper,
+	INPUT_COMMON_CLASSES,
+} from "../../InputComponents"
+import type { ILibDateInput } from "../subtypes"
+
+export const DateInput: FC<ILibDateInput> = ({
+	ref,
+	className,
+	type = "date",
+	validation,
+	inputBackground,
+	inputVariant,
+	icon,
+	iconCalendar = <BiCalendar size={16} />,
+	disabled,
+	...rest
+}) => {
+	const el = useRef<HTMLInputElement>(null)
+	const showPicker = () => el.current?.showPicker()
+
+	return (
+		<InputWrapper
+			className={className}
+			validation={validation}
+			inputBackground={inputBackground}
+			inputVariant={inputVariant}
+		>
+			<InputIcon
+				icon={icon}
+				inputVariant={inputVariant}
+				disabled={disabled}
+			/>
+
+			<input
+				{...rest}
+				type={type}
+				ref={useMergeRefs([ref, el])}
+				className={clsx(
+					INPUT_COMMON_CLASSES({
+						inputBackground,
+						validationStatus: validation?.status,
+					}),
+					"cursor-pointer",
+					"[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+					"input-date",
+				)}
+				disabled={disabled}
+			/>
+
+			<InputButton onClick={showPicker}>{iconCalendar}</InputButton>
+
+			<InputValidation validation={validation} />
+		</InputWrapper>
+	)
+}