@alepha/ui 0.11.5 → 0.11.6

package/src/components/layout/Sidebar.tsx

@@ -56,18 +56,20 @@ export const Sidebar = (props: SidebarProps) => {
       if (item.type === "section") {
         if (props.collapsed) return;
         return (
-          <Text
-            key={key}
-            size={"xs"}
-            c={"dimmed"}
-            mt={"md"}
-            mb={"xs"}
-            mx={"sm"}
-            tt={"uppercase"}
-            fw={"bold"}
-          >
-            {item.label}
-          </Text>
+          <Flex mt={"md"} mb={"xs"} align={"center"} gap={"xs"}>
+            <ThemeIcon c={"dimmed"} size={"xs"} variant={"transparent"}>
+              {item.icon}
+            </ThemeIcon>
+            <Text
+              key={key}
+              size={"xs"}
+              c={"dimmed"}
+              tt={"uppercase"}
+              fw={"bold"}
+            >
+              {item.label}
+            </Text>
+          </Flex>
         );
       }
     }
@@ -191,7 +193,9 @@ export const SidebarItem = (props: SidebarItemProps) => {
   if (level > maxLevel) return null;
 
   const handleItemClick = (e: MouseEvent) => {
-    e.preventDefault();
+    if (!props.item.target) {
+      e.preventDefault();
+    }
     if (item.children && item.children.length > 0) {
       setIsOpen(!isOpen);
     } else {
@@ -206,6 +210,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
         w={"100%"}
         justify="space-between"
         href={props.item.href}
+        target={props.item.target}
         variant={"subtle"}
         size={
           props.item.theme?.size ??
@@ -310,7 +315,9 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive(item));
 
   const handleItemClick = (e: MouseEvent) => {
-    e.preventDefault();
+    if (!props.item.target) {
+      e.preventDefault();
+    }
     if (item.children && item.children.length > 0) {
       setIsOpen(!isOpen);
     } else {
@@ -332,6 +339,7 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       onClick={handleItemClick}
       icon={item.icon ?? <IconSquareRounded />}
       href={props.item.href}
+      target={props.item.target}
       menu={
         item.children
           ? {
@@ -384,6 +392,7 @@ export interface SidebarSearch extends SidebarAbstractItem {
 export interface SidebarSection extends SidebarAbstractItem {
   type: "section";
   label: string;
+  icon?: ReactNode;
 }
 
 export interface SidebarMenuItem extends SidebarAbstractItem {
@@ -391,6 +400,7 @@ export interface SidebarMenuItem extends SidebarAbstractItem {
   description?: string;
   icon?: ReactNode;
   href?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
   activeStartsWith?: boolean; // Use startWith matching for active state
   onClick?: () => void;
   children?: SidebarMenuItem[];

package/src/components/table/DataTable.tsx

@@ -1,34 +1,222 @@
-import type { Async } from "@alepha/core";
-import type { TableTrProps } from "@mantine/core";
-import { Table, type TableProps } from "@mantine/core";
+import {
+  type Async,
+  type Page,
+  type PageMetadata,
+  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 {
+  Flex,
+  Pagination,
+  Paper,
+  Select,
+  Table,
+  type TableProps,
+  type TableTrProps,
+} from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
 import { type ReactNode, useEffect, useState } from "react";
 import ActionButton from "../buttons/ActionButton.tsx";
+import TypeForm from "../form/TypeForm.tsx";
 
 export interface DataTableColumn<T extends object> {
   label: string;
-  value: (item: T) => ReactNode;
+  value: (item: T, index: number) => ReactNode;
 }
 
+export type MaybePage<T> = Omit<Page<T>, "page"> & {
+  page?: Partial<PageMetadata>;
+};
+
 export interface DataTableProps<T extends object> {
-  items: T[] | (() => Async<T[]>);
+  /**
+   * 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> & {
+          page: number;
+          size: number;
+          sort?: string;
+        },
+      ) => 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>;
   };
+
+  defaultSize?: number;
+
+  /**
+   * Optional filters to apply to the data.
+   */
+  filters?: TObject;
+
+  panel?: (item: T) => ReactNode;
+  canPanel?: (item: T) => boolean;
+
+  submitOnInit?: boolean;
+  submitEvery?: DurationLike;
+
+  withLineNumbers?: boolean;
+  withCheckbox?: boolean;
+  checkboxActions?: any[];
+
+  actions?: any[];
+
+  /**
+   * Enable infinity scroll mode. When true, pagination controls are hidden and new items are loaded automatically when scrolling to the bottom.
+   */
+  infinityScroll?: boolean;
+
+  // -------------------------------------------------------------------------------------------------------------------
+
+  /**
+   * Props to pass to the Mantine Table component.
+   */
   tableProps?: TableProps;
+
+  /**
+   * Function to generate props for each table row based on the item.
+   */
   tableTrProps?: (item: T) => TableTrProps;
 }
 
 const DataTable = <T extends object>(props: DataTableProps<T>) => {
-  const [items, setItems] = useState<object[]>(
-    typeof props.items === "function" ? [] : props.items,
+  const [items, setItems] = useState<MaybePage<T>>(
+    typeof props.items === "function"
+      ? {
+          content: [],
+        }
+      : props.items,
+  );
+
+  const defaultSize = props.infinityScroll ? 50 : 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 form = useForm(
+    {
+      schema: t.object({
+        ...(props.filters ? props.filters.properties : {}),
+        page: t.number({ default: 0 }),
+        size: t.number({ default: defaultSize }),
+        sort: t.optional(t.string()),
+      }),
+      handler: async (values, args) => {
+        if (typeof props.items === "function") {
+          const response = await props.items(
+            values as Record<string, string> & {
+              page: number;
+              size: number;
+              sort?: string;
+            },
+          );
+
+          if (props.infinityScroll && values.page > 0) {
+            // Append new items to existing ones for infinity scroll
+            setItems((prev) => ({
+              ...response,
+              content: [...prev.content, ...response.content],
+            }));
+          } else {
+            setItems(response);
+          }
+          setCurrentPage(values.page);
+          setIsLoadingMore(false);
+        }
+      },
+      onReset: async () => {
+        setPage(1);
+        setSize("10");
+        await form.submit();
+      },
+      onChange: async (key, value) => {
+        if (key === "page") {
+          setPage(value + 1);
+          await form.submit();
+          return;
+        }
+
+        if (key === "size") {
+          setSize(String(value));
+          form.input.page.set(0);
+          return;
+        }
+
+        //submitDebounce();
+      },
+    },
+    [],
   );
 
+  const submitDebounce = useDebouncedCallback(() => form.submit(), {
+    delay: 1000,
+  });
+
+  const dt = useInject(DateTimeProvider);
+
+  useEffect(() => {
+    if (props.submitOnInit) {
+      console.log("submitting");
+      form.submit();
+    }
+    if (props.submitEvery) {
+      const it = dt.createInterval(() => {
+        form.submit();
+      }, props.submitEvery);
+      return () => dt.clearInterval(it);
+    }
+  }, []);
+
   useEffect(() => {
     if (typeof props.items !== "function") {
       setItems(props.items);
     }
   }, [props.items]);
 
+  // Infinity scroll detection
+  useEffect(() => {
+    if (!props.infinityScroll || typeof props.items !== "function") return;
+
+    const handleScroll = () => {
+      if (isLoadingMore) return;
+
+      const scrollTop = window.scrollY;
+      const windowHeight = window.innerHeight;
+      const docHeight = document.documentElement.scrollHeight;
+
+      const isNearBottom = scrollTop + windowHeight >= docHeight - 200;
+
+      if (isNearBottom) {
+        const totalPages = items.page?.totalPages ?? 1;
+
+        if (currentPage + 1 < totalPages) {
+          setIsLoadingMore(true);
+          form.input.page.set(currentPage + 1);
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [
+    props.infinityScroll,
+    isLoadingMore,
+    items.page?.totalPages,
+    currentPage,
+    form,
+  ]);
+
   const head = Object.entries(props.columns).map(([key, col]) => (
     <Table.Th key={key}>
       <ActionButton justify={"space-between"} radius={0} fullWidth size={"xs"}>
@@ -37,26 +225,61 @@ const DataTable = <T extends object>(props: DataTableProps<T>) => {
     </Table.Th>
   ));
 
-  const rows = items.map((item, index) => {
+  const rows = items.content.map((item, index) => {
     const trProps = props.tableTrProps
       ? props.tableTrProps(item as T)
       : ({} as TableTrProps);
     return (
       <Table.Tr key={JSON.stringify(item)} {...trProps}>
         {Object.entries(props.columns).map(([key, col]) => (
-          <Table.Td key={key}>{col.value(item as T)}</Table.Td>
+          <Table.Td key={key}>{col.value(item as T, index)}</Table.Td>
         ))}
       </Table.Tr>
     );
   });
 
+  const schema = t.omit(form.options.schema, ["page", "size", "sort"]);
+
   return (
-    <Table {...props.tableProps}>
-      <Table.Thead>
-        <Table.Tr>{head}</Table.Tr>
-      </Table.Thead>
-      <Table.Tbody>{rows}</Table.Tbody>
-    </Table>
+    <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.infinityScroll && (
+        <Flex justify={"space-between"} align={"center"}>
+          <Pagination
+            withEdges
+            total={items.page?.totalPages ?? 1}
+            value={page}
+            onChange={(value) => {
+              form.input.page.set(value - 1);
+            }}
+          />
+          <Flex>
+            <Select
+              value={size}
+              onChange={(value) => {
+                form.input.size.set(Number(value));
+              }}
+              data={[
+                { value: "5", label: "5" },
+                { value: "10", label: "10" },
+                { value: "25", label: "25" },
+                { value: "50", label: "50" },
+                { value: "100", label: "100" },
+              ]}
+            />
+          </Flex>
+        </Flex>
+      )}
+    </Flex>
   );
 };
 

package/src/constants/ui.ts

@@ -4,5 +4,6 @@ export const ui = {
     background: "var(--alepha-background)",
     surface: "var(--alepha-surface)",
     elevated: "var(--alepha-elevated)",
+    border: "var(--alepha-border)",
   },
 };

package/src/index.ts

@@ -28,6 +28,7 @@ export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx
 export { default as PromptDialog } from "./components/dialogs/PromptDialog.tsx";
 export { default as Control } from "./components/form/Control.tsx";
 export { default as ControlDate } from "./components/form/ControlDate.tsx";
+export { default as ControlQueryBuilder } from "./components/form/ControlQueryBuilder.tsx";
 export { default as ControlSelect } from "./components/form/ControlSelect.tsx";
 export { default as TypeForm } from "./components/form/TypeForm.tsx";
 export { default as AdminShell } from "./components/layout/AdminShell.tsx";
@@ -80,6 +81,7 @@ export type {
 } from "./services/DialogService.tsx";
 export { DialogService } from "./services/DialogService.tsx";
 export { ToastService } from "./services/ToastService.tsx";
+export * from "./utils/extractSchemaFields.ts";
 export * from "./utils/icons.tsx";
 export * from "./utils/string.ts";
 

package/src/utils/extractSchemaFields.ts

@@ -0,0 +1,171 @@
+import type { TObject, TProperties, TSchema } from "@alepha/core";
+
+export interface SchemaField {
+  name: string;
+  path: string;
+  type: string;
+  enum?: readonly any[];
+  format?: string;
+  description?: string;
+  nested?: SchemaField[];
+}
+
+/**
+ * Extract field information from a TypeBox schema for query building.
+ * Supports nested objects and provides field metadata for autocomplete.
+ */
+export function extractSchemaFields(
+  schema: TObject | TProperties,
+  prefix = "",
+): SchemaField[] {
+  const fields: SchemaField[] = [];
+
+  // Safety check
+  if (!schema || typeof schema !== "object") {
+    return fields;
+  }
+
+  // Handle TObject wrapper
+  const properties =
+    "properties" in schema ? schema.properties : (schema as TProperties);
+
+  // Safety check for properties
+  if (!properties || typeof properties !== "object") {
+    return fields;
+  }
+
+  for (const [key, value] of Object.entries(properties)) {
+    // Skip if value is not an object (type guard)
+    if (typeof value !== "object" || value === null) {
+      continue;
+    }
+
+    const fieldSchema = value as TSchema & {
+      format?: string;
+      enum?: readonly any[];
+      description?: string;
+    };
+
+    const path = prefix ? `${prefix}.${key}` : key;
+
+    // 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";
+
+    let displayType = baseType;
+    if (format === "date-time") {
+      displayType = "datetime";
+    } else if (format === "date") {
+      displayType = "date";
+    } else if (format === "time") {
+      displayType = "time";
+    } else if (format === "duration") {
+      displayType = "duration";
+    }
+
+    const field: SchemaField = {
+      name: key,
+      path,
+      type: displayType,
+      format,
+      description:
+        "description" in fieldSchema ? fieldSchema.description : undefined,
+    };
+
+    // Handle enum
+    if ("enum" in fieldSchema && fieldSchema.enum) {
+      field.enum = fieldSchema.enum;
+    }
+
+    // Handle nested objects
+    if (
+      "type" in fieldSchema &&
+      fieldSchema.type === "object" &&
+      "properties" in fieldSchema &&
+      typeof fieldSchema.properties === "object"
+    ) {
+      field.nested = extractSchemaFields(
+        fieldSchema.properties as TProperties,
+        path,
+      );
+    }
+
+    fields.push(field);
+
+    // Also add nested fields to the flat list for autocomplete
+    if (field.nested) {
+      fields.push(...field.nested);
+    }
+  }
+
+  return fields;
+}
+
+/**
+ * Get suggested operators based on field type
+ */
+export function getOperatorsForField(field: SchemaField): string[] {
+  const allOperators = ["=", "!="];
+
+  if (field.enum) {
+    // Enum fields: equality and IN array
+    return [...allOperators, "in"];
+  }
+
+  switch (field.type) {
+    case "string":
+    case "text":
+      // String fields: equality, like, and null checks
+      return [...allOperators, "~", "~*", "null"];
+
+    case "number":
+    case "integer":
+      // Numeric fields: all comparison operators
+      return [...allOperators, ">", ">=", "<", "<="];
+
+    case "boolean":
+      // Boolean fields: only equality
+      return allOperators;
+
+    case "datetime":
+    case "date":
+      // Date fields: all comparison operators
+      return [...allOperators, ">", ">=", "<", "<="];
+
+    default:
+      return [...allOperators, "null"];
+  }
+}
+
+/**
+ * Get operator symbol and description
+ */
+export const OPERATOR_INFO: Record<
+  string,
+  { symbol: string; label: string; example: string }
+> = {
+  eq: { symbol: "=", label: "equals", example: "name=John" },
+  ne: { symbol: "!=", label: "not equals", example: "status!=archived" },
+  gt: { symbol: ">", label: "greater than", example: "age>18" },
+  gte: { symbol: ">=", label: "greater or equal", example: "age>=18" },
+  lt: { symbol: "<", label: "less than", example: "age<65" },
+  lte: { symbol: "<=", label: "less or equal", example: "age<=65" },
+  like: { symbol: "~", label: "like (case-sensitive)", example: "name~John" },
+  ilike: {
+    symbol: "~*",
+    label: "like (case-insensitive)",
+    example: "name~*john",
+  },
+  null: { symbol: "=null", label: "is null", example: "deletedAt=null" },
+  notNull: {
+    symbol: "!=null",
+    label: "is not null",
+    example: "email!=null",
+  },
+  in: {
+    symbol: "[...]",
+    label: "in array",
+    example: "status=[active,pending]",
+  },
+};