@ansible/ansible-ui-framework 0.0.428 → 0.0.449

package/cjs/index.js

@@ -18,7 +18,6 @@ __exportStar(require("./BulkActionDialog"), exports);
 __exportStar(require("./BulkConfirmationDialog"), exports);
 __exportStar(require("./components/BulkSelector"), exports);
 __exportStar(require("./components/Collapse"), exports);
-__exportStar(require("./components/Details"), exports);
 __exportStar(require("./components/Help"), exports);
 __exportStar(require("./components/icons/RunningIcon"), exports);
 __exportStar(require("./components/pfcolors"), exports);
@@ -36,7 +35,9 @@ __exportStar(require("./PageCells/DateTimeCell"), exports);
 __exportStar(require("./PageCells/ElapsedTimeCell"), exports);
 __exportStar(require("./PageCells/LabelsCell"), exports);
 __exportStar(require("./PageCells/TextCell"), exports);
-__exportStar(require("./PageDataList"), exports);
+__exportStar(require("./PageDetails/PageDetail"), exports);
+__exportStar(require("./PageDetails/PageDetails"), exports);
+__exportStar(require("./PageDetails/PageDetailsFromColumns"), exports);
 __exportStar(require("./PageDialog"), exports);
 __exportStar(require("./PageForm/Inputs/FormGroupSelect"), exports);
 __exportStar(require("./PageForm/Inputs/FormGroupSelectOption"), exports);
@@ -47,7 +48,6 @@ __exportStar(require("./PageHeader"), exports);
 __exportStar(require("./PageLayout"), exports);
 __exportStar(require("./PageTable/PageTable"), exports);
 __exportStar(require("./PageTable/PageTableCards"), exports);
