diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d1cf91c525c..11429db6a92 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,9 @@ "tslib": "^2.8.1" }, "devDependencies": { + "@patternfly/chatbot": "6.4.0-prerelease.26", "@patternfly/patternfly": "6.4.0-prerelease.2", + "@patternfly/react-data-view": "6.4.0-prerelease.4", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md new file mode 100644 index 00000000000..9d169c4e504 --- /dev/null +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -0,0 +1,36 @@ +--- +id: Compass +section: patterns +--- + +import { useState, Fragment } from 'react'; + + + +import { ActionsColumn } from '@patternfly/react-table'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; +import pfLogo from '../assets/PF-HorizontalLogo-Color.svg'; +import pfLogoSm from '../assets/PF-IconLogo.svg'; +import imgAvatar from '../assets/avatarImg.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon'; +import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; +import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; +import ListIcon from "@patternfly/react-icons/dist/esm/icons/list-icon"; +import ThIcon from "@patternfly/react-icons/dist/esm/icons/th-icon"; + +import './examples/compass.css'; + + + +## Compass + +### Compass + +```ts file="./examples/Compass.tsx" isFullscreen + +``` diff --git a/packages/react-core/src/demos/Compass/examples/Compass.tsx b/packages/react-core/src/demos/Compass/examples/Compass.tsx new file mode 100644 index 00000000000..da9a7155b2a --- /dev/null +++ b/packages/react-core/src/demos/Compass/examples/Compass.tsx @@ -0,0 +1,440 @@ +// eslint-disable-next-line no-restricted-imports +import React, { Fragment, useState } from 'react'; +import { + ActionList, + ActionListItem, + Button, + Page, + PageSection, + Tabs, + Tab, + TabsComponent, + TabTitleText, + DropdownItem, + Dropdown, + MenuToggle, + Avatar, + DropdownList, + MenuToggleElement, + ToolbarGroup, + Toolbar, + ToolbarContent, + ToolbarItem, + Title, + SearchInput, + Card, + CardHeader, + CardTitle, + CardBody, + ToggleGroupItem, + ToggleGroup, + Gallery, + // Pagination, + Flex, + FlexItem +} from '@patternfly/react-core'; +// import { MessageBar } from '@patternfly/chatbot'; +// 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 { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters'; +// import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter'; +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 OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; +import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon'; +import imgAvatar from '../../assets/avatarImg.svg'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; + +export const Compass: React.FunctionComponent = () => { + const [activeSection, setActiveSection] = useState(4); + const [activeSubsection, setActiveSubsection] = useState(1); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [integrationTableDisplay, setIntegrationTableDisplay] = useState(false); + + const onDropdownSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + _value: string | number | undefined + ) => { + setIsDropdownOpen(false); + }; + + const onDropdownToggle = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + const handleTabClick = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveSection(tabIndex as number); + }; + + const handleSubsectionClick = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveSubsection(tabIndex as number); + }; + + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); + + const userDropdown = ( + setIsDropdownOpen(isOpen)} + popperProps={{ position: 'right' }} + toggle={(toggleRef: React.Ref) => ( + } + > + Ned Username + + )} + > + {userDropdownItems} + + ); + + const compassAutomations = ( + + + Title section: Automations + Content section + + + ); + + 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: '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: '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: 'Connected', + type: 'MCP Server', + url: 'k8s.example.com' + } + ]; + + // const rowActions = [ + // { + // title: 'Some action', + // onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console + // }, + // { + // title:
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 }) => [ + // name, + // type, + // { cell: , props: { isActionCell: true } } + // ]); + + // const columns = ['Name', 'Type']; + + const cardIntegration = ( + <> + + + + + + + + + } + aria-label="grid icon button" + isSelected={!integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(false)} + > + } + aria-label="list icon button" + isSelected={integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(true)} + > + + + + + {integrations.map((product) => ( + + + {}} + toggle={(toggleRef: React.Ref) => ( + } + /> + )} + popperProps={{ position: 'right' }} + /> + + ) + }} + > + {product.name} + + {product.description} + + ))} + + + ); + const dataViewIntegration = ( + <> + {/* {}} + filters={ + {}} values={{}}> + + + + } + actions={ + + } + aria-label="grid icon button" + isSelected={!integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(true)} + > + } + aria-label="list icon button" + isSelected={integrationTableDisplay} + onChange={() => setIntegrationTableDisplay(false)} + > + + } + pagination={} + /> */} + {/* */} + + ); + + const compassIntegrations = ( + + + + + + Integrations + + + + + + + + + + + +