From bca619e74f16a841d55ce2b97a22f76b3f891533 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 23 Jul 2025 12:03:27 -0400 Subject: [PATCH 1/8] feat(package): dual module support --- packages/react-charts/package.json | 18 ++ packages/react-code-editor/package.json | 14 ++ packages/react-core/package.json | 14 ++ packages/react-core/src/demos/AlertGroup.md | 4 +- packages/react-core/src/demos/BackToTop.md | 4 +- packages/react-core/src/demos/Banner.md | 13 +- .../react-core/src/demos/CardView/CardView.md | 3 +- .../src/demos/CardView/examples/CardView.tsx | 2 +- .../DataList/examples/DataListActionable.tsx | 2 +- .../demos/DataList/examples/DataListBasic.tsx | 2 +- .../DataListExpandableControlInToolbar.tsx | 2 +- .../DataListStaticBottomPagination.tsx | 2 +- packages/react-core/src/demos/DataListDemo.md | 7 +- .../demos/DescriptionList/DescriptionList.md | 4 +- .../examples/DescriptionListBasic.tsx | 2 +- .../examples/DescriptionListInDrawer.tsx | 2 +- packages/react-core/src/demos/JumpLinks.md | 21 +- packages/react-core/src/demos/Nav.md | 13 +- .../react-core/src/demos/PrimaryDetail.md | 6 +- packages/react-core/src/demos/Skeleton.md | 5 +- packages/react-core/src/demos/Tabs.md | 18 +- packages/react-core/src/demos/Toolbar.md | 3 +- .../react-core/src/demos/Wizard/WizardDemo.md | 8 +- .../AlertGroupToastWithNotificationDrawer.tsx | 3 +- .../examples/BackToTop/BackToTopNameDemo.tsx | 2 +- .../examples/JumpLinks/JumpLinksWithDrawer.js | 2 +- .../src/demos/examples/Nav/NavDefault.tsx | 3 +- .../src/demos/examples/Nav/NavDrilldown.tsx | 2 +- .../src/demos/examples/Nav/NavExpandable.tsx | 3 +- .../src/demos/examples/Nav/NavGrouped.tsx | 2 +- .../src/demos/examples/Nav/NavHorizontal.tsx | 2 +- .../examples/Nav/NavHorizontalWithSubnav.tsx | 2 +- .../src/demos/examples/Nav/NavWithSubnav.tsx | 3 +- .../PrimaryDetail/PrimaryDetailCardView.tsx | 2 +- .../PrimaryDetailContentPadding.tsx | 2 +- .../PrimaryDetailDataListInCard.tsx | 2 +- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 2 +- .../PrimaryDetailInlineModifier.tsx | 2 +- .../PrimaryDetailSimpleListInCard.tsx | 2 +- .../demos/examples/Skeleton/SkeletonCard.tsx | 2 +- .../src/demos/examples/Tabs/ModalTabs.tsx | 2 +- .../src/demos/examples/Tabs/NestedTabs.tsx | 2 +- .../examples/Tabs/NestedUnindentedTabs.tsx | 2 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 2 +- .../Toolbar/ConsoleLogViewerToolbar.tsx | 2 +- .../src/demos/examples/Wizard/InModal.tsx | 2 +- .../src/demos/examples/Wizard/InPage.tsx | 2 +- .../{demos => helpers}/DashboardHeader.tsx | 14 +- .../{demos => helpers}/DashboardWrapper.tsx | 4 +- packages/react-core/src/helpers/index.ts | 2 + packages/react-drag-drop/package.json | 14 ++ packages/react-table/package.json | 14 ++ .../react-table/src/demos/DashboardHeader.tsx | 236 ------------------ .../src/demos/DashboardWrapper.tsx | 207 --------------- packages/react-table/src/demos/Table.md | 2 +- .../src/demos/examples/TableBulkSelect.tsx | 2 +- .../demos/examples/TableColumnManagement.tsx | 2 +- .../TableColumnManagementWithDraggable.tsx | 2 +- .../src/demos/examples/TableCompact.tsx | 2 +- .../demos/examples/TableCompoundExpansion.tsx | 2 +- .../demos/examples/TableEmptyStateDefault.tsx | 2 +- .../demos/examples/TableEmptyStateError.tsx | 2 +- .../demos/examples/TableEmptyStateLoading.tsx | 2 +- .../demos/examples/TableExpandCollapseAll.tsx | 2 +- .../examples/TableSortableResponsive.tsx | 2 +- .../examples/TableStaticBottomPagination.tsx | 2 +- .../demos/examples/TableStickyFirstColumn.tsx | 2 +- .../src/demos/examples/TableStickyHeader.tsx | 2 +- packages/react-table/src/demos/index.ts | 2 - packages/react-templates/package.json | 14 ++ packages/react-tokens/package.json | 14 ++ 71 files changed, 227 insertions(+), 543 deletions(-) rename packages/react-core/src/{demos => helpers}/DashboardHeader.tsx (97%) rename packages/react-core/src/{demos => helpers}/DashboardWrapper.tsx (97%) delete mode 100644 packages/react-table/src/demos/DashboardHeader.tsx delete mode 100644 packages/react-table/src/demos/DashboardWrapper.tsx diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index a5f121bd315..2fc43ba90d4 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -2,9 +2,27 @@ "name": "@patternfly/react-charts", "version": "8.3.0-prerelease.21", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", + "exports": { + "./echarts": { + "import": "./dist/esm/echarts/index.js", + "require": "./dist/js/echarts/index.js" + }, + "./victory": { + "import": "./dist/esm/victory/index.js", + "require": "./dist/js/victory/index.js" + }, + "./package.json": "./package.json", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "typesVersions": { "*": { "echarts": [ diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index 335ac261932..5842fab0dee 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -2,9 +2,23 @@ "name": "@patternfly/react-code-editor", "version": "6.3.0-prerelease.33", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js" + }, + "./package.json": "./package.json", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "patternfly:src": "src/", "sideEffects": false, "publishConfig": { diff --git a/packages/react-core/package.json b/packages/react-core/package.json index cbac01279da..d9c80c590da 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -2,9 +2,23 @@ "name": "@patternfly/react-core", "version": "6.3.0-prerelease.33", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js" + }, + "./package.json": "./package.json", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "typesVersions": { "*": { "next": [ diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md index 9099b7a64fb..878f398a21e 100644 --- a/packages/react-core/src/demos/AlertGroup.md +++ b/packages/react-core/src/demos/AlertGroup.md @@ -6,8 +6,8 @@ section: components import { useEffect, useState } 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 '@patternfly/react-core/dist/js/demos/DashboardWrapper'; -import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; +import { DashboardWrapper } from '@patternfly/react-core'; +import { DashboardHeader } from '@patternfly/react-core'; ## Demos diff --git a/packages/react-core/src/demos/BackToTop.md b/packages/react-core/src/demos/BackToTop.md index f1b362c9d00..8636959daaf 100644 --- a/packages/react-core/src/demos/BackToTop.md +++ b/packages/react-core/src/demos/BackToTop.md @@ -2,8 +2,9 @@ id: Back to top section: components --- + import { useState } from 'react'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -12,4 +13,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard Note that `tabIndex={0}` is added to the scrolling `PageSection` of the page to allow keyboard users the ability to focus and scroll. ```js isFullscreen file="./examples/BackToTop/BackToTopNameDemo.tsx" + ``` diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md index f933f6ff7db..3f9f750f22f 100644 --- a/packages/react-core/src/demos/Banner.md +++ b/packages/react-core/src/demos/Banner.md @@ -2,10 +2,11 @@ id: Banner section: components --- + import { Fragment } from 'react'; import { css } from '@patternfly/react-styles'; import display from '@patternfly/react-styles/css/utilities/Display/display'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -15,7 +16,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import { Fragment } from 'react'; import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; import display from '@patternfly/react-styles/css/utilities/Display/display'; @@ -48,7 +49,7 @@ class BannerDemo extends React.Component {

- + {Array.from({ length: 30 }).map((_value, index) => ( @@ -81,7 +82,7 @@ import { PageSection, Content } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; import display from '@patternfly/react-styles/css/utilities/Display/display'; @@ -114,7 +115,7 @@ class BannerDemo extends React.Component { -

Main title

+

Main title

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
@@ -122,7 +123,7 @@ class BannerDemo extends React.Component {

- + {Array.from({ length: 30 }).map((_value, index) => ( diff --git a/packages/react-core/src/demos/CardView/CardView.md b/packages/react-core/src/demos/CardView/CardView.md index 42d0121f6cc..e4bde287879 100644 --- a/packages/react-core/src/demos/CardView/CardView.md +++ b/packages/react-core/src/demos/CardView/CardView.md @@ -19,7 +19,7 @@ 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/CardView/examples/CardViewData.jsx'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -28,4 +28,5 @@ This demonstrates how you can assemble a full page view that contains a grid of ### Card view ```js file="./examples/CardView.tsx" isFullscreen + ``` diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx index 2ebb1370775..41f7a497c71 100644 --- a/packages/react-core/src/demos/CardView/examples/CardView.tsx +++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx @@ -47,7 +47,7 @@ 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/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx'; export const CardViewBasic: React.FunctionComponent = () => { diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx index 3e08e1656fe..a943a8fa423 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx @@ -17,7 +17,7 @@ import { Title } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; export const DataListActionable: React.FunctionComponent = () => { const [isOpen, setIsOpen] = useState(false); diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx index 1452fa1837c..b5747ad3c5b 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx @@ -21,7 +21,7 @@ import { ToolbarContent } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index 371720dfbce..6d653f4818e 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx @@ -26,7 +26,7 @@ import { PageSection } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx index 229aa2e6b8c..58b2310cfc2 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx @@ -23,7 +23,7 @@ import { PaginationVariant } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index e44a1ac57a4..ecd183e3f16 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -16,7 +16,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData'; ## Demos @@ -30,14 +30,17 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData'; ### Expandable control in toolbar ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen + ``` ### Actionable ```js file="./DataList/examples/DataListActionable.tsx" isFullscreen + ``` ### Static bottom pagination ```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen -``` \ No newline at end of file + +``` diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 5d7c75ec2a6..0b7565d976c 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -6,16 +6,18 @@ section: components import { useRef, useState } from 'react'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos ### Basic ```js file='./examples/DescriptionListBasic.tsx' isFullscreen + ``` ### In drawer ```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen + ``` diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 6e5c7d8d246..aaf88ae296e 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -14,7 +14,7 @@ import { FlexItem } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; export const DescriptionListBasic: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx index 186468edcd2..a0b78521ba6 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx @@ -17,7 +17,7 @@ import { Button, Title } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListInDrawer: React.FunctionComponent = () => { diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index 9a84154de56..cba84e20ad0 100644 --- a/packages/react-core/src/demos/JumpLinks.md +++ b/packages/react-core/src/demos/JumpLinks.md @@ -6,7 +6,7 @@ section: components import { useContext, useEffect, useRef, useState } from 'react'; import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead'; import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -37,7 +37,7 @@ import { Content, getResizeObserver } from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead'; ScrollspyH2 = () => { @@ -59,8 +59,6 @@ ScrollspyH2 = () => { const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight; jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding); } - - }, [isVertical]); getResizeObserver( @@ -79,8 +77,8 @@ ScrollspyH2 = () => { return ( - - + <PageSection aria-labelledby="main-title"> + <Title headingLevel="h1" size="2xl" id="main-title"> Main title { onChange={(_event, check) => setIsVertical(check)} /> - + - + { expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }} isExpanded > - {headings.map(i => ( + {headings.map((i) => ( {`Heading ${i}`} @@ -113,9 +111,9 @@ ScrollspyH2 = () => { - + - {headings.map(i => ( + {headings.map((i) => (

{`Heading ${i}`} @@ -158,4 +156,5 @@ This demo shows how jump links can be used in combination with a drawer. This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component. ```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js" + ``` diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index 8e9ff804270..e564a126dd3 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -12,52 +12,61 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; -import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; -import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; +import { DashboardBreadcrumb } from '@patternfly/react-core'; +import { DashboardHeader } from '@patternfly/react-core'; ## Demos ### Default nav ```js file='./examples/Nav/NavDefault.tsx' isFullscreen + ``` ### Grouped nav ```js file='./examples/Nav/NavGrouped.tsx' isFullscreen + ``` ### Expandable nav ```js file='./examples/Nav/NavExpandable.tsx' isFullscreen + ``` ### Horizontal nav ```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen + ``` ### Horizontal subnav ```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen + ``` ### Horizontal nav with horizontal subnav ```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen + ``` ### Manual nav ```js file='./examples/Nav/NavManual.tsx' isFullscreen + ``` ### Flyout nav ```js file='./examples/Nav/NavFlyout.tsx' isFullscreen + ``` ### Drilldown nav ```js isFullscreen file="./examples/Nav/NavDrilldown.tsx" + ``` diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index a3040769493..5ffff49121e 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -25,13 +25,14 @@ 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/CardView/examples/CardViewData.jsx'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos ### Primary-detail full page ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen + ``` ### Primary-detail content padding @@ -43,16 +44,19 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Primary-detail card view ```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen + ``` ### Primary-detail simple list in card ```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen + ``` ### Primary-detail data list in card ```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen + ``` ### Primary-detail inline modifier diff --git a/packages/react-core/src/demos/Skeleton.md b/packages/react-core/src/demos/Skeleton.md index bd2a63db01f..0019d60f8e0 100644 --- a/packages/react-core/src/demos/Skeleton.md +++ b/packages/react-core/src/demos/Skeleton.md @@ -2,7 +2,8 @@ id: Skeleton section: components --- -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -10,4 +11,4 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ```ts file='./examples/Skeleton/SkeletonCard.tsx' isFullscreen -``` \ No newline at end of file +``` diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index aae416129a4..2d58617c0a5 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -15,7 +15,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import display from '@patternfly/react-styles/css/utilities/Display/display'; import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; ## Demos @@ -46,7 +46,7 @@ import { import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; TabsOpenDemo = () => { const [activeTabKey, setActiveTabKey] = useState(0); @@ -159,7 +159,7 @@ TabsOpenDemo = () => { return ( {tabsBreadcrumb} - + { - + Details} tabContentId={`tabContent${0}`} /> YAML} tabContentId={`tabContent${1}`} /> @@ -187,7 +187,7 @@ TabsOpenDemo = () => { Terminal} tabContentId={`tabContent${4}`} /> - + @@ -236,7 +236,7 @@ import { import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core'; TabsOpenWithSecondaryTabsDemo = () => { const [activeTabKey, setActiveTabKey] = useState(0); @@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => { return ( {tabsBreadcrumb} - + { - + Details} tabContentId={`tabContent${0}`} /> YAML} tabContentId={`tabContent${1}`} /> @@ -383,7 +383,7 @@ TabsOpenWithSecondaryTabsDemo = () => { Terminal} tabContentId={`tabContent${4}`} /> - + ); -export const DashboardWrapper: React.FC = ({ +export const DashboardWrapper: FC = ({ children, mainContainerId, banner, diff --git a/packages/react-core/src/helpers/index.ts b/packages/react-core/src/helpers/index.ts index c2aee2b6820..50a6828950d 100644 --- a/packages/react-core/src/helpers/index.ts +++ b/packages/react-core/src/helpers/index.ts @@ -11,3 +11,5 @@ export * from './KeyboardHandler'; export * from './resizeObserver'; export * from './useInterval'; export * from './datetimeUtils'; +export * from './DashboardHeader'; +export * from './DashboardWrapper'; diff --git a/packages/react-drag-drop/package.json b/packages/react-drag-drop/package.json index f51d21eaf15..5ce79de7c3a 100644 --- a/packages/react-drag-drop/package.json +++ b/packages/react-drag-drop/package.json @@ -2,9 +2,23 @@ "name": "@patternfly/react-drag-drop", "version": "6.3.0-prerelease.33", "description": "PatternFly drag and drop solution", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js" + }, + "./package.json": "./package.json", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "sideEffects": false, "publishConfig": { "access": "public" diff --git a/packages/react-table/package.json b/packages/react-table/package.json index 0bf0aa027f8..86cca4b9025 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -2,8 +2,22 @@ "name": "@patternfly/react-table", "version": "6.3.0-prerelease.33", "description": "This library provides a set of React table components for use with the PatternFly 4", + "type": "module", "main": "dist/js/index.js", "module": "dist/esm/index.js", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/js/index.js" + }, + "./package.json": "./package.json", + "./*": { + "import": "./dist/esm/*", + "require": "./dist/js/*" + }, + "./dist/*": "./dist/*", + "./src/*": "./src/*" + }, "types": "dist/esm/index.d.ts", "typesVersions": { "*": { diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx deleted file mode 100644 index 1798c9cbb99..00000000000 --- a/packages/react-table/src/demos/DashboardHeader.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import { useState } from 'react'; -import { - Avatar, - Button, - ButtonVariant, - Divider, - Dropdown, - DropdownGroup, - DropdownItem, - DropdownList, - Masthead, - MastheadMain, - MastheadToggle, - MastheadBrand, - MastheadLogo, - MastheadContent, - MenuToggle, - NotificationBadge, - NotificationBadgeVariant, - Toolbar, - ToolbarContent, - ToolbarGroup, - ToolbarItem, - PageToggleButton -} from '@patternfly/react-core'; -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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg'; - -interface DashboardHeaderProps { - /** Render custom notification badge */ - notificationBadge?: React.ReactNode; -} - -export const DashboardHeader: React.FC = ({ notificationBadge }) => { - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); - - const patternflyLogo = ( - - PatternFly - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - - const kebabDropdownItems = ( - <> - - Settings - - - Help - - - ); - - const userDropdownItems = ( - <> - My profile - User management - Logout - - ); - - const onDropdownToggle = () => { - setIsDropdownOpen(!isDropdownOpen); - }; - - const onDropdownSelect = () => { - setIsDropdownOpen(false); - }; - - const onKebabDropdownToggle = () => { - setIsKebabDropdownOpen(!isKebabDropdownOpen); - }; - - const onKebabDropdownSelect = () => { - setIsKebabDropdownOpen(false); - }; - - const onFullKebabToggle = () => { - setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen); - }; - - const onFullKebabSelect = () => { - setIsFullKebabDropdownOpen(false); - }; - - return ( - - - - - - - {patternflyLogo} - - - - - - - {notificationBadge ?? ( - - {}} - /> - - )} - - -