@alepha/ui 0.10.6 → 0.10.7

package/src/components/ControlDate.tsx

@@ -0,0 +1,112 @@
+import { useFormState } from "@alepha/react-form";
+import {
+  DateInput,
+  type DateInputProps,
+  DateTimePicker,
+  type DateTimePickerProps,
+  TimeInput,
+  type TimeInputProps,
+} from "@mantine/dates";
+import { type GenericControlProps, parseInput } from "./Control.tsx";
+
+export interface ControlDateProps extends GenericControlProps {
+  date?: boolean | DateInputProps;
+  datetime?: boolean | DateTimePickerProps;
+  time?: boolean | TimeInputProps;
+}
+
+/**
+ * ControlDate component for handling date, datetime, and time inputs.
+ *
+ * Features:
+ * - DateInput for date format
+ * - DateTimePicker for date-time format
+ * - TimeInput for time format
+ *
+ * Automatically detects date formats from schema and renders appropriate picker.
+ */
+const ControlDate = (props: ControlDateProps) => {
+  const form = useFormState(props.input);
+  const { inputProps, id, icon } = parseInput(props, form);
+  if (!props.input?.props) {
+    return null;
+  }
+
+  // Detect format from schema
+  const format =
+    props.input.schema &&
+    "format" in props.input.schema &&
+    typeof props.input.schema.format === "string"
+      ? props.input.schema.format
+      : undefined;
+
+  // region <DateTimePicker/>
+  if (props.datetime || format === "date-time") {
+    const dateTimePickerProps =
+      typeof props.datetime === "object" ? props.datetime : {};
+    return (
+      <DateTimePicker
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          props.input.props.defaultValue
+            ? new Date(props.input.props.defaultValue)
+            : undefined
+        }
+        onChange={(value) => {
+          props.input.set(value ? new Date(value).toISOString() : undefined);
+        }}
+        {...dateTimePickerProps}
+      />
+    );
+  }
+  //endregion
+
+  // region <DateInput/>
+  if (props.date || format === "date") {
+    const dateInputProps = typeof props.date === "object" ? props.date : {};
+    return (
+      <DateInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          props.input.props.defaultValue
+            ? new Date(props.input.props.defaultValue)
+            : undefined
+        }
+        onChange={(value) => {
+          props.input.set(
+            value ? new Date(value).toISOString().slice(0, 10) : undefined,
+          );
+        }}
+        {...dateInputProps}
+      />
+    );
+  }
+  //endregion
+
+  // region <TimeInput/>
+  if (props.time || format === "time") {
+    const timeInputProps = typeof props.time === "object" ? props.time : {};
+    return (
+      <TimeInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={props.input.props.defaultValue}
+        onChange={(event) => {
+          props.input.set(event.currentTarget.value);
+        }}
+        {...timeInputProps}
+      />
+    );
+  }
+  //endregion
+
+  // Fallback - shouldn't happen
+  return null;
+};
+
+export default ControlDate;

package/src/components/ControlSelect.tsx

@@ -0,0 +1,134 @@
+import { useFormState } from "@alepha/react-form";
+import {
+  MultiSelect,
+  type MultiSelectProps,
+  Select,
+  type SelectProps,
+  TagsInput,
+  type TagsInputProps,
+} from "@mantine/core";
+import { type GenericControlProps, parseInput } from "./Control.tsx";
+
+export interface ControlSelectProps extends GenericControlProps {
+  select?: boolean | SelectProps;
+  multi?: boolean | MultiSelectProps;
+  tags?: boolean | TagsInputProps;
+}
+
+/**
+ * ControlSelect component for handling Select, MultiSelect, and TagsInput.
+ *
+ * Features:
+ * - Basic Select with enum support
+ * - MultiSelect for array of enums
+ * - TagsInput for array of strings (no enum)
+ * - Future: Lazy loading
+ * - Future: Searchable/filterable options
+ * - Future: Custom option rendering
+ *
+ * Automatically detects enum values and array types from schema.
+ */
+const ControlSelect = (props: ControlSelectProps) => {
+  const form = useFormState(props.input);
+  const { inputProps, id, icon } = parseInput(props, form);
+  if (!props.input?.props) {
+    return null;
+  }
+
+  // Detect if schema is an array type
+  const isArray =
+    props.input.schema &&
+    "type" in props.input.schema &&
+    props.input.schema.type === "array";
+
+  // For arrays, check if items have enum (MultiSelect) or not (TagsInput)
+  let itemsEnum: string[] | undefined;
+  if (isArray && "items" in props.input.schema && props.input.schema.items) {
+    const items: any = props.input.schema.items;
+    if ("enum" in items && Array.isArray(items.enum)) {
+      itemsEnum = items.enum;
+    }
+  }
+
+  // Extract enum values from schema (for non-array select)
+  const enumValues =
+    props.input.schema &&
+    "enum" in props.input.schema &&
+    Array.isArray(props.input.schema.enum)
+      ? props.input.schema.enum
+      : [];
+
+  // region <TagsInput/> - for array of strings without enum
+  if ((isArray && !itemsEnum) || props.tags) {
+    const tagsInputProps = typeof props.tags === "object" ? props.tags : {};
+    return (
+      <TagsInput
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        defaultValue={
+          Array.isArray(props.input.props.defaultValue)
+            ? props.input.props.defaultValue
+            : []
+        }
+        onChange={(value) => {
+          props.input.set(value);
+        }}
+        {...tagsInputProps}
+      />
+    );
+  }
+  // endregion
+
+  // region <MultiSelect/> - for array of enums
+  if ((isArray && itemsEnum) || props.multi) {
+    const data =
+      itemsEnum?.map((value: string) => ({
+        value,
+        label: value,
+      })) || [];
+
+    const multiSelectProps = typeof props.multi === "object" ? props.multi : {};
+
+    return (
+      <MultiSelect
+        {...inputProps}
+        id={id}
+        leftSection={icon}
+        data={data}
+        defaultValue={
+          Array.isArray(props.input.props.defaultValue)
+            ? props.input.props.defaultValue
+            : []
+        }
+        onChange={(value) => {
+          props.input.set(value);
+        }}
+        {...multiSelectProps}
+      />
+    );
+  }
+  // endregion
+
+  // region <Select/> - for single enum value
+  const data = enumValues.map((value: string) => ({
+    value,
+    label: value,
+  }));
+
+  const selectProps = typeof props.select === "object" ? props.select : {};
+
+  return (
+    <Select
+      {...inputProps}
+      id={id}
+      leftSection={icon}
+      data={data}
+      {...props.input.props}
+      {...selectProps}
+    />
+  );
+  // endregion
+};
+
+export default ControlSelect;

