@alepha/ui 0.10.6 → 0.11.0

package/src/components/Action.tsx

@@ -1,88 +1,249 @@
 import {
-	type RouterGoOptions,
-	type UseActiveOptions,
-	useActive,
-	useAlepha,
-	useRouter,
+  type RouterGoOptions,
+  type UseActiveOptions,
+  useActive,
+  useAlepha,
+  useRouter,
 } from "@alepha/react";
 import { type FormModel, useFormState } from "@alepha/react-form";
-import { Button, type ButtonProps, Flex } from "@mantine/core";
+import {
+  Button,
+  type ButtonProps,
+  Flex,
+  Menu,
+  Tooltip,
+  type TooltipProps,
+} from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
 import { type ReactNode, useState } from "react";
 
+export interface ActionMenuItem {
+  /**
+   * Menu item type
+   */
+  type?: "item" | "divider" | "label";
+
+  /**
+   * Label text for the menu item
+   */
+  label?: string;
+
+  /**
+   * Icon element to display before the label
+   */
+  icon?: ReactNode;
+
+  /**
+   * Click handler for menu items
+   */
+  onClick?: () => void;
+
+  /**
+   * Color for the menu item (e.g., "red" for danger actions)
+   */
+  color?: string;
+
+  /**
+   * Nested submenu items
+   */
+  children?: ActionMenuItem[];
+}
+
+export interface ActionMenuConfig {
+  /**
+   * Array of menu items to display
+   */
+  items: ActionMenuItem[];
+
+  /**
+   * Menu position relative to the button
+   */
+  position?:
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "left"
+    | "right";
+
+  /**
+   * Menu width
+   */
+  width?: number | string;
+
+  /**
+   * Menu shadow
+   */
+  shadow?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
 export interface ActionCommonProps extends ButtonProps {
-	children?: ReactNode;
-	textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
-	// TODO
-
-	/**
-	 * If set, a confirmation dialog will be shown before performing the action.
-	 * If `true`, a default title and message will be used.
-	 * If a string, it will be used as the message with a default title.
-	 * If an object, it can contain `title` and `message` properties to customize the dialog.
-	 */
-	confirm?: boolean | string | { title?: string; message: string };
+  children?: ReactNode;
+  textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Tooltip to display on hover. Can be a string for simple tooltips
+   * or a TooltipProps object for advanced configuration.
+   */
+  tooltip?: string | TooltipProps;
+
+  /**
+   * Menu configuration. When provided, the action will display a dropdown menu.
+   */
+  menu?: ActionMenuConfig;
+
+  /**
+   * If set, a confirmation dialog will be shown before performing the action.
+   * If `true`, a default title and message will be used.
+   * If a string, it will be used as the message with a default title.
+   * If an object, it can contain `title` and `message` properties to customize the dialog.
+   */
+  confirm?: boolean | string | { title?: string; message: string };
 }
 
 export type ActionProps = ActionCommonProps &
-	(ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
+  (ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
 
 // ---------------------------------------------------------------------------------------------------------------------
 
+// Helper function to render menu items recursively
+const renderMenuItem = (item: ActionMenuItem, index: number): ReactNode => {
+  // Render divider
+  if (item.type === "divider") {
+    return <Menu.Divider key={index} />;
+  }
+
+  // Render label
+  if (item.type === "label") {
+    return <Menu.Label key={index}>{item.label}</Menu.Label>;
+  }
+
+  // Render submenu if has children
+  if (item.children && item.children.length > 0) {
+    return (
+      <Menu key={index} trigger="hover" position="right-start" offset={2}>
+        <Menu.Target>
+          <Menu.Item
+            leftSection={item.icon}
+            rightSection={<IconChevronRight size={14} />}
+          >
+            {item.label}
+          </Menu.Item>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {item.children.map((child, childIndex) =>
+            renderMenuItem(child, childIndex),
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  // Render regular menu item
+  return (
+    <Menu.Item
+      key={index}
+      leftSection={item.icon}
+      onClick={item.onClick}
+      color={item.color}
+    >
+      {item.label}
+    </Menu.Item>
+  );
+};
+
 const Action = (_props: ActionProps) => {
-	const props = { variant: "subtle", ..._props };
-
-	if (props.leftSection && !props.children) {
-		props.className ??= "mantine-Action-iconOnly";
-		props.p ??= "xs";
-	}
-
-	if (props.textVisibleFrom) {
-		const { children, textVisibleFrom, leftSection, ...rest } = props;
-		return (
-			<>
-				<Flex w={"100%"} visibleFrom={textVisibleFrom}>
-					<Action flex={1} {...rest} leftSection={leftSection}>
-						{children}
-					</Action>
-				</Flex>
-				<Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-					<Action px={"xs"} {...rest}>
-						{leftSection}
-					</Action>
-				</Flex>
-			</>
-		);
-	}
-
-	const renderAction = () => {
-		if ("href" in props && props.href) {
-			return (
-				<ActionHref {...props} href={props.href}>
-					{props.children}
-				</ActionHref>
-			);
-		}
-
-		if ("onClick" in props && props.onClick) {
-			return (
-				<ActionClick {...props} onClick={props.onClick}>
-					{props.children}
-				</ActionClick>
-			);
-		}
-
-		if ("form" in props && props.form) {
-			return (
-				<ActionSubmit {...props} form={props.form}>
-					{props.children}
-				</ActionSubmit>
-			);
-		}
-
-		return <Button {...(props as any)}>{props.children}</Button>;
-	};
-
-	return renderAction();
+  const props = { variant: "subtle", ..._props };
+  const { tooltip, menu, ...restProps } = props;
+
+  if (props.leftSection && !props.children) {
+    restProps.className ??= "mantine-Action-iconOnly";
+    restProps.p ??= "xs";
+  }
+
+  if (props.textVisibleFrom) {
+    const { children, textVisibleFrom, leftSection, ...rest } = restProps;
+    return (
+      <>
+        <Flex w={"100%"} visibleFrom={textVisibleFrom}>
+          <Action
+            flex={1}
+            {...rest}
+            leftSection={leftSection}
+            tooltip={tooltip}
+            menu={menu}
+          >
+            {children}
+          </Action>
+        </Flex>
+        <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
+          <Action px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
+            {leftSection}
+          </Action>
+        </Flex>
+      </>
+    );
+  }
+
+  const renderAction = () => {
+    if ("href" in restProps && restProps.href) {
+      return (
+        <ActionHref {...restProps} href={restProps.href}>
+          {restProps.children}
+        </ActionHref>
+      );
+    }
+
+    if ("onClick" in restProps && restProps.onClick) {
+      return (
+        <ActionClick {...restProps} onClick={restProps.onClick}>
+          {restProps.children}
+        </ActionClick>
+      );
+    }
+
+    if ("form" in restProps && restProps.form) {
+      return (
+        <ActionSubmit {...restProps} form={restProps.form}>
+          {restProps.children}
+        </ActionSubmit>
+      );
+    }
+
+    return <Button {...(restProps as any)}>{restProps.children}</Button>;
+  };
+
+  let actionElement = renderAction();
+
+  // Wrap with Menu if provided
+  if (menu) {
+    actionElement = (
+      <Menu
+        position={menu.position || "bottom-start"}
+        width={menu.width || 200}
+        shadow={menu.shadow || "md"}
+      >
+        <Menu.Target>{actionElement}</Menu.Target>
+        <Menu.Dropdown>
+          {menu.items.map((item, index) => renderMenuItem(item, index))}
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  // Wrap with Tooltip if provided
+  if (tooltip) {
+    const tooltipProps: TooltipProps =
+      typeof tooltip === "string"
+        ? { label: tooltip, children: actionElement }
+        : { ...tooltip, children: actionElement };
+
+    return <Tooltip {...tooltipProps} />;
+  }
+
+  return actionElement;
 };
 
 export default Action;
@@ -90,95 +251,95 @@ export default Action;
 // ---------------------------------------------------------------------------------------------------------------------
 
 export interface ActionSubmitProps extends ButtonProps {
-	form: FormModel<any>;
+  form: FormModel<any>;
 }
 
 /**
  * Action button that submits a form with loading and disabled state handling.
  */
 const ActionSubmit = (props: ActionSubmitProps) => {
-	const { form, ...buttonProps } = props;
-	const state = useFormState(form);
-	return (
-		<Button
-			{...buttonProps}
-			loading={state.loading}
-			disabled={state.loading || !state.dirty}
-			type={"submit"}
-		>
-			{props.children}
-		</Button>
-	);
+  const { form, ...buttonProps } = props;
+  const state = useFormState(form);
+  return (
+    <Button
+      {...buttonProps}
+      loading={state.loading}
+      disabled={state.loading}
+      type={"submit"}
+    >
+      {props.children}
+    </Button>
+  );
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export interface ActionClickProps extends ButtonProps {
-	onClick: (e: any) => any;
+  onClick: (e: any) => any;
 }
 
 /**
  * Basic action button that handles click events with loading and error handling.
  */
 const ActionClick = (props: ActionClickProps) => {
-	const [pending, setPending] = useState(false);
-	const alepha = useAlepha();
-
-	const onClick = async (e: any) => {
-		setPending(true);
-		try {
-			await props.onClick(e);
-		} catch (e) {
-			console.error(e);
-			await alepha.events.emit("form:submit:error", {
-				id: "action",
-				error: e as Error,
-			});
-		} finally {
-			setPending(false);
-		}
-	};
-
-	return (
-		<Button
-			{...props}
-			disabled={pending || props.disabled}
-			loading={pending}
-			onClick={onClick}
-		>
-			{props.children}
-		</Button>
-	);
+  const [pending, setPending] = useState(false);
+  const alepha = useAlepha();
+
+  const onClick = async (e: any) => {
+    setPending(true);
+    try {
+      await props.onClick(e);
+    } catch (e) {
+      console.error(e);
+      await alepha.events.emit("form:submit:error", {
+        id: "action",
+        error: e as Error,
+      });
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <Button
+      {...props}
+      disabled={pending || props.disabled}
+      loading={pending}
+      onClick={onClick}
+    >
+      {props.children}
+    </Button>
+  );
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export interface ActiveHrefProps extends ButtonProps {
-	href: string;
-	active?: Partial<UseActiveOptions> | false;
-	routerGoOptions?: RouterGoOptions;
+  href: string;
+  active?: Partial<UseActiveOptions> | false;
+  routerGoOptions?: RouterGoOptions;
 }
 
 /**
  * Action for navigation with active state support.
  */
 const ActionHref = (props: ActiveHrefProps) => {
-	const { active: options, routerGoOptions, ...buttonProps } = props;
-	const router = useRouter();
-	const { isPending, isActive } = useActive(
-		options ? { href: props.href, ...options } : { href: props.href },
-	);
-	const anchorProps = router.anchor(props.href, routerGoOptions);
-
-	return (
-		<Button
-			component={"a"}
-			loading={isPending}
-			{...anchorProps}
-			{...buttonProps}
-			variant={isActive && options !== false ? "filled" : "subtle"}
-		>
-			{props.children}
-		</Button>
-	);
+  const { active: options, routerGoOptions, ...buttonProps } = props;
+  const router = useRouter();
+  const { isPending, isActive } = useActive(
+    options ? { href: props.href, ...options } : { href: props.href },
+  );
+  const anchorProps = router.anchor(props.href, routerGoOptions);
+
+  return (
+    <Button
+      component={"a"}
+      loading={isPending}
+      {...anchorProps}
+      {...buttonProps}
+      variant={isActive && options !== false ? "filled" : "subtle"}
+    >
+      {props.children}
+    </Button>
+  );
 };

package/src/components/AlephaMantineProvider.tsx

@@ -1,7 +1,7 @@
 import { NestedView, useRouterEvents } from "@alepha/react";
 import type {
-	ColorSchemeScriptProps,
-	MantineProviderProps,
+  ColorSchemeScriptProps,
+  MantineProviderProps,
 } from "@mantine/core";
 import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import { ModalsProvider, type ModalsProviderProps } from "@mantine/modals";
@@ -9,41 +9,44 @@ import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 import type { ReactNode } from "react";
+import Omnibar, { type OmnibarProps } from "./Omnibar";
 
 export interface AlephaMantineProviderProps {
-	children?: ReactNode;
-	mantine?: MantineProviderProps;
-	colorSchemeScript?: ColorSchemeScriptProps;
-	navigationProgress?: NavigationProgressProps;
-	notifications?: NotificationsProps;
-	modals?: ModalsProviderProps;
+  children?: ReactNode;
+  mantine?: MantineProviderProps;
+  colorSchemeScript?: ColorSchemeScriptProps;
+  navigationProgress?: NavigationProgressProps;
+  notifications?: NotificationsProps;
+  modals?: ModalsProviderProps;
+  omnibar?: OmnibarProps;
 }
 
 const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
-	useRouterEvents({
-		onBegin: () => {
-			nprogress.start();
-		},
-		onEnd: () => {
-			nprogress.complete();
-		},
-	});
+  useRouterEvents({
+    onBegin: () => {
+      nprogress.start();
+    },
+    onEnd: () => {
+      nprogress.complete();
+    },
+  });
 
-	return (
-		<>
-			<ColorSchemeScript
-				defaultColorScheme={props.mantine?.defaultColorScheme}
-				{...props.colorSchemeScript}
-			/>
-			<MantineProvider {...props.mantine}>
-				<Notifications {...props.notifications} />
-				<NavigationProgress {...props.navigationProgress} />
-				<ModalsProvider {...props.modals}>
-					{props.children ?? <NestedView />}
-				</ModalsProvider>
-			</MantineProvider>
-		</>
-	);
+  return (
+    <>
+      <ColorSchemeScript
+        defaultColorScheme={props.mantine?.defaultColorScheme}
+        {...props.colorSchemeScript}
+      />
+      <MantineProvider {...props.mantine}>
+        <Notifications {...props.notifications} />
+        <NavigationProgress {...props.navigationProgress} />
+        <ModalsProvider {...props.modals}>
+          <Omnibar {...props.omnibar} />
+          {props.children ?? <NestedView />}
+        </ModalsProvider>
+      </MantineProvider>
+    </>
+  );
 };
 
 export default AlephaMantineProvider;