Merge branch 'main' into NGUI-176-video-component

Author: Hrithik-Gavankar

README.md

@@ -9,19 +9,21 @@ This npm package provides a collection of reusable Patternfly React components t
 
 ## Provides:
 
-* Patternfly React Components
+- Patternfly React Components
   - OneCardWrapper
+  - ImageComponent
   - TableWrapper
   - VideoPlayerWrapper
 * Dynamic Component Renderer
   - DynamicComponents
 * Supported Components
-  - `one-card`, `table`, `video-player`
+  - `one-card`, `image`, `table`, `video-player`
   - `video-player` supports YouTube video URLs and direct video file URLs
 
 ## Installation
 
 **Pre-requisites:**
+
 - React 18+
 - TypeScript
 
@@ -34,27 +36,28 @@ npm install @rhngui/patternfly-react-renderer
 ### OneCard Component
 
 ```jsx
-import { OneCardWrapper } from '@rhngui/patternfly-react-renderer';
+import { OneCardWrapper } from "@rhngui/patternfly-react-renderer";
 
 const mockData = {
   title: "Movie Details",
-  image: "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
+  image:
+    "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
   fields: [
     {
       name: "Title",
       data_path: "movie.title",
-      data: ["Toy Story"]
+      data: ["Toy Story"],
     },
     {
       name: "Year",
       data_path: "movie.year",
-      data: [1995]
+      data: [1995],
     },
     {
       name: "Genres",
       data_path: "movie.genres",
-      data: ["Animation", "Adventure"]
-    }
+      data: ["Animation", "Adventure"],
+    },
   ],
   imageSize: "md",
   id: "movie-card",
@@ -65,6 +68,66 @@ function App() {
 }
 ```
 
+### Image Component
+
+```jsx
+import { DynamicComponent } from "@rhngui/patternfly-react-renderer";
+
+const imageConfig = {
+  component: "image",
+  title: "Movie Poster",
+  image:
+    "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
+  id: "movie-poster-image",
+};
+
+function App() {
+  return <DynamicComponent config={imageConfig} />;
+}
+```
+
+### Table Component
+
+```jsx
+import { DynamicComponent } from "@rhngui/patternfly-react-renderer";
+
+const tableConfig = {
+  component: "table",
+  title: "Movie Statistics",
+  id: "movie-stats-table",
+  fields: [
+    {
+      name: "Movie Title",
+      data_path: "movies.title",
+      data: ["Toy Story", "Finding Nemo", "The Incredibles"],
+    },
+    {
+      name: "Release Year",
+      data_path: "movies.year",
+      data: [1995, 2003, 2004],
+    },
+    {
+      name: "Genres",
+      data_path: "movies.genres",
+      data: [
+        ["Animation", "Adventure"],
+        ["Animation", "Adventure"],
+        ["Animation", "Action"],
+      ],
+    },
+    {
+      name: "Rating",
+      data_path: "movies.rating",
+      data: [8.3, 8.1, 8.0],
+    },
+  ],
+};
+
+function App() {
+  return <DynamicComponent config={tableConfig} />;
+}
+```
+
 ### VideoPlayer Component
 
 ```jsx
@@ -82,13 +145,8 @@ function App() {
 }
 ```
 
-**Supported Video Formats:**
-- YouTube URLs (e.g., `https://www.youtube.com/embed/VIDEO_ID`)
-- Direct video file URLs (e.g., `https://example.com/video.mp4`)
-- Automatic thumbnail generation for YouTube videos
-- Poster image fallback support
-
 ## Links
