@alepha/ui 0.10.6 → 0.11.0

package/src/components/Control.tsx

@@ -1,275 +1,290 @@
-import { TypeBoxError } from "@alepha/core";
-import { type InputField, useFormState } from "@alepha/react-form";
+import { useFormState } from "@alepha/react-form";
 import {
-	Autocomplete,
-	type AutocompleteProps,
-	Flex,
-	Input,
-	PasswordInput,
-	type PasswordInputProps,
-	SegmentedControl,
-	type SegmentedControlProps,
-	Select,
-	type SelectProps,
-	Switch,
-	type SwitchProps,
-	Textarea,
-	type TextareaProps,
-	TextInput,
-	type TextInputProps,
+  ColorInput,
+  type ColorInputProps,
+  FileInput,
+  type FileInputProps,
+  Flex,
+  Input,
+  NumberInput,
+  type NumberInputProps,
+  PasswordInput,
+  type PasswordInputProps,
+  Switch,
+  type SwitchProps,
+  Textarea,
+  type TextareaProps,
+  TextInput,
+  type TextInputProps,
 } from "@mantine/core";
-import type { ComponentType, ReactNode } from "react";
+import type {
+  DateInputProps,
+  DateTimePickerProps,
+  TimeInputProps,
+} from "@mantine/dates";
+import type { ComponentType } from "react";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+import ControlDate from "./ControlDate";
+import ControlSelect, { type ControlSelectProps } from "./ControlSelect";
 
