alepha
Version:
Alepha is a convention-driven TypeScript framework for building robust, end-to-end type-safe applications, from serverless APIs to full-stack React apps.
300 lines (299 loc) • 10.3 kB
TypeScript
import * as _alepha_core0 from "alepha";
import { TObject } from "alepha";
import * as _alepha_react0 from "alepha/react";
import { RouterGoOptions, UseActiveOptions } from "alepha/react";
import * as _mantine_notifications0 from "@mantine/notifications";
import { NotificationData, NotificationsProps } from "@mantine/notifications";
import * as react_jsx_runtime0 from "react/jsx-runtime";
import { AutocompleteProps, ButtonProps, ColorInputProps, ColorSchemeScriptProps, FileInputProps, Flex, MantineProviderProps, MultiSelectProps, NumberInputProps, PasswordInputProps, SegmentedControlProps, SelectProps, SwitchProps, TagsInputProps, TextInputProps, TextareaProps } from "@mantine/core";
import { FormModel, InputField } from "alepha/react/form";
import { ComponentType, ReactNode } from "react";
import { ModalsProviderProps } from "@mantine/modals";
import { NavigationProgressProps } from "@mantine/nprogress";
import { SpotlightActionData } from "@mantine/spotlight";
import { DateInputProps, DateTimePickerProps, TimeInputProps } from "@mantine/dates";
//#region src/components/Control.d.ts
interface ControlProps extends GenericControlProps {
text?: TextInputProps;
area?: boolean | TextareaProps;
select?: boolean | SelectProps;
autocomplete?: boolean | AutocompleteProps;
password?: boolean | PasswordInputProps;
switch?: boolean | SwitchProps;
segmented?: boolean | Partial<SegmentedControlProps>;
number?: boolean | NumberInputProps;
file?: boolean | FileInputProps;
color?: boolean | ColorInputProps;
date?: boolean | DateInputProps;
datetime?: boolean | DateTimePickerProps;
time?: boolean | TimeInputProps;
custom?: ComponentType<CustomControlProps>;
}
/**
* Generic form control that renders the appropriate input based on the schema and props.
*
* Supports:
* - TextInput (with format detection: email, url, tel)
* - Textarea
* - NumberInput (for number/integer types)
* - FileInput
* - ColorInput (for color format)
* - Select (for enum types)
* - Autocomplete
* - PasswordInput
* - Switch (for boolean types)
* - SegmentedControl (for enum types)
* - DateInput (for date format)
* - DateTimePicker (for date-time format)
* - TimeInput (for time format)
* - Custom component
*
* Automatically handles labels, descriptions, error messages, required state, and default icons.
*/
declare const Control: (props: ControlProps) => react_jsx_runtime0.JSX.Element | null;
interface GenericControlProps {
input: InputField;
title?: string;
description?: string;
icon?: ReactNode;
}
type CustomControlProps = {
defaultValue: any;
onChange: (value: any) => void;
};
//#endregion
//#region src/components/Action.d.ts
interface ActionCommonProps extends ButtonProps {
children?: ReactNode;
textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
/**
* If set, a confirmation dialog will be shown before performing the action.
* If `true`, a default title and message will be used.
* If a string, it will be used as the message with a default title.
* If an object, it can contain `title` and `message` properties to customize the dialog.
*/
confirm?: boolean | string | {
title?: string;
message: string;
};
}
type ActionProps = ActionCommonProps & (ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
declare const Action: (_props: ActionProps) => react_jsx_runtime0.JSX.Element;
interface ActionSubmitProps extends ButtonProps {
form: FormModel<any>;
}
interface ActionClickProps extends ButtonProps {
onClick: (e: any) => any;
}
interface ActiveHrefProps extends ButtonProps {
href: string;
active?: Partial<UseActiveOptions> | false;
routerGoOptions?: RouterGoOptions;
}
//#endregion
//#region src/components/Omnibar.d.ts
interface OmnibarProps {
actions?: SpotlightActionData[];
shortcut?: string | string[];
searchPlaceholder?: string;
nothingFound?: ReactNode;
}
declare const Omnibar: (props: OmnibarProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/components/AlephaMantineProvider.d.ts
interface AlephaMantineProviderProps {
children?: ReactNode;
mantine?: MantineProviderProps;
colorSchemeScript?: ColorSchemeScriptProps;
navigationProgress?: NavigationProgressProps;
notifications?: NotificationsProps;
modals?: ModalsProviderProps;
omnibar?: OmnibarProps;
}
declare const AlephaMantineProvider: (props: AlephaMantineProviderProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/components/ControlDate.d.ts
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.
*/
declare const ControlDate: (props: ControlDateProps) => react_jsx_runtime0.JSX.Element | null;
//#endregion
//#region src/components/ControlSelect.d.ts
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.
*/
declare const ControlSelect: (props: ControlSelectProps) => react_jsx_runtime0.JSX.Element | null;
//#endregion
//#region src/components/DarkModeButton.d.ts
interface DarkModeButtonProps {
mode?: "minimal" | "segmented";
size?: string | number;
variant?: "filled" | "light" | "outline" | "default" | "subtle" | "transparent";
}
declare const DarkModeButton: (props: DarkModeButtonProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/components/TypeForm.d.ts
interface TypeFormProps<T$1 extends TObject> {
form: FormModel<T$1>;
columns?: number | {
base?: number;
xs?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
};
children?: (input: FormModel<T$1>["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} />;
* ```
*/
declare const TypeForm: <T extends TObject>(props: TypeFormProps<T>) => react_jsx_runtime0.JSX.Element | null;
//#endregion
//#region src/services/ToastService.d.ts
interface ToastServiceOptions {
default?: Partial<NotificationData>;
}
declare class ToastService {
protected readonly raw: {
readonly show: typeof _mantine_notifications0.showNotification;
readonly hide: typeof _mantine_notifications0.hideNotification;
readonly update: typeof _mantine_notifications0.updateNotification;
readonly clean: typeof _mantine_notifications0.cleanNotifications;
readonly cleanQueue: typeof _mantine_notifications0.cleanNotificationsQueue;
readonly updateState: typeof _mantine_notifications0.updateNotificationsState;
};
readonly options: ToastServiceOptions;
show(options: NotificationData): void;
info(options: Partial<NotificationData>): void;
success(options: Partial<NotificationData>): void;
warning(options: Partial<NotificationData>): void;
danger(options: Partial<NotificationData>): void;
}
//#endregion
//#region src/hooks/useToast.d.ts
/**
* 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" });
*/
declare const useToast: () => ToastService;
//#endregion
//#region src/RootRouter.d.ts
declare class RootRouter {
readonly root: _alepha_react0.PageDescriptor<_alepha_react0.PageConfigSchema, any, _alepha_react0.TPropsParentDefault>;
}
//#endregion
//#region src/utils/icons.d.ts
/**
* Icon size presets following Mantine's size conventions
*/
declare const ICON_SIZES: {
readonly xs: 12;
readonly sm: 16;
readonly md: 20;
readonly lg: 24;
readonly xl: 28;
};
type IconSize = keyof typeof ICON_SIZES;
/**
* Get the default icon for an input based on its type, format, or name.
*/
declare const getDefaultIcon: (params: {
type?: string;
format?: string;
name?: string;
isEnum?: boolean;
isArray?: boolean;
size?: IconSize;
}) => ReactNode;
//#endregion
//#region src/utils/string.d.ts
/**
* Capitalizes the first letter of a string.
*
* @example
* capitalize("hello") // "Hello"
*/
declare const capitalize: (str: string) => string;
/**
* Converts a path or identifier string into a pretty display name.
* Removes slashes and capitalizes the first letter.
*
* @example
* prettyName("/userName") // "UserName"
* prettyName("email") // "Email"
*/
declare const prettyName: (name: string) => string;
//#endregion
//#region src/index.d.ts
declare module "typebox" {
interface TSchemaOptions {
$control?: Omit<ControlProps, "input">;
}
}
/**
*
*
* @module alepha.ui
*/
declare const AlephaUI: _alepha_core0.Service<_alepha_core0.Module<{}>>;
//#endregion
export { Action, AlephaMantineProvider, AlephaUI, Control, ControlDate, ControlSelect, DarkModeButton, Flex, ICON_SIZES, IconSize, Omnibar, RootRouter, ToastService, TypeForm, capitalize, getDefaultIcon, prettyName, useToast };
//# sourceMappingURL=index.d.ts.map