fix(misc): fixed broken CodeSandbox demos (#9519)

* update import paths * fix(table): update data imports to absolute * fix remaining codesandbox demos
patternfly · Sep 21, 2023 · c02dcbc · c02dcbc
1 parent 2da108e
commit c02dcbc
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 29 deletions.
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
@@ -12,7 +12,7 @@ import {
   DropdownItem
 } from '@patternfly/react-core';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
-import pfIcon from 'pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg';
 
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
 

diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
@@ -24,14 +24,13 @@ 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 './examples/DashboardWrapper';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 ## Demos
 
 ### Primary-detail full page
 
 ```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
-
 ```
 
 ### Primary-detail content padding
@@ -554,7 +553,7 @@ class PrimaryDetailCardView extends React.Component {
               }}
               selectableActions={{ isChecked: selectedItems.includes(product.id), selectableActionId: `selectable-actions-item-${product.id}`, selectableActionAriaLabelledby: `${'card-view-' + key}`, name: `check-${product.id}`, onChange: () => this.onClick(product.id) }}
             >
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
+              <img src={require(icons[product.icon])} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
             <CardTitle>
               <Button variant="link" isInline onClick={() => this.onCardClick(product.id)} aria-expanded={activeCard === product.id}>

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
@@ -50,7 +50,7 @@ import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { rows, columns } from './table-demos/sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 ## Demos
 
@@ -109,9 +109,10 @@ import {
   PaginationVariant,
   Text,
   TextContent,
+  TextVariants,
   MenuToggle
 } from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import { Table as TableDeprecated, TableHeader, TableBody, TableText } from '@patternfly/react-table/deprecated';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -855,7 +856,7 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { rows, columns } from '';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 class FilterTableDemo extends React.Component {
   constructor(props) {
@@ -1457,7 +1458,6 @@ import {
   Bullseye,
   Button,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
@@ -1468,6 +1468,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 export const TableEmptyState: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1521,14 +1522,14 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
   EmptyStateHeader,
   PageSection,
   Spinner
 } from '@patternfly/react-core';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 export const LoadingStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1570,7 +1571,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
@@ -1579,6 +1579,8 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 export const ErrorStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

diff --git a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
@@ -15,8 +15,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const BulkSelectTableDemo = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);

diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {
   Button,
+  Card,
   DataList,
   DataListCheck,
   DataListItem,
@@ -17,20 +18,19 @@ import {
   OverflowMenu,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OptionsMenu,
-  OptionsMenuToggle,
+  PageSection,
   Pagination,
   PaginationVariant,
   Text,
-  TextContent
+  TextContent,
+  TextVariants
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const ColumnManagementAction = () => {
   const defaultColumns = columns;

diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.jsx b/packages/react-table/src/docs/demos/table-demos/Compact.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Button,
   Card,
+  Label,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -14,11 +15,10 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const CompactTable = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);

diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -7,10 +7,19 @@ import {
   DropdownList,
   Flex,
   FlexItem,
+  Label,
   MenuToggle,
   MenuToggleElement,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuDropdownItem,
+  OverflowMenuGroup,
+  OverflowMenuItem,
   PageSection,
+  PageSectionVariants,
   Pagination,
+  Select,
   SelectOption,
   SelectList,
   SelectGroup,
@@ -31,8 +40,7 @@ import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amou
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const ComposableTableSortable = () => {
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
@@ -89,7 +97,7 @@ export const ComposableTableSortable = () => {
     setPerPage(newPerPage);
   };
 
-  renderPagination = (variant) => (
+  const renderPagination = (variant) => (
     <Pagination
       isCompact
       itemCount={rows.length}

diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
@@ -15,11 +15,10 @@ import {
   Select,
   SelectOption
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StaticBottomPagination = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);

diff --git a/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx b/packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from '../examples/Data';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StickyHeader: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {