@alepha/ui 0.10.6 → 0.11.0

package/src/components/dialogs/AlertDialog.tsx

@@ -0,0 +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>
+    </>
+  );
+}

package/src/components/dialogs/ConfirmDialog.tsx

@@ -0,0 +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>
+    </>
+  );
+}

package/src/components/dialogs/PromptDialog.tsx

@@ -0,0 +1,52 @@
+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 [value, setValue] = useState(options?.defaultValue || "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Auto-focus the input when the dialog opens
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = () => {
+    if (!options?.required || value.trim()) {
+      onSubmit(value);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <>
+      {options?.message && <Text mb="md">{options.message}</Text>}
+      <TextInput
+        ref={inputRef}
+        label={options?.label}
+        placeholder={options?.placeholder}
+        value={value}
+        onChange={(event) => setValue(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        required={options?.required}
+        mb="md"
+      />
+      <Group justify="flex-end">
+        <Button variant="subtle" onClick={() => onSubmit(null)}>
+          {options?.cancelLabel || "Cancel"}
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          disabled={options?.required && !value.trim()}
+        >
+          {options?.submitLabel || "OK"}
+        </Button>
+      </Group>
+    </>
+  );
+}

package/src/hooks/useDialog.ts

@@ -0,0 +1,15 @@
+import { useInject } from "@alepha/react";
+import { DialogService } from "../services/DialogService.tsx";
+
+/**
+ * Use this hook to access the Dialog Service for showing various dialog types.
+ *
+ * @example
+ * const dialog = useDialog();
+ * await dialog.alert({ title: "Alert", message: "This is an alert message" });
+ * const confirmed = await dialog.confirm({ title: "Confirm", message: "Are you sure?" });
+ * const input = await dialog.prompt({ title: "Input", message: "Enter your name:" });
+ */
+export const useDialog = (): DialogService => {
+  return useInject(DialogService);
+};

package/src/hooks/useToast.ts

@@ -0,0 +1,14 @@
+import { useInject } from "@alepha/react";
+import { ToastService } from "../services/ToastService.tsx";
+
+/**
+ * Use this hook to access the Toast Service for showing notifications.
+ *
+ * @example
+ * const toast = useToast();
+ * toast.success({ message: "Operation completed successfully!" });
+ * toast.error({ title: "Error", message: "Something went wrong" });
+ */
+export const useToast = (): ToastService => {
+  return useInject(ToastService);
+};

package/src/index.ts

@@ -1,26 +1,70 @@
 import { $module } from "@alepha/core";
 import { AlephaReact } from "@alepha/react";
+import type { ControlProps } from "./components/Control.tsx";
+import { RootRouter } from "./RootRouter.ts";
+import { DialogService } from "./services/DialogService.tsx";
+import { ToastService } from "./services/ToastService.tsx";
 
 // ---------------------------------------------------------------------------------------------------------------------
-import "@mantine/core/styles.css";
-import "@mantine/nprogress/styles.css";
-import "@mantine/spotlight/styles.css";
-import "@mantine/notifications/styles.css";
+
+export { Flex } from "@mantine/core";
+export { default as Action } from "./components/Action.tsx";
+export { default as AlephaMantineProvider } from "./components/AlephaMantineProvider.tsx";
+export { default as Control } from "./components/Control.tsx";
+export { default as ControlDate } from "./components/ControlDate.tsx";
+export { default as ControlSelect } from "./components/ControlSelect.tsx";
+export { default as DarkModeButton } from "./components/DarkModeButton.tsx";
+export type {
+  DataTableColumn,
+  DataTableFilter,
+  DataTableProps,
+  DataTableSort,
+} from "./components/DataTable.tsx";
+export { default as DataTable } from "./components/DataTable.tsx";
+export { AlertDialog } from "./components/dialogs/AlertDialog.tsx";
+export { ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
+export { PromptDialog } from "./components/dialogs/PromptDialog.tsx";
+export { default as Omnibar } from "./components/Omnibar.tsx";
+export type {
+  MenuItem,
+  SidebarItemProps,
+  SidebarProps,
+} from "./components/Sidebar.tsx";
+export { Sidebar, SidebarItem } from "./components/Sidebar.tsx";
+export { default as TypeForm } from "./components/TypeForm.tsx";
+export { useDialog } from "./hooks/useDialog.ts";
+export { useToast } from "./hooks/useToast.ts";
+export * from "./RootRouter.ts";
+export type {
+  AlertDialogOptions,
+  AlertDialogProps,
+  BaseDialogOptions,
+  ConfirmDialogOptions,
+  ConfirmDialogProps,
+  PromptDialogOptions,
+  PromptDialogProps,
+} from "./services/DialogService.tsx";
+export { DialogService } from "./services/DialogService.tsx";
+export { ToastService } from "./services/ToastService.tsx";
+export * from "./utils/icons.tsx";
+export * from "./utils/string.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export { default as Action } from "./components/Action";
-export { default as AlephaMantineProvider } from "./components/AlephaMantineProvider.tsx";
-export { default as Control } from "./components/Control";
+declare module "typebox" {
+  interface TSchemaOptions {
+    $control?: Omit<ControlProps, "input">;
+  }
+}
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- *
+ * Mantine
  *
  * @module alepha.ui
  */
 export const AlephaUI = $module({
-	name: "alepha.ui",
-	services: [AlephaReact],
+  name: "alepha.ui",
+  services: [AlephaReact, DialogService, ToastService, RootRouter],
 });

package/src/services/DialogService.tsx

@@ -0,0 +1,207 @@
+import type { ModalProps } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import type { ReactNode } from "react";
+import { AlertDialog } from "../components/dialogs/AlertDialog";
+import { ConfirmDialog } from "../components/dialogs/ConfirmDialog";
+import { PromptDialog } from "../components/dialogs/PromptDialog";
+
+// Base interfaces
+export interface BaseDialogOptions extends Partial<ModalProps> {
+  title?: ReactNode;
+  message?: ReactNode;
+  content?: any; // weird typing for mantine modals content
+}
+
+export interface AlertDialogOptions extends BaseDialogOptions {
+  okLabel?: string;
+}
+
+export interface ConfirmDialogOptions extends BaseDialogOptions {
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmColor?: string;
+}
+
+export interface PromptDialogOptions extends BaseDialogOptions {
+  placeholder?: string;
+  defaultValue?: string;
+  label?: string;
+  required?: boolean;
+  submitLabel?: string;
+  cancelLabel?: string;
+}
+
+// Component prop interfaces
+export interface AlertDialogProps {
+  options?: AlertDialogOptions;
+  onClose: () => void;
+}
+
+export interface ConfirmDialogProps {
+  options?: ConfirmDialogOptions;
+  onConfirm: (confirmed: boolean) => void;
+}
+
+export interface PromptDialogProps {
+  options?: PromptDialogOptions;
+  onSubmit: (value: string | null) => void;
+}
+
+export interface DialogServiceOptions {
+  default?: Partial<BaseDialogOptions>;
+}
+
+export class DialogService {
+  public readonly options: DialogServiceOptions = {
+    default: {
+      centered: true,
+      withCloseButton: true,
+      size: "md",
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      transitionProps: {
+        transition: "pop",
+        duration: 200,
+      },
+    },
+  };
+
+  /**
+   * Show an alert dialog with a message
+   */
+  public alert(options?: AlertDialogOptions): Promise<void> {
+    return new Promise((resolve) => {
+      const modalId = this.open({
+        ...options,
+        title: options?.title || "Alert",
+        content: (
+          <AlertDialog
+            options={options}
+            onClose={() => {
+              this.close(modalId);
+              resolve();
+            }}
+          />
+        ),
+      });
+    });
+  }
+
+  /**
+   * Show a confirmation dialog that returns a promise
+   */
+  public confirm(options?: ConfirmDialogOptions): Promise<boolean> {
+    return new Promise((resolve) => {
+      const modalId = this.open({
+        ...options,
+        title: options?.title || "Confirm",
+        closeOnClickOutside: false,
+        closeOnEscape: false,
+        content: (
+          <ConfirmDialog
+            options={options}
+            onConfirm={(confirmed) => {
+              this.close(modalId);
+              resolve(confirmed);
+            }}
+          />
+        ),
+      });
+    });
+  }
+
+  /**
+   * Show a prompt dialog to get user input
+   */
+  public prompt(options?: PromptDialogOptions): Promise<string | null> {
+    return new Promise((resolve) => {
+      const modalId = this.open({
+        ...options,
+        title: options?.title || "Input",
+        closeOnClickOutside: false,
+        closeOnEscape: false,
+        content: (
+          <PromptDialog
+            options={options}
+            onSubmit={(value) => {
+              this.close(modalId);
+              resolve(value);
+            }}
+          />
+        ),
+      });
+    });
+  }
+
+  /**
+   * Open a custom dialog with provided content
+   */
+  public open(options?: BaseDialogOptions): string {
+    const modalId = modals.open({
+      ...this.options.default,
+      ...options,
+      children: options?.content || options?.message,
+    });
+    return modalId;
+  }
+
+  /**
+   * Show a JSON editor/viewer dialog
+   */
+  public json(data?: any, options?: BaseDialogOptions): void {
+    // Implementation to be added
+  }
+
+  /**
+   * Show a form dialog for structured input
+   */
+  public form(options?: BaseDialogOptions): Promise<any> {
+    // Implementation to be added
+    return Promise.resolve(null);
+  }
+
+  /**
+   * Close the currently open dialog or a specific dialog by ID
+   */
+  public close(modalId?: string): void {
+    if (modalId) {
+      modals.close(modalId);
+    } else {
+      modals.closeAll();
+    }
+  }
+
+  /**
+   * Show a loading/progress dialog with optional progress percentage
+   */
+  public loading(options?: BaseDialogOptions & { progress?: number }): void {
+    // Implementation to be added
+  }
+
+  /**
+   * Show an image viewer/gallery dialog
+   */
+  public image(src: string | string[], options?: BaseDialogOptions): void {
+    // Implementation to be added
+  }
+
+  /**
+   * Show a table/data grid dialog for displaying tabular data
+   */
+  public table(
+    data: any[],
+    options?: BaseDialogOptions & { columns?: any[] },
+  ): void {
+    // Implementation to be added
+  }
+
+  /**
+   * Show a multi-step wizard dialog
+   */
+  public wizard(steps: any[], options?: BaseDialogOptions): Promise<any> {
+    // Implementation to be added
+    return Promise.resolve(null);
+  }
+}

package/src/services/ToastService.tsx

@@ -0,0 +1,71 @@
+import type { NotificationData } from "@mantine/notifications";
+import { notifications } from "@mantine/notifications";
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconInfoCircle,
+  IconX,
+} from "@tabler/icons-react";
+
+export interface ToastServiceOptions {
+  default?: Partial<NotificationData>;
+}
+
+export class ToastService {
+  protected readonly raw = notifications;
+
+  public readonly options: ToastServiceOptions = {
+    default: {
+      autoClose: 5000,
+      withCloseButton: true,
+      position: "top-center",
+    },
+  };
+
+  public show(options: NotificationData) {
+    notifications.show({
+      ...this.options.default,
+      ...options,
+    });
+  }
+
+  public info(options: Partial<NotificationData>) {
+    this.show({
+      color: "blue",
+      icon: <IconInfoCircle size={20} />,
+      title: "Info",
+      message: "Information notification",
+      ...options,
+    });
+  }
+
+  public success(options: Partial<NotificationData>) {
+    this.show({
+      color: "green",
+      icon: <IconCheck size={16} />,
+      title: "Success",
+      message: "Operation completed successfully",
+      ...options,
+    });
+  }
+
+  public warning(options: Partial<NotificationData>) {
+    this.show({
+      color: "yellow",
+      icon: <IconAlertTriangle size={20} />,
+      title: "Warning",
+      message: "Please review this warning",
+      ...options,
+    });
+  }
+
+  public danger(options: Partial<NotificationData>) {
+    this.show({
+      color: "red",
+      icon: <IconX size={20} />,
+      title: "Error",
+      message: "An error occurred",
+      ...options,
+    });
+  }
+}

package/src/utils/icons.tsx

@@ -0,0 +1,121 @@
+import {
+  IconAt,
+  IconCalendar,
+  IconClock,
+  IconColorPicker,
+  IconFile,
+  IconHash,
+  IconKey,
+  IconLetterCase,
+  IconLink,
+  IconList,
+  IconMail,
+  IconPalette,
+  IconPhone,
+  IconSelector,
+  IconToggleLeft,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+/**
+ * Icon size presets following Mantine's size conventions
+ */
+export const ICON_SIZES = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+} as const;
+
+export type IconSize = keyof typeof ICON_SIZES;
+
+/**
+ * Get the default icon for an input based on its type, format, or name.
+ */
+export const getDefaultIcon = (params: {
+  type?: string;
+  format?: string;
+  name?: string;
+  isEnum?: boolean;
+  isArray?: boolean;
+  size?: IconSize;
+}): ReactNode => {
+  const { type, format, name, isEnum, isArray, size = "sm" } = params;
+  const iconSize = ICON_SIZES[size];
+
+  // Format-based icons (highest priority)
+  if (format) {
+    switch (format) {
+      case "email":
+        return <IconMail size={iconSize} />;
+      case "url":
+      case "uri":
+        return <IconLink size={iconSize} />;
+      case "tel":
+      case "phone":
+        return <IconPhone size={iconSize} />;
+      case "date":
+        return <IconCalendar size={iconSize} />;
+      case "date-time":
+        return <IconCalendar size={iconSize} />;
+      case "time":
+        return <IconClock size={iconSize} />;
+      case "color":
+        return <IconColorPicker size={iconSize} />;
+      case "uuid":
+        return <IconKey size={iconSize} />;
+    }
+  }
+
+  // Name-based icons (medium priority)
+  if (name) {
+    const nameLower = name.toLowerCase();
+    if (nameLower.includes("password") || nameLower.includes("secret")) {
+      return <IconKey size={iconSize} />;
+    }
+    if (nameLower.includes("email") || nameLower.includes("mail")) {
+      return <IconMail size={iconSize} />;
+    }
+    if (nameLower.includes("url") || nameLower.includes("link")) {
+      return <IconLink size={iconSize} />;
+    }
+    if (nameLower.includes("phone") || nameLower.includes("tel")) {
+      return <IconPhone size={iconSize} />;
+    }
+    if (nameLower.includes("color")) {
+      return <IconPalette size={iconSize} />;
+    }
+    if (nameLower.includes("file") || nameLower.includes("upload")) {
+      return <IconFile size={iconSize} />;
+    }
+    if (nameLower.includes("date")) {
+      return <IconCalendar size={iconSize} />;
+    }
+    if (nameLower.includes("time")) {
+      return <IconClock size={iconSize} />;
+    }
+  }
+
+  // Type-based icons (lowest priority)
+  if (isEnum || isArray) {
+    return <IconSelector size={iconSize} />;
+  }
+
+  if (type) {
+    switch (type) {
+      case "boolean":
+        return <IconToggleLeft size={iconSize} />;
+      case "number":
+      case "integer":
+        return <IconHash size={iconSize} />;
+      case "array":
+        return <IconList size={iconSize} />;
+      case "string":
+        return <IconLetterCase size={iconSize} />;
+    }
+  }
+
+  // Default icon
+  return <IconAt size={iconSize} />;
+};