chore(DashboardHeader) convert to TS

chore(DashboardWrapper) convert to TS move to utils and update imports fix md line fix build errors update columnmanagement dashboardwrapper import testing move files out of utils change to absolute imports change to relative imports for each component update page import add rollup plugin-typescript rename rollup.config.js to rollup.config.mjs revert build changes and remove imports from top of md files revert yarn.lock, revert to index.d.ts, update jumplinks import
patternfly · Sep 21, 2023 · bf2ce5c · bf2ce5c
1 parent 0f8ac62
commit bf2ce5c
Show file tree

Hide file tree

Showing 39 changed files with 831 additions and 415 deletions.
diff --git a/packages/react-core/src/components/Page/DashboardHeader.tsx b/packages/react-core/src/components/Page/DashboardHeader.tsx
@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Avatar } from '../Avatar';
+import { Brand } from '../Brand';
+import { Button, ButtonVariant } from '../Button';
+import { Divider } from '../Divider';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '../Dropdown';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent } from '../Masthead';
+import { MenuToggle } from '../MenuToggle';
+import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '../Toolbar';
+import { PageToggleButton } from './PageToggleButton';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+interface DashboardHeaderProps {
+  notificationBadge?: React.ReactNode;
+}
+
+export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen((prevIsDropdownOpen) => !prevIsDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen((prevIsKebabDropdownOpen) => !prevIsKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(false);
+  };
+
+  const onFullKebabToggle = () => {
+    setIsFullKebabDropdownOpen((prevIsFullKebabDropdownOpen) => !prevIsFullKebabDropdownOpen);
+  };
+
+  const onFullKebabSelect = () => {
+    setIsFullKebabDropdownOpen(false);
+  };
+
+  return (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="icon-button-group"
+              align={{ default: 'alignRight' }}
+              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
+              {notificationBadge ? (
+                notificationBadge
+              ) : (
+                <ToolbarItem>
+                  <Button
+                    aria-label="Notifications"
+                    variant={ButtonVariant.plain}
+                    icon={<BellIcon />}
+                    onClick={() => {}}
+                  />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+                <Dropdown
+                  isOpen={isKebabDropdownOpen}
+                  onSelect={onKebabDropdownSelect}
+                  onOpenChange={setIsKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label="Settings and help"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+              <ToolbarItem visibility={{ md: 'hidden' }}>
+                <Dropdown
+                  isOpen={isFullKebabDropdownOpen}
+                  onSelect={onFullKebabSelect}
+                  onOpenChange={setIsFullKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label="Toolbar menu"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label="User actions">
+                    <DropdownList>{userDropdownItems}</DropdownList>
+                  </DropdownGroup>
+                  <Divider />
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                onOpenChange={setIsDropdownOpen}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef: React.RefObject<any>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    Ned Username
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+DashboardHeader.displayName = 'DashboardHeader';
diff --git a/packages/react-core/src/components/Page/DashboardWrapper.tsx b/packages/react-core/src/components/Page/DashboardWrapper.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { Breadcrumb, BreadcrumbItem } from '../Breadcrumb';
+import { Nav, NavItem, NavList } from '../Nav';
+import { Page, PageSection, PageSidebar, PageSidebarBody } from '../Page';
+import { SkipToContent } from '../SkipToContent';
+import { Text, TextContent } from '../Text';
+import { DashboardHeader } from './DashboardHeader';
+
+interface DashboardWrapperProps {
+  children: React.ReactNode;
+  mainContainerId?: string;
+  breadcrumb?: React.ReactNode;
+  header?: React.ReactNode;
+  sidebar?: React.ReactNode;
+  sidebarNavOpen?: boolean;
+  onPageResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) => void;
+  hasNoBreadcrumb?: boolean;
+  notificationDrawer?: React.ReactNode;
+  isNotificationDrawerExpanded?: boolean;
+  hasPageTemplateTitle?: boolean;
+}
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
+  children,
+  mainContainerId,
+  breadcrumb,
+  header,
+  sidebar,
+  sidebarNavOpen,
+  onPageResize,
+  hasNoBreadcrumb,
+  notificationDrawer,
+  isNotificationDrawerExpanded,
+  hasPageTemplateTitle,
+  ...pageProps
+}) => {
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  let renderedBreadcrumb;
+  if (!hasNoBreadcrumb) {
+    renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
+  }
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const _sidebar = (
+    <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const PageSkipToContent = (
+    <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      header={header !== undefined ? header : <DashboardHeader />}
+      sidebar={sidebar !== undefined ? sidebar : _sidebar}
+      isManagedSidebar
+      skipToContent={PageSkipToContent}
+      breadcrumb={renderedBreadcrumb}
+      mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
+      notificationDrawer={notificationDrawer}
+      isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+      {...(typeof onPageResize === 'function' && {
+        onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
+          onPageResize(event, resizeObject)
+      })}
+      {...pageProps}
+    >
+      {hasPageTemplateTitle && PageTemplateTitle}
+      {children}
+    </Page>
+  );
+};
+DashboardWrapper.displayName = 'DashboardWrapper';
diff --git a/packages/react-core/src/components/Page/index.ts b/packages/react-core/src/components/Page/index.ts
@@ -7,3 +7,5 @@ export * from './PageSection';
 export * from './PageNavigation';
 export * from './PageToggleButton';
 export * from './PageContext';
+export * from './DashboardHeader';
+export * from './DashboardWrapper';
diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md
@@ -6,8 +6,6 @@ section: components
 import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from './examples/DashboardWrapper';
-import DashboardHeader from './examples/DashboardHeader';
 
 ## Demos
 

diff --git a/packages/react-core/src/demos/BackToTop.md b/packages/react-core/src/demos/BackToTop.md
@@ -3,8 +3,6 @@ id: Back to top
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 ## Demos
 
 ### Using name selector

diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
@@ -3,8 +3,6 @@ id: Banner
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 ## Demos
 
 ### Basic sticky banner
@@ -15,6 +13,7 @@ import {
   Banner,
   Card,
   CardBody,
+  DashboardWrapper,
   Flex,
   Gallery,
   GalleryItem,
@@ -23,7 +22,6 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BannerDemo extends React.Component {
   render() {
@@ -78,6 +76,7 @@ import {
   Banner,
   Card,
   CardBody,
+  DashboardWrapper,
   Flex,
   FlexItem,
   Gallery,
@@ -87,7 +86,6 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BannerDemo extends React.Component {
   render() {

diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
@@ -17,7 +17,6 @@ import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 ## Demos
 

diff --git a/packages/react-core/src/demos/Card/examples/CardView.tsx b/packages/react-core/src/demos/Card/examples/CardView.tsx
@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
+  DashboardWrapper,
   Divider,
   Dropdown,
   DropdownItem,
@@ -51,7 +52,6 @@ import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import { data } from '@patternfly/react-core/src/demos/Card/examples/CardData.jsx';
 
 export const CardViewBasic: React.FunctionComponent = () => {