@ansible/ansible-ui-framework 0.0.300 → 0.0.301
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +29 -36
- package/cjs/PageFramework.d.ts +6 -0
- package/cjs/PageFramework.js +6 -0
- package/cjs/PageLayout.d.ts +4 -2
- package/cjs/PageLayout.js +4 -2
- package/docs/PageFramework.md +9 -0
- package/docs/PageLayout.md +4 -2
- package/package.json +7 -1
- package/cjs/FilterDrawer.d.ts +0 -8
- package/cjs/FilterDrawer.js +0 -64
package/README.md
CHANGED
@@ -6,10 +6,7 @@ A framework for building responsive web applications using [PatternFly](https://
|
|
6
6
|
|
7
7
|
Developed by the Ansible UI developers.
|
8
8
|
|
9
|
-
While PatternFly provides the building blocks and guidance on building applications,
|
10
|
-
PatternFly does not manage state for the developer.
|
11
|
-
|
12
|
-
This framework adds state management and abstractions for common patterns of application development.
|
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.
|
13
10
|
|
14
11
|
The framework:
|
15
12
|
|
@@ -21,69 +18,65 @@ There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-u
|
|
21
18
|
|
22
19
|
## Getting Started
|
23
20
|
|
24
|
-
### Install the NPM package
|
21
|
+
### Install the [NPM package](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
|
25
22
|
|
26
23
|
```
|
27
24
|
npm install @ansible/ansible-ui-framework
|
28
25
|
```
|
29
26
|
|
30
|
-
### Add PageFramework to your application
|
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
|
31
32
|
|
32
|
-
|
33
|
+
### Use PageLayout to control the layout in your pages
|
33
34
|
|
34
|
-
The
|
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.
|
35
36
|
|
36
37
|
```tsx
|
37
|
-
<
|
38
|
+
<Page>
|
39
|
+
<PageLayout>...</PageLayout>
|
40
|
+
</Page>
|
38
41
|
```
|
39
42
|
|
40
|
-
### Use
|
43
|
+
### Use PageHeader for the heading of your pages
|
41
44
|
|
42
|
-
The
|
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.
|
43
46
|
|
44
47
|
```tsx
|
45
|
-
(
|
46
48
|
<Page>
|
47
49
|
<PageLayout>
|
48
|
-
<PageHeader
|
50
|
+
<PageHeader ... />
|
49
51
|
...
|
50
52
|
</PageLayout>
|
51
53
|
</Page>
|
52
|
-
)
|
53
54
|
```
|
54
55
|
|
55
|
-
###
|
56
|
+
### Add content to the page
|
57
|
+
|
58
|
+
#### Table Pages
|
56
59
|
|
57
|
-
|
60
|
+
For pages containing a table, use the [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md#pagetable) component.
|
58
61
|
|
59
62
|
```tsx
|
60
|
-
(
|
61
63
|
<Page>
|
62
64
|
<PageLayout>
|
63
|
-
<PageHeader
|
64
|
-
|
65
|
-
title="Page title"
|
66
|
-
titleHelp="Page title popover description."
|
67
|
-
description="Page description"
|
68
|
-
headerActions={actions}
|
69
|
-
/>
|
70
|
-
...
|
65
|
+
<PageHeader ... />
|
66
|
+
<PageTable ... />
|
71
67
|
</PageLayout>
|
72
68
|
</Page>
|
73
69
|
```
|
74
70
|
|
75
|
-
####
|
71
|
+
#### Form Pages
|
76
72
|
|
77
|
-
|
73
|
+
For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md#pageform) component.
|
78
74
|
|
79
75
|
```tsx
|
80
|
-
<
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
/>
|
76
|
+
<Page>
|
77
|
+
<PageLayout>
|
78
|
+
<PageHeader ... />
|
79
|
+
<PageForm ... />
|
80
|
+
</PageLayout>
|
81
|
+
</Page>
|
87
82
|
```
|
88
|
-
|
89
|
-
See the [Table Guide](https://github.com/ansible/ansible-ui/blob/main/framework/docs/tables.md) for details.
|
package/cjs/PageFramework.d.ts
CHANGED
@@ -1,4 +1,10 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
/**
|
3
|
+
* 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.
|
4
|
+
*
|
5
|
+
* @example
|
6
|
+
* <PageFramework navigate={navigate}>...</PageFramework>
|
7
|
+
*/
|
2
8
|
export declare function PageFramework(props: {
|
3
9
|
children: ReactNode;
|
4
10
|
navigate?: (to: string) => void;
|
package/cjs/PageFramework.js
CHANGED
@@ -18,6 +18,12 @@ var PageAlertToaster_1 = require("./PageAlertToaster");
|
|
18
18
|
var PageDialog_1 = require("./PageDialog");
|
19
19
|
var Settings_1 = require("./Settings");
|
20
20
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
21
|
+
/**
|
22
|
+
* 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.
|
23
|
+
*
|
24
|
+
* @example
|
25
|
+
* <PageFramework navigate={navigate}>...</PageFramework>
|
26
|
+
*/
|
21
27
|
function PageFramework(props) {
|
22
28
|
return ((0, jsx_runtime_1.jsx)(useFrameworkTranslations_1.FrameworkTranslationsProvider, { children: (0, jsx_runtime_1.jsx)(Settings_1.SettingsProvider, { children: (0, jsx_runtime_1.jsx)(PageDialog_1.PageDialogProvider, { children: (0, jsx_runtime_1.jsx)(PageAlertToaster_1.PageAlertToasterProvider, { children: (0, jsx_runtime_1.jsx)(usePageNavigate_1.PageNavigateCallbackContextProvider, __assign({ callback: props.navigate }, { children: props.children })) }) }) }) }));
|
23
29
|
}
|
package/cjs/PageLayout.d.ts
CHANGED
@@ -1,12 +1,14 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
/**
|
3
|
-
* PageLayout
|
3
|
+
* The PageLayout is used as the container for the contents of the page.
|
4
|
+
* It enables page components to leverage full page layout and scrolling of sub content.
|
5
|
+
* 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.
|
4
6
|
*
|
5
7
|
* @example
|
6
8
|
* <Page>
|
7
9
|
* <PageLayout>
|
8
10
|
* <PageHeader />
|
9
|
-
*
|
11
|
+
* ...
|
10
12
|
* </PageLayout>
|
11
13
|
* <Page>
|
12
14
|
*/
|
package/cjs/PageLayout.js
CHANGED
@@ -35,13 +35,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
35
35
|
var ErrorBoundary_1 = __importDefault(require("./components/ErrorBoundary"));
|
36
36
|
var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
|
37
37
|
/**
|
38
|
-
* PageLayout
|
38
|
+
* The PageLayout is used as the container for the contents of the page.
|
39
|
+
* It enables page components to leverage full page layout and scrolling of sub content.
|
40
|
+
* 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.
|
39
41
|
*
|
40
42
|
* @example
|
41
43
|
* <Page>
|
42
44
|
* <PageLayout>
|
43
45
|
* <PageHeader />
|
44
|
-
*
|
46
|
+
* ...
|
45
47
|
* </PageLayout>
|
46
48
|
* <Page>
|
47
49
|
*/
|
@@ -0,0 +1,9 @@
|
|
1
|
+
# PageFramework
|
2
|
+
|
3
|
+
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.
|
4
|
+
|
5
|
+
## Example
|
6
|
+
|
7
|
+
```tsx
|
8
|
+
<PageFramework navigate={navigate}>...</PageFramework>
|
9
|
+
```
|
package/docs/PageLayout.md
CHANGED
@@ -1,6 +1,8 @@
|
|
1
1
|
# PageLayout
|
2
2
|
|
3
|
-
PageLayout
|
3
|
+
The PageLayout is used as the container for the contents of the page.
|
4
|
+
It enables page components to leverage full page layout and scrolling of sub content.
|
5
|
+
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.
|
4
6
|
|
5
7
|
## Example
|
6
8
|
|
@@ -8,7 +10,7 @@ PageLayout enables the layout of the page to be responsive.
|
|
8
10
|
<Page>
|
9
11
|
<PageLayout>
|
10
12
|
<PageHeader />
|
11
|
-
|
13
|
+
...
|
12
14
|
</PageLayout>
|
13
15
|
<Page>
|
14
16
|
```
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ansible/ansible-ui-framework",
|
3
3
|
"description": "Framework for building consistent responsive web applications using PatternFly.",
|
4
|
-
"version": "0.0.
|
4
|
+
"version": "0.0.301",
|
5
5
|
"author": "Red Hat",
|
6
6
|
"license": "MIT",
|
7
7
|
"repository": {
|
@@ -11,6 +11,12 @@
|
|
11
11
|
"homepage": "https://github.com/ansible/ansible-ui/tree/main/framework#readme",
|
12
12
|
"main": "cjs/index.js",
|
13
13
|
"types": "cjs/index.d.ts",
|
14
|
+
"keywords": [
|
15
|
+
"ansible",
|
16
|
+
"react",
|
17
|
+
"patternfly",
|
18
|
+
"framework"
|
19
|
+
],
|
14
20
|
"peerDependencies": {
|
15
21
|
"@hookform/resolvers": "^2",
|
16
22
|
"@patternfly/patternfly": "^4",
|
package/cjs/FilterDrawer.d.ts
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { IFilterState, IItemFilter, SetFilterValues } from './PageToolbar';
|
3
|
-
export declare function FilterDrawer<T extends object>(props: {
|
4
|
-
filters?: IItemFilter<T>[];
|
5
|
-
filterState: IFilterState;
|
6
|
-
setFilterValues: SetFilterValues<T>;
|
7
|
-
t?: (t: string) => string;
|
8
|
-
}): JSX.Element;
|
package/cjs/FilterDrawer.js
DELETED
@@ -1,64 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
3
|
-
__assign = Object.assign || function(t) {
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
-
s = arguments[i];
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
-
t[p] = s[p];
|
8
|
-
}
|
9
|
-
return t;
|
10
|
-
};
|
11
|
-
return __assign.apply(this, arguments);
|
12
|
-
};
|
13
|
-
var __read = (this && this.__read) || function (o, n) {
|
14
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
15
|
-
if (!m) return o;
|
16
|
-
var i = m.call(o), r, ar = [], e;
|
17
|
-
try {
|
18
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
19
|
-
}
|
20
|
-
catch (error) { e = { error: error }; }
|
21
|
-
finally {
|
22
|
-
try {
|
23
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
24
|
-
}
|
25
|
-
finally { if (e) throw e.error; }
|
26
|
-
}
|
27
|
-
return ar;
|
28
|
-
};
|
29
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
30
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
31
|
-
if (ar || !(i in from)) {
|
32
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
33
|
-
ar[i] = from[i];
|
34
|
-
}
|
35
|
-
}
|
36
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
37
|
-
};
|
38
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
39
|
-
exports.FilterDrawer = void 0;
|
40
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
41
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
42
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
43
|
-
var react_core_1 = require("@patternfly/react-core");
|
44
|
-
var react_1 = require("react");
|
45
|
-
function FilterDrawer(props) {
|
46
|
-
var t = props.t;
|
47
|
-
t = t ? t : function (t) { return t; };
|
48
|
-
var filters = props.filters, filterState = props.filterState, setFilterValues = props.setFilterValues;
|
49
|
-
var toggleFilterValue = (0, react_1.useCallback)(function (filter, filterValues, option) {
|
50
|
-
if (filterValues === null || filterValues === void 0 ? void 0 : filterValues.includes(option)) {
|
51
|
-
setFilterValues(filter, filterValues.filter(function (o) { return o !== option; }));
|
52
|
-
}
|
53
|
-
else {
|
54
|
-
setFilterValues(filter, __spreadArray(__spreadArray([], __read((filterValues !== null && filterValues !== void 0 ? filterValues : [])), false), [option], false));
|
55
|
-
}
|
56
|
-
}, [setFilterValues]);
|
57
|
-
if (!filters)
|
58
|
-
return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
|
59
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, __assign({ minSize: "250px", defaultSize: "250px", maxSize: "250px" }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerPanelBody, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h2", style: { paddingBottom: 24 } }, { children: t('Filters') })), filters === null || filters === void 0 ? void 0 : filters.map(function (filter) {
|
60
|
-
var filterValues = filterState[filter.label];
|
61
|
-
return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerSection, __assign({ style: { paddingBottom: 32 } }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, __assign({ hasGutter: true }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4" }, { children: filter.label })), filter.options.map(function (option) { return ((0, jsx_runtime_1.jsx)(react_core_1.Checkbox, { id: option.label, isChecked: filterValues === null || filterValues === void 0 ? void 0 : filterValues.includes(option.value), onChange: function () { return toggleFilterValue(filter, filterValues, option.value); }, label: option.label }, option.label)); })] })) }), filter.label));
|
62
|
-
})] }) })));
|
63
|
-
}
|
64
|
-
exports.FilterDrawer = FilterDrawer;
|