@alepha/ui 0.11.3 → 0.11.4

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,410 @@
+import { useEvents, useRouter } from "@alepha/react";
+import {
+  Flex,
+  type FlexProps,
+  type MantineBreakpoint,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconSquareRounded,
+} from "@tabler/icons-react";
+import { type ReactNode, useCallback, useState } from "react";
+import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
+import OmnibarButton from "../buttons/OmnibarButton.tsx";
+
+export interface SidebarProps {
+  menu?: SidebarNode[];
+  top?: SidebarNode[];
+  bottom?: SidebarNode[];
+  onItemClick?: (item: SidebarMenuItem) => void;
+  onSearchClick?: () => void;
+  theme?: SidebarTheme;
+  flexProps?: Partial<FlexProps>;
+  collapsed?: boolean;
+  gap?: MantineBreakpoint;
+}
+
+export const Sidebar = (props: SidebarProps) => {
+  const router = useRouter();
+  const { top = [], bottom = [], onItemClick } = props;
+
+  const renderNode = (item: SidebarNode, key: number) => {
+    if ("type" in item) {
+      if (item.type === "spacer") {
+        return <Flex key={key} h={16} />;
+      }
+
+      if (item.type === "divider") {
+        return (
+          <Flex
+            key={key}
+            h={1}
+            bg={"var(--alepha-border)"}
+            my={"md"}
+            mx={"sm"}
+          />
+        );
+      }
+
+      if (item.type === "search") {
+        return <OmnibarButton collapsed={props.collapsed} key={key} />;
+      }
+
+      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>
+        );
+      }
+    }
+
+    if ("element" in item) {
+      return <Flex key={key}>{item.element}</Flex>;
+    }
+
+    if (props.collapsed) {
+      return (
+        <SidebarCollapsedItem
+          key={key}
+          item={item}
+          level={0}
+          onItemClick={onItemClick}
+          theme={props.theme ?? {}}
+        />
+      );
+    }
+
+    return (
+      <SidebarItem
+        key={key}
+        item={item}
+        level={0}
+        onItemClick={onItemClick}
+        theme={props.theme ?? {}}
+      />
+    );
+  };
+
+  const padding = "md";
+  const gap = props.gap;
+  const menu =
+    props.menu ??
+    (router.concretePages.map((page) => ({
+      label: page.label ?? page.name,
+      description: page.description,
+      icon: page.icon,
+      href: page.path,
+    })) as SidebarMenuItem[]);
+
+  return (
+    <Flex
+      flex={1}
+      py={padding}
+      direction={"column"}
+      className={"overflow-auto"}
+      {...props.flexProps}
+    >
+      <Flex gap={gap} px={padding} direction={"column"}>
+        {top.map((item, index) => renderNode(item, index))}
+        {menu
+          .filter((it) => it.position === "top")
+          .map((item, index) => renderNode(item, index + top.length))}
+      </Flex>
+      <Flex
+        gap={gap}
+        px={padding}
+        direction={"column"}
+        flex={1}
+        className={"overflow-auto"}
+      >
+        {menu
+          .filter((it) => !it.position)
+          .map((item, index) => renderNode(item, index))}
+      </Flex>
+      <Flex gap={gap} px={padding} direction={"column"}>
+        {bottom.map((item, index) => renderNode(item, index))}
+        {menu
+          .filter((it) => it.position === "bottom")
+          .map((item, index) => renderNode(item, index + bottom.length))}
+      </Flex>
+    </Flex>
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface SidebarItemProps {
+  item: SidebarMenuItem;
+  level: number;
+  onItemClick?: (item: SidebarMenuItem) => void;
+  theme: SidebarTheme;
+}
+
+export const SidebarItem = (props: SidebarItemProps) => {
+  const { item, level } = props;
+  const maxLevel = 2; // 0, 1, 2 = 3 levels total
+
+  const router = useRouter();
+  const isActive = useCallback((item: SidebarMenuItem): boolean => {
+    if (!item.children) return false;
+    for (const child of item.children) {
+      if (child.href) {
+        if (router.isActive(child.href)) {
+          return true;
+        }
+      }
+      if (isActive(child)) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  const [isOpen, setIsOpen] = useState<boolean>(isActive(item));
+
+  useEvents(
+    {
+      "react:transition:end": () => {
+        // recalculate open state on transition end to ensure correct state after navigation
+        if (isActive(item)) {
+          setIsOpen(true);
+        }
+      },
+    },
+    [],
+  );
+
+  if (level > maxLevel) return null;
+
+  const handleItemClick = (e: MouseEvent) => {
+    e.preventDefault();
+    if (item.children && item.children.length > 0) {
+      setIsOpen(!isOpen);
+    } else {
+      props.onItemClick?.(item);
+      item.onClick?.();
+    }
+  };
+
+  return (
+    <Flex direction={"column"} ps={level === 0 ? 0 : 32} pos={"relative"}>
+      <ActionButton
+        w={"100%"}
+        justify="space-between"
+        href={props.item.href}
+        variant={"subtle"}
+        size={
+          props.item.theme?.size ??
+          props.theme.button?.size ??
+          (level === 0 ? "sm" : "xs")
+        }
+        variantActive={"default"}
+        radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
+        onClick={handleItemClick}
+        leftSection={
+          <Flex w={"100%"} align="center" gap={"sm"}>
+            {item.icon && (
+              <ThemeIcon
+                size={level === 0 ? "sm" : "xs"}
+                variant={"transparent"}
+              >
+                {item.icon}
+              </ThemeIcon>
+            )}
+            <Flex direction={"column"}>
+              <Flex>{item.label}</Flex>
+              {item.description && (
+                <Text size={"xs"} c={"dimmed"}>
+                  {item.description}
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+        }
+        rightSection={
+          item.children ? (
+            <Flex>
+              {isOpen ? (
+                <IconChevronDown size={14} />
+              ) : (
+                <IconChevronRight size={14} />
+              )}
+            </Flex>
+          ) : (
+            props.item.rightSection
+          )
+        }
+        {...props.item.actionProps}
+      />
+
+      {item.children && isOpen && (
+        <Flex direction={"column"} data-parent-level={level}>
+          <Flex
+            style={{
+              position: "absolute",
+              width: 1,
+              background:
+                "linear-gradient(to bottom, transparent, var(--alepha-border), transparent)",
+              top: 48,
+              left: 20 + 32 * level,
+              bottom: 16,
+            }}
+          />
+          {item.children.map((child, index) => (
+            <SidebarItem
+              key={index}
+              item={child}
+              level={level + 1}
+              onItemClick={props.onItemClick}
+              theme={props.theme}
+            />
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface SidebarItemProps {
+  item: SidebarMenuItem;
+  level: number;
+  onItemClick?: (item: SidebarMenuItem) => void;
+  theme: SidebarTheme;
+}
+
+const SidebarCollapsedItem = (props: SidebarItemProps) => {
+  const { item, level } = props;
+
+  const router = useRouter();
+  const isActive = useCallback((item: SidebarMenuItem): boolean => {
+    if (!item.children) return false;
+    for (const child of item.children) {
+      if (child.href) {
+        if (router.isActive(child.href)) {
+          return true;
+        }
+      }
+      if (isActive(child)) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  const [isOpen, setIsOpen] = useState<boolean>(isActive(item));
+
+  const handleItemClick = (e: MouseEvent) => {
+    e.preventDefault();
+    if (item.children && item.children.length > 0) {
+      setIsOpen(!isOpen);
+    } else {
+      props.onItemClick?.(item);
+      item.onClick?.();
+    }
+  };
+
+  return (
+    <ActionButton
+      variant={"subtle"}
+      size={
+        props.item.theme?.size ??
+        props.theme.button?.size ??
+        (level === 0 ? "sm" : "xs")
+      }
+      variantActive={"default"}
+      radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
+      onClick={handleItemClick}
+      icon={item.icon ?? <IconSquareRounded />}
+      href={props.item.href}
+      menu={
+        item.children
+          ? {
+              position: "right",
+              on: "hover",
+              items: item.children.map((child) => ({
+                label: child.label,
+                href: child.href,
+                icon: child.icon,
+                children: child.children,
+              })),
+            }
+          : undefined
+      }
+      {...props.item.actionProps}
+    />
+  );
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export type SidebarNode =
+  | SidebarMenuItem
+  | SidebarSpacer
+  | SidebarDivider
+  | SidebarSearch
+  | SidebarElement
+  | SidebarSection;
+
+export interface SidebarAbstractItem {
+  position?: "top" | "bottom";
+}
+
+export interface SidebarElement extends SidebarAbstractItem {
+  element: ReactNode;
+}
+
+export interface SidebarSpacer extends SidebarAbstractItem {
+  type: "spacer";
+}
+
+export interface SidebarDivider extends SidebarAbstractItem {
+  type: "divider";
+}
+
+export interface SidebarSearch extends SidebarAbstractItem {
+  type: "search";
+}
+
+export interface SidebarSection extends SidebarAbstractItem {
+  type: "section";
+  label: string;
+}
+
+export interface SidebarMenuItem extends SidebarAbstractItem {
+  label: string | ReactNode;
+  description?: string;
+  icon?: ReactNode;
+  href?: string;
+  activeStartsWith?: boolean; // Use startWith matching for active state
+  onClick?: () => void;
+  children?: SidebarMenuItem[];
+  rightSection?: ReactNode;
+  theme?: SidebarButtonTheme;
+  actionProps?: ActionProps;
+}
+
+export interface SidebarButtonTheme {
+  radius?: MantineBreakpoint;
+  size?: MantineBreakpoint;
+}
+
+export interface SidebarTheme {
+  button?: SidebarButtonTheme;
+  search?: SidebarButtonTheme;
+}

package/src/components/table/DataTable.tsx

@@ -0,0 +1,63 @@
+import type { Async } from "@alepha/core";
+import type { TableTrProps } from "@mantine/core";
+import { Table, type TableProps } from "@mantine/core";
+import { type ReactNode, useEffect, useState } from "react";
+import ActionButton from "../buttons/ActionButton.tsx";
+
+export interface DataTableColumn<T extends object> {
+  label: string;
+  value: (item: T) => ReactNode;
+}
+
+export interface DataTableProps<T extends object> {
+  items: T[] | (() => Async<T[]>);
+  columns: {
+    [key: string]: DataTableColumn<T>;
+  };
+  tableProps?: TableProps;
+  tableTrProps?: (item: T) => TableTrProps;
+}
+
+const DataTable = <T extends object>(props: DataTableProps<T>) => {
+  const [items, setItems] = useState<object[]>(
+    typeof props.items === "function" ? [] : props.items,
+  );
+
+  useEffect(() => {
+    if (typeof props.items !== "function") {
+      setItems(props.items);
+    }
+  }, [props.items]);
+
+  const head = Object.entries(props.columns).map(([key, col]) => (
+    <Table.Th key={key}>
+      <ActionButton justify={"space-between"} radius={0} fullWidth size={"xs"}>
+        {col.label}
+      </ActionButton>
+    </Table.Th>
+  ));
+
+  const rows = items.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.Tr>
+    );
+  });
+
+  return (
+    <Table {...props.tableProps}>
+      <Table.Thead>
+        <Table.Tr>{head}</Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>{rows}</Table.Tbody>
+    </Table>
+  );
+};
+
+export default DataTable;

package/src/constants/ui.ts

@@ -0,0 +1,8 @@
+export const ui = {
+  colors: {
+    transparent: "transparent",
+    background: "var(--alepha-background)",
+    surface: "var(--alepha-surface)",
+    elevated: "var(--alepha-elevated)",
+  },
+};

package/src/index.ts

@@ -1,37 +1,71 @@
 import { $module } from "@alepha/core";
-import { AlephaReact } from "@alepha/react";
-import type { ControlProps } from "./components/Control.tsx";
+import { AlephaReactForm } from "@alepha/react-form";
+import { AlephaReactHead } from "@alepha/react-head";
+import { AlephaReactI18n } from "@alepha/react-i18n";
+import type { ReactNode } from "react";
+import type { ControlProps } from "./components/form/Control.tsx";
 import { RootRouter } from "./RootRouter.ts";
 import { DialogService } from "./services/DialogService.tsx";
 import { ToastService } from "./services/ToastService.tsx";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export { Flex } from "@mantine/core";
-export { default as Action } from "./components/Action.tsx";
-export { default as AlephaMantineProvider } from "./components/AlephaMantineProvider.tsx";
-export { default as Control } from "./components/Control.tsx";
-export { default as ControlDate } from "./components/ControlDate.tsx";
-export { default as ControlSelect } from "./components/ControlSelect.tsx";
-export { default as DarkModeButton } from "./components/DarkModeButton.tsx";
+export { Flex, Text } from "@mantine/core";
 export type {
-  DataTableColumn,
-  DataTableFilter,
-  DataTableProps,
-  DataTableSort,
-} from "./components/DataTable.tsx";
-export { default as DataTable } from "./components/DataTable.tsx";
-export { AlertDialog } from "./components/dialogs/AlertDialog.tsx";
-export { ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
-export { PromptDialog } from "./components/dialogs/PromptDialog.tsx";
-export { default as Omnibar } from "./components/Omnibar.tsx";
+  ActionClickButtonProps,
+  ActionCommonProps,
+  ActionMenuConfig,
+  ActionMenuItem,
+  ActionNavigationButtonProps,
+  ActionProps,
+  ActionSubmitButtonProps,
+} from "./components/buttons/ActionButton.tsx";
+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 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 ControlSelect } from "./components/form/ControlSelect.tsx";
+export { default as TypeForm } from "./components/form/TypeForm.tsx";
+export { default as AdminShell } from "./components/layout/AdminShell.tsx";
+export { default as AlephaMantineProvider } from "./components/layout/AlephaMantineProvider.tsx";
+export type {
+  AppBarBurger,
+  AppBarDark,
+  AppBarDivider,
+  AppBarElement,
+  AppBarItem,
+  AppBarLang,
+  AppBarProps,
+  AppBarSearch,
+  AppBarSpacer,
+} from "./components/layout/AppBar.tsx";
+export { default as AppBar } from "./components/layout/AppBar.tsx";
+export { default as Omnibar } from "./components/layout/Omnibar.tsx";
 export type {
-  MenuItem,
+  SidebarAbstractItem,
+  SidebarButtonTheme,
+  SidebarDivider,
+  SidebarElement,
   SidebarItemProps,
+  SidebarMenuItem,
+  SidebarNode,
   SidebarProps,
-} from "./components/Sidebar.tsx";
-export { Sidebar, SidebarItem } from "./components/Sidebar.tsx";
-export { default as TypeForm } from "./components/TypeForm.tsx";
+  SidebarSearch,
+  SidebarSection,
+  SidebarSpacer,
+  SidebarTheme,
+} from "./components/layout/Sidebar.tsx";
+export { Sidebar } from "./components/layout/Sidebar.tsx";
+export type {
+  DataTableColumn,
+  DataTableProps,
+} from "./components/table/DataTable.tsx";
+export { default as DataTable } from "./components/table/DataTable.tsx";
+export * from "./constants/ui.ts";
 export { useDialog } from "./hooks/useDialog.ts";
 export { useToast } from "./hooks/useToast.ts";
 export * from "./RootRouter.ts";
@@ -57,6 +91,30 @@ declare module "typebox" {
   }
 }
 
+declare module "@alepha/react" {
+  interface PageDescriptorOptions {
+    /**
+     * Human-readable title for the page.
+     * - for Sidebar navigation
+     * - for Omnibar navigation
+     * (soon)
+     * - for Breadcrumbs
+     * - for document title (with AlephaReactHead)
+     */
+    label?: string;
+
+    /**
+     * Optional description of the page.
+     */
+    description?: string;
+
+    /**
+     * Optional icon for the page.
+     */
+    icon?: ReactNode;
+  }
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
@@ -66,5 +124,12 @@ declare module "typebox" {
  */
 export const AlephaUI = $module({
   name: "alepha.ui",
-  services: [AlephaReact, DialogService, ToastService, RootRouter],
+  services: [DialogService, ToastService, RootRouter],
+  register: (alepha) => {
+    alepha.with(AlephaReactI18n);
+    alepha.with(AlephaReactHead);
+    alepha.with(AlephaReactForm);
+    alepha.with(DialogService);
+    alepha.with(ToastService);
+  },
 });

package/src/services/DialogService.tsx

@@ -1,9 +1,9 @@
 import type { ModalProps } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import type { ReactNode } from "react";
-import { AlertDialog } from "../components/dialogs/AlertDialog";
-import { ConfirmDialog } from "../components/dialogs/ConfirmDialog";
-import { PromptDialog } from "../components/dialogs/PromptDialog";
+import AlertDialog from "../components/dialogs/AlertDialog";
+import ConfirmDialog from "../components/dialogs/ConfirmDialog";
+import PromptDialog from "../components/dialogs/PromptDialog";
 
 // Base interfaces
 export interface BaseDialogOptions extends Partial<ModalProps> {
@@ -139,27 +139,11 @@ export class DialogService {
    * Open a custom dialog with provided content
    */
   public open(options?: BaseDialogOptions): string {
-    const modalId = modals.open({
+    return modals.open({
       ...this.options.default,
       ...options,
       children: options?.content || options?.message,
     });
-    return modalId;
-  }
-
-  /**
-   * Show a JSON editor/viewer dialog
-   */
-  public json(data?: any, options?: BaseDialogOptions): void {
-    // Implementation to be added
-  }
-
-  /**
-   * Show a form dialog for structured input
-   */
-  public form(options?: BaseDialogOptions): Promise<any> {
-    // Implementation to be added
-    return Promise.resolve(null);
   }
 
   /**
@@ -174,34 +158,31 @@ export class DialogService {
   }
 
   /**
-   * Show a loading/progress dialog with optional progress percentage
+   * Show a JSON editor/viewer dialog
    */
-  public loading(options?: BaseDialogOptions & { progress?: number }): void {
+  public json(data?: any, options?: BaseDialogOptions): void {
     // Implementation to be added
   }
 
   /**
-   * Show an image viewer/gallery dialog
+   * Show a form dialog for structured input
    */
-  public image(src: string | string[], options?: BaseDialogOptions): void {
+  public form(options?: BaseDialogOptions): Promise<any> {
     // Implementation to be added
+    return Promise.resolve(null);
   }
 
   /**
-   * Show a table/data grid dialog for displaying tabular data
+   * Show a loading/progress dialog with optional progress percentage
    */
-  public table(
-    data: any[],
-    options?: BaseDialogOptions & { columns?: any[] },
-  ): void {
+  public loading(options?: BaseDialogOptions & { progress?: number }): void {
     // Implementation to be added
   }
 
   /**
-   * Show a multi-step wizard dialog
+   * Show an image viewer/gallery dialog
    */
-  public wizard(steps: any[], options?: BaseDialogOptions): Promise<any> {
+  public image(src: string | string[], options?: BaseDialogOptions): void {
     // Implementation to be added
-    return Promise.resolve(null);
   }
 }