-export interface ControlProps {
-	input: InputField;
-
-	title?: string;
-	description?: string;
-
-	icon?: ReactNode;
-
-	text?: TextInputProps;
-	area?: boolean | TextareaProps;
-	select?: boolean | SelectProps;
-	autocomplete?: boolean | AutocompleteProps;
-	password?: boolean | PasswordInputProps;
-	switch?: boolean | SwitchProps;
-	segmented?: boolean | Partial<SegmentedControlProps>;
-
-	custom?: ComponentType<CustomControlProps>;
+export interface ControlProps extends GenericControlProps {
+  text?: TextInputProps;
+  area?: boolean | TextareaProps;
+  select?: boolean | Partial<ControlSelectProps>;
+  password?: boolean | PasswordInputProps;
+  switch?: boolean | SwitchProps;
+  number?: boolean | NumberInputProps;
+  file?: boolean | FileInputProps;
+  color?: boolean | ColorInputProps;
+  date?: boolean | DateInputProps;
+  datetime?: boolean | DateTimePickerProps;
+  time?: boolean | TimeInputProps;
+  custom?: ComponentType<CustomControlProps>;
 }
 
 /**
  * Generic form control that renders the appropriate input based on the schema and props.
  *
  * Supports:
- * - TextInput
+ * - TextInput (with format detection: email, url, tel)
  * - Textarea
+ * - NumberInput (for number/integer types)
+ * - FileInput
+ * - ColorInput (for color format)
  * - Select (for enum types)
  * - Autocomplete
  * - PasswordInput
  * - Switch (for boolean types)
  * - SegmentedControl (for enum types)
+ * - DateInput (for date format)
+ * - DateTimePicker (for date-time format)
+ * - TimeInput (for time format)
  * - Custom component
  *
- * Automatically handles labels, descriptions, error messages, and required state.
+ * Automatically handles labels, descriptions, error messages, required state, and default icons.
  */
-const Control = (props: ControlProps) => {
-	const form = useFormState(props.input);
-	if (!props.input?.props) {
-		return null;
-	}
-
-	// shared props
+const Control = (_props: ControlProps) => {
+  const form = useFormState(_props.input, ["error"]);
+  const { inputProps, id, icon, format, schema } = parseInput(_props, form);
+  if (!_props.input?.props) {
+    return null;
+  }
 
-	const disabled = false; // form.loading;
-	const id = props.input.props.id;
-	const label =
-		props.title ??
-		("title" in props.input.schema &&
-		typeof props.input.schema.title === "string"
-			? props.input.schema.title
-			: undefined) ??
-		prettyName(props.input.path);
-	const description =
-		props.description ??
-		("description" in props.input.schema &&
-		typeof props.input.schema.description === "string"
-			? props.input.schema.description
-			: undefined);
-	const error =
-		form.error && form.error instanceof TypeBoxError
-			? form.error.value.message
-			: undefined;
-	const icon = props.icon;
-	const required = props.input.required;
+  const props = {
+    ..._props,
+    ...schema.$control,
+  };
 
-	const inputProps = {
-		label,
-		description,
-		error,
-		required,
-		disabled,
-	};
+  //region <Custom/>
+  if (props.custom) {
+    const Custom = props.custom;
+    return (
+      <Input.Wrapper {...inputProps}>
+        <Flex flex={1} mt={"calc(var(--mantine-spacing-xs) / 2)"}>
+          <Custom
+            defaultValue={props.input.props.defaultValue}
+            onChange={(value) => {
+              props.input.set(value);
+            }}
+          />
+        </Flex>
+      </Input.Wrapper>
+    );
+  }
+  //endregion
 
-	// -------------------------------------------------------------------------------------------------------------------
+  //region <NumberInput/>
+  if (
+    props.number ||
+    (props.input.schema &&
+      "type" in props.input.schema &&
+      (props.input.schema.type === "number" ||
+        props.input.schema.type === "integer"))
+  ) {
+    const numberInputProps =
+      typeof props.number === "object" ? props.number : {};
+    const { type, ...inputPropsWithoutType } = props.input.props;
+    return (
+      <NumberInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        {...inputPropsWithoutType}
+        {...numberInputProps}
+      />
+    );
+  }
+  //endregion
 
-	if (props.custom) {
-		const Custom = props.custom;
-		return (
-			<Input.Wrapper {...inputProps}>
-				<Flex flex={1} mt={"calc(var(--mantine-spacing-xs) / 2)"}>
-					<Custom
-						defaultValue={props.input.props.defaultValue}
-						onChange={(value) => {
-							props.input.set(value);
-						}}
-					/>
-				</Flex>
-			</Input.Wrapper>
-		);
-	}
+  //region <FileInput/>
+  if (props.file) {
+    const fileInputProps = typeof props.file === "object" ? props.file : {};
+    return (
+      <FileInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        onChange={(file) => {
+          props.input.set(file);
+        }}
+        {...fileInputProps}
+      />
+    );
+  }
+  //endregion
 
-	// region <SegmentedControl/>
-	if (props.segmented) {
-		const segmentedControlProps: Partial<SegmentedControlProps> =
-			typeof props.segmented === "object" ? props.segmented : {};
-		const data =
-			segmentedControlProps.data ??
-			(props.input.schema &&
-			"enum" in props.input.schema &&
-			Array.isArray(props.input.schema.enum)
-				? props.input.schema.enum?.map((value: string) => ({
-						value,
-						label: value,
-					}))
-				: []);
-		return (
-			<Input.Wrapper {...inputProps}>
-				<Flex mt={"calc(var(--mantine-spacing-xs) / 2)"}>
-					<SegmentedControl
-						disabled={disabled}
-						defaultValue={String(props.input.props.defaultValue)}
-						{...segmentedControlProps}
-						onChange={(value) => {
-							props.input.set(value);
-						}}
-						data={data}
-					/>
-				</Flex>
-			</Input.Wrapper>
-		);
-	}
-	// endregion
+  //region <ColorInput/>
+  if (props.color || format === "color") {
+    const colorInputProps = typeof props.color === "object" ? props.color : {};
+    return (
+      <ColorInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        {...props.input.props}
+        {...colorInputProps}
+      />
+    );
+  }
+  //endregion
 
-	// region <Autocomplete/>
-	if (props.autocomplete) {
-		const autocompleteProps =
-			typeof props.autocomplete === "object" ? props.autocomplete : {};
+  //region <ControlSelect/>
+  // Handle: single enum, array of enum, array of strings, or explicit select/multi/tags props
+  const isEnum =
+    props.input.schema &&
+    "enum" in props.input.schema &&
+    props.input.schema.enum;
+  const isArray =
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "array";
 
-		return (
-			<Autocomplete
-				{...inputProps}
-				id={id}
-				leftSection={icon}
-				{...props.input.props}
-				{...autocompleteProps}
-			/>
-		);
-	}
-	// endregion
+  if (isEnum || isArray || props.select) {
+    const opts = typeof props.select === "object" ? props.select : {};
+    return (
+      <ControlSelect
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        icon={icon}
+        {...opts}
+      />
+    );
+  }
+  //endregion
 
-	// region <Select/>
-	if (
-		(props.input.schema &&
-			"enum" in props.input.schema &&
-			props.input.schema.enum) ||
-		props.select
-	) {
-		const data =
-			props.input.schema &&
-			"enum" in props.input.schema &&
-			Array.isArray(props.input.schema.enum)
-				? props.input.schema.enum?.map((value: string) => ({
-						value,
-						label: value,
-					}))
-				: [];
+  //region <Switch/>
+  if (
+    (props.input.schema &&
+      "type" in props.input.schema &&
+      props.input.schema.type === "boolean") ||
+    props.switch
+  ) {
+    const switchProps = typeof props.switch === "object" ? props.switch : {};
 
-		const selectProps = typeof props.select === "object" ? props.select : {};
+    return (
+      <Switch
+        {...inputProps}
+        id={id}
+        color={"blue"}
+        defaultChecked={props.input.props.defaultValue}
+        {...props.input.props}
+        {...switchProps}
+      />
+    );
+  }
+  //endregion
 
-		return (
-			<Select
-				{...inputProps}
-				id={id}
-				leftSection={icon}
-				data={data}
-				{...props.input.props}
-				{...selectProps}
-			/>
-		);
-	}
-	// endregion
+  //region <PasswordInput/>
+  if (props.password || props.input.props.name?.includes("password")) {
+    const passwordInputProps =
+      typeof props.password === "object" ? props.password : {};
+    return (
+      <PasswordInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        {...props.input.props}
+        {...passwordInputProps}
+      />
+    );
+  }
+  //endregion
 
-	// region <Switch/>
+  //region <Textarea/>
+  if (props.area) {
+    const textAreaProps = typeof props.area === "object" ? props.area : {};
+    return (
+      <Textarea
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        {...props.input.props}
+        {...textAreaProps}
+      />
+    );
+  }
+  //endregion
 
-	if (
-		(props.input.schema &&
-			"type" in props.input.schema &&
-			props.input.schema.type === "boolean") ||
-		props.switch
-	) {
-		const switchProps = typeof props.switch === "object" ? props.switch : {};
+  //region <ControlDate/>
+  // Handle: date, date-time, and time formats
+  if (
+    props.date ||
+    props.datetime ||
+    props.time ||
+    format === "date" ||
+    format === "date-time" ||
+    format === "time"
+  ) {
+    return (
+      <ControlDate
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        icon={icon}
+        date={props.date}
+        datetime={props.datetime}
+        time={props.time}
+      />
+    );
+  }
+  //endregion
 
-		return (
-			<Switch
-				{...inputProps}
-				id={id}
-				color={"blue"}
-				defaultChecked={props.input.props.defaultValue}
-				{...props.input.props}
-				{...switchProps}
-			/>
-		);
-	}
-	// endregion
+  //region <TextInput/> with format detection
+  const textInputProps = typeof props.text === "object" ? props.text : {};
 
-	// region <PasswordInput/>
-	if (props.password) {
-		const passwordInputProps =
-			typeof props.password === "object" ? props.password : {};
-		return (
-			<PasswordInput
-				{...inputProps}
-				id={id}
-				leftSection={icon}
-				{...props.input.props}
-				{...passwordInputProps}
-			/>
-		);
-	}
-	//endregion
+  // Detect HTML5 input type from format
+  const getInputType = (): string | undefined => {
+    switch (format) {
+      case "email":
+        return "email";
+      case "url":
+      case "uri":
+        return "url";
+      case "tel":
+      case "phone":
+        return "tel";
+      default:
+        return undefined;
+    }
+  };
 
-	//region <Textarea/>
-	if (props.area) {
-		const textAreaProps = typeof props.area === "object" ? props.area : {};
-		return (
-			<Textarea
-				{...inputProps}
-				id={id}
-				leftSection={icon}
-				{...props.input.props}
-				{...textAreaProps}
-			/>
-		);
-	}
-	//endregion
-
-	// region <TextInput/>
-	const textInputProps = typeof props.text === "object" ? props.text : {};
-	return (
-		<TextInput
-			{...inputProps}
-			id={id}
-			leftSection={icon}
-			{...props.input.props}
-			{...textInputProps}
-		/>
-	);
-	//endregion
+  return (
+    <TextInput
+      {...inputProps}
+      id={id}
+      leftSection={icon}
+      type={getInputType()}
+      {...props.input.props}
+      {...textInputProps}
+    />
+  );
+  //endregion
 };
 
 export default Control;
 
-const prettyName = (name: string) => {
-	return capitalize(name.replaceAll("/", ""));
-};
-
-const capitalize = (str: string) => {
-	return str.charAt(0).toUpperCase() + str.slice(1);
-};
-
 export type CustomControlProps = {
-	defaultValue: any;
-	onChange: (value: any) => void;
+  defaultValue: any;
+  onChange: (value: any) => void;
 };

package/src/components/ControlDate.tsx

@@ -0,0 +1,104 @@
+import { useFormState } from "@alepha/react-form";
+import {
+  DateInput,
+  type DateInputProps,
+  DateTimePicker,
+  type DateTimePickerProps,
+  TimeInput,
+  type TimeInputProps,
+} from "@mantine/dates";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+
+export interface ControlDateProps extends GenericControlProps {
+  date?: boolean | DateInputProps;
+  datetime?: boolean | DateTimePickerProps;
+  time?: boolean | TimeInputProps;
+}
+
+/**
+ * ControlDate component for handling date, datetime, and time inputs.
+ *
+ * Features:
+ * - DateInput for date format
+ * - DateTimePicker for date-time format
+ * - TimeInput for time format
+ *
+ * Automatically detects date formats from schema and renders appropriate picker.
+ */
+const ControlDate = (props: ControlDateProps) => {
+  const form = useFormState(props.input);
+  const { inputProps, id, icon, format } = parseInput(props, form);
+  if (!props.input?.props) {
+    return null;
+  }
+
+  // region <DateTimePicker/>
+  if (props.datetime || format === "date-time") {
+    const dateTimePickerProps =
+      typeof props.datetime === "object" ? props.datetime : {};
+    return (
+      <DateTimePicker
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          props.input.props.defaultValue
+            ? new Date(props.input.props.defaultValue)
+            : undefined
+        }
+        onChange={(value) => {
+          props.input.set(value ? new Date(value).toISOString() : undefined);
+        }}
+        {...dateTimePickerProps}
+      />
+    );
+  }
+  //endregion
+
+  // region <DateInput/>
+  if (props.date || format === "date") {
+    const dateInputProps = typeof props.date === "object" ? props.date : {};
+    return (
+      <DateInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          props.input.props.defaultValue
+            ? new Date(props.input.props.defaultValue)
+            : undefined
+        }
+        onChange={(value) => {
+          props.input.set(
+            value ? new Date(value).toISOString().slice(0, 10) : undefined,
+          );
+        }}
+        {...dateInputProps}
+      />
+    );
+  }
+  //endregion
+
+  // region <TimeInput/>
+  if (props.time || format === "time") {
+    const timeInputProps = typeof props.time === "object" ? props.time : {};
+    return (
+      <TimeInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={props.input.props.defaultValue}
+        onChange={(event) => {
+          props.input.set(event.currentTarget.value);
+        }}
+        {...timeInputProps}
+      />
+    );
+  }
+  //endregion
+
+  // Fallback - shouldn't happen
+  return null;
+};
+
+export default ControlDate;