@alepha/ui 0.18.3 → 0.19.1

package/src/admin/components/notifications/AdminNotifications.tsx

@@ -4,6 +4,7 @@ import {
   DataTable,
   DetailList,
   Flex,
+  Section,
   Text,
   useToast,
 } from "@alepha/ui";
@@ -384,19 +385,13 @@ const NotificationDetailContent = ({
       </Flex>
 
       {/* Details */}
-      <Paper p="sm" radius="md" withBorder>
-        <Text size="sm" fw={600} mb="xs">
-          Details
-        </Text>
+      <Section title="Details" p="sm">
         <DetailList items={detailItems} columns={2} />
-      </Paper>
+      </Section>
 
       {/* Rendered Content */}
       {rendered && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Content
-          </Text>
+        <Section title="Content" p="sm">
           {rendered.type === "email" && (
             <Flex direction="column" gap="xs">
               <Flex direction="column" gap={2}>
@@ -455,25 +450,19 @@ const NotificationDetailContent = ({
               </Flex>
             </Flex>
           )}
-        </Paper>
+        </Section>
       )}
 
       {/* Variables */}
       {detail.variables && Object.keys(detail.variables).length > 0 && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Variables
-          </Text>
+        <Section title="Variables" p="sm">
           <Code block>{JSON.stringify(detail.variables, null, 2)}</Code>
-        </Paper>
+        </Section>
       )}
 
       {/* Error */}
       {detail.error && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Error
-          </Text>
+        <Section title="Error" p="sm">
           <Paper p="xs" radius="sm" withBorder>
             <Text
               size="sm"
@@ -485,15 +474,12 @@ const NotificationDetailContent = ({
               {detail.error}
             </Text>
           </Paper>
-        </Paper>
+        </Section>
       )}
 
       {/* Logs */}
       {detail.logs && detail.logs.length > 0 && (
-        <Paper p="sm" radius="md" withBorder>
-          <Text size="sm" fw={600} mb="xs">
-            Logs ({detail.logs.length})
-          </Text>
+        <Section title={`Logs (${detail.logs.length})`} p="sm">
           <Flex
             direction="column"
             style={{ maxHeight: 300, overflowY: "auto" }}
@@ -510,7 +496,7 @@ const NotificationDetailContent = ({
               </Flex>
             ))}
           </Flex>
-        </Paper>
+        </Section>
       )}
     </Flex>
   );

package/src/admin/components/users/AdminUserLayout.tsx

@@ -1,47 +1,19 @@
-import { Flex, Text, useDialog, useToast } from "@alepha/ui";
-import { Loader } from "@mantine/core";
+import { Flex, useDialog, useToast } from "@alepha/ui";
 import { IconBan, IconShieldCheck, IconTrash } from "@tabler/icons-react";
-import { t } from "alepha";
 import type { AdminUserController, UserEntity } from "alepha/api/users";
-import { useClient } from "alepha/react";
-import { NestedView, useRouter, useRouterState } from "alepha/react/router";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { useAlepha, useClient, useStore } from "alepha/react";
+import { NestedView, useRouter } from "alepha/react/router";
+import { useCallback, useEffect } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
+import { adminUserAtom } from "../../atoms/adminUserAtom.ts";
 import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";
 import AdminResourceTabs from "../shared/AdminResourceTabs.tsx";
 
 export interface AdminUserLayoutProps {
-  userRealmName?: string;
-}
-
-interface UserContextValue {
   user: UserEntity;
-  reload: () => void;
+  userRealmName?: string;
 }
 
-const UserContext = createContext<UserContextValue | null>(null);
-
-export const useUser = () => {
-  const ctx = useContext(UserContext);
-  if (!ctx) throw new Error("useUser must be used within AdminUserLayout");
-  return ctx;
-};
-
-const updateUserSchema = t.object({
-  email: t.optional(t.email()),
-  phoneNumber: t.optional(t.e164()),
-  firstName: t.optional(t.string()),
-  lastName: t.optional(t.string()),
-  roles: t.optional(t.array(t.string())),
-  enabled: t.optional(t.boolean()),
-});
-
 const displayName = (u: UserEntity) =>
   u.firstName || u.lastName
     ? `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim()
@@ -49,63 +21,55 @@ const displayName = (u: UserEntity) =>
 
 const AdminUserLayout = (props: AdminUserLayoutProps) => {
   const router = useRouter<AdminRouter>();
-  const state = useRouterState();
   const client = useClient<AdminUserController>();
+  const alepha = useAlepha();
   const dialog = useDialog();
   const toast = useToast();
-  const userId = state.params.userId as string;
+  const [user] = useStore(adminUserAtom);
 
-  const [user, setUser] = useState<UserEntity | null>(null);
-  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    alepha.store.set(adminUserAtom, props.user);
+  }, [props.user]);
 
+  const currentUser = user ?? props.user;
+  const userId = currentUser.id;
   const realmQuery = { userRealmName: props.userRealmName };
 
-  const loadUser = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await client.getUser({
-        params: { id: userId },
-        query: realmQuery,
-      });
-      setUser(data);
-    } finally {
-      setLoading(false);
-    }
+  const reload = useCallback(async () => {
+    const data = await client.getUser({
+      params: { id: userId },
+      query: realmQuery,
+    });
+    alepha.store.set(adminUserAtom, data);
   }, [userId, client]);
 
-  useEffect(() => {
-    loadUser();
-  }, [loadUser]);
-
   const handleToggleEnabled = async () => {
-    if (!user) return;
-    const action = user.enabled ? "disable" : "enable";
+    const action = currentUser.enabled ? "disable" : "enable";
     const confirmed = await dialog.confirm({
-      title: `${user.enabled ? "Disable" : "Enable"} User`,
-      message: `Are you sure you want to ${action} ${displayName(user)}?`,
+      title: `${currentUser.enabled ? "Disable" : "Enable"} User`,
+      message: `Are you sure you want to ${action} ${displayName(currentUser)}?`,
     });
     if (confirmed) {
       const updated = await client.updateUser({
-        params: { id: user.id },
+        params: { id: currentUser.id },
         query: realmQuery,
-        body: { enabled: !user.enabled },
+        body: { enabled: !currentUser.enabled },
       });
-      setUser(updated);
+      alepha.store.set(adminUserAtom, updated);
       toast.success({ title: `User ${action}d` });
     }
   };
 
   const handleDelete = async () => {
-    if (!user) return;
     const confirmed = await dialog.confirm({
       title: "Delete User",
-      message: `Are you sure you want to delete ${displayName(user)}? This cannot be undone.`,
+      message: `Are you sure you want to delete ${displayName(currentUser)}? This cannot be undone.`,
       confirmColor: "red",
       confirmLabel: "Delete",
     });
     if (confirmed) {
       await client.deleteUser({
-        params: { id: user.id },
+        params: { id: currentUser.id },
         query: realmQuery,
       });
       toast.success({ title: "User deleted" });
@@ -113,71 +77,64 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
     }
   };
 
-  if (loading) {
-    return (
-      <Flex flex={1} justify="center" align="center">
-        <Loader />
-      </Flex>
-    );
-  }
-
-  if (!user) {
-    return (
-      <Flex flex={1} justify="center" align="center">
-        <Text c="dimmed">User not found</Text>
-      </Flex>
-    );
-  }
-
   return (
-    <UserContext.Provider value={{ user, reload: loadUser }}>
-      <Flex flex={1} direction="column" gap="lg" p="md">
-        <AdminResourceHeader
-          backHref={router.path("adminUsers")}
-          backLabel="Users"
-          title={displayName(user)}
-          subtitle={user.email || user.username}
-          status={{
-            label: user.enabled ? "Active" : "Disabled",
-            color: user.enabled ? "green" : "gray",
-          }}
-          menuActions={[
-            {
-              label: user.enabled ? "Disable" : "Enable",
-              icon: user.enabled ? IconBan : IconShieldCheck,
-              onClick: handleToggleEnabled,
-            },
-            {
-              label: "Delete",
-              icon: IconTrash,
-              color: "red",
-              onClick: handleDelete,
-            },
-          ]}
-        />
-
-        <AdminResourceTabs
-          tabs={[
-            {
-              value: "profile",
-              label: "Profile",
-              href: router.path("adminUserProfile", {
-                params: { userId },
-              }),
-            },
-            {
-              value: "sessions",
-              label: "Sessions",
-              href: router.path("adminUserSessions", {
-                params: { userId },
-              }),
-            },
-          ]}
-        />
-
-        <NestedView />
-      </Flex>
-    </UserContext.Provider>
+    <Flex
+      flex={1}
+      direction="column"
+      gap="lg"
+      p="md"
+      m="md"
+      style={{
+        backgroundColor: "var(--mantine-color-body)",
+        borderRadius: "var(--mantine-radius-md)",
+        border: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <AdminResourceHeader
+        backHref={router.path("adminUsers")}
+        backLabel="Users"
+        title={displayName(currentUser)}
+        subtitle={currentUser.email || currentUser.username}
+        status={{
+          label: currentUser.enabled ? "Active" : "Disabled",
+          color: currentUser.enabled ? "green" : "gray",
+        }}
+        menuActions={[
+          {
+            label: currentUser.enabled ? "Disable" : "Enable",
+            icon: currentUser.enabled ? IconBan : IconShieldCheck,
+            onClick: handleToggleEnabled,
+          },
+          {
+            label: "Delete",
+            icon: IconTrash,
+            color: "red",
+            onClick: handleDelete,
+          },
+        ]}
+      />
+
+      <AdminResourceTabs
+        tabs={[
+          {
+            value: "profile",
+            label: "Profile",
+            href: router.path("adminUserProfile", {
+              params: { userId },
+            }),
+          },
+          {
+            value: "sessions",
+            label: "Sessions",
+            href: router.path("adminUserSessions", {
+              params: { userId },
+            }),
+          },
+        ]}
+      />
+
+      <NestedView />
+    </Flex>
   );
 };
 

package/src/admin/components/users/AdminUserProfile.tsx

@@ -1,12 +1,15 @@
 import { DetailList, Flex } from "@alepha/ui";
 import { Badge } from "@mantine/core";
+import { useStore } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
-import { useUser } from "./AdminUserLayout.tsx";
+import { adminUserAtom } from "../../atoms/adminUserAtom.ts";
 
 const AdminUserProfile = () => {
-  const { user } = useUser();
+  const [user] = useStore(adminUserAtom);
   const { l } = useI18n();
 
+  if (!user) return null;
+
   return (
     <DetailList
       items={[

package/src/admin/components/users/AdminUsers.tsx

@@ -152,7 +152,7 @@ const AdminUsers = (props: AdminUsersProps) => {
                 >
                   <Flex gap={"xs"} centerY>
                     <Avatar size={"sm"} name={name} />
-                    <Flex col>
+                    <Flex col align={"start"}>
                       <Text size={"sm"} bold>
                         {name}
                       </Text>

package/src/core/components/Flex.tsx

@@ -2,9 +2,17 @@ import {
   Flex as MantineFlex,
   type FlexProps as MantineFlexProps,
 } from "@mantine/core";
+import { FormModel } from "alepha/react/form";
+import type { FormHTMLAttributes } from "react";
 import { forwardRef } from "react";
 
 export interface FlexProps extends MantineFlexProps {
+  /**
+   * Render as a `<form>` element.
+   * If `true`, renders as a plain form.
+   * If an object, spreads the form attributes (onSubmit, id, noValidate, etc.).
+   */
+  form?: boolean | FormHTMLAttributes<HTMLFormElement> | FormModel<any>;
   /**
    * flex: 1 — fill available space.
    */
@@ -92,6 +100,7 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     borderedBottom,
     shadowed,
     overflow,
+    form,
     ...rest
   } = props;
 
@@ -155,6 +164,21 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     rest.className = `${rest.className ?? ""} overflow-auto`.trim();
   }
 
+  if (form) {
+    let formProps: any = typeof form === "object" ? form : {};
+    if (formProps instanceof FormModel) {
+      formProps = formProps.props;
+    }
+    return (
+      <MantineFlex
+        ref={ref}
+        component={"form"}
+        {...(formProps as any)}
+        {...rest}
+      />
+    );
+  }
+
   return <MantineFlex ref={ref} {...rest} />;
 });
 

package/src/core/components/Section.tsx

@@ -0,0 +1,109 @@
+import { Collapse } from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { type ReactNode, useState } from "react";
+import { ui } from "../constants/ui.ts";
+import type { ActionProps } from "./buttons/ActionButton.tsx";
+import Flex from "./Flex.tsx";
+import SectionHeader, { type SectionHeaderProps } from "./SectionHeader.tsx";
+
+export interface SectionProps
+  extends Omit<SectionHeaderProps, "extra" | "size" | "title"> {
+  /**
+   * Section header title. When omitted, no header is rendered.
+   */
+  title?: string | ReactNode;
+  /**
+   * Section content.
+   */
+  children?: ReactNode;
+
+  /**
+   * When `true`, the section body can be collapsed/expanded.
+   */
+  collapsible?: boolean;
+
+  /**
+   * Initial collapsed state. Only applies when `collapsible` is `true`.
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Padding for the section body.
+   */
+  p?: string | number;
+}
+
+const Section = (props: SectionProps) => {
+  const {
+    children,
+    collapsible,
+    defaultCollapsed = false,
+    title,
+    icon,
+    tag,
+    subtitle,
+    actions,
+    p = "md",
+    ...rest
+  } = props;
+
+  const [collapsed, setCollapsed] = useState(
+    collapsible ? defaultCollapsed : false,
+  );
+
+  const hasHeader = !!title;
+
+  const headerActions: ActionProps[] = [...(actions ?? [])];
+
+  const chevronExtra = collapsible ? (
+    <Flex
+      centerY
+      style={{ cursor: "pointer", flexShrink: 0 }}
+      onClick={() => setCollapsed((v) => !v)}
+    >
+      {collapsed ? (
+        <IconChevronRight size={ui.sizes.icon.sm} />
+      ) : (
+        <IconChevronDown size={ui.sizes.icon.sm} />
+      )}
+    </Flex>
+  ) : undefined;
+
+  return (
+    <Flex col surface rounded bordered {...rest}>
+      {hasHeader && (
+        <Flex
+          p="sm"
+          px="md"
+          style={{
+            cursor: collapsible ? "pointer" : undefined,
+          }}
+          onClick={collapsible ? () => setCollapsed((v) => !v) : undefined}
+        >
+          <SectionHeader
+            icon={icon}
+            title={title}
+            tag={tag}
+            subtitle={subtitle}
+            actions={headerActions}
+            size="sm"
+            extra={chevronExtra}
+          />
+        </Flex>
+      )}
+      {collapsible ? (
+        <Collapse in={!collapsed}>
+          <Flex col p={p} {...(hasHeader ? { borderedTop: true } : {})}>
+            {children}
+          </Flex>
+        </Collapse>
+      ) : (
+        <Flex col p={p} {...(hasHeader ? { borderedTop: true } : {})}>
+          {children}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Section;

package/src/core/components/SectionHeader.tsx

@@ -0,0 +1,106 @@
+import { Title } from "@mantine/core";
+import type { ComponentType, ReactNode } from "react";
+import { ui } from "../constants/ui.ts";
+import { renderIcon } from "../helpers/renderIcon.tsx";
+import type { ActionProps } from "./buttons/ActionButton.tsx";
+import ActionButton from "./buttons/ActionButton.tsx";
+import Flex from "./Flex.tsx";
+import Text from "./Text.tsx";
+
+export interface SectionHeaderProps {
+  /**
+   * Icon displayed before the title.
+   * Accepts a React element or a component type (e.g. `IconUser` from tabler).
+   */
+  icon?: ReactNode | ComponentType<{ size?: number }>;
+
+  /**
+   * Main title text.
+   */
+  title: string | ReactNode;
+
+  /**
+   * Optional tag displayed after the title (e.g. a Badge or status text).
+   */
+  tag?: ReactNode;
+
+  /**
+   * Subtitle displayed below the title.
+   */
+  subtitle?: string | ReactNode;
+
+  /**
+   * Action buttons displayed on the right side.
+   */
+  actions?: ActionProps[];
+
+  /**
+   * Controls the title size and icon size.
+   *
+   * - `"sm"` → Title order 5, icon 16px
+   * - `"md"` → Title order 4, icon 20px (default)
+   * - `"lg"` → Title order 3, icon 24px
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Extra content appended to the right side (after actions).
+   */
+  extra?: ReactNode;
+}
+
+const TITLE_ORDER: Record<string, 1 | 2 | 3 | 4 | 5 | 6> = {
+  sm: 5,
+  md: 4,
+  lg: 3,
+};
+
+const ICON_SIZE: Record<string, number> = {
+  sm: ui.sizes.icon.xs,
+  md: ui.sizes.icon.sm,
+  lg: ui.sizes.icon.md,
+};
+
+const SectionHeader = (props: SectionHeaderProps) => {
+  const { icon, title, tag, subtitle, actions, size = "md", extra } = props;
+
+  const iconSize = ICON_SIZE[size];
+  const titleOrder = TITLE_ORDER[size];
+
+  return (
+    <Flex col gap={2}>
+      <Flex centerY gap="xs">
+        {icon && (
+          <Flex centerY style={{ flexShrink: 0 }}>
+            {renderIcon(icon, iconSize)}
+          </Flex>
+        )}
+        <Title order={titleOrder} lh={1.2}>
+          {title}
+        </Title>
+        {tag}
+        <Flex fill />
+        {actions && actions.length > 0 && (
+          <Flex gap="xs" centerY style={{ flexShrink: 0 }}>
+            {actions.map((actionProps, index) => (
+              <ActionButton
+                key={index}
+                size="xs"
+                variant="default"
+                {...actionProps}
+              />
+            ))}
+          </Flex>
+        )}
+        {extra}
+      </Flex>
+      {subtitle && (
+        <Text muted small>
+          {subtitle}
+        </Text>
+      )}
+    </Flex>
+  );
+};
+
+export default SectionHeader;

package/src/core/components/buttons/ActionButton.tsx

@@ -264,6 +264,7 @@ const ActionButton = (_props: ActionProps) => {
           </ActionHrefButton>
         );
       }
+
       return (
         <ActionNavigationButton {...restProps} href={restProps.href}>
           {restProps.children}

package/src/core/components/dialogs/PromptDialog.tsx

@@ -36,7 +36,7 @@ const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
         required={options?.required}
         mb="md"
       />
-      <Flex justify="flex-end">
+      <Flex justify="flex-end" gap={"xs"}>
         <Button variant="subtle" onClick={() => onSubmit(null)}>
           {options?.cancelLabel || "Cancel"}
         </Button>

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

@@ -34,7 +34,7 @@ export interface BreadcrumbProps extends FlexProps {
  * Pages should define a `label` in their `$page()` options for best results.
  * Falls back to the page name converted to Title Case.
  */
-const Breadcrumb = (props: BreadcrumbProps) => {
+const Breadcrumbs = (props: BreadcrumbProps) => {
   const { home = "Home", separator, size = "sm", ...groupProps } = props;
 
   const state = useRouterState();
@@ -85,4 +85,4 @@ const Breadcrumb = (props: BreadcrumbProps) => {
   );
 };
 
-export default Breadcrumb;
+export default Breadcrumbs;