@alepha/ui 0.12.0 → 0.13.0

package/src/auth/components/buttons/UserButton.tsx

@@ -0,0 +1,118 @@
+import { useAuth } from "@alepha/react/auth";
+import {
+  ActionButton,
+  type ActionMenuConfig,
+  type ActionMenuItem,
+  type ActionProps,
+  ui,
+} from "@alepha/ui";
+import { Avatar } from "@mantine/core";
+import { IconLogout, IconUser } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+export interface UserButtonProps
+  extends Omit<ActionProps, "menu" | "icon" | "onClick"> {
+  /**
+   * Additional menu items to display before the logout option
+   */
+  menuItems?: ActionMenuItem[];
+
+  /**
+   * Custom logout label (default: "Sign out")
+   */
+  logoutLabel?: string;
+
+  /**
+   * Menu configuration overrides
+   */
+  menuConfig?: Partial<Omit<ActionMenuConfig, "items">>;
+
+  /**
+   * Whether to show a divider before logout (default: true when menuItems provided)
+   */
+  showLogoutDivider?: boolean;
+
+  /**
+   * Custom icon to use instead of user avatar (default: IconUser)
+   */
+  icon?: ReactNode;
+}
+
+const UserButton = (props: UserButtonProps) => {
+  const {
+    menuItems = [],
+    logoutLabel = "Sign out",
+    menuConfig,
+    showLogoutDivider = menuItems.length > 0,
+    icon,
+    children,
+    ...buttonProps
+  } = props;
+
+  const auth = useAuth<{
+    username?: string;
+    email?: string;
+    picture?: string;
+  }>();
+
+  if (!auth.user) {
+    return null;
+  }
+
+  const userLabel = auth.user.username || auth.user.email;
+
+  const items: ActionMenuItem[] = [];
+
+  // Add user info label if available
+  if (auth.user.email && auth.user.username) {
+    items.push({
+      type: "label",
+      label: auth.user.email,
+    });
+  }
+
+  // Add custom menu items
+  items.push(...menuItems);
+
+  // Add divider before logout if needed
+  if (showLogoutDivider && items.length > 0) {
+    items.push({ type: "divider" });
+  }
+
+  // Add logout item
+  items.push({
+    label: logoutLabel,
+    icon: <IconLogout size={ui.sizes.icon.md} />,
+    color: "red",
+    onClick: () => auth.logout(),
+  });
+
+  // Use leftSection for Avatar (JSX element), icon prop for component types
+  const hasAvatar = !icon && auth.user.picture;
+
+  return (
+    <ActionButton
+      {...buttonProps}
+      icon={hasAvatar ? undefined : (icon ?? IconUser)}
+      leftSection={
+        hasAvatar ? (
+          <Avatar
+            src={`/api/files/${auth.user.picture}`}
+            size={24}
+            radius="xl"
+          />
+        ) : undefined
+      }
+      menu={{
+        position: "bottom-end",
+        width: 200,
+        ...menuConfig,
+        items,
+      }}
+    >
+      {children ?? userLabel}
+    </ActionButton>
+  );
+};
+
+export default UserButton;

package/src/auth/components/icons/IconGithub.tsx

@@ -0,0 +1,21 @@
+const IconGithub = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 1024 1024"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+        transform="scale(64)"
+        fill={"var(--alepha-text)"}
+      />
+    </svg>
+  );
+};
+
+export default IconGithub;

package/src/auth/components/icons/IconGoogle.tsx

@@ -0,0 +1,30 @@
+const IconGoogle = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+    >
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        fill="#4285F4"
+      />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853"
+      />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        fill="#FBBC05"
+      />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335"
+      />
+      <path d="M1 1h22v22H1z" fill="none" />
+    </svg>
+  );
+};
+
+export default IconGoogle;

package/src/auth/index.ts

@@ -0,0 +1,27 @@
+import { AlephaReactAuth } from "@alepha/react/auth";
+import { AlephaReactI18n } from "@alepha/react/i18n";
+import { AlephaUI } from "@alepha/ui";
+import { $module } from "alepha";
+import { AuthI18n } from "./AuthI18n.ts";
+import { AuthRouter } from "./AuthRouter.ts";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export * from "./AuthRouter.ts";
+export type { UserButtonProps } from "./components/buttons/UserButton.tsx";
+export { default as UserButton } from "./components/buttons/UserButton.tsx";
+export { default as Login } from "./components/Login.tsx";
+export { default as Register } from "./components/Register.tsx";
+export { default as ResetPassword } from "./components/ResetPassword.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Login UI Module
+ *
+ * @module alepha.ui.auth
+ */
+export const AlephaUIAuth = $module({
+  name: "alepha.ui.auth",
+  services: [AlephaUI, AlephaReactAuth, AlephaReactI18n, AuthRouter, AuthI18n],
+});

package/src/{RootRouter.ts → core/RootRouter.ts}

@@ -1,8 +1,9 @@
 import { $page } from "@alepha/react";
+import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
 
 export class RootRouter {
   public readonly root = $page({
     path: "/",
-    lazy: () => import("./components/layout/AlephaMantineProvider.tsx"),
+    component: AlephaMantineProvider,
   });
 }

package/src/{components → core/components}/buttons/ActionButton.tsx

@@ -8,6 +8,8 @@ import {
 } from "@alepha/react";
 import { type FormModel, useFormState } from "@alepha/react/form";
 import {
+  Anchor,
+  type AnchorProps,
   Button,
   type ButtonProps,
   Flex,
@@ -21,7 +23,14 @@ import {
   type TooltipProps,
 } from "@mantine/core";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import {
+  type ButtonHTMLAttributes,
+  Children,
+  type ComponentType,
+  isValidElement,
+  type ReactNode,
+} from "react";
+import { ui } from "../../constants/ui.ts";
 
 export interface ActionMenuItem {
   /**
@@ -97,11 +106,13 @@ export interface ActionMenuConfig {
   on?: "hover" | "click";
 
   targetProps?: MenuTargetProps;
+
   menuProps?: MenuProps;
 }
 
 export interface ActionCommonProps extends ButtonProps {
   children?: ReactNode;
+
   textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
@@ -127,7 +138,7 @@ export interface ActionCommonProps extends ButtonProps {
    * Icon to display on the left side of the button.
    * If no children are provided, the button will be styled as an icon-only button.
    */
-  icon?: ReactNode;
+  icon?: ReactNode | ComponentType;
 
   /**
    * Additional props to pass to the ThemeIcon wrapping the icon.
@@ -223,11 +234,13 @@ const ActionMenuItem = (props: {
 };
 
 const ActionButton = (_props: ActionProps) => {
-  const props = { variant: "subtle", ..._props };
+  const props = { variant: "default", ..._props };
   const { tooltip, menu, icon, ...restProps } = props;
 
   if (props.icon) {
-    const icon = (
+    const icon = isComponentType(props.icon) ? (
+      <props.icon size={ui.sizes.icon.md} />
+    ) : (
       <ThemeIcon
         w={24} // TODO: make size configurable
         variant={"transparent"}
@@ -235,11 +248,12 @@ const ActionButton = (_props: ActionProps) => {
         c={"var(--mantine-color-text)"}
         {...props.themeIconProps}
       >
-        {props.icon}
+        {props.icon as ReactNode}
       </ThemeIcon>
     );
+
     if (!props.children) {
-      restProps.children = icon;
+      restProps.children = Children.only(icon);
       restProps.p ??= "xs";
     } else {
       restProps.leftSection = icon;
@@ -509,6 +523,7 @@ export interface ActionNavigationButtonProps extends ButtonProps {
   classNameActive?: string;
   variantActive?: ButtonProps["variant"];
   target?: string;
+  anchorProps?: AnchorProps;
 }
 
 /**
@@ -533,6 +548,14 @@ const ActionNavigationButton = (props: ActionNavigationButtonProps) => {
     buttonProps.className = `${className} ${classNameActive}`.trim();
   }
 
+  if (props.anchorProps) {
+    return (
+      <Anchor component={"a"} {...anchorProps} {...props.anchorProps}>
+        {props.children}
+      </Anchor>
+    );
+  }
+
   return (
     <Button
       component={"a"}
@@ -566,3 +589,23 @@ const ActionHrefButton = (props: ActionNavigationButtonProps) => {
     </Button>
   );
 };
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+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)
+  );
+}
+
+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/components/buttons/ClipboardButton.tsx

@@ -0,0 +1,56 @@
+import { CopyButton, Tooltip } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import ActionButton, { type ActionCommonProps } from "./ActionButton.tsx";
+
+export interface ClipboardButtonProps
+  extends Omit<ActionCommonProps, "onClick" | "icon"> {
+  /**
+   * The value to copy to the clipboard
+   */
+  value: string;
+
+  /**
+   * Timeout in ms to show the "Copied" state (default: 2000)
+   */
+  timeout?: number;
+
+  /**
+   * Label to show in tooltip when not copied (default: "Copy")
+   */
+  copyLabel?: string;
+
+  /**
+   * Label to show in tooltip when copied (default: "Copied")
+   */
+  copiedLabel?: string;
+}
+
+const ClipboardButton = (props: ClipboardButtonProps) => {
+  const {
+    value,
+    timeout = 2000,
+    copyLabel = "Copy",
+    copiedLabel = "Copied",
+    children,
+    ...buttonProps
+  } = props;
+
+  return (
+    <CopyButton value={value} timeout={timeout}>
+      {({ copied, copy }) => (
+        <Tooltip label={copied ? copiedLabel : copyLabel} openDelay={500}>
+          <ActionButton
+            color={copied ? "teal" : undefined}
+            onClick={copy}
+            icon={copied ? IconCheck : IconCopy}
+            {...buttonProps}
+          >
+            {children}
+          </ActionButton>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+};
+
+export default ClipboardButton;

package/src/{components → core/components}/buttons/DarkModeButton.tsx

@@ -73,19 +73,18 @@ const DarkModeButton = (props: DarkModeButtonProps) => {
   return (
     <ActionButton
       onClick={toggleColorScheme}
-      variant={props.variant ?? "outline"}
+      variant={props.variant ?? "default"}
       size={props.size ?? "sm"}
       aria-label="Toggle color scheme"
       px={"xs"}
+      c={colorScheme !== "default" ? undefined : "transparent"}
       fullWidth={props.fullWidth ?? false}
       icon={
-        colorScheme === "dark" ? (
-          <IconSun size={20} />
-        ) : colorScheme === "light" ? (
-          <IconMoon size={20} />
-        ) : (
-          <Flex h={20} w={20} />
-        )
+        colorScheme === "dark"
+          ? IconSun
+          : colorScheme === "light"
+            ? IconMoon
+            : IconSun
       }
       {...props.actionProps}
     />

package/src/{components → core/components}/buttons/LanguageButton.tsx

@@ -11,8 +11,8 @@ const LanguageButton = (props: LanguageButtonProps) => {
   const i18n = useI18n();
   return (
     <ActionButton
-      icon={<IconLanguage />}
-      variant={"outline"}
+      variant={"default"}
+      icon={IconLanguage}
       menu={{
         items: i18n.languages.map((lang) => ({
           label: i18n.tr(lang),

package/src/{components → core/components}/buttons/OmnibarButton.tsx

@@ -11,7 +11,7 @@ export interface OmnibarButtonProps {
 const OmnibarButton = (props: OmnibarButtonProps) => {
   return (
     <ActionButton
-      variant={"outline"}
+      variant={"default"}
       miw={256}
       onClick={spotlight.open}
       justify={"space-between"}

package/src/{components → core/components}/dialogs/AlertDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Group, Text } from "@mantine/core";
-import type { AlertDialogProps } from "../../services/DialogService";
+import type { AlertDialogProps } from "../../services/DialogService.tsx";
 
 const AlertDialog = ({ options, onClose }: AlertDialogProps) => (
   <>

package/src/{components → core/components}/dialogs/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Group, Text } from "@mantine/core";
-import type { ConfirmDialogProps } from "../../services/DialogService";
+import type { ConfirmDialogProps } from "../../services/DialogService.tsx";
 
 const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
   <>

package/src/{components → core/components}/dialogs/PromptDialog.tsx

@@ -1,6 +1,6 @@
 import { Button, Group, Text, TextInput } from "@mantine/core";
 import { useEffect, useRef, useState } from "react";
-import type { PromptDialogProps } from "../../services/DialogService";
+import type { PromptDialogProps } from "../../services/DialogService.tsx";
 
 const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
   const [value, setValue] = useState(options?.defaultValue || "");

package/src/{components → core/components}/form/Control.tsx

@@ -297,6 +297,7 @@ const Control = (_props: ControlProps) => {
       type={getInputType()}
       {...props.input.props}
       {...textInputProps}
+      inputWrapperOrder={["label", "input", "description", "error"]}
     />
   );
   //endregion

package/src/{components → core/components}/layout/AdminShell.tsx

@@ -1,4 +1,4 @@
-import { NestedView, useEvents, useStore } from "@alepha/react";
+import { NestedView, useEvents, useRouter, useStore } from "@alepha/react";
 import {
   AppShell,
   type AppShellFooterProps,
@@ -7,7 +7,7 @@ import {
   type AppShellNavbarProps,
   type AppShellProps,
 } from "@mantine/core";
-import type { ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
 import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
@@ -23,6 +23,13 @@ export interface AdminShellProps {
   header?: ReactNode;
   footer?: ReactNode;
   children?: ReactNode;
+
+  noSidebarWhen?: {
+    /**
+     * Paths where the sidebar should be hidden.
+     */
+    paths?: string[];
+  };
 }
 
 declare module "alepha" {
@@ -40,14 +47,35 @@ declare module "alepha" {
 }
 
 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 shouldShowSidebar = () => {
+    if (props.noSidebarWhen?.paths) {
+      for (const path of props.noSidebarWhen.paths) {
+        if (
+          router.isActive(path, {
+            startWith: true,
+          })
+        ) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+
+  const [showSidebar, setShowSidebar] = useState(shouldShowSidebar());
+
   useEvents(
     {
+      "react:transition:end": () => {
+        setShowSidebar(shouldShowSidebar());
+      },
       "react:transition:begin": () => {
         setOpened(false);
       },
@@ -60,12 +88,15 @@ const AdminShell = (props: AdminShellProps) => {
     { position: "left" as const, type: "burger" as const },
   ];
 
+  const hasSidebar = showSidebar && props.sidebarProps !== undefined;
+  const hasAppBar = hasSidebar || props.appBarProps || props.header;
+
   return (
     <AppShell
       padding="md"
-      header={{ height: 60 }}
+      header={hasAppBar ? { height: 60 } : undefined}
       navbar={
-        props.sidebarProps !== undefined
+        hasSidebar
           ? {
               width: collapsed ? { base: 72 } : { base: 300 },
               breakpoint: "sm",
@@ -82,13 +113,13 @@ const AdminShell = (props: AdminShellProps) => {
         )}
       </AppShell.Header>
 
-      {props.sidebarProps !== undefined && (
+      {hasSidebar && (
         <AppShell.Navbar bg={ui.colors.surface} {...props.appShellNavbarProps}>
-          <Sidebar collapsed={collapsed} {...props.sidebarProps} />
+          <Sidebar collapsed={collapsed} {...(props.sidebarProps ?? {})} />
         </AppShell.Navbar>
       )}
 
-      <AppShell.Main {...props.appShellMainProps}>
+      <AppShell.Main display={"flex"} flex={1} {...props.appShellMainProps}>
         {props.children ?? <NestedView />}
       </AppShell.Main>
 

package/src/{components → core/components}/layout/AlephaMantineProvider.tsx

@@ -1,4 +1,5 @@
 import { NestedView, useEvents } from "@alepha/react";
+import { FormValidationError } from "@alepha/react/form";
 import type {
   ColorSchemeScriptProps,
   MantineProviderProps,
@@ -33,8 +34,17 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
       "react:transition:end": () => {
         nprogress.complete();
       },
-      "react:action:error": () => {
-        toast.danger("An error occurred while processing your action.");
+      "react:action:error": ({ error }) => {
+        if (error instanceof FormValidationError) {
+          // Validation errors are handled by the form component
+          return;
+        }
+
+        toast.danger({
+          title: error.name || "Error",
+          message:
+            error.message ?? "An error occurred while processing your action.",
+        });
       },
     },
     [],
@@ -49,12 +59,6 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
       <MantineProvider
         {...props.mantine}
         theme={{
-          primaryColor: "gray",
-          primaryShade: {
-            light: 9,
-            dark: 8,
-          },
-          cursorType: "pointer",
           ...props.mantine?.theme,
         }}
       >

package/src/{components → core/components}/layout/AppBar.tsx

@@ -119,7 +119,7 @@ const AppBar = (props: AppBarProps) => {
           </Flex>
         ))}
       </Flex>
-      <Flex flex={1} gap="md" align={"center"} justify={"end"}>
+      <Flex flex={1} align={"center"} justify={"end"}>
         {rightItems.map((item, index) => (
           <Flex key={index} ml={index === 0 ? 0 : "md"} align="center">
             {renderItem(item, index)}

package/src/{components → core/components}/layout/Omnibar.tsx

@@ -20,7 +20,7 @@ const Omnibar = (props: OmnibarProps) => {
         id: page.name,
         label: page.label ?? page.name,
         description: page.description,
-        onClick: () => router.go(page.path ?? page.name),
+        onClick: () => router.go(page.name),
         leftSection: page.icon,
       })),
     [],