-__exportStar(require("./PageTable/PageTableDetails"), exports);
 __exportStar(require("./PageTable/PageToolbar"), exports);
 __exportStar(require("./PageTable/useTableItems"), exports);
 __exportStar(require("./PageTabs"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.428",
+  "version": "0.0.449",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {

package/cjs/PageDataList.d.ts

@@ -1,46 +0,0 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { IPageAction } from './PageActions/PageAction';
-import { PageHeaderProps } from './PageHeader';
-import { IToolbarFilter } from './PageTable/PageToolbar';
-export type DataListPageProps<T extends object> = PageHeaderProps & PageDataListProps<T> & {
-    error?: Error;
-};
-export declare function DataListPage<T extends object>(props: DataListPageProps<T>): JSX.Element;
-export type PageDataListProps<T extends object> = {
-    keyFn: (item: T) => string | number;
-    itemCount?: number;
-    pageItems: T[] | undefined;
-    toolbarActions?: IPageAction<T>[];
-    dataCells: ((item: T) => ReactNode)[];
-    actions: IPageAction<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/cjs/PageDataList.js

@@ -1,61 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageDataList = exports.DataListPage = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_icons_1 = require("@patternfly/react-icons");
-var react_1 = require("react");
-var Scrollable_1 = require("./components/Scrollable");
-var PageActions_1 = require("./PageActions/PageActions");
-var PageActionType_1 = require("./PageActions/PageActionType");
-var PageBody_1 = require("./PageBody");
-var PageHeader_1 = require("./PageHeader");
-var PageLayout_1 = require("./PageLayout");
-var PagePagination_1 = require("./PageTable/PagePagination");
-var Settings_1 = require("./Settings");
-function DataListPage(props) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageBody_1.PageBody, { children: (0, jsx_runtime_1.jsx)(PageDataList, __assign({}, props)) })] }) }));
-}
-exports.DataListPage = DataListPage;
-function PageDataList(props) {
-    var pageItems = props.pageItems, selectItem = props.selectItem, unselectItem = props.unselectItem, isSelected = props.isSelected, keyFn = props.keyFn, toolbarActions = props.toolbarActions, itemCount = props.itemCount, perPage = props.perPage, 
-    // clearAllFilters,
-    filters = props.filters, error = props.error, dataCells = props.dataCells;
-    var showSelect = (toolbarActions === null || toolbarActions === void 0 ? void 0 : toolbarActions.find(function (toolbarAction) { return PageActionType_1.PageActionType.bulk === toolbarAction.type; })) !==
-        undefined;
-    var settings = (0, Settings_1.useSettings)();
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                backgroundColor: settings.theme === 'dark' ? 'var(--pf-global--BackgroundColor--300)' : undefined,
-                height: '100%',
-            } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small, style: {
-                    paddingTop: 64,
-                } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.ExclamationCircleIcon, color: "var(--pf-global--danger-color--100)" }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", size: "lg" }, { children: props.errorStateTitle })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: error.message })] })) })));
-    }
-    if (itemCount === 0 && Object.keys(filters !== null && filters !== void 0 ? filters : {}).length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.large, style: { paddingTop: 64 } }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: react_icons_1.PlusCircleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: props.emptyStateTitle })), props.emptyStateDescription && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: props.emptyStateDescription })), props.emptyStateButtonClick && ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "primary", onClick: props.emptyStateButtonClick }, { children: props.emptyStateButtonText })))] })));
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { children: (0, jsx_runtime_1.jsx)(react_core_1.DataList, __assign({ "aria-label": "Simple data list example" }, { children: pageItems === null || pageItems === void 0 ? void 0 : pageItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListItem, __assign({ "aria-labelledby": "simple-item1" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DataListItemRow, { children: [showSelect && ((0, jsx_runtime_1.jsx)(react_core_1.DataListCheck, { "aria-labelledby": "check-action-item1", name: "check-action-check1", isChecked: isSelected === null || isSelected === void 0 ? void 0 : isSelected(item), onClick: function () {
-                                        if (isSelected === null || isSelected === void 0 ? void 0 : isSelected(item)) {
-                                            selectItem === null || selectItem === void 0 ? void 0 : selectItem(item);
-                                        }
-                                        else {
-                                            unselectItem === null || unselectItem === void 0 ? void 0 : unselectItem(item);
-                                        }
-                                    } })), (0, jsx_runtime_1.jsx)(react_core_1.DataListItemCells, { dataListCells: dataCells.map(function (dataCell, index) { return ((0, jsx_runtime_1.jsx)(react_core_1.DataListCell, __assign({ width: index === 0 ? 5 : 1 }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "simple-item1" }, { children: dataCell(item) })) }), "primary content")); }) }), props.actions && (0, jsx_runtime_1.jsx)(DataListActions, { actions: props.actions })] }) }), keyFn(item))); }) })) }), (!props.autoHidePagination || (itemCount !== null && itemCount !== void 0 ? itemCount : 0) > perPage) && (0, jsx_runtime_1.jsx)(PagePagination_1.PagePagination, __assign({}, props))] }));
-}
-exports.PageDataList = PageDataList;
-function DataListActions(props) {
-    return ((0, jsx_runtime_1.jsx)(react_core_1.DataListAction, __assign({ "aria-labelledby": "check-action-item1 check-action-action1", id: "check-action-action1", "aria-label": "Actions", isPlainButtonAction: true, style: { whiteSpace: 'nowrap' } }, { children: (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { actions: props.actions, position: react_core_1.DropdownPosition.right }) })));
-}

package/cjs/PageForm/FormPage.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-import { SubmitHandler, UseFormReturn } from 'react-hook-form';
-import { PartialDeep } from 'type-fest';
-import { PageHeaderProps } from '../PageHeader';
-export 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;

package/cjs/PageForm/FormPage.js

