@ansible/ansible-ui-framework 0.0.192 → 0.0.193
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/docs/framework.md +97 -0
- package/docs/{Table-Guide.md → tables.md} +0 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# Ansible UI Framework
|
|
1
|
+
# Ansible UI Framework [](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
|
2
2
|
|
|
3
|
-
Framework for building web applications using PatternFly.
|
|
3
|
+
Framework for building consistent responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
4
4
|
|
|
5
|
-
Developed by the Ansible UI developers
|
|
5
|
+
Developed by the Ansible UI developers.
|
|
6
6
|
|
|
7
7
|
## Getting Started
|
|
8
8
|
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# Framework
|
|
2
|
+
|
|
3
|
+
A framework for creating performant, consistent, and responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
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
|
+
```
|
|
46
|
+
|
|
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. |
|
|
56
|
+
|
|
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
|
+
```
|
|
94
|
+
|
|
95
|
+
#### PageForm
|
|
96
|
+
|
|
97
|
+
The page form handles form input on a page. It uses [react-hook-form](https://react-hook-form.com/) for performance.
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ansible/ansible-ui-framework",
|
|
3
|
-
"description": "Framework for building web applications using PatternFly.",
|
|
4
|
-
"version": "0.0.
|
|
3
|
+
"description": "Framework for building consistent responsive web applications using PatternFly.",
|
|
4
|
+
"version": "0.0.193",
|
|
5
5
|
"author": "Red Hat",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|