diff --git a/package.json b/package.json index c76b09b23e..4c7b3d81e9 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ }, "devDependencies": { "@octokit/rest": "^19.0.7", - "@patternfly/patternfly": "^6.5.0-prerelease.19", + "@patternfly/patternfly": "^6.5.0-prerelease.20", "@patternfly/react-code-editor": "^6.5.0-prerelease.9", "@patternfly/react-core": "^6.5.0-prerelease.9", "@patternfly/react-table": "^6.5.0-prerelease.9", diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 9690f573f1..2cdc11607c 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -66,7 +66,7 @@ "webpack-merge": "5.8.0" }, "peerDependencies": { - "@patternfly/patternfly": "^6.5.0-prerelease.19", + "@patternfly/patternfly": "^6.5.0-prerelease.20", "@patternfly/react-code-editor": "^6.5.0-prerelease.9", "@patternfly/react-core": "^6.5.0-prerelease.9", "@patternfly/react-table": "^6.5.0-prerelease.9", diff --git a/packages/documentation-framework/routes.js b/packages/documentation-framework/routes.js index 5680539f4b..6593aa5916 100644 --- a/packages/documentation-framework/routes.js +++ b/packages/documentation-framework/routes.js @@ -86,6 +86,7 @@ const sourceOrder = { 'accessibility': 100, 'upgrade-guide': 101, 'release-notes': 102, + 'org-demos': 103, }; const sortSources = ({ source: s1 }, { source: s2 }) => { diff --git a/packages/documentation-framework/scripts/webpack/getHtmlWebpackPlugins.js b/packages/documentation-framework/scripts/webpack/getHtmlWebpackPlugins.js index 6121d7bb2b..66cd51e174 100644 --- a/packages/documentation-framework/scripts/webpack/getHtmlWebpackPlugins.js +++ b/packages/documentation-framework/scripts/webpack/getHtmlWebpackPlugins.js @@ -13,7 +13,12 @@ async function getHtmlWebpackPlugin({ isProd, googleAnalyticsID, algolia, url, t title: getTitle(title), // Don't prerender fullscreen pages (expensive!) prerendering: - isProd && !isFullscreen && !url.includes('chatbot') && !url.includes('topology') && !url.includes('extensions') + isProd && + !isFullscreen && + !url.includes('chatbot') && + !url.includes('topology') && + !url.includes('extensions') && + !url.includes('generative-uis') ? await prerender(url) : null, // Don't use GA in dev mode @@ -37,9 +42,10 @@ async function getHtmlWebpackPlugins(options) { templateParameters: { urls: Object.entries(routes) .map(([path, { sources }]) => [ - path, - ...(sources || []).slice(1) - .filter(source => source.slug !== path) // Filter out sources that would create duplicate routes + path, + ...(sources || []) + .slice(1) + .filter((source) => source.slug !== path) // Filter out sources that would create duplicate routes .map((source) => source.slug) ]) .flat() @@ -60,8 +66,9 @@ async function getHtmlWebpackPlugins(options) { .map(([url, { sources = [], title, isFullscreen }]) => [ [url, { title, isFullscreen }], // Add pages for sources, but filter out duplicates - ...sources.slice(1) - .filter(source => source.slug !== url) // Filter out sources that would create duplicate routes + ...sources + .slice(1) + .filter((source) => source.slug !== url) // Filter out sources that would create duplicate routes .map((source) => [source.slug, source]) ]) .flat() diff --git a/packages/documentation-framework/versions.json b/packages/documentation-framework/versions.json index 61316cdd87..8de52876ed 100644 --- a/packages/documentation-framework/versions.json +++ b/packages/documentation-framework/versions.json @@ -5,7 +5,7 @@ "date": "2025-11-06", "latest": true, "versions": { - "@patternfly/patternfly": "6.5.0-prerelease.19", + "@patternfly/patternfly": "6.5.0-prerelease.20", "@patternfly/react-catalog-view-extension": "6.2.0", "@patternfly/react-charts": "8.5.0-prerelease.4", "@patternfly/react-code-editor": "6.5.0-prerelease.9", @@ -23,8 +23,8 @@ "@patternfly/quickstarts": "6.4.0", "@patternfly/react-virtualized-extension": "6.1.0", "@patternfly/react-templates": "6.5.0-prerelease.9", - "@patternfly/chatbot": "6.4.1", - "@patternfly/react-data-view": "6.5.0-prerelease.10" + "@patternfly/chatbot": "6.5.0-prerelease.10", + "@patternfly/react-data-view": "6.4.0" } }, { diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index e1debcf45b..ca34efaa00 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -32,6 +32,7 @@ "@patternfly/react-topology": "6.4.0", "@patternfly/react-user-feedback": "6.2.0", "@patternfly/react-virtualized-extension": "6.1.0", + "@xyflow/react": "^12.9.0", "echarts": "^5.6.0", "file-saver": "^2.0.5", "marked": "^15.0.7", diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/Compass.md b/packages/documentation-site/patternfly-docs/content/demos/Compass/Compass.md new file mode 100644 index 0000000000..2c01e23029 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/demos/Compass/Compass.md @@ -0,0 +1,45 @@ +--- +id: Compass +section: PatternFly-AI +subsection: Generative UIs +--- + +## Demo + +import { useState, memo, useCallback, useRef, useEffect } from 'react'; + +import { ActionsColumn } from "@patternfly/react-table"; +import { DataViewTable } from "@patternfly/react-data-view/dist/dynamic/DataViewTable"; +import { DataViewToolbar } from "@patternfly/react-data-view/dist/dynamic/DataViewToolbar"; +import { DataViewTextFilter } from "@patternfly/react-data-view/dist/dynamic/DataViewTextFilter"; + +import { MessageBar } from '@patternfly/chatbot'; + +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; +import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon'; +import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"; +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 wallpaperLight from './assets/wallpaper-light.png' +import wallpaperDark from './assets/wallpaper-dark.png' +import imgAvatar from './assets/avatar.jpg'; + +## Demo notes + +To facilitate building a compass layout, there several are useful variants and props exposed on other PatternFly components that may be useful: + +- `isPlain` on [Card](/components/card#modifiers), [DataList](/components/data-list#plain), and [Table](/components/table#plain). This flag will set a transparent background for these components, allowing the glass effect in a wrapping `CompassPanel` to appear as the background. +- `isVertical` on [ActionList](/components/action-list#vertical-action-list). This flag sets the orientation on `ActionList` to support vertical icon lists for the sidebars. +- `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation. +- `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape. +- `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look. +- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component. +- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/patternfly-ai/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. + +### Card and data view layout + +```js file="./CompassIntegrationsDemo.tsx" isFullscreen +``` diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/CompassIntegrationsDemo.tsx b/packages/documentation-site/patternfly-docs/content/demos/Compass/CompassIntegrationsDemo.tsx new file mode 100644 index 0000000000..0c45b89c7e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/demos/Compass/CompassIntegrationsDemo.tsx @@ -0,0 +1,825 @@ +import React, { 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, + MenuToggleElement, + 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'; + +export const RHAiExperienceIcon: React.FunctionComponent = () => { + return ( + + ); +}; + +export const RHAutomationsLogo: React.FunctionComponent = () => { + return ( + + ); +}; + +export const CompassIntegrationsDemo: React.FunctionComponent = () => { + const [isThinking, setIsThinking] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [activeDisplay, setActiveDisplay] = useState<"table" | "card">("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 = ( + <> + + {}} + component={TabsComponent.nav} + aria-label="Compass global" + inset={{ default: 'insetXl' }} + > + Tab 1} /> + Integrations} /> + Tab 3} /> + Disabled Tab 4} isDisabled /> + + + + ); + + const startSidebarContent = ( + + + + + + + + + + + + + + )} + + + + + ); + } +); + +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: [number, number] = [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" }, + ] as any); + const { screenToFlowPosition } = useReactFlow(); + const onConnect = useCallback( + (params: any) => setEdges((eds) => addEdge(params, eds)), + [] + ); + + const onConnectEnd: any = 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] as [number, number], + }; + + setNodes((nds) => [...nds, newNode]); + setEdges((eds) => [ + ...eds, + { + id, + source: connectionState.fromNode?.id || "", + target: id, + }, + ]); + } + }, + [screenToFlowPosition] + ); + + return ( +
+ + + +
+ ); +}; + +export const CompassReactFlowDemo = () => ( +
+ + + +
+); diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/ReactFlow.md b/packages/documentation-site/patternfly-docs/content/demos/Compass/ReactFlow.md new file mode 100644 index 0000000000..5be8497a34 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/demos/Compass/ReactFlow.md @@ -0,0 +1,51 @@ +--- +id: React flow +section: PatternFly-AI +subsection: Generative UIs +--- + +## Demo + +import { useState, memo, useCallback, useRef } from 'react'; + +import { + Background, + ReactFlow, + useNodesState, + useEdgesState, + addEdge, + useReactFlow, + ReactFlowProvider, + Handle, + Position, +} from "@xyflow/react"; + +import "@xyflow/react/dist/style.css"; +import "./reactFlowOverrides.css"; + +### React Flow + +The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. The following is a basic list of overrides used by the example, which also renders custom nodes using PatternFly's `Card` components: + +| React Flow token | PatternFly token suggestion | +| --- | --- | +| --xy-node-border-radius-default | var(--pf-t--global--border--radius--medium) | +| --xy-edge-stroke-default | var(--pf-t--global--border--color--default) | +| --xy-edge-stroke-width-default | var(--pf-t--global--border--width--regular) | +| --xy-edge-stroke-selected-default | var(--pf-t--global--border--color--clicked) | +| --xy-connectionline-stroke-default | var(--pf-t--global--border--color--default) | +| --xy-connectionline-stroke-width-default | var(--pf-t--global--border--width--regular) | +| --xy-attribution-background-color-default | transparent | +| --xy-minimap-background-color-default | var(--pf-t--global--background--color--primary--default) | +| --xy-background-pattern-dots-color-default | var(--pf-t--global--border--color--disabled) | +| --xy-node-color-default | var(--pf-t--global--text--color--regular) | +| --xy-node-border-default | var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default) | +| --xy-node-background-color-default | var(--pf-t--global--background--color--primary--default) | +| --xy-node-group-background-color-default | rgba(240, 240, 240, 0.25) | +| --xy-node-boxshadow-hover-default | var(--pf-t--global--box-shadow--sm) | +| --xy-node-boxshadow-selected-default | var(--pf-t--global--box-shadow--md) | +| --xy-handle-background-color-default | var(--pf-t--global--color--brand--default) | +| --xy-handle-border-color-default | var(--pf-t--global--border--color--alt) | + +```js file="./CompassReactFlowDemo.tsx" +``` \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/avatar.jpg b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/avatar.jpg new file mode 100644 index 0000000000..75a2ed80e1 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/avatar.jpg differ diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/hero-bg.png b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/hero-bg.png new file mode 100644 index 0000000000..a117bdb6cc Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/hero-bg.png differ diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-dark.png b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-dark.png new file mode 100644 index 0000000000..14109c3f2c Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-dark.png differ diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-light.png b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-light.png new file mode 100644 index 0000000000..9a76b0f646 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/demos/Compass/assets/wallpaper-light.png differ diff --git a/packages/documentation-site/patternfly-docs/content/demos/Compass/reactFlowOverrides.css b/packages/documentation-site/patternfly-docs/content/demos/Compass/reactFlowOverrides.css new file mode 100644 index 0000000000..0b6e18088a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/demos/Compass/reactFlowOverrides.css @@ -0,0 +1,68 @@ +.react-flow { + --xy-node-border-radius-default: var(--pf-t--global--border--radius--medium); + --xy-edge-stroke-default: var(--pf-t--global--border--color--default); + --xy-edge-stroke-width-default: var(--pf-t--global--border--width--regular); + --xy-edge-stroke-selected-default: var(--pf-t--global--border--color--clicked); + --xy-connectionline-stroke-default: var(--pf-t--global--border--color--default); + --xy-connectionline-stroke-width-default: var(--pf-t--global--border--width--regular); + --xy-attribution-background-color-default: transparent; + --xy-minimap-background-color-default: var(--pf-t--global--background--color--primary--default); + --xy-background-pattern-dots-color-default: var(--pf-t--global--border--color--disabled); + --xy-background-pattern-line-color-default: yellow; + --xy-background-pattern-cross-color-default: green; + --xy-node-color-default: var(--pf-t--global--text--color--regular); + --xy-node-border-default: var(--pf-t--global--border--width--regular) solid + var(--pf-t--global--border--color--default); + --xy-node-background-color-default: var(--pf-t--global--background--color--primary--default); + --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25); + --xy-node-boxshadow-hover-default: var(--pf-t--global--box-shadow--sm); + --xy-node-boxshadow-selected-default: var(--pf-t--global--box-shadow--md); + --xy-handle-background-color-default: var(--pf-t--global--color--brand--default); + --xy-handle-border-color-default: var(--pf-t--global--border--color--alt); + --xy-selection-background-color-default: rgba(0, 89, 220, 0.08); + --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8); + --xy-controls-button-background-color-default: red; + --xy-controls-button-background-color-hover-default: #f4f4f4; + --xy-controls-button-color-default: inherit; + --xy-controls-button-color-hover-default: inherit; + --xy-controls-button-border-color-default: #eee; + --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); + --xy-resize-background-color-default: #3367d9; + --xy-edge-label-background-color-default: #ffffff; + --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6); + --xy-theme-selected: #f57dbd; + --xy-theme-hover: #c5c5c5; + --xy-theme-edge-hover: black; + --xy-theme-color-focus: #e8e8e8; + --xy-node-boxshadow-default: 0px 3.54px 4.55px 0px #00000005, 0px 3.54px 4.55px 0px #0000000d, + 0px 0.51px 1.01px 0px #0000001a; + --xy-edge-label-color-default: #505050; + --xy-minimap-mask-stroke-color-default: transparent; + --xy-minimap-mask-stroke-width-default: 1; + --xy-minimap-node-background-color-default: #e2e2e2; + --xy-minimap-node-stroke-color-default: transparent; + --xy-minimap-node-stroke-width-default: 2; + --xy-background-color-default: transparent; +} + +/* Added to a Node when hovered. */ +.react-flow__node:not(.react-flow__node-pfCard):hover { + border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--hover); +} + +.react-flow__node:hover { + .pf-v6-c-card { + --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--brand--clicked); + } +} + +/* Added to a Node when selected. */ +.react-flow__node:not(.react-flow__node-pfCard).selected { + border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--brand--clicked); +} + +.react-flow__node.selected { + .pf-v6-c-card { + --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--brand--hover); + } +} diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.source.js b/packages/documentation-site/patternfly-docs/patternfly-docs.source.js index f1566faace..07245019b1 100644 --- a/packages/documentation-site/patternfly-docs/patternfly-docs.source.js +++ b/packages/documentation-site/patternfly-docs/patternfly-docs.source.js @@ -1,33 +1,19 @@ -const path = require("path"); +const path = require('path'); module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { // Note: you must source props before sourcing the markdown files, otherwise the props table won't be rendered. Also // source function docs (by calling sourceFunctionDocs with the package name) before sourcing markdown as well. - const contentBase = path.join(__dirname, "../patternfly-docs/content"); - const reactPropsIgnore = [ - "/**/examples/**", - "/**/__mocks__/**", - "/**/__tests__/**", - "/**/*.test.tsx", - ]; - sourceMD(path.join(contentBase, "extensions/**/*.md"), "extensions"); - if (!(process.env.EXTENSIONS_ONLY === "true")) { - sourceMD(path.join(contentBase, "contribute/**/*.md"), "pages-contribute"); - sourceMD( - path.join(contentBase, "get-started/**/*.md"), - "pages-get-started" - ); - sourceMD( - path.join(contentBase, "developer-resources/**/*.md"), - "developer-resources" - ); - sourceMD(path.join(contentBase, "accessibility/**/*.md"), "accessibility"); - sourceMD( - path.join(contentBase, "design-guidelines/**/*.md"), - "design-guidelines" - ); - sourceMD(path.join(contentBase, "training/**/*.md"), "training"); + const contentBase = path.join(__dirname, '../patternfly-docs/content'); + const reactPropsIgnore = ['/**/examples/**', '/**/__mocks__/**', '/**/__tests__/**', '/**/*.test.tsx']; + sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'extensions'); + if (!(process.env.EXTENSIONS_ONLY === 'true')) { + sourceMD(path.join(contentBase, 'contribute/**/*.md'), 'pages-contribute'); + sourceMD(path.join(contentBase, 'get-started/**/*.md'), 'pages-get-started'); + sourceMD(path.join(contentBase, 'developer-resources/**/*.md'), 'developer-resources'); + sourceMD(path.join(contentBase, 'accessibility/**/*.md'), 'accessibility'); + sourceMD(path.join(contentBase, 'design-guidelines/**/*.md'), 'design-guidelines'); + sourceMD(path.join(contentBase, 'training/**/*.md'), 'training'); sourceMD(path.join(contentBase, 'tokens/**/*.md'), 'tokens'); @@ -36,14 +22,17 @@ module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { sourceMD(path.join(contentBase, 'design-guidelines/**/Animations/*.md'), 'demo'); // Gallery pages - const galleryBase = path.join(__dirname, "../patternfly-docs/pages"); - sourceMD(path.join(galleryBase, "landing-pages/**/*.md"), "landing-pages"); + const galleryBase = path.join(__dirname, '../patternfly-docs/pages'); + sourceMD(path.join(galleryBase, 'landing-pages/**/*.md'), 'landing-pages'); + + // Org demos + sourceMD(path.join(contentBase, 'demos/**/*.md'), 'org-demos'); // Theme pages const themePagesPath = require - .resolve("@patternfly/documentation-framework/package.json") - .replace("package.json", "pages"); - sourceMD(path.join(themePagesPath, "*.md"), "pages-overview"); + .resolve('@patternfly/documentation-framework/package.json') + .replace('package.json', 'pages'); + sourceMD(path.join(themePagesPath, '*.md'), 'pages-overview'); // Design tokens const designTokensPath = require @@ -52,81 +41,49 @@ module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { sourceMD(path.join(designTokensPath, '/*.md'), 'tokens'); // Core MD - const coreDocsPath = require - .resolve("@patternfly/patternfly/package.json") - .replace("package.json", "docs"); - const coreDocsIgnore = path.join(coreDocsPath, "/pages/**"); // Compatibility for old gatsby workspace - sourceMD( - path.join(coreDocsPath, "!(demos)/**/examples/**/*.md"), - "html", - coreDocsIgnore - ); - sourceMD( - path.join(coreDocsPath, "demos/**/*.md"), - "html-demos", - coreDocsIgnore - ); - sourceMD( - path.join(coreDocsPath, "components/**/deprecated/**/*.md"), - "html-deprecated", - coreDocsIgnore - ); + const coreDocsPath = require.resolve('@patternfly/patternfly/package.json').replace('package.json', 'docs'); + const coreDocsIgnore = path.join(coreDocsPath, '/pages/**'); // Compatibility for old gatsby workspace + sourceMD(path.join(coreDocsPath, '!(demos)/**/examples/**/*.md'), 'html', coreDocsIgnore); + sourceMD(path.join(coreDocsPath, 'demos/**/*.md'), 'html-demos', coreDocsIgnore); + sourceMD(path.join(coreDocsPath, 'components/**/deprecated/**/*.md'), 'html-deprecated', coreDocsIgnore); // React props - const reactCorePath = require - .resolve("@patternfly/react-core/package.json") - .replace("package.json", "src"); - const reactTablePath = require - .resolve("@patternfly/react-table/package.json") - .replace("package.json", "src"); + const reactCorePath = require.resolve('@patternfly/react-core/package.json').replace('package.json', 'src'); + const reactTablePath = require.resolve('@patternfly/react-table/package.json').replace('package.json', 'src'); const reactCodeEditorPath = require - .resolve("@patternfly/react-code-editor/package.json") - .replace("package.json", "src"); - const reactChartsPath = require - .resolve("@patternfly/react-charts/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-code-editor/package.json') + .replace('package.json', 'src'); + const reactChartsPath = require.resolve('@patternfly/react-charts/package.json').replace('package.json', 'src'); const reactDragDropPath = require - .resolve("@patternfly/react-drag-drop/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-drag-drop/package.json') + .replace('package.json', 'src'); const reactTemplatesPath = require - .resolve("@patternfly/react-templates/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-templates/package.json') + .replace('package.json', 'src'); const reactTopologyPath = require - .resolve("@patternfly/react-topology/package.json") - .replace("package.json", "patternfly-docs/content/examples"); + .resolve('@patternfly/react-topology/package.json') + .replace('package.json', 'patternfly-docs/content/examples'); - sourceProps(path.join(reactCorePath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactTablePath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactCodeEditorPath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactChartsPath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactDragDropPath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactTopologyPath, "/**/*.tsx"), reactPropsIgnore); - sourceProps(path.join(reactTemplatesPath, "/**/*.tsx"), reactPropsIgnore); + sourceProps(path.join(reactCorePath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactTablePath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactCodeEditorPath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactChartsPath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactDragDropPath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactTopologyPath, '/**/*.tsx'), reactPropsIgnore); + sourceProps(path.join(reactTemplatesPath, '/**/*.tsx'), reactPropsIgnore); // React MD - sourceMD(path.join(reactCorePath, "/components/**/examples/*.md"), "react"); - sourceMD(path.join(reactCorePath, "/layouts/**/examples/*.md"), "react"); - sourceMD( - path.join(reactCorePath, "/next/components/**/examples/*.md"), - "react-next" - ); - sourceMD( - path.join(reactCorePath, "/deprecated/components/**/examples/*.md"), - "react-deprecated" - ); - sourceMD(path.join(reactCorePath, "/**/demos/**/*.md"), "react-demos"); + sourceMD(path.join(reactCorePath, '/components/**/examples/*.md'), 'react'); + sourceMD(path.join(reactCorePath, '/layouts/**/examples/*.md'), 'react'); + sourceMD(path.join(reactCorePath, '/next/components/**/examples/*.md'), 'react-next'); + sourceMD(path.join(reactCorePath, '/deprecated/components/**/examples/*.md'), 'react-deprecated'); + sourceMD(path.join(reactCorePath, '/**/demos/**/*.md'), 'react-demos'); // React-table MD - sourceMD( - path.join(reactTablePath, "/components/**/examples/*.md"), - "react" - ); - sourceMD( - path.join(reactTablePath, "/deprecated/components/**/examples/*.md"), - "react-deprecated" - ); - sourceMD(path.join(reactTablePath, "/**/demos/*.md"), "react-demos"); + sourceMD(path.join(reactTablePath, '/components/**/examples/*.md'), 'react'); + sourceMD(path.join(reactTablePath, '/deprecated/components/**/examples/*.md'), 'react-deprecated'); + sourceMD(path.join(reactTablePath, '/**/demos/*.md'), 'react-demos'); // Charts MD sourceMD(path.join(reactChartsPath, '/echarts/components/**/docs/*.md'), 'ECharts-docs'); // Alternate docs for examples @@ -136,166 +93,115 @@ module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { sourceMD(path.join(reactChartsPath, '/victory/next/components/**/examples/*.md'), '-Victory-next'); // React-code-editor MD - sourceMD(path.join(reactCodeEditorPath, "/**/examples/*.md"), "react"); + sourceMD(path.join(reactCodeEditorPath, '/**/examples/*.md'), 'react'); // Drag drop MD - sourceMD(path.join(reactDragDropPath, "/**/examples/*.md"), "react"); + sourceMD(path.join(reactDragDropPath, '/**/examples/*.md'), 'react'); // Templates MD - sourceMD( - path.join(reactTemplatesPath, "/**/examples/*.md"), - "react-templates" - ); + sourceMD(path.join(reactTemplatesPath, '/**/examples/*.md'), 'react-templates'); // React-topology MD - sourceMD(path.join(reactTopologyPath, "/**/*.md"), "extensions"); + sourceMD(path.join(reactTopologyPath, '/**/*.md'), 'extensions'); // React OUIA MD - sourceMD(path.join(reactCorePath, "/**/helpers/OUIA/*.md"), "react"); + sourceMD(path.join(reactCorePath, '/**/helpers/OUIA/*.md'), 'react'); } // EXTENSIONS: // Quickstarts extension - const qsPath = require.resolve("@patternfly/quickstarts/package.json"); - const qsContentBase = path.join( - qsPath.replace("package.json", "dist"), - "/patternfly-docs/quick-starts" - ); - const qsPropsBase = qsPath.replace("package.json", "src"); - const qsPropsIgnore = ["**/*.test.tsx", "**/examples/*.tsx"]; + const qsPath = require.resolve('@patternfly/quickstarts/package.json'); + const qsContentBase = path.join(qsPath.replace('package.json', 'dist'), '/patternfly-docs/quick-starts'); + const qsPropsBase = qsPath.replace('package.json', 'src'); + const qsPropsIgnore = ['**/*.test.tsx', '**/examples/*.tsx']; - sourceProps(path.join(qsPropsBase, "/**/*.tsx"), qsPropsIgnore); - sourceMD(path.join(qsContentBase, "**/*.md")); + sourceProps(path.join(qsPropsBase, '/**/*.tsx'), qsPropsIgnore); + sourceMD(path.join(qsContentBase, '**/*.md')); // Catalog view extension - const catalogViewPath = require.resolve( - "@patternfly/react-catalog-view-extension/package.json" - ); - const reactCatalogViewDocsPath = catalogViewPath.replace( - "package.json", - "patternfly-docs" - ); - const reactCatalogViewSrcPath = catalogViewPath.replace( - "package.json", - "src/components" - ); - - sourceProps( - path.join(reactCatalogViewSrcPath, "/**/*.tsx"), - reactPropsIgnore - ); - sourceMD(path.join(reactCatalogViewDocsPath, "/**/examples/*.md"), "react"); + const catalogViewPath = require.resolve('@patternfly/react-catalog-view-extension/package.json'); + const reactCatalogViewDocsPath = catalogViewPath.replace('package.json', 'patternfly-docs'); + const reactCatalogViewSrcPath = catalogViewPath.replace('package.json', 'src/components'); + + sourceProps(path.join(reactCatalogViewSrcPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(reactCatalogViewDocsPath, '/**/examples/*.md'), 'react'); // Console extension - const consolePath = require.resolve("@patternfly/react-console/package.json"); - const consoleDocsPath = consolePath.replace( - "package.json", - "patternfly-docs/content/extensions/react-console" - ); - const consoleSrcPath = consolePath.replace("package.json", "src/components"); + const consolePath = require.resolve('@patternfly/react-console/package.json'); + const consoleDocsPath = consolePath.replace('package.json', 'patternfly-docs/content/extensions/react-console'); + const consoleSrcPath = consolePath.replace('package.json', 'src/components'); - sourceProps(path.join(consoleSrcPath, "/**/*.tsx"), reactPropsIgnore); - sourceMD(path.join(consoleDocsPath, "/examples/*.md"), "react"); + sourceProps(path.join(consoleSrcPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(consoleDocsPath, '/examples/*.md'), 'react'); // Log viewer extension const reactLogViewerPath = require - .resolve("@patternfly/react-log-viewer/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-log-viewer/package.json') + .replace('package.json', 'src'); const logViewerContentBase = require - .resolve("@patternfly/react-log-viewer/package.json") - .replace( - "package.json", - "patternfly-docs/content/extensions/react-log-viewer" - ); - - sourceProps(path.join(reactLogViewerPath, "/**/*.tsx"), reactPropsIgnore); - sourceMD(path.join(logViewerContentBase, "/**/examples/*.md"), "react"); - sourceMD(path.join(logViewerContentBase, "/**/demos/*.md"), "react-demos"); - - // Data view extension - const reactDataViewPath = require - .resolve("@patternfly/react-data-view/package.json") - .replace("package.json", "src"); - - const reactDataViewContentBase = require - .resolve("@patternfly/react-data-view/package.json") - .replace( - "package.json", - "patternfly-docs/content/extensions/data-view" - ); - - sourceProps(path.join(reactDataViewPath, "/**/*.tsx"), reactPropsIgnore); - sourceMD(path.join(reactDataViewContentBase, "/examples/**/*.md"), "react"); + .resolve('@patternfly/react-log-viewer/package.json') + .replace('package.json', 'patternfly-docs/content/extensions/react-log-viewer'); + + sourceProps(path.join(reactLogViewerPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(logViewerContentBase, '/**/examples/*.md'), 'react'); + sourceMD(path.join(logViewerContentBase, '/**/demos/*.md'), 'react-demos'); + + // Data view extension + const reactDataViewPath = require.resolve('@patternfly/react-data-view/package.json').replace('package.json', 'src'); + + const reactDataViewContentBase = require + .resolve('@patternfly/react-data-view/package.json') + .replace('package.json', 'patternfly-docs/content/extensions/data-view'); + + sourceProps(path.join(reactDataViewPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(reactDataViewContentBase, '/examples/**/*.md'), 'react'); // User feedback extension const reactUserFeedbackPath = require - .resolve("@patternfly/react-user-feedback/package.json") - .replace("package.json", "patternfly-docs/"); + .resolve('@patternfly/react-user-feedback/package.json') + .replace('package.json', 'patternfly-docs/'); - sourceProps(path.join(reactUserFeedbackPath, "/**/*.tsx"), reactPropsIgnore); - sourceMD(path.join(reactUserFeedbackPath, "/**/examples/*.md"), "react"); - sourceMD( - path.join(reactUserFeedbackPath, "/**/design-guidelines/*.md"), - "design-guidelines" - ); + sourceProps(path.join(reactUserFeedbackPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(reactUserFeedbackPath, '/**/examples/*.md'), 'react'); + sourceMD(path.join(reactUserFeedbackPath, '/**/design-guidelines/*.md'), 'design-guidelines'); // component groups extension const reactComponentGroupsPath = require - .resolve("@patternfly/react-component-groups/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-component-groups/package.json') + .replace('package.json', 'src'); const reactComponentGroupsBase = require - .resolve("@patternfly/react-component-groups/package.json") - .replace( - "package.json", - "patternfly-docs/content/extensions/component-groups" - ); - - sourceProps( - path.join(reactComponentGroupsPath, "/**/*.tsx"), - reactPropsIgnore - ); - sourceMD(path.join(reactComponentGroupsBase, "/**/*.md"), "react"); - sourceMD(path.join(reactComponentGroupsPath, "/**/examples/*.md"), "react"); - sourceMD( - path.join(reactComponentGroupsPath, "/**/design-guidelines/*.md"), - "design-guidelines" - ); + .resolve('@patternfly/react-component-groups/package.json') + .replace('package.json', 'patternfly-docs/content/extensions/component-groups'); + + sourceProps(path.join(reactComponentGroupsPath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(reactComponentGroupsBase, '/**/*.md'), 'react'); + sourceMD(path.join(reactComponentGroupsPath, '/**/examples/*.md'), 'react'); + sourceMD(path.join(reactComponentGroupsPath, '/**/design-guidelines/*.md'), 'design-guidelines'); // Chatbot - const virtualAssistantPath = require - .resolve("@patternfly/chatbot/package.json") - .replace("package.json", "src"); + const virtualAssistantPath = require.resolve('@patternfly/chatbot/package.json').replace('package.json', 'src'); const virtualAssistantBase = require - .resolve("@patternfly/chatbot/package.json") - .replace( - "package.json", - "patternfly-docs/content/extensions/chatbot" - ); - - sourceProps( - path.join(virtualAssistantPath, "/**/*.tsx"), - reactPropsIgnore - ); + .resolve('@patternfly/chatbot/package.json') + .replace('package.json', 'patternfly-docs/content/extensions/chatbot'); + + sourceProps(path.join(virtualAssistantPath, '/**/*.tsx'), reactPropsIgnore); sourceMD(path.join(virtualAssistantBase, 'examples/**/*.md'), 'PatternFly-AI'); sourceMD(path.join(virtualAssistantBase, '*.md'), 'PatternFly-AI'); // Prerelease sections: - if (process.env.PRERELEASE === "true") { + if (process.env.PRERELEASE === 'true') { const reactVirtualizedTablePath = require - .resolve("@patternfly/react-virtualized-extension/package.json") - .replace("package.json", "src"); + .resolve('@patternfly/react-virtualized-extension/package.json') + .replace('package.json', 'src'); const reactVirtualizedTableBase = require - .resolve("@patternfly/react-virtualized-extension/package.json") - .replace("package.json", "patternfly-docs/"); - - sourceProps( - path.join(reactVirtualizedTablePath, "/**/*.tsx"), - reactPropsIgnore - ); - sourceMD(path.join(reactVirtualizedTableBase, "/**/*.md"), "react"); + .resolve('@patternfly/react-virtualized-extension/package.json') + .replace('package.json', 'patternfly-docs/'); + + sourceProps(path.join(reactVirtualizedTablePath, '/**/*.tsx'), reactPropsIgnore); + sourceMD(path.join(reactVirtualizedTableBase, '/**/*.md'), 'react'); } }; diff --git a/yarn.lock b/yarn.lock index ffb341a911..f5cb24e959 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4285,7 +4285,7 @@ __metadata: webpack-dev-server: "npm:5.2.2" webpack-merge: "npm:5.8.0" peerDependencies: - "@patternfly/patternfly": ^6.5.0-prerelease.19 + "@patternfly/patternfly": ^6.5.0-prerelease.20 "@patternfly/react-code-editor": ^6.5.0-prerelease.9 "@patternfly/react-core": ^6.5.0-prerelease.9 "@patternfly/react-table": ^6.5.0-prerelease.9 @@ -4365,7 +4365,7 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.5.0-prerelease.19, @patternfly/patternfly@npm:^6.5.0-prerelease.19": +"@patternfly/patternfly@npm:6.5.0-prerelease.19": version: 6.5.0-prerelease.19 resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.19" checksum: 10c0/581e18b078e146ad72553f8fb1177ffe84e7bfbeb5920f8e7ce7da22dd9c9334fee850cf7e8fe274a8dee72a9b1608aad5cbcc5679b52275970e2801669f56ab @@ -4379,6 +4379,13 @@ __metadata: languageName: node linkType: hard +"@patternfly/patternfly@npm:^6.5.0-prerelease.20": + version: 6.5.0-prerelease.20 + resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.20" + checksum: 10c0/b9bfad6e22009e1d3c97cddbdba01f0b0515115f518485c7d11385cd59c133899321a353dda2dd078ae906ae7796e91e707885a180817a23aba71122d9412c72 + languageName: node + linkType: hard + "@patternfly/quickstarts@npm:6.4.0": version: 6.4.0 resolution: "@patternfly/quickstarts@npm:6.4.0" @@ -4946,10 +4953,10 @@ __metadata: version: 6.5.0-prerelease.9 resolution: "@patternfly/react-templates@npm:6.5.0-prerelease.9" dependencies: - "@patternfly/react-core": "npm:^6.5.0-prerelease.9" - "@patternfly/react-icons": "npm:^6.5.0-prerelease.4" - "@patternfly/react-styles": "npm:^6.5.0-prerelease.4" - "@patternfly/react-tokens": "npm:^6.5.0-prerelease.4" + "@patternfly/react-core": "npm:^6.4.0" + "@patternfly/react-icons": "npm:^6.4.0" + "@patternfly/react-styles": "npm:^6.4.0" + "@patternfly/react-tokens": "npm:^6.4.0" tslib: "npm:^2.8.1" peerDependencies: react: ^17 || ^18 || ^19 @@ -5862,7 +5869,7 @@ __metadata: languageName: node linkType: hard -"@types/d3-drag@npm:*": +"@types/d3-drag@npm:*, @types/d3-drag@npm:^3.0.7": version: 3.0.7 resolution: "@types/d3-drag@npm:3.0.7" dependencies: @@ -5931,7 +5938,7 @@ __metadata: languageName: node linkType: hard -"@types/d3-interpolate@npm:*, @types/d3-interpolate@npm:^3.0.1": +"@types/d3-interpolate@npm:*, @types/d3-interpolate@npm:^3.0.1, @types/d3-interpolate@npm:^3.0.4": version: 3.0.4 resolution: "@types/d3-interpolate@npm:3.0.4" dependencies: @@ -5991,6 +5998,13 @@ __metadata: languageName: node linkType: hard +"@types/d3-selection@npm:^3.0.10": + version: 3.0.11 + resolution: "@types/d3-selection@npm:3.0.11" + checksum: 10c0/0c512956c7503ff5def4bb32e0c568cc757b9a2cc400a104fc0f4cfe5e56d83ebde2a97821b6f2cb26a7148079d3b86a2f28e11d68324ed311cf35c2ed980d1d + languageName: node + linkType: hard + "@types/d3-shape@npm:*, @types/d3-shape@npm:^3.1.0": version: 3.1.6 resolution: "@types/d3-shape@npm:3.1.6" @@ -6030,7 +6044,16 @@ __metadata: languageName: node linkType: hard -"@types/d3-zoom@npm:*": +"@types/d3-transition@npm:^3.0.8": + version: 3.0.9 + resolution: "@types/d3-transition@npm:3.0.9" + dependencies: + "@types/d3-selection": "npm:*" + checksum: 10c0/4f68b9df7ac745b3491216c54203cbbfa0f117ae4c60e2609cdef2db963582152035407fdff995b10ee383bae2f05b7743493f48e1b8e46df54faa836a8fb7b5 + languageName: node + linkType: hard + +"@types/d3-zoom@npm:*, @types/d3-zoom@npm:^3.0.8": version: 3.0.8 resolution: "@types/d3-zoom@npm:3.0.8" dependencies: @@ -6573,6 +6596,37 @@ __metadata: languageName: node linkType: hard +"@xyflow/react@npm:^12.9.0": + version: 12.9.2 + resolution: "@xyflow/react@npm:12.9.2" + dependencies: + "@xyflow/system": "npm:0.0.72" + classcat: "npm:^5.0.3" + zustand: "npm:^4.4.0" + peerDependencies: + react: ">=17" + react-dom: ">=17" + checksum: 10c0/1cef85006f4581ce1b8bc077361661a789a1c127fd22676d24d3b54949cd195ccbbbaf0199b553acc8e139d4d845aeab3fc4f86f25545ac52a4145fe94c8631c + languageName: node + linkType: hard + +"@xyflow/system@npm:0.0.72": + version: 0.0.72 + resolution: "@xyflow/system@npm:0.0.72" + dependencies: + "@types/d3-drag": "npm:^3.0.7" + "@types/d3-interpolate": "npm:^3.0.4" + "@types/d3-selection": "npm:^3.0.10" + "@types/d3-transition": "npm:^3.0.8" + "@types/d3-zoom": "npm:^3.0.8" + d3-drag: "npm:^3.0.0" + d3-interpolate: "npm:^3.0.1" + d3-selection: "npm:^3.0.0" + d3-zoom: "npm:^3.0.0" + checksum: 10c0/832f2b0bacb8bd4403e9c5ec8a205758b1ee54dc2bcf580477f2b7de1a01accca0485a32b7dedfc13da7893f4be914b486882ce6481a151b86a29b1ba1579a6d + languageName: node + linkType: hard + "@yarnpkg/lockfile@npm:^1.1.0": version: 1.1.0 resolution: "@yarnpkg/lockfile@npm:1.1.0" @@ -8357,6 +8411,13 @@ __metadata: languageName: node linkType: hard +"classcat@npm:^5.0.3": + version: 5.0.5 + resolution: "classcat@npm:5.0.5" + checksum: 10c0/ff8d273055ef9b518529cfe80fd0486f7057a9917373807ff802d75ceb46e8f8e148f41fa094ee7625c8f34642cfaa98395ff182d9519898da7cbf383d4a210d + languageName: node + linkType: hard + "classnames@npm:^2.2.5": version: 2.5.1 resolution: "classnames@npm:2.5.1" @@ -9377,7 +9438,7 @@ __metadata: languageName: node linkType: hard -"d3-drag@npm:2 - 3, d3-drag@npm:3": +"d3-drag@npm:2 - 3, d3-drag@npm:3, d3-drag@npm:^3.0.0": version: 3.0.0 resolution: "d3-drag@npm:3.0.0" dependencies: @@ -9542,7 +9603,7 @@ __metadata: languageName: node linkType: hard -"d3-selection@npm:2 - 3, d3-selection@npm:3": +"d3-selection@npm:2 - 3, d3-selection@npm:3, d3-selection@npm:^3.0.0": version: 3.0.0 resolution: "d3-selection@npm:3.0.0" checksum: 10c0/e59096bbe8f0cb0daa1001d9bdd6dbc93a688019abc97d1d8b37f85cd3c286a6875b22adea0931b0c88410d025563e1643019161a883c516acf50c190a11b56b @@ -9621,7 +9682,7 @@ __metadata: languageName: node linkType: hard -"d3-zoom@npm:3": +"d3-zoom@npm:3, d3-zoom@npm:^3.0.0": version: 3.0.0 resolution: "d3-zoom@npm:3.0.0" dependencies: @@ -17989,7 +18050,7 @@ __metadata: resolution: "patternfly-org-workspace@workspace:." dependencies: "@octokit/rest": "npm:^19.0.7" - "@patternfly/patternfly": "npm:^6.5.0-prerelease.19" + "@patternfly/patternfly": "npm:^6.5.0-prerelease.20" "@patternfly/react-code-editor": "npm:^6.5.0-prerelease.9" "@patternfly/react-core": "npm:^6.5.0-prerelease.9" "@patternfly/react-table": "npm:^6.5.0-prerelease.9" @@ -18023,6 +18084,7 @@ __metadata: "@patternfly/react-topology": "npm:6.4.0" "@patternfly/react-user-feedback": "npm:6.2.0" "@patternfly/react-virtualized-extension": "npm:6.1.0" + "@xyflow/react": "npm:^12.9.0" classnames: "npm:^2.2.5" echarts: "npm:^5.6.0" file-saver: "npm:^2.0.5" @@ -22817,6 +22879,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.2.2": + version: 1.6.0 + resolution: "use-sync-external-store@npm:1.6.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: 10c0/35e1179f872a53227bdf8a827f7911da4c37c0f4091c29b76b1e32473d1670ebe7bcd880b808b7549ba9a5605c233350f800ffab963ee4a4ee346ee983b6019b + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" @@ -24523,6 +24594,26 @@ __metadata: languageName: node linkType: hard +"zustand@npm:^4.4.0": + version: 4.5.7 + resolution: "zustand@npm:4.5.7" + dependencies: + use-sync-external-store: "npm:^1.2.2" + peerDependencies: + "@types/react": ">=16.8" + immer: ">=9.0.6" + react: ">=16.8" + peerDependenciesMeta: + "@types/react": + optional: true + immer: + optional: true + react: + optional: true + checksum: 10c0/55559e37a82f0c06cadc61cb08f08314c0fe05d6a93815e41e3376130c13db22a5017cbb0cd1f018c82f2dad0051afe3592561d40f980bd4082e32005e8a950c + languageName: node + linkType: hard + "zwitch@npm:^2.0.0, zwitch@npm:^2.0.4": version: 2.0.4 resolution: "zwitch@npm:2.0.4"