@sortsys/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,367 @@
+import * as solid_js from 'solid-js';
+import { JSX, JSXElement, Accessor } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+
+type SSButtonProps = {
+    children: JSX.Element;
+    class?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    isIconOnly?: boolean;
+    onclick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+    ariaLabel?: string;
+    form?: string;
+};
+declare function SSButton(props: SSButtonProps): JSX.Element;
+
+declare const COLORS: readonly ["red", "pink", "purple", "deepPurple", "indigo", "blue", "lightBlue", "cyan", "teal", "green", "lightGreen", "lime", "yellow", "amber", "orange", "deepOrange", "brown", "grey", "blueGrey"];
+
+type SSCalloutProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    color: (typeof COLORS)[number];
+    icon: JSXElement;
+};
+declare function SSCallout(props: SSCalloutProps): JSX.Element;
+
+type SSChipBaseProps = {
+    children: JSXElement;
+    color?: (typeof COLORS)[number];
+    class?: string;
+    style?: string;
+};
+type SSChipClickableProps = {
+    onclick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+    ondismiss?: never;
+};
+type SSChipDismissableProps = {
+    ondismiss: () => void;
+    onclick?: never;
+};
+type SSChipDisplayProps = {
+    onclick?: never;
+    ondismiss?: never;
+};
+type SSChipProps = SSChipBaseProps & (SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);
+declare function SSChip(props: SSChipProps): JSX.Element;
+
+type PromiseOr$3<T> = Promise<T> | T;
+type SSDataColumn<RowT> = {
+    label: string;
+    render: (row: RowT) => PromiseOr$3<JSXElement>;
+    sortKey?: ((row: RowT) => string) | ((row: RowT) => number);
+};
+type SSDataTableProps<RowT extends object> = {
+    columns: SSDataColumn<RowT>[];
+    rows: RowT[];
+    onRowClick?: (row: RowT) => PromiseOr$3<void>;
+    pageSize?: number;
+    paginationPosition?: 'top' | 'bottom';
+    class?: string;
+    style?: string;
+};
+declare function SSDataTable<RowT extends object>(props: SSDataTableProps<RowT>): solid_js.JSX.Element;
+
+type PromiseOr$2<T> = Promise<T> | T;
+type SSDropdownItem = {
+    label: string;
+    icon: JSXElement;
+    onclick?: () => PromiseOr$2<void>;
+    checked?: boolean;
+};
+type SSDropdownProps = {
+    items: SSDropdownItem[];
+    icon?: JSXElement;
+    ariaLabel?: string;
+    class?: string;
+    style?: string;
+};
+declare function SSDropdown(props: SSDropdownProps): solid_js.JSX.Element;
+
+type SSExpandableProps = {
+    title: JSXElement;
+    class?: string;
+    children?: JSXElement;
+    style?: string;
+    initiallyExpanded?: boolean;
+};
+declare function SSExpandable(props: SSExpandableProps): solid_js.JSX.Element;
+
+type PromiseOr$1<T> = Promise<T> | T;
+type ValidationRule<T> = (value: T) => PromiseOr$1<string | null>;
+interface SSFormField<T = any> {
+    getValue: () => PromiseOr$1<T>;
+    setValue: (value: any) => void;
+    validate: () => PromiseOr$1<void>;
+    hasError: () => boolean;
+}
+interface SSFormContext {
+    loading: Accessor<boolean>;
+    process: (action: (context: SSFormContext) => PromiseOr$1<void>) => Promise<void>;
+    field<T = any>(name: string): SSFormField<T> | null;
+    setValues: (values: Record<string, any>) => void;
+    getValues: () => Record<string, any>;
+    validate: () => Promise<void>;
+    hasError: () => boolean;
+    submit: () => void;
+    setField: (name: string, field: SSFormField) => void;
+    delField: (name: string) => void;
+}
+declare const SSFormContext: solid_js.Context<SSFormContext | undefined>;
+declare const SSForm: {
+    (props: {
+        children?: JSXElement;
+        onsubmit?: (context: SSFormContext) => PromiseOr$1<void>;
+    }): solid_js.JSX.Element;
+    Input<ItemT = Record<string, any>, PrepT = any>(props: {
+        id?: string;
+        label: string;
+        name?: string;
+        required?: boolean;
+        rules?: ValidationRule<string | null>[];
+        disabled?: boolean;
+    } & ({
+        type?: "text" | "number" | "email" | "tel" | "password";
+        suggestions?: {
+            prepare?: () => PromiseOr$1<PrepT>;
+            getItems: (props: {
+                query: string;
+                init: Awaited<PrepT>;
+            }) => PromiseOr$1<ItemT[]>;
+            renderItem?: (props: {
+                item: ItemT;
+                init: Awaited<PrepT>;
+            }) => JSXElement;
+            stringify: (props: {
+                item: ItemT;
+                init: Awaited<PrepT>;
+            }) => string;
+        };
+        textArea?: false | null;
+    } | {
+        suggestions?: null;
+        type?: null;
+        textArea: true;
+    })): solid_js.JSX.Element;
+    Date(props: {
+        id?: string;
+        label: string;
+        name?: string;
+        required?: boolean;
+        rules?: ValidationRule<string | null>[];
+        disabled?: boolean;
+        editable?: boolean;
+    }): solid_js.JSX.Element;
+    Checkbox(props: {
+        id?: string;
+        label: string;
+        name?: string;
+        required?: boolean;
+        disabled?: boolean;
+        rules?: ValidationRule<boolean>[];
+    }): solid_js.JSX.Element;
+    useContext(): {
+        loading: Accessor<boolean>;
+        process: (action: (context: SSFormContext) => PromiseOr$1<void>) => Promise<void>;
+        field<T = any>(name: string): SSFormField<T> | null;
+        setValues: (values: Record<string, any>) => void;
+        getValues: () => Record<string, any>;
+        validate: () => Promise<void>;
+        hasError: () => boolean;
+        submit: () => void;
+    } | null;
+    Select<T extends Exclude<(Record<string, any> & {
+        id: string;
+    }), Function>>(props: {
+        id?: string;
+        label: string;
+        name?: string;
+        children?: JSXElement;
+        disabled?: boolean;
+        getOptions: () => Promise<T[]> | T[];
+        buildOption: (item: T) => string;
+        rules?: ValidationRule<string>[];
+    }): solid_js.JSX.Element;
+    ACSelect<T extends (Record<string, any> & {
+        id: string;
+    }), PrepT = any>(props: {
+        id?: string;
+        label: string;
+        name?: string;
+        disabled?: boolean;
+        prepare?: () => PromiseOr$1<PrepT>;
+        getOptions: (props: {
+            query: string;
+            init: PrepT;
+        }) => PromiseOr$1<T[]>;
+        renderItem: (props: {
+            item: T;
+            init: PrepT;
+        }) => JSXElement;
+        rules?: ValidationRule<T[]>[];
+    } & ({
+        minSelectedItems?: number;
+        maxSelectedItems?: number;
+        renderSelection?: undefined;
+    } | {
+        minSelectedItems?: 0 | 1;
+        maxSelectedItems: 1;
+        renderSelection?: (props: {
+            item: T;
+            init: PrepT;
+        }) => JSXElement;
+    })): solid_js.JSX.Element;
+    SubmitButton(props: {
+        children: JSXElement;
+        disabled?: boolean;
+    }): solid_js.JSX.Element;
+    rules: {
+        required: (value: any) => "Pflichtfeld" | null;
+        minLength: (length: number) => (value: any) => string | null;
+        maxLength: (length: number) => (value: any) => string | null;
+        pattern: (pattern: RegExp) => (value: any) => "Eingabe widerspricht erwartetem Muster" | null;
+    };
+};
+
+type SSHeaderProps = {
+    title: JSXElement;
+    subtitle?: JSXElement | false;
+    actions?: JSXElement | false;
+    class?: string;
+    style?: string;
+};
+declare function SSHeader(props: SSHeaderProps): solid_js.JSX.Element;
+
+type SSModalSize = 'sm' | 'md' | 'lg';
+type SSModalProps = {
+    open: boolean;
+    title?: string;
+    children: JSXElement;
+    footer?: JSXElement;
+    size?: SSModalSize;
+    fullscreen?: boolean;
+    disableResponsiveFullscreen?: boolean;
+    dismissible?: boolean;
+    lockScroll?: boolean;
+    onClose?: () => void;
+};
+declare function SSModal(props: SSModalProps): solid_js.JSX.Element;
+
+type PromiseOr<T> = Promise<T> | T;
+type SSModalEntry = {
+    id: string;
+    visible: () => boolean;
+    setVisible: (value: boolean) => void;
+    render: (props: {
+        id: string;
+        hide: () => void;
+        visible: () => boolean;
+    }) => JSXElement;
+};
+type SSFormPublicContext = NonNullable<ReturnType<typeof SSForm.useContext>>;
+type DefaultModalProps = {
+    content: (props: {
+        hide: () => void;
+    }) => JSXElement;
+    modalProps?: (props: {
+        hide: () => void;
+    }) => Omit<SSModalProps, 'open' | 'onClose' | 'children' | 'footer'> & {
+        primaryButtonText?: string;
+        secondaryButtonText?: string;
+        hideSecondaryButton?: boolean;
+        danger?: boolean;
+    };
+    onPrimaryAction?: (props: {
+        hide: () => void;
+        navigate: ReturnType<typeof useNavigate>;
+        pathname: string;
+    }) => PromiseOr<void>;
+};
+type FormModalProps = {
+    content: (props: {
+        hide: () => void;
+        context: SSFormPublicContext;
+    }) => JSXElement;
+    modalProps?: (props: {
+        hide: () => void;
+        context: SSFormPublicContext;
+    }) => Omit<SSModalProps, 'open' | 'onClose' | 'children' | 'footer'> & {
+        primaryButtonText?: string;
+        secondaryButtonText?: string;
+        hideSecondaryButton?: boolean;
+        danger?: boolean;
+    };
+    onSubmit: (props: {
+        hide: () => void;
+        context: SSFormPublicContext;
+        navigate: ReturnType<typeof useNavigate>;
+        pathname: string;
+    }) => PromiseOr<void>;
+};
+interface SSModalsInterface {
+    show: (render: SSModalEntry['render']) => string;
+    showDefault: (props: DefaultModalProps) => string;
+    showForm: (props: FormModalProps) => string;
+    hide: (id: string) => void;
+}
+declare function useSSModals(): SSModalsInterface;
+declare function SSModalsProvider(props: {
+    children: JSXElement;
+}): solid_js.JSX.Element;
+
+type SSShellProps = {
+    title: JSXElement;
+    nav: JSXElement;
+    children: JSXElement;
+    actions?: JSXElement;
+    class?: string;
+    style?: string;
+};
+declare function SSShell(props: SSShellProps): solid_js.JSX.Element;
+declare namespace SSShell {
+    var Nav: (props: {
+        children: JSXElement;
+    }) => solid_js.JSX.Element;
+    var NavLink: (props: {
+        href: string;
+        children: JSXElement;
+        icon?: JSXElement;
+        onclick?: () => void;
+    }) => solid_js.JSX.Element;
+    var NavAction: (props: {
+        onclick: () => void;
+        children: JSXElement;
+        icon?: JSXElement;
+    }) => solid_js.JSX.Element;
+    var NavGroup: (props: {
+        title: JSXElement;
+        children: JSXElement;
+        icon?: JSXElement;
+        initiallyExpanded?: boolean;
+    }) => solid_js.JSX.Element;
+}
+
+type SSSurfaceProps = {
+    children: solid_js.JSXElement;
+    class?: string;
+    style?: string;
+};
+declare function SSSurface(props: SSSurfaceProps): solid_js.JSX.Element;
+
+type SSTileProps = {
+    icon?: JSXElement;
+    title: JSXElement;
+    href?: string;
+    subtitle?: JSXElement;
+    trailing?: JSXElement;
+    onLinkClick?: () => void;
+    class?: string;
+    style?: string;
+};
+declare function SSTile(props: SSTileProps): solid_js.JSX.Element;
+declare function createSSTile<T>(build: (data: T) => SSTileProps): (props: {
+    data: T;
+    noLink?: boolean;
+    noIcon?: boolean;
+    onLinkClick?: () => void;
+}) => solid_js.JSX.Element;
+
+export { SSButton, SSCallout, SSChip, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };