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
  • OneCardWrapper
  • TableWrapper
• Dynamic Component Renderer
  • DynamicComponents

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

Links

• Documentation
• Source Code
• Contributing