diff --git a/.gitignore b/.gitignore index e1c51b2641..e9a3416d87 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,5 @@ size-plugin.json !.yarn/releases !.yarn/sdks !.yarn/versions + +*.tsbuildinfo diff --git a/package.json b/package.json index 6959b9fb05..326c63f105 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "build": "yarn workspace patternfly-org build && yarn copy", "build:extensions": "EXTENSIONS_ONLY=true PRERELEASE=true yarn build", "build:doc-core": "yarn workspace site build", + "ci:build:doc-core": "yarn workspace site ci:build", "preview:doc-core": "yarn workspace site wrangler:preview", "build:ts": "yarn workspace patternfly-org build:ts", "build:ts:watch": "yarn build:ts --watch", @@ -28,7 +29,8 @@ "start:doc-core": "yarn workspace site dev", "uninstall": "find . -name node_modules | xargs rm -rf", "workflows": "node .github/generate-workflows", - "test:a11y": "yarn workspace patternfly-org test:a11y" + "test:a11y": "yarn workspace patternfly-org test:a11y", + "generate:content": "yarn workspace site generate:content" }, "workspaces": { "packages": [ diff --git a/packages/documentation-framework/components/link/link.js b/packages/documentation-framework/components/link/link.jsx similarity index 97% rename from packages/documentation-framework/components/link/link.js rename to packages/documentation-framework/components/link/link.jsx index e2ad64771e..fc837994ed 100644 --- a/packages/documentation-framework/components/link/link.js +++ b/packages/documentation-framework/components/link/link.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { Link as ReachLink, navigate } from '@reach/router'; -import { getAsyncComponent } from '../../routes'; +const { getAsyncComponent } = require('../../routes'); const Promiseany = ( Promise.any || diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.d.ts new file mode 100644 index 0000000000..48e568a66a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.d.ts @@ -0,0 +1,3 @@ +import React from 'react'; +export declare const CompassIntegrationsDemo: React.FunctionComponent; +//# sourceMappingURL=CompassIntegrationsDemo.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.js new file mode 100644 index 0000000000..d48d12daee --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassIntegrationsDemo.js @@ -0,0 +1,268 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useState, useEffect } from 'react'; +import { Compass, CompassHeader, CompassContent, CompassMainHeader, CompassPanel, CompassMessageBar, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Title, Tooltip, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, SearchInput, ToggleGroup, ToggleGroupItem, Pagination, DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, Label, Gallery, Card, CardBody, CardHeader, Content, Dropdown, MenuToggle, DropdownItem, DropdownList, Flex, Avatar, Icon, SkipToContent, Switch, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody } from '@patternfly/react-core'; +import { ActionsColumn } from '@patternfly/react-table'; +import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar'; +import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter'; +import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; +import { MessageBar } from '@patternfly/chatbot'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon'; +import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; +import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; +import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon'; +import wallpaperLight from './assets/wallpaper-light.png'; +import wallpaperDark from './assets/wallpaper-dark.png'; +import imgAvatar from './assets/avatar.jpg'; +import { RHAutomationsLogo } from './assets/RHAutomationsLogo'; +import { RHAiExperienceIcon } from './assets/RHAiExperienceIcon'; +export const CompassIntegrationsDemo = () => { + const [isThinking, setIsThinking] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [activeDisplay, setActiveDisplay] = useState("table"); + const [isGlassTheme, setIsGlassTheme] = useState(true); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const onDrawerToggle = () => { + setIsDrawerOpen(!isDrawerOpen); + }; + useEffect(() => { + if (isGlassTheme) { + document.documentElement.classList.add('pf-v6-theme-glass'); + } + else { + document.documentElement.classList.remove('pf-v6-theme-glass'); + } + }, [isGlassTheme]); + const integrations = [ + { + id: 1, + name: "Ansible Automation Platform", + description: "Ansible Automation Platform is an entrprise framework for building and operating IT automation at scale.", + status: "success", + statusText: "Connected", + type: "MCP Server", + url: "ansible.example.com", + }, + { + id: 2, + name: "Github", + description: "Github is a code hosting platform for version control and collaboration. ", + status: "danger", + statusText: "Disconnected", + type: "Version Control", + url: "github.example.com", + }, + { + id: 3, + name: "Kubernetes Cluster", + description: "A Kubernetes cluster is a set of node machines for running containerized applications.", + status: "warning", + statusText: "Invalid fields", + type: "MCP Server", + url: "k8s.example.com", + }, + { + id: 4, + name: "Docker Registry", + description: "A Docker registry is a storage and distribution system for Docker images.", + status: "success", + statusText: "Connected", + type: "Container Registry", + url: "registry.example.com", + }, + { + id: 5, + name: "Jenkins CI/CD", + description: "Jenkins is an open source automation server for building, testing, and deploying software.", + status: "success", + statusText: "Connected", + type: "CI/CD", + url: "jenkins.example.com", + }, + { + id: 6, + name: "GitLab", + description: "GitLab is a complete DevOps platform delivered as a single application.", + status: "danger", + statusText: "Disconnected", + type: "Version Control", + url: "gitlab.example.com", + }, + { + id: 7, + name: "Prometheus", + description: "Prometheus is a monitoring system and time series database for metrics collection.", + status: "success", + statusText: "Connected", + type: "Monitoring", + url: "prometheus.example.com", + }, + { + id: 8, + name: "Elasticsearch", + description: "Elasticsearch is a distributed search and analytics engine for all types of data.", + status: "warning", + statusText: "Degraded", + type: "Search Engine", + url: "elasticsearch.example.com", + }, + { + id: 9, + name: "Redis Cache", + description: "Redis is an in-memory data structure store used as a database, cache, and message broker.", + status: "success", + statusText: "Connected", + type: "Cache", + url: "redis.example.com", + }, + { + id: 10, + name: "PostgreSQL Database", + description: "PostgreSQL is a powerful, open source object-relational database system.", + status: "success", + statusText: "Connected", + type: "Database", + url: "postgres.example.com", + }, + { + id: 11, + name: "Apache Kafka", + description: "Apache Kafka is a distributed event streaming platform for building real-time data pipelines.", + status: "warning", + statusText: "Limited", + type: "Message Queue", + url: "kafka.example.com", + }, + { + id: 12, + name: "Terraform", + description: "Terraform is an infrastructure as code tool for building, changing, and versioning infrastructure.", + status: "success", + statusText: "Connected", + type: "Infrastructure", + url: "terraform.example.com", + }, + { + id: 13, + name: "Splunk", + description: "Splunk is a platform for searching, monitoring, and analyzing machine-generated big data.", + status: "danger", + statusText: "Disconnected", + type: "Logging", + url: "splunk.example.com", + }, + ]; + const handleSendMessage = () => { + setIsThinking(true); + setTimeout(() => { + setIsThinking(false); + }, 10000); // 10 seconds + }; + const navContent = (_jsx(_Fragment, { children: _jsx(CompassPanel, { isPill: true, hasNoPadding: true, children: _jsxs(Tabs, { activeKey: 1, isNav: true, onSelect: () => { }, component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Tab 1" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Integrations" }) }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Tab 3" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Disabled Tab 4" }), isDisabled: true })] }) }) })); + const startSidebarContent = (_jsx(CompassPanel, { isPill: true, children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Chat with AI", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Chat with AI", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); + const endSidebarContent = (_jsx(CompassPanel, { isPill: true, children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Other help icon", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Other help", isCircle: true }) }) })] }) }) })); + const userDropdownItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "My profile" }), _jsx(DropdownItem, { children: "User management" }), _jsx(DropdownItem, { children: "Logout" })] })); + const userDropdown = (_jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: () => setIsDropdownOpen(false), onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), popperProps: { position: "right" }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen, variant: "plain", isCircle: true, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, gap: { default: "gapMd" }, children: ["User Name", _jsx(Avatar, { src: imgAvatar, alt: "", size: "md" })] }) })), children: _jsx(DropdownList, { children: userDropdownItems }) })); + const headerContent = _jsx(CompassHeader, { logo: _jsx("a", { href: "#", "aria-label": "Red Hat automations", tabIndex: 0, children: _jsx(RHAutomationsLogo, {}) }), nav: navContent, profile: userDropdown }); + const cardViewContent = (_jsxs(_Fragment, { children: [_jsx(Toolbar, { children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(SearchInput, { "aria-label": "Integrations example search input", placeholder: "Filter by name" }) }) }), _jsxs(ToggleGroup, { children: [_jsx(ToggleGroupItem, { icon: _jsx(ThIcon, {}), "aria-label": "Card view", isSelected: activeDisplay === "card", onChange: () => { + setActiveDisplay("card"); + } }), _jsx(ToggleGroupItem, { icon: _jsx(ListIcon, {}), "aria-label": "Table view", isSelected: activeDisplay === "table", onChange: () => { + setActiveDisplay("table"); + } })] }), _jsx(ToolbarItem, { variant: "pagination", align: { default: "alignEnd" }, children: _jsx(Pagination, { itemCount: 523, perPage: 20, page: 1, onSetPage: () => { }, widgetId: "pagination-options-card-view", onPerPageSelect: () => { }, isCompact: true }) })] }) }), _jsx(Gallery, { hasGutter: true, children: integrations.map((product) => (_jsxs(Card, { isCompact: true, isFullHeight: true, id: product.name.replace(/ /g, "-"), children: [_jsxs(CardHeader, { actions: { + actions: (_jsx(_Fragment, { children: _jsx(Dropdown, { isOpen: false, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, "aria-label": `${product.name} actions`, variant: "plain", icon: _jsx(EllipsisVIcon, {}) })), popperProps: { position: "right" } }) })), + }, children: [_jsx(Content, { component: "h2", children: product.name }), _jsx(Content, { component: "small", children: product.type })] }), _jsx(CardBody, { isFilled: true, children: product.description }), _jsx(CardBody, { children: _jsxs(DescriptionList, { "aria-label": `${product.name} details`, children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Status" }), _jsx(DescriptionListDescription, { children: _jsx(Label, { status: product.status, isCompact: true, variant: "outline", children: product.statusText }) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Url" }), _jsx(DescriptionListDescription, { children: _jsx("a", { children: product.url }) })] })] }) })] }, product.name))) })] })); + const rowActions = [ + { + title: "Some action", + onClick: () => console.log("clicked on Some action"), // eslint-disable-line no-console + }, + { + title: _jsx("div", { children: "Another action" }), + onClick: () => console.log("clicked on Another action"), // eslint-disable-line no-console + }, + { + isSeparator: true, + }, + { + title: "Third action", + onClick: () => console.log("clicked on Third action"), // eslint-disable-line no-console + }, + ]; + const rows = integrations.map(({ name, type, status, statusText }, index) => ({ + id: name, + row: [ + { + id: "select", + row: name, + cell: undefined, + props: { + select: { + index, + rowIndex: index, + onSelect: () => { }, + isSelected: false, + 'aria-label': `Select row ${name}`, + }, + }, + }, + name, + type, + { + cell: (_jsx(Label, { status: status, isCompact: true, variant: "outline", children: statusText })), + }, + { + cell: _jsx(ActionsColumn, { items: rowActions }), + props: { isActionCell: true }, + }, + ], + })); + const columns = [ + { + cell: undefined, + props: { + select: { + onSelect: () => { }, + isSelected: false, + 'aria-label': "Select all", + }, + }, + }, + "Name", + "Type", + "Status", + { + cell: undefined, + props: { + screenReaderText: "Actions", + }, + } + ]; + const tableViewContent = (_jsxs(_Fragment, { children: [_jsx(DataViewToolbar, { clearAllFilters: () => { }, filters: _jsx(DataViewTextFilter, { filterId: "name", title: "Name", placeholder: "Filter by name" }), actions: _jsxs(ToggleGroup, { children: [_jsx(ToggleGroupItem, { icon: _jsx(ThIcon, {}), "aria-label": "grid icon button", isSelected: activeDisplay === "card", onChange: () => setActiveDisplay("card") }), _jsx(ToggleGroupItem, { icon: _jsx(ListIcon, {}), "aria-label": "list icon button", isSelected: activeDisplay === "table", onChange: () => setActiveDisplay("table") })] }), pagination: _jsx(Pagination, { page: 1, perPage: 10, isCompact: true }) }), _jsx(DataViewTable, { "aria-label": "Integrations", columns: columns, rows: rows, className: "pf-m-plain" })] })); + const mainContent = (_jsxs(_Fragment, { children: [_jsx(CompassMainHeader, { title: _jsx(Title, { headingLevel: "h1", children: "Integrations" }), toolbar: (_jsx(Toolbar, { hasNoPadding: true, children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { variant: "primary", onClick: onDrawerToggle, children: "Toggle drawer" }) }) }), _jsx(ToolbarGroup, { children: _jsx(ToolbarItem, { children: _jsx(Button, { icon: _jsx(EllipsisVIcon, {}), variant: "plain", "aria-label": "More options" }) }) })] }) })) }), _jsx(CompassContent, { children: _jsx(CompassPanel, { isScrollable: true, id: "integrations-main-content", tabIndex: -1, children: (() => { + if (activeDisplay === "table") { + return tableViewContent; + } + else { + return cardViewContent; + } + })() }) })] })); + const footerContent = (_jsx(CompassMessageBar, { children: _jsxs(CompassPanel, { isPill: true, hasNoPadding: true, hasNoBorder: true, children: [_jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }), _jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: isThinking ? "Ai is thinking..." : "Ai is ready to chat" })] }) })); + const handleClick = (e) => { + e.preventDefault(); + const mainContentElement = document.getElementById('integrations-main-content'); + if (mainContentElement) { + mainContentElement.focus(); + mainContentElement.scrollIntoView(); + } + }; + const drawerContent = (_jsxs(DrawerPanelContent, { children: [_jsxs(DrawerHead, { children: [_jsx("span", { children: "Content Details" }), _jsx(DrawerActions, { children: _jsx(DrawerCloseButton, { onClick: onDrawerToggle }) })] }), _jsxs(DrawerPanelBody, { children: [_jsx(Content, { component: "h3", children: "Content Information" }), _jsx(Content, { component: "p", children: "This drawer contains detailed information about the content." })] })] })); + return (_jsxs(_Fragment, { children: [_jsx(SkipToContent, { onClick: handleClick, href: "#integrations-main-content", children: "Skip to content" }), _jsx(Compass, { header: headerContent, sidebarStart: startSidebarContent, main: mainContent, sidebarEnd: endSidebarContent, footer: footerContent, backgroundSrcDark: wallpaperDark, backgroundSrcLight: wallpaperLight, drawerContent: drawerContent, drawerProps: { isExpanded: isDrawerOpen, isPill: true } }), _jsx("div", { style: { + position: 'absolute', + bottom: '1rem', + right: '1rem', + zIndex: 1000 + }, children: _jsx(Switch, { id: "glass-theme-toggle", label: "Glass theme", isChecked: isGlassTheme, onChange: (_, checked) => setIsGlassTheme(checked) }) })] })); +}; +//# sourceMappingURL=CompassIntegrationsDemo.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.d.ts new file mode 100644 index 0000000000..67de87ec17 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.d.ts @@ -0,0 +1,4 @@ +import "@xyflow/react/dist/style.css"; +import "./reactFlowOverrides.css"; +export declare const CompassReactFlowDemo: () => import("react/jsx-runtime").JSX.Element; +//# sourceMappingURL=CompassReactFlowDemo.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.js new file mode 100644 index 0000000000..1febb5f062 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.js @@ -0,0 +1,115 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { memo, useCallback, useRef } from "react"; +import { Background, ReactFlow, useNodesState, useEdgesState, addEdge, useReactFlow, ReactFlowProvider, Handle, Position, } from "@xyflow/react"; +import { Card, CardBody, CardFooter, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Divider, Title, Badge, Button, } from "@patternfly/react-core"; +import "@xyflow/react/dist/style.css"; +import "./reactFlowOverrides.css"; +const PFCardNode = memo(({ data, isConnectable, }) => { + return (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", position: Position.Left, isConnectable: isConnectable, style: { background: "#555" } }), _jsx("div", { style: { minWidth: "300px", maxWidth: "400px" }, children: _jsxs(Card, { isFullHeight: true, children: [_jsx(CardTitle, { children: _jsxs("div", { style: { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, children: [_jsx(Title, { headingLevel: "h4", size: "lg", children: data.title }), _jsx(Badge, { isRead: true, children: data.status })] }) }), _jsxs(CardBody, { children: [_jsx("p", { children: data.description }), _jsx(DescriptionList, { "aria-label": `${data.title} details`, children: data.details.map((detail, index) => (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: detail.term }), _jsx(DescriptionListDescription, { children: detail.description })] }, index))) })] }), data.actionText && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", onClick: () => { + var _a; + // Call the original action if provided + (_a = data.onAction) === null || _a === void 0 ? void 0 : _a.call(data); + }, style: { padding: 0 }, children: data.actionText }) })] }))] }) }), _jsx(Handle, { type: "source", position: Position.Right, isConnectable: isConnectable, style: { background: "#555" } })] })); +}); +const initialNodes = [ + { + id: "0", + type: "pfCard", + data: { + title: "Application Service", + status: "Running", + description: "A microservice handling user authentication and authorization.", + details: [ + { term: "Version", description: "v2.1.4" }, + { term: "CPU Usage", description: "45%" }, + { term: "Memory", description: "2.1 GB" }, + { term: "Last Deployed", description: "2 hours ago" }, + ], + actionText: "View Details", + onAction: () => console.log("View details clicked"), + }, + position: { x: 300, y: 50 }, + }, + { + id: "1", + type: "pfCard", + data: { + title: "Database Service", + status: "Healthy", + description: "PostgreSQL database cluster with high availability.", + details: [ + { term: "Cluster Size", description: "3 nodes" }, + { term: "Storage", description: "500 GB" }, + { term: "Connections", description: "127 active" }, + { term: "Uptime", description: "99.9%" }, + ], + actionText: "Monitor", + onAction: () => console.log("Monitor clicked"), + }, + position: { x: 700, y: 50 }, + }, + { + id: "2", + type: "input", + data: { label: "Start Node" }, + position: { x: 0, y: 50 }, + }, + { + id: '3', + position: { x: 0, y: 150 }, + data: { label: 'plain node' } + }, +]; +let id = 1; +const getId = () => `${id++}`; +const nodeOrigin = [0.5, 0]; +const nodeTypes = { + pfCard: PFCardNode, +}; +const AddNodeOnEdgeDrop = () => { + const reactFlowWrapper = useRef(null); + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState([ + { id: "e2-0", source: "2", target: "0" }, + { id: "e0-1", source: "0", target: "1" }, + ]); + const { screenToFlowPosition } = useReactFlow(); + const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []); + const onConnectEnd = useCallback((event, connectionState) => { + // when a connection is dropped on the pane it's not valid + if (!connectionState.isValid) { + // we need to remove the wrapper bounds, in order to get the correct position + const id = getId(); + const { clientX, clientY } = "changedTouches" in event ? event.changedTouches[0] : event; + const newNode = { + id, + type: "default", + position: screenToFlowPosition({ + x: clientX, + y: clientY, + }), + data: { label: `Node ${id}` }, + origin: [0.5, 0.0], + }; + setNodes((nds) => [...nds, newNode]); + setEdges((eds) => { + var _a; + return [ + ...eds, + { + id, + source: ((_a = connectionState.fromNode) === null || _a === void 0 ? void 0 : _a.id) || "", + target: id, + }, + ]; + }); + } + }, [screenToFlowPosition]); + return (_jsx("div", { className: "wrapper", ref: reactFlowWrapper, style: { height: "100%", width: "100%" }, children: _jsx(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectEnd: onConnectEnd, nodeTypes: nodeTypes, fitView: true, fitViewOptions: { padding: 2 }, nodeOrigin: nodeOrigin, "aria-label": "React flow demo", children: _jsx(Background, {}) }) })); +}; +export const CompassReactFlowDemo = () => (_jsx("div", { style: { height: "400px" }, children: _jsx(ReactFlowProvider, { children: _jsx(AddNodeOnEdgeDrop, {}) }) })); +//# sourceMappingURL=CompassReactFlowDemo.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.d.ts new file mode 100644 index 0000000000..21c7e7a9a8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.d.ts @@ -0,0 +1,3 @@ +import React from "react"; +export declare const RHAiExperienceIcon: React.FunctionComponent; +//# sourceMappingURL=RHAiExperienceIcon.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.js new file mode 100644 index 0000000000..665a62c66b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAiExperienceIcon.js @@ -0,0 +1,5 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +export const RHAiExperienceIcon = () => { + return (_jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", width: "1em", height: "1em", viewBox: "0 0 32 32", children: [_jsx("g", { id: "uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4", children: _jsx("rect", { width: "32", height: "32", fill: "none" }) }), _jsxs("g", { id: "uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e", children: [_jsx("path", { fill: "var(--pf-t--global--icon--color--regular)", d: "M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z" }), _jsx("path", { fill: "var(--pf-t--global--icon--color--regular)", d: "M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z" })] })] })); +}; +//# sourceMappingURL=RHAiExperienceIcon.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.d.ts new file mode 100644 index 0000000000..1ebfc5ae8e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.d.ts @@ -0,0 +1,3 @@ +import React from "react"; +export declare const RHAutomationsLogo: React.FunctionComponent; +//# sourceMappingURL=RHAutomationsLogo.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.js new file mode 100644 index 0000000000..2c86c8e96b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHAutomationsLogo.js @@ -0,0 +1,5 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +export const RHAutomationsLogo = () => { + return (_jsx("div", { id: "brand-logo", children: _jsxs("svg", { "aria-hidden": "true", width: "192", height: "39", viewBox: "0 0 192 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M33.3807 22.9001C36.6672 22.9001 41.4287 22.2167 41.4287 18.2926C41.4287 17.9865 41.4209 17.6883 41.3472 17.3901L39.3885 8.85069C38.9336 6.97444 38.5392 6.11944 35.2501 4.47014C32.7023 3.16125 27.1468 1 25.5035 1C23.9733 1 23.5211 2.98972 21.7069 2.98972C19.8927 2.98972 18.6465 1.51194 17.0032 1.51194C15.3599 1.51194 14.395 2.59389 13.6036 4.81056C13.6036 4.81056 11.3924 11.0674 11.1085 11.9778C11.0506 12.1493 11.0506 12.3393 11.0506 12.4897C11.0506 14.9228 20.5921 22.9001 33.3833 22.9001M41.9414 19.8839C42.3963 22.0451 42.3963 22.2721 42.3963 22.5571C42.3963 26.2542 38.2579 28.3019 32.818 28.3019C20.5185 28.3019 9.74918 21.0767 9.74918 16.3003C9.74918 15.5614 9.92008 14.8779 10.1462 14.366C5.72383 14.5929 0 15.3899 0 20.4539C0 28.7585 19.6114 39 35.1396 39C47.0421 39 50.0447 33.5956 50.0447 29.3285C50.0447 25.9718 47.1552 22.1612 41.9388 19.8839", fill: "#EE0000" }), _jsx("path", { d: "M41.9386 19.8864C42.3935 22.0477 42.3935 22.2746 42.3935 22.5596C42.3935 26.2567 38.255 28.3045 32.8152 28.3045C20.5157 28.3045 9.74634 21.0792 9.74634 16.3028C9.74634 15.5639 9.91724 14.8804 10.1434 14.3685L11.1083 11.9777C11.0504 12.1492 11.0504 12.3392 11.0504 12.4896C11.0504 14.9227 20.5919 22.9 33.3831 22.9C36.6696 22.9 41.4312 22.2165 41.4312 18.2925C41.4312 17.9864 41.4233 17.6882 41.3496 17.39L41.9412 19.8864H41.9386Z", fill: "black" }), _jsx("path", { d: "M75.764 16V1.29995H82.295C83.261 1.29995 84.115 1.48895 84.857 1.86695C85.599 2.24495 86.173 2.76995 86.579 3.44195C86.999 4.09995 87.209 4.86995 87.209 5.75195C87.209 6.70395 86.943 7.53695 86.411 8.25095C85.893 8.95095 85.186 9.46195 84.29 9.78395L87.398 16H84.605L81.77 10.12H78.284V16H75.764ZM78.284 8.10395H82.064C82.848 8.10395 83.478 7.89395 83.954 7.47395C84.43 7.03995 84.668 6.47295 84.668 5.77295C84.668 5.05895 84.43 4.49195 83.954 4.07195C83.478 3.63795 82.848 3.42095 82.064 3.42095H78.284V8.10395Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M93.9392 16.21C92.9312 16.21 92.0212 15.972 91.2092 15.496C90.3972 15.006 89.7532 14.3549 89.2772 13.5429C88.8012 12.7169 88.5632 11.7859 88.5632 10.75C88.5632 9.71395 88.7872 8.78995 89.2352 7.97795C89.6832 7.16595 90.2922 6.52195 91.0622 6.04595C91.8462 5.55595 92.7142 5.31095 93.6662 5.31095C94.6462 5.31095 95.5072 5.54895 96.2492 6.02495C97.0052 6.50095 97.5932 7.14495 98.0132 7.95695C98.4472 8.76895 98.6642 9.69995 98.6642 10.75V11.3169H90.8942C90.9782 11.8909 91.1602 12.4019 91.4402 12.8499C91.7342 13.2839 92.1052 13.627 92.5532 13.879C93.0152 14.1309 93.5122 14.257 94.0442 14.257C94.5342 14.257 94.9962 14.173 95.4302 14.005C95.8782 13.823 96.2492 13.578 96.5432 13.2699L98.0972 14.677C97.4532 15.209 96.7952 15.601 96.1232 15.853C95.4652 16.091 94.7372 16.21 93.9392 16.21ZM90.9152 9.84695H96.4172C96.3332 9.34295 96.1582 8.89495 95.8922 8.50295C95.6402 8.11095 95.3182 7.80295 94.9262 7.57895C94.5482 7.35495 94.1282 7.24295 93.6662 7.24295C93.2042 7.24295 92.7772 7.35495 92.3852 7.57895C92.0072 7.78895 91.6922 8.08995 91.4402 8.48195C91.1882 8.87395 91.0132 9.32895 90.9152 9.84695Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M105.388 16.1049C104.506 16.1049 103.708 15.867 102.994 15.391C102.28 14.901 101.706 14.257 101.272 13.459C100.852 12.6469 100.642 11.7439 100.642 10.75C100.642 9.74195 100.859 8.83895 101.293 8.04095C101.727 7.22895 102.315 6.58495 103.057 6.10895C103.813 5.63295 104.646 5.39495 105.556 5.39495C106.158 5.39495 106.718 5.51395 107.236 5.75195C107.768 5.97595 108.23 6.31195 108.622 6.75995V0.94295L110.995 0.522949V16H108.643V14.6139C108.265 15.0899 107.796 15.461 107.236 15.727C106.676 15.979 106.06 16.1049 105.388 16.1049ZM106.123 14.11C106.627 14.11 107.096 14.012 107.53 13.816C107.964 13.606 108.328 13.319 108.622 12.955V8.52395C108.314 8.15995 107.943 7.87995 107.509 7.68395C107.075 7.48795 106.613 7.38995 106.123 7.38995C105.521 7.38995 104.982 7.53695 104.506 7.83095C104.044 8.11095 103.673 8.50295 103.393 9.00695C103.113 9.51095 102.973 10.092 102.973 10.75C102.973 11.38 103.113 11.9539 103.393 12.4719C103.673 12.976 104.044 13.375 104.506 13.669C104.982 13.9629 105.521 14.11 106.123 14.11Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M118.848 16V1.29995H121.368V7.47395H128.676V1.29995H131.196V16H128.676V9.72095H121.368V16H118.848Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M137.314 16.189C136.586 16.189 135.935 16.056 135.361 15.79C134.801 15.51 134.36 15.132 134.038 14.656C133.73 14.166 133.576 13.606 133.576 12.976C133.576 12.346 133.737 11.7999 134.059 11.3379C134.395 10.8759 134.864 10.519 135.466 10.267C136.068 10.015 136.782 9.88895 137.608 9.88895C138.098 9.88895 138.581 9.94495 139.057 10.0569C139.533 10.1549 139.995 10.323 140.443 10.561V9.38495C140.443 8.68495 140.24 8.15995 139.834 7.80995C139.442 7.45995 138.84 7.28495 138.028 7.28495C137.594 7.28495 137.125 7.35495 136.621 7.49495C136.131 7.62095 135.578 7.82395 134.962 8.10395L134.122 6.38195C135.662 5.66795 137.118 5.31095 138.49 5.31095C139.862 5.31095 140.919 5.64695 141.661 6.31895C142.417 6.97695 142.795 7.91495 142.795 9.13295V16H140.443V14.908C139.995 15.342 139.512 15.6639 138.994 15.874C138.476 16.084 137.916 16.189 137.314 16.189ZM135.802 12.934C135.802 13.424 135.998 13.809 136.39 14.089C136.782 14.3689 137.307 14.509 137.965 14.509C138.441 14.509 138.882 14.439 139.288 14.299C139.708 14.1449 140.093 13.9209 140.443 13.627V11.926C140.079 11.7579 139.701 11.6319 139.309 11.5479C138.917 11.464 138.49 11.422 138.028 11.422C137.342 11.422 136.796 11.5549 136.39 11.8209C135.998 12.0869 135.802 12.458 135.802 12.934Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M149.897 16.21C148.833 16.21 148.028 15.9649 147.482 15.4749C146.936 14.971 146.663 14.236 146.663 13.2699V7.36895H144.563V5.47895H146.663V2.58095L149.036 2.07695V5.47895H151.955V7.36895H149.036V12.745C149.036 13.2629 149.148 13.634 149.372 13.858C149.596 14.068 149.974 14.1729 150.506 14.1729C150.744 14.1729 150.961 14.1589 151.157 14.1309C151.367 14.089 151.626 14.0189 151.934 13.9209V15.9159C151.64 16.0139 151.304 16.084 150.926 16.1259C150.562 16.1819 150.219 16.21 149.897 16.21Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M73.916 38L79.964 23.2999H83.471L89.456 38H86.159L84.668 34.1359H78.599L77.087 38H73.916ZM79.544 31.6999H83.744L81.644 26.2819L79.544 31.6999Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M94.4493 38.2099C93.6093 38.2099 92.8603 38.028 92.2023 37.664C91.5583 37.286 91.0473 36.768 90.6693 36.11C90.3053 35.452 90.1233 34.6959 90.1233 33.8419V27.059H93.0003V33.422C93.0003 34.122 93.2033 34.682 93.6093 35.102C94.0293 35.522 94.5823 35.7319 95.2683 35.7319C96.2483 35.7319 97.0043 35.368 97.5363 34.6399V27.059H100.413V38H97.5363V37.118C96.6963 37.846 95.6673 38.2099 94.4493 38.2099Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M107.842 38.1679C106.625 38.1679 105.7 37.895 105.07 37.3489C104.454 36.7889 104.146 35.9769 104.146 34.9129V29.4529H101.899V27.059H104.146V24.2659L107.024 23.6149V27.059H110.153V29.4529H107.024V34.325C107.024 34.829 107.136 35.193 107.36 35.417C107.583 35.6269 107.975 35.7319 108.535 35.7319C108.815 35.7319 109.068 35.7179 109.292 35.6899C109.529 35.6479 109.789 35.5779 110.069 35.4799V37.853C109.775 37.951 109.404 38.028 108.956 38.084C108.522 38.1399 108.15 38.1679 107.842 38.1679Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M116.767 38.2099C115.675 38.2099 114.688 37.958 113.806 37.4539C112.924 36.9499 112.224 36.271 111.706 35.417C111.188 34.563 110.929 33.604 110.929 32.54C110.929 31.476 111.188 30.517 111.706 29.663C112.224 28.795 112.924 28.1089 113.806 27.6049C114.688 27.101 115.675 26.8489 116.767 26.8489C117.859 26.8489 118.846 27.101 119.728 27.6049C120.61 28.1089 121.31 28.795 121.828 29.663C122.346 30.517 122.605 31.476 122.605 32.54C122.605 33.604 122.346 34.563 121.828 35.417C121.31 36.271 120.61 36.9499 119.728 37.4539C118.846 37.958 117.859 38.2099 116.767 38.2099ZM116.767 35.7109C117.341 35.7109 117.852 35.5709 118.3 35.291C118.762 35.011 119.126 34.6329 119.392 34.1569C119.672 33.6669 119.812 33.128 119.812 32.54C119.812 31.938 119.672 31.399 119.392 30.923C119.126 30.447 118.762 30.069 118.3 29.7889C117.852 29.4949 117.341 29.3479 116.767 29.3479C116.207 29.3479 115.696 29.4949 115.234 29.7889C114.772 30.069 114.408 30.447 114.142 30.923C113.876 31.399 113.743 31.938 113.743 32.54C113.743 33.128 113.876 33.6669 114.142 34.1569C114.408 34.6329 114.772 35.011 115.234 35.291C115.696 35.5709 116.207 35.7109 116.767 35.7109Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M124.373 38V27.059H127.25V27.8989C128.034 27.1989 128.986 26.8489 130.106 26.8489C130.82 26.8489 131.457 26.996 132.017 27.2899C132.577 27.57 133.039 27.969 133.403 28.4869C134.313 27.3949 135.517 26.8489 137.015 26.8489C137.841 26.8489 138.562 27.038 139.178 27.416C139.808 27.78 140.298 28.291 140.648 28.9489C141.012 29.5929 141.194 30.3489 141.194 31.2169V38H138.338V31.6369C138.338 30.9229 138.149 30.3629 137.771 29.9569C137.393 29.5369 136.889 29.327 136.259 29.327C135.377 29.327 134.677 29.6909 134.159 30.4189C134.173 30.5449 134.187 30.6709 134.201 30.7969C134.215 30.9229 134.222 31.063 134.222 31.2169V38H131.345V31.6369C131.345 30.9229 131.156 30.3629 130.778 29.9569C130.414 29.5369 129.917 29.327 129.287 29.327C128.405 29.327 127.726 29.6629 127.25 30.3349V38H124.373Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M146.87 38.1889C146.086 38.1889 145.393 38.049 144.791 37.769C144.189 37.475 143.72 37.076 143.384 36.5719C143.048 36.0679 142.88 35.4869 142.88 34.8289C142.88 33.7789 143.272 32.9669 144.056 32.393C144.854 31.805 145.946 31.511 147.332 31.511C148.284 31.511 149.18 31.6579 150.02 31.952V31.1539C150.02 29.8799 149.25 29.243 147.71 29.243C147.248 29.243 146.751 29.32 146.219 29.4739C145.687 29.6139 145.071 29.8379 144.371 30.146L143.321 28.025C144.189 27.6329 145.015 27.3389 145.799 27.143C146.597 26.947 147.395 26.8489 148.193 26.8489C149.663 26.8489 150.804 27.2059 151.616 27.92C152.442 28.62 152.855 29.6139 152.855 30.9019V38H150.02V37.2229C149.572 37.5589 149.089 37.804 148.571 37.958C148.053 38.1119 147.486 38.1889 146.87 38.1889ZM145.61 34.7659C145.61 35.186 145.792 35.5219 146.156 35.7739C146.52 36.0119 147.003 36.131 147.605 36.131C148.571 36.131 149.376 35.893 150.02 35.417V33.8209C149.32 33.541 148.55 33.401 147.71 33.401C147.052 33.401 146.534 33.527 146.156 33.7789C145.792 34.0169 145.61 34.346 145.61 34.7659Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M159.912 38.1679C158.694 38.1679 157.77 37.895 157.14 37.3489C156.524 36.7889 156.216 35.9769 156.216 34.9129V29.4529H153.969V27.059H156.216V24.2659L159.093 23.6149V27.059H162.222V29.4529H159.093V34.325C159.093 34.829 159.205 35.193 159.429 35.417C159.653 35.6269 160.045 35.7319 160.605 35.7319C160.885 35.7319 161.137 35.7179 161.361 35.6899C161.599 35.6479 161.858 35.5779 162.138 35.4799V37.853C161.844 37.951 161.473 38.028 161.025 38.084C160.591 38.1399 160.22 38.1679 159.912 38.1679Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M163.625 38V27.059H166.502V38H163.625ZM165.053 25.757C164.605 25.757 164.22 25.596 163.898 25.274C163.576 24.952 163.415 24.5669 163.415 24.1189C163.415 23.6569 163.576 23.2719 163.898 22.9639C164.22 22.6419 164.605 22.4809 165.053 22.4809C165.515 22.4809 165.9 22.6419 166.208 22.9639C166.53 23.2719 166.691 23.6569 166.691 24.1189C166.691 24.5669 166.53 24.952 166.208 25.274C165.9 25.596 165.515 25.757 165.053 25.757Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M174.086 38.2099C172.994 38.2099 172.007 37.958 171.125 37.4539C170.243 36.9499 169.543 36.271 169.025 35.417C168.507 34.563 168.248 33.604 168.248 32.54C168.248 31.476 168.507 30.517 169.025 29.663C169.543 28.795 170.243 28.1089 171.125 27.6049C172.007 27.101 172.994 26.8489 174.086 26.8489C175.178 26.8489 176.165 27.101 177.047 27.6049C177.929 28.1089 178.629 28.795 179.147 29.663C179.665 30.517 179.924 31.476 179.924 32.54C179.924 33.604 179.665 34.563 179.147 35.417C178.629 36.271 177.929 36.9499 177.047 37.4539C176.165 37.958 175.178 38.2099 174.086 38.2099ZM174.086 35.7109C174.66 35.7109 175.171 35.5709 175.619 35.291C176.081 35.011 176.445 34.6329 176.711 34.1569C176.991 33.6669 177.131 33.128 177.131 32.54C177.131 31.938 176.991 31.399 176.711 30.923C176.445 30.447 176.081 30.069 175.619 29.7889C175.171 29.4949 174.66 29.3479 174.086 29.3479C173.526 29.3479 173.015 29.4949 172.553 29.7889C172.091 30.069 171.727 30.447 171.461 30.923C171.195 31.399 171.062 31.938 171.062 32.54C171.062 33.128 171.195 33.6669 171.461 34.1569C171.727 34.6329 172.091 35.011 172.553 35.291C173.015 35.5709 173.526 35.7109 174.086 35.7109Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("path", { d: "M181.693 38V27.059H184.57V27.962C185.396 27.2199 186.418 26.8489 187.636 26.8489C188.49 26.8489 189.239 27.038 189.883 27.416C190.541 27.78 191.052 28.291 191.416 28.9489C191.78 29.5929 191.962 30.3489 191.962 31.2169V38H189.085V31.6369C189.085 30.9229 188.882 30.3629 188.476 29.9569C188.07 29.5369 187.517 29.327 186.817 29.327C186.327 29.327 185.893 29.425 185.515 29.621C185.137 29.803 184.822 30.0689 184.57 30.4189V38H181.693Z", fill: "var(--pf-t--global--text--color--regular)" }), _jsx("line", { x1: "66.5", y1: "1.5", x2: "66.5", y2: "38.5", stroke: "var(--pf-t--global--text--color--regular)", strokeLinecap: "round" })] }) })); +}; +//# sourceMappingURL=RHAutomationsLogo.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.d.ts new file mode 100644 index 0000000000..33b24c7b0d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.d.ts @@ -0,0 +1,3 @@ +import React from "react"; +export declare const RHServerStackIcon: React.FunctionComponent; +//# sourceMappingURL=RHServerStackIcon.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.js new file mode 100644 index 0000000000..ecd4522c7d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/assets/RHServerStackIcon.js @@ -0,0 +1,5 @@ +import { jsx as _jsx } from "react/jsx-runtime"; +export const RHServerStackIcon = () => { + return (_jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", className: "pf-v6-svg", children: _jsx("path", { fill: "var(--pf-t--global--icon--color--regular)", d: "M28.5 1h-25C2.673 1 2 1.673 2 2.5v27c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM28 29H4V3h24v26ZM7 8a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H8a1 1 0 0 1-1-1Zm0 16a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H8a1 1 0 0 1-1-1Zm0-8a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H8a1 1 0 0 1-1-1Zm14.38-7.987a1.626 1.626 0 1 1 3.251.001 1.626 1.626 0 0 1-3.251-.001Zm0 8a1.626 1.626 0 1 1 3.251.001 1.626 1.626 0 0 1-3.251-.001Zm-.005 8.002a1.626 1.626 0 1 1 3.251.001 1.626 1.626 0 0 1-3.251-.001Z" }) })); +}; +//# sourceMappingURL=RHServerStackIcon.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.d.ts new file mode 100644 index 0000000000..2a8c501fce --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.d.ts @@ -0,0 +1,3 @@ +export declare const ClusterInventoryCard: React.FunctionComponent; +export default ClusterInventoryCard; +//# sourceMappingURL=AnimationsOverviewClusterInventory.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.js new file mode 100644 index 0000000000..0de1652bdd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewClusterInventory.js @@ -0,0 +1,42 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState } from "react"; +import { Card, CardHeader, CardTitle, CardBody, CardFooter, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, FlexItem, Button, Icon, CompassPanel, } from "@patternfly/react-core"; +import ListIcon from "@patternfly/react-icons/dist/esm/icons/list-icon"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; +import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon"; +import CubeIcon from "@patternfly/react-icons/dist/esm/icons/cube-icon"; +import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon"; +export const ClusterInventoryCard = () => { + const [isKebabOpen, setIsKebabOpen] = useState(false); + // Data for the list items in the card body + const inventoryItems = [ + { icon: _jsx(CubesIcon, {}), text: "15 Deployments" }, + { icon: _jsx(CubesIcon, {}), text: "15 Deployments" }, + { icon: _jsx(CubesIcon, {}), text: "15 Deployments" }, + { icon: _jsx(CubesIcon, {}), text: "15 Deployments" }, + { icon: _jsx(CubeIcon, {}), text: "126 pods" }, + ]; + // Items for the kebab dropdown menu + const dropdownItems = [ + _jsx(DropdownItem, { children: "Action 1" }, "action1"), + _jsx(DropdownItem, { children: "Action 2" }, "action2"), + _jsx(DropdownItem, { children: "Action 3" }, "action3"), + ]; + // The kebab menu toggle button + const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Cluster inventory card options", children: _jsx(EllipsisVIcon, {}) })); + return ( + // To match the dark theme in your screenshot, we wrap the card in a div with a dark background. + // The `isPlain` and `isFlat` props on the Card remove its default background and shadow so it blends in. + _jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader + // We use a Flex layout in the header to position the title and actions + , { + // We use a Flex layout in the header to position the title and actions + actions: { + actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), + hasNoOffset: false, + className: "", + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(ListIcon, {}), _jsx("span", { children: " Cluster inventory" })] }) }) }), _jsx(CardBody, { children: _jsx(Flex, { direction: { default: "column" }, spaceItems: { default: "spaceItemsMd" }, children: inventoryItems.map((item, index) => (_jsx(FlexItem, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [_jsx(FlexItem, { children: _jsx(Icon, { children: item.icon }) }), _jsx(FlexItem, { children: item.text })] }) }, index))) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Cluster inventory page" }) })] }) })); +}; +ClusterInventoryCard.displayName = "ClusterInventoryCard"; +export default ClusterInventoryCard; +//# sourceMappingURL=AnimationsOverviewClusterInventory.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.d.ts new file mode 100644 index 0000000000..2d62746bb9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.d.ts @@ -0,0 +1,3 @@ +export declare const MemoryUtilizationCard: React.FunctionComponent; +export default MemoryUtilizationCard; +//# sourceMappingURL=AnimationsOverviewMemoryUtilization.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.js new file mode 100644 index 0000000000..4559cfdc26 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewMemoryUtilization.js @@ -0,0 +1,41 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState } from "react"; +import { Card, CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, CardHeader, DropdownList, FlexItem, CompassPanel, } from "@patternfly/react-core"; +import { ChartDonutThreshold, ChartDonutUtilization, } from "@patternfly/react-charts/dist/esm/victory/components"; +import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; +import TachometerAltIcon from "@patternfly/react-icons/dist/esm/icons/tachometer-alt-icon"; +export const MemoryUtilizationCard = () => { + const [isKebabOpen, setIsKebabOpen] = useState(false); + const dropdownItems = [ + _jsx(DropdownItem, { children: "Action 1" }, "action1"), + _jsx(DropdownItem, { children: "Action 2" }, "action2"), + _jsx(DropdownItem, { children: "Action 3" }, "action3"), + ]; + // The kebab menu toggle button + const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Memory usage card options", children: _jsx(EllipsisVIcon, {}) })); + return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), + hasNoOffset: false, + className: "", + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(TachometerAltIcon, {}), _jsx("span", { children: "Memory usage" })] }) }) }), _jsx(CardBody, { children: _jsxs(Flex, { direction: { default: "column" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsx(ChartDonutThreshold, { ariaDesc: "Mock memory utilization", ariaTitle: "Mock memory utilization chart", constrainToVisibleArea: true, data: [ + { x: "Warning at 60%", y: 60 }, + { x: "Danger at 90%", y: 90 }, + ], height: 200, labels: ({ datum }) => (datum.x ? datum.x : null), padding: { + bottom: 0, + left: 10, + right: 10, + top: 0, + }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "Memory capacity", y: 95 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "95%", subTitle: "CPU", thresholds: [{ value: 60 }, { value: 90 }] }) }) }), _jsx(FlexItem, { children: _jsx(ChartDonutThreshold, { ariaDesc: "Mock memory utilization", ariaTitle: "Mock memory utilization chart", constrainToVisibleArea: true, data: [ + { x: "Warning at 60%", y: 60 }, + { x: "Danger at 90%", y: 90 }, + ], height: 200, labels: ({ datum }) => (datum.x ? datum.x : null), padding: { + bottom: 0, + left: 10, + right: 10, + top: 0, + }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "GPU capacity", y: 55 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "55%", subTitle: "GPU", thresholds: [{ value: 60 }, { value: 90 }] }) }) })] }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Memory usage page" }) })] }) })); +}; +MemoryUtilizationCard.displayName = "MemoryUtilizationCard"; +export default MemoryUtilizationCard; +//# sourceMappingURL=AnimationsOverviewMemoryUtilization.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.d.ts new file mode 100644 index 0000000000..79e3c46f27 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.d.ts @@ -0,0 +1,3 @@ +export declare const NetworkActivityCard: React.FunctionComponent; +export default NetworkActivityCard; +//# sourceMappingURL=AnimationsOverviewNetworkActivity.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.js new file mode 100644 index 0000000000..63a3c20aba --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewNetworkActivity.js @@ -0,0 +1,52 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState } from "react"; +import { Card, CardHeader, CardTitle, CardBody, Dropdown, DropdownList, DropdownItem, MenuToggle, Flex, CompassPanel, } from "@patternfly/react-core"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; +import NetworkIcon from "@patternfly/react-icons/dist/esm/icons/network-icon"; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, } from "@patternfly/react-charts/dist/esm/victory/components"; +export const NetworkActivityCard = () => { + const [isKebabOpen, setIsKebabOpen] = useState(false); + // Data for the chart + const chartData = [ + { name: "Network Activity", x: "1", y: 10 }, + { name: "Network Activity", x: "2", y: 8 }, + { name: "Network Activity", x: "3", y: 6 }, + { name: "Network Activity", x: "4", y: 5 }, + { name: "Network Activity", x: "5", y: 5.5 }, + { name: "Network Activity", x: "6", y: 5 }, + { name: "Network Activity", x: "7", y: 4 }, + { name: "Network Activity", x: "8", y: 4.5 }, + { name: "Network Activity", x: "9", y: 4.5 }, + { name: "Network Activity", x: "10", y: 0 }, + ]; + // Items for the kebab dropdown menu + const dropdownItems = [ + _jsx(DropdownItem, { children: "View details" }, "action1"), + _jsx(DropdownItem, { children: "Refresh data" }, "action2"), + _jsx(DropdownItem, { children: "Settings" }, "action3"), + ]; + // The kebab menu toggle button + const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Network activity card options", children: _jsx(EllipsisVIcon, {}) })); + return ( + // To match the dark theme, we wrap the card in a div with a dark background. + // The `isPlain` and `isFlat` props on the Card remove its default styling. + _jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), + hasNoOffset: false, + className: "", + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(NetworkIcon, {}), _jsx("span", { children: "Network activity" })] }) }) }), _jsx(CardBody, { children: _jsxs(Chart, { ariaDesc: "Network activity chart", ariaTitle: "Network activity chart", containerComponent: _jsx(ChartVoronoiContainer, { labels: ({ datum }) => `${datum.name}: ${datum.y}`, constrainToVisibleArea: true }), height: 250, padding: { + bottom: 50, + left: 50, + right: 20, + top: 20, + }, themeColor: ChartThemeColor.multi, width: 400, children: [_jsx(ChartAxis, {}), _jsx(ChartAxis, { dependentAxis: true, showGrid: true }), _jsx(ChartGroup, { children: _jsx(ChartArea, { data: chartData, interpolation: "catmullRom" // This creates the smooth curve + , style: { + data: { + stroke: "#0066CC", // Line color + fill: "rgba(0, 102, 204, 0.4)", // Area fill color with opacity + }, + } }) })] }) })] }) })); +}; +NetworkActivityCard.displayName = "NetworkActivityCard"; +export default NetworkActivityCard; +//# sourceMappingURL=AnimationsOverviewNetworkActivity.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.d.ts new file mode 100644 index 0000000000..d4c317ca2a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.d.ts @@ -0,0 +1,3 @@ +export declare const StorageCard: React.FunctionComponent; +export default StorageCard; +//# sourceMappingURL=AnimationsOverviewStorage.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.js new file mode 100644 index 0000000000..44525cf959 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/AnimationsOverviewStorage.js @@ -0,0 +1,33 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState } from "react"; +import { CardTitle, CardBody, CardFooter, Flex, Button, Dropdown, DropdownItem, MenuToggle, Card, CardHeader, DropdownList, FlexItem, CompassPanel, } from "@patternfly/react-core"; +import { ChartDonutThreshold, ChartDonutUtilization, } from "@patternfly/react-charts/dist/esm/victory/components"; +import StorageDomainIcon from "@patternfly/react-icons/dist/esm/icons/storage-domain-icon"; +import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon"; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; +export const StorageCard = () => { + const [isKebabOpen, setIsKebabOpen] = useState(false); + const dropdownItems = [ + _jsx(DropdownItem, { children: "Action 1" }, "action1"), + _jsx(DropdownItem, { children: "Action 2" }, "action2"), + _jsx(DropdownItem, { children: "Action 3" }, "action3"), + ]; + // The kebab menu toggle button + const kebabToggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => setIsKebabOpen(!isKebabOpen), isExpanded: isKebabOpen, "aria-label": "Storage card options", children: _jsx(EllipsisVIcon, {}) })); + return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isFullHeight: true, isPlain: true, children: [_jsx(CardHeader, { actions: { + actions: (_jsx(Dropdown, { isOpen: isKebabOpen, onSelect: () => setIsKebabOpen(false), onOpenChange: (isOpen) => setIsKebabOpen(isOpen), toggle: kebabToggle, popperProps: { position: "right" }, children: _jsx(DropdownList, { children: dropdownItems }) })), + hasNoOffset: false, + className: "", + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, children: [_jsx(StorageDomainIcon, {}), _jsx("span", { children: "Storage" })] }) }) }), _jsx(CardBody, { children: _jsx(Flex, { direction: { default: "row" }, justifyContent: { default: "justifyContentCenter" }, alignItems: { default: "alignItemsCenter" }, children: _jsx(FlexItem, { children: _jsx(ChartDonutThreshold, { ariaDesc: "Mock storage capacity", ariaTitle: "Mock donut utilization chart", constrainToVisibleArea: true, data: [ + { x: "Warning at 60%", y: 60 }, + { x: "Danger at 90%", y: 90 }, + ], height: 200, labels: ({ datum }) => (datum.x ? datum.x : null), padding: { + bottom: 0, + left: 10, + right: 10, + top: 0, + }, width: 200, children: _jsx(ChartDonutUtilization, { data: { x: "Storage capacity", y: 80 }, labels: ({ datum }) => datum.x ? `${datum.x}: ${datum.y}%` : null, title: "80%", subTitle: "Available", thresholds: [{ value: 60 }, { value: 90 }] }) }) }) }) }), _jsx(CardFooter, { children: _jsx(Button, { variant: "link", isInline: true, icon: _jsx(ArrowRightIcon, {}), iconPosition: "end", component: "a", href: "#", children: "Storage page" }) })] }) })); +}; +StorageCard.displayName = "StorageCard"; +export default StorageCard; +//# sourceMappingURL=AnimationsOverviewStorage.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.d.ts new file mode 100644 index 0000000000..8e80ccb067 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.d.ts @@ -0,0 +1,3 @@ +export declare const ClusterDetailsCard: React.FunctionComponent; +export default ClusterDetailsCard; +//# sourceMappingURL=ClusterDetailsCard.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.js new file mode 100644 index 0000000000..401137036f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/ClusterDetailsCard.js @@ -0,0 +1,8 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { CompassPanel, Card, CardTitle, CardBody, CardFooter, Title, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Divider, } from '@patternfly/react-core'; +export const ClusterDetailsCard = () => { + return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardTitle, { children: _jsx(Title, { id: "cluster-details-title", headingLevel: "h1", size: "xl", children: "Cluster Details" }) }), _jsx(CardBody, { children: _jsxs(DescriptionList, { "aria-labelledby": 'cluster-details-title', children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster API Address" }), _jsx(DescriptionListDescription, { children: _jsx("a", { href: "#", children: "https://api1.devcluster.openshift.com" }) })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Cluster ID" }), _jsx(DescriptionListDescription, { children: "63b97ac1-b850-41d9-8820-239becde9e86" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Provide" }), _jsx(DescriptionListDescription, { children: "AWS" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "OpenShift Version" }), _jsx(DescriptionListDescription, { children: "4.5.0.ci-2020-06-16-015028" })] }), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "Update Channel" }), _jsx(DescriptionListDescription, { children: "stable-4.5" })] })] }) }), _jsx(Divider, {}), _jsx(CardFooter, { children: _jsx("a", { href: "#", children: "View Settings" }) })] }) })); +}; +ClusterDetailsCard.displayName = 'ClusterDetailsCard'; +export default ClusterDetailsCard; +//# sourceMappingURL=ClusterDetailsCard.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.d.ts new file mode 100644 index 0000000000..f8ce137c5b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.d.ts @@ -0,0 +1,3 @@ +export declare const RecentActivityCard: React.FunctionComponent; +export default RecentActivityCard; +//# sourceMappingURL=RecentActivityCard.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.js new file mode 100644 index 0000000000..7f5aff2e20 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/cards/RecentActivityCard.js @@ -0,0 +1,52 @@ +import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { CompassPanel, Card, CardHeader, CardTitle, CardBody, Flex, Dropdown, MenuToggle, ProgressStep, ProgressStepper, Spinner, Button, } from '@patternfly/react-core'; +import PortIcon from '@patternfly/react-icons/dist/esm/icons/port-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +export const RecentActivityCard = () => { + const activityData = [ + { + id: 1, + name: 'frontend-deployment', + project: 'automation-platform', + progress: ['success', 'success', 'success'], + }, + { + id: 2, + name: 'backend-deployment', + project: 'automation-platform', + progress: ['success', 'pending', 'default'], + }, + { + id: 3, + name: 'database-deployment', + project: 'automation-platform', + progress: ['success', 'success', 'danger'], + }, + { + id: 4, + name: 'frontend-deployment', + project: 'ci-dashboard', + progress: ['success', 'warning', 'pending'], + }, + ]; + const iconMap = { + success: _jsx(CheckCircleIcon, {}), + info: _jsx(ResourcesFullIcon, {}), + pending: _jsx(Spinner, { isInline: true }), + danger: _jsx(ExclamationCircleIcon, {}), + warning: _jsx(ExclamationTriangleIcon, {}), + }; + return (_jsx(CompassPanel, { hasNoPadding: true, isFullHeight: true, children: _jsxs(Card, { isPlain: true, isFullHeight: true, children: [_jsx(CardHeader, { actions: { + actions: (_jsx(Dropdown, { isOpen: false, onSelect: () => { }, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => { }, isExpanded: false, "aria-label": "Recent activity card options", children: _jsx(EllipsisVIcon, {}) })), popperProps: { position: 'right' } })), + hasNoOffset: false, + className: '', + }, children: _jsx(CardTitle, { children: _jsxs(Flex, { alignItems: { default: 'alignItemsCenter' }, children: [_jsx(PortIcon, {}), _jsx("span", { children: "Recent activity" })] }) }) }), _jsx(CardBody, { children: _jsxs(Table, { "aria-label": "Recent activity table", variant: "compact", className: "pf-m-plain", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { width: 30, children: "Name" }), _jsx(Th, { width: 30, children: "Project" }), _jsx(Th, { width: 30, children: "Progress" }), _jsx(Th, { width: 10 })] }) }), _jsx(Tbody, { children: activityData.map((activity, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.name }) }), _jsx(Td, { children: _jsx(Button, { variant: "link", isInline: true, component: "a", href: "#", children: activity.project }) }), _jsx(Td, { children: _jsx(ProgressStepper, { isCompact: true, "aria-label": `Progress for activity ${activity.name} in project ${activity.project}`, children: activity.progress.map((stepVariant, stepIndex) => (_jsx(ProgressStep, { id: `progress-step-${rowIndex}-${stepVariant}-${stepIndex}`, variant: stepVariant, icon: iconMap[stepVariant], "aria-label": `Step ${stepIndex + 1} is ${stepVariant}` }, stepIndex))) }) }), _jsx(Td, { isActionCell: true, children: _jsx(Dropdown, { isOpen: false, onSelect: () => { }, onOpenChange: () => { }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, variant: "plain", onClick: () => { }, isExpanded: false, "aria-label": `Options for activity ${activity.name} in project ${activity.project}`, children: _jsx(EllipsisVIcon, {}) })), popperProps: { position: 'right' } }) })] }, activity.id))) })] }) })] }) })); +}; +RecentActivityCard.displayName = 'RecentActivityCard'; +export default RecentActivityCard; +//# sourceMappingURL=RecentActivityCard.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.d.ts new file mode 100644 index 0000000000..db1d617902 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.d.ts @@ -0,0 +1,2 @@ +export declare const CompassBasic: React.FunctionComponent; +//# sourceMappingURL=dashboard.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.js new file mode 100644 index 0000000000..f215e10960 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/dashboard.js @@ -0,0 +1,54 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useState } from 'react'; +import { Compass, CompassHeader, CompassContent, CompassPanel, CompassMessageBar, Hero, Tabs, TabsComponent, Tab, TabTitleText, ActionList, ActionListGroup, ActionListItem, Button, Tooltip, Content, Avatar, Dropdown, DropdownItem, DropdownList, Flex, MenuToggle, Grid, GridItem, Icon, SkipToContent } from '@patternfly/react-core'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon'; +import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; +import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; +import { MessageBar } from '@patternfly/chatbot'; +import { RHAutomationsLogo } from './assets/RHAutomationsLogo'; +import { RHAiExperienceIcon } from './assets/RHAiExperienceIcon'; +import AnimationsOverviewClusterInventory from "./cards/AnimationsOverviewClusterInventory"; +import AnimationsOverviewNetworkActivity from "./cards/AnimationsOverviewNetworkActivity"; +import AnimationsOverviewStorage from "./cards/AnimationsOverviewStorage"; +import AnimationsOverviewMemoryUtilization from "./cards/AnimationsOverviewMemoryUtilization"; +import { ClusterDetailsCard } from './cards/ClusterDetailsCard'; +import { RecentActivityCard } from './cards/RecentActivityCard'; +import heroBg from './assets/hero-bg.png'; +import wallpaperDark from './assets/wallpaper-dark.png'; +import wallpaperLight from './assets/wallpaper-light.png'; +import imgAvatar from './assets/avatar.jpg'; +export const CompassBasic = () => { + const [activeTab, setActiveTab] = useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isThinking, setIsThinking] = useState(false); + const navContent = (_jsx(_Fragment, { children: _jsx(CompassPanel, { isPill: true, hasNoPadding: true, children: _jsxs(Tabs, { activeKey: activeTab, isNav: true, onSelect: (_event, tabIndex) => setActiveTab(tabIndex), component: TabsComponent.nav, "aria-label": "Compass global", inset: { default: 'insetXl' }, children: [_jsx(Tab, { eventKey: 0, title: _jsx(TabTitleText, { children: "Dashboard" }) }), _jsx(Tab, { eventKey: 1, title: _jsx(TabTitleText, { children: "Builder" }), isDisabled: true }), _jsx(Tab, { eventKey: 2, title: _jsx(TabTitleText, { children: "Automations" }) }), _jsx(Tab, { eventKey: 3, title: _jsx(TabTitleText, { children: "Approvals" }), isDisabled: true }), _jsx(Tab, { eventKey: 4, title: _jsx(TabTitleText, { children: "Configuration" }) }), _jsx(Tab, { eventKey: 5, title: _jsx(TabTitleText, { children: "Test Page" }) })] }) }) })); + const westContent = (_jsx(CompassPanel, { isPill: true, children: _jsxs(ActionList, { isIconList: true, isVertical: true, children: [_jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Play", children: _jsx(Button, { variant: "plain", icon: _jsx(PlayIcon, {}), "aria-label": "Play", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) })] }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Assistant", children: _jsx(Button, { variant: "plain", icon: _jsx(Icon, { style: { translate: ".05em .1em; scale: 1.1" }, children: _jsx(RHAiExperienceIcon, {}) }), "aria-label": "Assistant", isCircle: true, className: "pf-v6-m-ai-indicator" }) }) }), _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Copy", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedCopy, {}), "aria-label": "Copy", isCircle: true }) }) })] })] }) })); + const userDropdownItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "My profile" }, "group 2 profile"), _jsx(DropdownItem, { children: "User management" }, "group 2 user"), _jsx(DropdownItem, { children: "Logout" }, "group 2 logout")] })); + const onDropdownSelect = () => { + setIsDropdownOpen(false); + }; + const onDropdownToggle = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + const userDropdown = (_jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: () => onDropdownSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), popperProps: { position: "right" }, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: onDropdownToggle, isExpanded: isDropdownOpen, variant: "plain", isCircle: true, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, gap: { default: "gapMd" }, children: ["Aliyah Frazier", _jsx(Avatar, { src: imgAvatar, alt: "", size: "md" })] }) })), children: _jsx(DropdownList, { children: userDropdownItems }) })); + const northContent = _jsx(CompassHeader, { logo: _jsx("a", { href: "#", "aria-label": "Red Hat automations", tabIndex: 0, children: _jsx(RHAutomationsLogo, {}) }), nav: navContent, profile: userDropdown }); + const mainContent = (_jsxs(_Fragment, { children: [_jsx(Hero, { gradientDark: { stop1: '#3d2785', stop2: '#1b0d33', stop3: '#000' }, backgroundSrcDark: heroBg, children: _jsxs(Content, { children: [_jsx("h1", { children: "Automation that does more" }), _jsx("p", { children: "Red\u00A0Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it." }), _jsx(ActionList, { children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Button, { variant: "primary", children: "Upgrade today" }) }), _jsx(ActionListItem, { children: _jsx(Button, { variant: "secondary", children: "Talk to a Red Hatter" }) })] }) })] }) }), _jsx(CompassContent, { id: "main", children: _jsxs(Grid, { hasGutter: true, style: { maxHeight: 'none' }, children: [_jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 4, children: _jsx(ClusterDetailsCard, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewClusterInventory, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 6, lg: 4, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewStorage, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 8, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewMemoryUtilization, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 12, xl: 3, rowSpan: 2, children: _jsx(AnimationsOverviewNetworkActivity, {}) }), _jsx(GridItem, { span: 12, sm: 12, md: 12, lg: 8, xl: 6, rowSpan: 2, children: _jsx(RecentActivityCard, {}) })] }) })] })); + const eastContent = (_jsx(CompassPanel, { isPill: true, children: _jsx(ActionList, { isIconList: true, isVertical: true, children: _jsxs(ActionListGroup, { children: [_jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 2", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 2", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Add", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedPlusSquare, {}), "aria-label": "Add", isCircle: true }) }) }), _jsx(ActionListItem, { children: _jsx(Tooltip, { content: "Help 3", children: _jsx(Button, { variant: "plain", icon: _jsx(OutlinedQuestionCircleIcon, {}), "aria-label": "Help 3", isCircle: true }) }) })] }) }) })); + const handleSendMessage = () => { + setIsThinking(true); + setTimeout(() => { + setIsThinking(false); + }, 10000); // 10 seconds + }; + const southContent = (_jsxs(CompassMessageBar, { children: [_jsx(CompassPanel, { isPill: true, hasNoPadding: true, hasNoBorder: true, children: _jsx(MessageBar, { isCompact: true, onSendMessage: handleSendMessage, alwayShowSendButton: true, hasAttachButton: false, hasAiIndicator: true, isThinking: isThinking }) }), _jsx("div", { className: "pf-v6-screen-reader", "aria-live": "polite", children: isThinking && "AI is thinking..." })] })); + const skipToContentClick = (e) => { + e.preventDefault(); + const mainContent = document.getElementById('main'); + if (mainContent) { + mainContent.focus(); + } + }; + return (_jsxs(_Fragment, { children: [_jsx(SkipToContent, { onClick: skipToContentClick, href: "#main", children: "Skip to content" }), _jsx(Compass, { header: northContent, sidebarStart: westContent, main: mainContent, sidebarEnd: eastContent, footer: southContent, backgroundSrcDark: wallpaperDark, backgroundSrcLight: wallpaperLight })] })); +}; +//# sourceMappingURL=dashboard.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.d.ts b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.d.ts new file mode 100644 index 0000000000..053714deed --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.d.ts @@ -0,0 +1,13 @@ +declare module "*.svg" { + const content: string; + export default content; +} +declare module "*.png" { + const content: string; + export default content; +} +declare module "*.jpg" { + const content: string; + export default content; +} +//# sourceMappingURL=declarations.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.js b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.js new file mode 100644 index 0000000000..af74c5824a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/declarations.js @@ -0,0 +1 @@ +//# sourceMappingURL=declarations.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/about-us.md b/packages/documentation-site/patternfly-docs/content/about-us.md index d4c76f6b91..8fb84786a1 100644 --- a/packages/documentation-site/patternfly-docs/content/about-us.md +++ b/packages/documentation-site/patternfly-docs/content/about-us.md @@ -1,6 +1,7 @@ --- id: About us title: About us +section: Get started --- import './get-started/get-started.css'; diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/a11y-scores.js b/packages/documentation-site/patternfly-docs/content/accessibility/a11y-scores.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/a11y-scores.js rename to packages/documentation-site/patternfly-docs/content/accessibility/a11y-scores.jsx diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-datalist.js b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-datalist.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-datalist.js rename to packages/documentation-site/patternfly-docs/content/accessibility/accessibility-datalist.jsx diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.js b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.jsx similarity index 92% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.js rename to packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.jsx index 8d1db5af5f..083fe730f0 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.js +++ b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import { a11yScores } from './a11y-scores'; -import { capitalize } from '@patternfly/documentation-framework/helpers/capitalize'; +const { capitalize } = require('@patternfly/documentation-framework/helpers/capitalize'); export const AccessibilityScorecard = () => { const columnNames = ['criteria', 'status', 'notes']; diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/develop.md b/packages/documentation-site/patternfly-docs/content/accessibility/develop.md index 642d1995fc..828a46a566 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/develop.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/develop.md @@ -3,7 +3,7 @@ id: Develop title: Develop for accessibility section: accessibility --- -import { AccessibilityDatalist } from './accessibility-datalist.js'; +import { AccessibilityDatalist } from './accessibility-datalist.jsx'; PatternFly provides accessible components, but **we can't guarantee that your products will be accessible**. In order to ensure that your product is accessible, you will need to take additional steps during development, as described in the following guidelines and techniques. diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md b/packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md index c3e7ac6955..190f74609a 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md @@ -2,7 +2,7 @@ id: Product scorecard section: accessibility --- -import { AccessibilityScorecard } from './accessibility-scorecard.js'; +import { AccessibilityScorecard } from './accessibility-scorecard.jsx'; ## Scoring your accessibility diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md b/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md index ed4b34888a..c548707d63 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-for-charts.md @@ -7,7 +7,7 @@ sortValue: 2 --- import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core'; -import ColorsGrid from './colors-grid.js'; +import ColorsGrid from './colors-grid.jsx'; import './colors-for-charts.css'; import '../../components.css'; diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-grid.js b/packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-grid.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-grid.js rename to packages/documentation-site/patternfly-docs/content/components/charts/colors-for-charts/colors-grid.jsx diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorFamily.js b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorFamily.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorFamily.js rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorFamily.jsx diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorSwatch.js b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorSwatch.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorSwatch.js rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/ColorSwatch.jsx diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md index 6a77d020d9..54abc437e5 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md @@ -5,15 +5,16 @@ section: foundations-and-styles import { Alert, Grid, GridItem, Banner, Button, Stack } from '@patternfly/react-core'; import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; -import { ColorSwatch } from './ColorSwatch.js'; -import { ColorFamily } from './ColorFamily.js'; +import { ColorSwatch } from './ColorSwatch.jsx'; +import { ColorFamily } from './ColorFamily.jsx'; # PatternFly's palette Our color palettes align with Red Hat's brand colors and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using [semantic design tokens.](/foundations-and-styles/design-tokens/overview) This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation.
-
diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.js b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.js rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md index 4dfb5ac0c2..1475552e38 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md @@ -9,7 +9,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; -import { IconsTable } from './IconsTable.js'; +import { IconsTable } from './IconsTable.jsx'; import './icons.css'; If you're a developer, check out our [development onboarding guide](/get-started/develop#using-icons) to learn how to install and use our icon set. diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/motion.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/motion.md index 06640cb009..2858e7e368 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/motion.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/motion.md @@ -22,7 +22,8 @@ These principles guide the use of motion in PatternFly and align with our [brand Intentional - Motion should guide our users without being a distraction. It should be purposeful and simple, helping users complete their tasks and focus only on what is most important. + + Motion should guide our users without being a distraction. It should be purposeful and simple, helping users complete their tasks and focus only on what is most important. @@ -31,7 +32,8 @@ These principles guide the use of motion in PatternFly and align with our [brand Consistent - Motion should create a familiar and predictable experience. It should be applied consistently to unify interactions and connect the user's journey across different products. + + Motion should create a familiar and predictable experience. It should be applied consistently to unify interactions and connect the user's journey across different products. @@ -40,7 +42,8 @@ These principles guide the use of motion in PatternFly and align with our [brand Engaging - Motion should captivate users and add character to the interface. It should celebrate user accomplishments and make common interactions more expressive and interesting. + + Motion should captivate users and add character to the interface. It should celebrate user accomplishments and make common interactions more expressive and interesting. @@ -49,7 +52,8 @@ These principles guide the use of motion in PatternFly and align with our [brand Inclusive - Motion should empower users by respecting their preferences. It must always be optional and accommodating to ensure a comfortable and accessible experience for all. + + Motion should empower users by respecting their preferences. It must always be optional and accommodating to ensure a comfortable and accessible experience for all. diff --git a/packages/documentation-site/patternfly-docs/content/get-started/training/copyCodeBlock/copyCodeBlock.js b/packages/documentation-site/patternfly-docs/content/get-started/training/copyCodeBlock/copyCodeBlock.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/get-started/training/copyCodeBlock/copyCodeBlock.js rename to packages/documentation-site/patternfly-docs/content/get-started/training/copyCodeBlock/copyCodeBlock.jsx diff --git a/packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.js b/packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.jsx similarity index 95% rename from packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.js rename to packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.jsx index 49c1357e92..e6b6a60a70 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.js +++ b/packages/documentation-site/patternfly-docs/content/get-started/training/trainingCard/trainingCard.jsx @@ -7,7 +7,7 @@ import RunningIcon from '@patternfly/react-icons/dist/esm/icons/running-icon'; import PuzzlePieceIcon from '@patternfly/react-icons/dist/esm/icons/puzzle-piece-icon'; import ChartBarIcon from '@patternfly/react-icons/dist/esm/icons/chart-bar-icon'; import { Link } from '@patternfly/documentation-framework/components/link/link'; -import { capitalize } from '@patternfly/documentation-framework/helpers/capitalize'; +const { capitalize } = require('@patternfly/documentation-framework/helpers/capitalize'); const getTrainingIcon = trainingType => { if (['html-css', 'react'].includes(trainingType)) { diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-notes-table.js b/packages/documentation-site/patternfly-docs/content/releases/release-notes-table.jsx similarity index 100% rename from packages/documentation-site/patternfly-docs/content/releases/release-notes-table.js rename to packages/documentation-site/patternfly-docs/content/releases/release-notes-table.jsx diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-notes.md b/packages/documentation-site/patternfly-docs/content/releases/release-notes.md index 6fea89009c..b38418f82e 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/release-notes.md +++ b/packages/documentation-site/patternfly-docs/content/releases/release-notes.md @@ -7,7 +7,7 @@ section: releases ## PatternFly 6 React breaking changes -import { ReleaseNotesTable } from './release-notes-table.js'; +import { ReleaseNotesTable } from './release-notes-table.jsx'; This resource organizes the PatternFly 5 to PatternFly 6 change log in a table that allows for searching, filtering, and sorting. Note that this table does not contain a completely comprehensive list of changes, as it does not include information about dependency bumps and documentation updates. diff --git a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md index 53c927c9f6..08ad2af4ab 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md +++ b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md @@ -7,7 +7,8 @@ section: releases import { Alert, Button, Divider } from '@patternfly/react-core'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; - To ensure your product is ready for PatternFly 6, [complete the PatternFly 5 upgrade process](https://v5-archive.patternfly.org/releases/upgrade-guide) first to address any necessary changes from our previous release. + +To ensure your product is ready for PatternFly 6, [complete the PatternFly 5 upgrade process](https://v5-archive.patternfly.org/releases/upgrade-guide) first to address any necessary changes from our previous release. PatternFly 6 introduces the exciting new features and functionality outlined [our release highlights](/releases/release-highlights). For a detailed breakdown on the work that went into this release, you can view [the PatternFly 6 major release notes](/releases/upgrade-guide/release-notes). diff --git a/packages/site/.gitignore b/packages/site/.gitignore index dc5a721e53..dfe6329125 100644 --- a/packages/site/.gitignore +++ b/packages/site/.gitignore @@ -1,3 +1,3 @@ # generated files .astro -src/content.ts \ No newline at end of file +src/content diff --git a/packages/site/package.json b/packages/site/package.json index 4a6a6abfcc..b189e1355e 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -4,8 +4,9 @@ "private": true, "version": "0.0.2", "scripts": { + "ci:build": "yarn generate:content && yarn build", "clean": "rm -rf src/generated", - "generate:content": "patternfly-doc-core convert-to-mdx ../documentation-site/patternfly-docs/content/", + "generate:content": "rm -rf src/content && cp -r ../documentation-site/patternfly-docs/content src/content", "dev": "patternfly-doc-core start", "build": "patternfly-doc-core build --props", "serve": "patternfly-doc-core serve", @@ -14,8 +15,9 @@ "wrangler:preview": "wrangler pages dev" }, "dependencies": { - "@patternfly/patternfly-doc-core": "^1.15.5", - "astro": "^5.16.10" + "@patternfly/patternfly-doc-core": "^1.20.0", + "@patternfly/react-icons": "^6.5.0-prerelease.14", + "astro": "^5.15.9" }, "devDependencies": { "tsx": "^4.19.0", diff --git a/packages/site/pf-docs.config.mjs b/packages/site/pf-docs.config.mjs index f359010072..8939b08dcb 100644 --- a/packages/site/pf-docs.config.mjs +++ b/packages/site/pf-docs.config.mjs @@ -10,19 +10,86 @@ export const config = { // // example content entry for remote content, this would fetch all markdown files matching the glob in 'pattern' // from the specified npm package and serve them with a content identifier of 'react-component-docs': - // packageName: "../../../node_modules/@patternfly/react-core", - // base: "../../node_modules/@patternfly/react-core", - // src/{components/*/examples,layouts/*/examples,demos/**} { base: "../../node_modules/@patternfly/react-core", pattern: "src/{components/*/examples,layouts/*/examples,demos/**}/*.{md,mdx}", - name: "react-component-docs", // must be "react-component-docs" to assign "react" tab properly + name: "react-component-docs", }, { base: "../../node_modules/@patternfly/patternfly", pattern: "docs/**/*.{md,mdx}", - name: "core-component-docs", // must be "core-component-docs" to assign "html" tab properly + name: "core-component-docs", }, + { + base: "../../node_modules/@patternfly/react-charts", + pattern: "src/victory/**/*.{md,mdx}", // we need to update the docs-core to support objects in propComponents at the schema level to support echarts + name: "react-charts-docs", + }, + { + base: "../../node_modules/@patternfly/react-topology", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-topology-docs", + }, + { + base: "../../node_modules/@patternfly/react-templates", + pattern: "src/**/*.{md,mdx}", + name: "react-templates-docs", + }, + { + base: "../../node_modules/@patternfly/react-drag-drop", + pattern: "src/**/*.{md,mdx}", + name: "react-drag-drop-docs", + }, + { + base: "../../node_modules/@patternfly/react-code-editor", + pattern: "src/**/*.{md,mdx}", + name: "react-code-editor-docs", + }, + { + base: "../../node_modules/@patternfly/react-table", + pattern: "src/**/*.{md,mdx}", + name: "react-table-docs", + }, + { + base: "../../node_modules/@patternfly/react-console", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-console-docs", + }, + { + base: "../../node_modules/@patternfly/react-data-view", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-data-view-docs", + }, + { + base: "../../node_modules/@patternfly/react-log-viewer", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-log-viewer-docs", + }, + { + base: "../../node_modules/@patternfly/react-user-feedback", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-user-feedback-docs", + }, + { + base: "../../node_modules/@patternfly/react-virtualized-extension", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-virtualized-extension-docs", + }, + { + base: "../../node_modules/@patternfly/react-catalog-view-extension", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-catalog-view-extension-docs", + }, + { + base: "../../node_modules/@patternfly/react-component-groups", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "react-component-groups-docs", + }, + { + base: "../../node_modules/@patternfly/chatbot", + pattern: "patternfly-docs/**/*.{md,mdx}", + name: "chatbot-docs", + } ], navSectionOrder: [], outputDir: './dist', diff --git a/packages/site/rename-md-to-mdx.sh b/packages/site/rename-md-to-mdx.sh deleted file mode 100755 index 6548ac2bcf..0000000000 --- a/packages/site/rename-md-to-mdx.sh +++ /dev/null @@ -1,15 +0,0 @@ -#!/bin/bash - -# Find all .md files in the src directory and its subdirectories -find src -name "*.md" | while read -r file; do - # Create the new filename by replacing .md with .mdx - new_file="${file%.md}.mdx" - - # Only rename if the file exists and hasn't been renamed already - if [ -f "$file" ] && [ ! -f "$new_file" ]; then - echo "Renaming: $file -> $new_file" - mv "$file" "$new_file" - fi -done - -echo "Renaming complete!" \ No newline at end of file diff --git a/packages/site/src/content/get-started/about-patternfly.mdx b/packages/site/src/content/get-started/about-patternfly.mdx deleted file mode 100644 index ecc29a0c5b..0000000000 --- a/packages/site/src/content/get-started/about-patternfly.mdx +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: About PatternFly -title: About PatternFly -section: get-started ---- - -import './get-started.css'; -import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip } from '@patternfly/react-core'; -import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; - -## What is PatternFly? - -PatternFly is an open source design system that enables designers and developers to create consistent and usable software products. - -A **design system** is a collection of software design standards and resources that facilitate more consistent and productive design processes. When you design and develop with a design system, you can reduce redundancy and enable a unified language between cross-functional teams. This means that products will be visually consistent, and will use patterns that support better usability and efficiency. - -The PatternFly design system is created and maintained by Red Hat, and is used across Red Hat's product catalog, but it's open for anyone to use. Across our website, we provide code samples, clear standards, and additional resources to help designers and developers work together more efficiently. Together, we can build better user experiences. - -## What does PatternFly include? - -### Foundations - -PatternFly's foundations create a strong base for the rest of the design system to be built with. - - - - - - **Design foundations** - - The most foundational elements of our design system, like color, typography, icons, and spacing. - - - - - - - **Design tokens** - - Semantically named variables that represent visual attributes and design styles. - - - - -### Elements - -PatternFly’s core elements are what you will work directly with when building a UI. - - - - - - **Components** - - Flexible, modular, building blocks that you can mix and match to create UIs. - - - - - - - **Layouts** - - Different methods for arranging components for different screen sizes and content presentations. - - - - - - - **Charts** - - Different methods to present data visualizations. - - - - - - - **Extensions** - - Reusable solutions that utilize multiple PatternFly components for cross-project use cases. - - - - -### Guidance - -We provide extensive guidelines to help you create UIs following best practices. - - - - - - **Patterns** - - Recommendations and solutions for common design problems that involve multiple components. - - - - - - - **Accessibility** - - Guidelines to follow in order to create products that are usable and accessible by all users. - - - - - - - **UX writing** - - Content guidelines that provide principles and best practices around writing for user experience. - - - - - -### Additional developer resources - -We offer more complex resources to assist with the development process. - - - - - - **Topology** - - A method for modeling the arrangement of elements in a network. - - - - - - - **Utility classes** - - Additional CSS classes that allow you to further customize and modify UI elements, like alignment, spacing, and shadows. - - - - - -## Join the community - -At the core of PatternFly is our global community of designers, developers, and other UX professionals with a passion for open source—in other words, our Flyers. Whether we're contributing to PatternFly or just staying up to date on new releases, we work together to make PatternFly a vibrant community of passionate people. Together, we celebrate creativity and foster a sense of teamwork and unity. - -The PatternFly community is never finished growing, and we want to keep it that way, so reach out whenever—we're always open. - - - - Chat with us - - We have a Slack workspace, where you can ask us questions and share any feedback. Just like PatternFly, our Slack channels are open for all and we encourage you to join to connect with the team. - - - - [Join our Slack workspace ](https://patternfly.slack.com/archives/C293LQ36J) - - - - Stay up to date - - Make sure you're in the loop on important updates and discussions by signing up for PatternFly emails. We can send meeting reminders, updates, and other important information right to your inbox. - - - - [Sign up for our mailing list ](https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263) - - - - Join our meetings - - Flyers may be spread all over the globe, but we make sure to come together to share updates and collect feedback. If you can't make it, all meetings are recorded and published on our YouTube channel. - - - - [View our Google calendar ](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York) - - - - Read our blog - - Our team is passionate, and we have a lot to say about open source and user experience—too much to fit on our website! Our Medium publication hosts articles about PatternFly projects, industry practices, professional experience, and more. - - - - [Visit our Medium publication ](https://medium.com/patternfly) - - - - Follow us on X - - If you want to keep up with us via social media, you can find us on X. We share meeting reminders, release announcements, community messages, and links to new Medium articles that you can add to your reading list. - - - - [Follow us on X ](https://x.com/patternfly) - - - - Request a new feature - - We welcome all ideas for adding or improving features! We review all requests, taking into account scope and technical constraints. Accepted requests are placed on [our feature roadmap](https://github.com/orgs/patternfly/projects/16/views/2), and we'll work with you to design and develop a solution. - - - - [Visit our GitHub discussions board ](https://github.com/orgs/patternfly/discussions/categories/feature-requests) - - - - -#### New communities -Sometimes Flyers branch out and build groups of their own, creating new communities. While these communities are separate from PatternFly and not supported as part of our design system, we still love seeing our Flyers turning their visions into actions. - -- **[PatternFly Elements](https://patternflyelements.org):** A community created by web-based developers at Red Hat, focused on creating web components for use across Red Hat's sites and SaaS products. It offers theming options for your own brand library. - -- **[PatternFly Java](https://github.com/patternfly-java/patternfly-java):** A Java implementation of PatternFly targeting GWT and J2CL. The goal of this project is to provide all PatternFly charts, components, and layouts in Java. For a quick overview, view the [PatternFly Java showcase](https://patternfly-java.github.io/). - -- **[Ansible Component Guide and Sketch Library](https://www.sketch.com/s/6ccbd710-267d-4b69-9dae-bc19e1551056):** An additional resource that designers can use that is built on top of existing PatternFly components. It is a rapid mockup prototyping tool that can be used to quickly put together repeatable design patterns and layouts across projects. This is specific to Ansible, but many of the components are generalized and can fit many product use cases. - -- **[PatternFly for Yew](https://github.com/patternfly-yew/patternfly-yew)**: Provides PatternFly components for Yew—a Rust based framework for creating web applications that can run in the browser using WASM. The project aims to create Yew components for all components and concepts found in PatternFly. For a quick demo and starter template, [see the PatternFly Yew Quickstart.](https://github.com/patternfly-yew/patternfly-yew-quickstart) - -## Where do I start? - -Now that you've been introduced to PatternFly, you're ready to start designing or start developing your product. Looking to get involved in the behind-the-scenes work? Check out our contribution guidelines for more instruction. - - - - - - - -## Release cadence - -### Major releases - -A major release is one that sees the version of PatternFly increase, for example PatternFly 5 to PatternFly 6. Major releases are the only releases with planned "breaking changes" that alter the way your product's code interacts with PatternFly's code. - -Along with each major release, we will provide detailed upgrade guides and codemods to support the work needed to upgrade your products to the latest version. - -A major version of PatternFly will only be supported through the subsequent version. This means, with the release of PatternFly 6, we no longer offer support PatternFly 4. - -### Minor and patch releases - -Minor feature releases will be available quarterly to introduce non-breaking changes, like new features and enhancements. We will also share interim patch releases to fix any bugs that we find. - -## Beta components - -New PatternFly components are first released in beta. To help you identify beta components, we add a blue label beside the component in the PatternFly.org navigation menu and an informational alert at the top of the component’s documentation pages. - -Beta components continue to evolve as users share feedback. As these components are tested, they are subject to breaking changes, which are changes that affect visuals, applied CSS class names, or existing React properties (including the addition of new properties). We review beta components every quarter to evaluate their stability and the degree to which they meet product requirements. Once a component is stable, it's proposed as a promotion candidate. Once promoted, breaking changes are not made to components outside of a well-advertised breaking change release. - -Occasionally, after a component is promoted out of beta, subsequent enhancement requests require the introduction of new CSS class names and React properties. Whenever these enhancements are substantial enough to lead to further component updates (pending testing and feedback), then a beta label is applied to the new class names and properties, as well as relevant examples in the component’s documentation. - -[Learn more about beta components and view a list of current promotion candidates here.](https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion) - -If you are considering using a beta component, make sure to: - -1. Play with the examples in the component's documentation on the PatternFly website to determine if the current implementation meets your needs. Open issues for any missing features, enhancement requests, or bugs. -2. Check the [PatternFly Issues GitHub Project board](https://github.com/orgs/patternfly/projects/7/views/1). Browse any open issues for the beta component to determine how much more the beta component could evolve in the near future. - -## Deprecated components - -Deprecated components are components that are no longer recommended for use in PatternFly, either due to significant design or code changes. Once deprecated, a component is replaced with a newer implementation, and the previous implementation is no longer maintained or enhanced. - -Occasionally, a component page will contain a "React next" tab, which contains details about planned changes for the implementation of the component. This updated implementation will be promoted to the main component page as part of a major release, and will become the new recommended implementation. When this happens, the previous implementation will be deprecated. Deprecated component implementations will remain available until a following major release, but will no longer be maintained or updated. - -Deprecated components will typically be available to use until the next major release, after which no documentation will be included on the current release website. - -![Onsite deprecated component messages](./img/deprecated-component.png) - -Deprecation includes: - -1. Components that are removed completely, in favor of a different component. - - The newly recommended component will be mentioned and linked on the deprecated component's page. -1. Components that still exist, but have significant implementation changes. - - The new implementation will populate the "React tab," while documentation for the deprecated implementation will be placed under a "React deprecated" tab. You will see an alert on both the React and React deprecated pages. diff --git a/packages/site/src/content/get-started/contribute.mdx b/packages/site/src/content/get-started/contribute.mdx deleted file mode 100644 index 0a909b5964..0000000000 --- a/packages/site/src/content/get-started/contribute.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: Contribute -title: Contribute to PatternFly -section: get-started ---- - -## Community contributions - -Thank you for your interest in contributing to PatternFly! We depend on community contributions to help our design system grow and evolve. We encourage everyone, regardless of background, to get involved. Common contributions include (but aren't limited to): -- New feature ideas. -- Bug reports. -- Documentation updates. - -This guide outlines the ways that you can contribute to PatternFly's design, code, and documentation to help us stay on top of the latest and greatest solutions. - -If you have any ideas that don't fit into the projects outlined in this guide, please [reach out to us on Slack](https://patternfly.slack.com/archives/C293LQ36J). - -## Design - -If you have skills in visual and interaction design, you can contribute to PatternFly's design by taking an existing issue or proposing a new feature, enhancement, or icon. If you are interested in any of these projects, [reach out on the patternfly-design Slack channel.](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ) - -### Existing design issues - -The PatternFly design team is composed of visual and interaction designers who define the look and feel of the PatternFly library. The team follows an agile framework, planning their work in sprints, with a backlog that is tracked and managed via [this GitHub project board.](https://github.com/orgs/patternfly/projects/7/views/30) This board contains a list issues that are currently unassigned and waiting in the queue. If you see something here that you'd like to work on, leave a comment on the issue and a member of our team will reach out with next steps. - -### New feature or enhancement -If you have an idea for a new design pattern, a new component type, or an existing feature improvement, we'd love to hear it. [Start by opening an issue in the patternfly-design repository.](https://github.com/patternfly/patternfly-design/issues) From there, a member of our team will reach out and work with you to plan and design a solution. - -### New icons -We encourage designers to work with [the existing PatternFly icon set](/design-foundations/icons), which covers most common use cases. If your use case isn't covered, you can propose a new icon. - -To contribute a new icon, [start by opening an issue in the patternfly-design repository](https://github.com/patternfly/patternfly-design/issues) that describes your idea and why it's needed. A member of our team will reach out to you to discuss next steps. - -## Code - -The primary PatternFly libraries include HTML/CSS (commonly called "core") and React. If you're looking to contribute to PatternFly's codebase, these libraries are a good place to start. You can help out by taking existing issues, or creating issues for bugs and other changes. - -If you have any questions about these projects, you can reach out to us on our [patternfly-core](https://patternfly.slack.com/archives/C9Q224EFL) and [patternfly-react](https://patternfly.slack.com/archives/C4FM977N0) Slack channels. - -### Existing development issues - -To find work that has been approved, but not started, you can view open issues in our [patternfly](https://github.com/patternfly/patternfly/issues) (HTML/CSS) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) (React) repositories. If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. - -Be sure to view our detailed contribution instructions for both of these repositories: -- [Core contribution guidelines](https://github.com/patternfly/patternfly#guidelines-for-css-development) -- [React contribution guidelines](https://github.com/patternfly/patternfly-react/blob/main/CONTRIBUTING.md#contribution-process) - -### Bug reports - -If you believe that you've come across a PatternFly bug, alert our team, so that we can resolve the issue. To report a bug, follow these steps: - -1. View the documentation for the feature, to confirm that the behavior is not functioning as intended. -1. Search open issues in the [patternfly](https://github.com/patternfly/patternfly/issues) and [patternfly-react](https://github.com/patternfly/patternfly-react/issues) repositories to see if a related issue already exists. - - If the bug is present in only the React implementation of PatternFly, [create a bug issue in patternfly-react.](https://github.com/patternfly/patternfly-react/issues) - - If the bug can be seen on both the React and HTML/CSS side, [create a bug issue in patternfly](https://github.com/patternfly/patternfly/issues). -1. Be sure to mention which project the bug was noticed in and if there is a deadline that the fix is needed for. - -## Documentation - -Across our website, you can find PatternFly documentation that explains concepts, provides guidance, and outlines important resources for PatternFly users. Our documentation can always be improved, and we love to hear input from the people who use it. - -If you'd like to contribute to documentation, you can refer to our [detailed contribution instructions](https://github.com/patternfly/patternfly-org/wiki/Contributing-to-patternfly-org-for-designers) for additional guidance. - -### Existing documentation issues - -Our website documentation is contained in the [patternfly-org repository](https://github.com/patternfly/patternfly-org). If you find an issue that you'd like to work on, leave a comment and someone from our team will reach out to you with next steps. - -### Design guidelines -Our design guidelines are found across our component, layout, chart, and pattern web pages. These guides clarify usage details to help designers follow best practices to create strong UI solutions. - -If you'd like to contribute to our design guidelines, you can open an issue in [patternfly-org](https://github.com/patternfly/patternfly-org) to propose a new page or updates to an existing page. From there, our team will work with you to author and publish your new content. \ No newline at end of file diff --git a/packages/site/src/content/get-started/design-with-figma.mdx b/packages/site/src/content/get-started/design-with-figma.mdx deleted file mode 100755 index c9a6dbb254..0000000000 --- a/packages/site/src/content/get-started/design-with-figma.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: Design -title: Design with PatternFly -section: get-started -source: Design-with-Figma - ---- -import './get-started.css'; -import {Button, Divider} from '@patternfly/react-core'; -import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; - - -## PatternFly 6 design kit - -To start designing with PatternFly, you will need to install our PatternFly 6 design kit. This kit gives you access to PatternFly's visual design system — including design tokens — so that you can create consistent and usable product experiences. - -
- -
- -In order to use PatternFly 6, your product *must* be using the PatternFly 6 design kit. If you haven't yet, you can [follow our upgrade guide](/get-started/upgrade) to complete your upgrade. Doing so also ensures that you'll have access to the most current PatternFly features, resources, and guidance going forward! - -If you have questions about the kit, or have trouble with installation, [refer to our help section](#get-help) or [reach out to us on Slack](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ). - -### PatternFly fonts - -To install the fonts that PatternFly uses, [download this GitHub repository](https://github.com/RedHatOfficial/RedHatFont) and install all files in the "TTF" folder. - -### Design tokens - -PatternFly 6 is built off of our new design token system. For more background and instructions regarding our token system, [check out our tokens documentation.](/tokens/about-tokens) - -## What's in the design kit? - -The PatternFly 6 design kit gives you access to: -- Our complete component library. -- Our design token system. -- Demos of full-screen designs. - -## Where do I start? - -After you install the PatternFly 6 Figma workspace, you will find a welcome page to help guide you through your first steps. Take time to read this information to familiarize yourself with our component library, contribution guidelines, and contact methods. - -Once you're familiar with the kit you're ready to start designing! - -If you're completely new to PatternFly, you should also first [read this overview of our design system](/get-started/about-patternfly), to learn about everything that PatternFly has to offer and get to know who we are. - -## How do I stay up to date? - -We plan to regularly release design kit updates to address any bugs and to evolve our design solutions. If you're a Red Hat employee, then you will automatically receive updates as they are released. If you are not a Red Hat employee, then you will have to manually check our Figma community page to find and install updates. [Read more about Figma access levels here.](#1.-how-do-i-get-figma-access) - - - -## Get help - -### 1. How do I get Figma access? - - - **Red Hat employees:** - - If you are a Red Hat employee on the User Experience Design (UXD) team, you will be added to the UXD workspace in Figma. This allows you to instantly receive library updates as they are made by the team. - - If you are a Red Hat employee, but you are not on the UXD team, you should work with your manager to be added to your team's respective workspace in Figma. - - - **PatternFly community members:** - - If you are not a Red Hat employee, you will need to create a copy of the [PatternFly 6 design file](https://www.figma.com/@patternfly) to install the library within your own Figma workspace. - - Note that you will not be able to receive automatic library updates since you are working from a local copy. The PatternFly team will release any updates every other week, as part of their sprint schedule. Be sure to revisit our Figma community page in order to download the latest updates. - -### 2. Can I still use Sketch? - -Before PatternFly 5, the PatternFly design kit was available within Sketch. We migrated our design system to Figma, with the release of [the PatternFly 5 library](https://www.figma.com/@patternfly). Sketch is no longer our recommendation, and the PatternFly 6 design kit is not available in Sketch. [See more details on the PatternFly 5 archive site.](https://v5-archive.patternfly.org/get-started/design#sketch-design-kit) - -### 3. How do I migrate to Figma? - -To migrate to Figma, just begin to create all new design work within Figma. If you have existing designs in another design tool that you want to bring into Figma, you will need to manually recreate each UI mockup using the PatternFly 5 or 6 component library. - -### 4. What if I haven't upgraded to PatternFly 6? -If your product hasn't been upgraded to PatternFly 6, you cannot use the PatternFly 6 design kit nor design tokens. Previous PatternFly libraries will no longer be maintained after the release of PatternFly 6. diff --git a/packages/site/src/content/get-started/develop.mdx b/packages/site/src/content/get-started/develop.mdx index 3bced63390..c0e87e564e 100644 --- a/packages/site/src/content/get-started/develop.mdx +++ b/packages/site/src/content/get-started/develop.mdx @@ -4,15 +4,14 @@ title: Develop with PatternFly section: get-started --- import './get-started.css'; -import {Alert} from '@patternfly/react-core'; ## Getting started In order to develop with PatternFly, you will need to: -1. [Learn about the PatternFly design system](/get-started/about-patternfly) to get acquainted with all of its elements. +1. [Learn about the PatternFly design system](/about-us) to get acquainted with all of its elements. -1. [Learn about our design token system](/tokens/about-tokens), which enables you to build interfaces with consistent PatternFly styling, including colors, shadows, spacing, and more. +1. [Learn about our design token system](/foundations-and-styles/design-tokens/overview), which enables you to build interfaces with consistent PatternFly styling, including colors, shadows, spacing, and more. 1. Install a package manager to help you install, update, and configure all necessary PatternFly packages. We recommend [npm](https://nodejs.org/en/download) or [Yarn](https://yarnpkg.com/getting-started). @@ -34,7 +33,7 @@ PatternFly supports the 2 most recent versions of React at a time. PatternFly 6 * [@patternfly/react-table](https://www.npmjs.com/package/@patternfly/react-table): PatternFly table components. * [@patternfly/react-tokens](https://www.npmjs.com/package/@patternfly/react-tokens): PatternFly's CSS variables, transformed into JavaScript objects for use with React. -These packages are maintained together. To determine which versions of each package are compatible with the rest, view our [release highlights](https://www.patternfly.org/get-started/release-highlights). +These packages are maintained together. To determine which versions of each package are compatible with the rest, view our [release highlights](/releases/release-highlights). We support the following configurations: * [TypeScript](https://github.com/patternfly/patternfly-react-seed/blob/master/tsconfig.json) @@ -132,7 +131,7 @@ PatternFly uses [Font Awesome 5](https://fontawesome.com/), which can be utilize ## Testing -Many PatternFly components comply with the Open UI Automation (OUIA) guidelines, which are designed to ease the burden of creating and maintaining automated testing environments. Additional details about OUIA and the full list of compliant components [can be found in our developer resources.](/developer-resources/open-ui-automation) +Many PatternFly components comply with the Open UI Automation (OUIA) guidelines, which are designed to ease the burden of creating and maintaining automated testing environments. Additional details about OUIA and the full list of compliant components [can be found in our developer resources.](/developer-guides/open-ui-automation) ## Supported browsers and operating systems @@ -177,5 +176,4 @@ Breaking changes to our React library are the result of code changes that includ - Dependencies: - Changes that alter component behavior. - Changes that alter a consumer’s build process. - - Changes to the signature of an event handler. - + - Changes to the signature of an event handler. \ No newline at end of file diff --git a/packages/site/src/content/get-started/get-started.css b/packages/site/src/content/get-started/get-started.css index 2ad08a2fc7..a7dbd0dbe4 100644 --- a/packages/site/src/content/get-started/get-started.css +++ b/packages/site/src/content/get-started/get-started.css @@ -10,3 +10,10 @@ #supported-browsers.ws-title + table { margin-bottom: 16px; } + +.ws-docs-content-img { + text-align: center; + margin-inline: auto; + width: 100%; + max-width: 700px; +} diff --git a/packages/site/src/content/get-started/release-highlights.mdx b/packages/site/src/content/get-started/release-highlights.mdx deleted file mode 100644 index 8952b70181..0000000000 --- a/packages/site/src/content/get-started/release-highlights.mdx +++ /dev/null @@ -1,442 +0,0 @@ ---- -id: Release highlights -title: Release highlights -section: get-started ---- -import './get-started.css'; -import { Divider, Timestamp } from '@patternfly/react-core'; - -April 2025 - -## PatternFly 6.2 - -For the Q2 2025 PatternFly release we made progress in a few of our key initiatives, including PatternFly 6 migration enablement, component animations, React 19 support, and the continued evolution of PatternFly AI. Updates for these key areas can be found here, in this quarter's release highlights. - -### Promoted package versions - -The following packages were promoted with this release. Outside of our primary initiatives for this release, we addressed reported bugs and continued to enhance PatternFly with new features, as detailed in the linked changelogs. - -- patternfly/patternfly ([changelog](https://github.com/patternfly/patternfly/releases/tag/v6.2.0)) - - [@patternfly/patternfly@6.2.0](https://www.npmjs.com/package/@patternfly/patternfly) -- patternfly/react ([changelog](https://github.com/patternfly/patternfly-react/releases/tag/v6.2.0)) - - [@patternfly/react-charts@8.2.0](https://www.npmjs.com/package/@patternfly/react-charts) - - [@patternfly/react-code-editor@6.2.0](https://www.npmjs.com/package/@patternfly/react-code-editor) - - [@patternfly/react-core@6.2.0](https://www.npmjs.com/package/@patternfly/react-core) - - [@patternfly/react-drag-drop@6.2.0](https://www.npmjs.com/package/@patternfly/react-drag-drop) - - [@patternfly/icons@1.0.4](https://www.npmjs.com/package/@patternfly/icons) - - [@patternfly/react-styles@6.2.0](https://www.npmjs.com/package/@patternfly/react-styles) - - [@patternfly/react-table@6.2.0](https://www.npmjs.com/package/@patternfly/react-table) - - [patternfly/react-templates@6.2.0](https://www.npmjs.com/package/@patternfly/react-templates) - - [@patternfly/react-tokens@6.2.0](https://www.npmjs.com/package/@patternfly/react-tokens) -- PatternFly extensions - - [@patternfly/chatbot@2.2.0](https://www.npmjs.com/package/@patternfly/chatbot) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0)) - - [@patternfly/quickstarts@6.2.0](https://www.npmjs.com/package/@patternfly/quickstarts) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.2.0)) - - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) - - [@patternfly/react-component-groups@6.2.0](https://www.npmjs.com/package/@patternfly/react-component-groups) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.2.0)) - - [@patternfly/react-log-viewer@6.1.0](https://www.npmjs.com/package/@patternfly/react-log-viewer) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.1.0)) -- [@patternfly/react-topology@6.2.0](https://www.npmjs.com/package/@patternfly/react-topology) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.2.0)) - - [@patternfly/react-user-feedback@6.1.0](https://www.npmjs.com/package/@patternfly/react-user-feedback) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.1.0)) - -### PatternFly 6 enablement - -As products have continued their PatternFly 6 migration journeys, we've received helpful feedback on the upgrade process, including common roadblocks and situations that could use more guidance. So, we expanded and reorganized the [PatternFly 6 upgrade guide](/get-started/upgrade) to more clearly and comprehensively support the upgrade process. - -### Component animations - -Our highly-anticipated animations project focuses on integrating motion design into PatternFly components, to enhance user experiences and provide additional cues for interaction. You can keep track of this project via [our micro-animations roadmap](https://github.com/orgs/patternfly/projects/16/views/23?pane=issue&itemId=86507128&issue=patternfly%7Cpf-roadmap%7C215). - -Note that animations will either be specified as opt-in or opt-out: -- **Opt-in:** Requires additional updates to your codebase in order to function properly. These could cause test failures, depending on how your testing is set up, so you must manually opt into these animations and configure them appropriately. -- **Opt-out:** Turned on by default. To disable these animations, work with the PatternFly team to find a solution. - -With this release, 3 components now support animations: - -1. [Alert](/components/alert) - - **Animation type:** Opt-in. - - **Animation behavior:** For alerts within a group, there's a slide-in animation as new alerts are received and a slide-out animation as alerts are dismissed. - - **Example:** To visualize the motion behavior, you can interact with our website examples, which have opted in to animations. - - **Note:** By default, alert animations are opt-in and will only apply to alerts within an alert group. Opting into animations could require test updates. To ensure your test pass, the quickest solution is to set `hasAnimations` to `false`. Additionally, when alerts are dynamically added to a group, you must ensure that new alerts are prepended to the alert group list, rather than appended to the end of it. -1. [Navigation](/components/navigation) - - **Animation type:** Opt-out. - - **Animation behavior:** For expandable navigation items, the sub-menu fades in and out as navigation items are expanded and collapsed. - - **Example:** As an opt-out animation, you can see this motion behavior by default across expandable navigation items. -1. [Notification badge](/components/notification-badge) - - **Animation type:** Opt-in. - - **Animation behavior:** When the animation is triggered (for example, when a new notification arrives), the bell icon has a "ring" animation. - - **Example:** To illustrate the motion behavior of this animation, we added a [notification badge "With animations" example](/components/notification-badge#with-animation). - -### React 19 support - -We’ve made significant progress towards React 19 support in PatternFly, which is being tracked in [the React 19 roadmap](https://github.com/patternfly/pf-roadmap/issues/201). Our remaining work involves updating our React dependencies, testing version support, and creating any necessary support resources or documentation. - -### PatternFly AI - -In the world of PatternFly AI, we've continued our focus on expanding our ChatBot extension. As more Flyers have used ChatBot, we've gained insight into the types of new features that would have the most impact. To make progress on growing ChatBot needs, this release adds *many* new features, including [an inline drawer display mode](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/overview/demo/#inline-drawer-chatbot), the ability for users to give [message feedback](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/messages#message-feedback), [support for quick starts](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/messages#messages-with-quick-start-tiles), additional content types for [messages](/patternfly-ai/chatbot/messages#bot-messages), and much more. - -To see a complete list of new ChatBot features, [view the changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0). - -Along with these new features, we've updated our documentation: -- [The ChatBot design guidelines](/patternfly-ai/chatbot/overview/design-guidelines) have been updated to reflect new features, expand on previous guidance, and add higher-level patterns for ChatBots usage in products. -- New [ChatBot analytics documentation](/patternfly-ai/chatbot/analytics) is also now available, which provides general guidance on the implementation of analytics tracking. - -### Expanded chart library -PatternFly has historically provided a charting solution using the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library. With this release, PatternFly is also now delivering 2 charts based on the [Apache ECharts](https://echarts.apache.org/) library, including [a line chart](/charts/line-chart/EChart) and [a Sankey chart](/charts/sankey-chart). - -Additionally, EChart is now listed as a peer dependency for PatternFly. To use these new chart solutions, add 'echart' to your project dependencies and follow PatternFly's documentation to build out your charts. - -### Notable changes - -Outside of our key initiatives, there are a few notable changes that may require changes to your codebase and tests. - -#### Components -- Button - - **Change:** The `aria-disabled` will now only render when `true`, not on elements where it is `false` or `undefined`. - - **Required update:** Update tests that either: - - Check for `aria-disabled` to be `false` - - Match the disabled property -- Charts - - **Change:** Errors related to Victory 37.3.4 have been addressed. - - **Required update:** If you're using PatternFly 5, use [react-charts](https://www.npmjs.com/package/@patternfly/react-charts) v7.4.8 with Victory v37.3.4 or later. - -- Table - - **Change:** The [column management](/components/table/react-demos#column-management) and [column management with draggable](/components/table/react-demos#column-management-with-draggable) features have been rewritten to replace the use of the deprecated `` component. - - **Required update:** Remove the deprecated `` component by referring to the updated table demos. - -#### Extensions -- ChatBot - - **Change:** DOMpurify is no longer a dependency. - - **Required update:** Uninstall/remove DOMpurify from your codebases. -- ChatBot - - **Change:** `` is now a [PatternFly `