@ansible/ansible-ui-framework 0.0.301 → 0.0.303

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. package/README.md +2 -79
  2. package/cjs/PageTable.d.ts +3 -0
  3. package/cjs/PageTable.js +3 -0
  4. package/docs/BulkActionDialog.md +2 -0
  5. package/docs/Components.md +9 -0
  6. package/docs/Framework.md +13 -91
  7. package/docs/GettingStarted.md +79 -0
  8. package/docs/Guides.md +7 -0
  9. package/docs/PageFramework.md +2 -0
  10. package/docs/PageHeader.md +2 -0
  11. package/docs/PageLayout.md +2 -0
  12. package/docs/PageTable.md +5 -0
  13. package/docs/{PageTable-Guide.md → PageTableGuide.md} +2 -32
  14. package/package.json +2 -2
package/README.md CHANGED
@@ -1,82 +1,5 @@
1
1
  # Ansible UI Framework
2
2
 
3
- [NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
3
+ A framework for building applications using [PatternFly](https://www.patternfly.org), developed by the Ansible UI developers.
4
4
 
5
- A framework for building responsive web applications using [PatternFly](https://www.patternfly.org).
6
-
7
- Developed by the Ansible UI developers.
8
-
9
- 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.
10
-
11
- The framework:
12
-
13
- - does not use any state libraries other than the built in react context state management.
14
- - does not assume any specific translation libraries, but does provide a hook for internal translations.
15
- - does not assume any specific navigation libraries, but does provide a hook for internal navigation.
16
-
17
- There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
18
-
19
- ## Getting Started
20
-
21
- ### Install the [NPM package](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
22
-
23
- ```
24
- npm install @ansible/ansible-ui-framework
25
- ```
26
-
27
- ### Add the [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md#PageFramework) to your application
28
-
29
- 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.
30
-
31
- ## Use the framework in your application pages
32
-
33
- ### Use PageLayout to control the layout in your pages
34
-
35
- 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.
36
-
37
- ```tsx
38
- <Page>
39
- <PageLayout>...</PageLayout>
40
- </Page>
41
- ```
42
-
43
- ### Use PageHeader for the heading of your pages
44
-
45
- 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.
46
-
47
- ```tsx
48
- <Page>
49
- <PageLayout>
50
- <PageHeader ... />
51
- ...
52
- </PageLayout>
53
- </Page>
54
- ```
55
-
56
- ### Add content to the page
57
-
58
- #### Table Pages
59
-
60
- For pages containing a table, use the [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#pagetable) component.
61
-
62
- ```tsx
63
- <Page>
64
- <PageLayout>
65
- <PageHeader ... />
66
- <PageTable ... />
67
- </PageLayout>
68
- </Page>
69
- ```
70
-
71
- #### Form Pages
72
-
73
- For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
74
-
75
- ```tsx
76
- <Page>
77
- <PageLayout>
78
- <PageHeader ... />
79
- <PageForm ... />
80
- </PageLayout>
81
- </Page>
82
- ```
5
+ [Documentation](https://github.com/ansible/ansible-ui/blob/main/framework/docs/Framework.md#ansible-ui-framework)
package/cjs/PageTable.d.ts CHANGED
@@ -51,6 +51,9 @@ export type PageTableProps<T extends object> = {
51
51
  disableBodyPadding?: boolean;
52
52
  defaultCardSubtitle?: ReactNode;
53
53
  };
54
+ /**
55
+ * PageTable
56
+ */
54
57
  export declare function PageTable<T extends object>(props: PageTableProps<T>): JSX.Element;
55
58
  type CellFn<T extends object> = (item: T) => ReactNode;
56
59
  export interface ITableColumn<T extends object> {
package/cjs/PageTable.js CHANGED
@@ -54,6 +54,9 @@ function TablePage(props) {
54
54
  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))] }));
55
55
  }
56
56
  exports.TablePage = TablePage;
