@alepha/ui 0.13.6 → 0.13.8

package/src/core/components/form/Control.tsx

@@ -25,8 +25,10 @@ import {
   type GenericControlProps,
   parseInput,
 } from "../../utils/parseInput.ts";
+import ControlArray, { type ControlArrayProps } from "./ControlArray.tsx";
 import ControlDate from "./ControlDate.tsx";
 import ControlNumber, { type ControlNumberProps } from "./ControlNumber.tsx";
+import ControlObject, { type ControlObjectProps } from "./ControlObject.tsx";
 import ControlQueryBuilder from "./ControlQueryBuilder.tsx";
 import ControlSelect, { type ControlSelectProps } from "./ControlSelect.tsx";
 
@@ -43,6 +45,8 @@ export interface ControlProps extends GenericControlProps {
   datetime?: boolean | DateTimePickerProps;
   time?: boolean | TimeInputProps;
   query?: any; // Enable query builder mode with schema-aware autocomplete
+  object?: boolean | Partial<Omit<ControlObjectProps, "input">>; // Nested object editing
+  array?: boolean | Partial<Omit<ControlArrayProps, "input">>; // Array of items editing
   custom?: ComponentType<CustomControlProps>;
 }
 
@@ -64,17 +68,22 @@ export interface ControlProps extends GenericControlProps {
  * - DateTimePicker (for date-time format)
  * - TimeInput (for time format)
  * - QueryBuilder (for building type-safe queries with autocomplete)
+ * - ControlObject (for nested object schemas)
+ * - ControlArray (for arrays of objects)
  * - Custom component
  *
  * Automatically handles labels, descriptions, error messages, required state, and default icons.
  */
 const Control = (_props: ControlProps) => {
   const form = useFormState(_props.input, ["error"]);
-  const { inputProps, id, icon, format, schema } = parseInput(_props, form);
+
+  // Early return if input is not properly initialized
   if (!_props.input?.props) {
     return null;
   }
 
+  const { inputProps, id, icon, format, schema } = parseInput(_props, form);
+
   const props = {
     ..._props,
     ...schema.$control,
@@ -114,6 +123,56 @@ const Control = (_props: ControlProps) => {
   }
   //endregion
 
+  //region <ControlObject/>
+  // Handle nested objects with properties
+  const isObject =
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "object" &&
+    "properties" in props.input.schema;
+
+  if (props.object || isObject) {
+    const controlObjectProps =
+      typeof props.object === "object" ? props.object : {};
+    return (
+      <ControlObject
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        {...controlObjectProps}
+      />
+    );
+  }
+  //endregion
+
+  //region <ControlArray/>
+  // Handle arrays of objects (arrays of primitives are handled by ControlSelect)
+  const isArray =
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "array";
+
+  const isArrayOfObjects =
+    isArray &&
+    "items" in props.input.schema &&
+    props.input.schema.items &&
+    typeof props.input.schema.items === "object" &&
+    "properties" in props.input.schema.items;
+
+  if (props.array || isArrayOfObjects) {
+    const controlArrayProps =
+      typeof props.array === "object" ? props.array : {};
+    return (
+      <ControlArray
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        {...controlArrayProps}
+      />
+    );
+  }
+  //endregion
+
   //region <NumberInput/>
   if (
     props.number ||
@@ -170,16 +229,13 @@ const Control = (_props: ControlProps) => {
 
   //region <ControlSelect/>
   // Handle: single enum, array of enum, array of strings, or explicit select/multi/tags props
+  // Note: arrays of objects are handled by ControlArray above, this handles primitive arrays
   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";
 
-  if (isEnum || isArray || props.select) {
+  if (isEnum || (isArray && !isArrayOfObjects) || props.select) {
     const opts = typeof props.select === "object" ? props.select : {};
     return (
       <ControlSelect
@@ -195,21 +251,42 @@ const Control = (_props: ControlProps) => {
 
   //region <Switch/>
   if (
-    (props.input.schema &&
-      "type" in props.input.schema &&
-      props.input.schema.type === "boolean") ||
-    props.switch
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "boolean"
   ) {
-    const switchProps = typeof props.switch === "object" ? props.switch : {};
+    if (props.switch) {
+      const switchProps = typeof props.switch === "object" ? props.switch : {};
+
+      return (
+        <Switch
+          {...inputProps}
+          id={id}
+          color={"blue"}
+          defaultChecked={props.input.props.defaultValue}
+          {...props.input.props}
+          {...switchProps}
+        />
+      );
+    }
+
+    // by default, render as <Select/> with Yes/No/Empty options
+    const selectProps: Partial<ControlSelectProps> = {
+      loader: async () => [
+        { value: "true", label: "Yes" },
+        { value: "false", label: "No" },
+        { value: "", label: "" },
+      ],
+      ...props.input.props,
+    };
 
     return (
-      <Switch
-        {...inputProps}
-        id={id}
-        color={"blue"}
-        defaultChecked={props.input.props.defaultValue}
-        {...props.input.props}
-        {...switchProps}
+      <ControlSelect
+        input={props.input}
+        title={props.title}
+        description={props.description}
+        icon={icon}
+        {...selectProps}
       />
     );
   }

package/src/core/components/form/ControlArray.tsx

@@ -0,0 +1,377 @@
+import { useEvents } from "@alepha/react";
+import type { BaseInputField } from "@alepha/react/form";
+import {
+  ActionIcon,
+  Fieldset,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
+import { IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
+import type { TObject, TSchema } from "alepha";
+import { useRef, useState } from "react";
+import { ui } from "../../constants/ui.ts";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
+import Control, { type ControlProps } from "./Control.tsx";
+
+export interface ControlArrayProps extends GenericControlProps {
+  /**
+   * Minimum number of items allowed.
+   * @default 0
+   */
+  min?: number;
+
+  /**
+   * Maximum number of items allowed.
+   * @default Infinity
+   */
+  max?: number;
+
+  /**
+   * Label for the add button.
+   * @default "Add item"
+   */
+  addLabel?: string;
+
+  /**
+   * Number of columns for object item fields.
+   * @default 1
+   */
+  columns?: number;
+
+  /**
+   * Variant for the container.
+   * - "fieldset": Uses Mantine Fieldset with legend
+   * - "plain": No container, just renders items
+   * @default "fieldset"
+   */
+  variant?: "fieldset" | "plain";
+
+  /**
+   * Per-field control props override for object items.
+   * Keys are field names from the item schema.
+   */
+  controlProps?: Record<string, Partial<Omit<ControlProps, "input">>>;
+
+  /**
+   * Control props for primitive items.
+   */
+  itemControlProps?: Partial<Omit<ControlProps, "input">>;
+
+  /**
+   * Show drag handle for reordering.
+   * @default false
+   */
+  sortable?: boolean;
+}
+
+/**
+ * ControlArray component for editing arrays of schema items.
+ *
+ * Features:
+ * - Dynamic add/remove of items
+ * - Supports arrays of objects with nested fields
+ * - Supports arrays of primitives
+ * - Grid layout for object items
+ * - Min/max constraints
+ *
+ * @example
+ * ```tsx
+ * // For a schema like:
+ * // t.object({
+ * //   contacts: t.array(t.object({
+ * //     name: t.text(),
+ * //     email: t.text({ format: "email" }),
+ * //   }))
+ * // })
+ *
+ * <ControlArray
+ *   input={form.input.contacts}
+ *   columns={2}
+ *   addLabel="Add contact"
+ *   controlProps={{
+ *     email: { text: { placeholder: "email@example.com" } }
+ *   }}
+ * />
+ * ```
+ */
+const ControlArray = (props: ControlArrayProps) => {
+  const { inputProps } = parseInput(props, {});
+  const idCounter = useRef(0);
+
+  // Initialize items with unique keys for React
+  const [items, setItems] = useState<Array<{ key: number; value: any }>>(() => {
+    const defaultValue = props.input?.props?.defaultValue;
+    if (Array.isArray(defaultValue)) {
+      return defaultValue.map((value) => ({
+        key: idCounter.current++,
+        value,
+      }));
+    }
+    return [];
+  });
+
+  // Listen for form reset events
+  useEvents(
+    {
+      "form:reset": (event) => {
+        if (event.id === props.input?.form?.id) {
+          const defaultValue = props.input?.props?.defaultValue;
+          if (Array.isArray(defaultValue)) {
+            idCounter.current = 0;
+            setItems(
+              defaultValue.map((value) => ({
+                key: idCounter.current++,
+                value,
+              })),
+            );
+          } else {
+            setItems([]);
+          }
+        }
+      },
+    },
+    [props.input],
+  );
+
+  if (!props.input?.props) {
+    return null;
+  }
+
+  const schema = props.input.schema;
+  if (!schema || !("items" in schema)) {
+    return null;
+  }
+
+  const itemSchema = (schema as any).items as TSchema;
+  const isObjectItem = itemSchema && "properties" in itemSchema;
+  const { min = 0, max = Number.POSITIVE_INFINITY, columns = 1 } = props;
+
+  const updateFormValue = (newItems: Array<{ key: number; value: any }>) => {
+    props.input.set(newItems.map((item) => item.value));
+  };
+
+  const handleAdd = () => {
+    if (items.length >= max) return;
+
+    // Create default value based on item schema
+    let newValue: any;
+    if (isObjectItem) {
+      newValue = {};
+      // Initialize with default values from schema if available
+      const objSchema = itemSchema as TObject;
+      for (const [key, propSchema] of Object.entries(objSchema.properties)) {
+        if ("default" in propSchema) {
+          newValue[key] = propSchema.default;
+        }
+      }
+    } else {
+      newValue = "";
+    }
+
+    const newItems = [...items, { key: idCounter.current++, value: newValue }];
+    setItems(newItems);
+    updateFormValue(newItems);
+  };
+
+  const handleRemove = (index: number) => {
+    if (items.length <= min) return;
+    const newItems = items.filter((_, i) => i !== index);
+    setItems(newItems);
+    updateFormValue(newItems);
+  };
+
+  const handleItemChange = (index: number, value: any) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], value };
+    setItems(newItems);
+    updateFormValue(newItems);
+  };
+
+  const handleFieldChange = (index: number, field: string, value: any) => {
+    const newItems = [...items];
+    newItems[index] = {
+      ...newItems[index],
+      value: { ...newItems[index].value, [field]: value },
+    };
+    setItems(newItems);
+    updateFormValue(newItems);
+  };
+
+  const colSpan = 12 / columns;
+  const fieldNames = isObjectItem
+    ? Object.keys((itemSchema as TObject).properties)
+    : [];
+
+  const renderItems = () => (
+    <Stack gap="sm">
+      {items.map((item, index) => (
+        <Flex
+          key={item.key}
+          gap="sm"
+          align="flex-start"
+          p="xs"
+          bg={ui.colors.surface}
+          style={{ borderRadius: "var(--mantine-radius-sm)" }}
+        >
+          {props.sortable && (
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              style={{ cursor: "grab" }}
+            >
+              <IconGripVertical size={16} />
+            </ActionIcon>
+          )}
+
+          {isObjectItem ? (
+            <Grid style={{ flex: 1 }} gutter="sm">
+              {fieldNames.map((fieldName) => {
+                const fieldSchema = (itemSchema as TObject).properties[
+                  fieldName
+                ];
+                const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+
+                // Create a virtual InputField for the nested property
+                const virtualInput: BaseInputField = {
+                  schema: fieldSchema,
+                  props: {
+                    id: `${props.input.props.id}-${item.key}-${fieldName}`,
+                    name: `${props.input.props.name}[${index}].${fieldName}`,
+                    defaultValue: item.value?.[fieldName],
+                  },
+                  path: `${props.input.path}/${index}/${fieldName}`,
+                  required:
+                    (itemSchema as TObject).required?.includes(fieldName) ??
+                    false,
+                  form: props.input.form,
+                  set: (value: any) =>
+                    handleFieldChange(index, fieldName, value),
+                };
+
+                return (
+                  <Grid.Col key={fieldName} span={colSpan}>
+                    <Control input={virtualInput} {...fieldControlProps} />
+                  </Grid.Col>
+                );
+              })}
+            </Grid>
+          ) : (
+            <Flex style={{ flex: 1 }}>
+              <Control
+                input={
+                  {
+                    schema: itemSchema,
+                    props: {
+                      id: `${props.input.props.id}-${item.key}`,
+                      name: `${props.input.props.name}[${index}]`,
+                      defaultValue: item.value,
+                    },
+                    path: `${props.input.path}/${index}`,
+                    required: false,
+                    form: props.input.form,
+                    set: (value: any) => handleItemChange(index, value),
+                  } as BaseInputField
+                }
+                {...props.itemControlProps}
+              />
+            </Flex>
+          )}
+
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            onClick={() => handleRemove(index)}
+            disabled={items.length <= min}
+          >
+            <IconTrash size={16} />
+          </ActionIcon>
+        </Flex>
+      ))}
+
+      <UnstyledButton
+        onClick={handleAdd}
+        disabled={items.length >= max}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          padding: "8px 12px",
+          borderRadius: "var(--mantine-radius-sm)",
+          border: "1px dashed var(--mantine-color-dimmed)",
+          color: "var(--mantine-color-dimmed)",
+          fontSize: "var(--mantine-font-size-sm)",
+          cursor: items.length >= max ? "not-allowed" : "pointer",
+          opacity: items.length >= max ? 0.5 : 1,
+          transition: "all 150ms ease",
+        }}
+        onMouseEnter={(e) => {
+          if (items.length < max) {
+            e.currentTarget.style.borderColor =
+              "var(--mantine-color-blue-filled)";
+            e.currentTarget.style.color = "var(--mantine-color-blue-filled)";
+            e.currentTarget.style.background =
+              "var(--mantine-color-blue-light)";
+          }
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = "var(--mantine-color-dimmed)";
+          e.currentTarget.style.color = "var(--mantine-color-dimmed)";
+          e.currentTarget.style.background = "transparent";
+        }}
+      >
+        <IconPlus size={14} />
+        {props.addLabel ?? "Add"}
+      </UnstyledButton>
+    </Stack>
+  );
+
+  if (props.variant === "plain") {
+    return (
+      <Stack gap="xs">
+        {inputProps.label && (
+          <Text size="sm" fw={500}>
+            {inputProps.label}
+          </Text>
+        )}
+        {inputProps.description && (
+          <Text size="sm" c="dimmed">
+            {inputProps.description}
+          </Text>
+        )}
+        {renderItems()}
+        {inputProps.error && (
+          <Text size="sm" c="red">
+            {inputProps.error}
+          </Text>
+        )}
+      </Stack>
+    );
+  }
+
+  return (
+    <Fieldset legend={inputProps.label}>
+      <Stack gap="xs">
+        {inputProps.description && (
+          <Text size="sm" c="dimmed">
+            {inputProps.description}
+          </Text>
+        )}
+        {renderItems()}
+        {inputProps.error && (
+          <Text size="sm" c="red">
+            {inputProps.error}
+          </Text>
+        )}
+      </Stack>
+    </Fieldset>
+  );
+};
+
+export default ControlArray;

package/src/core/components/form/ControlObject.tsx

@@ -0,0 +1,127 @@
+import type { BaseInputField, ObjectInputField } from "@alepha/react/form";
+import { Fieldset, Grid, Stack, Text } from "@mantine/core";
+import type { TObject } from "alepha";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
+import Control, { type ControlProps } from "./Control.tsx";
+
+export interface ControlObjectProps extends GenericControlProps {
+  /**
+   * Number of columns for the grid layout.
+   * @default 1
+   */
+  columns?: number;
+
+  /**
+   * Variant for the container.
+   * - "fieldset": Uses Mantine Fieldset with legend
+   * - "plain": No container, just renders fields
+   * @default "fieldset"
+   */
+  variant?: "fieldset" | "plain";
+
+  /**
+   * Per-field control props override.
+   * Keys are field names from the schema.
+   */
+  controlProps?: Record<string, Partial<Omit<ControlProps, "input">>>;
+}
+
+/**
+ * ControlObject component for editing nested object schemas.
+ *
+ * Features:
+ * - Renders all properties of an object schema
+ * - Supports grid layout with configurable columns
+ * - Per-field customization via controlProps
+ * - Recursive support for deeply nested objects
+ *
+ * The form system provides nested InputFields under the `.items` property.
+ * For example: form.input.address.items.street
+ *
+ * @example
+ * ```tsx
+ * // For a schema like:
+ * // t.object({
+ * //   address: t.object({
+ * //     street: t.text(),
+ * //     city: t.text(),
+ * //     zip: t.text(),
+ * //   })
+ * // })
+ *
+ * <ControlObject
+ *   input={form.input.address}
+ *   columns={2}
+ *   controlProps={{
+ *     zip: { text: { maxLength: 10 } }
+ *   }}
+ * />
+ * ```
+ */
+const ControlObject = (props: ControlObjectProps) => {
+  const { inputProps } = parseInput(props, {});
+
+  if (!props.input?.props) {
+    return null;
+  }
+
+  const schema = props.input.schema as TObject;
+  if (!schema?.properties) {
+    return null;
+  }
+
+  const fieldNames = Object.keys(schema.properties);
+  const columns = props.columns ?? 1;
+  const colSpan = 12 / columns;
+
+  // The form system provides nested InputFields under .items
+  const objectInput = props.input as ObjectInputField<TObject>;
+  const nestedItems = objectInput.items as Record<string, BaseInputField>;
+
+  const renderFields = () => (
+    <Grid>
+      {fieldNames.map((fieldName) => {
+        const fieldControlProps = props.controlProps?.[fieldName] ?? {};
+
+        // Access nested InputField from .items
+        const field = nestedItems?.[fieldName];
+        if (!field) {
+          return null;
+        }
+
+        return (
+          <Grid.Col key={fieldName} span={colSpan}>
+            <Control input={field} {...fieldControlProps} />
+          </Grid.Col>
+        );
+      })}
+    </Grid>
+  );
+
+  if (props.variant === "plain") {
+    return renderFields();
+  }
+
+  return (
+    <Fieldset legend={inputProps.label}>
+      <Stack gap="xs">
+        {inputProps.description && (
+          <Text size="sm" c="dimmed">
+            {inputProps.description}
+          </Text>
+        )}
+        {renderFields()}
+        {inputProps.error && (
+          <Text size="sm" c="red">
+            {inputProps.error}
+          </Text>
+        )}
+      </Stack>
+    </Fieldset>
+  );
+};
+
+export default ControlObject;