@ansible/ansible-ui-framework 0.0.473 → 0.0.474

package/README.md

@@ -3,3 +3,21 @@
 A framework for building applications using [PatternFly](https://www.patternfly.org), developed by the Ansible UI developers.
 
 [Documentation](https://github.com/ansible/ansible-ui/wiki/Ansible-UI-Framework)
+
+####Storybook
+
+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.
+
+Install dependencies:
+
+`npm ci`
+
+Build Storybook:
+
+`npm run build-storybook`
+
+Start Storybook:
+
+`npm run storybook`
+
+Storybook will run at http://localhost:6006/

package/cjs/components/EmptyStateCustom.d.ts

@@ -0,0 +1,7 @@
+import { ComponentClass, ReactElement, ReactNode } from 'react';
+export declare function EmptyStateCustom(props: {
+    title: string;
+    description: ReactNode;
+    icon?: ComponentClass;
+    button?: ReactElement;
+}): JSX.Element;

package/cjs/components/EmptyStateCustom.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateCustom = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+function EmptyStateCustom(props) {
+    var title = props.title, description = props.description, icon = props.icon, button = props.button;
+    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 })] })));
+}
+exports.EmptyStateCustom = EmptyStateCustom;

package/cjs/components/EmptyStateFilter.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function EmptyStateFilter(props: {
+    button?: string;
+    clearAllFilters?: () => void;
+    description?: string;
+    title?: string;
+}): JSX.Element;

package/cjs/components/EmptyStateFilter.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateFilter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateFilter(props) {
+    var button = props.button, clearAllFilters = props.clearAllFilters, description = props.description, title = props.title;
+    var defaultButton = 'Clear all filters';
+    var defaultDescription = 'No results match the filter criteria. Try changing your filter settings.';
+    var defaultTitle = 'No results found';
+    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 }));
+}
+exports.EmptyStateFilter = EmptyStateFilter;

package/cjs/components/EmptyStateNoData.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+export declare function EmptyStateNoData(props: {
+    button?: ReactElement;
+    title: string;
+    description: ReactNode;
+}): JSX.Element;

package/cjs/components/EmptyStateNoData.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateNoData = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_icons_1 = require("@patternfly/react-icons");
+var EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateNoData(props) {
+    var button = props.button, description = props.description, title = props.title;
+    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 }));
+}
+exports.EmptyStateNoData = EmptyStateNoData;

package/cjs/components/EmptyStateUnauthorized.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function EmptyStateUnauthorized(props: {
+    adminMessage?: string;
+    loginLink: React.ReactNode;
+    title?: string;
+}): JSX.Element;

package/cjs/components/EmptyStateUnauthorized.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateUnauthorized = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_icons_1 = require("@patternfly/react-icons");
+var EmptyStateCustom_1 = require("./EmptyStateCustom");
+function EmptyStateUnauthorized(props) {
+    var defaultAdminMessage = 'Contact your organization administrator for more information.';
+    var defaultTitle = 'You do not have access';
+    var adminMessage = props.adminMessage, loginLink = props.loginLink, title = props.title;
+    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] }) }));
+}
+exports.EmptyStateUnauthorized = EmptyStateUnauthorized;

package/cjs/components/LoadingPage.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingPage = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,6 +20,6 @@ function LoadingPage(props) {
     var _a;
     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
             // variant={theme === ThemeE.Dark ? undefined : 'light'}
-            , {})] }));
+            , { children: (0, jsx_runtime_1.jsx)(react_core_1.Bullseye, __assign({ style: { paddingTop: 32 } }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, {}) })) })] }));
 }
 exports.LoadingPage = LoadingPage;

package/cjs/components/LoadingState.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function LoadingState(): JSX.Element;

package/cjs/components/LoadingState.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingState = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_core_1 = require("@patternfly/react-core");
+function LoadingState() {
+    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, {}) }) })));
+}
+exports.LoadingState = LoadingState;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.473",
+  "version": "0.0.474",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",