57
+ /**
58
+ * PageTable
59
+ */
57
60
  function PageTable(props) {
58
61
  var _a;
59
62
  var disableBodyPadding = props.disableBodyPadding;
package/docs/BulkActionDialog.md CHANGED
@@ -1,3 +1,5 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ BulkActionDialog
2
+
1
3
  # BulkActionDialog
2
4
 
3
5
  BulkActionDialog is a generic dialog for process bulk actions.
package/docs/Components.md ADDED
@@ -0,0 +1,9 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ Components
2
+
3
+ # Ansible UI Components
4
+
5
+ - [BulkActionDialog](BulkActionDialog.md#BulkActionDialog)
6
+ - [PageFramework](PageFramework.md#PageFramework)
7
+ - [PageHeader](PageHeader.md#PageHeader)
8
+ - [PageLayout](PageLayout.md#PageLayout)
9
+ - [PageTable](PageTable.md#PageTable)
package/docs/Framework.md CHANGED
@@ -1,97 +1,19 @@
1
- # Framework
1
+ Ansible UI Framework
2
2
 
3
- A framework for creating performant, consistent, and responsive web applications using [PatternFly](https://www.patternfly.org).
3
+ # Ansible UI Framework
4
4
 
5
- The framework is made up of high level components using PatternFly components underneath.
6
- This allows the framework to adjust the web application for responsive layout.
7
- Basic structure of the framework can be seen in the tree below.
8
-
9
- - [PageLayout](#pagelayout)
10
- - [PageHeader](#pageheader)
11
- - [PageBody](#pagebody)
12
- - [PageTable](#pagetable)
13
- - [PageTabs](#pagetabs)
14
- - [PageForm](#pageform)
15
-
16
- ## PageLayout
17
-
18
- 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.
19
-
20
- ```tsx
21
- (
22
- <Page>
23
- <PageLayout>
24
- <PageHeader {...}/>
25
- <PageBody> ... </PageBody>
26
- </PageLayout>
27
- </Page>
28
- )
29
- ```
30
-
31
- ### PageHeader
32
-
33
- 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.
34
-
35
- ```tsx
36
- <Page>
37
- <PageHeader
38
- breadcrumbs={breadcrumbs}
39
- title="Page title"
40
- titleHelp="Page title popover description."
41
- description="Page description"
42
- headerActions={actions}
43
- />
44
- </Page>
45
- ```
5
+ A framework for building applications using [PatternFly](https://www.patternfly.org).
46
6
 
47
- | Property | Description |
48
- | -------------: | -------------------------------------------------------------------------- |
49
- | breadcrumbs | The breadcrumbs for the page. |
50
- | title | The title of the page. |
51
- | titleHelp | The help for the title popover. |
52
- | titleHelpTitle | The title of help popover. |
53
- | description | The description of the page. |
54
- | actions | The actions for the page. Actions are used on details pages. |
55
- | controls | Support for extra page controls that show up at the top right of the page. |
7
+ - [Getting Started](GettingStarted.md#getting-started)
8
+ - [Guides](Guides.md#ansible-ui-guides)
9
+ - [Components](Components.md#ansible-ui-components)
56
10
 
57
- ### PageBody
58
-
59
- The page table handles the responsive layout of the body section of the page.
60
-
61
- #### PageTable
62
-
63
- The page table handles the logic for tables on a page.
64
-
65
- ```tsx
66
- <PageTable<User>
67
- toolbarFilters={toolbarFilters}
68
- toolbarActions={toolbarActions}
69
- tableColumns={tableColumns}
70
- rowActions={rowActions}
71
- {...view}
72
- />
73
- ```
74
-
75
- #### PageTabs
76
-
77
- The page tabs are used for details pages in the application.
78
-
79
- ```tsx
80
- (
81
- <Page>
82
- <PageHeader ... />
83
- <PageTabs >
84
- <PageTab title="Tab title" >
85
- ...
86
- </PageTab>
87
- <PageTab title="Tab title" >
88
- ...
89
- </PageTab>
90
- </PageTabs>
91
- </Page>
92
- )
93
- ```
11
+ The framework is made up of high level components using PatternFly components underneath.
12
+ This allows the framework to adjust the web application for responsive layout.
94
13
 
95
- #### PageForm
14
+ The framework:
96
15
 
97
- The page form handles form input on a page. It uses [react-hook-form](https://react-hook-form.com/) for performance.
16
+ - does not use any state libraries other than the built in react context state management.
17
+ - does not assume any specific translation libraries, but does provide a hook for internal translations.
18
+ - does not assume any specific navigation libraries, but does provide a hook for internal navigation.
19
+ 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 ADDED
@@ -0,0 +1,79 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Guides](Guides.md#ansible-ui-guides) ▸ Getting Started
2
+
3
+ # Getting Started
4
+
5
+ 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.
6
+
7
+ There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
8
+
9
+ ## Install the NPM package
10
+
11
+ [NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
12
+
13
+ ```
14
+ npm install @ansible/ansible-ui-framework
15
+ ```
16
+
17
+ ## Add the [PageFramework](PageFramework.md#pageframework) to your application
18
+
19
+ Near the top of your application add the [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md#PageFramework) component.
20
+
21
+ This component adds the state management needed by the framework.
22
+
23
+ ## Use the framework in your application pages
24
+
25
+ ### Use PageLayout to control the layout in your pages
26
+
27
+ 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.
28
+
29
+ ```tsx
30
+ <Page>
31
+ <PageLayout>
32
+ <PageHeader ... />
33
+ ...
34
+ </PageLayout>
35
+ </Page>
36
+ ```
37
+
38
+ ### Use PageHeader for the heading of your pages
39
+
40
+ 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.
41
+
42
+ ```tsx
43
+ <Page>
44
+ <PageLayout>
45
+ <PageHeader ... />
46
+ ...
47
+ </PageLayout>
48
+ </Page>
49
+ ```
50
+
51
+ ### Add content to the page
52
+
53
+ #### Table Pages
54
+
55
+ For pages containing a table, use the [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#pagetable) component.
56
+
57
+ ```tsx
58
+ <Page>
59
+ <PageLayout>
60
+ <PageHeader ... />
61
+ <PageTable ... />
62
+ </PageLayout>
63
+ </Page>
64
+ ```
65
+
66
+ #### Form Pages
67
+
68
+ For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
69
+
70
+ ```tsx
71
+ <Page>
72
+ <PageLayout>
73
+ <PageHeader ... />
74
+ <PageForm ... />
75
+ </PageLayout>
76
+ </Page>
77
+ ```
78
+
79
+ ## Next Steps
package/docs/Guides.md ADDED
@@ -0,0 +1,7 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ Guides
2
+
3
+ # Ansible UI Guides
4
+
5
+ - [Getting Started](GettingStarted.md#getting-started)
6
+ - [PageLayout](PageLayout.md#pagelayout)
7
+ - [PageTable Guide](PageTableGuide.md#pagetable-guide)
package/docs/PageFramework.md CHANGED
@@ -1,3 +1,5 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageFramework
2
+
1
3
  # PageFramework
2
4
 
3
5
  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.
package/docs/PageHeader.md CHANGED
@@ -1,3 +1,5 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageHeader
2
+
1
3
  # PageHeader
2
4
 
3
5
  PageHeader enables the responsive layout of the header.
package/docs/PageLayout.md CHANGED
@@ -1,3 +1,5 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageLayout
2
+
1
3
  # PageLayout
2
4
 
3
5
  The PageLayout is used as the container for the contents of the page.
package/docs/PageTable.md ADDED
@@ -0,0 +1,5 @@
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Components](Components.md#ansible-ui-components) ▸ PageTable
2
+
3
+ # PageTable
4
+
5
+ PageTable
package/docs/{PageTable-Guide.md → PageTableGuide.md} RENAMED
@@ -1,36 +1,6 @@
1
- # Table Guide
2
-
3
- - [Typescript Interface](#typescript-interface)
4
- - [Page layout](#page-layout)
5
- - [View](#view)
6
- - [Table Columns](#table-columns)
7
- - [Page Table](#page-table)
8
- - [Toolbar Filters](#toolbar-filters)
9
- - [Toolbar Actions](#toolbar-actions)
10
- - [Row Actions](#row-actions)
11
-
12
- ## Typescript Interface
13
-
14
- ```ts
15
- export interface IPerson {
16
- name: string
17
- }
18
- ```
19
-
20
- ## Page layout
21
-
22
- The page layout enables the layout to be responsive - responding to different page sizes and adjusting padding and borders.
1
+ [Ansible UI Framework](Framework.md#ansible-ui-framework) ▸ [Guides](Guides.md#ansible-ui-guides) ▸ PageTable
23
2
 
24
- ```tsx
25
- export function Persons() {
26
- return (
27
- <PageLayout>
28
- <PageHeader title="Persons" />
29
- <PageBody>Table will go here</PageBody>
30
- </PageLayout>
31
- )
32
- }
33
- ```
3
+ # PageTable Guide
34
4
 
35
5
  ## View
36
6
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
- "description": "Framework for building consistent responsive web applications using PatternFly.",
4
- "version": "0.0.301",
3
+ "description": "A framework for building applications using PatternFly.",
4
+ "version": "0.0.303",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {