@alepha/ui 0.18.2 → 0.19.0

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

@@ -19,7 +19,7 @@ import type {
   DateTimePickerProps,
   TimeInputProps,
 } from "@mantine/dates";
-import { useFormState } from "alepha/react/form";
+import { useFieldValue, useFormState } from "alepha/react/form";
 import type { ComponentType } from "react";
 import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import ControlArray, { type ControlArrayProps } from "./ControlArray.tsx";
@@ -76,6 +76,7 @@ export interface ControlProps extends GenericControlProps {
  */
 const Control = (_props: ControlProps) => {
   const form = useFormState(_props.input, ["error"]);
+  const [value, setValue] = useFieldValue(_props.input);
 
   // Early return if input is not properly initialized
   if (!_props.input?.props) {
@@ -93,12 +94,11 @@ const Control = (_props: ControlProps) => {
   if (props.query) {
     return (
       <ControlQueryBuilder
-        {...props.input.props}
         {...inputProps}
         schema={props.query}
-        value={props.input.props.value}
-        onChange={(value) => {
-          props.input.set(value);
+        value={value}
+        onChange={(val) => {
+          setValue(val);
         }}
       />
     );
@@ -112,9 +112,9 @@ const Control = (_props: ControlProps) => {
       <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);
+            value={value}
+            onChange={(val) => {
+              setValue(val);
             }}
           />
         </Flex>
@@ -137,7 +137,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlObject
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         {...controlObjectProps}
       />
@@ -165,7 +165,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlArray
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         {...controlArrayProps}
       />
@@ -176,7 +176,8 @@ const Control = (_props: ControlProps) => {
   //region <NumberInput/>
   if (
     props.number ||
-    (props.input.schema &&
+    (!props.select &&
+      props.input.schema &&
       "type" in props.input.schema &&
       (props.input.schema.type === "number" ||
         props.input.schema.type === "integer"))
@@ -190,7 +191,7 @@ const Control = (_props: ControlProps) => {
       <ControlNumber
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...controlNumberProps}
@@ -208,9 +209,7 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        onChange={(file) => {
-          props.input.set(file);
-        }}
+        onChange={(file) => setValue(file)}
         {...fileInputProps}
       />
     );
@@ -226,7 +225,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(val) => setValue(val)}
         {...colorInputProps}
       />
     );
@@ -244,13 +244,13 @@ const Control = (_props: ControlProps) => {
   if (isEnum || (isArray && !isArrayOfObjects) || props.select) {
     const opts = typeof props.select === "object" ? props.select : {};
     if (props.segmented) {
-      opts.segmented ??= {};
+      opts.segmentedProps ??= {};
     }
     return (
       <ControlSelect
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...opts}
@@ -273,9 +273,9 @@ const Control = (_props: ControlProps) => {
           size={props.size}
           id={id}
           color={"blue"}
-          defaultChecked={props.input.props.defaultValue}
+          checked={Boolean(value)}
           onChange={(event) => {
-            props.input.set(event.currentTarget.checked);
+            setValue(event.currentTarget.checked);
           }}
           {...switchProps}
         />
@@ -284,7 +284,7 @@ const Control = (_props: ControlProps) => {
 
     const opts: ControlSelectProps = {
       input: props.input,
-      select: {
+      selectProps: {
         data: [
           { value: "true", label: "Yes" },
           { value: "false", label: "No" },
@@ -295,7 +295,7 @@ const Control = (_props: ControlProps) => {
     return (
       <ControlSelect
         size={props.size}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         {...opts}
@@ -314,7 +314,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(ev) => setValue(ev.target.value)}
         {...passwordInputProps}
       />
     );
@@ -330,7 +331,8 @@ const Control = (_props: ControlProps) => {
         size={props.size}
         id={id}
         leftSection={icon}
-        {...props.input.props}
+        value={value ?? ""}
+        onChange={(ev) => setValue(ev.target.value)}
         {...textAreaProps}
       />
     );
@@ -351,7 +353,7 @@ const Control = (_props: ControlProps) => {
       <ControlDate
         size={props.size}
         input={props.input}
-        title={props.title}
+        label={props.label}
         description={props.description}
         icon={icon}
         date={props.date}
@@ -377,7 +379,7 @@ const Control = (_props: ControlProps) => {
       case "phone":
         return "tel";
       default:
-        return undefined;
+        return props.input.props.type ?? "text";
     }
   };
 
@@ -388,9 +390,9 @@ const Control = (_props: ControlProps) => {
       id={id}
       leftSection={icon}
       type={getInputType()}
-      {...props.input.props}
+      value={value ?? ""}
+      onChange={(ev) => setValue(ev.target.value)}
       {...textInputProps}
-      inputWrapperOrder={["label", "input", "description", "error"]}
     />
   );
   //endregion
@@ -399,6 +401,6 @@ const Control = (_props: ControlProps) => {
 export default Control;
 
 export type CustomControlProps = {
-  defaultValue: any;
+  value: any;
   onChange: (value: any) => void;
 };

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

@@ -88,11 +88,11 @@ const useArrayItems = (
   const alepha = useAlepha();
   const keyCounter = useRef(0);
 
-  // Initialize from defaultValue
+  // Initialize from initialValue
   const [items, setItemsState] = useState<ArrayItem[]>(() => {
-    const defaultValue = input?.props?.defaultValue;
-    if (Array.isArray(defaultValue)) {
-      return defaultValue.map((value) => ({
+    const initial = input?.initialValue;
+    if (Array.isArray(initial)) {
+      return initial.map((value) => ({
         key: keyCounter.current++,
         value,
       }));
@@ -126,46 +126,20 @@ const useArrayItems = (
     });
   }, []);
 
-  // Listen for form changes and reset events
+  // Listen for form changes
   useEffect(() => {
     if (!input?.form) return;
 
     const formId = input.form.id;
     const fieldPath = input.path;
 
-    const listeners = [
-      // Handle form reset
-      alepha.events.on("form:reset", (event) => {
-        if (event.id === formId) {
-          const defaultValue = input.props?.defaultValue;
-          keyCounter.current = 0;
-          if (Array.isArray(defaultValue)) {
-            setItemsState(
-              defaultValue.map((value) => ({
-                key: keyCounter.current++,
-                value,
-              })),
-            );
-          } else {
-            setItemsState([]);
-          }
-        }
-      }),
-
-      // Handle external value changes (e.g., programmatic updates)
-      alepha.events.on("form:change", (event) => {
-        if (event.id === formId && event.path === fieldPath) {
-          // Value was changed externally, sync our state
-          syncFromFormValue(event.value);
-        }
-      }),
-    ];
-
-    return () => {
-      for (const unsub of listeners) {
-        unsub();
+    const unsub = alepha.events.on("form:change", (event) => {
+      if (event.id === formId && event.path === fieldPath) {
+        syncFromFormValue(event.value);
       }
-    };
+    });
+
+    return unsub;
   }, [alepha, input, syncFromFormValue]);
 
   // Update form when items change
@@ -200,10 +174,10 @@ const createArrayItemInput = (
     path: `${parentInput.path}/${index}`,
     required: false,
     form: parentInput.form,
+    initialValue: value,
     props: {
       id: `${parentInput.props.id}-${index}`,
       name: `${parentInput.props.name}[${index}]`,
-      defaultValue: value,
     },
     set: onValueChange,
   };
@@ -228,10 +202,10 @@ const createArrayItemFieldInput = (
     path: `${parentInput.path}/${index}/${fieldName}`,
     required: itemSchema.required?.includes(fieldName) ?? false,
     form: parentInput.form,
+    initialValue: itemValue?.[fieldName],
     props: {
       id: `${parentInput.props.id}-${index}-${fieldName}`,
       name: `${parentInput.props.name}[${index}].${fieldName}`,
-      defaultValue: itemValue?.[fieldName],
     },
     set: (value: any) => onFieldChange(fieldName, value),
   };

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

@@ -6,7 +6,7 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
-import { useFormState } from "alepha/react/form";
+import { useFieldValue, useFormState } from "alepha/react/form";
 import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlDateProps extends GenericControlProps {
@@ -27,6 +27,7 @@ export interface ControlDateProps extends GenericControlProps {
  */
 const ControlDate = (props: ControlDateProps) => {
   const form = useFormState(props.input);
+  const [value, setValue] = useFieldValue(props.input);
   const { inputProps, id, icon, format } = parseInput(props, form);
   if (!props.input?.props) {
     return null;
@@ -41,14 +42,10 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={
-          props.input.props.defaultValue
-            ? new Date(props.input.props.defaultValue)
-            : undefined
+        value={value ? new Date(value) : null}
+        onChange={(val) =>
+          setValue(val ? new Date(val).toISOString() : undefined)
         }
-        onChange={(value) => {
-          props.input.set(value ? new Date(value).toISOString() : undefined);
-        }}
         {...dateTimePickerProps}
       />
     );
@@ -63,16 +60,10 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={
-          props.input.props.defaultValue
-            ? new Date(props.input.props.defaultValue)
-            : undefined
+        value={value ? new Date(value) : null}
+        onChange={(val) =>
+          setValue(val ? new Date(val).toISOString().slice(0, 10) : undefined)
         }
-        onChange={(value) => {
-          props.input.set(
-            value ? new Date(value).toISOString().slice(0, 10) : undefined,
-          );
-        }}
         {...dateInputProps}
       />
     );
@@ -87,10 +78,8 @@ const ControlDate = (props: ControlDateProps) => {
         {...inputProps}
         id={id}
         leftSection={icon}
-        defaultValue={props.input.props.defaultValue}
-        onChange={(event) => {
-          props.input.set(event.currentTarget.value);
-        }}
+        value={value ?? ""}
+        onChange={(event) => setValue(event.currentTarget.value)}
         {...timeInputProps}
       />
     );

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

@@ -5,9 +5,7 @@ import {
   Slider,
   type SliderProps,
 } from "@mantine/core";
-import { useEvents } from "alepha/react";
-import { useFormState } from "alepha/react/form";
-import { useRef, useState } from "react";
+import { useFieldValue, useFormState } from "alepha/react/form";
 import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlNumberProps extends GenericControlProps {
@@ -20,32 +18,13 @@ export interface ControlNumberProps extends GenericControlProps {
  */
 const ControlNumber = (props: ControlNumberProps) => {
   const form = useFormState(props.input);
+  const [value, setValue] = useFieldValue(props.input);
   const { inputProps, id, icon } = parseInput(props, form);
-  const ref = useRef<HTMLInputElement | null>(null);
-
-  // HTML Reset doesn't trigger on <NumberInput /> so we handle it manually
-
-  const [value, setValue] = useState<number | undefined>(
-    props.input.props.defaultValue,
-  );
-
-  useEvents(
-    {
-      "form:reset": (event) => {
-        if (event.id === props.input?.form.id && ref.current) {
-          setValue(props.input.props.defaultValue);
-        }
-      },
-    },
-    [props.input],
-  );
 
   if (!props.input?.props) {
     return null;
   }
 
-  const { type, ...inputPropsWithoutType } = props.input.props;
-
   if (props.sliderProps) {
     const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
     const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
@@ -59,18 +38,13 @@ const ControlNumber = (props: ControlNumberProps) => {
         >
           <Slider
             {...inputProps}
-            ref={ref}
             id={id}
-            {...inputPropsWithoutType}
             {...props.sliderProps}
-            value={value}
+            value={value ?? 0}
             min={min}
             max={max}
             label={() => value}
-            onChange={(val) => {
-              setValue(val);
-              props.input.set(val);
-            }}
+            onChange={(val) => setValue(val)}
           />
         </div>
       </Input.Wrapper>
@@ -80,16 +54,13 @@ const ControlNumber = (props: ControlNumberProps) => {
   return (
     <NumberInput
       {...inputProps}
-      ref={ref}
       id={id}
       leftSection={icon}
-      {...inputPropsWithoutType}
       {...props.numberInputProps}
       value={value ?? ""}
       onChange={(val) => {
         const newValue = val !== null ? Number(val) : undefined;
         setValue(newValue);
-        props.input.set(newValue);
       }}
     />
   );

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

@@ -1,17 +1,7 @@
-import {
-  ActionButton,
-  extractSchemaFields,
-  OPERATOR_INFO,
-  type SchemaField,
-  ui,
-} from "@alepha/ui";
+import { extractSchemaFields, ui } from "@alepha/ui";
 import {
   ActionIcon,
-  Badge,
-  Divider,
-  Flex,
   Popover,
-  Text,
   TextInput,
   type TextInputProps,
 } from "@mantine/core";
@@ -20,6 +10,7 @@ import type { TObject } from "alepha";
 import { parseQueryString } from "alepha/orm";
 import { useEvents } from "alepha/react";
 import { useRef, useState } from "react";
+import ControlQueryBuilderHelp from "./ControlQueryBuilderHelp.tsx";
 
 export interface ControlQueryBuilderProps
   extends Omit<TextInputProps, "value" | "onChange"> {
@@ -33,13 +24,15 @@ export interface ControlQueryBuilderProps
  * Query builder with text input and help popover.
  * Generates query strings for parseQueryString syntax.
  */
-const ControlQueryBuilder = ({
-  schema,
-  value = "",
-  onChange,
-  placeholder = "Enter query or click for assistance...",
-  ...textInputProps
-}: ControlQueryBuilderProps) => {
+const ControlQueryBuilder = (props: ControlQueryBuilderProps) => {
+  const {
+    schema,
+    value = "",
+    onChange,
+    placeholder = "Enter query or click for assistance...",
+    ...textInputProps
+  } = props;
+
   const [helpOpened, setHelpOpened] = useState(false);
   const [textValue, setTextValue] = useState(value);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -146,166 +139,10 @@ const ControlQueryBuilder = ({
           backdropFilter: "blur(20px)",
         }}
       >
-        <QueryHelp fields={fields} onInsert={handleInsert} />
+        <ControlQueryBuilderHelp fields={fields} onInsert={handleInsert} />
       </Popover.Dropdown>
     </Popover>
   );
 };
 
-// ---------------------------------------------------------------------------------------------------------------------
-// Query Help Component
-// ---------------------------------------------------------------------------------------------------------------------
-
-interface QueryHelpProps {
-  fields: SchemaField[];
-  onInsert: (text: string) => void;
-}
-
-function QueryHelp({ fields, onInsert }: QueryHelpProps) {
-  return (
-    <Flex
-      gap="md"
-      align="flex-start"
-      wrap="nowrap"
-      bg={ui.colors.surface}
-      p={"sm"}
-      bdrs={"sm"}
-    >
-      {/* Left Column: Operators */}
-      <Flex direction="column" gap="md" style={{ flex: 1 }}>
-        {/* Available Operators */}
-        <Flex direction="column" gap="xs">
-          <Text size="sm" fw={600}>
-            Operators
-          </Text>
-          <Flex direction="column" gap={4}>
-            {Object.entries(OPERATOR_INFO).map(([key, info]) => (
-              <Flex key={key} gap="xs" wrap="nowrap">
-                <ActionButton
-                  px={"xs"}
-                  size={"xs"}
-                  h={24}
-                  variant={"default"}
-                  justify={"center"}
-                  miw={48}
-                  onClick={() => onInsert(info.symbol)}
-                >
-                  {info.symbol}
-                </ActionButton>
-                <Text size="xs" c="dimmed" style={{ flex: 1 }}>
-                  {info.label}
-                </Text>
-              </Flex>
-            ))}
-          </Flex>
-        </Flex>
-
-        <Divider />
-
-        {/* Logic Operators */}
-        <Flex direction="column" gap="xs">
-          <Text size="sm" fw={600}>
-            Logic
-          </Text>
-          <Flex direction="column" gap={4}>
-            <Flex gap="xs" wrap="nowrap">
-              <ActionButton
-                px={"xs"}
-                size={"xs"}
-                h={24}
-                variant={"default"}
-                justify={"center"}
-                miw={48}
-                onClick={() => onInsert("&")}
-              >
-                &
-              </ActionButton>
-              <Text size="xs" c="dimmed">
-                AND
-              </Text>
-            </Flex>
-            <Flex gap="xs" wrap="nowrap">
-              <ActionButton
-                px={"xs"}
-                size={"xs"}
-                h={24}
-                variant={"default"}
-                justify={"center"}
-                miw={48}
-                onClick={() => onInsert("|")}
-              >
-                |
-              </ActionButton>
-              <Text size="xs" c="dimmed">
-                OR
-              </Text>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* Divider */}
-      {fields.length > 0 && <Divider orientation="vertical" />}
-
-      {/* Right Column: Fields */}
-      {fields.length > 0 && (
-        <Flex direction={"column"} gap="xs" style={{ flex: 2 }}>
-          <Text size="sm" fw={600}>
-            Fields
-          </Text>
-          <Flex
-            direction={"column"}
-            gap={4}
-            style={{ maxHeight: 300, overflowY: "auto" }}
-          >
-            {fields.map((field) => (
-              <Flex key={field.path} gap="xs" wrap="nowrap" align="flex-start">
-                <ActionButton
-                  px={"xs"}
-                  size={"xs"}
-                  h={24}
-                  variant={"default"}
-                  justify={"end"}
-                  miw={120}
-                  onClick={() => onInsert(field.path)}
-                >
-                  {field.path}
-                </ActionButton>
-                <Flex
-                  mt={3}
-                  direction={"column"}
-                  gap={2}
-                  style={{ flex: 1, minWidth: 0 }}
-                >
-                  <Text size="xs" c="dimmed" lineClamp={1}>
-                    {field.description || field.type}
-                  </Text>
-                  {field.enum && (
-                    <Flex gap={0} wrap="wrap">
-                      {field.enum.map((enumValue) => (
-                        <ActionButton
-                          px={"xs"}
-                          size={"xs"}
-                          h={24}
-                          key={enumValue}
-                          onClick={() => onInsert(enumValue)}
-                        >
-                          {enumValue}
-                        </ActionButton>
-                      ))}
-                    </Flex>
-                  )}
-                </Flex>
-                <Badge size="xs" variant="light" style={{ flexShrink: 0 }}>
-                  {field.type}
-                </Badge>
-              </Flex>
-            ))}
-          </Flex>
-        </Flex>
-      )}
-    </Flex>
-  );
-}
-
 export default ControlQueryBuilder;