@ansible/ansible-ui-framework 0.0.299 → 0.0.301

package/README.md

@@ -6,10 +6,7 @@ A framework for building responsive web applications using [PatternFly](https://
 
 Developed by the Ansible UI developers.
 
-While PatternFly provides the building blocks and guidance on building applications,
-PatternFly does not manage state for the developer.
-
-This framework adds state management and abstractions for common patterns of application development.
+While PatternFly provides the building blocks and guidance on building applications, PatternFly does not manage state for the developer. This framework adds state management and abstractions for common patterns of application development.
 
 The framework:
 
@@ -21,69 +18,65 @@ There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-u
 
 ## Getting Started
 
-### Install the NPM package
+### Install the [NPM package](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
 
 ```
 npm install @ansible/ansible-ui-framework
 ```
 
-### Add PageFramework to your application
+### Add the [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md#PageFramework) to your application
+
+Near the top of your application add the [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md#PageFramework) component. This component adds the state management needed by the framework components.
+
+## Use the framework in your application pages
 
-Near the top of your application add the `<PageFramework>` component.
+### Use PageLayout to control the layout in your pages
 
-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.
+The [PageLayout](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageLayout.md#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 that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
 
 ```tsx
-<PageFramework navigate={navigate}>...</PageFramework>
+<Page>
+  <PageLayout>...</PageLayout>
+</Page>
 ```
 
-### Use PageLayout in your pages
+### Use PageHeader for the heading of your pages
 
-The `PageLayout` is used at the start of each page. It provides a consistent layout of page elements. It enables responsive layout based on the size of the window.
+The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageHeader.md#pageheader) is used at the top of each page. It provides a consistent layout of header elements.
 
 ```tsx
-(
 <Page>
   <PageLayout>
-    <PageHeader {...}/>
+    <PageHeader ... />
     ...
   </PageLayout>
 </Page>
-)
 ```
 
-### Use PageHeader at the top of your pages
+### Add content to the page
+
+#### Table Pages
 
-The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/PageHeader.tsx) is used at the top of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
+For pages containing a table, use the [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#pagetable) component.
 
 ```tsx
-(
 <Page>
   <PageLayout>
-    <PageHeader
-      breadcrumbs={breadcrumbs}
-      title="Page title"
-      titleHelp="Page title popover description."
-      description="Page description"
-      headerActions={actions}
-    />
-    ...
+    <PageHeader ... />
+    <PageTable ... />
   </PageLayout>
 </Page>
 ```
 
-#### Adding a page with a table
+#### Form Pages
 
-The `PageTable` handles the logic for tables on a page. It supports responsive layout based on the size of the window.
+For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
 
 ```tsx
-<PageTable<User>
-  toolbarFilters={toolbarFilters}
-  toolbarActions={toolbarActions}
-  tableColumns={tableColumns}
-  rowActions={rowActions}
-  {...view}
-/>
+<Page>
+  <PageLayout>
+    <PageHeader ... />
+    <PageForm ... />
+  </PageLayout>
+</Page>
 ```
-
-See the [Table Guide](https://github.com/ansible/ansible-ui/blob/main/framework/docs/tables.md) for details.

package/cjs/PageFramework.d.ts

@@ -1,4 +1,10 @@
 import { ReactNode } from 'react';
+/**
+ * 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
+ * <PageFramework navigate={navigate}>...</PageFramework>
+ */
 export declare function PageFramework(props: {
     children: ReactNode;
     navigate?: (to: string) => void;

package/cjs/PageFramework.js

@@ -18,6 +18,12 @@ var PageAlertToaster_1 = require("./PageAlertToaster");
 var PageDialog_1 = require("./PageDialog");
 var Settings_1 = require("./Settings");
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
+/**
+ * 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
+ * <PageFramework navigate={navigate}>...</PageFramework>
+ */
 function PageFramework(props) {
     return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: props.children })) }) }) }) }));
 }

package/cjs/PageLayout.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 /**
- * PageLayout enables the layout of the page to be responsive.
+ * 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 that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
  *
  * @example
  * <Page>
  *   <PageLayout>
  *     <PageHeader />
- *     <PageBody />...</PageBody>
+ *     ...
  *   </PageLayout>
  * <Page>
  */

package/cjs/PageLayout.js

@@ -35,13 +35,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
 var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 /**
- * PageLayout enables the layout of the page to be responsive.
+ * 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 that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
  *
  * @example
  * <Page>
  *   <PageLayout>
  *     <PageHeader />
- *     <PageBody />...</PageBody>
+ *     ...
  *   </PageLayout>
  * <Page>
  */

package/docs/PageFramework.md

@@ -0,0 +1,9 @@
+# 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/PageLayout.md

@@ -1,6 +1,8 @@
 # PageLayout
 
-PageLayout enables the layout of the page to be responsive.
+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 that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
 
 ## Example
 
@@ -8,7 +10,7 @@ PageLayout enables the layout of the page to be responsive.
 <Page>
   <PageLayout>
     <PageHeader />
-    <PageBody />...</PageBody>
+    ...
   </PageLayout>
 <Page>
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "Framework for building consistent responsive web applications using PatternFly.",
-  "version": "0.0.299",
+  "version": "0.0.301",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {
@@ -11,6 +11,12 @@
   "homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
   "main": "cjs/index.js",
   "types": "cjs/index.d.ts",
+  "keywords": [
+    "ansible",
+    "react",
+    "patternfly",
+    "framework"
+  ],
   "peerDependencies": {
     "@hookform/resolvers": "^2",
     "@patternfly/patternfly": "^4",

package/cjs/FilterDrawer.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { IFilterState, IItemFilter, SetFilterValues } from './PageToolbar';
-export declare function FilterDrawer<T extends object>(props: {
-    filters?: IItemFilter<T>[];
-    filterState: IFilterState;
-    setFilterValues: SetFilterValues<T>;
-    t?: (t: string) => string;
-}): JSX.Element;

package/cjs/FilterDrawer.js

@@ -1,64 +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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterDrawer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-empty-function */
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = require("react");
-function FilterDrawer(props) {
-    var t = props.t;
-    t = t ? t : function (t) { return t; };
-    var filters = props.filters, filterState = props.filterState, setFilterValues = props.setFilterValues;
-    var toggleFilterValue = (0, react_1.useCallback)(function (filter, filterValues, option) {
-        if (filterValues === null || filterValues === void 0 ? void 0 : filterValues.includes(option)) {
-            setFilterValues(filter, filterValues.filter(function (o) { return o !== option; }));
-        }
-        else {
-            setFilterValues(filter, __spreadArray(__spreadArray([], __read((filterValues !== null && filterValues !== void 0 ? filterValues : [])), false), [option], false));
-        }
-    }, [setFilterValues]);
-    if (!filters)
-        return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
-    return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, __assign({ minSize: "250px", defaultSize: "250px", maxSize: "250px" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerPanelBody, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { paddingBottom: 24 } }, { children: t('Filters') })), filters === null || filters === void 0 ? void 0 : filters.map(function (filter) {
-                    var filterValues = filterState[filter.label];
-                    return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerSection, __assign({ style: { paddingBottom: 32 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4" }, { children: filter.label })), filter.options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: option.label, isChecked: filterValues === null || filterValues === void 0 ? void 0 : filterValues.includes(option.value), onChange: function () { return toggleFilterValue(filter, filterValues, option.value); }, label: option.label }, option.label)); })] })) }), filter.label));
-                })] }) })));
-}
-exports.FilterDrawer = FilterDrawer;