@alepha/ui 0.15.1 → 0.15.2

package/src/core/components/layout/AdminShell.tsx

@@ -1,5 +1,3 @@
-import { useEvents, useStore } from "@alepha/react";
-import { NestedView, useRouter } from "@alepha/react/router";
 import {
   AppShell,
   type AppShellFooterProps,
@@ -7,8 +5,18 @@ import {
   type AppShellMainProps,
   type AppShellNavbarProps,
   type AppShellProps,
+  Flex,
 } from "@mantine/core";
-import { type ReactNode, useState } from "react";
+import { useEvents, useStore } from "alepha/react";
+import { NestedView, useRouter } from "alepha/react/router";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
 import { ui } from "../../constants/ui.ts";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
 import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
@@ -25,6 +33,12 @@ export interface AdminShellProps {
   footer?: ReactNode;
   children?: ReactNode;
 
+  /**
+   * Enable drag-to-resize for the sidebar.
+   * Width and constraints are configured in alephaSidebarAtom.
+   */
+  resizable?: boolean;
+
   noSidebarWhen?: {
     /**
      * Paths where the sidebar should be hidden.
@@ -33,28 +47,143 @@ export interface AdminShellProps {
   };
 }
 
-declare module "alepha" {
-  interface State {
-    /**
-     * Whether the sidebar is opened or closed.
-     */
-    "alepha.ui.sidebar.opened"?: boolean;
-
-    /**
-     * Whether the sidebar is collapsed (narrow) or expanded (wide).
-     */
-    "alepha.ui.sidebar.collapsed"?: boolean;
-  }
-}
-
 const AdminShell = (props: AdminShellProps) => {
   const router = useRouter();
-  const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
-  const [collapsed] = useStore(
-    "alepha.ui.sidebar.collapsed",
-    props.sidebarProps?.collapsed,
+  const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
+  const { opened, collapsed } = sidebar;
+
+  // Initialize collapsed state from props on mount
+  useEffect(() => {
+    if (props.sidebarProps?.collapsed !== undefined) {
+      setSidebar({ ...sidebar, collapsed: props.sidebarProps.collapsed });
+    }
+  }, []);
+
+  // Resize state
+  const [isResizing, setIsResizing] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [collapseEffect, setCollapseEffect] = useState({
+    offset: 0,
+    opacity: 1,
+  });
+  const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  // Use atom values for constraints
+  const {
+    collapsedWidth,
+    collapseThreshold,
+    maxWidth,
+    hoverDelay,
+    defaultWidth,
+  } = sidebar;
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      if (!props.resizable) return;
+      e.preventDefault();
+
+      // If collapsed and hovering, un-collapse first and start from defaultWidth
+      if (collapsed) {
+        setSidebar({ ...sidebar, collapsed: false, width: defaultWidth });
+        setIsResizing(true);
+        resizeRef.current = {
+          startX: e.clientX,
+          startWidth: defaultWidth,
+        };
+      } else {
+        setIsResizing(true);
+        resizeRef.current = {
+          startX: e.clientX,
+          startWidth: sidebar.width,
+        };
+      }
+    },
+    [props.resizable, collapsed, sidebar, setSidebar, defaultWidth],
   );
 
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!resizeRef.current) return;
+      const delta = e.clientX - resizeRef.current.startX;
+      const rawWidth = resizeRef.current.startWidth + delta;
+      const newWidth = Math.min(Math.max(rawWidth, collapsedWidth), maxWidth);
+
+      // Visual effect when below collapse threshold
+      if (rawWidth < collapseThreshold) {
+        const progress = Math.max(
+          0,
+          (collapseThreshold - rawWidth) / collapseThreshold,
+        );
+        setCollapseEffect({
+          offset: -progress * collapsedWidth,
+          opacity: 1 - progress * 0.7,
+        });
+        setSidebar({ ...sidebar, width: collapseThreshold, collapsed: false });
+      } else {
+        setCollapseEffect({ offset: 0, opacity: 1 });
+        setSidebar({ ...sidebar, width: newWidth, collapsed: false });
+      }
+    };
+
+    const handleMouseUp = () => {
+      // If we released while in collapse zone, actually collapse
+      if (collapseEffect.offset < 0) {
+        setSidebar({ ...sidebar, collapsed: true });
+      }
+      setCollapseEffect({ offset: 0, opacity: 1 });
+      setIsResizing(false);
+      resizeRef.current = null;
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    isResizing,
+    sidebar,
+    setSidebar,
+    collapsedWidth,
+    maxWidth,
+    collapseThreshold,
+    collapseEffect.offset,
+  ]);
+
+  // Hover to expand when collapsed (with delay)
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleNavbarMouseEnter = useCallback(() => {
+    if (collapsed) {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsHovering(true);
+      }, hoverDelay);
+    }
+  }, [collapsed, hoverDelay]);
+
+  const handleNavbarMouseLeave = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setIsHovering(false);
+  }, []);
+
+  // Reset hover state when collapsed changes (e.g., when toggle button is clicked)
+  useEffect(() => {
+    if (collapsed) {
+      setIsHovering(false);
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+    }
+  }, [collapsed]);
+
   const shouldShowSidebar = () => {
     if (props.noSidebarWhen?.paths) {
       for (const path of props.noSidebarWhen.paths) {
@@ -78,10 +207,10 @@ const AdminShell = (props: AdminShellProps) => {
         setShowSidebar(shouldShowSidebar());
       },
       "react:transition:begin": () => {
-        setOpened(false);
+        setSidebar({ ...sidebar, opened: false });
       },
     },
-    [],
+    [sidebar],
   );
 
   // Default AppBar items with burger button on the left
@@ -94,7 +223,20 @@ const AdminShell = (props: AdminShellProps) => {
 
   const headerHeight = hasAppBar ? 60 : 0;
   const footerHeight = props.footer ? 24 : 0;
-  const sidebarWidth = hasSidebar ? (collapsed ? 78 : 300) : 0;
+  const expandedWidth = Math.max(sidebar.width, collapsedWidth);
+
+  // When collapsed but hovering, show defaultWidth (not current width)
+  const isExpandedByHover = collapsed && isHovering;
+  const effectiveCollapsed = collapsed && !isHovering;
+  const hoverWidth = Math.max(defaultWidth, collapsedWidth);
+  const sidebarWidth = hasSidebar
+    ? effectiveCollapsed
+      ? collapsedWidth
+      : isExpandedByHover
+        ? hoverWidth
+        : expandedWidth
+    : 0;
+  const canResize = props.resizable && !collapsed;
 
   return (
     <AppShell
@@ -105,7 +247,11 @@ const AdminShell = (props: AdminShellProps) => {
       navbar={
         hasSidebar
           ? {
-              width: collapsed ? { base: 78 } : { base: 300 },
+              width: effectiveCollapsed
+                ? { base: collapsedWidth }
+                : isExpandedByHover
+                  ? { base: hoverWidth }
+                  : { base: expandedWidth },
               breakpoint: "sm",
               collapsed: { mobile: !opened },
             }
@@ -121,8 +267,38 @@ const AdminShell = (props: AdminShellProps) => {
       </AppShell.Header>
 
       {hasSidebar && (
-        <AppShell.Navbar bg={ui.colors.surface} {...props.appShellNavbarProps}>
-          <Sidebar collapsed={collapsed} {...(props.sidebarProps ?? {})} />
+        <AppShell.Navbar
+          bg={ui.colors.surface}
+          className="alepha-sidebar-navbar"
+          data-resizing={isResizing}
+          onMouseEnter={handleNavbarMouseEnter}
+          onMouseLeave={handleNavbarMouseLeave}
+          style={{
+            transform: collapseEffect.offset
+              ? `translateX(${collapseEffect.offset}px)`
+              : undefined,
+            opacity: collapseEffect.opacity,
+          }}
+          {...props.appShellNavbarProps}
+        >
+          <Sidebar
+            {...(props.sidebarProps ?? {})}
+            collapsed={effectiveCollapsed}
+          />
+          {(canResize || isExpandedByHover) && (
+            <Flex
+              pos="absolute"
+              right={-2}
+              top={0}
+              bottom={0}
+              w={4}
+              style={{
+                cursor: "col-resize",
+                userSelect: "none",
+              }}
+              onMouseDown={handleResizeStart}
+            />
+          )}
         </AppShell.Navbar>
       )}
 
@@ -134,6 +310,8 @@ const AdminShell = (props: AdminShellProps) => {
         display={"flex"}
         flex={1}
         style={{ flexDirection: "column" }}
+        className="alepha-sidebar-main"
+        data-resizing={isResizing}
         {...props.appShellMainProps}
       >
         {props.children ?? <NestedView />}

package/src/core/components/layout/AlephaMantineProvider.tsx

@@ -1,6 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { FormValidationError } from "@alepha/react/form";
-import { NestedView } from "@alepha/react/router";
 import {
   ColorSchemeScript,
   type ColorSchemeScriptProps,
@@ -12,6 +9,9 @@ import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 import { TypeBoxError } from "alepha";
+import { useEvents } from "alepha/react";
+import { FormValidationError } from "alepha/react/form";
+import { NestedView } from "alepha/react/router";
 import type { ReactNode } from "react";
 import { useTheme } from "../../hooks/useTheme.ts";
 import { useToast } from "../../hooks/useToast.ts";

package/src/core/components/layout/Omnibar.tsx

@@ -1,7 +1,7 @@
-import { useStore } from "@alepha/react";
-import { useRouter } from "@alepha/react/router";
 import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
+import { useStore } from "alepha/react";
+import { useRouter } from "alepha/react/router";
 import { type ReactNode, useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import { renderIcon } from "../../helpers/renderIcon.tsx";

package/src/core/components/layout/Sidebar.tsx

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { useRouter } from "@alepha/react/router";
 import {
   Flex,
   type FlexProps,
@@ -11,6 +9,8 @@ import {
   IconChevronRight,
   IconSquareRounded,
 } from "@tabler/icons-react";
+import { useEvents } from "alepha/react";
+import { useRouter } from "alepha/react/router";
 import {
   type ComponentType,
   type ReactNode,
@@ -49,44 +49,51 @@ export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
   const { onItemClick } = props;
 
+  const divider = (key: string | number) => {
+    return (
+      <Flex
+        key={key}
+        h={1}
+        bg={"var(--alepha-border)"}
+        my={"xs"}
+        mx={props.collapsed ? 0 : "sm"}
+      />
+    );
+  };
+
   const renderNode = (item: SidebarNode, key: number) => {
     if ("type" in item) {
+      // Hide spacers when collapsed
       if (item.type === "spacer") {
+        if (props.collapsed) return null;
         return <Flex key={key} h={16} />;
       }
 
       if (item.type === "divider") {
-        return (
-          <Flex
-            key={key}
-            h={1}
-            bg={"var(--alepha-border)"}
-            my={"md"}
-            mx={"sm"}
-          />
-        );
+        return divider(key);
       }
 
       if (item.type === "search") {
-        return <OmnibarButton collapsed={props.collapsed} key={key} />;
+        return (
+          <Flex key={key} mb="xs">
+            <OmnibarButton collapsed={props.collapsed} />
+          </Flex>
+        );
       }
 
       if (item.type === "toggle") {
         return <ToggleSidebarButton key={key} />;
       }
 
+      // Replace sections with dividers when collapsed
       if (item.type === "section") {
-        if (props.collapsed) return;
+        if (props.collapsed) {
+          return divider(key);
+        }
         return (
-          <Flex key={key} mt={"md"} mb={"xs"} align={"center"} gap={"xs"}>
+          <Flex key={key} mt={"md"} align={"center"} gap={"xs"}>
             {renderIcon(item.icon)}
-            <Text
-              key={key}
-              size={"xs"}
-              c={"dimmed"}
-              tt={"uppercase"}
-              fw={"bold"}
-            >
+            <Text size={"xs"} c={"dimmed"} tt={"uppercase"} fw={"bold"}>
               {item.label}
             </Text>
           </Flex>
@@ -150,15 +157,18 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const padding = "md";
-  const gap = props.items ? props.gap : "xs";
-  const menu = useMemo(() => getSidebarNodes(), []);
+  const gap = props.items ? (props.gap ?? 2) : "xs";
+  const menu = useMemo(
+    () => getSidebarNodes(),
+    [props.items, props.autoPopulateMenu],
+  );
 
   return (
     <Flex
       flex={1}
       py={padding}
       direction={"column"}
-      className={"overflow-auto"}
+      className="alepha-sidebar-scroll"
       {...props.flexProps}
     >
       <Flex gap={gap} px={padding} direction={"column"}>
@@ -171,7 +181,7 @@ export const Sidebar = (props: SidebarProps) => {
         px={padding}
         direction={"column"}
         flex={1}
-        className={"overflow-auto"}
+        className="alepha-sidebar-scroll"
       >
         {menu
           .filter((it) => !it.position)
@@ -332,34 +342,9 @@ export interface SidebarItemProps {
 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) => {
-    if (!props.item.target) {
-      e.preventDefault();
-    }
-    if (item.children && item.children.length > 0) {
-      setIsOpen(!isOpen);
-    } else {
-      props.onItemClick?.(item);
-      item.onClick?.();
-    }
+  const handleItemClick = () => {
+    props.onItemClick?.(item);
+    item.onClick?.();
   };
 
   return (
@@ -371,35 +356,15 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       }
       variant={"subtle"}
       variantActive={"default"}
-      tooltip={
-        item.children
-          ? undefined
-          : {
-              label: item.label,
-              position: "right",
-            }
-      }
+      tooltip={{
+        label: item.label,
+        position: "right",
+      }}
       radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
       onClick={handleItemClick}
       icon={renderIcon(item.icon) ?? <IconSquareRounded />}
       href={props.item.href as any}
       target={props.item.target}
-      menu={
-        item.children
-          ? ({
-              position: "right",
-              on: "hover",
-              items: item.children
-                .filter((child) => !child.can || child.can())
-                .map((child) => ({
-                  label: child.label,
-                  href: child.href,
-                  icon: renderIcon(child.icon),
-                  children: child.children?.filter((c) => !c.can || c.can()),
-                })),
-            } as any)
-          : undefined
-      }
       {...props.item.actionProps}
     />
   );

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

@@ -1,5 +1,3 @@
-import { useInject } from "@alepha/react";
-import { type FormModel, useForm } from "@alepha/react/form";
 import { Checkbox, Flex, Table, Text, UnstyledButton } from "@mantine/core";
 import { useDebouncedCallback } from "@mantine/hooks";
 import {
@@ -9,6 +7,8 @@ import {
 } from "@tabler/icons-react";
 import { Alepha, type Static, type TObject, t } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
+import { useInject } from "alepha/react";
+import { type FormModel, useForm } from "alepha/react/form";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import DataTableFilters, {

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

@@ -1,6 +1,6 @@
-import type { FormModel } from "@alepha/react/form";
 import { Flex } from "@mantine/core";
 import { type TObject, t } from "alepha";
+import type { FormModel } from "alepha/react/form";
 import { useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import TypeForm, { type TypeFormProps } from "../form/TypeForm.tsx";

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

@@ -1,4 +1,3 @@
-import type { FormModel } from "@alepha/react/form";
 import type { TableProps, TableTrProps } from "@mantine/core";
 import type {
   Alepha,
@@ -9,6 +8,7 @@ import type {
   TObject,
 } from "alepha";
 import type { DurationLike } from "alepha/datetime";
+import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
 import type { ActionProps } from "../buttons/ActionButton.tsx";
 import type { TypeFormProps } from "../form/TypeForm.tsx";

package/src/core/hooks/useDialog.ts

@@ -1,4 +1,4 @@
-import { useInject } from "@alepha/react";
+import { useInject } from "alepha/react";
 import { DialogService } from "../services/DialogService.tsx";
 
 /**

package/src/core/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useInject, useStore } from "@alepha/react";
+import { useInject, useStore } from "alepha/react";
 import {
   alephaThemeAtom,
   type CurrentAlephaTheme,

package/src/core/hooks/useToast.ts

@@ -1,4 +1,4 @@
-import { useInject } from "@alepha/react";
+import { useInject } from "alepha/react";
 import { ToastService } from "../services/ToastService.tsx";
 
 /**

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, type Static } from "alepha";
+import { $context, $module, type Static } from "alepha";
+import { AlephaReactForm } from "alepha/react/form";
+import { AlephaReactHead } from "alepha/react/head";
+import { AlephaReactI18n } from "alepha/react/i18n";
 import type { ComponentType, ReactNode } from "react";
+import { alephaSidebarAtom } from "./atoms/alephaSidebarAtom.ts";
 import { alephaThemeAtom } from "./atoms/alephaThemeAtom.ts";
 import type { ControlProps } from "./components/form/Control.tsx";
 import { ThemeProvider } from "./providers/ThemeProvider.ts";
@@ -13,6 +14,7 @@ import { ToastService } from "./services/ToastService.tsx";
 // ---------------------------------------------------------------------------------------------------------------------
 
 export { Flex, Text } from "@mantine/core";
+export * from "./atoms/alephaSidebarAtom.ts";
 export * from "./atoms/alephaThemeAtom.ts";
 export * from "./atoms/alephaThemeListAtom.ts";
 export * from "./atoms/themes/default.ts";
@@ -35,6 +37,7 @@ export { default as LanguageButton } from "./components/buttons/LanguageButton.t
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
 export type { ThemeButtonProps } from "./components/buttons/ThemeButton.tsx";
 export { default as ThemeButton } from "./components/buttons/ThemeButton.tsx";
+export { default as ToggleSidebarButton } from "./components/buttons/ToggleSidebarButton.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";
@@ -121,11 +124,12 @@ declare module "typebox" {
 
 declare module "alepha" {
   interface State {
+    [alephaSidebarAtom.key]?: Static<typeof alephaSidebarAtom.schema>;
     [alephaThemeAtom.key]?: Static<typeof alephaThemeAtom.schema>;
   }
 }
 
-declare module "@alepha/react/router" {
+declare module "alepha/react/router" {
   interface PagePrimitiveOptions {
     /**
      * Human-readable title for the page.
@@ -152,7 +156,25 @@ declare module "@alepha/react/router" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * Mantine
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | experimental |
+ *
+ * Core UI components based on Mantine UI v8.
+ *
+ * **Features:**
+ * - Mantine integration with theme support
+ * - ActionButton, BurgerButton, ClipboardButton, DarkModeButton, LanguageButton, ThemeButton
+ * - AlertDialog, ConfirmDialog, PromptDialog
+ * - Form controls: Control, ControlArray, ControlDate, ControlNumber, ControlObject, ControlSelect, ControlQueryBuilder
+ * - TypeForm for automatic form generation from TypeBox schemas
+ * - AdminShell layout component
+ * - AppBar with configurable elements
+ * - Sidebar navigation with sections and menu items
+ * - Omnibar for command palette / search
+ * - DataTable with filtering, sorting, pagination
+ * - Toast notifications
+ * - Theme system with dark mode
  *
  * @module alepha.ui
  */
@@ -168,3 +190,32 @@ export const AlephaUI = $module({
     alepha.with(ToastService);
   },
 });
+
+/**
+ * Register UI components and get the RootRouter instance.
+ */
+export const $ui = (
+  opts: {
+    // TODO:
+    // theme?: ThemeOptions;
+    // root?: string = "/";
+  } = {},
+) => {
+  const { alepha } = $context();
+
+  // TODO: Register unique instance ? In order to have multiple ui apps in the same context ?
+  // app = $ui();
+  // admin = $ui({ root: "/admin", theme: adminTheme });
+  // auth = $ui({ root: "/auth", theme: authTheme });
+  // etc...
+
+  /**
+   * If multi ui, should we have N themes ? or one $atom theme but with change based on current ui app ?
+   *
+   * App (theme=T1) -> Admin (theme=T2) ?
+   *
+   * > It can be done with onLeave()/onEnter() of the RootRouter to set the theme atom.
+   */
+
+  return alepha.inject(RootRouter); // Inject as singleton ?
+};

package/src/core/providers/ThemeProvider.ts

@@ -1,5 +1,5 @@
-import { $head } from "@alepha/react/head";
 import { $inject, Alepha, AlephaError } from "alepha";
+import { $head } from "alepha/react/head";
 import { $cookie } from "alepha/server/cookies";
 import { alephaThemeAtom } from "../atoms/alephaThemeAtom.ts";
 import { alephaThemeListAtom } from "../atoms/alephaThemeListAtom.ts";