@alepha/ui 0.11.3 → 0.11.5

package/src/components/buttons/ToggleSidebarButton.tsx

@@ -0,0 +1,28 @@
+import { useStore } from "@alepha/react";
+import {
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+} from "@tabler/icons-react";
+import ActionButton from "./ActionButton.tsx";
+
+const ToggleSidebarButton = () => {
+  const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
+
+  return (
+    <ActionButton
+      icon={
+        collapsed ? (
+          <IconLayoutSidebarRightCollapse />
+        ) : (
+          <IconLayoutSidebarLeftCollapse />
+        )
+      }
+      variant={"subtle"}
+      size={"md"}
+      onClick={() => setCollapsed(!collapsed)}
+      tooltip={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+    />
+  );
+};
+
+export default ToggleSidebarButton;

package/src/components/dialogs/AlertDialog.tsx

@@ -1,13 +1,13 @@
 import { Button, Group, Text } from "@mantine/core";
 import type { AlertDialogProps } from "../../services/DialogService";
 
-export function AlertDialog({ options, onClose }: AlertDialogProps) {
-  return (
-    <>
-      {options?.message && <Text mb="md">{options.message}</Text>}
-      <Group justify="flex-end">
-        <Button onClick={onClose}>{options?.okLabel || "OK"}</Button>
-      </Group>
-    </>
-  );
-}
+const AlertDialog = ({ options, onClose }: AlertDialogProps) => (
+  <>
+    {options?.message && <Text mb="md">{options.message}</Text>}
+    <Group justify="flex-end">
+      <Button onClick={onClose}>{options?.okLabel || "OK"}</Button>
+    </Group>
+  </>
+);
+
+export default AlertDialog;

package/src/components/dialogs/ConfirmDialog.tsx

@@ -1,21 +1,21 @@
 import { Button, Group, Text } from "@mantine/core";
 import type { ConfirmDialogProps } from "../../services/DialogService";
 
-export function ConfirmDialog({ options, onConfirm }: ConfirmDialogProps) {
-  return (
-    <>
-      {options?.message && <Text mb="md">{options.message}</Text>}
-      <Group justify="flex-end">
-        <Button variant="subtle" onClick={() => onConfirm(false)}>
-          {options?.cancelLabel || "Cancel"}
-        </Button>
-        <Button
-          color={options?.confirmColor || "blue"}
-          onClick={() => onConfirm(true)}
-        >
-          {options?.confirmLabel || "Confirm"}
-        </Button>
-      </Group>
-    </>
-  );
-}
+const ConfirmDialog = ({ options, onConfirm }: ConfirmDialogProps) => (
+  <>
+    {options?.message && <Text mb="md">{options.message}</Text>}
+    <Group justify="flex-end">
+      <Button variant="subtle" onClick={() => onConfirm(false)}>
+        {options?.cancelLabel || "Cancel"}
+      </Button>
+      <Button
+        color={options?.confirmColor || "blue"}
+        onClick={() => onConfirm(true)}
+      >
+        {options?.confirmLabel || "Confirm"}
+      </Button>
+    </Group>
+  </>
+);
+
+export default ConfirmDialog;

package/src/components/dialogs/PromptDialog.tsx

@@ -2,12 +2,12 @@ import { Button, Group, Text, TextInput } from "@mantine/core";
 import { useEffect, useRef, useState } from "react";
 import type { PromptDialogProps } from "../../services/DialogService";
 
-export function PromptDialog({ options, onSubmit }: PromptDialogProps) {
+const PromptDialog = ({ options, onSubmit }: PromptDialogProps) => {
   const [value, setValue] = useState(options?.defaultValue || "");
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    // Auto-focus the input when the dialog opens
+    // autofocus the input when the dialog opens
     inputRef.current?.focus();
   }, []);
 
@@ -49,4 +49,6 @@ export function PromptDialog({ options, onSubmit }: PromptDialogProps) {
       </Group>
     </>
   );
-}
+};
+
+export default PromptDialog;

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

@@ -23,9 +23,12 @@ import type {
   TimeInputProps,
 } from "@mantine/dates";
 import type { ComponentType } from "react";
