@alepha/ui 0.18.1 → 0.18.3

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;

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

@@ -0,0 +1,165 @@
+import { ActionButton, OPERATOR_INFO, type SchemaField, ui } from "@alepha/ui";
+import { Badge, Divider, Flex, Text } from "@mantine/core";
+
+export interface ControlQueryBuilderHelpProps {
+  /**
+   * Schema fields to display
+   */
+  fields: SchemaField[];
+
+  /**
+   * Callback when a text snippet is inserted
+   */
+  onInsert: (text: string) => void;
+}
+
+const ControlQueryBuilderHelp = (props: ControlQueryBuilderHelpProps) => {
+  const { fields, onInsert } = props;
+
+  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 ControlQueryBuilderHelp;