package/src/components/DarkModeButton.tsx

@@ -0,0 +1,75 @@
+import {
+  ActionIcon,
+  Flex,
+  SegmentedControl,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+export interface DarkModeButtonProps {
+  mode?: "minimal" | "segmented";
+  size?: string | number;
+  variant?:
+    | "filled"
+    | "light"
+    | "outline"
+    | "default"
+    | "subtle"
+    | "transparent";
+}
+
+const DarkModeButton = (props: DarkModeButtonProps) => {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light");
+  const [colorScheme, setColorScheme2] = useState("default");
+  useEffect(() => {
+    setColorScheme2(computedColorScheme);
+  }, [computedColorScheme]);
+  const mode = props.mode ?? "minimal";
+
+  const toggleColorScheme = () => {
+    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
+  };
+
+  if (mode === "segmented") {
+    return (
+      <SegmentedControl
+        value={colorScheme}
+        onChange={(value) => setColorScheme(value as "light" | "dark")}
+        data={[
+          {
+            value: "light",
+            label: (
+              <Flex h={20} align="center" justify="center">
+                <IconSun size={16} />
+              </Flex>
+            ),
+          },
+          {
+            value: "dark",
+            label: (
+              <Flex h={20} align="center" justify="center">
+                <IconMoon size={16} />
+              </Flex>
+            ),
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <ActionIcon
+      onClick={toggleColorScheme}
+      variant={props.variant ?? "default"}
+      size={props.size ?? "lg"}
+      aria-label="Toggle color scheme"
+    >
+      {colorScheme === "dark" ? <IconSun size={20} /> : <IconMoon size={20} />}
+    </ActionIcon>
+  );
+};
+
+export default DarkModeButton;

package/src/components/Omnibar.tsx

@@ -0,0 +1,76 @@
+import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
+import {
+  IconDashboard,
+  IconFileText,
+  IconHome,
+  IconSearch,
+  IconSettings,
+  IconUser,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+export interface OmnibarProps {
+  actions?: SpotlightActionData[];
+  shortcut?: string | string[];
+  searchPlaceholder?: string;
+  nothingFound?: ReactNode;
+}
+
+const defaultActions: SpotlightActionData[] = [
+  {
+    id: "home",
+    label: "Home",
+    description: "Go to home page",
+    onClick: () => console.log("Home"),
+    leftSection: <IconHome size={20} />,
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    description: "View your dashboard",
+    onClick: () => console.log("Dashboard"),
+    leftSection: <IconDashboard size={20} />,
+  },
+  {
+    id: "documents",
+    label: "Documents",
+    description: "Browse all documents",
+    onClick: () => console.log("Documents"),
+    leftSection: <IconFileText size={20} />,
+  },
+  {
+    id: "profile",
+    label: "Profile",
+    description: "View and edit your profile",
+    onClick: () => console.log("Profile"),
+    leftSection: <IconUser size={20} />,
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    description: "Manage application settings",
+    onClick: () => console.log("Settings"),
+    leftSection: <IconSettings size={20} />,
+  },
+];
+
+const Omnibar = (props: OmnibarProps) => {
+  const actions = props.actions ?? defaultActions;
+  const shortcut = props.shortcut ?? "mod+K";
+  const searchPlaceholder = props.searchPlaceholder ?? "Search...";
+  const nothingFound = props.nothingFound ?? "Nothing found...";
+
+  return (
+    <Spotlight
+      actions={actions}
+      shortcut={shortcut}
+      searchProps={{
+        leftSection: <IconSearch size={20} />,
+        placeholder: searchPlaceholder,
+      }}
+      nothingFound={nothingFound}
+    />
+  );
+};
+
+export default Omnibar;

package/src/components/TypeForm.tsx

@@ -0,0 +1,158 @@
+import type { TObject } from "@alepha/core";
+import type { FormModel } from "@alepha/react-form";
+import { Grid, Stack } from "@mantine/core";
+import type { ReactNode } from "react";
+import Action, { type ActionSubmitProps } from "./Action";
+import Control, { type ControlProps } from "./Control";
+
+export interface TypeFormProps<T extends TObject> {
+  form: FormModel<T>;
+  columns?:
+    | number
+    | {
+        base?: number;
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+      };
+  children?: (input: FormModel<T>["input"]) => ReactNode;
+  controlProps?: Partial<Omit<ControlProps, "input">>;
+  skipFormElement?: boolean;
+  skipSubmitButton?: boolean;
+  submitButtonProps?: Partial<Omit<ActionSubmitProps, "form">>;
+}
+
+/**
+ * TypeForm component that automatically renders all form inputs based on schema.
+ * Uses the Control component to render individual fields and Mantine Grid for responsive layout.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ * import { useForm } from "@alepha/react-form";
+ * import { TypeForm } from "@alepha/ui";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.text(),
+ *     email: t.text(),
+ *     age: t.integer(),
+ *     subscribe: t.boolean(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log(values);
+ *   },
+ * });
+ *
+ * return <TypeForm form={form} columns={2} />;
+ * ```
+ */
+const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
+  const {
+    form,
+    columns = 1,
+    children,
+    controlProps,
+    skipFormElement = false,
+    skipSubmitButton = false,
+    submitButtonProps,
+  } = props;
+
+  if (!form.options?.schema?.properties) {
+    return null;
+  }
+
+  const fieldNames = Object.keys(form.options.schema.properties);
+
+  // Filter out unsupported field types (objects only, arrays are now supported)
+  const supportedFields = fieldNames.filter((fieldName) => {
+    const field = form.input[fieldName as keyof typeof form.input];
+    if (!field || typeof field !== "object" || !("schema" in field)) {
+      return false;
+    }
+
+    const schema: any = field.schema;
+
+    // Skip if it's an object (not supported by Control)
+    // Arrays are now supported via ControlSelect (MultiSelect/TagsInput)
+    if ("type" in schema) {
+      if (schema.type === "object") {
+        return false;
+      }
+    }
+
+    // Check if it has properties (nested object)
+    if ("properties" in schema && schema.properties) {
+      return false;
+    }
+
+    return true;
+  });
+
+  // Handle column configuration with defaults: xs=1, sm=2, lg=3
+  const colSpan =
+    typeof columns === "number"
+      ? {
+          xs: 12,
+          sm: 6,
+          lg: 12 / 3,
+        }
+      : {
+          base: columns.base ? 12 / columns.base : undefined,
+          xs: columns.xs ? 12 / columns.xs : 12,
+          sm: columns.sm ? 12 / columns.sm : 6,
+          md: columns.md ? 12 / columns.md : undefined,
+          lg: columns.lg ? 12 / columns.lg : 4,
+          xl: columns.xl ? 12 / columns.xl : undefined,
+        };
+
+  const renderFields = () => {
+    if (children) {
+      return <>{children(form.input)}</>;
+    }
+
+    return (
+      <Grid>
+        {supportedFields.map((fieldName) => {
+          const field = form.input[fieldName as keyof typeof form.input];
+
+          // Type guard to ensure field has the expected structure
+          if (!field || typeof field !== "object" || !("schema" in field)) {
+            return null;
+          }
+
+          return (
+            <Grid.Col key={fieldName} span={colSpan}>
+              <Control input={field as any} {...controlProps} />
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+    );
+  };
+
+  const content = (
+    <Stack>
+      {renderFields()}
+      {!skipSubmitButton && (
+        <Action form={form} {...submitButtonProps}>
+          {submitButtonProps?.children ?? "Submit"}
+        </Action>
+      )}
+    </Stack>
+  );
+
+  if (skipFormElement) {
+    return content;
+  }
+
+  return (
+    <form onSubmit={form.onSubmit} noValidate>
+      {content}
+    </form>
+  );
+};
+
+export default TypeForm;

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,17 +1,33 @@
 import { $module } from "@alepha/core";
 import { AlephaReact } from "@alepha/react";
+import type { ControlProps } from "./components/Control.tsx";
+import { RootRouter } from "./RootRouter.ts";
+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 { default as Omnibar } from "./components/Omnibar.tsx";
+export { default as TypeForm } from "./components/TypeForm.tsx";
+export { useToast } from "./hooks/useToast.ts";
+export * from "./RootRouter.ts";
+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">;
+  }
+}
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -21,6 +37,6 @@ export { default as Control } from "./components/Control";
  * @module alepha.ui
  */
 export const AlephaUI = $module({
-	name: "alepha.ui",
-	services: [AlephaReact],
+  name: "alepha.ui",
+  services: [AlephaReact, ToastService, RootRouter],
 });

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