@alepha/ui 0.10.7 → 0.11.0

package/src/index.ts

@@ -2,6 +2,7 @@ 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";
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -13,10 +14,37 @@ 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";
@@ -32,11 +60,11 @@ declare module "typebox" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- *
+ * Mantine
  *
  * @module alepha.ui
  */
 export const AlephaUI = $module({
   name: "alepha.ui",
-  services: [AlephaReact, ToastService, RootRouter],
+  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/utils/parseInput.ts

@@ -0,0 +1,125 @@
+import { type TObject, TypeBoxError } from "@alepha/core";
+import type { InputField } from "@alepha/react-form";
+import type { ReactNode } from "react";
+import type { ControlProps } from "../components/Control.tsx";
+import { getDefaultIcon } from "./icons.tsx";
+import { prettyName } from "./string.ts";
+
+export const parseInput = (
+  props: GenericControlProps,
+  form: {
+    error?: Error;
+  },
+): ControlInput => {
+  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 format =
+    props.input.schema &&
+    "format" in props.input.schema &&
+    typeof props.input.schema.format === "string"
+      ? props.input.schema.format
+      : undefined;
+
+  const required = props.input.required;
+  const schema = props.input.schema as TObject & { $control?: ControlProps };
+
+  const inputProps: InputProps = {
+    label,
+    description,
+    error,
+    required,
+    disabled,
+  };
+
+  if ("minLength" in schema && typeof schema.minLength === "number") {
+    inputProps.minLength = schema.minLength;
+  }
+  if ("maxLength" in schema && typeof schema.maxLength === "number") {
+    inputProps.maxLength = schema.maxLength;
+  }
+  if ("minimum" in schema && typeof schema.minimum === "number") {
+    inputProps.minimum = schema.minimum;
+  }
+  if ("maximum" in schema && typeof schema.maximum === "number") {
+    inputProps.maximum = schema.maximum;
+  }
+
+  return {
+    id,
+    icon,
+    format,
+    schema: props.input.schema as TObject & { $control?: ControlProps },
+    inputProps,
+  };
+};
+
+export interface GenericControlProps {
+  input: InputField;
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+}
+
+export interface ControlInput {
+  id?: string;
+  icon: ReactNode;
+  format?: string;
+  schema: TObject & { $control?: ControlProps };
+  inputProps: InputProps;
+}
+
+export interface InputProps {
+  label: string;
+  description?: string;
+  error?: string;
+  required: boolean;
+  disabled: boolean;
+
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+}

package/dist/AlephaMantineProvider-EemOtraW.js

@@ -1,3 +0,0 @@
-import { t as AlephaMantineProvider_default } from "./AlephaMantineProvider-WfiC2EH6.js";
-
-export { AlephaMantineProvider_default as default };

package/dist/AlephaMantineProvider-WfiC2EH6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AlephaMantineProvider-WfiC2EH6.js","names":["defaultActions: SpotlightActionData[]","Omnibar"],"sources":["../src/components/Omnibar.tsx","../src/components/AlephaMantineProvider.tsx"],"sourcesContent":["import { Spotlight, type SpotlightActionData } from \"@mantine/spotlight\";\nimport {\n  IconDashboard,\n  IconFileText,\n  IconHome,\n  IconSearch,\n  IconSettings,\n  IconUser,\n} from \"@tabler/icons-react\";\nimport type { ReactNode } from \"react\";\n\nexport interface OmnibarProps {\n  actions?: SpotlightActionData[];\n  shortcut?: string | string[];\n  searchPlaceholder?: string;\n  nothingFound?: ReactNode;\n}\n\nconst defaultActions: SpotlightActionData[] = [\n  {\n    id: \"home\",\n    label: \"Home\",\n    description: \"Go to home page\",\n    onClick: () => console.log(\"Home\"),\n    leftSection: <IconHome size={20} />,\n  },\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    description: \"View your dashboard\",\n    onClick: () => console.log(\"Dashboard\"),\n    leftSection: <IconDashboard size={20} />,\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n    description: \"Browse all documents\",\n    onClick: () => console.log(\"Documents\"),\n    leftSection: <IconFileText size={20} />,\n  },\n  {\n    id: \"profile\",\n    label: \"Profile\",\n    description: \"View and edit your profile\",\n    onClick: () => console.log(\"Profile\"),\n    leftSection: <IconUser size={20} />,\n  },\n  {\n    id: \"settings\",\n    label: \"Settings\",\n    description: \"Manage application settings\",\n    onClick: () => console.log(\"Settings\"),\n    leftSection: <IconSettings size={20} />,\n  },\n];\n\nconst Omnibar = (props: OmnibarProps) => {\n  const actions = props.actions ?? defaultActions;\n  const shortcut = props.shortcut ?? \"mod+K\";\n  const searchPlaceholder = props.searchPlaceholder ?? \"Search...\";\n  const nothingFound = props.nothingFound ?? \"Nothing found...\";\n\n  return (\n    <Spotlight\n      actions={actions}\n      shortcut={shortcut}\n      searchProps={{\n        leftSection: <IconSearch size={20} />,\n        placeholder: searchPlaceholder,\n      }}\n      nothingFound={nothingFound}\n    />\n  );\n};\n\nexport default Omnibar;\n","import { NestedView, useRouterEvents } from \"@alepha/react\";\nimport type {\n  ColorSchemeScriptProps,\n  MantineProviderProps,\n} from \"@mantine/core\";\nimport { ColorSchemeScript, MantineProvider } from \"@mantine/core\";\nimport { ModalsProvider, type ModalsProviderProps } from \"@mantine/modals\";\nimport { Notifications, type NotificationsProps } from \"@mantine/notifications\";\nimport type { NavigationProgressProps } from \"@mantine/nprogress\";\nimport { NavigationProgress, nprogress } from \"@mantine/nprogress\";\nimport type { ReactNode } from \"react\";\nimport Omnibar, { type OmnibarProps } from \"./Omnibar\";\n\nexport interface AlephaMantineProviderProps {\n  children?: ReactNode;\n  mantine?: MantineProviderProps;\n  colorSchemeScript?: ColorSchemeScriptProps;\n  navigationProgress?: NavigationProgressProps;\n  notifications?: NotificationsProps;\n  modals?: ModalsProviderProps;\n  omnibar?: OmnibarProps;\n}\n\nconst AlephaMantineProvider = (props: AlephaMantineProviderProps) => {\n  useRouterEvents({\n    onBegin: () => {\n      nprogress.start();\n    },\n    onEnd: () => {\n      nprogress.complete();\n    },\n  });\n\n  return (\n    <>\n      <ColorSchemeScript\n        defaultColorScheme={props.mantine?.defaultColorScheme}\n        {...props.colorSchemeScript}\n      />\n      <MantineProvider {...props.mantine}>\n        <Notifications {...props.notifications} />\n        <NavigationProgress {...props.navigationProgress} />\n        <ModalsProvider {...props.modals}>\n          <Omnibar {...props.omnibar} />\n          {props.children ?? <NestedView />}\n        </ModalsProvider>\n      </MantineProvider>\n    </>\n  );\n};\n\nexport default AlephaMantineProvider;\n"],"mappings":";;;;;;;;;;AAkBA,MAAMA,iBAAwC;CAC5C;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,OAAO;EAClC,aAAa,oBAAC,YAAS,MAAM,KAAM;EACpC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,YAAY;EACvC,aAAa,oBAAC,iBAAc,MAAM,KAAM;EACzC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,YAAY;EACvC,aAAa,oBAAC,gBAAa,MAAM,KAAM;EACxC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,UAAU;EACrC,aAAa,oBAAC,YAAS,MAAM,KAAM;EACpC;CACD;EACE,IAAI;EACJ,OAAO;EACP,aAAa;EACb,eAAe,QAAQ,IAAI,WAAW;EACtC,aAAa,oBAAC,gBAAa,MAAM,KAAM;EACxC;CACF;AAED,MAAM,WAAW,UAAwB;CACvC,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,oBAAoB,MAAM,qBAAqB;CACrD,MAAM,eAAe,MAAM,gBAAgB;AAE3C,QACE,oBAAC;EACU;EACC;EACV,aAAa;GACX,aAAa,oBAAC,cAAW,MAAM,KAAM;GACrC,aAAa;GACd;EACa;GACd;;AAIN,sBAAe;;;;ACpDf,MAAM,yBAAyB,UAAsC;AACnE,iBAAgB;EACd,eAAe;AACb,aAAU,OAAO;;EAEnB,aAAa;AACX,aAAU,UAAU;;EAEvB,CAAC;AAEF,QACE,4CACE,oBAAC;EACC,oBAAoB,MAAM,SAAS;EACnC,GAAI,MAAM;GACV,EACF,qBAAC;EAAgB,GAAI,MAAM;;GACzB,oBAAC,iBAAc,GAAI,MAAM,gBAAiB;GAC1C,oBAAC,sBAAmB,GAAI,MAAM,qBAAsB;GACpD,qBAAC;IAAe,GAAI,MAAM;eACxB,oBAACC,mBAAQ,GAAI,MAAM,UAAW,EAC7B,MAAM,YAAY,oBAAC,eAAa;KAClB;;GACD,IACjB;;AAIP,oCAAe"}