Next Gen UI Patternfly React Renderer

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

DEMO

This module is part of the Next Gen UI Agent project

Provides:

• Rendering for Next Gen UI Dynamic Componets using React components:
  • Implemented components: one-card, image, table, video-player, set-of-cards
  • video-player supports YouTube video URLs and direct video file URLs
  • set-of-cards displays multiple OneCard components in an auto-aligned grid layout
• Dynamic Component Renderer
  • DynamicComponent
• Patternfly React Components
  • OneCardWrapper
  • ImageComponent
  • TableWrapper
  • VideoPlayerWrapper
  • SetOfCardsWrapper

Installation

Pre-requisites:

• React 18+
• TypeScript

npm install @rhngui/patternfly-react-renderer

Usage Examples

Note: JSON configs used in examples are normally produced by Next Gen UI Agent.

OneCard Component

import DynamicComponent from "@rhngui/patternfly-react-renderer";

const onecardConfig = {
    component: "one-card",
    image: "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
    id: "one-card-id",
    title: "Toy Story Movie",
    fields: [
        {
            "name": "Title",
            "data_path": "$..movie.title",
            "data": [
                "Toy Story"
            ]
        },
        {
            "name": "Year",
            "data_path": "$..movie.year",
            "data": [
                1995
            ]
        },
        {
            "name": "Rating",
            "data_path": "$..movie.imdbRating",
            "data": [
                8.3
            ]
        },
        {
            "name": "Release Date",
            "data_path": "$..movie.released",
            "data": [
                "2022-11-02"
            ]
        }
    ]
}

function App() {
  return <DynamicComponent {onecardConfig} />;
}

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

VideoPlayer Component

import DynamicComponent from "@rhngui/patternfly-react-renderer";

const videoConfig = {
  component: "video-player",
  video: "https://www.youtube.com/embed/v-PjgYDrg70",
  video_img: "https://img.youtube.com/vi/v-PjgYDrg70/maxresdefault.jpg",
  title: "Toy Story Trailer",
};

function App() {
  return <DynamicComponent {videoConfig} />;
}

SetOfCards Component

import DynamicComponent from "@rhngui/patternfly-react-renderer";

const setOfCardsConfig = {
  component: "set-of-cards",
  id: "test-id",
  title: "My Favorite Movies",
  fields: [
    {
      data: ["Toy Story", "My Name is Khan"],
      data_path: "movie.title",
      name: "Title",
    },
    {
      data: [1995, 2003],
      data_path: "movie.year",
      name: "Year",
    },
    {
      data: [8.3, 8.5],
      data_path: "movie.imdbRating",
      name: "IMDB Rating",
    },
    {
      data: [
        ["Jim Varney", "Tim Allen", "Tom Hanks", "Don Rickles"],
        ["Shah Rukh Khan", "Kajol Devgan"],
      ],
      data_path: "actors[*]",
      name: "Actors",
    },
  ],
};

function App() {
  return <DynamicComponent config={setOfCardsConfig} />;
}

Links

• Documentation
• Source Code
• Component Demo
• Contributing Guide