simplify

Author: jschuler

app/README.md

@@ -54,6 +54,8 @@ When you add a component to the registry, it automatically appears in:
 
 ## Adding a New Component Demo
 
+To add a new component to the demo app, follow these **3 simple steps**:
+
 ### Step 1: Add Demo Data
 
 In `src/demo/demoData.ts`, add your demo data:
@@ -75,15 +77,23 @@ export const myNewComponentDemoVariation = {
 };
 ```
 
+**Important:** Always add `as const` to the `component` property.
+
 ### Step 2: Register in Component Registry
 
-In `src/config/componentRegistry.ts`, add an entry to the `componentRegistry` array:
+In `src/config/componentRegistry.ts`:
+
+1. **Import your demo data** at the top:
+```typescript
+import { myNewComponentDemo, myNewComponentDemoVariation } from "../demo/demoData";
+```
 
+2. **Add an entry** to the `componentRegistry` array:
 ```typescript
 {
-  id: "mynewcomponent",           // Unique ID
+  id: "mynewcomponent",           // Unique ID (used in URL and componentMap)
   name: "MyNewComponent",         // Display name
-  path: "/mynewcomponent",        // Route path
+  path: "/component/mynewcomponent", // Route path (must follow /component/:id pattern)
   sourceUrl: "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/MyNewComponent.tsx",
   componentImportPath: "@local-lib/components/MyNewComponent",
   examples: [
@@ -93,73 +103,37 @@ In `src/config/componentRegistry.ts`, add an entry to the `componentRegistry` ar
 }
 ```
 
-### Step 3: Create Component Page
+### Step 3: Map Component in ComponentDemo
 
-Create `src/pages/MyNewComponent.tsx`:
+In `src/pages/ComponentDemo.tsx`:
 
+1. **Import your component** at the top:
 ```typescript
 import MyNewComponent from "@local-lib/components/MyNewComponent";
-import {
-  CodeBlock,
-  CodeBlockCode,
-  Content,
-  ContentVariants,
-  Divider,
-} from "@patternfly/react-core";
-
-import { myNewComponentDemo, myNewComponentDemoVariation } from "../demo/demoData";
-
-export default function MyNewComponentPage() {
-  return (
-    <div>
-      {/* First Example */}
-      <Content component={ContentVariants.h3}>Basic Example</Content>
-      <MyNewComponent {...myNewComponentDemo} />
-      <Content component={ContentVariants.h4} style={{ marginTop: 16 }}>
-        Props
-      </Content>
-      <CodeBlock>
-        <CodeBlockCode>
-          {JSON.stringify(myNewComponentDemo, null, 2)}
-        </CodeBlockCode>
-      </CodeBlock>
-
-      {/* Divider between examples */}
-      <Divider style={{ marginTop: 32, marginBottom: 32 }} />
-
-      {/* Second Example */}
-      <Content component={ContentVariants.h3}>Variation</Content>
-      <MyNewComponent {...myNewComponentDemoVariation} />
-      <Content component={ContentVariants.h4} style={{ marginTop: 16 }}>
-        Props
-      </Content>
-      <CodeBlock>
-        <CodeBlockCode>
-          {JSON.stringify(myNewComponentDemoVariation, null, 2)}
-        </CodeBlockCode>
-      </CodeBlock>
-    </div>
-  );
-}
 ```
 
-### Step 4: Add Route
-
-In `src/App.tsx`, import and add the route:
-
+2. **Add it to the `componentMap`**:
 ```typescript
-// Add import
-import MyNewComponentPage from "./pages/MyNewComponent";
-
-// Add route in the Routes section
-<Route path="/mynewcomponent" element={<MyNewComponentPage />} />
+const componentMap: Record<string, React.ComponentType<Record<string, unknown>>> = {
+  // ... existing components
+  mynewcomponent: MyNewComponent,  // key must match the id from registry
+};
 ```
 
-**That's it!** The component will automatically appear in:
-- Sidebar navigation
-- Home page links
-- Page title header
-- Source code link
+**That's it!** 🎉 The component will now **automatically**:
+- ✅ Appear in the sidebar navigation
+- ✅ Have its own page at `/component/mynewcomponent`
+- ✅ Display all examples with their props
+- ✅ Show page title and "View Source" link
+- ✅ Include dividers between examples
+
+### Architecture Benefits
+
+This design uses a **component registry pattern** that:
+- Eliminates the need to create individual page files
+- Automatically generates navigation and routes
+- Makes it easy to add multiple examples per component
+- Keeps all configuration centralized
 
 ## Project Structure
 

app/src/App.tsx

@@ -20,14 +20,8 @@ import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 
 import { getComponentByPath } from "./config/componentRegistry";
 import Sidebar from "./layout/Sidebar";
-import DynamicComponentsPage from "./pages/DynamicComponents";
-import ErrorPlaceholderPage from "./pages/ErrorPlaceholder";
+import ComponentDemo from "./pages/ComponentDemo";
 import Home from "./pages/Home";
-import ImageComponentPage from "./pages/ImageComponent";
-import OneCardWrapperPage from "./pages/OneCardWrapper";
-import SetOfCardsWrapperPage from "./pages/SetOfCardsWrapper";
-import TableWrapperPage from "./pages/TableWrapper";
-import VideoPlayerWrapperPage from "./pages/VideoPlayerWrapper";
 
 function AppContent() {
   const location = useLocation();
@@ -73,7 +67,7 @@ function AppContent() {
                   rel="noopener noreferrer"
                   aria-label="View source on GitHub"
                 >
-                  <GithubIcon size="lg" />
+                  <GithubIcon />
                 </Button>
               </ToolbarItem>
             </ToolbarGroup>
@@ -129,13 +123,7 @@ function AppContent() {
         <div id={mainContainerId} tabIndex={-1}>
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/dynamic" element={<DynamicComponentsPage />} />
-            <Route path="/error" element={<ErrorPlaceholderPage />} />
-            <Route path="/image" element={<ImageComponentPage />} />
-            <Route path="/onecard" element={<OneCardWrapperPage />} />
-            <Route path="/setofcards" element={<SetOfCardsWrapperPage />} />
-            <Route path="/table" element={<TableWrapperPage />} />
-            <Route path="/video" element={<VideoPlayerWrapperPage />} />
+            <Route path="/component/:componentId" element={<ComponentDemo />} />
           </Routes>
         </div>
       </PageSection>

app/src/config/componentRegistry.ts

@@ -37,7 +37,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "dynamic",
     name: "DynamicComponents",
-    path: "/dynamic",
+    path: "/component/dynamic",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/DynamicComponents.tsx",
     componentImportPath: "@local-lib/components/DynamicComponents",
@@ -50,7 +50,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "error",
     name: "ErrorPlaceholder",
-    path: "/error",
+    path: "/component/error",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/ErrorPlaceholder.tsx",
     componentImportPath: "@local-lib/components/ErrorPlaceholder",
@@ -68,7 +68,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "image",
     name: "ImageComponent",
-    path: "/image",
+    path: "/component/image",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/ImageComponent.tsx",
     componentImportPath: "@local-lib/components/ImageComponent",
@@ -80,7 +80,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "onecard",
     name: "OneCardWrapper",
-    path: "/onecard",
+    path: "/component/onecard",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/OneCardWrapper.tsx",
     componentImportPath: "@local-lib/components/OneCardWrapper",
@@ -93,7 +93,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "setofcards",
     name: "SetOfCardsWrapper",
-    path: "/setofcards",
+    path: "/component/setofcards",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/SetOfCardsWrapper.tsx",
     componentImportPath: "@local-lib/components/SetOfCardsWrapper",
@@ -105,7 +105,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "table",
     name: "TableWrapper",
-    path: "/table",
+    path: "/component/table",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/TableWrapper.tsx",
     componentImportPath: "@local-lib/components/TableWrapper",
@@ -117,7 +117,7 @@ export const componentRegistry: ComponentConfig[] = [
   {
     id: "video",
     name: "VideoPlayerWrapper",
-    path: "/video",
+    path: "/component/video",
     sourceUrl:
       "https://github.com/RedHat-UX/next-gen-ui-react/blob/main/src/components/VideoPlayerWrapper.tsx",
     componentImportPath: "@local-lib/components/VideoPlayerWrapper",

app/src/pages/ComponentDemo.tsx

@@ -0,0 +1,89 @@
+
+import DynamicComponents from "@local-lib/components/DynamicComponents";
+import ErrorPlaceholder from "@local-lib/components/ErrorPlaceholder";
+import ImageComponent from "@local-lib/components/ImageComponent";
+import OneCardWrapper from "@local-lib/components/OneCardWrapper";
+import SetOfCardsWrapper from "@local-lib/components/SetOfCardsWrapper";
+import TableWrapper from "@local-lib/components/TableWrapper";
+import VideoPlayerWrapper from "@local-lib/components/VideoPlayerWrapper";
+import {
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  Divider,
+} from "@patternfly/react-core";
+import { useParams } from "react-router-dom";
+
+import { getComponentById } from "../config/componentRegistry";
+
+// Map component IDs to their actual React components
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const componentMap: Record<string, React.ComponentType<any>> = {
+  dynamic: DynamicComponents,
+  error: ErrorPlaceholder,
+  image: ImageComponent,
+  onecard: OneCardWrapper,
+  setofcards: SetOfCardsWrapper,
+  table: TableWrapper,
+  video: VideoPlayerWrapper,
+};
+
+export default function ComponentDemo() {
+  const { componentId } = useParams<{ componentId: string }>();
+
+  if (!componentId) {
+    return <div>Component not found</div>;
+  }
+
+  const config = getComponentById(componentId);
+
+  if (!config) {
+    return (
+      <div>
+        <Content component={ContentVariants.h3}>Component not found</Content>
+        <p>The component "{componentId}" does not exist in the registry.</p>
+      </div>
+    );
+  }
+
+  const Component = componentMap[componentId];
+
+  if (!Component) {
+    return (
+      <div>
+        <Content component={ContentVariants.h3}>Component not mapped</Content>
+        <p>
+          The component "{componentId}" exists in the registry but is not mapped
+          in ComponentDemo.tsx.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {config.examples.map((example, index) => (
+        <div key={index}>
+          {index > 0 && <Divider style={{ marginTop: 32, marginBottom: 32 }} />}
+
+          <Content component={ContentVariants.h3}>{example.title}</Content>
+
+          {/* Render the component with its data */}
+          {componentId === "dynamic" ? (
+            <Component config={example.data as Record<string, unknown>} />
+          ) : (
+            <Component {...(example.data as Record<string, unknown>)} />
+          )}
+
+          <Content component={ContentVariants.h4} style={{ marginTop: 16 }}>
+            Props
+          </Content>
+          <CodeBlock>
+            <CodeBlockCode>{JSON.stringify(example.data, null, 2)}</CodeBlockCode>
+          </CodeBlock>
+        </div>
+      ))}
+    </div>
+  );
+}