@alepha/ui 0.11.5 → 0.11.7

package/src/components/table/DataTable.tsx

@@ -1,62 +1,339 @@
-import type { Async } from "@alepha/core";
-import type { TableTrProps } from "@mantine/core";
-import { Table, type TableProps } from "@mantine/core";
+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 { type FormModel, useForm } from "@alepha/react-form";
+import {
+  Flex,
+  Pagination,
+  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, { 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) => ReactNode;
+  value: (item: T, ctx: DataTableColumnContext<Filters>) => ReactNode;
+  fit?: boolean;
+}
+
+export type MaybePage<T> = Omit<Page<T>, "page"> & {
+  page?: Partial<PageMetadata>;
+};
+
+export interface DataTableSubmitContext<T extends object> {
+  items: T[];
 }
 
-export interface DataTableProps<T extends object> {
-  items: T[] | (() => Async<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: 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.
+   */
+  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 DataTable = <T extends object, Filters extends TObject>(
+  props: DataTableProps<T, Filters>,
+) => {
+  const [items, setItems] = useState<MaybePage<T>>(
+    typeof props.items === "function"
+      ? {
+          content: [],
+        }
+      : props.items,
+  );
+
+  const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(String(defaultSize));
+  const [currentPage, setCurrentPage] = useState(0);
+  const alepha = useInject(Alepha);
+
+  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 Static<Filters> & {
+              page: number;
+              size: number;
+              sort?: string;
+            },
+            {
+              items: items.content,
+            },
+          );
+
+          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);
+        }
+      },
+      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;
+        }
+
+        props.onFilterChange?.(key, value, form as any);
+      },
+    },
+    [items],
   );
 
+  const submitDebounce = useDebouncedCallback(() => form.submit(), {
+    delay: 800,
+  });
+
+  const dt = useInject(DateTimeProvider);
+
+  useEffect(() => {
+    if (props.submitOnInit) {
+      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 (form.submitting) return;
+
+      const scrollTop = window.scrollY;
+      const windowHeight = window.innerHeight;
+      const docHeight = document.documentElement.scrollHeight;
+
+      const isNearBottom = scrollTop + windowHeight >= docHeight - 300;
+
+      if (isNearBottom) {
+        const totalPages = items.page?.totalPages ?? 1;
+
+        if (currentPage + 1 < totalPages) {
+          form.input.page.set(currentPage + 1);
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [
+    props.infinityScroll,
+    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>
     </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,
+              form: form as unknown as FormModel<Filters>,
+              alepha,
+            })}
+          </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}>
+      {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"}>
+          <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

@@ -23,11 +23,13 @@ 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";
 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 +82,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/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

@@ -0,0 +1,172 @@
+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) : "object";
+
+    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;
+      field.type = "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]",
+  },
+};

package/dist/AlephaMantineProvider-Ba88lMeq.js

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