-* [Documentation](https://redhat-ux.github.io/next-gen-ui-agent/guide/renderer/patternfly_npm/)
-* [Source Code](https://github.com/RedHat-UX/next-gen-ui-agent/tree/main/libs_js/next_gen_ui_react)
-* [Contributing](https://redhat-ux.github.io/next-gen-ui-agent/development/contributing/)
+
+- [Documentation](https://redhat-ux.github.io/next-gen-ui-agent/guide/renderer/patternfly_npm/)
+- [Source Code](https://github.com/RedHat-UX/next-gen-ui-agent/tree/main/libs_js/next_gen_ui_react)
+- [Contributing](https://redhat-ux.github.io/next-gen-ui-agent/development/contributing/)

src/components/DynamicComponents.tsx

@@ -1,5 +1,7 @@
 import "@patternfly/react-core/dist/styles/base.css";
 import "@patternfly/chatbot/dist/css/main.css";
+import "../global.css";
+
 import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
 import map from "lodash/map";

src/components/ImageComponent.tsx

@@ -0,0 +1,43 @@
+import { Card, CardBody, CardHeader, CardTitle } from "@patternfly/react-core";
+import React, { useState } from "react";
+
+interface ImageComponentProps {
+  component: "image";
+  id: string;
+  image?: string | null;
+  title: string;
+  className?: string;
+}
+
+const ImageComponent: React.FC<ImageComponentProps> = ({
+  id,
+  image,
+  title,
+  className,
+}) => {
+  const [imageError, setImageError] = useState(false);
+
+  return (
+    <Card id={id} className={className}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardBody>
+        {image && !imageError ? (
+          <img
+            src={image}
+            alt={title}
+            className="image-component-img"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <div className="image-component-placeholder">
+            {imageError ? "Image failed to load" : "No image provided"}
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ImageComponent;

src/components/TableWrapper.tsx

@@ -1,9 +1,4 @@
-import {
-  Chart,
-  ChartBar,
-  ChartAxis,
-  ChartThemeColor,
-} from "@patternfly/react-charts/victory";
+import { Card, CardBody } from "@patternfly/react-core";
 import {
   Table,
   Thead,
@@ -13,118 +8,83 @@ import {
   Td,
   Caption,
 } from "@patternfly/react-table";
-import { useState } from "react";
 
-const TableWrapper = ({
-  columns,
-  rows,
-  caption,
-  variant,
-  graph,
-  selectable = false,
-  onRowSelect,
-  actions,
-  setCustomData,
-}) => {
-  const [selectedRows, setSelectedRows] = useState([]);
+interface FieldData {
+  name: string;
+  data_path: string;
+  data: (string | number | boolean | null | (string | number)[])[];
+}
 
-  const toggleRow = (index) => {
-    const newSelected = selectedRows.includes(index)
-      ? selectedRows.filter((i) => i !== index)
-      : [...selectedRows, index];
-    setSelectedRows(newSelected);
+interface TableWrapperProps {
+  component: "table";
+  title: string;
+  id: string;
+  fields: FieldData[];
+  className?: string;
+}
 
-    onRowSelect?.(newSelected.map((i) => rows[i]));
-    setCustomData(newSelected.map((i) => rows[i]));
-  };
+const TableWrapper = (props: TableWrapperProps) => {
+  const { title, id, fields, className } = props;
+  // Transform fields data into table format
+  const transformFieldsToTableData = () => {
+    if (!fields || fields.length === 0) return { columns: [], rows: [] };
+
+    // Find the maximum number of data items across all fields
+    const maxDataLength = Math.max(...fields.map((field) => field.data.length));
+
+    // Create columns from field names
+    const transformedColumns = fields.map((field) => ({
+      key: field.name,
+      label: field.name,
+    }));
 
-  const toggleAllRows = () => {
-    const allSelected = selectedRows.length === rows.length;
-    const newSelected = allSelected ? [] : rows.map((_, i) => i);
-    setSelectedRows(newSelected);
+    // Create rows based on the maximum data length
+    const transformedRows = [];
+    for (let i = 0; i < maxDataLength; i++) {
+      const row: Record<string, string | number | null> = {};
+      fields.forEach((field) => {
+        const value = field.data[i];
+        if (value === null || value === undefined) {
+          row[field.name] = "";
+        } else if (Array.isArray(value)) {
+          row[field.name] = value.join(", ");
+        } else {
+          row[field.name] = String(value);
+        }
+      });
+      transformedRows.push(row);
+    }
 
-    onRowSelect?.(newSelected.map((i) => rows[i]));
-    setCustomData(newSelected.map((i) => rows[i]));
+    return { columns: transformedColumns, rows: transformedRows };
   };
 
-  const graphData =
-    graph && graph.column
-      ? rows.map((row) => ({ x: row[columns[0].key], y: row[graph.column] }))
-      : [];
+  const { columns, rows } = transformFieldsToTableData();
 
   return (
-    <div>
-      <Table variant={variant} borders={variant !== "compactBorderless"}>
-        {caption && (
-          <Caption>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <span>{caption}</span>
-              {actions}
-            </div>
-          </Caption>
-        )}
-        <Thead>
-          <Tr>
-            {selectable && (
-              <Th>
-                <input
-                  type="checkbox"
-                  aria-label="Select all rows"
-                  checked={selectedRows.length === rows.length}
-                  onChange={toggleAllRows}
-                />
-              </Th>
-            )}
-            {columns.map((col, index) => (
-              <Th key={index}>{col.label}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {rows.map((row, rowIndex) => (
-            <Tr key={rowIndex} data-testid={`row-${row.id ?? rowIndex}`}>
-              {selectable && (
-                <Td>
-                  <input
-                    type="checkbox"
-                    aria-label={`Select row ${rowIndex}`}
-                    checked={selectedRows.includes(rowIndex)}
-                    onChange={() => toggleRow(rowIndex)}
-                  />
-                </Td>
-              )}
-              {columns.map((col, colIndex) => (
-                <Td key={colIndex}>{row[col.key]}</Td>
+    <Card id={id} className={className}>
+      <CardBody>
+        <Table variant="compact" borders>
+          <Caption>{title}</Caption>
+          <Thead>
+            <Tr>
+              {columns.map((col, index) => (
+                <Th key={index}>{col.label}</Th>
               ))}
             </Tr>
-          ))}
-        </Tbody>
-      </Table>
-
-      {graph && (
-        <div style={{ height: "300px" }}>
-          <Chart
-            ariaTitle={graph.title || "Chart"}
-            domainPadding={{ x: [30, 25] }}
-            height={300}
-            width={600}
-            themeColor={ChartThemeColor.multiUnordered}
-          >
-            <ChartAxis />
-            <ChartAxis dependentAxis />
-            <ChartBar data={graphData} barWidth={30} />
-          </Chart>
-        </div>
-      )}
-    </div>
+          </Thead>
+          <Tbody>
+            {rows.map((row, rowIndex) => (
+              <Tr key={rowIndex} data-testid={`row-${rowIndex}`}>
+                {columns.map((col, colIndex) => (
+                  <Td key={colIndex}>{row[col.key]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </CardBody>
+    </Card>
   );
 };
 
 export default TableWrapper;
-