@alepha/ui 0.10.7 → 0.11.0

package/src/components/Action.tsx

@@ -6,13 +6,93 @@ import {
   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
+
+  /**
+   * 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.
@@ -28,25 +108,78 @@ export type ActionProps = ActionCommonProps &
 
 // ---------------------------------------------------------------------------------------------------------------------
 
+// 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 };
+  const { tooltip, menu, ...restProps } = props;
 
   if (props.leftSection && !props.children) {
-    props.className ??= "mantine-Action-iconOnly";
-    props.p ??= "xs";
+    restProps.className ??= "mantine-Action-iconOnly";
+    restProps.p ??= "xs";
   }
 
   if (props.textVisibleFrom) {
-    const { children, textVisibleFrom, leftSection, ...rest } = props;
+    const { children, textVisibleFrom, leftSection, ...rest } = restProps;
     return (
       <>
         <Flex w={"100%"} visibleFrom={textVisibleFrom}>
-          <Action flex={1} {...rest} leftSection={leftSection}>
+          <Action
+            flex={1}
+            {...rest}
+            leftSection={leftSection}
+            tooltip={tooltip}
+            menu={menu}
+          >
             {children}
           </Action>
         </Flex>
         <Flex w={"100%"} hiddenFrom={textVisibleFrom}>
-          <Action px={"xs"} {...rest}>
+          <Action px={"xs"} {...rest} tooltip={tooltip} menu={menu}>
             {leftSection}
           </Action>
         </Flex>
@@ -55,34 +188,62 @@ const Action = (_props: ActionProps) => {
   }
 
   const renderAction = () => {
-    if ("href" in props && props.href) {
+    if ("href" in restProps && restProps.href) {
       return (
-        <ActionHref {...props} href={props.href}>
-          {props.children}
+        <ActionHref {...restProps} href={restProps.href}>
+          {restProps.children}
         </ActionHref>
       );
     }
 
-    if ("onClick" in props && props.onClick) {
+    if ("onClick" in restProps && restProps.onClick) {
       return (
-        <ActionClick {...props} onClick={props.onClick}>
-          {props.children}
+        <ActionClick {...restProps} onClick={restProps.onClick}>
+          {restProps.children}
         </ActionClick>
       );
     }
 
-    if ("form" in props && props.form) {
+    if ("form" in restProps && restProps.form) {
       return (
-        <ActionSubmit {...props} form={props.form}>
-          {props.children}
+        <ActionSubmit {...restProps} form={restProps.form}>
+          {restProps.children}
         </ActionSubmit>
       );
     }
 
-    return <Button {...(props as any)}>{props.children}</Button>;
+    return <Button {...(restProps as any)}>{restProps.children}</Button>;
   };
 
-  return renderAction();
+  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;

package/src/components/Control.tsx

@@ -1,12 +1,5 @@
-import { type TObject, TypeBoxError } from "@alepha/core";
+import { useFormState } from "@alepha/react-form";
 import {
-  type InputField,
-  type UseFormStateReturn,
-  useFormState,
-} from "@alepha/react-form";
-import {
-  Autocomplete,
-  type AutocompleteProps,
   ColorInput,
   type ColorInputProps,
   FileInput,
@@ -17,9 +10,6 @@ import {
   type NumberInputProps,
   PasswordInput,
   type PasswordInputProps,
-  SegmentedControl,
-  type SegmentedControlProps,
-  type SelectProps,
   Switch,
   type SwitchProps,
   Textarea,
@@ -32,20 +22,17 @@ import type {
   DateTimePickerProps,
   TimeInputProps,
 } from "@mantine/dates";
-import type { ComponentType, ReactNode } from "react";
-import { getDefaultIcon } from "../utils/icons.tsx";
-import { prettyName } from "../utils/string.ts";
+import type { ComponentType } from "react";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 import ControlDate from "./ControlDate";
-import ControlSelect from "./ControlSelect";
+import ControlSelect, { type ControlSelectProps } from "./ControlSelect";
 
 export interface ControlProps extends GenericControlProps {
   text?: TextInputProps;
   area?: boolean | TextareaProps;
-  select?: boolean | SelectProps;
-  autocomplete?: boolean | AutocompleteProps;
+  select?: boolean | Partial<ControlSelectProps>;
   password?: boolean | PasswordInputProps;
   switch?: boolean | SwitchProps;
-  segmented?: boolean | Partial<SegmentedControlProps>;
   number?: boolean | NumberInputProps;
   file?: boolean | FileInputProps;
   color?: boolean | ColorInputProps;
@@ -76,20 +63,17 @@ export interface ControlProps extends GenericControlProps {
  *
  * Automatically handles labels, descriptions, error messages, required state, and default icons.
  */
-const Control = (props: ControlProps) => {
-  const form = useFormState(props.input);
-  const { inputProps, id, icon } = parseInput(props, form);
-  if (!props.input?.props) {
+const Control = (_props: ControlProps) => {
+  const form = useFormState(_props.input, ["error"]);
+  const { inputProps, id, icon, format, schema } = parseInput(_props, form);
+  if (!_props.input?.props) {
     return null;
   }
 
-  // Extract format once to avoid redeclaration
-  const format =
-    props.input.schema &&
-    "format" in props.input.schema &&
-    typeof props.input.schema.format === "string"
-      ? props.input.schema.format
-      : undefined;
+  const props = {
+    ..._props,
+    ...schema.$control,
+  };
 
   //region <Custom/>
   if (props.custom) {
@@ -164,55 +148,6 @@ const Control = (props: ControlProps) => {
   }
   //endregion
 
-  //region <SegmentedControl/>
-  if (props.segmented) {
-    const segmentedControlProps: Partial<SegmentedControlProps> =
-      typeof props.segmented === "object" ? props.segmented : {};
-    const data =
-      segmentedControlProps.data ??
-      (props.input.schema &&
-      "enum" in props.input.schema &&
-      Array.isArray(props.input.schema.enum)
-        ? props.input.schema.enum?.map((value: string) => ({
-            value,
-            label: value,
-          }))
-        : []);
-    return (
-      <Input.Wrapper {...inputProps}>
-        <Flex mt={"calc(var(--mantine-spacing-xs) / 2)"}>
-          <SegmentedControl
-            disabled={inputProps.disabled}
-            defaultValue={String(props.input.props.defaultValue)}
-            {...segmentedControlProps}
-            onChange={(value) => {
-              props.input.set(value);
-            }}
-            data={data}
-          />
-        </Flex>
-      </Input.Wrapper>
-    );
-  }
-  //endregion
-
-  //region <Autocomplete/>
-  if (props.autocomplete) {
-    const autocompleteProps =
-      typeof props.autocomplete === "object" ? props.autocomplete : {};
-
-    return (
-      <Autocomplete
-        {...inputProps}
-        id={id}
-        leftSection={icon}
-        {...props.input.props}
-        {...autocompleteProps}
-      />
-    );
-  }
-  //endregion
-
   //region <ControlSelect/>
   // Handle: single enum, array of enum, array of strings, or explicit select/multi/tags props
   const isEnum =
@@ -225,13 +160,14 @@ const Control = (props: ControlProps) => {
     props.input.schema.type === "array";
 
   if (isEnum || isArray || props.select) {
+    const opts = typeof props.select === "object" ? props.select : {};
     return (
       <ControlSelect
         input={props.input}
         title={props.title}
         description={props.description}
         icon={icon}
-        select={props.select}
+        {...opts}
       />
     );
   }
@@ -348,81 +284,6 @@ const Control = (props: ControlProps) => {
 
 export default Control;
 
-// =============================================================================
-// Helper Types and Functions
-// =============================================================================
-
-export interface GenericControlProps {
-  input: InputField;
-  title?: string;
-  description?: string;
-  icon?: ReactNode;
-}
-
-export const parseInput = (
-  props: GenericControlProps,
-  form: UseFormStateReturn<TObject>,
-) => {
-  const disabled = false; // form.loading;
-  const id = props.input.props.id;
-  const label =
-    props.title ??
-    ("title" in props.input.schema &&
-    typeof props.input.schema.title === "string"
-      ? props.input.schema.title
-      : undefined) ??
-    prettyName(props.input.path);
-  const description =
-    props.description ??
-    ("description" in props.input.schema &&
-    typeof props.input.schema.description === "string"
-      ? props.input.schema.description
-      : undefined);
-  const error =
-    form.error && form.error instanceof TypeBoxError
-      ? form.error.value.message
-      : undefined;
-
-  // Auto-generate icon if not provided
-  const icon =
-    props.icon ??
-    getDefaultIcon({
-      type:
-        props.input.schema && "type" in props.input.schema
-          ? String(props.input.schema.type)
-          : undefined,
-      format:
-        props.input.schema &&
-        "format" in props.input.schema &&
-        typeof props.input.schema.format === "string"
-          ? props.input.schema.format
-          : undefined,
-      name: props.input.props.name,
-      isEnum:
-        props.input.schema &&
-        "enum" in props.input.schema &&
-        Boolean(props.input.schema.enum),
-      isArray:
-        props.input.schema &&
-        "type" in props.input.schema &&
-        props.input.schema.type === "array",
-    });
-
-  const required = props.input.required;
-
-  return {
-    id,
-    icon,
-    inputProps: {
-      label,
-      description,
-      error,
-      required,
-      disabled,
-    },
-  };
-};
-
 export type CustomControlProps = {
   defaultValue: any;
   onChange: (value: any) => void;

package/src/components/ControlDate.tsx

@@ -7,7 +7,7 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
-import { type GenericControlProps, parseInput } from "./Control.tsx";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
 
 export interface ControlDateProps extends GenericControlProps {
   date?: boolean | DateInputProps;
@@ -27,19 +27,11 @@ export interface ControlDateProps extends GenericControlProps {
  */
 const ControlDate = (props: ControlDateProps) => {
   const form = useFormState(props.input);
-  const { inputProps, id, icon } = parseInput(props, form);
+  const { inputProps, id, icon, format } = parseInput(props, form);
   if (!props.input?.props) {
     return null;
   }
 
-  // Detect format from schema
-  const format =
-    props.input.schema &&
-    "format" in props.input.schema &&
-    typeof props.input.schema.format === "string"
-      ? props.input.schema.format
-      : undefined;
-
   // region <DateTimePicker/>
   if (props.datetime || format === "date-time") {
     const dateTimePickerProps =

package/src/components/ControlSelect.tsx

@@ -1,18 +1,33 @@
 import { useFormState } from "@alepha/react-form";
 import {
+  Autocomplete,
+  type AutocompleteProps,
+  Flex,
+  Input,
   MultiSelect,
   type MultiSelectProps,
+  SegmentedControl,
+  type SegmentedControlProps,
   Select,
   type SelectProps,
   TagsInput,
   type TagsInputProps,
 } from "@mantine/core";
-import { type GenericControlProps, parseInput } from "./Control.tsx";
+import { useEffect, useState } from "react";
+import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+
+export type SelectValueLabel =
+  | string
+  | { value: string; label: string; icon?: string };
 
 export interface ControlSelectProps extends GenericControlProps {
   select?: boolean | SelectProps;
   multi?: boolean | MultiSelectProps;
   tags?: boolean | TagsInputProps;
+  autocomplete?: boolean | AutocompleteProps;
+  segmented?: boolean | Partial<SegmentedControlProps>;
+
+  loader?: () => Promise<SelectValueLabel[]>;
 }
 
 /**
@@ -31,9 +46,6 @@ export interface ControlSelectProps extends GenericControlProps {
 const ControlSelect = (props: ControlSelectProps) => {
   const form = useFormState(props.input);
   const { inputProps, id, icon } = parseInput(props, form);
-  if (!props.input?.props) {
-    return null;
-  }
 
   // Detect if schema is an array type
   const isArray =
@@ -58,6 +70,61 @@ const ControlSelect = (props: ControlSelectProps) => {
       ? props.input.schema.enum
       : [];
 
+  const [data, setData] = useState<SelectValueLabel[]>([]);
+
+  useEffect(() => {
+    if (!props.input?.props) {
+      return;
+    }
+
+    if (props.loader) {
+      props.loader().then(setData);
+    } else {
+      setData(enumValues);
+    }
+  }, [props.input, props.loader]);
+
+  if (!props.input?.props) {
+    return null;
+  }
+
+  if (props.segmented) {
+    const segmentedControlProps: Partial<SegmentedControlProps> =
+      typeof props.segmented === "object" ? props.segmented : {};
+
+    return (
+      <Input.Wrapper {...inputProps}>
+        <Flex mt={"calc(var(--mantine-spacing-xs) / 2)"}>
+          <SegmentedControl
+            disabled={inputProps.disabled}
+            defaultValue={String(props.input.props.defaultValue)}
+            {...segmentedControlProps}
+            onChange={(value) => {
+              props.input.set(value);
+            }}
+            data={data.slice(0, 10)}
+          />
+        </Flex>
+      </Input.Wrapper>
+    );
+  }
+
+  if (props.autocomplete) {
+    const autocompleteProps =
+      typeof props.autocomplete === "object" ? props.autocomplete : {};
+
+    return (
+      <Autocomplete
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        data={data}
+        {...props.input.props}
+        {...autocompleteProps}
+      />
+    );
+  }
+
   // region <TagsInput/> - for array of strings without enum
   if ((isArray && !itemsEnum) || props.tags) {
     const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
@@ -111,11 +178,6 @@ const ControlSelect = (props: ControlSelectProps) => {
   // endregion
 
   // region <Select/> - for single enum value
-  const data = enumValues.map((value: string) => ({
-    value,
-    label: value,
-  }));
-
   const selectProps = typeof props.select === "object" ? props.select : {};
 
   return (

package/src/components/DarkModeButton.tsx

@@ -24,10 +24,11 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
   const { setColorScheme } = useMantineColorScheme();
   const computedColorScheme = useComputedColorScheme("light");
   const [colorScheme, setColorScheme2] = useState("default");
+  const mode = props.mode ?? "minimal";
+
   useEffect(() => {
     setColorScheme2(computedColorScheme);
   }, [computedColorScheme]);
-  const mode = props.mode ?? "minimal";
 
   const toggleColorScheme = () => {
     setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
@@ -67,7 +68,13 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
       size={props.size ?? "lg"}
       aria-label="Toggle color scheme"
     >
-      {colorScheme === "dark" ? <IconSun size={20} /> : <IconMoon size={20} />}
+      {colorScheme === "dark" ? (
+        <IconSun size={20} />
+      ) : colorScheme === "light" ? (
+        <IconMoon size={20} />
+      ) : (
+        <Flex h={20} />
+      )}
     </ActionIcon>
   );
 };