@alepha/ui 0.13.5 → 0.13.7

package/src/core/components/table/DataTablePagination.tsx

@@ -0,0 +1,59 @@
+import { Flex, Pagination, Select } from "@mantine/core";
+
+export interface DataTablePaginationProps {
+  page: number;
+  size: string;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  onSizeChange: (size: number) => void;
+}
+
+const DataTablePagination = ({
+  page,
+  size,
+  totalPages,
+  onPageChange,
+  onSizeChange,
+}: DataTablePaginationProps) => {
+  return (
+    <Flex
+      align="center"
+      justify="end"
+      gap="md"
+      p="xs"
+      style={{
+        borderTop: "1px solid var(--alepha-border)",
+      }}
+    >
+      <Flex>
+        <Select
+          w={96}
+          variant="default"
+          value={size}
+          onChange={(value) => {
+            if (value) {
+              onSizeChange(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>
+        <Pagination
+          withEdges
+          total={totalPages}
+          value={page}
+          onChange={onPageChange}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DataTablePagination;

package/src/core/components/table/DataTableToolbar.tsx

@@ -0,0 +1,126 @@
+import { Badge, Divider, Flex } from "@mantine/core";
+import { IconRefresh, IconX } from "@tabler/icons-react";
+import type { TObject } from "alepha";
+import { isValidElement, type ReactNode } from "react";
+import { isComponentType } from "../../helpers/isComponentType.ts";
+import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
+import ColumnPicker from "./ColumnPicker.tsx";
+import FilterPicker from "./FilterPicker.tsx";
+import type {
+  CheckboxAction,
+  CheckboxActionContext,
+  ColumnVisibility,
+  DataTableColumn,
+  FilterVisibility,
+} from "./types.ts";
+
+export interface DataTableToolbarProps<
+  T extends object,
+  Filters extends TObject,
+> {
+  columns: { [key: string]: DataTableColumn<T, Filters> };
+  filters?: TObject;
+  columnVisibility: ColumnVisibility;
+  filterVisibility: FilterVisibility;
+  onColumnVisibilityChange: (visibility: ColumnVisibility) => void;
+  onFilterVisibilityChange: (visibility: FilterVisibility) => void;
+  actions?: Array<ActionProps & { label?: ReactNode }>;
+  onRefresh?: () => void;
+  // Checkbox-related props
+  selectedItems?: T[];
+  checkboxActions?: Array<CheckboxAction<T>>;
+  onClearSelection?: () => void;
+}
+
+const DataTableToolbar = <T extends object, Filters extends TObject>({
+  columns,
+  filters,
+  columnVisibility,
+  filterVisibility,
+  onColumnVisibilityChange,
+  onFilterVisibilityChange,
+  actions,
+  onRefresh,
+  selectedItems = [],
+  checkboxActions,
+  onClearSelection,
+}: DataTableToolbarProps<T, Filters>) => {
+  const hasSelection = selectedItems.length > 0;
+
+  const handleCheckboxAction = async (action: CheckboxAction<T>) => {
+    const ctx: CheckboxActionContext<T> = {
+      selectedItems,
+      clearSelection: onClearSelection || (() => {}),
+    };
+    await action.onClick(ctx);
+  };
+
+  return (
+    <Flex p="xs" style={{ borderBottom: "1px solid var(--alepha-border)" }}>
+      <Flex gap={4} align="center">
+        {filters && (
+          <FilterPicker
+            schema={filters}
+            visibility={filterVisibility}
+            onVisibilityChange={onFilterVisibilityChange}
+          />
+        )}
+        <ColumnPicker
+          columns={columns}
+          visibility={columnVisibility}
+          onVisibilityChange={onColumnVisibilityChange}
+        />
+
+        {hasSelection && (
+          <>
+            <Divider orientation="vertical" mx="xs" />
+            <Badge variant="light" size="lg">
+              {selectedItems.length} selected
+            </Badge>
+            <ActionButton
+              variant="subtle"
+              size="compact-sm"
+              icon={IconX}
+              onClick={onClearSelection}
+            >
+              Clear
+            </ActionButton>
+            {checkboxActions?.map((action, index) => (
+              <ActionButton
+                key={index}
+                variant="light"
+                size="compact-sm"
+                intent={action.intent}
+                icon={
+                  action.icon && isComponentType(action.icon)
+                    ? action.icon
+                    : undefined
+                }
+                onClick={() => handleCheckboxAction(action)}
+              >
+                {action.label}
+              </ActionButton>
+            ))}
+          </>
+        )}
+      </Flex>
+      <Flex flex={1} />
+      <Flex gap="xs">
+        {actions?.map((props, index) =>
+          !isValidElement(props) ? (
+            <ActionButton key={index} {...(props as ActionProps)}>
+              {(props as ActionProps & { label?: ReactNode }).label}
+            </ActionButton>
+          ) : (
+            props
+          ),
+        )}
+        <ActionButton icon={IconRefresh} onClick={onRefresh}>
+          Refresh
+        </ActionButton>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DataTableToolbar;

package/src/core/components/table/FilterPicker.tsx

@@ -0,0 +1,138 @@
+import {
+  Button,
+  Checkbox,
+  Group,
+  Popover,
+  ScrollArea,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconFilter } from "@tabler/icons-react";
+import type { TObject } from "alepha";
+import { useState } from "react";
+import { ui } from "../../constants/ui.ts";
+import ActionButton from "../buttons/ActionButton.tsx";
+import type { FilterVisibility } from "./types.ts";
+
+export interface FilterPickerProps {
+  schema: TObject;
+  visibility: FilterVisibility;
+  onVisibilityChange: (visibility: FilterVisibility) => void;
+}
+
+const getFieldLabel = (schema: TObject, key: string): string => {
+  const prop = schema.properties[key];
+  if (prop && typeof prop === "object" && "title" in prop && prop.title) {
+    return prop.title as string;
+  }
+  // Convert camelCase to Title Case
+  return key
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+};
+
+const FilterPicker = ({
+  schema,
+  visibility,
+  onVisibilityChange,
+}: FilterPickerProps) => {
+  const [opened, setOpened] = useState(false);
+  const filterKeys = Object.keys(schema.properties);
+
+  const handleShowAll = () => {
+    const newVisibility = filterKeys.reduce(
+      (acc, key) => ({ ...acc, [key]: true }),
+      {} as FilterVisibility,
+    );
+    onVisibilityChange(newVisibility);
+  };
+
+  const handleHideAll = () => {
+    const newVisibility = filterKeys.reduce(
+      (acc, key) => ({ ...acc, [key]: false }),
+      {} as FilterVisibility,
+    );
+    onVisibilityChange(newVisibility);
+  };
+
+  const handleToggle = (key: string, checked: boolean) => {
+    onVisibilityChange({
+      ...visibility,
+      [key]: checked,
+    });
+  };
+
+  const visibleCount = filterKeys.filter(
+    (key) => visibility[key] !== false,
+  ).length;
+
+  return (
+    <Popover
+      width={280}
+      position="bottom-start"
+      shadow="md"
+      opened={opened}
+      onChange={setOpened}
+      closeOnClickOutside
+      closeOnEscape
+      transitionProps={{
+        transition: "fade-up",
+        duration: 200,
+        timingFunction: "ease",
+      }}
+    >
+      <Popover.Target>
+        <ActionButton variant="subtle" icon={IconFilter} />
+      </Popover.Target>
+      <Popover.Dropdown
+        bg="transparent"
+        p="xs"
+        bd={`1px solid ${ui.colors.border}`}
+        style={{
+          backdropFilter: "blur(20px)",
+        }}
+      >
+        <Stack gap="xs" bg={ui.colors.surface} p="sm" bdrs="sm">
+          <Group justify="space-between">
+            <Text size="sm" fw={500}>
+              Filters ({visibleCount}/{filterKeys.length})
+            </Text>
+            <Group gap={4}>
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                onClick={handleShowAll}
+              >
+                All
+              </Button>
+              <Button
+                size="compact-xs"
+                variant="subtle"
+                onClick={handleHideAll}
+              >
+                None
+              </Button>
+            </Group>
+          </Group>
+
+          <ScrollArea.Autosize mah={300}>
+            <Stack gap={4}>
+              {filterKeys.map((key) => (
+                <Checkbox
+                  key={key}
+                  label={getFieldLabel(schema, key)}
+                  checked={visibility[key] !== false}
+                  onChange={(e) => handleToggle(key, e.currentTarget.checked)}
+                  size="sm"
+                />
+              ))}
+            </Stack>
+          </ScrollArea.Autosize>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+export default FilterPicker;

package/src/core/components/table/types.ts

@@ -0,0 +1,199 @@
+import type { FormModel } from "@alepha/react/form";
+import type { TableProps, TableTrProps } from "@mantine/core";
+import type {
+  Alepha,
+  Async,
+  Page,
+  PageMetadata,
+  Static,
+  TObject,
+} from "alepha";
+import type { DurationLike } from "alepha/datetime";
+import type { ReactNode } from "react";
+import type { ActionProps } from "../buttons/ActionButton.tsx";
+import type { TypeFormProps } from "../form/TypeForm.tsx";
+
+// -----------------------------------------------------------------------------
+// Visibility Types
+// -----------------------------------------------------------------------------
+
+export interface ColumnVisibility {
+  [key: string]: boolean;
+}
+
+export interface FilterVisibility {
+  [key: string]: boolean;
+}
+
+// -----------------------------------------------------------------------------
+// Column Types
+// -----------------------------------------------------------------------------
+
+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, ctx: DataTableColumnContext<Filters>) => ReactNode;
+  fit?: boolean;
+  /**
+   * Enable sorting for this column. When true, clicking the header will sort by this column.
+   */
+  sortable?: boolean;
+  /**
+   * The field name to use for sorting. If not provided, the column key is used.
+   * Follows Alepha sort convention: 'field' for ASC, '-field' for DESC.
+   */
+  sortKey?: string;
+}
+
+// -----------------------------------------------------------------------------
+// Page Types
+// -----------------------------------------------------------------------------
+
+export type MaybePage<T> = Omit<Page<T>, "page"> & {
+  page?: Partial<PageMetadata>;
+};
+
+export interface DataTableSubmitContext<T extends object> {
+  items: T[];
+}
+
+// -----------------------------------------------------------------------------
+// Checkbox Types
+// -----------------------------------------------------------------------------
+
+export interface CheckboxActionContext<T extends object> {
+  selectedItems: T[];
+  clearSelection: () => void;
+}
+
+export interface CheckboxAction<T extends object> {
+  label: ReactNode;
+  icon?: ReactNode;
+  intent?: "primary" | "success" | "danger" | "warning" | "info" | "none";
+  onClick: (ctx: CheckboxActionContext<T>) => void | Promise<void>;
+}
+
+// -----------------------------------------------------------------------------
+// Props Types
+// -----------------------------------------------------------------------------
+
+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, 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;
+
+  /**
+   * Enable row selection with checkboxes. When true, a checkbox column is added as the first column.
+   */
+  withCheckbox?: boolean;
+
+  /**
+   * Function to get a unique key for each item. Required when withCheckbox is true.
+   * Used to track selected items across pagination.
+   */
+  getItemKey?: (item: T) => string;
+
+  /**
+   * Actions to display when items are selected. Each action receives the selected items.
+   */
+  checkboxActions?: Array<CheckboxAction<T>>;
+
+  actions?: Array<ActionProps & { label?: ReactNode }>;
+
+  /**
+   * Enable infinity scroll mode. When true, pagination controls are hidden and new items are loaded automatically when scrolling to the bottom.
+   */
+  infinityScroll?: boolean;
+
+  // -------------------------------------------------------------------------------------------------------------------
+  // Column Visibility
+  // -------------------------------------------------------------------------------------------------------------------
+
+  /**
+   * Initial column visibility state. By default, first 10 columns are visible.
+   */
+  defaultColumnVisibility?: ColumnVisibility;
+
+  /**
+   * Maximum number of columns to show by default. Default is 10.
+   */
+  defaultVisibleColumnCount?: number;
+
+  /**
+   * Callback when column visibility changes.
+   */
+  onColumnVisibilityChange?: (visibility: ColumnVisibility) => void;
+
+  // -------------------------------------------------------------------------------------------------------------------
+  // Filter Visibility
+  // -------------------------------------------------------------------------------------------------------------------
+
+  /**
+   * Initial filter visibility state. By default, all filters are visible.
+   */
+  defaultFilterVisibility?: FilterVisibility;
+
+  /**
+   * Callback when filter visibility changes.
+   */
+  onFilterVisibilityChange?: (visibility: FilterVisibility) => void;
+
+  // -------------------------------------------------------------------------------------------------------------------
+  // Mantine Props
+  // -------------------------------------------------------------------------------------------------------------------
+
+  /**
+   * 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;
+}

package/src/core/helpers/isComponentType.ts

@@ -0,0 +1,9 @@
+import { type ComponentType, isValidElement } from "react";
+
+export function isComponentType(param: any): param is ComponentType<any> {
+  if (isValidElement(param)) return false;
+  return (
+    typeof param === "function" ||
+    (typeof param === "object" && param !== null && "$$typeof" in param)
+  );
+}

package/src/core/helpers/renderIcon.tsx

@@ -0,0 +1,13 @@
+import { ui } from "@alepha/ui";
+import { type ComponentType, isValidElement, type ReactNode } from "react";
+import { isComponentType } from "./isComponentType.ts";
+
+export const renderIcon = (icon: ReactNode | ComponentType): ReactNode => {
+  if (!icon) return null;
+  if (isValidElement(icon)) return icon;
+  if (isComponentType(icon)) {
+    const IconComponent = icon;
+    return <IconComponent size={ui.sizes.icon.md} />;
+  }
+  return icon as ReactNode;
+};

package/src/core/hooks/useTheme.ts

@@ -1,25 +1,31 @@
 import { useInject, useStore } from "@alepha/react";
 import {
-  type AlephaTheme,
-  mantineThemeAtom,
-  type Theme,
-  ThemeProvider,
-} from "../providers/ThemeProvider.ts";
+  alephaThemeAtom,
+  type CurrentAlephaTheme,
+} from "../atoms/alephaThemeAtom.ts";
+import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
+import { ThemeProvider } from "../providers/ThemeProvider.ts";
 
-export const useTheme = () => {
-  useStore(mantineThemeAtom);
+/**
+ * Hook to get and set the current theme.
+ *
+ * Returns a tuple with the current theme and a function to set the theme.
+ *
+ * ```tsx
+ * const [theme, setTheme] = useTheme();
+ * ```
+ */
+export const useTheme = (): [
+  AlephaTheme,
+  (theme: CurrentAlephaTheme) => void,
+] => {
+  useStore(alephaThemeAtom);
 
-  const themeService = useInject(ThemeProvider);
-  const currentTheme = themeService.getTheme();
-
-  // Find the full theme object from the themes array
-  const fullTheme =
-    themeService.themes.find((t) => t.id === currentTheme.id) ??
-    themeService.themes[0];
-
-  const applyTheme = (theme: Theme | AlephaTheme) => {
-    themeService.setTheme({ id: theme.id });
+  const themeProvider = useInject(ThemeProvider);
+  const theme = themeProvider.getTheme();
+  const setTheme = (theme: CurrentAlephaTheme) => {
+    themeProvider.setTheme(theme.index);
   };
 
-  return [fullTheme, applyTheme] as const;
+  return [theme, setTheme] as const;
 };

package/src/core/index.ts

@@ -1,8 +1,9 @@
 import { AlephaReactForm } from "@alepha/react/form";
 import { AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n } from "@alepha/react/i18n";
-import { $module } from "alepha";
+import { $module, type Static } from "alepha";
 import type { ComponentType, ReactNode } from "react";
+import { alephaThemeAtom } from "./atoms/alephaThemeAtom.ts";
 import type { ControlProps } from "./components/form/Control.tsx";
 import { ThemeProvider } from "./providers/ThemeProvider.ts";
 import { RootRouter } from "./RootRouter.ts";
@@ -12,6 +13,10 @@ import { ToastService } from "./services/ToastService.tsx";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { Flex, Text } from "@mantine/core";
+export * from "./atoms/alephaThemeAtom.ts";
+export * from "./atoms/alephaThemeListAtom.ts";
+export * from "./atoms/themes/default.ts";
+export * from "./atoms/themes/midnight.ts";
 export type {
   ActionClickButtonProps,
   ActionCommonProps,
@@ -35,7 +40,10 @@ 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 ControlArray } from "./components/form/ControlArray.tsx";
 export { default as ControlDate } from "./components/form/ControlDate.tsx";
+export { default as ControlNumber } from "./components/form/ControlNumber.tsx";
+export { default as ControlObject } from "./components/form/ControlObject.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";
@@ -72,11 +80,18 @@ export type {
   SidebarTheme,
 } from "./components/layout/Sidebar.tsx";
 export { Sidebar } from "./components/layout/Sidebar.tsx";
+export { default as DataTable } from "./components/table/DataTable.tsx";
 export type {
+  CheckboxAction,
+  CheckboxActionContext,
+  ColumnVisibility,
   DataTableColumn,
+  DataTableColumnContext,
   DataTableProps,
-} from "./components/table/DataTable.tsx";
-export { default as DataTable } from "./components/table/DataTable.tsx";
+  DataTableSubmitContext,
+  FilterVisibility,
+  MaybePage,
+} from "./components/table/types.ts";
 export * from "./constants/ui.ts";
 export { useDialog } from "./hooks/useDialog.ts";
 export { useToast } from "./hooks/useToast.ts";
@@ -105,6 +120,12 @@ declare module "typebox" {
   }
 }
 
+declare module "alepha" {
+  interface State {
+    [alephaThemeAtom.key]?: Static<typeof alephaThemeAtom.schema>;
+  }
+}
+
 declare module "@alepha/react" {
   interface PagePrimitiveOptions {
     /**

package/src/core/interfaces/AlephaTheme.ts

@@ -0,0 +1,8 @@
+import type { MantineThemeOverride } from "@mantine/core";
+
+export type AlephaTheme = MantineThemeOverride & {
+  name: string;
+  description: string;
+  // --
+  defaultColorScheme?: "light" | "dark"; // or "system"
+};