@ansible/ansible-ui-framework 0.0.337 → 0.0.339

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.
Files changed (3) hide show
  1. package/docs/PageTableGuide.md +30 -30
  2. package/docs/assets/css/style.scss +8 -4
  3. package/package.json +1 -1
package/docs/PageTableGuide.md CHANGED
@@ -13,8 +13,8 @@ const view = useView()
13
13
  For different backends, the view can be wrapped to make a specific view hook for the API.
14
14
 
15
15
  ```tsx
16
- export function Persons() {
17
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
16
+ export function Users() {
17
+ const view = useMyApiView<IUser>({ url: '/api/users' })
18
18
  ...
19
19
  }
20
20
  ```
@@ -22,13 +22,13 @@ export function Persons() {
22
22
  ## Table Columns
23
23
 
24
24
  ```tsx
25
- export function Persons() {
26
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
27
- const tableColumns = useMemo<ITableColumn<IPerson>[]>(
25
+ export function Users() {
26
+ const view = useMyApiView<IUser>({ url: '/api/users' })
27
+ const tableColumns = useMemo<ITableColumn<IUser>[]>(
28
28
  () => [
29
29
  {
30
30
  header: 'Name',
31
- cell: (person) => <TextCell text={person.name} />,
31
+ cell: (user) => <TextCell text={user.name} />,
32
32
  sort: 'name',
33
33
  },
34
34
  ],
@@ -43,13 +43,13 @@ export function Persons() {
43
43
  The PageTable component takes in the properties from the view and shows a table for the view using the columns.
44
44
 
45
45
  ```tsx
46
- export function Persons() {
47
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
48
- const tableColumns = useMemo<ITableColumn<IPerson>[]>(
46
+ export function Users() {
47
+ const view = useMyApiView<IUser>({ url: '/api/users' })
48
+ const tableColumns = useMemo<ITableColumn<IUser>[]>(
49
49
  () => [
50
50
  {
51
51
  header: 'Name',
52
- cell: (person) => <TextCell text={person.name} />,
52
+ cell: (user) => <TextCell text={user.name} />,
53
53
  sort: 'name',
54
54
  },
55
55
  ],
@@ -57,9 +57,9 @@ export function Persons() {
57
57
  )
58
58
  return (
59
59
  <PageLayout>
60
- <PageHeader title="Persons" />
60
+ <PageHeader title="Users" />
61
61
  <PageBody>
62
- <PageTable<IPerson> tableColumns={tableColumns} {...view} />
62
+ <PageTable<IUser> tableColumns={tableColumns} {...view} />
63
63
  </PageBody>
64
64
  </PageLayout>
65
65
  )
@@ -71,8 +71,8 @@ export function Persons() {
71
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
72
 
73
73
  ```tsx
74
- export function Persons() {
75
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
74
+ export function Users() {
75
+ const view = useMyApiView<IUser>({ url: '/api/users' })
76
76
  const tableColumns = ...
77
77
  const toolbarFilters = useMemo<IToolbarFilter[]>(
78
78
  () => [
@@ -87,9 +87,9 @@ export function Persons() {
87
87
  )
88
88
  return (
89
89
  <PageLayout>
90
- <PageHeader title="Persons" />
90
+ <PageHeader title="Users" />
91
91
  <PageBody>
92
- <PageTable<IPerson>
92
+ <PageTable<IUser>
93
93
  tableColumns={tableColumns}
94
94
  toolbarFilters={toolbarFilters}
95
95
  {...view} />
@@ -104,33 +104,33 @@ export function Persons() {
104
104
  Toolbar actions are specified using ITypedAction.
105
105
 
106
106
  ```tsx
107
- export function Persons() {
108
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
107
+ export function Users() {
108
+ const view = useMyApiView<IUser>({ url: '/api/users' })
109
109
  const tableColumns = ...
110
110
  const toolbarFilters = ...
111
- const toolbarActions = useMemo<ITypedAction<IPerson>[]>(
111
+ const toolbarActions = useMemo<ITypedAction<IUser>[]>(
112
112
  () => [
113
113
  {
114
114
  type: TypedActionType.button,
115
115
  variant: ButtonVariant.primary,
116
116
  icon: PlusIcon,
117
- label: 'Create person',
117
+ label: 'Create user',
118
118
  onClick: () => alert("TODO"),
119
119
  },
120
120
  {
121
121
  type: TypedActionType.bulk,
122
122
  icon: TrashIcon,
123
- label: 'Deleted selected persons',
124
- onClick: (persons) => alert("TODO"),
123
+ label: 'Deleted selected users',
124
+ onClick: (users) => alert("TODO"),
125
125
  },
126
126
  ],
127
127
  []
128
128
  )
129
129
  return (
130
130
  <PageLayout>
131
- <PageHeader title="Persons" />
131
+ <PageHeader title="Users" />
132
132
  <PageBody>
133
- <PageTable<IPerson>
133
+ <PageTable<IUser>
134
134
  tableColumns={tableColumns}
135
135
  toolbarFilters={toolbarFilters}
136
136
  toolbarActions={toolbarActions}
@@ -146,8 +146,8 @@ export function Persons() {
146
146
  Row actions are specified using ITypedAction.
147
147
 
148
148
  ```tsx
149
- export function Persons() {
150
- const view = useMyApiView<IPerson>({ url: '/api/persons' })
149
+ export function Users() {
150
+ const view = useMyApiView<IUser>({ url: '/api/users' })
151
151
  const tableColumns = ...
152
152
  const toolbarFilters = ...
153
153
  const toolbarActions = ...
@@ -155,17 +155,17 @@ export function Persons() {
155
155
  () => [
156
156
  {
157
157
  icon: EditIcon,
158
- label: 'Edit person',
159
- onClick: (person) => alert("TODO"),
158
+ label: 'Edit user',
159
+ onClick: (user) => alert("TODO"),
160
160
  },
161
161
  ],
162
162
  [t]
163
163
  )
164
164
  return (
165
165
  <PageLayout>
166
- <PageHeader title="Persons" />
166
+ <PageHeader title="Users" />
167
167
  <PageBody>
168
- <PageTable<IPerson>
168
+ <PageTable<IUser>
169
169
  tableColumns={tableColumns}
170
170
  toolbarFilters={toolbarFilters}
171
171
  toolbarActions={toolbarActions}
package/docs/assets/css/style.scss CHANGED
@@ -51,7 +51,7 @@ h4 {
51
51
  }
52
52
 
53
53
  .highlight .p {
54
- color: #da71d6;
54
+ color: #1899f5;
55
55
  }
56
56
 
57
57
  .highlight .nv {
@@ -64,7 +64,11 @@ h4 {
64
64
  }
65
65
 
66
66
  .highlight .na {
67
- color: #579cd6;
67
+ color: #9ddcfe;
68
+ }
69
+
70
+ .highlight .nx {
71
+ color: #fffd;
68
72
  }
69
73
 
70
74
  .highlight .k {
@@ -76,7 +80,7 @@ h4 {
76
80
  }
77
81
 
78
82
  .highlight .o {
79
- color: white;
83
+ color: #fffb;
80
84
  }
81
85
 
82
86
  .highlight .s1 {
@@ -88,7 +92,7 @@ h4 {
88
92
  }
89
93
 
90
94
  .highlight .si {
91
- color: #fff8;
95
+ color: #1899f5;
92
96
  }
93
97
 
94
98
  .highlight .err {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ansible/ansible-ui-framework",
3
3
  "description": "A framework for building applications using PatternFly.",
4
- "version": "0.0.337",
4
+ "version": "0.0.339",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "repository": {