@ansible/ansible-ui-framework 0.0.190

package/mjs/framework/PageCells.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { PatternFlyColor } from './components/patternfly-colors';
+export declare function LabelsCell(props: {
+    labels: string[];
+}): JSX.Element;
+export declare function DateCell(props: {
+    value: number | string;
+}): JSX.Element;
+export declare function TextCell(props: {
+    icon?: ReactNode;
+    text?: string;
+    iconSize?: 'sm' | 'md' | 'lg';
+    to?: string;
+    onClick?: () => void;
+    textColor?: PatternFlyColor;
+}): JSX.Element;
+export declare function CopyCell(props: {
+    text?: string;
+    minWidth?: number;
+}): JSX.Element;
+export declare function SinceCell(props: {
+    value: string | undefined | null;
+    author?: string;
+    onClick?: () => void;
+    t?: (t: string) => string;
+}): JSX.Element;
+export declare function CapacityCell(props: {
+    format?: string;
+    used: number;
+    capacity: number;
+}): JSX.Element;
+export declare function BytesCell(props: {
+    bytes: number;
+    decimals?: number;
+}): JSX.Element;

package/mjs/framework/PageCells.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, ClipboardCopy, Flex, FlexItem, Label, LabelGroup, Split, SplitItem, Tooltip, Truncate, } from '@patternfly/react-core';
+import { DateTime } from 'luxon';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { IconWrapper } from './components/IconWrapper';
+import { getPatternflyColor } from './components/patternfly-colors';
+import { useSettings } from './Settings';
+export function LabelsCell(props) {
+    return (_jsx(LabelGroup, { numLabels: 999, style: { flexWrap: 'nowrap' }, children: props.labels.map((label) => (_jsx(Label, { children: label }, label))) }));
+}
+export function DateCell(props) {
+    const date = new Date(props.value);
+    return (_jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { children: date.toLocaleDateString() }), _jsx(SplitItem, { children: date.toLocaleTimeString() })] }));
+}
+export function TextCell(props) {
+    return (_jsxs(Split, { children: [props.icon && (_jsx(SplitItem, { children: _jsx(IconWrapper, { size: props.iconSize ?? 'md', children: props.icon }) })), props.to ? (_jsx(SplitItem, { children: _jsx(Tooltip, { content: props.text ?? '', children: _jsx("div", { style: {
+                            maxWidth: 300,
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                        }, children: _jsx(Link, { to: props.to, children: props.text ?? '' }) }) }) })) : props.onClick !== undefined ? (_jsx(SplitItem, { onClick: props.onClick, children: _jsx(Button, { variant: "link", isInline: true, style: {
+                        whiteSpace: 'nowrap',
+                    }, children: props.text }) })) : (_jsx(SplitItem, { style: {
+                    color: props.textColor ? getPatternflyColor(props.textColor) : undefined,
+                }, children: _jsx(Tooltip, { content: props.text ?? '', children: _jsx("div", { style: {
+                            maxWidth: 300,
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                        }, children: props.text ?? '' }) }) }))] }));
+}
+export function CopyCell(props) {
+    if (!props.text)
+        return _jsx(_Fragment, {});
+    return (_jsx(ClipboardCopy, { hoverTip: "Copy", clickTip: "Copied", variant: "inline-compact", style: { display: 'flex', flexWrap: 'nowrap', borderRadius: 4 }, onCopy: () => {
+            void navigator.clipboard.writeText(props.text ?? '');
+        }, children: _jsx(Truncate, { content: props.text, style: { minWidth: props.minWidth } }) }));
+}
+export function SinceCell(props) {
+    let { t } = props;
+    t = t ? t : (t) => t;
+    const { author, onClick } = props;
+    const [dateTime, setDateTime] = useState(null);
+    useEffect(() => {
+        if (props.value) {
+            setDateTime(DateTime.fromISO(props.value).toRelative());
+        }
+        const timeout = setInterval(() => {
+            if (props.value) {
+                setDateTime(DateTime.fromISO(props.value).toRelative());
+            }
+        }, 1000);
+        return () => clearTimeout(timeout);
+    }, [props.value]);
+    if (props.value === undefined)
+        return _jsx(_Fragment, {});
+    return (_jsxs("span", { style: { whiteSpace: 'nowrap' }, children: [dateTime, author && _jsxs("span", { children: ["\u00A0", t('by'), "\u00A0"] }), onClick ? (_jsx(Button, { variant: "link", isInline: true, onClick: onClick, children: author })) : (_jsx("span", { children: author }))] }));
+}
+export function CapacityCell(props) {
+    const { t } = useTranslation();
+    const settings = useSettings();
+    const ratio = props.used / props.capacity;
+    if (props.capacity === 0)
+        return _jsx(_Fragment, {});
+    const base = ratio >= 0.8
+        ? 'var(--pf-global--palette--red'
+        : ratio >= 0.5
+            ? 'var(--pf-global--palette--gold'
+            : 'var(--pf-global--palette--green';
+    const color1 = settings.theme === 'light' ? `${base}-100)` : `${base}-600)`;
+    const color2 = settings.theme === 'light' ? `${base}-400)` : `${base}-200)`;
+    const borderColor = settings.theme === 'light' ? `#0002` : `#fff2`;
+    return (_jsxs(Flex, { alignItems: { default: 'alignItemsBaseline' }, spaceItems: { default: 'spaceItemsSm' }, children: [props.capacity > 0 && (_jsx(FlexItem, { children: _jsx("div", { style: {
+                        width: 18,
+                        height: 25,
+                        background: color1,
+                        marginBottom: -9,
+                        paddingTop: Math.max(0, Math.min(25, (25 * (props.capacity - props.used)) / props.capacity)),
+                        borderRadius: 2,
+                        border: `thin solid ${borderColor}`,
+                    }, children: _jsx("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            background: color2,
+                            borderRadius: 2,
+                        } }) }) })), props.format ? (_jsx(FlexItem, { children: props.format
+                    .replace('{used}', props.used.toString())
+                    .replace('{capacity}', props.capacity.toString()) })) : (_jsxs(FlexItem, { children: [props.used, t(' of '), props.capacity] }))] }));
+}
+export function BytesCell(props) {
+    const { bytes } = props;
+    if (!+bytes)
+        return _jsx(_Fragment, {});
+    const k = 1024;
+    const decimals = props.decimals ? props.decimals : 0;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return _jsx(_Fragment, { children: `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` });
+}