@@ -1,73 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormPage = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-var Scrollable_1 = require("../components/Scrollable");
-var PageHeader_1 = require("../PageHeader");
-var Settings_1 = require("../Settings");
-var PageFormAlerts_1 = require("./PageFormAlerts");
-var PageFormButtons_1 = require("./PageFormButtons");
-function FormPage(props) {
-    // const methods = useForm<PartialDeep<T>>({
-    //     defaultValues: props.defaultValues,
-    //     resolver: ajvResolver(props.schema, { strict: false }),
-    // })
-    var children = react_1.Children.toArray(props.children);
-    var inputs = children.filter(function (child) {
-        if (!(0, react_1.isValidElement)(child))
-            return false;
-        if (child.type === PageFormAlerts_1.PageFormAlerts)
-            return false;
-        if (child.type === PageFormButtons_1.PageFormButtons)
-            return false;
-        return true;
-    });
-    var buttons = children.find(function (child) {
-        if (!(0, react_1.isValidElement)(child))
-            return false;
-        if (child.type === PageFormButtons_1.PageFormButtons)
-            return true;
-        return false;
-    });
-    var _a = __read((0, react_1.useContext)(Settings_1.SettingsContext), 1), settings = _a[0];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!props.hideHeader && (0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsxs)(react_core_1.Form
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            , __assign({ 
-                // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                onSubmit: props.form.handleSubmit(props.onSubmit), isHorizontal: props.isVertical ? false : settings.formLayout === 'horizontal', style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flexGrow: 1,
-                    overflow: 'hidden',
-                } }, { children: [(0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, __assign({ style: { height: '100%', flexGrow: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ padding: { default: props.noPadding ? 'noPadding' : 'padding' }, isWidthLimited: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.FormSection, { children: inputs }) })) })), buttons] }))] }));
-}
-exports.FormPage = FormPage;

package/cjs/PageTable/PageTableDetails.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ITableColumn } from './PageTable';
-export declare function TableDetails<T extends object>(props: {
-    item: T | undefined;
-    columns: ITableColumn<T>[];
-}): JSX.Element;

package/cjs/components/Details.d.ts

@@ -1,36 +0,0 @@
-import { ComponentClass, ReactNode } from 'react';
-export interface IDetailText {
-    label: string;
-    icon?: ComponentClass;
-    text?: string;
-    helpTitle?: string;
-    help?: ReactNode;
-    to?: string;
-    link?: string;
-    color?: string;
-    copy?: boolean;
-    since?: boolean;
-}
-export declare function isDetailText(detail: IDetail): detail is IDetailText;
-export interface IDetailList {
-    label: string;
-    icon?: ComponentClass;
-    items: IDetailListItem[];
-}
-export declare function isDetailList(detail: IDetail): detail is IDetailList;
-export interface IDetailListItem {
-    icon?: ComponentClass;
-    text: string;
-    helpTitle?: string;
-    help?: ReactNode;
-}
-export type IDetail = IDetailText | IDetailList;
-export declare function DetailsList(props: {
-    children?: ReactNode;
-}): JSX.Element;
-export declare function Detail(props: {
-    label?: string;
-    children?: ReactNode;
-    isEmpty?: boolean;
-}): JSX.Element;
-export declare function DetailsSkeleton(): JSX.Element;

package/cjs/components/Details.js

@@ -1,63 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DetailsSkeleton = exports.Detail = exports.DetailsList = exports.isDetailList = exports.isDetailText = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_core_1 = require("@patternfly/react-core");
-var Settings_1 = require("../Settings");
-function isDetailText(detail) {
-    return 'label' in detail && !('items' in detail);
-}
-exports.isDetailText = isDetailText;
-function isDetailList(detail) {
-    return 'items' in detail && 'label' in detail;
-}
-exports.isDetailList = isDetailList;
-function DetailsList(props) {
-    var settings = (0, Settings_1.useSettings)();
-    var orientation = settings.formLayout;
-    var columns = settings.formColumns;
-    var isCompact = false;
-    return ((0, jsx_runtime_1.jsx)(react_core_1.DescriptionList, __assign({ orientation: {
-            sm: orientation,
-            md: orientation,
-            lg: orientation,
-            xl: orientation,
-            '2xl': orientation,
-        }, columnModifier: columns === 'multiple'
-            ? {
-                default: '1Col',
-                sm: '1Col',
-                md: '2Col',
-                lg: '2Col',
-                xl: '3Col',
-                '2xl': '3Col',
-            }
-            : undefined, style: { maxWidth: 1200, padding: isCompact ? undefined : 8 }, isCompact: isCompact }, { children: props.children })));
-}
-exports.DetailsList = DetailsList;
-function Detail(props) {
-    var _a;
-    if (props.children === null || typeof props.children === 'undefined' || props.children === '') {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    }
-    if (props.isEmpty) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.DescriptionListGroup, { children: [props.label && (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListTerm, { children: props.label }), (0, jsx_runtime_1.jsx)(react_core_1.DescriptionListDescription, __assign({ id: (_a = props.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().split(' ').join('-') }, { children: props.children }))] }));
-}
-exports.Detail = Detail;
-function DetailsSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(react_core_1.Skeleton, {})] })));
-}
-exports.DetailsSkeleton = DetailsSkeleton;

