@ansible/ansible-ui-framework 0.0.428 → 0.0.448
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/cjs/PageActions/PageAction.d.ts +1 -1
- package/cjs/PageActions/PageSingleAction.js +1 -1
- package/cjs/PageCells/TextCell.d.ts +1 -1
- package/cjs/PageDetails/PageDetail.d.ts +6 -0
- package/cjs/PageDetails/PageDetail.js +27 -0
- package/cjs/PageDetails/PageDetails.d.ts +5 -0
- package/cjs/PageDetails/PageDetails.js +45 -0
- package/cjs/PageDetails/PageDetailsFromColumns.d.ts +6 -0
- package/cjs/{PageTable/PageTableDetails.js → PageDetails/PageDetailsFromColumns.js} +7 -6
- package/cjs/PageForm/Inputs/PageFormCheckbox.d.ts +9 -8
- package/cjs/PageForm/Inputs/PageFormCheckbox.js +8 -4
- package/cjs/PageForm/Inputs/PageFormFileUpload.js +1 -1
- package/cjs/PageForm/Inputs/PageFormSelect.js +1 -1
- package/cjs/PageForm/Inputs/PageFormSelectOption.d.ts +2 -0
- package/cjs/PageForm/Inputs/PageFormSelectOption.js +11 -1
- package/cjs/PageForm/Inputs/PageFormTextArea.js +1 -1
- package/cjs/PageForm/Inputs/PageFormTextInput.js +1 -1
- package/cjs/PageForm/PageForm.d.ts +2 -0
- package/cjs/PageForm/PageForm.js +10 -9
- package/cjs/PageForm/Utils/PageFormHidden.d.ts +6 -0
- package/cjs/PageForm/Utils/PageFormHidden.js +13 -0
- package/cjs/PageForm/Utils/PageFormSection.d.ts +5 -0
- package/cjs/PageForm/Utils/PageFormSection.js +20 -0
- package/cjs/PageForm/{Inputs → Utils}/PageFormWatch.d.ts +0 -0
- package/cjs/PageForm/{Inputs → Utils}/PageFormWatch.js +1 -2
- package/cjs/PageHeader.d.ts +9 -11
- package/cjs/PageHeader.js +9 -11
- package/cjs/PageTable/PageTable.d.ts +2 -7
- package/cjs/PageTable/PageTable.js +1 -7
- package/cjs/PageTable/PageTableCard.js +3 -3
- package/cjs/PageTabs.d.ts +2 -1
- package/cjs/PageTabs.js +6 -2
- package/cjs/index.d.ts +3 -3
- package/cjs/index.js +3 -3
- package/package.json +1 -1
- package/cjs/PageDataList.d.ts +0 -46
- package/cjs/PageDataList.js +0 -61
- package/cjs/PageForm/FormPage.d.ts +0 -17
- package/cjs/PageForm/FormPage.js +0 -73
- package/cjs/PageTable/PageTableDetails.d.ts +0 -6
- package/cjs/components/Details.d.ts +0 -36
- package/cjs/components/Details.js +0 -63
- package/docs/Components.md +0 -9
- package/docs/Framework.md +0 -19
- package/docs/Guides.md +0 -6
- package/docs/_config.yml +0 -2
- package/docs/assets/css/style.scss +0 -139
- package/docs/components/BulkActionDialog.md +0 -30
- package/docs/components/PageFramework.md +0 -11
- package/docs/components/PageHeader.md +0 -31
- package/docs/components/PageLayout.md +0 -18
- package/docs/components/PageTable.md +0 -17
- package/docs/guides/GettingStarted.md +0 -90
- package/docs/guides/PageTableGuide.md +0 -178
@@ -1,90 +0,0 @@
|
|
1
|
-
[Ansible UI Framework](../Framework.md) ▸ [Guides](../Guides.md) ▸ Getting Started
|
2
|
-
|
3
|
-
# Getting Started
|
4
|
-
|
5
|
-
## Install the NPM package
|
6
|
-
|
7
|
-
NPM Package: [@ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
8
|
-
|
9
|
-
```
|
10
|
-
npm install @ansible/ansible-ui-framework
|
11
|
-
```
|
12
|
-
|
13
|
-
## Add the PageFramework to your application
|
14
|
-
|
15
|
-
Near the top of your application add the [PageFramework](../components/PageFramework.md) component.
|
16
|
-
|
17
|
-
This component adds the state management needed by the framework.
|
18
|
-
|
19
|
-
## Use the framework in your application pages
|
20
|
-
|
21
|
-
### Use PageLayout to control the layout in your pages
|
22
|
-
|
23
|
-
The [PageLayout](../components/PageLayout.md) 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 where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
|
24
|
-
|
25
|
-
```tsx
|
26
|
-
<Page>
|
27
|
-
<PageLayout>
|
28
|
-
<PageHeader ... />
|
29
|
-
...
|
30
|
-
</PageLayout>
|
31
|
-
</Page>
|
32
|
-
```
|
33
|
-
|
34
|
-
### Use PageHeader for the heading of your pages
|
35
|
-
|
36
|
-
The [PageHeader](../components/PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
|
37
|
-
|
38
|
-
```tsx
|
39
|
-
<Page>
|
40
|
-
<PageLayout>
|
41
|
-
<PageHeader ... />
|
42
|
-
...
|
43
|
-
</PageLayout>
|
44
|
-
</Page>
|
45
|
-
```
|
46
|
-
|
47
|
-
### Add content to the page
|
48
|
-
|
49
|
-
#### Table Pages
|
50
|
-
|
51
|
-
For pages containing a table, use the [PageTable](../components/PageTable.md) component. The PageTable support table, list, and card views of the data.
|
52
|
-
|
53
|
-
```tsx
|
54
|
-
<Page>
|
55
|
-
<PageLayout>
|
56
|
-
<PageHeader ... />
|
57
|
-
<PageTable ... />
|
58
|
-
</PageLayout>
|
59
|
-
</Page>
|
60
|
-
```
|
61
|
-
|
62
|
-
<!-- #### Form Pages
|
63
|
-
|
64
|
-
For pages containing an input form, use the [PageForm](../componentsPageForm.md) component.
|
65
|
-
|
66
|
-
```tsx
|
67
|
-
<Page>
|
68
|
-
<PageLayout>
|
69
|
-
<PageHeader ... />
|
70
|
-
<PageForm ... />
|
71
|
-
</PageLayout>
|
72
|
-
</Page>
|
73
|
-
```
|
74
|
-
|
75
|
-
#### Detail Pages
|
76
|
-
|
77
|
-
TODO
|
78
|
-
|
79
|
-
#### Page sub navigation
|
80
|
-
|
81
|
-
TODO -->
|
82
|
-
|
83
|
-
### Other Useful Components
|
84
|
-
|
85
|
-
<!-- - [PageAlertToaster](../componentsPageAlertToaster.md) -->
|
86
|
-
|
87
|
-
- [BulkActionDialog](../components/BulkActionDialog.md)
|
88
|
-
<!-- - [BulkConfirmationDialog](../componentsBulkConfirmationDialog.md) -->
|
89
|
-
<!-- - [SelectDialog](../componentsSelectDialog.md) -->
|
90
|
-
<!-- - [SelectMultipleDialog](../componentsSelectMultipleDialog.md) -->
|
@@ -1,178 +0,0 @@
|
|
1
|
-
[Ansible UI Framework](../Framework.md) ▸ [Guides](../Guides.md) ▸ PageTable
|
2
|
-
|
3
|
-
# PageTable Guide
|
4
|
-
|
5
|
-
## View
|
6
|
-
|
7
|
-
Each table uses a view using a React hook. The view handles the state for the table. Sorting, filtering, pagination, etc...
|
8
|
-
|
9
|
-
```tsx
|
10
|
-
const view = useView();
|
11
|
-
```
|
12
|
-
|
13
|
-
For different backends, the view can be wrapped to make a specific view hook for the API.
|
14
|
-
|
15
|
-
```tsx
|
16
|
-
export function Users() {
|
17
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
18
|
-
...
|
19
|
-
}
|
20
|
-
```
|
21
|
-
|
22
|
-
## Table Columns
|
23
|
-
|
24
|
-
```tsx
|
25
|
-
export function Users() {
|
26
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
27
|
-
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
28
|
-
() => [
|
29
|
-
{
|
30
|
-
header: 'Name',
|
31
|
-
cell: (user) => <TextCell text={user.name} />,
|
32
|
-
sort: 'name',
|
33
|
-
},
|
34
|
-
],
|
35
|
-
[]
|
36
|
-
)
|
37
|
-
...
|
38
|
-
}
|
39
|
-
```
|
40
|
-
|
41
|
-
## Page Table
|
42
|
-
|
43
|
-
The PageTable component takes in the properties from the view and shows a table for the view using the columns.
|
44
|
-
|
45
|
-
```tsx
|
46
|
-
export function Users() {
|
47
|
-
const view = useMyApiView<IUser>({ url: '/api/users' });
|
48
|
-
const tableColumns = useMemo<ITableColumn<IUser>[]>(
|
49
|
-
() => [
|
50
|
-
{
|
51
|
-
header: 'Name',
|
52
|
-
cell: (user) => <TextCell text={user.name} />,
|
53
|
-
sort: 'name',
|
54
|
-
},
|
55
|
-
],
|
56
|
-
[]
|
57
|
-
);
|
58
|
-
return (
|
59
|
-
<PageLayout>
|
60
|
-
<PageHeader title="Users" />
|
61
|
-
<PageBody>
|
62
|
-
<PageTable<IUser> tableColumns={tableColumns} {...view} />
|
63
|
-
</PageBody>
|
64
|
-
</PageLayout>
|
65
|
-
);
|
66
|
-
}
|
67
|
-
```
|
68
|
-
|
69
|
-
## Toolbar Filters
|
70
|
-
|
71
|
-
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.
|
72
|
-
|
73
|
-
```tsx
|
74
|
-
export function Users() {
|
75
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
76
|
-
const tableColumns = ...
|
77
|
-
const toolbarFilters = useMemo<IToolbarFilter[]>(
|
78
|
-
() => [
|
79
|
-
{
|
80
|
-
key: 'name',
|
81
|
-
label: 'Name',
|
82
|
-
type: 'string',
|
83
|
-
query: 'name',
|
84
|
-
},
|
85
|
-
],
|
86
|
-
[]
|
87
|
-
)
|
88
|
-
return (
|
89
|
-
<PageLayout>
|
90
|
-
<PageHeader title="Users" />
|
91
|
-
<PageBody>
|
92
|
-
<PageTable<IUser>
|
93
|
-
tableColumns={tableColumns}
|
94
|
-
toolbarFilters={toolbarFilters}
|
95
|
-
{...view} />
|
96
|
-
</PageBody>
|
97
|
-
</PageLayout>
|
98
|
-
)
|
99
|
-
}
|
100
|
-
```
|
101
|
-
|
102
|
-
## Toolbar Actions
|
103
|
-
|
104
|
-
Toolbar actions are specified using ITypedAction.
|
105
|
-
|
106
|
-
```tsx
|
107
|
-
export function Users() {
|
108
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
109
|
-
const tableColumns = ...
|
110
|
-
const toolbarFilters = ...
|
111
|
-
const toolbarActions = useMemo<ITypedAction<IUser>[]>(
|
112
|
-
() => [
|
113
|
-
{
|
114
|
-
type: TypedActionType.button,
|
115
|
-
variant: ButtonVariant.primary,
|
116
|
-
icon: PlusIcon,
|
117
|
-
label: 'Create user',
|
118
|
-
onClick: () => alert("TODO"),
|
119
|
-
},
|
120
|
-
{
|
121
|
-
type: TypedActionType.bulk,
|
122
|
-
icon: TrashIcon,
|
123
|
-
label: 'Deleted selected users',
|
124
|
-
onClick: (users) => alert("TODO"),
|
125
|
-
},
|
126
|
-
],
|
127
|
-
[]
|
128
|
-
)
|
129
|
-
return (
|
130
|
-
<PageLayout>
|
131
|
-
<PageHeader title="Users" />
|
132
|
-
<PageBody>
|
133
|
-
<PageTable<IUser>
|
134
|
-
tableColumns={tableColumns}
|
135
|
-
toolbarFilters={toolbarFilters}
|
136
|
-
toolbarActions={toolbarActions}
|
137
|
-
{...view} />
|
138
|
-
</PageBody>
|
139
|
-
</PageLayout>
|
140
|
-
)
|
141
|
-
}
|
142
|
-
```
|
143
|
-
|
144
|
-
## Row Actions
|
145
|
-
|
146
|
-
Row actions are specified using ITypedAction.
|
147
|
-
|
148
|
-
```tsx
|
149
|
-
export function Users() {
|
150
|
-
const view = useMyApiView<IUser>({ url: '/api/users' })
|
151
|
-
const tableColumns = ...
|
152
|
-
const toolbarFilters = ...
|
153
|
-
const toolbarActions = ...
|
154
|
-
const rowActions = useMemo<IItemAction<Team>[]>(
|
155
|
-
() => [
|
156
|
-
{
|
157
|
-
icon: EditIcon,
|
158
|
-
label: 'Edit user',
|
159
|
-
onClick: (user) => alert("TODO"),
|
160
|
-
},
|
161
|
-
],
|
162
|
-
[t]
|
163
|
-
)
|
164
|
-
return (
|
165
|
-
<PageLayout>
|
166
|
-
<PageHeader title="Users" />
|
167
|
-
<PageBody>
|
168
|
-
<PageTable<IUser>
|
169
|
-
tableColumns={tableColumns}
|
170
|
-
toolbarFilters={toolbarFilters}
|
171
|
-
toolbarActions={toolbarActions}
|
172
|
-
rowActions={rowActions}
|
173
|
-
{...view} />
|
174
|
-
</PageBody>
|
175
|
-
</PageLayout>
|
176
|
-
)
|
177
|
-
}
|
178
|
-
```
|