@ansible/ansible-ui-framework 0.0.190 → 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 +11 -0
- package/docs/framework.md +97 -0
- package/docs/tables.md +208 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Ansible UI Framework [](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
|
2
|
+
|
|
3
|
+
Framework for building consistent responsive web applications using [PatternFly](https://www.patternfly.org).
|
|
4
|
+
|
|
5
|
+
Developed by the Ansible UI developers.
|
|
6
|
+
|
|
7
|
+
## Getting Started
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
npm install @ansible/ansible-ui-framework
|
|
11
|
+
```
|
|
@@ -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.
|
package/docs/tables.md
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
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.
|
|
23
|
+
|
|
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
|
+
```
|
|
34
|
+
|
|
35
|
+
## View
|
|
36
|
+
|
|
37
|
+
Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
const view = useView()
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For different backends, the view can be wrapped to make a specific view hook for the API.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
export function Persons() {
|
|
47
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
48
|
+
...
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Table Columns
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
export function Persons() {
|
|
56
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
57
|
+
const tableColumns = useMemo<ITableColumn<IPerson>[]>(
|
|
58
|
+
() => [
|
|
59
|
+
{
|
|
60
|
+
header: 'Name',
|
|
61
|
+
cell: (person) => <TextCell text={person.name} />,
|
|
62
|
+
sort: 'name',
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
[]
|
|
66
|
+
)
|
|
67
|
+
...
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Page Table
|
|
72
|
+
|
|
73
|
+
The PageTable component takes in the properties from the view and shows a table for the view using the columns.
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
export function Persons() {
|
|
77
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
78
|
+
const tableColumns = useMemo<ITableColumn<IPerson>[]>(
|
|
79
|
+
() => [
|
|
80
|
+
{
|
|
81
|
+
header: 'Name',
|
|
82
|
+
cell: (person) => <TextCell text={person.name} />,
|
|
83
|
+
sort: 'name',
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
[]
|
|
87
|
+
)
|
|
88
|
+
return (
|
|
89
|
+
<PageLayout>
|
|
90
|
+
<PageHeader title="Persons" />
|
|
91
|
+
<PageBody>
|
|
92
|
+
<PageTable<IPerson> tableColumns={tableColumns} {...view} />
|
|
93
|
+
</PageBody>
|
|
94
|
+
</PageLayout>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Toolbar Filters
|
|
100
|
+
|
|
101
|
+
Filters are specified using IToolbarFilter. The key is used for url querystring persistence. The query is used by the view to make the API call with the filter.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
export function Persons() {
|
|
105
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
106
|
+
const tableColumns = ...
|
|
107
|
+
const toolbarFilters = useMemo<IToolbarFilter[]>(
|
|
108
|
+
() => [
|
|
109
|
+
{
|
|
110
|
+
key: 'name',
|
|
111
|
+
label: 'Name',
|
|
112
|
+
type: 'string',
|
|
113
|
+
query: 'name',
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
[]
|
|
117
|
+
)
|
|
118
|
+
return (
|
|
119
|
+
<PageLayout>
|
|
120
|
+
<PageHeader title="Persons" />
|
|
121
|
+
<PageBody>
|
|
122
|
+
<PageTable<IPerson>
|
|
123
|
+
tableColumns={tableColumns}
|
|
124
|
+
toolbarFilters={toolbarFilters}
|
|
125
|
+
{...view} />
|
|
126
|
+
</PageBody>
|
|
127
|
+
</PageLayout>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Toolbar Actions
|
|
133
|
+
|
|
134
|
+
Toolbar actions are specified using ITypedAction.
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
export function Persons() {
|
|
138
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
139
|
+
const tableColumns = ...
|
|
140
|
+
const toolbarFilters = ...
|
|
141
|
+
const toolbarActions = useMemo<ITypedAction<IPerson>[]>(
|
|
142
|
+
() => [
|
|
143
|
+
{
|
|
144
|
+
type: TypedActionType.button,
|
|
145
|
+
variant: ButtonVariant.primary,
|
|
146
|
+
icon: PlusIcon,
|
|
147
|
+
label: 'Create person',
|
|
148
|
+
onClick: () => alert("TODO"),
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
type: TypedActionType.bulk,
|
|
152
|
+
icon: TrashIcon,
|
|
153
|
+
label: 'Deleted selected persons',
|
|
154
|
+
onClick: (persons) => alert("TODO"),
|
|
155
|
+
},
|
|
156
|
+
],
|
|
157
|
+
[]
|
|
158
|
+
)
|
|
159
|
+
return (
|
|
160
|
+
<PageLayout>
|
|
161
|
+
<PageHeader title="Persons" />
|
|
162
|
+
<PageBody>
|
|
163
|
+
<PageTable<IPerson>
|
|
164
|
+
tableColumns={tableColumns}
|
|
165
|
+
toolbarFilters={toolbarFilters}
|
|
166
|
+
toolbarActions={toolbarActions}
|
|
167
|
+
{...view} />
|
|
168
|
+
</PageBody>
|
|
169
|
+
</PageLayout>
|
|
170
|
+
)
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
## Row Actions
|
|
175
|
+
|
|
176
|
+
Row actions are specified using ITypedAction.
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
export function Persons() {
|
|
180
|
+
const view = useMyApiView<IPerson>({ url: '/api/persons' })
|
|
181
|
+
const tableColumns = ...
|
|
182
|
+
const toolbarFilters = ...
|
|
183
|
+
const toolbarActions = ...
|
|
184
|
+
const rowActions = useMemo<IItemAction<Team>[]>(
|
|
185
|
+
() => [
|
|
186
|
+
{
|
|
187
|
+
icon: EditIcon,
|
|
188
|
+
label: 'Edit person',
|
|
189
|
+
onClick: (person) => alert("TODO"),
|
|
190
|
+
},
|
|
191
|
+
],
|
|
192
|
+
[t]
|
|
193
|
+
)
|
|
194
|
+
return (
|
|
195
|
+
<PageLayout>
|
|
196
|
+
<PageHeader title="Persons" />
|
|
197
|
+
<PageBody>
|
|
198
|
+
<PageTable<IPerson>
|
|
199
|
+
tableColumns={tableColumns}
|
|
200
|
+
toolbarFilters={toolbarFilters}
|
|
201
|
+
toolbarActions={toolbarActions}
|
|
202
|
+
rowActions={rowActions}
|
|
203
|
+
{...view} />
|
|
204
|
+
</PageBody>
|
|
205
|
+
</PageLayout>
|
|
206
|
+
)
|
|
207
|
+
}
|
|
208
|
+
```
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
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": {
|
|
8
8
|
"type": "git",
|
|
9
9
|
"url": "https://github.com/ansible/ansible-ui.git"
|
|
10
10
|
},
|
|
11
|
-
"homepage": "https://github.com/ansible/ansible-ui/framework#readme",
|
|
11
|
+
"homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|