package/docs/Components.md

@@ -1,9 +0,0 @@
-[Ansible UI Framework](Framework.md) ▸ Components
-
-# Ansible UI Components
-
-- [BulkActionDialog](components/BulkActionDialog.md)
-- [PageFramework](components/PageFramework.md)
-- [PageHeader](components/PageHeader.md)
-- [PageLayout](components/PageLayout.md)
-- [PageTable](components/PageTable.md)

package/docs/Framework.md

@@ -1,19 +0,0 @@
-Ansible UI Framework
-
-# Ansible UI Framework
-
-A framework for building applications using [PatternFly](https://www.patternfly.org).
-
-- [Getting Started](guides/GettingStarted.md)
-- [Guides](Guides.md)
-- [Components](Components.md)
-
-While PatternFly provides the building blocks and guidance on building applications, PatternFly does not tie together those building blocks and manage the needed state for the developer. This framework adds state management and abstractions for common patterns of application development.
-
-This framework:
-
-- does not use any state libraries other than the built in react context state management.
-- does not assume any specific translation libraries, but does provide a hook for internal translations.
-- does not assume any specific navigation libraries, but does provide a hook for internal navigation.
-
-There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.

package/docs/Guides.md

@@ -1,6 +0,0 @@
-[Ansible UI Framework](Framework.md) ▸ Guides
-
-# Ansible UI Guides
-
-- [Getting Started](guides/GettingStarted.md)
-- [PageTable Guide](guides/PageTableGuide.md)

package/docs/_config.yml

@@ -1,2 +0,0 @@
-name: ''
-title: null

package/docs/assets/css/style.scss

@@ -1,139 +0,0 @@
----
----
-
-@import '{{ site.theme }}';
-
-body {
-  color: #ffffffcf;
-  background-color: #101216;
-}
-
-.markdown-body h1 {
-  border-bottom: 1px solid #fff3;
-}
-
-.markdown-body h2 {
-  border-bottom: 1px solid #fff2;
-}
-
-.markdown-body .highlight {
-  background-color: unset;
-}
-
-.markdown-body .highlight pre,
-.markdown-body pre {
-  background-color: #08090b;
-  border-radius: 8px;
-}
-
-a {
-  color: #1fa7f8;
-}
-
-a:hover {
-  color: #73bcf7;
-}
-
-h1 {
-  color: #ffffff;
-}
-
-h2 {
-  color: #fffffff7;
-}
-
-h3 {
-  color: #ffffffef;
-}
-
-h4 {
-  color: #ffffffe7;
-}
-
-.highlight .p {
-  color: #888;
-}
-
-.highlight .nv {
-  color: #579cd6;
-}
-
-.highlight .nc {
-  color: #579cd6;
-  font-weight: normal;
-}
-
-.highlight .na {
-  color: #9ddcfe;
-}
-
-.highlight .nx {
-  color: #fffd;
-}
-
-.highlight .k {
-  color: #579cd6;
-}
-
-.highlight .kd {
-  color: #579cd6;
-}
-
-.highlight .o {
-  color: #fffb;
-}
-
-.highlight .s1 {
-  color: #bb846e;
-}
-
-.highlight .s2 {
-  color: #bb846e;
-}
-
-.highlight .s {
-  color: #fffc;
-}
-
-.highlight .si {
-  color: #888;
-}
-
-.highlight .err {
-  background: unset;
-  color: #888;
-}
-
-table thead {
-  background-color: #08090b;
-}
-
-table tbody {
-  background-color: #08090b;
-}
-
-.markdown-body table tr {
-  background-color: unset;
-  border: unset;
-}
-
-.markdown-body table tr:nth-child(2n) {
-  background-color: unset;
-}
-
-.markdown-body table td {
-  border: unset;
-  border-top: 1px solid #fff2;
-}
-
-.markdown-body table th {
-  color: #fff9;
-  border: unset;
-  border-bottom: 1px solid #fff4;
-}
-
-.markdown-body code,
-.markdown-body tt {
-  color: #4ad;
-  background-color: #fff2;
-}

package/docs/components/BulkActionDialog.md

@@ -1,30 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Components](../Components.md) ▸ BulkActionDialog
-
-# BulkActionDialog
-
-BulkActionDialog is a generic dialog for process bulk actions.
-It processes the actions in parallel up to 5 concurrently.
-The easiest way to use the BulkActionDialog is then useBulkActionDialog hook.
-
-| Param            | Type                | Description                                                               |
-| ---------------- | ------------------- | ------------------------------------------------------------------------- |
-| title            | `string`            | The title of the model.                                                   |
-| items            | `T[]`               | The items to confirm for the bulk action.                                 |
-| keyFn            | `function`          | A function that gets a unique key for each item.                          |
-| actionColumns    | `ITableColumn<T>[]` | The columns to display when processing the actions.                       |
-| actionFn         | `function`          | The action function to perform on each item                               |
-| [onComplete]     | `function`          | Callback when all the actions are complete. Returns the successful items. |
-| [onClose]        | `function`          | Callback called when the dialog closes.                                   |
-| [processingText] | `string`            | The text to show for each item when the action is happening.              |
-| [isDanger]       | `boolean`           | Indicates if this is a destructive operation.                             |
-
-## useBulkActionDialog()
-
-useBulkActionDialog - react hook to open a BulkActionDialog
-
-**Example**
-
-```tsx
-const openBulkActionDialog = useBulkActionDialog()
-openBulkActionDialog(...) // Pass BulkActionDialogProps
-```

