Next Gen UI Patternfly React Renderer

This module is part of the Next Gen UI Agent project

This npm package provides a collection of reusable Patternfly React components to support dynamic UI rendering for Next Gen UI Agent.

Provides:

• Patternfly React Components
  • ImageComponent
  • OneCardWrapper
  • TableWrapper

Installation

Pre-requisites:

• React 18+
• TypeScript

npm install @rhngui/patternfly-react-renderer

Usage Examples

OneCard Component

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",
  fields: [
    {
      name: "Title",
      data_path: "movie.title",
      data: ["Toy Story"],
    },
    {
      name: "Year",
      data_path: "movie.year",
      data: [1995],
    },
    {
      name: "Genres",
      data_path: "movie.genres",
      data: ["Animation", "Adventure"],
    },
  ],
  imageSize: "md",
  id: "movie-card",
};

function App() {
  return <OneCardWrapper {...mockData} />;
}

Image Component

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

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} />;
}

Links

• Documentation
• Source Code
• Contributing