-import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
-import ControlDate from "./ControlDate";
-import ControlSelect, { type ControlSelectProps } from "./ControlSelect";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
+import ControlDate from "./ControlDate.tsx";
+import ControlSelect, { type ControlSelectProps } from "./ControlSelect.tsx";
 
 export interface ControlProps extends GenericControlProps {
   text?: TextInputProps;

package/src/components/{ControlDate.tsx → form/ControlDate.tsx}

@@ -7,7 +7,10 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
-import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
 
 export interface ControlDateProps extends GenericControlProps {
   date?: boolean | DateInputProps;

package/src/components/{ControlSelect.tsx → form/ControlSelect.tsx}

@@ -14,7 +14,10 @@ import {
   type TagsInputProps,
 } from "@mantine/core";
 import { useEffect, useState } from "react";
-import { type GenericControlProps, parseInput } from "../utils/parseInput.ts";
+import {
+  type GenericControlProps,
+  parseInput,
+} from "../../utils/parseInput.ts";
 
 export type SelectValueLabel =
   | string

package/src/components/{TypeForm.tsx → form/TypeForm.tsx}

@@ -2,8 +2,10 @@ import type { TObject } from "@alepha/core";
 import type { FormModel } from "@alepha/react-form";
 import { Flex, Grid } from "@mantine/core";
 import type { ReactNode } from "react";
-import Action, { type ActionSubmitProps } from "./Action";
-import Control, { type ControlProps } from "./Control";
+import ActionButton, {
+  type ActionSubmitButtonProps,
+} from "../buttons/ActionButton.tsx";
+import Control, { type ControlProps } from "./Control.tsx";
 
 export interface TypeFormProps<T extends TObject> {
   form: FormModel<T>;
@@ -21,8 +23,8 @@ export interface TypeFormProps<T extends TObject> {
   controlProps?: Partial<Omit<ControlProps, "input">>;
   skipFormElement?: boolean;
   skipSubmitButton?: boolean;
-  submitButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
-  resetButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+  submitButtonProps?: Partial<Omit<ActionSubmitButtonProps, "form">>;
+  resetButtonProps?: Partial<Omit<ActionSubmitButtonProps, "form">>;
 }
 
 /**
@@ -139,9 +141,9 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
       {renderFields()}
       {!skipSubmitButton && (
         <Flex>
-          <Action form={form} {...submitButtonProps}>
+          <ActionButton form={form} {...submitButtonProps}>
             {submitButtonProps?.children ?? "Submit"}
-          </Action>
+          </ActionButton>
           <button type={"reset"}>Reset</button>
         </Flex>
       )}

package/src/components/layout/AdminShell.tsx

@@ -0,0 +1,97 @@
+import { NestedView, useEvents, useStore } from "@alepha/react";
+import {
+  AppShell,
+  type AppShellFooterProps,
+  type AppShellHeaderProps,
+  type AppShellMainProps,
+  type AppShellNavbarProps,
+  type AppShellProps,
+} from "@mantine/core";
+import type { ReactNode } from "react";
+import { ui } from "../../constants/ui.ts";
+import AppBar, { type AppBarProps } from "./AppBar.tsx";
+import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
+
+export interface AdminShellProps {
+  appShellProps?: Partial<AppShellProps>;
+  appShellMainProps?: Partial<AppShellMainProps>;
+  appShellHeaderProps?: Partial<AppShellHeaderProps>;
+  appShellNavbarProps?: Partial<AppShellNavbarProps>;
+  appShellFooterProps?: Partial<AppShellFooterProps>;
+  sidebarProps?: Partial<SidebarProps>;
+  appBarProps?: Partial<AppBarProps>;
+  header?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+}
+
+declare module "@alepha/core" {
+  interface State {
+    "alepha.ui.sidebar.opened"?: boolean;
+    "alepha.ui.sidebar.collapsed"?: boolean;
+  }
+}
+
+const AdminShell = (props: AdminShellProps) => {
+  const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
+  const [collapsed] = useStore(
+    "alepha.ui.sidebar.collapsed",
+    props.sidebarProps?.collapsed,
+  );
+
+  useEvents(
+    {
+      "react:transition:begin": () => {
+        setOpened(false);
+      },
+    },
+    [],
+  );
+
+  // Default AppBar items with burger button on the left
+  const defaultAppBarItems = [
+    { position: "left" as const, type: "burger" as const },
+  ];
+
+  return (
+    <AppShell
+      padding="md"
+      header={{ height: 60 }}
+      navbar={
+        props.sidebarProps !== undefined
+          ? {
+              width: collapsed ? { base: 72 } : { base: 300 },
+              breakpoint: "sm",
+              collapsed: { mobile: !opened },
+            }
+          : undefined
+      }
+      footer={props.footer ? { height: 60 } : undefined}
+      {...props.appShellProps}
+    >
+      <AppShell.Header bg={ui.colors.surface} {...props.appShellHeaderProps}>
+        {props.header ?? (
+          <AppBar items={defaultAppBarItems} {...props.appBarProps} />
+        )}
+      </AppShell.Header>
+
+      {props.sidebarProps !== undefined && (
+        <AppShell.Navbar bg={ui.colors.surface} {...props.appShellNavbarProps}>
+          <Sidebar collapsed={collapsed} {...props.sidebarProps} />
+        </AppShell.Navbar>
+      )}
+
+      <AppShell.Main {...props.appShellMainProps}>
+        {props.children ?? <NestedView />}
+      </AppShell.Main>
+
+      {props.footer && (
+        <AppShell.Footer bg={ui.colors.surface} {...props.appShellFooterProps}>
+          {props.footer}
+        </AppShell.Footer>
+      )}
+    </AppShell>
+  );
+};
+
+export default AdminShell;

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

@@ -1,4 +1,4 @@
-import { NestedView, useRouterEvents } from "@alepha/react";
+import { NestedView, useEvents } from "@alepha/react";
 import type {
   ColorSchemeScriptProps,
   MantineProviderProps,
@@ -9,7 +9,8 @@ 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";
+import { useToast } from "../../hooks/useToast.ts";
+import Omnibar, { type OmnibarProps } from "./Omnibar.tsx";
 
 export interface AlephaMantineProviderProps {
   children?: ReactNode;
@@ -22,14 +23,22 @@ export interface AlephaMantineProviderProps {
 }
 
 const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
-  useRouterEvents({
-    onBegin: () => {
-      nprogress.start();
-    },
-    onEnd: () => {
-      nprogress.complete();
+  const toast = useToast();
+
+  useEvents(
+    {
+      "react:transition:begin": () => {
+        nprogress.start();
+      },
+      "react:transition:end": () => {
+        nprogress.complete();
+      },
+      "react:action:error": () => {
+        toast.danger("An error occurred while processing your action.");
+      },
     },
-  });
+    [],
+  );
 
   return (
     <>
@@ -37,7 +46,18 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         defaultColorScheme={props.mantine?.defaultColorScheme}
         {...props.colorSchemeScript}
       />
-      <MantineProvider {...props.mantine}>
+      <MantineProvider
+        {...props.mantine}
+        theme={{
+          primaryColor: "gray",
+          primaryShade: {
+            light: 9,
+            dark: 8,
+          },
+          cursorType: "pointer",
+          ...props.mantine?.theme,
+        }}
+      >
         <Notifications {...props.notifications} />
         <NavigationProgress {...props.navigationProgress} />
         <ModalsProvider {...props.modals}>

package/src/components/layout/AppBar.tsx

@@ -0,0 +1,133 @@
+import { Divider, Flex, type FlexProps } from "@mantine/core";
+import type { ReactNode } from "react";
+import BurgerButton from "../buttons/BurgerButton.tsx";
+import DarkModeButton, {
+  type DarkModeButtonProps,
+} from "../buttons/DarkModeButton.tsx";
+import LanguageButton, {
+  type LanguageButtonProps,
+} from "../buttons/LanguageButton.tsx";
+import OmnibarButton, {
+  type OmnibarButtonProps,
+} from "../buttons/OmnibarButton.tsx";
+
+export type AppBarItem =
+  | AppBarElement
+  | AppBarBurger
+  | AppBarDark
+  | AppBarSearch
+  | AppBarLang
+  | AppBarSpacer
+  | AppBarDivider;
+
+export interface AppBarElement {
+  position: "left" | "center" | "right";
+  element: ReactNode;
+}
+
+export interface AppBarBurger {
+  position: "left" | "center" | "right";
+  type: "burger";
+}
+
+export interface AppBarDark {
+  position: "left" | "center" | "right";
+  type: "dark";
+  props?: DarkModeButtonProps;
+}
+
+export interface AppBarSearch {
+  position: "left" | "center" | "right";
+  type: "search";
+  props?: OmnibarButtonProps;
+}
+
+export interface AppBarLang {
+  position: "left" | "center" | "right";
+  type: "lang";
+  props?: LanguageButtonProps;
+}
+
+export interface AppBarSpacer {
+  position: "left" | "center" | "right";
+  type: "spacer";
+}
+
+export interface AppBarDivider {
+  position: "left" | "center" | "right";
+  type: "divider";
+}
+
+export interface AppBarProps {
+  flexProps?: FlexProps;
+  items?: AppBarItem[];
+}
+
+const AppBar = (props: AppBarProps) => {
+  const { items = [] } = props;
+
+  const renderItem = (item: AppBarItem, index: number) => {
+    if ("type" in item) {
+      if (item.type === "burger") {
+        return <BurgerButton key={index} />;
+      }
+      if (item.type === "dark") {
+        return <DarkModeButton key={index} {...item.props} />;
+      }
+      if (item.type === "search") {
+        return <OmnibarButton key={index} {...item.props} />;
+      }
+      if (item.type === "lang") {
+        return <LanguageButton key={index} {...item.props} />;
+      }
+      if (item.type === "spacer") {
+        return <Flex key={index} w={16} />;
+      }
+      if (item.type === "divider") {
+        return <Divider key={index} orientation="vertical" />;
+      }
+    }
+    if ("element" in item) {
+      return item.element;
+    }
+    return null;
+  };
+
+  const leftItems = items.filter((item) => item.position === "left");
+  const centerItems = items.filter((item) => item.position === "center");
+  const rightItems = items.filter((item) => item.position === "right");
+
+  return (
+    <Flex
+      h="100%"
+      align="center"
+      px="md"
+      justify="space-between"
+      {...props.flexProps}
+    >
+      <Flex flex={1}>
+        {leftItems.map((item, index) => (
+          <Flex key={index} ml={index === 0 ? 0 : "md"} align="center">
+            {renderItem(item, index)}
+          </Flex>
+        ))}
+      </Flex>
+      <Flex>
+        {centerItems.map((item, index) => (
+          <Flex key={index} mx="md" align="center">
+            {renderItem(item, index)}
+          </Flex>
+        ))}
+      </Flex>
+      <Flex flex={1} gap="md" align={"center"} justify={"end"}>
+        {rightItems.map((item, index) => (
+          <Flex key={index} ml={index === 0 ? 0 : "md"} align="center">
+            {renderItem(item, index)}
+          </Flex>
+        ))}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default AppBar;

package/src/components/layout/Omnibar.tsx

@@ -0,0 +1,43 @@
+import { useRouter } from "@alepha/react";
+import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
+import { IconSearch } from "@tabler/icons-react";
+import { type ReactNode, useMemo } from "react";
+
+export interface OmnibarProps {
+  shortcut?: string | string[];
+  searchPlaceholder?: string;
+  nothingFound?: ReactNode;
+}
+
+const Omnibar = (props: OmnibarProps) => {
+  const shortcut = props.shortcut ?? "mod+K";
+  const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+  const nothingFound = props.nothingFound ?? "Nothing found...";
+  const router = useRouter();
+  const actions: SpotlightActionData[] = useMemo(
+    () =>
+      router.concretePages.map((page) => ({
+        id: page.name,
+        label: page.label ?? page.name,
+        description: page.description,
+        onClick: () => router.go(page.path ?? page.name),
+        leftSection: page.icon,
+      })),
+    [],
+  );
+
+  return (
+    <Spotlight
+      actions={actions}
+      shortcut={shortcut}
+      limit={10}
+      searchProps={{
+        leftSection: <IconSearch size={20} />,
+        placeholder: searchPlaceholder,
+      }}
+      nothingFound={nothingFound}
+    />
+  );
+};
+
+export default Omnibar;