package/docs/components/PageFramework.md

@@ -1,11 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Components](../Components.md) ▸ PageFramework
-
-# PageFramework
-
-The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
-
-**Example**
-
-```tsx
-<PageFramework navigate={navigate}>...</PageFramework>
-```

package/docs/components/PageHeader.md

@@ -1,31 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Components](../Components.md) ▸ PageHeader
-
-# PageHeader
-
-PageHeader enables the responsive layout of the header.
-
-| Param          | Type           | Description                       |
-| -------------- | -------------- | --------------------------------- |
-| breadcrumbs    | `Breadcrumb[]` | The breadcrumbs for the page.     |
-| title          | `string`       | The title of the page.            |
-| titleHelpTitle | `string`       | The title of help popover.        |
-| titleHelp      | `ReactNode`    | The content for the help popover. |
-| description    | `string`       | The description of the page.      |
-| controls       | `ReactNode`    | Support for extra page controls.  |
-| headerActions  | `ReactNode`    | The actions for the page.         |
-
-**Example**
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader
-      breadcrumbs={[{ label: 'Home', to: '/home' }, { label: 'Page title' }]}
-      title='Page title'
-      description='Page description'
-      headerActions={<TypedActions actions={actions} />}
-    />
-    <PageBody />...</PageBody>
-  </PageLayout>
-<Page>
-```

package/docs/components/PageLayout.md

@@ -1,18 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Components](../Components.md) ▸ PageLayout
-
-# PageLayout
-
-The PageLayout is used as the container for the contents of the page.
-It enables page components to leverage full page layout and scrolling of sub content.
-An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
-
-**Example**
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader />
-    ...
-  </PageLayout>
-<Page>
-```

package/docs/components/PageTable.md

@@ -1,17 +0,0 @@
-[Ansible UI Framework](../Framework.md) ▸ [Components](../Components.md) ▸ PageTable
-
-# PageTable
-
-The PageTable component is used for adding a table to a page.
-See the <a href="docs/guides/PageTableGuide.md">Table Guide</a>.
-
-**Example**
-
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    <PageTable ... />
-  </PageLayout>
-</Page>
-```