@ansible/ansible-ui-framework 0.0.472 → 0.0.474
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +18 -0
- package/cjs/components/EmptyStateCustom.d.ts +7 -0
- package/cjs/components/EmptyStateCustom.js +21 -0
- package/cjs/components/EmptyStateFilter.d.ts +7 -0
- package/cjs/components/EmptyStateFilter.js +26 -0
- package/cjs/components/EmptyStateNoData.d.ts +6 -0
- package/cjs/components/EmptyStateNoData.js +11 -0
- package/cjs/components/EmptyStateUnauthorized.d.ts +6 -0
- package/cjs/components/EmptyStateUnauthorized.js +13 -0
- package/cjs/components/LoadingPage.js +12 -1
- package/cjs/components/LoadingState.d.ts +2 -0
- package/cjs/components/LoadingState.js +20 -0
- package/package.json +1 -1
package/README.md
CHANGED
@@ -3,3 +3,21 @@
|
|
3
3
|
A framework for building applications using [PatternFly](https://www.patternfly.org), developed by the Ansible UI developers.
|
4
4
|
|
5
5
|
[Documentation](https://github.com/ansible/ansible-ui/wiki/Ansible-UI-Framework)
|
6
|
+
|
7
|
+
####Storybook
|
8
|
+
|
9
|
+
For development you may use Storybook. It allows you to try some of the existing components and develop new ones without running the whole UI.
|
10
|
+
|
11
|
+
Install dependencies:
|
12
|
+
|
13
|
+
`npm ci`
|
14
|
+
|
15
|
+
Build Storybook:
|
16
|
+
|
17
|
+
`npm run build-storybook`
|
18
|
+
|
19
|
+
Start Storybook:
|
20
|
+
|
21
|
+
`npm run storybook`
|
22
|
+
|
23
|
+
Storybook will run at http://localhost:6006/
|
@@ -0,0 +1,21 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.EmptyStateCustom = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
function EmptyStateCustom(props) {
|
18
|
+
var title = props.title, description = props.description, icon = props.icon, button = props.button;
|
19
|
+
return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, __assign({ variant: react_core_1.EmptyStateVariant.small }, { children: [icon && (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateIcon, { icon: icon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, __assign({ headingLevel: "h4", size: "lg" }, { children: title })), (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: description }), button && (0, jsx_runtime_1.jsx)(react_core_1.EmptyStatePrimary, { children: button })] })));
|
20
|
+
}
|
21
|
+
exports.EmptyStateCustom = EmptyStateCustom;
|
@@ -0,0 +1,26 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.EmptyStateFilter = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
18
|
+
var EmptyStateCustom_1 = require("./EmptyStateCustom");
|
19
|
+
function EmptyStateFilter(props) {
|
20
|
+
var button = props.button, clearAllFilters = props.clearAllFilters, description = props.description, title = props.title;
|
21
|
+
var defaultButton = 'Clear all filters';
|
22
|
+
var defaultDescription = 'No results match the filter criteria. Try changing your filter settings.';
|
23
|
+
var defaultTitle = 'No results found';
|
24
|
+
return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { title: title || defaultTitle, description: description || defaultDescription, icon: react_icons_1.SearchIcon, button: clearAllFilters ? ((0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ onClick: clearAllFilters, variant: "link" }, { children: button || defaultButton }))) : undefined }));
|
25
|
+
}
|
26
|
+
exports.EmptyStateFilter = EmptyStateFilter;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.EmptyStateNoData = void 0;
|
4
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
5
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
6
|
+
var EmptyStateCustom_1 = require("./EmptyStateCustom");
|
7
|
+
function EmptyStateNoData(props) {
|
8
|
+
var button = props.button, description = props.description, title = props.title;
|
9
|
+
return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { icon: button ? react_icons_1.PlusCircleIcon : react_icons_1.CubesIcon, title: title, description: description, button: button }));
|
10
|
+
}
|
11
|
+
exports.EmptyStateNoData = EmptyStateNoData;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.EmptyStateUnauthorized = void 0;
|
4
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
5
|
+
var react_icons_1 = require("@patternfly/react-icons");
|
6
|
+
var EmptyStateCustom_1 = require("./EmptyStateCustom");
|
7
|
+
function EmptyStateUnauthorized(props) {
|
8
|
+
var defaultAdminMessage = 'Contact your organization administrator for more information.';
|
9
|
+
var defaultTitle = 'You do not have access';
|
10
|
+
var adminMessage = props.adminMessage, loginLink = props.loginLink, title = props.title;
|
11
|
+
return ((0, jsx_runtime_1.jsx)(EmptyStateCustom_1.EmptyStateCustom, { icon: react_icons_1.LockIcon, title: title || defaultTitle, description: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [adminMessage || defaultAdminMessage, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), loginLink] }) }));
|
12
|
+
}
|
13
|
+
exports.EmptyStateUnauthorized = EmptyStateUnauthorized;
|
@@ -1,4 +1,15 @@
|
|
1
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
|
+
};
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
14
|
exports.LoadingPage = void 0;
|
4
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
@@ -9,6 +20,6 @@ function LoadingPage(props) {
|
|
9
20
|
var _a;
|
10
21
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { breadcrumbs: props.breadcrumbs, title: (_a = props.title) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_core_1.Skeleton, { width: "200px" })) }), (0, jsx_runtime_1.jsx)(react_core_1.PageSection
|
11
22
|
// variant={theme === ThemeE.Dark ? undefined : 'light'}
|
12
|
-
, {})] }));
|
23
|
+
, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, __assign({ style: { paddingTop: 32 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) })) })] }));
|
13
24
|
}
|
14
25
|
exports.LoadingPage = LoadingPage;
|
@@ -0,0 +1,20 @@
|
|
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
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.LoadingState = void 0;
|
15
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
|
+
var react_core_1 = require("@patternfly/react-core");
|
17
|
+
function LoadingState() {
|
18
|
+
return ((0, jsx_runtime_1.jsx)(react_core_1.PageSection, __assign({ isFilled: true, variant: "light" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) }) })));
|
19
|
+
}
|
20
|
+
exports.LoadingState = LoadingState;
|