@alepha/ui 0.11.6 → 0.11.9

package/src/components/form/ControlQueryBuilder.tsx

@@ -1,9 +1,11 @@
 import type { TObject } from "@alepha/core";
+import { parseQueryString } from "@alepha/postgres";
+import { useEvents } from "@alepha/react";
 import {
   ActionIcon,
   Badge,
-  Code,
   Divider,
+  Flex,
   Group,
   Popover,
   Stack,
@@ -11,13 +13,15 @@ import {
   TextInput,
   type TextInputProps,
 } from "@mantine/core";
-import { IconFilter, IconX } from "@tabler/icons-react";
+import { IconFilter, IconInfoTriangle, IconX } from "@tabler/icons-react";
 import { useRef, useState } from "react";
+import { ui } from "../../constants/ui.ts";
 import {
   extractSchemaFields,
   OPERATOR_INFO,
   type SchemaField,
 } from "../../utils/extractSchemaFields.ts";
+import ActionButton from "../buttons/ActionButton.tsx";
 
 export interface ControlQueryBuilderProps
   extends Omit<TextInputProps, "value" | "onChange"> {
@@ -35,34 +39,67 @@ const ControlQueryBuilder = ({
   schema,
   value = "",
   onChange,
-  placeholder = "Enter query or click help for assistance...",
+  placeholder = "Enter query or click for assistance...",
   ...textInputProps
 }: ControlQueryBuilderProps) => {
   const [helpOpened, setHelpOpened] = useState(false);
   const [textValue, setTextValue] = useState(value);
   const inputRef = useRef<HTMLInputElement>(null);
   const fields = schema ? extractSchemaFields(schema) : [];
+  const [error, setError] = useState<string | null>(null);
+
+  const isValid = (value: string) => {
+    try {
+      parseQueryString(value.trim());
+    } catch (e) {
+      setError((e as Error).message);
+      return false;
+    }
+    setError(null);
+    return true;
+  };
 
   const handleTextChange = (newValue: string) => {
     setTextValue(newValue);
-    onChange?.(newValue);
+    if (isValid(newValue)) {
+      onChange?.(newValue);
+    }
   };
 
   const handleClear = () => {
     setTextValue("");
     onChange?.("");
+    isValid("");
   };
 
   const handleInsert = (text: string) => {
     const newValue = textValue ? `${textValue}${text} ` : `${text} `;
     setTextValue(newValue);
-    onChange?.(newValue);
+    if (isValid(newValue)) {
+      onChange?.(newValue);
+    }
     // Refocus the input after inserting
     setTimeout(() => {
       inputRef.current?.focus();
+      // set cursor to end
+      const length = inputRef.current?.value.length || 0;
+      inputRef.current?.setSelectionRange(length, length);
     }, 0);
   };
 
+  useEvents(
+    {
+      "form:change": (event) => {
+        if (event.id === inputRef.current?.form?.id) {
+          if (event.path === (textInputProps as any)["data-path"]) {
+            setTextValue(event.value ?? "");
+          }
+        }
+      },
+    },
+    [],
+  );
+
   return (
     <Popover
       width={800}
@@ -72,10 +109,8 @@ const ControlQueryBuilder = ({
       onChange={setHelpOpened}
       closeOnClickOutside
       closeOnEscape
-      withArrow
-      arrowSize={14}
       transitionProps={{
-        transition: "fade-down",
+        transition: "fade-up",
         duration: 200,
         timingFunction: "ease",
       }}
@@ -87,7 +122,9 @@ const ControlQueryBuilder = ({
           value={textValue}
           onChange={(e) => handleTextChange(e.currentTarget.value)}
           onFocus={() => setHelpOpened(true)}
-          leftSection={<IconFilter size={16} />}
+          leftSection={
+            error ? <IconInfoTriangle size={16} /> : <IconFilter size={16} />
+          }
           rightSection={
             textValue && (
               <ActionIcon
@@ -103,7 +140,14 @@ const ControlQueryBuilder = ({
           {...textInputProps}
         />
       </Popover.Target>
-      <Popover.Dropdown>
+      <Popover.Dropdown
+        bg={"transparent"}
+        p={"xs"}
+        bd={`1px solid ${ui.colors.border}`}
+        style={{
+          backdropFilter: "blur(20px)",
+        }}
+      >
         <QueryHelp fields={fields} onInsert={handleInsert} />
       </Popover.Dropdown>
     </Popover>
@@ -121,7 +165,14 @@ interface QueryHelpProps {
 
 function QueryHelp({ fields, onInsert }: QueryHelpProps) {
   return (
-    <Group gap="md" align="flex-start" wrap="nowrap">
+    <Group
+      gap="md"
+      align="flex-start"
+      wrap="nowrap"
+      bg={ui.colors.surface}
+      p={"sm"}
+      bdrs={"sm"}
+    >
       {/* Left Column: Operators */}
       <Stack gap="md" style={{ flex: 1 }}>
         {/* Available Operators */}
@@ -132,16 +183,17 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
           <Stack gap={4}>
             {Object.entries(OPERATOR_INFO).map(([key, info]) => (
               <Group key={key} gap="xs" wrap="nowrap">
-                <Code
-                  style={{
-                    minWidth: 35,
-                    textAlign: "center",
-                    cursor: "pointer",
-                  }}
+                <ActionButton
+                  px={"xs"}
+                  size={"xs"}
+                  h={24}
+                  variant={"default"}
+                  justify={"center"}
+                  miw={48}
                   onClick={() => onInsert(info.symbol)}
                 >
                   {info.symbol}
-                </Code>
+                </ActionButton>
                 <Text size="xs" c="dimmed" style={{ flex: 1 }}>
                   {info.label}
                 </Text>
@@ -159,31 +211,33 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
           </Text>
           <Stack gap={4}>
             <Group gap="xs" wrap="nowrap">
-              <Code
-                style={{
-                  minWidth: 35,
-                  textAlign: "center",
-                  cursor: "pointer",
-                }}
+              <ActionButton
+                px={"xs"}
+                size={"xs"}
+                h={24}
+                variant={"default"}
+                justify={"center"}
+                miw={48}
                 onClick={() => onInsert("&")}
               >
                 &
-              </Code>
+              </ActionButton>
               <Text size="xs" c="dimmed">
                 AND
               </Text>
             </Group>
             <Group gap="xs" wrap="nowrap">
-              <Code
-                style={{
-                  minWidth: 35,
-                  textAlign: "center",
-                  cursor: "pointer",
-                }}
+              <ActionButton
+                px={"xs"}
+                size={"xs"}
+                h={24}
+                variant={"default"}
+                justify={"center"}
+                miw={48}
                 onClick={() => onInsert("|")}
               >
                 |
-              </Code>
+              </ActionButton>
               <Text size="xs" c="dimmed">
                 OR
               </Text>
@@ -197,49 +251,60 @@ function QueryHelp({ fields, onInsert }: QueryHelpProps) {
 
       {/* Right Column: Fields */}
       {fields.length > 0 && (
-        <Stack gap="xs" style={{ flex: 2 }}>
+        <Flex direction={"column"} gap="xs" style={{ flex: 2 }}>
           <Text size="sm" fw={600}>
             Fields
           </Text>
-          <Stack gap={4} style={{ maxHeight: 300, overflowY: "auto" }}>
+          <Flex
+            direction={"column"}
+            gap={4}
+            style={{ maxHeight: 300, overflowY: "auto" }}
+          >
             {fields.map((field) => (
-              <Group key={field.path} gap="xs" wrap="nowrap" align="flex-start">
-                <Code
-                  style={{ minWidth: 120, cursor: "pointer" }}
+              <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}
-                </Code>
-                <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+                </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 && (
-                    <Group gap={4} wrap="wrap">
+                    <Group gap={0} wrap="wrap">
                       {field.enum.map((enumValue) => (
-                        <Code
+                        <ActionButton
+                          px={"xs"}
+                          size={"xs"}
+                          h={24}
                           key={enumValue}
-                          style={{
-                            cursor: "pointer",
-                            fontStyle: "italic",
-                            fontSize: "0.75rem",
-                          }}
-                          c="blue"
                           onClick={() => onInsert(enumValue)}
                         >
                           {enumValue}
-                        </Code>
+                        </ActionButton>
                       ))}
                     </Group>
                   )}
-                </Stack>
+                </Flex>
                 <Badge size="xs" variant="light" style={{ flexShrink: 0 }}>
                   {field.type}
                 </Badge>
-              </Group>
+              </Flex>
             ))}
-          </Stack>
-        </Stack>
+          </Flex>
+        </Flex>
       )}
     </Group>
   );

package/src/components/form/ControlSelect.tsx

@@ -97,7 +97,7 @@ const ControlSelect = (props: ControlSelectProps) => {
 
     return (
       <Input.Wrapper {...inputProps}>
-        <Flex mt={"calc(var(--mantine-spacing-xs) / 2)"}>
+        <Flex>
           <SegmentedControl
             disabled={inputProps.disabled}
             defaultValue={String(props.input.props.defaultValue)}

package/src/components/table/DataTable.tsx

@@ -1,17 +1,18 @@
 import {
+  Alepha,
   type Async,
   type Page,
   type PageMetadata,
+  type Static,
   type TObject,
   t,
 } from "@alepha/core";
 import { DateTimeProvider, type DurationLike } from "@alepha/datetime";
 import { useInject } from "@alepha/react";
-import { useForm } from "@alepha/react-form";
+import { type FormModel, useForm } from "@alepha/react-form";
 import {
   Flex,
   Pagination,
-  Paper,
   Select,
   Table,
   type TableProps,
@@ -20,40 +21,60 @@ import {
 import { useDebouncedCallback } from "@mantine/hooks";
 import { type ReactNode, useEffect, useState } from "react";
 import ActionButton from "../buttons/ActionButton.tsx";
-import TypeForm from "../form/TypeForm.tsx";
+import TypeForm, { type TypeFormProps } from "../form/TypeForm.tsx";
 
-export interface DataTableColumn<T extends object> {
+export interface DataTableColumnContext<Filters extends TObject> {
+  index: number;
+  form: FormModel<Filters>;
+  alepha: Alepha;
+}
+
+export interface DataTableColumn<T extends object, Filters extends TObject> {
   label: string;
-  value: (item: T, index: number) => ReactNode;
+  value: (item: T, ctx: DataTableColumnContext<Filters>) => ReactNode;
+  fit?: boolean;
 }
 
 export type MaybePage<T> = Omit<Page<T>, "page"> & {
   page?: Partial<PageMetadata>;
 };
 
-export interface DataTableProps<T extends object> {
+export interface DataTableSubmitContext<T extends object> {
+  items: T[];
+}
+
+export interface DataTableProps<T extends object, Filters extends TObject> {
   /**
    * The items to display in the table. Can be a static page of items or a function that returns a promise resolving to a page of items.
    */
   items:
     | MaybePage<T>
     | ((
-        filters: Record<string, string> & {
+        filters: Static<Filters> & {
           page: number;
           size: number;
           sort?: string;
         },
+        ctx: DataTableSubmitContext<T>,
       ) => Async<MaybePage<T>>);
 
   /**
    * The columns to display in the table. Each column is defined by a key and a DataTableColumn object.
    */
   columns: {
-    [key: string]: DataTableColumn<T>;
+    [key: string]: DataTableColumn<T, Filters>;
   };
 
   defaultSize?: number;
 
+  typeFormProps?: Partial<Omit<TypeFormProps<Filters>, "form">>;
+
+  onFilterChange?: (
+    key: string,
+    value: unknown,
+    form: FormModel<Filters>,
+  ) => void;
+
   /**
    * Optional filters to apply to the data.
    */
@@ -89,7 +110,9 @@ export interface DataTableProps<T extends object> {
   tableTrProps?: (item: T) => TableTrProps;
 }
 
-const DataTable = <T extends object>(props: DataTableProps<T>) => {
+const DataTable = <T extends object, Filters extends TObject>(
+  props: DataTableProps<T, Filters>,
+) => {
   const [items, setItems] = useState<MaybePage<T>>(
     typeof props.items === "function"
       ? {
@@ -98,11 +121,11 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
       : props.items,
   );
 
-  const defaultSize = props.infinityScroll ? 50 : props.defaultSize || 10;
+  const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(String(defaultSize));
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
+  const alepha = useInject(Alepha);
 
   const form = useForm(
     {
@@ -115,11 +138,14 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
       handler: async (values, args) => {
         if (typeof props.items === "function") {
           const response = await props.items(
-            values as Record<string, string> & {
+            values as Static<Filters> & {
               page: number;
               size: number;
               sort?: string;
             },
+            {
+              items: items.content,
+            },
           );
 
           if (props.infinityScroll && values.page > 0) {
@@ -131,8 +157,8 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
           } else {
             setItems(response);
           }
+
           setCurrentPage(values.page);
-          setIsLoadingMore(false);
         }
       },
       onReset: async () => {
@@ -153,21 +179,20 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
           return;
         }
 
-        //submitDebounce();
+        props.onFilterChange?.(key, value, form as any);
       },
     },
-    [],
+    [items],
   );
 
   const submitDebounce = useDebouncedCallback(() => form.submit(), {
-    delay: 1000,
+    delay: 800,
   });
 
   const dt = useInject(DateTimeProvider);
 
   useEffect(() => {
     if (props.submitOnInit) {
-      console.log("submitting");
       form.submit();
     }
     if (props.submitEvery) {
@@ -189,19 +214,18 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
     if (!props.infinityScroll || typeof props.items !== "function") return;
 
     const handleScroll = () => {
-      if (isLoadingMore) return;
+      if (form.submitting) return;
 
       const scrollTop = window.scrollY;
       const windowHeight = window.innerHeight;
       const docHeight = document.documentElement.scrollHeight;
 
-      const isNearBottom = scrollTop + windowHeight >= docHeight - 200;
+      const isNearBottom = scrollTop + windowHeight >= docHeight - 300;
 
       if (isNearBottom) {
         const totalPages = items.page?.totalPages ?? 1;
 
         if (currentPage + 1 < totalPages) {
-          setIsLoadingMore(true);
           form.input.page.set(currentPage + 1);
         }
       }
@@ -211,14 +235,24 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, [
     props.infinityScroll,
-    isLoadingMore,
+    form.submitting,
     items.page?.totalPages,
     currentPage,
     form,
   ]);
 
   const head = Object.entries(props.columns).map(([key, col]) => (
-    <Table.Th key={key}>
+    <Table.Th
+      key={key}
+      style={{
+        ...(col.fit
+          ? {
+              width: "1%",
+              whiteSpace: "nowrap",
+            }
+          : {}),
+      }}
+    >
       <ActionButton justify={"space-between"} radius={0} fullWidth size={"xs"}>
         {col.label}
       </ActionButton>
@@ -232,7 +266,13 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
     return (
       <Table.Tr key={JSON.stringify(item)} {...trProps}>
         {Object.entries(props.columns).map(([key, col]) => (
-          <Table.Td key={key}>{col.value(item as T, index)}</Table.Td>
+          <Table.Td key={key}>
+            {col.value(item as T, {
+              index,
+              form: form as unknown as FormModel<Filters>,
+              alepha,
+            })}
+          </Table.Td>
         ))}
       </Table.Tr>
     );
@@ -242,15 +282,29 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
 
   return (
     <Flex direction={"column"} gap={"sm"} flex={1}>
-      <Paper withBorder p={"sm"}>
-        {props.filters ? <TypeForm form={form} schema={schema} /> : null}
-      </Paper>
-      <Table striped stripedColor={""} {...props.tableProps}>
-        <Table.Thead>
-          <Table.Tr>{head}</Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>{rows}</Table.Tbody>
-      </Table>
+      {props.filters ? (
+        <TypeForm
+          {...props.typeFormProps}
+          form={form as unknown as FormModel<Filters>}
+          schema={schema}
+        />
+      ) : null}
+
+      <Flex flex={1} className={"overflow-auto"}>
+        <Table
+          striped
+          withRowBorders
+          withColumnBorders
+          withTableBorder
+          stripedColor={""}
+          {...props.tableProps}
+        >
+          <Table.Thead>
+            <Table.Tr>{head}</Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Flex>
 
       {!props.infinityScroll && (
         <Flex justify={"space-between"} align={"center"}>

package/src/index.ts

@@ -23,6 +23,7 @@ export type {
 export { default as ActionButton } from "./components/buttons/ActionButton.tsx";
 export { default as DarkModeButton } from "./components/buttons/DarkModeButton.tsx";
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
+export { default as JsonViewer } from "./components/data/JsonViewer.tsx";
 export { default as AlertDialog } from "./components/dialogs/AlertDialog.tsx";
 export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
 export { default as PromptDialog } from "./components/dialogs/PromptDialog.tsx";

package/src/services/DialogService.tsx

@@ -1,9 +1,11 @@
-import type { ModalProps } from "@mantine/core";
+import { Flex, type ModalProps } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import type { ReactNode } from "react";
+import JsonViewer from "../components/data/JsonViewer.tsx";
 import AlertDialog from "../components/dialogs/AlertDialog";
 import ConfirmDialog from "../components/dialogs/ConfirmDialog";
 import PromptDialog from "../components/dialogs/PromptDialog";
+import { ui } from "../constants/ui.ts";
 
 // Base interfaces
 export interface BaseDialogOptions extends Partial<ModalProps> {
@@ -161,7 +163,16 @@ export class DialogService {
    * Show a JSON editor/viewer dialog
    */
   public json(data?: any, options?: BaseDialogOptions): void {
-    // Implementation to be added
+    this.open({
+      size: "lg",
+      title: options?.title || "Json Viewer",
+      ...options,
+      content: (
+        <Flex bdrs={"md"} w={"100%"} flex={1} p={"sm"} bg={ui.colors.surface}>
+          <JsonViewer size={"xs"} data={data} />
+        </Flex>
+      ),
+    });
   }
 
   /**

package/src/utils/extractSchemaFields.ts

@@ -51,7 +51,7 @@ export function extractSchemaFields(
     // Determine the display type - use format for datetime-related fields
     const format = "format" in fieldSchema ? fieldSchema.format : undefined;
     const baseType =
-      "type" in fieldSchema ? (fieldSchema.type as string) : "unknown";
+      "type" in fieldSchema ? (fieldSchema.type as string) : "object";
 
     let displayType = baseType;
     if (format === "date-time") {
@@ -76,6 +76,7 @@ export function extractSchemaFields(
     // Handle enum
     if ("enum" in fieldSchema && fieldSchema.enum) {
       field.enum = fieldSchema.enum;
+      field.type = "enum";
     }
 
     // Handle nested objects

package/dist/AlephaMantineProvider-Ba88lMeq.js

@@ -1,3 +0,0 @@
-import { t as AlephaMantineProvider_default } from "./AlephaMantineProvider-Be0DAazb.js";
-
-export { AlephaMantineProvider_default as default };