@ansible/ansible-ui-framework 0.0.302 → 0.0.304

package/README.md

@@ -1,84 +1,5 @@
-[`Ansible UI Framework`](https://github.com/ansible/ansible-ui/blob/main/framework/README.md) ▸ [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#PageTable)
-
 # Ansible UI Framework
 
-[NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
-
-A framework for building responsive web applications using [PatternFly](https://www.patternfly.org).
-
-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.
-
-The 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.
-
-## Getting Started
-
-### Install the [NPM package](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
-
-```
-npm install @ansible/ansible-ui-framework
-```
-
-### 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
-
-### Use PageLayout to control the layout in your pages
-
-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
-<Page>
-  <PageLayout>...</PageLayout>
-</Page>
-```
-
-### Use PageHeader for the heading of your pages
-
-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 ... />
-    ...
-  </PageLayout>
-</Page>
-```
-
-### Add content to the page
-
-#### Table Pages
-
-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 ... />
-    <PageTable ... />
-  </PageLayout>
-</Page>
-```
-
-#### Form Pages
-
-For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
+A framework for building applications using [PatternFly](https://www.patternfly.org), developed by the Ansible UI developers.
 
-```tsx
-<Page>
-  <PageLayout>
-    <PageHeader ... />
-    <PageForm ... />
-  </PageLayout>
-</Page>
-```
+[Documentation](https://github.com/ansible/ansible-ui/blob/main/framework/docs/Framework.md#ansible-ui-framework)

package/cjs/PageTable.d.ts

@@ -51,6 +51,9 @@ export type PageTableProps<T extends object> = {
     disableBodyPadding?: boolean;
     defaultCardSubtitle?: ReactNode;
 };
+/**
+ * PageTable
+ */
 export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
 type CellFn<T extends object> = (item: T) => ReactNode;
 export interface ITableColumn<T extends object> {

package/cjs/PageTable.js

@@ -54,6 +54,9 @@ function TablePage(props) {
     return ((0, jsx_runtime_1.jsxs)(PageLayout_1.PageLayout, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, __assign({}, props)), (0, jsx_runtime_1.jsx)(PageTable, __assign({}, props))] }));
 }
 exports.TablePage = TablePage;
+/**
+ * PageTable
+ */
 function PageTable(props) {
     var _a;
     var disableBodyPadding = props.disableBodyPadding;

package/docs/BulkActionDialog.md

@@ -1,4 +1,4 @@
-[Ansible UI Framework](https://github.com/ansible/ansible-ui/blob/main/framework/README.md#ansible-ui-framework) ▸ [Components](https://github.com/ansible/ansible-ui/blob/main/framework/docs/components.md#Ansible-UI-Components) ▸ BulkActionDialog
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ BulkActionDialog
 
 # BulkActionDialog
 

package/docs/Components.md

@@ -1,8 +1,9 @@
-[Ansible UI Framework](https://github.com/ansible/ansible-ui/blob/main/framework/README.md#ansible-ui-framework) ▸ Components
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ Components
 
 # Ansible UI Components
 
-- [BulkActionDialog](https://github.com/ansible/ansible-ui/blob/main/framework/docs/BulkActionDialog.md#BulkActionDialog)
-- [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md#PageFramework)
-- [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageHeader.md#PageHeader)
-- [PageLayout](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageLayout.md#PageLayout)
+- [BulkActionDialog](BulkActionDialog.md#BulkActionDialog)
+- [PageFramework](PageFramework.md#PageFramework)
+- [PageHeader](PageHeader.md#PageHeader)
+- [PageLayout](PageLayout.md#PageLayout)
+- [PageTable](PageTable.md#PageTable)

package/docs/Framework.md

@@ -1,99 +1,19 @@
-[`Ansible UI Framework`](https://github.com/ansible/ansible-ui/blob/main/framework/README.md) ▸ [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#PageTable)
+Ansible UI Framework
 
 # Ansible UI Framework
 
-A framework for creating performant, consistent, and responsive web applications using [PatternFly](https://www.patternfly.org).
+A framework for building applications using [PatternFly](https://www.patternfly.org).
+
+- [Getting Started](GettingStarted.md#getting-started)
+- [Guides](Guides.md#ansible-ui-guides)
+- [Components](Components.md#ansible-ui-components)
 
 The framework is made up of high level components using PatternFly components underneath.
 This allows the framework to adjust the web application for responsive layout.
-Basic structure of the framework can be seen in the tree below.
-
-- [PageLayout](#pagelayout)
-  - [PageHeader](#pageheader)
-  - [PageBody](#pagebody)
-    - [PageTable](#pagetable)
-    - [PageTabs](#pagetabs)
-    - [PageForm](#pageform)
-
-## PageLayout
-
-The PageLayout is used at the start of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
-
-```tsx
-(
-<Page>
-  <PageLayout>
-    <PageHeader {...}/>
-    <PageBody> ... </PageBody>
-  </PageLayout>
-</Page>
-)
-```
-
-### PageHeader
-
-The PageHeader is used at the start of each page. It provides a consistent layout of header elements. It supports responsive layout based on the size of the window.
-
-```tsx
-<Page>
-  <PageHeader
-    breadcrumbs={breadcrumbs}
-    title="Page title"
-    titleHelp="Page title popover description."
-    description="Page description"
-    headerActions={actions}
-  />
-</Page>
-```
-
-|       Property | Description                                                                |
-| -------------: | -------------------------------------------------------------------------- |
-|    breadcrumbs | The breadcrumbs for the page.                                              |
-|          title | The title of the page.                                                     |
-|      titleHelp | The help for the title popover.                                            |
-| titleHelpTitle | The title of help popover.                                                 |
-|    description | The description of the page.                                               |
-|        actions | The actions for the page. Actions are used on details pages.               |
-|       controls | Support for extra page controls that show up at the top right of the page. |
-
-### PageBody
-
-The page table handles the responsive layout of the body section of the page.
-
-#### PageTable
-
-The page table handles the logic for tables on a page.
-
-```tsx
-<PageTable<User>
-  toolbarFilters={toolbarFilters}
-  toolbarActions={toolbarActions}
-  tableColumns={tableColumns}
-  rowActions={rowActions}
-  {...view}
-/>
-```
-
-#### PageTabs
-
-The page tabs are used for details pages in the application.
-
-```tsx
-(
-<Page>
-  <PageHeader ... />
-  <PageTabs >
-    <PageTab title="Tab title" >
-      ...
-    </PageTab>
-    <PageTab title="Tab title" >
-      ...
-    </PageTab>
-  </PageTabs>
-</Page>
-)
-```
 
-#### PageForm
+The framework:
 
-The page form handles form input on a page. It uses [react-hook-form](https://react-hook-form.com/) for performance.
+- 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/GettingStarted.md

@@ -0,0 +1,79 @@
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Guides](Guides.md#ansible-ui-guides) ▸ Getting Started
+
+# Getting Started
+
+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.
+
+There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
+
+## Install the NPM package
+
+[NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
+
+```
+npm install @ansible/ansible-ui-framework
+```
+
+## Add the [PageFramework](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.
+
+## Use the framework in your application pages
+
+### Use PageLayout to control the layout in your pages
+
+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
+<Page>
+  <PageLayout>
+    <PageHeader ... />
+    ...
+  </PageLayout>
+</Page>
+```
+
+### Use PageHeader for the heading of your pages
+
+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 ... />
+    ...
+  </PageLayout>
+</Page>
+```
+
+### Add content to the page
+
+#### Table Pages
+
+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 ... />
+    <PageTable ... />
+  </PageLayout>
+</Page>
+```
+
+#### Form Pages
+
+For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
+
+```tsx
+<Page>
+  <PageLayout>
+    <PageHeader ... />
+    <PageForm ... />
+  </PageLayout>
+</Page>
+```
+
+## Next Steps

package/docs/Guides.md

@@ -0,0 +1,7 @@
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ Guides
+
+# Ansible UI Guides
+
+- [Getting Started](GettingStarted.md#getting-started)
+- [PageLayout](PageLayout.md#pagelayout)
+- [PageTable Guide](PageTableGuide.md#pagetable-guide)

package/docs/PageFramework.md

@@ -1,4 +1,4 @@
-[Ansible UI Framework](https://github.com/ansible/ansible-ui/blob/main/framework/README.md#ansible-ui-framework) ▸ [Components](https://github.com/ansible/ansible-ui/blob/main/framework/docs/components.md#Ansible-UI-Components) ▸ PageFramework
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageFramework
 
 # PageFramework
 

package/docs/PageHeader.md

@@ -1,4 +1,4 @@
-[Ansible UI Framework](https://github.com/ansible/ansible-ui/blob/main/framework/README.md#ansible-ui-framework) ▸ [Components](https://github.com/ansible/ansible-ui/blob/main/framework/docs/components.md#Ansible-UI-Components) ▸ PageHeader
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageHeader
 
 # PageHeader
 

package/docs/PageLayout.md

@@ -1,4 +1,4 @@
-[Ansible UI Framework](https://github.com/ansible/ansible-ui/blob/main/framework/README.md#ansible-ui-framework) ▸ [Components](https://github.com/ansible/ansible-ui/blob/main/framework/docs/components.md#Ansible-UI-Components) ▸ PageLayout
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageLayout
 
 # PageLayout
 

package/docs/PageTable.md

@@ -0,0 +1,5 @@
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageTable
+
+# PageTable
+
+PageTable

package/docs/{PageTable-Guide.md → PageTableGuide.md}

@@ -1,36 +1,6 @@
-# Table Guide
-
-- [Typescript Interface](#typescript-interface)
-- [Page layout](#page-layout)
-- [View](#view)
-- [Table Columns](#table-columns)
-- [Page Table](#page-table)
-- [Toolbar Filters](#toolbar-filters)
-- [Toolbar Actions](#toolbar-actions)
-- [Row Actions](#row-actions)
-
-## Typescript Interface
-
-```ts
-export interface IPerson {
-  name: string
-}
-```
-
-## Page layout
-
-The page layout enables the layout to be responsive - responding to different page sizes and adjusting padding and borders.
+[Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Guides](Guides.md#ansible-ui-guides) ▸ PageTable
 
-```tsx
-export function Persons() {
-  return (
-    <PageLayout>
-      <PageHeader title="Persons" />
-      <PageBody>Table will go here</PageBody>
-    </PageLayout>
-  )
-}
-```
+# PageTable Guide
 
 ## View
 

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.302",
+  "description": "A framework for building applications using PatternFly.",
+  "version": "0.0.304",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {