chore(demo): Update demo to show a better example

packages/demo-app-ts/src/Demo.css

@@ -28,7 +28,7 @@
   --pf-v5-l-flex--FlexWrap: no-wrap;
 }
 .pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-c-form-control {
-  width: 85px;
+  width: 70px;
 }
 .pf-ri-topology-context-menu {
   z-index: 1050;

packages/demo-app-ts/src/Demos.ts

@@ -1,17 +1,17 @@
-import { TopologyPipelineDemo } from './demos/TopologyPipelineDemo';
+import { TopologyPipelineDemo } from './demos/pipelinesDemo/TopologyPipelineDemo';
 import { Basics } from './demos/Basics';
-import { StyleEdges, StyleGroups, StyleLabels, StyleNodes } from './demos/Styles';
+import { StyleEdges, StyleGroups, StyleLabels, StyleNodes } from './demos/stylesDemo/Styles';
 import { Selection } from './demos/Selection';
 import { PanZoom } from './demos/PanZoom';
 import { Layouts } from './demos/Layouts';
 import { Connectors } from './demos/Connectors';
 import { DragAndDrop } from './demos/DragDrop';
 import { Shapes } from './demos/Shapes';
 import { ContextMenus } from './demos/ContextMenus';
-import { TopologyPackage } from './demos/TopologyPackage';
+import { TopologyPackage } from './demos/topologyPackageDemo/TopologyPackage';
 import { ComplexGroup } from './demos/Groups';
 import { CollapsibleGroups } from './demos/CollapsibleGroups';
-import { StatusConnectors } from './demos/StatusConnectors';
+import { StatusConnectors } from './demos/statusConnectorsDemo/StatusConnectors';
 
 import './Demo.css';
 

packages/demo-app-ts/src/components/DefaultEdge.tsx → packages/demo-app-ts/src/components/DemoDefaultEdge.tsx

@@ -41,7 +41,7 @@ const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point })
   );
 });
 
-const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
+const DemoDefaultEdge: React.FunctionComponent<EdgeProps> = ({
   element,
   sourceDragRef,
   targetDragRef,
@@ -76,4 +76,4 @@ const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
   );
 };
 
-export default observer(DefaultEdge);
+export default observer(DemoDefaultEdge);

packages/demo-app-ts/src/components/DefaultGroup.tsx → packages/demo-app-ts/src/components/DemoDefaultGroup.tsx

@@ -25,7 +25,7 @@ type GroupProps = {
   WithDndDragProps &
   WithDndDropProps;
 
-const DefaultGroup: React.FunctionComponent<GroupProps> = ({
+const DemoDefaultGroup: React.FunctionComponent<GroupProps> = ({
   element,
   children,
   selected,
@@ -93,4 +93,4 @@ const DefaultGroup: React.FunctionComponent<GroupProps> = ({
   );
 };
 
-export default observer(DefaultGroup);
+export default observer(DemoDefaultGroup);

packages/demo-app-ts/src/components/defaultComponentFactory.ts

@@ -1,8 +1,8 @@
 import { ComponentType } from 'react';
 import { GraphElement, ComponentFactory, ModelKind, GraphComponent, DefaultNode } from '@patternfly/react-topology';
-import Edge from './DefaultEdge';
+import Edge from './DemoDefaultEdge';
 import MultiEdge from './MultiEdge';
-import Group from './DefaultGroup';
+import Group from './DemoDefaultGroup';
 import GroupHull from './GroupHull';
 
 const defaultComponentFactory: ComponentFactory = (

packages/demo-app-ts/src/demos/CollapsibleGroups.tsx

@@ -25,7 +25,7 @@ import { ToolbarGroup, ToolbarItem, Checkbox } from '@patternfly/react-core';
 import defaultLayoutFactory from '../layouts/defaultLayoutFactory';
 import data from '../data/group-types';
 import GroupHull from '../components/GroupHull';
-import Group from '../components/DefaultGroup';
+import Group from '../components/DemoDefaultGroup';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import defaultComponentFactory from '../components/defaultComponentFactory';
 

packages/demo-app-ts/src/demos/Connectors.tsx

@@ -29,7 +29,7 @@ import {
   GraphElementProps
 } from '@patternfly/react-topology';
 import defaultComponentFactory from '../components/defaultComponentFactory';
-import DefaultEdge from '../components/DefaultEdge';
+import DefaultEdge from '../components/DemoDefaultEdge';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import withTopologySetup from '../utils/withTopologySetup';
 import NodeRect from '../components/NodeRect';

packages/demo-app-ts/src/demos/Groups.tsx

@@ -15,7 +15,7 @@ import {
   GraphElement
 } from '@patternfly/react-topology';
 import defaultComponentFactory from '../components/defaultComponentFactory';
-import DefaultGroup from '../components/DefaultGroup';
+import DefaultGroup from '../components/DemoDefaultGroup';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import defaultLayoutFactory from '../layouts/defaultLayoutFactory';
 import withTopologySetup from '../utils/withTopologySetup';

packages/demo-app-ts/src/demos/Layouts.tsx

@@ -13,16 +13,16 @@ import {
 import defaultLayoutFactory from '../layouts/defaultLayoutFactory';
 import defaultComponentFactory from '../components/defaultComponentFactory';
 import GroupHull from '../components/GroupHull';
-import Group from '../components/DefaultGroup';
+import Group from '../components/DemoDefaultGroup';
 import DemoDefaultNode from '../components/DemoDefaultNode';
 import withTopologySetup from '../utils/withTopologySetup';
-import { generateDataModel } from '../data/generator';
-import stylesComponentFactory from '../components/stylesComponentFactory';
+import { generateDataModel } from './topologyPackageDemo/generator';
+import stylesComponentFactory from './stylesDemo/stylesComponentFactory';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 
 const getModel = (layout: string): Model => {
   // create nodes from data
-  const model = generateDataModel(200, 5, 20);
+  const model = generateDataModel(200, 5, 20, 0);
   model.graph = {
     id: 'g1',
     type: 'graph',