package/mjs/framework/PageColumnModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ITableColumn } from './PageTable';
+export declare function useColumnModal<T extends object>(columns: ITableColumn<T>[], t?: (t: string) => string): {
+    openColumnModal: () => void;
+    columnModal: JSX.Element;
+    managedColumns: ITableColumn<T>[];
+};

package/mjs/framework/PageColumnModal.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DataList, DataListCell, DataListCheck, DataListControl, DataListDragButton, DataListItem, DataListItemCells, DataListItemRow, Modal, ModalVariant, } from '@patternfly/react-core';
+import { useCallback, useEffect, useState } from 'react';
+export function useColumnModal(columns, t) {
+    t = t ? t : (t) => t;
+    const [columnModalOpen, setColumnModalOpen] = useState(false);
+    const openColumnModal = useCallback(() => {
+        setColumnModalOpen(true);
+    }, []);
+    const [managedColumns, setManagedColumns] = useState(() => columns);
+    useEffect(() => {
+        setManagedColumns((managedColumns) => managedColumns.map((managedColumn) => columns.find((column) => column.header === managedColumn.header) ?? managedColumn));
+    }, [columns]);
+    const onClose = useCallback(() => {
+        setColumnModalOpen(false);
+    }, []);
+    // const selectAllColumns = useCallback(() => {
+    //     setManagedColumns((managedColumns) => {
+    //         for (const column of managedColumns) {
+    //             column.enabled = true
+    //         }
+    //         return [...managedColumns]
+    //     })
+    // }, [])
+    const onDragFinish = useCallback((itemOrder) => {
+        setManagedColumns((managedColumns) => {
+            return itemOrder.map((header) => managedColumns.find((column) => column.header === header));
+        });
+    }, []);
+    const handleChange = useCallback((checked, event) => {
+        const columnHeader = event.target.name;
+        if (columnHeader) {
+            setManagedColumns((managedColumns) => {
+                for (const column of managedColumns) {
+                    if (column.header !== columnHeader)
+                        continue;
+                    column.enabled = checked;
+                }
+                return [...managedColumns];
+            });
+        }
+    }, []);
+    const columnModal = (_jsx(Modal, { variant: ModalVariant.medium, title: "Manage columns", 
+        // description={
+        //     <TextContent>
+        //         <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text>
+        //         <Button isInline onClick={selectAllColumns} variant="link">
+        //             Select all
+        //         </Button>
+        //     </TextContent>
+        // }
+        isOpen: columnModalOpen, onClose: onClose, actions: [
+            _jsx(Button, { variant: "primary", onClick: onClose, children: t('Close') }, "save"),
+            // <Button key="cancel" variant="link" onClick={onClose}>
+            //     Cancel
+            // </Button>,
+        ], children: _jsx(DataList, { "aria-label": "Table column management", id: "table-column-management", isCompact: true, onDragFinish: onDragFinish, itemOrder: managedColumns.map((column) => column.header), gridBreakpoint: "none", style: { borderTopWidth: 'thin' }, children: managedColumns.map((column) => {
+                // if (index === 0) return <Fragment />
+                return (_jsx(DataListItem, { id: column.header, "aria-labelledby": "table-column-management-item1", style: { borderBottomWidth: 'thin' }, children: _jsxs(DataListItemRow, { children: [_jsxs(DataListControl, { children: [_jsx(DataListDragButton, { "aria-label": "Reorder", "aria-labelledby": "table-column-management-item1", "aria-describedby": "Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.", "aria-pressed": "false" }), _jsx(DataListCheck, { "aria-labelledby": "table-column-management-item1", checked: column.enabled !== false, name: column.header, id: column.header, onChange: handleChange, otherControls: true })] }), _jsx(DataListItemCells, { dataListCells: [
+                                    _jsx(DataListCell, { id: "table-column-management-item1", children: _jsx("label", { htmlFor: column.header, children: column.header }) }, column.header),
+                                ] })] }) }, column.header));
+            }) }) }));
+    return { openColumnModal, columnModal, managedColumns };
+}

package/mjs/framework/PageDataList.d.ts

@@ -0,0 +1,46 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { PageHeaderProps } from './PageHeader';
+import { IToolbarFilter } from './PageToolbar';
+import { ITypedAction } from './TypedActions';
+export declare type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
+    error?: Error;
+};
+export declare function DataListPage<T extends object>(props: DataListPageProps<T>): JSX.Element;
+export declare type PageDataListProps<T extends object> = {
+    keyFn: (item: T) => string | number;
+    itemCount?: number;
+    pageItems: T[] | undefined;
+    toolbarActions?: ITypedAction<T>[];
+    dataCells: ((item: T) => ReactNode)[];
+    actions: ITypedAction<T>[];
+    toolbarFilters?: IToolbarFilter[];
+    filters?: Record<string, string[]>;
+    setFilters?: Dispatch<SetStateAction<Record<string, string[]>>>;
+    clearAllFilters?: () => void;
+    sort?: string;
+    setSort?: (sort: string) => void;
+    sortDirection?: 'asc' | 'desc';
+    setSortDirection?: (sortDirection: 'asc' | 'desc') => void;
+    compact?: boolean;
+    page: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    setPerPage: (perPage: number) => void;
+    autoHidePagination?: boolean;
+    isSelected?: (item: T) => boolean;
+    selectedItems?: T[];
+    selectItem?: (item: T) => void;
+    unselectItem?: (item: T) => void;
+    selectItems?: (items: T[]) => void;
+    unselectAll?: () => void;
+    onSelect?: (item: T) => void;
+    selectNoneText?: string;
+    errorStateTitle: string;
+    error?: Error;
+    emptyStateTitle: string;
+    emptyStateDescription?: string;
+    emptyStateButtonText?: string;
+    emptyStateButtonClick?: () => void;
+    t?: (t: string) => string;
+};
+export declare function PageDataList<T extends object>(props: PageDataListProps<T>): JSX.Element;

package/mjs/framework/PageDataList.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, DataList, DataListAction, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, DropdownPosition, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title, } from '@patternfly/react-core';
+import { ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { Fragment } from 'react';
+import { Scrollable } from './components/Scrollable';
+import { PageBody } from './PageBody';
+import { PageHeader } from './PageHeader';
+import { PageLayout } from './PageLayout';
+import { PagePagination } from './PagePagination';
+import { PageTableToolbar } from './PageToolbar';
+import { useSettings } from './Settings';
+import { TypedActions, TypedActionType } from './TypedActions';
+export function DataListPage(props) {
+    return (_jsx(_Fragment, { children: _jsxs(PageLayout, { children: [_jsx(PageHeader, { ...props }), _jsx(PageBody, { children: _jsx(PageDataList, { ...props }) })] }) }));
+}
+export function PageDataList(props) {
+    const { pageItems, selectItem, unselectItem, isSelected, keyFn, toolbarActions, itemCount, perPage, 
+    // clearAllFilters,
+    filters, error, dataCells, } = props;
+    const showSelect = toolbarActions?.find((toolbarAction) => TypedActionType.bulk === toolbarAction.type) !==
+        undefined;
+    const settings = useSettings();
+    if (error) {
+        return (_jsx("div", { style: {
+                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
+                height: '100%',
+            }, children: _jsxs(EmptyState, { variant: EmptyStateVariant.small, style: {
+                    paddingTop: 64,
+                }, children: [_jsx(EmptyStateIcon, { icon: ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), _jsx(Title, { headingLevel: "h2", size: "lg", children: props.errorStateTitle }), _jsx(EmptyStateBody, { children: error.message })] }) }));
+    }
+    if (itemCount === 0 && Object.keys(filters ?? {}).length === 0) {
+        return (_jsxs(EmptyState, { variant: EmptyStateVariant.large, style: { paddingTop: 64 }, children: [_jsx(EmptyStateIcon, { icon: PlusCircleIcon }), _jsx(Title, { headingLevel: "h4", size: "lg", children: props.emptyStateTitle }), props.emptyStateDescription && (_jsx(EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && (_jsx(Button, { variant: "primary", onClick: props.emptyStateButtonClick, children: props.emptyStateButtonText }))] }));
+    }
+    return (_jsxs(Fragment, { children: [_jsx(PageTableToolbar, { ...props, disableBorderBottom: true }), _jsx(Scrollable, { children: _jsx(DataList, { "aria-label": "Simple data list example", children: pageItems?.map((item) => (_jsx(DataListItem, { "aria-labelledby": "simple-item1", children: _jsxs(DataListItemRow, { children: [showSelect && (_jsx(DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected?.(item), onClick: () => {
+                                        if (isSelected?.(item)) {
+                                            selectItem?.(item);
+                                        }
+                                        else {
+                                            unselectItem?.(item);
+                                        }
+                                    } })), _jsx(DataListItemCells, { dataListCells: dataCells.map((dataCell, index) => (_jsx(DataListCell, { width: index === 0 ? 5 : 1, children: _jsx("span", { id: "simple-item1", children: dataCell(item) }) }, "primary content"))) }), props.actions && _jsx(DataListActions, { actions: props.actions })] }) }, keyFn(item)))) }) }), (!props.autoHidePagination || (itemCount ?? 0) > perPage) && _jsx(PagePagination, { ...props })] }));
+}
+function DataListActions(props) {
+    return (_jsx(DataListAction, { "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' }, children: _jsx(TypedActions, { actions: props.actions, position: DropdownPosition.right }) }));
+}

package/mjs/framework/PageDialog.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export declare const DialogContext: import("react").Context<ReactNode>;
+export declare const SetDialogContext: import("react").Context<(dialog?: ReactNode) => void>;
+export declare function PageDialogProvider(props: {
+    children: ReactNode;
+}): JSX.Element;
+export declare function usePageDialog(): [
+    dialog: ReactNode | undefined,
+    setDialog: Dispatch<SetStateAction<ReactNode | undefined>>
+];

package/mjs/framework/PageDialog.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+export const DialogContext = createContext(undefined);
+export const SetDialogContext = createContext(() => null);
+const PageDialogContext = createContext([undefined, () => alert('Use PageDialogProvider')]);
+export function PageDialogProvider(props) {
+    const state = useState();
+    return (_jsxs(PageDialogContext.Provider, { value: state, children: [state[0] !== undefined && state[0], props.children] }));
+}
+export function usePageDialog() {
+    return useContext(PageDialogContext);
+}

package/mjs/framework/PageForm.d.ts

@@ -0,0 +1,147 @@
+import { JSONSchema6 } from 'json-schema';
+import { CSSProperties, ReactNode } from 'react';
+import { DeepPartial, ErrorOption, FieldPath, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { PartialDeep } from 'type-fest';
+import { PageHeaderProps } from '.';
+export declare type FormPageProps<T extends object> = PageHeaderProps & {
+    children?: ReactNode;
+    defaultValues?: PartialDeep<T>;
+    onSubmit: SubmitHandler<PartialDeep<T>>;
+    schema?: unknown;
+    isVertical?: boolean;
+    onCancel?: () => void;
+    submitText?: string;
+    hideHeader?: boolean;
+    noPadding?: boolean;
+    form: UseFormReturn;
+};
+export declare function FormPage<T extends object>(props: FormPageProps<T>): JSX.Element;
+export declare function FormPageAlerts(): JSX.Element;
+export declare function FormPageButtons(props: {
+    submitText: string;
+    cancelText: string;
+    onCancel: () => void;
+}): JSX.Element;
+export declare function FormInputCheckbox(props: {
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    description?: ReactNode;
+    body?: ReactNode;
+}): JSX.Element;
+export declare function FormTextInput(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+}): JSX.Element;
+export declare function FormTextArea(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+}): JSX.Element;
+export declare function FormNumberInput(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+    min?: number;
+    max?: number;
+    valueLabel?: string;
+}): JSX.Element;
+export declare function FormBooleanInput(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+}): JSX.Element;
+export interface FormInputPopover {
+    title?: string;
+    body?: string[];
+    link?: {
+        label: string;
+        url: string;
+    };
+}
+export interface FormSelectOption<T> {
+    group?: string;
+    label: string;
+    description?: string;
+    value: T;
+}
+export interface FormSelectProps<T> {
+    id?: string;
+    name: string;
+    label: string;
+    popover?: FormInputPopover;
+    placeholder?: string;
+    help?: string;
+    required?: boolean;
+    footer?: {
+        label?: string;
+        click?: () => void;
+    };
+    create?: boolean;
+    options: FormSelectOption<T>[];
+}
+export declare function FormSelect<T>(props: FormSelectProps<T>): JSX.Element;
+export declare function FormSelectInput(props: {
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    children?: ReactNode;
+    footer?: ReactNode;
+}): JSX.Element;
+export declare function FormTextSelect<T>(props: {
+    id?: string;
+    label: string;
+    name: string;
+    helperText?: string;
+    required?: boolean;
+    secret?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    selectTitle?: string;
+    selectValue?: (item: T) => string | number;
+    selectOpen?: (callback: (item: T) => void, title: string) => void;
+}): JSX.Element;
+export declare function FormSchema(props: {
+    schema: JSONSchema6;
+    base?: string;
+}): JSX.Element;
+export declare function PageForm<T extends object>(props: {
+    schema?: JSONSchema6;
+    children?: ReactNode;
+    submitText: string;
+    onSubmit: FormPageSubmitHandler<T>;
+    cancelText: string;
+    onCancel?: () => void;
+    defaultValue?: DeepPartial<T>;
+    isVertical?: boolean;
+    singleColumn?: boolean;
+    disableScrolling?: boolean;
+}): JSX.Element;
+export declare type FormPageSubmitHandler<T extends FieldValues> = (data: T, setError: (error: string) => void, setFieldError: (fieldName: FieldPath<T>, error: ErrorOption) => void) => Promise<unknown>;
+export declare function PageFormSubmitButton(props: {
+    children: ReactNode;
+    style?: CSSProperties;
+}): JSX.Element;
+export declare function PageFormCancelButton(props: {
+    onCancel: () => void;
+    children: ReactNode;
+}): JSX.Element;